/* ==========================================================================
   The Council Leadership Academy
   Brand Guidelines, Volume One (July 2026): Council Navy, Brass, Crown Gold, Parchment;
   Deep Navy, Warm Ivory, Mist, Ink. Two dominant colours per surface: navy as ground or ink,
   gold or brass as the single accent. Fraunces for headlines and the wordmark, Cormorant
   Garamond for pull-quotes and the master line, Inter for body copy, navigation and UI.
   Arabic: Markazi Text, Amiri, IBM Plex Sans Arabic.
   Logical properties throughout, so Arabic pages mirror without extra rules.
   ========================================================================== */

/* ---------- fonts (self-hosted: no third-party requests) ---------- */
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-latin-opsz-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Markazi Text'; src: url('/assets/fonts/markazi-text-arabic-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Amiri'; src: url('/assets/fonts/amiri-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }

/* ---------- tokens ---------- */
:root {
  /* Colour system (guidelines, page 07). Primary: */
  --navy: #16273F;         /* Council Navy */
  --brass: #B4924D;        /* Brass */
  --gold: #DCB967;         /* Crown Gold */
  --parchment: #F6F2E9;    /* Parchment */
  /* Extended: */
  --navy-deep: #0F1C30;    /* Deep Navy */
  --ivory: #FCFAF4;        /* Warm Ivory */
  --mist: #9AA7BA;         /* Mist */
  --ink: #14181F;          /* Ink */
  /* Neutrals exactly as the guidelines' own pages use them */
  --white: #FFFFFF;        /* cards on parchment; headlines on navy */
  --stone: #E7E1D4;        /* card borders, the lockup hairline, pillar bars */
  --rule: #E0DACB;         /* dividers on parchment */
  --text: #4B5563;         /* body copy on light (6.9:1 on parchment) */
  --on-navy: #C6CEDA;      /* body copy on navy (9.6:1) */
  --nav-ink: #DCE3EE;      /* navigation on navy */
  /* Accessibility extensions (contrast measured on their backgrounds) */
  --brass-deep: #7A6130;   /* brass for small labels on light: 5.3:1 (brass itself is 2.6:1) */
  --slate: #566274;        /* 5.5:1 on parchment: secondary text on light */
  --field-line: #7E8899;   /* 3.2:1: form control borders */
  --signal: #9B2C2C;       /* 6.7:1: errors and closing deadlines */
  --signal-soft: #FBF0F0;
  --signal-on-dark: #F2A7A0;

  --surface: var(--white);
  --rule-strong: rgba(22, 39, 63, .22);
  --rule-dark: rgba(255, 255, 255, .14);

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-quote: 'Cormorant Garamond', Georgia, serif;
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Type scale (guidelines, page 08): display 38-48px, headline 24-28px, pull-quote 17-19px,
     body 13-15px at line-height 1.7-1.8, eyebrows and labels with wide tracking. */
  --fs-display: clamp(2.375rem, 1.95rem + 1.15vw, 3rem);
  --fs-display-s: clamp(2.375rem, 2.15rem + .6vw, 2.75rem);
  --fs-headline: clamp(1.5rem, 1.38rem + .35vw, 1.75rem);
  --fs-quote: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --fs-title: 1.1875rem;
  --fs-lede: 1.0625rem;
  --fs-body: .9375rem;
  --fs-small: .875rem;
  --fs-label: .6875rem;
  --fs-xs: .8125rem;       /* meta lines, hints, notes */
  --fs-h4: 1.0625rem;      /* small titles: list items, call-outs */
  --fs-h3: 1.125rem;       /* card titles */
  --fs-h3l: 1.25rem;       /* panel titles */
  --fs-h2s: 1.375rem;      /* the newsletter title */
  --fs-name: 1rem;         /* institution and destination names */
  /* One treatment for every photograph (guidelines, page 10): desaturated, warm, low contrast.
     A Council Navy layer in lighten mode then pulls the shadows toward navy (.photo-grade). */
  --photo-filter: grayscale(.3) sepia(.14) saturate(.82) contrast(.9);
  --lockup: 48px;          /* the seal's height in the horizontal lockup; everything else follows */
  --track-wide: .24em;
  --track-mid: .12em;
  --track-tight: -.015em;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section: clamp(4rem, 7.5vw, 6.5rem);
  --header-h: 72px;
  --radius: 4px;
  --radius-card: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dir: 1;
  --to-end: to right;
  --to-start: to left;
}

[dir='rtl'] {
  --f-display: 'Markazi Text', 'Fraunces', Georgia, serif;
  --f-quote: 'Amiri', 'Markazi Text', Georgia, serif;
  --f-ui: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  /* The guidelines set sizes for Latin type. Arabic letterforms read smaller at the same size,
     so each step is about 12% larger; the steps and their order stay the same. */
  --fs-display: clamp(2.625rem, 2.2rem + 1.3vw, 3.375rem);
  --fs-display-s: clamp(2.625rem, 2.4rem + .7vw, 3.05rem);
  --fs-headline: clamp(1.7rem, 1.55rem + .4vw, 1.95rem);
  --fs-quote: clamp(1.1875rem, 1.12rem + .2vw, 1.3125rem);
  --fs-title: 1.3125rem;
  --fs-lede: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: .9375rem;
  --fs-label: .875rem;
  --fs-xs: .9375rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.3rem;
  --fs-h3l: 1.4rem;
  --fs-h2s: 1.55rem;
  --fs-name: 1.15rem;
  /* Letter-spacing breaks the joins between Arabic letters: always zero in Arabic. */
  --track-wide: 0;
  --track-mid: 0;
  --track-tight: 0;
  --dir: -1;
  --to-end: to left;
  --to-start: to right;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[dir='rtl'] body { line-height: 1.85; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.16; letter-spacing: var(--track-tight); margin: 0; color: inherit; text-wrap: balance; }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4 { font-weight: 650; line-height: 1.3; }
p, li { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
dl, dd { margin: 0; }
figure { margin: 0; }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon-arrow { transition: translate .2s var(--ease); }
[dir='rtl'] .icon-arrow { transform: scaleX(-1); }

/* ---------- accessibility primitives ---------- */
.skip {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 300;
  background: var(--gold); color: var(--navy); font-weight: 600;
  padding: .85rem 1.3rem; border-radius: var(--radius); text-decoration: none;
}
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .page-head :focus-visible, .closing-cta :focus-visible, .m-cta :focus-visible, .cookie-bar :focus-visible { outline-color: var(--gold); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.on-light { background: var(--parchment); color: var(--text); }
.on-ivory { background: var(--ivory); }
.on-dark { background: var(--navy); color: var(--white); }
.on-deep { background: var(--navy-deep); color: var(--white); }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--brass-deep); margin-block-end: .9rem;
}
[dir='rtl'] .eyebrow { font-weight: 600; }
.on-dark .eyebrow, .on-deep .eyebrow, .hero .eyebrow, .page-head .eyebrow, .closing-cta .eyebrow, .site-footer .eyebrow { color: var(--gold); }
.lede { font-size: var(--fs-lede); color: var(--text); max-inline-size: 62ch; line-height: 1.7; }
.on-dark .lede, .on-deep .lede { color: var(--on-navy); }
/* Widths in px or in the heading's own font: a ch measured in body text squeezes big type (the draft's H17 bug). */
/* The thin rule (guidelines, page 09) between line one and line two, as in the wordmark lockup. */
.section-head { max-inline-size: 760px; margin-block-end: clamp(2rem, 4vw, 3rem); }
.rule { display: block; inline-size: 36px; block-size: 1px; background: var(--brass); }
.section-head .rule { margin-block: 0 1.15rem; }
.section-head h2 { font-size: var(--fs-headline); color: var(--navy); margin-block-end: .85rem; max-inline-size: 30ch; }
.on-dark .rule, .on-deep .rule, .band-dark .rule, .closing-cta .rule { background: var(--gold); }
.on-dark .section-head h2, .on-deep .section-head h2 { color: var(--white); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: 0 1.4rem; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--f-ui); font-size: var(--fs-small); font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), translate .16s var(--ease);
  white-space: nowrap;
}
.btn:active { translate: 0 1px; }
.btn-gold { background: var(--gold); color: var(--navy); }              /* navy text: white on gold is 1.9:1 */
.btn-gold:hover { background: var(--brass); }                            /* navy on brass: 5.2:1 */
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { border-color: var(--brass-deep); color: var(--brass-deep); }
.btn-ghost-light { border-color: rgba(255, 255, 255, .4); color: var(--white); background: transparent; }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { min-height: 44px; padding: 0 1.1rem; font-size: .8125rem; }
.btn-block { inline-size: 100%; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--fs-small);
  color: var(--brass-deep); text-decoration: none; min-height: 44px;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon-arrow, a:hover .go .icon-arrow, .match:hover .icon-arrow { translate: calc(4px * var(--dir)) 0; }
/* The guidelines' header: "View programs →" in white, underlined, beside the gold button. */
.link-arrow.on-dark { color: var(--white); background: none; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); }
.link-arrow.on-dark:hover { color: var(--gold); text-decoration-color: currentColor; }
.on-dark .link-arrow, .on-deep .link-arrow { color: var(--gold); }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: none; font-size: inherit; text-align: start; }
.linklike:hover { color: var(--gold); text-decoration: underline; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--navy); color: var(--white); border-block-end: 1px solid rgba(255, 255, 255, .08); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }

/* The horizontal lockup (guidelines, page 06): seal, a hairline with real air either side,
   then THE COUNCIL, the thin rule, LEADERSHIP ACADEMY. Proportions from the website header
   (page 11). The wordmark is never set in Arabic: it is the mark. */
/* The lockup is artwork: on Arabic pages it moves to the right of the header but never mirrors. */
.brand { display: inline-flex; align-items: center; direction: ltr; color: var(--white); text-decoration: none; flex: none; }
.brand-seal { inline-size: var(--lockup); block-size: var(--lockup); color: var(--white); flex: none; }
.brand-seal .s-ring { stroke-width: 1.8; }      /* small-size compensation: hairlines stay visible */
.brand-seal .s-ring-in { stroke-width: 1.1; }
.brand-divider { inline-size: 1px; block-size: calc(var(--lockup) * .85); margin-inline: calc(var(--lockup) * .23) calc(var(--lockup) * .27); background: rgba(255, 255, 255, .26); flex: none; }
.wordmark { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-family: 'Fraunces', Georgia, serif; color: var(--white); }
.wm-name { font-size: calc(var(--lockup) * .375); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.wm-rule { display: block; inline-size: calc(var(--lockup) * .54); block-size: 1px; margin-block: calc(var(--lockup) * .104) calc(var(--lockup) * .083); background: var(--gold); }
.wm-sub { font-family: 'Inter', system-ui, sans-serif; font-size: calc(var(--lockup) * .1875); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--on-navy); }
@media (max-width: 380px) { .site-header .brand { --lockup: 40px; } }
.primary-nav { margin-inline-start: auto; }
.primary-nav ul { display: flex; gap: clamp(1.2rem, 2.4vw, 2.2rem); list-style: none; }
.primary-nav a {
  display: block; padding-block: .55rem; color: var(--nav-ink); text-decoration: none;
  font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border-block-end: 1px solid transparent; transition: color .16s var(--ease), border-color .16s var(--ease);
}
[dir='rtl'] .primary-nav a { font-size: 1rem; letter-spacing: 0; font-weight: 500; }
.primary-nav a:hover, .primary-nav a[aria-current='page'] { color: var(--gold); border-block-end-color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.header-apply { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
[dir='rtl'] .header-apply { letter-spacing: 0; font-weight: 600; }
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; color: var(--nav-ink); text-decoration: none; font-size: .875rem; font-weight: 500; }
.lang-switch:lang(ar) { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1rem; }
.lang-switch:hover { color: var(--gold); }
.menu-toggle { display: none; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius); background: transparent; color: var(--white); }
.menu-toggle .when-open { display: none; }
.menu-toggle[aria-expanded='true'] .when-open { display: block; }
.menu-toggle[aria-expanded='true'] .when-closed { display: none; }
.mobile-menu { display: none; }
@media (max-width: 960px) {
  .primary-nav, .header-apply, .header-actions > .lang-switch { display: none; }
  .header-actions { margin-inline-start: auto; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu.is-open { display: block; border-block-start: 1px solid rgba(255, 255, 255, .1); padding-block: .75rem 1.5rem; }
  .mobile-menu ul { list-style: none; margin-block-end: 1.1rem; }
  .mobile-menu a:not(.btn) { display: block; padding-block: .95rem; border-block-end: 1px solid rgba(255, 255, 255, .08); color: var(--nav-ink); text-decoration: none; font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  [dir='rtl'] .mobile-menu a:not(.btn), .mobile-menu a:lang(ar) { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
  .mobile-menu a[aria-current='page'] { color: var(--gold); }
}
/* Without JavaScript the menu button cannot work, so the menu is simply shown. */
html:not(.js) .menu-toggle { display: none; }
@media (max-width: 960px) { html:not(.js) .mobile-menu { display: block; } }

/* ---------- hero (home) ----------
   Guidelines, page 11: navy ground, white headline, gold button, the stats row. Photos are
   desaturated toward navy behind a left-to-right navy gradient (measured from the guidelines'
   header: 84% at the text side, 50% at the middle, 8% at the far side). Until photos arrive,
   the seal reversed on navy, in one colour. */
.hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); isolation: isolate; }
/* A glow drawn only from the palette: Council Navy behind the compass, Deep Navy at the edges. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(62% 90% at 78% 45%, var(--navy) 0%, var(--navy) 35%, var(--navy-deep) 100%); }
[dir='rtl'] .hero::before { background: radial-gradient(62% 90% at 22% 45%, var(--navy) 0%, var(--navy) 35%, var(--navy-deep) 100%); }
.hero-art { position: absolute; z-index: -1; inset-block: 50% auto; inset-inline-end: max(-6vw, calc((100vw - var(--wrap)) / 2 - 6rem)); translate: 0 -50%; inline-size: min(60vw, 740px); aspect-ratio: 1; pointer-events: none; }
/* The compass: the seal in white, the crown star and the needle in Crown Gold (one accent). */
.compass { inline-size: 100%; block-size: 100%; }
.compass .c-faint { fill: none; stroke: var(--white); stroke-opacity: .1; stroke-width: 1; }
.compass .c-tick { stroke: var(--white); stroke-opacity: .14; stroke-width: 1; }
.compass .c-tick-major { stroke: var(--white); stroke-opacity: .32; stroke-width: 1.4; }
.compass .c-ring { fill: none; stroke: var(--white); stroke-opacity: .34; stroke-width: 1.6; }
.compass .c-ring-in { fill: none; stroke: var(--white); stroke-opacity: .2; stroke-width: 1; }
.compass .c-stars { fill: var(--white); fill-opacity: .26; }
.compass .c-crown { fill: var(--gold); }
.compass .c-dash { fill: none; stroke: var(--white); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 2 7; }
.compass .c-needle path { fill: var(--gold); fill-opacity: .55; }
.compass .c-needle .c-needle-dark { fill: var(--white); fill-opacity: .18; }
.compass .c-hub { fill: var(--navy); stroke: var(--gold); stroke-opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .compass { animation: compass-in 1.6s var(--ease) both; }
  .compass .c-needle { transform-origin: 300px 300px; animation: needle 2.4s var(--ease) .2s both; }
}
@keyframes compass-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes needle { from { rotate: -40deg; } to { rotate: 0deg; } }
.hero-slides { position: absolute; inset: 0; z-index: -3; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-slide.is-active { opacity: 1; }
/* Warm, low-contrast, desaturated; the lighten layer pulls the shadows toward navy, not black. */
.hero-img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--photo-filter) brightness(.96); }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: lighten; }
.hero.has-slides::before { z-index: -2; background: none; }
.hero-shade { display: none; }
.hero.has-slides .hero-shade { display: block; position: absolute; inset: 0; z-index: -2; background: linear-gradient(var(--to-end), rgb(22 39 63 / .84) 0%, rgb(22 39 63 / .86) 10%, rgb(22 39 63 / .79) 20%, rgb(22 39 63 / .71) 30%, rgb(22 39 63 / .64) 40%, rgb(22 39 63 / .5) 50%, rgb(22 39 63 / .35) 60%, rgb(22 39 63 / .2) 70%, rgb(22 39 63 / .08) 80%); }
@media (max-width: 760px) {
  /* The text runs the full width on a phone, so the shade does too. */
  .hero.has-slides .hero-shade { background: linear-gradient(to top, rgb(22 39 63 / .9), rgb(22 39 63 / .72) 60%, rgb(22 39 63 / .6)); }
}
.hero-inner { padding-block: clamp(3.5rem, 7vw, 6rem) 0; }
.hero .eyebrow { margin-block-end: 1.1rem; }
.hero h1 { font-size: var(--fs-display); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; max-inline-size: 15ch; margin-block-end: 1.2rem; }
[dir='rtl'] .hero h1 { line-height: 1.25; letter-spacing: 0; font-weight: 650; }
.hero-sub { font-size: var(--fs-lede); color: var(--on-navy); max-inline-size: 50ch; margin-block-end: 2rem; line-height: 1.7; }
.hero .cta-row { margin-block-end: clamp(2.6rem, 5vw, 4rem); }
.stats { display: grid; grid-template-columns: repeat(3, max-content); gap: clamp(2rem, 6vw, 4.5rem); border-block-start: 1px solid var(--rule-dark); padding-block: 1.6rem 2.4rem; }
.stat { display: flex; flex-direction: column-reverse; }
.stat dd { font-family: var(--f-display); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--white); font-variant-numeric: lining-nums tabular-nums; }
[dir='rtl'] .stat dd { font-family: 'Fraunces', Georgia, serif; }
.stat dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); margin-block-start: .55rem; }
[dir='rtl'] .stat dt { letter-spacing: 0; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.slides-toggle { position: absolute; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 2; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgb(15 28 48 / .5); color: var(--white); }
.slides-toggle .when-paused { display: none; }
.slides-toggle[aria-pressed='true'] .when-paused { display: block; }
.slides-toggle[aria-pressed='true'] .when-playing { display: none; }
@media (max-width: 760px) {
  .hero-art { inline-size: 120vw; inset-inline-end: -55vw; opacity: .35; }
}

/* ---------- institutions ribbon (H4) ---------- */
.ribbon { background: var(--navy-deep); color: var(--white); padding-block: 2.4rem 2.1rem; border-block: 1px solid rgba(255, 255, 255, .06); }
.ribbon-row + .ribbon-row { margin-block-start: 1.7rem; padding-block-start: 1.7rem; border-block-start: 1px solid rgba(255, 255, 255, .07); }
.ribbon-label { text-align: center; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold); margin-block-end: 1rem; }
[dir='rtl'] .ribbon-label { letter-spacing: 0; }
.marks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55rem 0; }
.marks li { display: inline-flex; align-items: center; font-family: 'Fraunces', Georgia, serif; font-size: clamp(1rem, 1.4vw, 1.125rem); font-weight: 500; color: rgba(255, 255, 255, .84); }
[dir='rtl'] .marks li { font-family: var(--f-display); font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.marks li + li::before { content: ''; inline-size: 5px; block-size: 5px; margin-inline: clamp(.9rem, 2vw, 1.5rem); border-radius: 50%; background: var(--gold); }
[dir='rtl'] .marks [lang='en'] { font-size: .86em; }   /* Latin names beside Arabic ones read at one size */
/* On phones the rows wrap; a line must not start with a separator, so space the names instead. */
@media (max-width: 760px) { .marks { gap: .5rem 1.4rem; } .marks li + li::before { display: none; } }
.mark-logo { max-block-size: 38px; inline-size: auto; filter: grayscale(1) brightness(2.2); opacity: .8; }

/* ---------- photo slots and the seal panel ---------- */
.photo-slot { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy) 0%, var(--navy) 60%, var(--navy-deep) 100%); aspect-ratio: 4 / 3; }
.photo-slot .photo { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--photo-filter); transition: scale .6s var(--ease); }
/* The navy shadow layer for photos outside the slots: who-we-are, testimonials, portraits, Instagram. */
.photo-grade, .insta-grid li, .portrait:has(img) { position: relative; overflow: hidden; }
.photo-grade::after, .insta-grid li::after, .portrait:has(img)::after { content: ''; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: lighten; pointer-events: none; }
.photo-grade img, .insta-grid img, .portrait img { filter: var(--photo-filter); }
.photo-slot::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--navy); mix-blend-mode: lighten; pointer-events: none; }
.photo-slot::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(22 39 63 / .3), rgb(22 39 63 / .06) 45%, transparent); pointer-events: none; }
.photo-slot.is-empty::before, .photo-slot.is-empty::after { display: none; }
.seal-panel { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 52%; max-inline-size: 168px; color: var(--white); opacity: .22; }
[dir='rtl'] .seal-panel { inset: 50% 50% auto auto; translate: 50% -50%; }

/* ---------- three ways in ---------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }
.way-link { display: flex; flex-direction: column; block-size: 100%; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius-card); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), translate .2s var(--ease); }
.way-link:hover { border-color: var(--brass); box-shadow: 0 18px 40px -24px rgb(22 39 63 / .32); translate: 0 -2px; }
.way-link:hover .photo { scale: 1.03; }
.way-body { padding: 1.6rem 1.55rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.way-body h3 { font-size: var(--fs-title); color: var(--navy); margin-block-end: .6rem; }
.way-body p:not(.eyebrow) { color: var(--text); font-size: var(--fs-body); flex: 1; margin-block-end: 1.2rem; }
.go { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: var(--fs-small); color: var(--brass-deep); }

/* ---------- program finder (H9) ---------- */
.finder { margin-block-start: 1.6rem; background: var(--navy); color: var(--white); border-radius: var(--radius-card); padding: clamp(1.6rem, 3.4vw, 2.6rem); position: relative; overflow: hidden; }
.finder-title { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold); margin-block-end: 1.3rem; }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; position: relative; z-index: 1; }
@media (max-width: 800px) { .finder-grid { grid-template-columns: 1fr; } .finder-grid .btn { inline-size: 100%; } }
.finder .field { margin: 0; }
.finder .field label { color: var(--white); font-size: var(--fs-small); font-weight: 600; }
.finder select { background-color: var(--white); }
.finder .btn-navy { background: var(--gold); color: var(--navy); }
.finder .btn-navy:hover { background: var(--brass); }
.finder-out { position: relative; z-index: 1; }
.matches { list-style: none; display: grid; gap: .75rem; margin-block-start: 1.6rem; counter-reset: m; }
.match { display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem 1.2rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-inline-start: 2px solid var(--gold); border-radius: 6px; text-decoration: none; color: var(--white); transition: background-color .16s var(--ease), border-color .16s var(--ease); }
.match:hover { background: rgba(255, 255, 255, .09); border-color: rgb(220 185 103 / .5); }
.match-n { font-family: 'Fraunces', Georgia, serif; font-size: .9rem; color: var(--gold); flex: none; }
.match-body { display: flex; flex-direction: column; flex: 1; gap: .15rem; }
.match-name { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 600; }
[dir='rtl'] .match-name { font-weight: 650; }
.match-text { font-size: var(--fs-small); color: var(--on-navy); }
.match-meta { font-size: var(--fs-xs); color: var(--gold); letter-spacing: .02em; }

/* ---------- why we do it ---------- */
.why { overflow: hidden; }
.why-art { position: absolute; inset-block-start: -18%; inset-inline-start: -14%; inline-size: min(48vw, 560px); color: var(--white); opacity: .05; pointer-events: none; }
.why-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
/* Pull-quote: Cormorant Garamond at the guidelines' 17-19px, semibold so it holds its own beside the body. */
.pull { font-family: var(--f-quote); font-style: italic; font-weight: 600; font-size: var(--fs-quote); line-height: 1.55; color: var(--white); margin-block-end: 1.6rem; padding-inline-start: 1.2rem; border-inline-start: 2px solid var(--gold); max-inline-size: 40ch; }
[dir='rtl'] .pull { font-style: normal; font-weight: 400; line-height: 1.85; }
/* Body copy beside the pull-quote stays at body size, so the quote leads. */
.why-copy .lede { font-size: var(--fs-body); line-height: 1.75; }
.pillars-lead { color: var(--mist); margin-block-end: 1.1rem; }
.pillars { list-style: none; display: grid; gap: 0; }
.pillars li { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; padding-block: 1.2rem; border-block-start: 1px solid var(--rule-dark); }
.pillars li:last-child { border-block-end: 1px solid var(--rule-dark); }
/* The four pillar icons (guidelines, page 03). On navy the stone bars step back so brass leads. */
.pillar-mark { grid-row: span 2; display: flex; align-items: flex-start; padding-block-start: .3rem; }
.pillar-icon { inline-size: auto; block-size: 22px; max-inline-size: 40px; }
.on-dark .pillar-icon .pi-stone, .band-dark .pillar-icon .pi-stone { fill: rgb(231 225 212 / .3); }
.on-dark .pillar-icon .pi-ink, .band-dark .pillar-icon .pi-ink { fill: var(--white); }
.on-dark .pillar-icon .pi-brass, .band-dark .pillar-icon .pi-brass { fill: var(--gold); }
.on-dark .pillar-icon .pi-line, .band-dark .pillar-icon .pi-line { stroke: var(--gold); }
.pillars h3 { font-size: var(--fs-h4); margin-block-end: .3rem; color: var(--white); }
.pillars p { font-size: var(--fs-body); color: var(--on-navy); }

/* ---------- who we are ---------- */
.who-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (max-width: 900px) { .who-grid { grid-template-columns: 1fr; } }
.who-copy .section-head { margin-block-end: 1.4rem; }
.who-copy .lede { margin-block-end: 2rem; color: var(--text); }
.who-figure { position: relative; }
.who-media, .who-seal { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; }
.who-photo { object-fit: cover; inline-size: 100%; block-size: 100%; }
.who-seal { background: linear-gradient(160deg, var(--navy) 0%, var(--navy) 60%, var(--navy-deep) 100%); }
.who-seal .seal-panel { max-inline-size: 260px; inline-size: 58%; }

/* ---------- testimonials ---------- */
.voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem; }
.voice blockquote { margin: 0 0 1.6rem; }
.voice blockquote p { font-family: var(--f-quote); font-style: italic; font-weight: 600; font-size: var(--fs-quote); line-height: 1.55; max-inline-size: 30ch; }
[dir='rtl'] .voice blockquote p { font-style: normal; font-weight: 400; line-height: 1.85; }
.voice blockquote p::before { content: '“'; color: var(--gold); }
.voice blockquote p::after { content: '”'; color: var(--gold); }
[dir='rtl'] .voice blockquote p::before { content: '«'; }
[dir='rtl'] .voice blockquote p::after { content: '»'; }
.voice figcaption { display: flex; align-items: center; gap: .9rem; }
/* Avatars framed by the ring (guidelines, page 09). */
.voice-media { display: block; flex: none; inline-size: 56px; block-size: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--navy), 0 0 0 4px var(--gold); }
.voice-photo { inline-size: 100%; block-size: 100%; object-fit: cover; }
.voice-name { display: block; font-weight: 600; }
.voice-detail { display: block; font-size: var(--fs-label); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--mist); }
[dir='rtl'] .voice-detail { letter-spacing: 0; }

/* ---------- Instagram strip ---------- */
.insta-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.insta-grid { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
@media (max-width: 760px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
.insta-grid li { border-radius: 4px; }
.insta-grid img { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }

/* ---------- closing call to action ---------- */
.closing-cta { position: relative; overflow: hidden; background: var(--navy); color: var(--white); text-align: center; padding-block: clamp(4rem, 8vw, 6rem); }
.closing-glow { display: none; }
.closing-cta .wrap { position: relative; }
.closing-seal { inline-size: 64px; block-size: 64px; margin: 0 auto 1.6rem; color: var(--white); }
.closing-seal .s-ring { stroke-width: 1.6; }
.closing-seal .s-ring-in { stroke-width: 1; }
.closing-cta h2 { font-size: var(--fs-display-s); line-height: 1.12; margin-inline: auto; max-inline-size: 20ch; }
.closing-cta .rule { margin: 1.3rem auto 1.2rem; }
.closing-cta p { color: var(--on-navy); max-inline-size: 52ch; margin: 0 auto 2rem; font-size: var(--fs-lede); text-wrap: balance; }
.closing-cta .cta-row { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--white); padding-block: 0 2.2rem; }
.newsletter { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem 3rem; align-items: center; padding-block: 3rem; border-block-end: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; } }
.nl-title { font-size: var(--fs-h2s); margin-block-end: .4rem; }
.nl-copy p { color: var(--on-navy); }
.nl-row { display: flex; gap: .6rem; }
.nl-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 1rem; border-radius: var(--radius); border: 1px solid var(--field-line); background: var(--white); color: var(--ink); }
.nl-row input::placeholder { color: #6B7585; }
.nl-note { font-size: var(--fs-xs); color: var(--mist); margin-block-start: .6rem; }
.site-footer .field-error { color: var(--signal-on-dark); margin-block-start: .5rem; }
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; padding-block: 3.2rem 2.4rem; }
@media (max-width: 960px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .fgrid { grid-template-columns: 1fr; } }
.site-footer h2 { font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold); margin-block-end: 1.1rem; }
[dir='rtl'] .site-footer h2 { letter-spacing: 0; }
.site-footer h2.nl-title { font-family: var(--f-display); font-size: var(--fs-h2s); letter-spacing: var(--track-tight); text-transform: none; color: var(--white); }
.fcol ul { list-style: none; display: grid; gap: .55rem; }
.fcol a:not(.brand), .fcol .linklike { color: var(--on-navy); text-decoration: none; font-size: var(--fs-small); }
.fcol a:not(.brand):hover { color: var(--gold); text-decoration: underline; }
.floc { color: var(--mist); font-size: var(--fs-small); margin-block: 1.2rem .8rem; }
.fcontact { list-style: none; display: grid; gap: .3rem; }
.fcontact a { display: inline-flex; align-items: center; min-height: 32px; }
.social { list-style: none; display: flex; gap: .6rem; margin-block-start: 1.2rem; }
.social a { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; }
.social a:hover { border-color: var(--gold); color: var(--gold); }
.fbase { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .8rem; padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-xs); color: var(--mist); }
/* The master line, set as the guidelines specify: Cormorant Garamond, in gold. */
.master-line { font-family: var(--f-quote); font-style: italic; font-weight: 600; font-size: var(--fs-quote); color: var(--gold); }
[dir='rtl'] .master-line { font-style: normal; font-weight: 400; }

/* ---------- mobile call to action, back to top ---------- */
.m-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; display: none; gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: var(--navy); border-block-start: 1px solid rgba(255, 255, 255, .18); translate: 0 110%; transition: translate .28s var(--ease); }
.m-cta .btn { flex: 1; min-height: 48px; }
.m-cta.is-shown { translate: 0 0; }
@media (max-width: 760px) { html.js .m-cta { display: flex; } body.has-sticky .m-cta { display: none !important; } }
.totop { position: fixed; inset-inline-end: 1.2rem; inset-block-end: 1.4rem; z-index: 88; inline-size: 46px; block-size: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--field-line); background: var(--white); color: var(--navy); }
.totop:hover { border-color: var(--brass-deep); }
@media (max-width: 760px) { .totop { inset-block-end: 5.6rem; } }

/* ---------- reveal on scroll: only for content below the fold, and never without JavaScript ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv.rv-wait { opacity: 0; translate: 0 18px; }
  html.js .rv { transition: opacity .7s var(--ease), translate .7s var(--ease); }
}

/* ---------- interior page header ---------- */
.page-head { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding-block: clamp(2.4rem, 4.5vw, 3.6rem) clamp(2.8rem, 5vw, 4.2rem); isolation: isolate; }
.page-head::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(160deg, var(--navy) 0%, var(--navy) 55%, var(--navy-deep) 100%); }
.page-head-art { position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: -4rem; translate: 0 -50%; inline-size: min(42vw, 480px); color: var(--white); opacity: .07; pointer-events: none; }
.page-head h1 { font-size: var(--fs-display-s); font-weight: 600; max-inline-size: 20ch; margin-block-end: 1rem; letter-spacing: -.02em; }
[dir='rtl'] .page-head h1 { letter-spacing: 0; font-weight: 650; }
.page-head .lede { color: var(--on-navy); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1.5rem; font-size: var(--fs-label); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--mist); }
[dir='rtl'] .crumbs ol { letter-spacing: 0; }
.crumbs li:not(:last-child)::after { content: '/'; margin-inline-start: .4rem; opacity: .6; }
.crumbs a { color: var(--mist); text-decoration: none; }
.crumbs a:hover { color: var(--gold); text-decoration: underline; }
.crumbs [aria-current] { color: var(--white); }

/* ---------- side navigation on long pages (G12, H5) ---------- */
.with-sidenav { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sidenav { position: sticky; top: calc(var(--header-h) + 2rem); padding-block: var(--section) 2rem; }
.sidenav-title { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--slate); margin-block-end: .9rem; }
.sidenav ul { list-style: none; border-inline-start: 1px solid var(--rule-strong); }
.sidenav a { position: relative; display: block; padding: .5rem 1rem; color: var(--slate); text-decoration: none; font-size: var(--fs-small); font-weight: 500; transition: color .16s var(--ease); }
.sidenav a:hover { color: var(--navy); }
/* The current chapter: a star dot on the line (guidelines, page 09: steps and chapters). */
.sidenav a.is-active { color: var(--navy); font-weight: 600; }
.sidenav a.is-active::before { content: ''; position: absolute; inset-inline-start: -4px; inset-block-start: 50%; inline-size: 7px; block-size: 7px; translate: 0 -50%; border-radius: 50%; background: var(--gold); }
.sidenav-content > .section { padding-block: clamp(3rem, 6vw, 5rem); }
.sidenav-content > .section:first-child { padding-block-start: var(--section); }
.sidenav-content .section { padding-inline: 0; }
.sidenav-content .section + .section { border-block-start: 1px solid var(--rule); }
@media (max-width: 1100px) {
  .with-sidenav { display: block; }
  .sidenav { position: sticky; top: var(--header-h); z-index: 80; padding: 0; margin-inline: calc(-1 * var(--gutter)); background: var(--parchment); border-block-end: 1px solid var(--rule); }
  .sidenav-title { display: none; }
  .sidenav ul { display: flex; overflow-x: auto; scrollbar-width: none; border: 0; padding-inline: var(--gutter); }
  .sidenav ul::-webkit-scrollbar { display: none; }
  .sidenav a { white-space: nowrap; padding: .95rem .9rem; margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  [dir='rtl'] .sidenav a { font-size: .95rem; letter-spacing: 0; }
  .sidenav a.is-active::before { inset-inline-start: 50%; inset-block-start: auto; inset-block-end: 4px; translate: -50% 0; }
  [dir='rtl'] .sidenav a.is-active::before { translate: 50% 0; }
  .sidenav-content .section + .section { border: 0; }
}
.band-dark { background: var(--navy); color: var(--white); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-radius: var(--radius-card); }
@media (min-width: 1101px) { .band-dark { margin-inline: 0; padding-inline: clamp(2rem, 4vw, 3.5rem); } }
.band-dark .section-head h2 { color: var(--white); }
.band-dark .lede { color: var(--on-navy); }
.band-dark .eyebrow { color: var(--gold); }

/* ---------- cards: programs ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .pgrid { grid-template-columns: 1fr; } }
.pcard-link { display: flex; flex-direction: column; block-size: 100%; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius-card); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), translate .2s var(--ease); }
a.pcard-link:hover { border-color: var(--brass); box-shadow: 0 18px 40px -24px rgb(22 39 63 / .32); translate: 0 -2px; }
a.pcard-link:hover .photo { scale: 1.03; }
.pcard-media { aspect-ratio: 16 / 9; }
.pcard-body { padding: 1.5rem 1.5rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pcard-body .eyebrow { margin-block-end: .55rem; }
.pcard-body h3 { font-size: var(--fs-title); color: var(--navy); margin-block-end: .5rem; }
.pcard-text { color: var(--text); font-size: var(--fs-body); margin-block-end: 1.1rem; flex: 1; }
.pcard-facts { font-size: var(--fs-xs); margin-block-end: 1.1rem; }
.pcard-facts div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-block-start: 1px solid var(--rule); }
.pcard-facts dt { color: var(--slate); }
.pcard-facts dd { color: var(--navy); font-weight: 600; text-align: end; }
.ask-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.8rem 1.6rem; background: var(--navy); color: var(--white); border-radius: var(--radius-card); }
.ask-card h3 { font-size: var(--fs-h3l); margin-block-end: .6rem; }
.ask-card p:not(.eyebrow) { color: var(--on-navy); }
.ask-card .eyebrow { color: var(--gold); }

/* ---------- cohort table ---------- */
.table-wrap { border: 1px solid var(--stone); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.cohort-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.cohort-table th, .cohort-table td { padding: 1rem 1.15rem; text-align: start; border-block-end: 1px solid var(--rule); vertical-align: middle; }
.cohort-table thead th { background: var(--navy); color: var(--white); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-mid); text-transform: uppercase; }
[dir='rtl'] .cohort-table thead th { letter-spacing: 0; }
.cohort-table tbody tr:last-child > * { border-block-end: 0; }
.cohort-table tbody tr:hover { background: var(--ivory); }
.c-name { font-weight: 600; color: var(--navy); }
.c-sub { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--slate); }
.places { display: block; }
.closing { display: inline-flex; align-items: center; gap: .4rem; color: var(--signal); font-weight: 600; font-size: var(--fs-xs); }
.closing .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--signal); }
.c-act { text-align: end; }
@media (max-width: 820px) {
  .cohort-table, .cohort-table tbody, .cohort-table tr, .cohort-table th, .cohort-table td { display: block; }
  .cohort-table thead { display: none; }
  .table-wrap { border: 0; background: none; }
  .cohort-table tbody { display: grid; gap: .9rem; }
  .cohort-table tbody tr { border: 1px solid var(--stone); border-radius: 10px; background: var(--surface); padding: 1rem 1.1rem; }
  .cohort-table th, .cohort-table td { border: 0; padding: .35rem 0; }
  .cohort-table td { display: flex; justify-content: space-between; gap: 1rem; }
  .cohort-table td::before { content: attr(data-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--brass-deep); }
  [dir='rtl'] .cohort-table td::before { letter-spacing: 0; }
  .cohort-table td.c-act { padding-block-start: .9rem; }
  .cohort-table td.c-act::before { display: none; }
  .cohort-table .c-act .btn { inline-size: 100%; }
  .places { text-align: end; }
}
.empty-note { padding: 1.6rem 1.7rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius-card); color: var(--slate); background: var(--surface); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: space-between; }

/* ---------- program page ---------- */
.prog-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 960px) { .prog-hero { grid-template-columns: 1fr; } }
.prog-hero h1 { max-inline-size: 16ch; }
.prog-hero .lede { margin-block-end: 2rem; }
.glance { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-card); padding: 1.5rem 1.6rem; backdrop-filter: blur(4px); }
.glance h2 { font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold); margin-block-end: 1rem; }
.glance dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; border-block-end: 1px solid rgba(255, 255, 255, .12); }
.glance dl div:last-child { border-block-end: 0; }
.glance dt { color: var(--mist); font-size: var(--fs-small); }
.glance dd { font-weight: 600; text-align: end; font-size: var(--fs-body); }
.syllabus-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--white); font-weight: 600; text-decoration: none; min-height: 44px; }
.syllabus-link:hover { color: var(--gold); text-decoration: underline; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }
.fit-box { border: 1px solid var(--stone); border-radius: var(--radius-card); padding: 1.6rem 1.7rem; background: var(--surface); }
.fit-box.no { background: var(--ivory); }
.fit-box h3 { font-size: var(--fs-h4); color: var(--navy); margin-block-end: .9rem; }
.fit-box ul { list-style: none; }
.fit-box li { display: flex; gap: .85rem; padding-block: .6rem; border-block-start: 1px solid var(--rule); color: var(--text); font-size: var(--fs-body); }
.fit-box li:first-child { border-block-start: 0; }
/* Bullets from the brand's own vocabulary, never a generic icon set: a brass dot for what applies,
   an open ring for what does not. */
.fit-box li::before, .plain-list li::before { content: ''; flex: none; inline-size: 6px; block-size: 6px; margin-block-start: .68em; border-radius: 50%; background: var(--brass); }
.fit-box.no li::before { inline-size: 7px; block-size: 7px; background: transparent; box-shadow: inset 0 0 0 1px var(--slate); }
/* "What you'll leave with": parchment text on navy. The draft site had navy on navy here. */
.learn { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; counter-reset: learn; }
@media (max-width: 760px) { .learn { grid-template-columns: 1fr; } }
.learn li { display: flex; gap: .9rem; padding-block: 1rem; border-block-end: 1px solid var(--rule-dark); color: var(--white); font-size: var(--fs-body); }
.learn li::before { counter-increment: learn; content: counter(learn, decimal-leading-zero); font-family: 'Fraunces', Georgia, serif; color: var(--gold); font-size: .9rem; padding-block-start: .15rem; flex: none; }
.steps { list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.1rem; padding-block: 1.35rem; border-block-start: 1px solid var(--rule); }
.steps li:last-child { border-block-end: 1px solid var(--rule); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: 'Fraunces', Georgia, serif; font-size: 1.375rem; line-height: 1; color: var(--brass-deep); }
.steps h3 { font-size: var(--fs-h4); color: var(--navy); margin-block-end: .3rem; }
.steps p { color: var(--text); font-size: var(--fs-body); }
.steps .day { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--brass-deep); margin-block-end: .2rem; }
.plain-list { list-style: none; display: grid; gap: .1rem; }
.plain-list li { display: flex; gap: .85rem; padding-block: .75rem; border-block-start: 1px solid var(--rule); }
.plain-list li:first-child { border-block-start: 0; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.4rem; }
.person { display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; align-items: start; padding: 1.5rem; border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--surface); }
/* Avatars framed by the ring (guidelines, page 09). */
.portrait { inline-size: 84px; block-size: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--navy); color: var(--gold); font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--brass); }
.portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.person-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--brass-deep); margin-block-end: .35rem; }
[dir='rtl'] .person-label { letter-spacing: 0; }
.person h3 { font-size: var(--fs-h3); color: var(--navy); margin-block-end: .4rem; }
.person p:not(.person-label) { color: var(--text); font-size: var(--fs-body); }
.person ul { list-style: none; margin-block-start: .6rem; display: grid; gap: .25rem; font-size: var(--fs-small); color: var(--text); }
.person ul li::before { content: '·'; color: var(--brass); margin-inline-end: .45rem; }
.person .linkedin { display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .7rem; color: var(--brass-deep); font-size: var(--fs-small); font-weight: 600; text-decoration: none; min-height: 32px; }
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.4rem; }
.award { padding-block-start: 1.2rem; border-block-start: 1px solid var(--rule-dark); }
.award .year { font-family: 'Fraunces', Georgia, serif; color: var(--gold); font-size: 1rem; }
.award h3 { font-size: var(--fs-h4); margin-block: .25rem; }
.award p { color: var(--on-navy); font-size: var(--fs-body); }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.2rem; }
.related a { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.5rem; border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .2s var(--ease); block-size: 100%; }
.related a:hover { border-color: var(--brass); }
.related h3 { font-size: var(--fs-h3); color: var(--navy); }
.related p:not(.eyebrow) { color: var(--text); font-size: var(--fs-body); flex: 1; }
.related .eyebrow { margin-block-end: .2rem; }

/* sticky apply bar on program pages (M3): real fee or "Fee on request", real deadline */
.sticky-apply { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 95; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); background: var(--navy); color: var(--white); border-block-start: 1px solid rgba(255, 255, 255, .16); translate: 0 110%; transition: translate .28s var(--ease); }
.sticky-apply.is-shown { translate: 0 0; }
.sticky-apply .info { min-inline-size: 0; line-height: 1.3; }
.sticky-apply b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-apply span { font-size: var(--fs-xs); color: var(--mist); }
@media (max-width: 560px) {
  /* The name may take two lines on a phone; the details stay on one. */
  .sticky-apply b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sticky-apply span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.sticky-apply .actions { display: flex; gap: .6rem; flex: none; }
@media (min-width: 1101px) { .sticky-apply { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } }
html:not(.js) .sticky-apply { display: none; }
body.has-sticky .totop { inset-block-end: 5.6rem; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--stone); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.faq details + details { border-block-start: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.15rem 1.35rem; min-height: 58px; cursor: pointer; list-style: none; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--ivory); }
.faq-icon { color: var(--brass-deep); transition: rotate .2s var(--ease); }
.faq details[open] .faq-icon { rotate: 45deg; }
.faq-a { padding: 0 1.35rem 1.35rem; color: var(--text); max-inline-size: 72ch; }

/* ---------- exchange page ---------- */
.route { background: var(--navy); border-radius: var(--radius-card); padding: clamp(1.2rem, 3vw, 2.4rem); overflow: hidden; }
.route-map { inline-size: 100%; block-size: auto; }
.route-map .rm-grid { stroke: var(--white); stroke-opacity: .07; stroke-width: 1; }
.route-map .rm-arc { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: .9; }
.route-map .rm-dot { fill: var(--gold); }
.route-map .rm-halo { fill: none; stroke: var(--gold); stroke-opacity: .35; }
/* Beirut, the starting point, carries the crown star: the single gold accent mark in this graphic. */
.route-map .rm-home { fill: var(--gold); }
.route-map .rm-label { fill: var(--white); font-family: 'Fraunces', Georgia, serif; font-size: 22px; }
.route-map .rm-label, .route-map .rm-sub { paint-order: stroke; stroke: var(--navy); stroke-width: 6px; stroke-linejoin: round; }
.route-map .rm-sub { fill: var(--mist); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; }
[dir='rtl'] .route-map .rm-label { font-family: 'Markazi Text', 'Fraunces', serif; font-size: 26px; }
[dir='rtl'] .route-map .rm-sub { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; font-size: 16px; }
@media (prefers-reduced-motion: no-preference) { .route-map .rm-arc { animation: dash 5s var(--ease) 1 both; } }
.route-legend { display: none; }
@media (max-width: 760px) {
  .route-map text { display: none; }
  .route-legend { display: grid; gap: .55rem; list-style: none; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--rule-dark); color: var(--white); font-size: var(--fs-small); }
  .route-legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
  .route-legend li::before { content: ''; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold); translate: 0 -1px; }
  .route-legend .rl-home::before { inline-size: 9px; block-size: 9px; background: none; box-shadow: inset 0 0 0 1.5px var(--gold); }
  .route-legend span { flex-basis: 100%; padding-inline-start: calc(7px + .6rem); color: var(--on-navy); font-size: var(--fs-xs); }
}
@keyframes dash { to { stroke-dashoffset: -240; } }
.tracks { display: grid; gap: 1.6rem; }
.track { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border: 1px solid var(--stone); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); scroll-margin-top: calc(var(--header-h) + 4rem); }
@media (max-width: 900px) { .track { grid-template-columns: 1fr; } }
.track .photo-slot { aspect-ratio: auto; min-block-size: 260px; block-size: 100%; }
.track-body { padding: clamp(1.5rem, 3vw, 2.2rem); }
.track-body h2 { font-size: var(--fs-headline); color: var(--navy); margin-block-end: .5rem; }
.badge { display: inline-block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: .3rem .6rem; border-radius: 3px; margin-block-end: .9rem; }
[dir='rtl'] .badge { letter-spacing: 0; }
.destinations { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem 1.3rem; }
.destinations li { font-family: var(--f-display); font-size: var(--fs-name); padding: .35rem .8rem; border: 1px solid var(--stone); border-radius: 999px; color: var(--navy); background: var(--ivory); }
.track-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem 1.4rem; margin-block: 1.3rem; font-size: var(--fs-body); }
.track-facts dt { color: var(--slate); font-size: var(--fs-xs); }
.track-facts dd { font-weight: 600; color: var(--navy); }

/* ---------- corporate ---------- */
.clients { padding-block: 2.6rem; border-block-end: 1px solid var(--rule); }
.clients-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brass-deep); margin-block-end: 1rem; }
.clients .marks { justify-content: flex-start; }
.clients .marks li { color: var(--navy); font-size: 1.0625rem; opacity: .85; }
[dir='rtl'] .clients .marks li { font-size: 1.25rem; }
.clients .marks li + li::before { background: var(--brass); }
.clients .mark-logo { filter: grayscale(1); opacity: .7; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }
.point { padding-block-start: 1.25rem; border-block-start: 1px solid var(--rule); }
.point h3 { font-size: var(--fs-h4); color: var(--navy); margin-block-end: .45rem; }
.point p { color: var(--text); font-size: var(--fs-body); }
.band-dark .point { border-color: var(--rule-dark); }
.band-dark .point h3 { color: var(--white); }
.band-dark .point p { color: var(--on-navy); }
.how { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; counter-reset: how; }
@media (max-width: 960px) { .how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; } }
.how li { padding-block-start: 1.3rem; border-block-start: 1px solid var(--gold); }
.how li::before { counter-increment: how; content: counter(how, decimal-leading-zero); display: block; font-family: 'Fraunces', Georgia, serif; color: var(--gold); margin-block-end: .5rem; }
.how h3 { font-size: var(--fs-h3); margin-block-end: .35rem; }
.how p { color: var(--on-navy); font-size: var(--fs-body); }
.brief { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 960px) { .brief { grid-template-columns: 1fr; } }

/* ---------- case studies ---------- */
.case { border: 1px solid var(--stone); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.case + .case { margin-block-start: 1.6rem; }
.case-body { padding: clamp(1.5rem, 3vw, 2.4rem); }
.case h2 { font-size: var(--fs-headline); color: var(--navy); margin-block-end: 1.4rem; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; margin-block: 1.4rem; }
.figures b { display: block; font-family: var(--f-display); font-size: 1.75rem; font-weight: 600; color: var(--navy); line-height: 1.05; }
.figures span { font-size: var(--fs-label); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--slate); }
.method-note { color: var(--slate); font-size: var(--fs-small); margin-block-start: 1.4rem; }

/* ---------- forms ---------- */
.form-shell { max-inline-size: 700px; }
.form-layout { display: grid; grid-template-columns: minmax(0, 700px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 1000px) { .form-layout { grid-template-columns: 1fr; } }
.aside-card { position: sticky; top: calc(var(--header-h) + 2rem); padding: 1.6rem 1.7rem; border-radius: var(--radius-card); background: var(--navy); color: var(--white); }
.aside-card p { color: var(--on-navy); font-size: var(--fs-body); margin-block-end: 1rem; }
.aside-card .seal { inline-size: 46px; color: var(--white); margin-block-end: 1rem; }
.aside-card .seal .s-ring { stroke-width: 2; }
.aside-card .seal .s-ring-in { stroke-width: 1.2; }
fieldset { border: 0; margin: 0 0 2.2rem; padding: 0; min-inline-size: 0; }
legend { font-family: var(--f-display); font-size: var(--fs-headline); font-weight: 600; color: var(--navy); padding: 0; margin-block-end: .45rem; }
[dir='rtl'] legend { font-weight: 650; }
.legend-note { color: var(--slate); font-size: var(--fs-body); margin-block-end: 1.6rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-block-end: 1.45rem; }
.field label, .field .label { font-weight: 600; color: var(--navy); font-size: var(--fs-body); }
.req, .opt { font-weight: 400; color: var(--slate); font-size: .88em; }
.hint { font-size: var(--fs-xs); color: var(--slate); line-height: 1.5; }
/* Text-type fields only: checkboxes and radio buttons keep their own size and line up with their labels. */
.field input:not([type='checkbox']):not([type='radio']), .field select, .field textarea {
  inline-size: 100%; min-height: 48px; padding: .75rem .95rem; border: 1px solid var(--field-line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font-size: 1rem; line-height: 1.4;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 2.6rem; }
[dir='rtl'] .field select { background-position: 16px 55%, 22px 55%; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 1px; border-color: var(--brass-deep); }
.field [aria-invalid='true'] { border-color: var(--signal); border-width: 2px; background-color: var(--signal-soft); }
.field-error { display: flex; align-items: flex-start; gap: .45rem; font-size: var(--fs-small); font-weight: 500; color: var(--signal); }
.field-error::before { content: '!'; flex: none; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--signal); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; margin-block-start: 2px; }
.choices { display: grid; gap: .65rem; }
.choices.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .choices.two { grid-template-columns: 1fr; } }
.choice { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; min-height: 56px; border: 1px solid var(--field-line); border-radius: 6px; background: var(--white); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.choice:hover { border-color: var(--brass-deep); }
.choice input { inline-size: 22px; block-size: 22px; margin: 2px 0 0; accent-color: var(--navy); flex: none; }
.choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--ivory); }
.choice .ct { font-weight: 600; color: var(--navy); display: block; }
.choice .cd { font-size: var(--fs-xs); color: var(--slate); display: block; margin-block-start: .1rem; }
.consent { padding: 1.2rem 1.3rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--white); }
.consent .choice { border: 0; padding: 0; min-height: 0; background: none; box-shadow: none; }
.consent-note { font-size: var(--fs-xs); color: var(--slate); margin-block-start: .9rem; line-height: 1.6; }
.consent-note a { color: var(--brass-deep); }
.error-summary { border: 2px solid var(--signal); background: var(--signal-soft); border-radius: 8px; padding: 1.2rem 1.35rem; margin-block-end: 2rem; }
.error-summary h2 { font-family: var(--f-ui); font-size: var(--fs-h4); font-weight: 700; color: var(--signal); margin-block-end: .55rem; letter-spacing: 0; }
.error-summary ul { padding-inline-start: 1.1rem; }
.error-summary li { margin-block-end: .3rem; }
.error-summary a { color: var(--signal); font-weight: 600; }
.error-summary .notice { color: var(--signal); font-weight: 600; margin-block-end: .3rem; }
.form-nav { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-block-start: .4rem; }
.steps-bar { margin-block-end: 2rem; }
.steps-bar .txt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--brass-deep); margin-block-end: .75rem; }
[dir='rtl'] .steps-bar .txt { letter-spacing: 0; }
/* Progress as star dots (guidelines, page 09): done in brass, the current step in Crown Gold,
   steps to come as open rings. */
.track-bar { display: flex; gap: 10px; }
.track-bar i { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--field-line); }
.track-bar i.on { background: var(--gold); box-shadow: none; }
.track-bar i.done { background: var(--brass); box-shadow: none; }
html.js .form-step:not(.is-active) { display: none; }
html:not(.js) .steps-bar, html:not(.js) .js-only { display: none; }
.form-step + .form-step { margin-block-start: 1rem; }
html.js .no-js-only { display: none; }
.review dl { border: 1px solid var(--stone); border-radius: 10px; background: var(--surface); overflow: hidden; margin-block-end: 1.6rem; }
.review dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-block-start: 1px solid var(--rule); font-size: var(--fs-body); }
.review dl div:first-child { border-block-start: 0; }
.review dt { color: var(--slate); }
.review dd { font-weight: 600; color: var(--navy); text-align: end; overflow-wrap: anywhere; }
.btn[aria-busy='true'] { opacity: .7; pointer-events: none; }

/* ---------- contact ---------- */
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 960px) { .methods { grid-template-columns: 1fr; } }
.method { display: flex; flex-direction: column; gap: .5rem; padding: 1.7rem 1.6rem; border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--surface); }
.method h3 { font-size: var(--fs-title); color: var(--navy); }
.method p:not(.eyebrow) { color: var(--text); font-size: var(--fs-body); flex: 1; margin-block-end: .8rem; }
.method .btn { align-self: flex-start; }
/* Call-out with a brass edge, as the guidelines' own notes are set ("Competitive frame", "Rule of thumb"). */
.promise { margin-block-start: 1.4rem; padding: 1.4rem 1.6rem; border-inline-start: 3px solid var(--brass); background: var(--surface); border-radius: 0 var(--radius-card) var(--radius-card) 0; max-inline-size: 760px; }
[dir='rtl'] .promise { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.promise h3 { font-size: var(--fs-h4); color: var(--navy); margin-block-end: .35rem; }
.find { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 960px) { .find { grid-template-columns: 1fr; } }
.address { font-style: normal; line-height: 1.8; color: var(--ink); margin-block-end: 1.5rem; }
.map-box { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--navy); color: var(--white); display: grid; place-items: center; text-align: center; }
.map-box iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.map-facade { display: grid; gap: .8rem; justify-items: center; padding: 2rem; position: relative; }
.map-facade .seal { inline-size: 64px; color: var(--white); opacity: .5; }
.map-facade p { color: var(--mist); font-size: var(--fs-small); }
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-block-start: 1.4rem; }
.region { padding: 1.2rem 1.3rem; border: 1px solid var(--stone); border-radius: 10px; background: var(--surface); }
.region h3 { font-size: var(--fs-h4); color: var(--navy); margin-block-end: .3rem; }
.region a { color: var(--brass-deep); }

/* ---------- prose (policies) ---------- */
.prose { max-inline-size: 72ch; }
.prose h2 { font-size: var(--fs-headline); color: var(--navy); margin-block: 2.6rem .8rem; }
.prose h2:first-child { margin-block-start: 0; }
.prose p, .prose li { color: var(--text); }
.prose p + p { margin-block-start: 1rem; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: .55rem; margin-block: .6rem 1rem; }
.prose a { color: var(--brass-deep); }
.prose strong { color: var(--navy); }
.draft-note { display: flex; gap: 1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--brass); background: var(--ivory); border-radius: 10px; margin-block-end: 2.4rem; max-inline-size: 72ch; }
.draft-note h2 { font-family: var(--f-ui); font-size: var(--fs-body); font-weight: 700; color: var(--brass-deep); margin-block-end: .2rem; letter-spacing: 0; }
.draft-note p { color: var(--text); font-size: var(--fs-body); }
.updated { color: var(--slate); font-size: var(--fs-small); margin-block-start: 2.4rem; }

/* ---------- thank you and 404 ---------- */
.next-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; counter-reset: ns; }
@media (max-width: 860px) { .next-steps { grid-template-columns: 1fr; } }
.next-steps li { padding: 1.5rem 1.4rem; border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--surface); }
.next-steps li::before { counter-increment: ns; content: counter(ns, decimal-leading-zero); display: block; font-family: 'Fraunces', Georgia, serif; color: var(--brass-deep); font-size: 1.125rem; margin-block-end: .6rem; }
.next-steps h3 { font-size: var(--fs-h4); color: var(--navy); margin-block-end: .35rem; }
.next-steps p { color: var(--text); font-size: var(--fs-body); }
.hurry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-block-start: 1.6rem; padding: 1.6rem 1.8rem; border-radius: var(--radius-card); background: var(--navy); color: var(--white); }
.hurry h3 { font-size: var(--fs-h3l); margin-block-end: .3rem; }
.hurry p:not(.eyebrow) { color: var(--on-navy); max-inline-size: 60ch; }
.link-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 960px) { .link-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .link-cards { grid-template-columns: 1fr; } }
.link-card { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.3rem; border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .2s var(--ease); }
.link-card:hover { border-color: var(--brass); }
.link-card h3 { font-size: var(--fs-h3); color: var(--navy); margin-block-end: .35rem; }
.link-card p:not(.eyebrow) { color: var(--text); font-size: var(--fs-body); flex: 1; margin-block-end: 1rem; }

/* ---------- cookie bar ---------- */
.cookie-bar { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; z-index: 120; display: flex; justify-content: center; }
.cookie-inner { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: space-between; max-inline-size: 920px; padding: 1.1rem 1.3rem; border-radius: var(--radius-card); background: var(--navy-deep); color: var(--white); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 20px 50px -20px rgb(15 28 48 / .6); }
.cookie-title { font-weight: 700; margin-block-end: .2rem; }
.cookie-inner p { font-size: var(--fs-small); color: var(--on-navy); max-inline-size: 60ch; }
.cookie-inner a { color: var(--gold); }
.cookie-actions { display: flex; gap: .6rem; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-slide { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .m-cta, .totop, .sticky-apply, .sidenav, .cookie-bar, .closing-cta, .hero-art, .page-head-art, .why-art { display: none !important; }
  body { background: #fff; }
  .page-head, .hero, .on-dark { background: #fff !important; color: #000 !important; }
}

/* ---------- interior page details ---------- */
.stats-page { margin-block-start: 2.6rem; padding-block-end: 0; }
.pillar-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 760px) { .pillar-cards { grid-template-columns: 1fr; } }
/* The four pillar cards, as on the guidelines' page 03: white card, the pillar's icon, title, line. */
.pillar-card { padding: 1.6rem 1.7rem 1.7rem; border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--surface); }
.pillar-card .pillar-mark { display: block; block-size: 26px; margin-block-end: 1.1rem; }
.pillar-card .pillar-icon { block-size: 26px; }
.pillar-card h3 { font-size: var(--fs-title); color: var(--navy); margin-block-end: .5rem; }
.pillar-card p:not(.eyebrow) { color: var(--text); }
.method-band .section { padding-block: clamp(2.4rem, 5vw, 4rem); }
.method-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .method-steps { grid-template-columns: 1fr; } }
.method-steps li { padding-block-start: 1.2rem; border-block-start: 1px solid var(--rule-dark); }
.method-n { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--gold); margin-block-end: .8rem; }
.method-steps h3 { font-size: var(--fs-title); margin-block-end: .45rem; color: var(--white); }
.method-steps p { color: var(--on-navy); font-size: var(--fs-body); }
.list-label, .mini-title { font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brass-deep); margin-block: 0 .9rem; }
[dir='rtl'] .list-label, [dir='rtl'] .mini-title { letter-spacing: 0; }
.track-body .mini-title, .find .mini-title, .case .mini-title { margin-block-start: 1.5rem; }
.uni-list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 2.4rem; }
.uni-list li { font-family: var(--f-display); font-size: var(--fs-name); color: var(--navy); padding: .45rem .95rem; border: 1px solid var(--stone); border-radius: 999px; background: var(--surface); }
.sub-title { font-size: var(--fs-h3l); color: var(--navy); margin-block: 2rem 1rem; }
.placement { margin-block-start: 2rem; padding: 1.3rem 1.5rem; border-inline-start: 3px solid var(--brass); background: var(--surface); max-inline-size: 760px; font-size: var(--fs-lede); }
.voice-inline { margin-block-start: 2.4rem; }
.voice-inline blockquote p { color: var(--navy); }
.band-dark .voice-inline blockquote p, .on-dark .voice-inline blockquote p { color: var(--white); }
.voice-inline blockquote p::before, .voice-inline blockquote p::after { color: var(--brass-deep); }
.voice-inline .voice-detail { color: var(--slate); }
.band-dark .voice-inline blockquote p::before, .band-dark .voice-inline blockquote p::after, .on-dark .voice-inline blockquote p::before, .on-dark .voice-inline blockquote p::after { color: var(--gold); }
.band-dark .voice-inline .voice-detail, .on-dark .voice-inline .voice-detail { color: var(--mist); }
.credential-line { margin-block: -1.4rem 1.8rem; color: var(--brass-deep); font-weight: 600; }
.after-faq, .after-list { margin-block-start: 1.4rem; }
.tba-note { color: var(--slate); font-size: var(--fs-body); padding: .9rem 1rem; border: 1px dashed var(--rule-strong); border-radius: 6px; margin-block: 1rem; }
.track-summary { color: var(--text); margin-block-end: .4rem; }
.track-cta { margin-block-start: 1.4rem; }
.reply-note { color: var(--slate); font-size: var(--fs-small); margin-block-start: 1rem; }
.aside-title { font-size: var(--fs-h3l); margin-block-end: .6rem; }
.regions-list { list-style: none; display: grid; gap: .8rem; font-size: var(--fs-small); }
.regions-list a { color: var(--gold); }
.teams-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; }
@media (max-width: 900px) { .teams-grid { grid-template-columns: 1fr; } }
.teams-band .section-head { margin-block-end: 0; }
.pgrid-tight .pcard-body { padding-block-start: 1.6rem; }
.pcard-link.is-static { cursor: default; }
.related-section .section-head { margin-block-end: 2rem; }
.how-light h3 { color: var(--navy); }
.how-light p { color: var(--slate); }
.how-light li::before { color: var(--brass-deep); }
.how-light li { border-block-start-color: var(--brass); }
.ask-card .btn { align-self: flex-start; }
.prog-head .page-head-art { opacity: .06; }
.page-head .lede + .cta-row { margin-block-start: 2rem; }

/* Labels on navy panels use gold: brass-deep is for light backgrounds only. */
.hurry .eyebrow, .aside-card .eyebrow, .glance .eyebrow, .finder .eyebrow, .ask-card .eyebrow { color: var(--gold); }