/* ==========================================================================
   Al-Majeed School of Research Methodology & Innovation
   Institutional stylesheet
   --------------------------------------------------------------------------
   Palette: scarlet red and white are the primary pair; light blue is the
   accent. Scarlet carries the brand surfaces (hero, brand bands, footer);
   white and a cool off-white carry the reading surfaces; light blue marks
   accents on scarlet, where a darker blue would disappear.
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography & primitives
   4.  Layout helpers
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Components (cards, pillars, steps, quote, figures, accordion, table)
   9.  Forms
   10. Footer
   11. Motion & utilities
   12. Print
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */

:root {
  /* Brand — scarlet */
  --scarlet:      #C8102E;   /* primary; white text on this passes AA at 5.9:1 */
  --scarlet-deep: #9B0E24;   /* recessed brand panels, hover */
  --scarlet-dark: #7A0718;   /* deepest: announcement bar, footer */
  --scarlet-tint: #FDF1F3;   /* faint wash for active states */

  /* Accent — light blue */
  --blue:         #1266A0;   /* accent on white — 6.1:1 */
  --blue-deep:    #0E4E7C;
  --blue-light:   #D6EBFB;   /* accent on scarlet — 4.8:1, safe for small text */
  --blue-display: #A6D3F5;   /* stronger accent — 3.7:1, LARGE TEXT ONLY (24px+) */
  --blue-soft:    #EDF5FC;   /* accent as a surface */

  /* Neutrals */
  --ink:      #17181D;
  --ink-700:  #33353D;
  --muted:    #5E6169;
  /* .88 is the floor: below it, white body copy on the brightest scarlet
     drops under the 4.5:1 needed for normal-size text. */
  --muted-on-brand: rgba(255, 255, 255, .88);

  --paper:    #FFFFFF;
  --paper-2:  #F4F8FC;       /* cool off-white, faintly blue */

  --line:         rgba(23, 24, 29, .12);
  --line-2:       rgba(23, 24, 29, .20);
  --line-brand:   rgba(255, 255, 255, .20);
  --line-brand-2: rgba(255, 255, 255, .40);

  --shadow-1: 0 1px 2px rgba(23, 24, 29, .04), 0 10px 26px -16px rgba(23, 24, 29, .28);
  --shadow-2: 0 2px 6px rgba(23, 24, 29, .06), 0 28px 56px -28px rgba(23, 24, 29, .34);

  --radius:    14px;
  --radius-sm: 10px;

  --container: 1180px;
  --container-narrow: 800px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 124px);

  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino,
                Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Geometric lattice derived from the eight-fold star in the seal.
     Drawn in light blue so it reads as texture over scarlet, never as noise. */
  --pattern-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23D6EBFB' stroke-width='1'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 0 16 16M64 0 48 16M0 64 16 48M64 64 48 48'/%3E%3C/g%3E%3C/svg%3E");
}

/* 2. Reset & base -------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

::selection { background: var(--blue-light); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--scarlet);
  outline-offset: 3px;
  border-radius: 3px;
}
/* On scarlet surfaces a scarlet ring is invisible. */
.hero :focus-visible,
.page-hero :focus-visible,
.section--brand :focus-visible,
.cta-band :focus-visible,
.announce :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  background: var(--scarlet);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* 3. Typography & primitives --------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
}
.section--brand .lead { color: var(--muted-on-brand); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.section--brand .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow { color: var(--blue-light); }

.rule {
  width: 56px;
  height: 2px;
  background: var(--scarlet);
  border: 0;
  margin: 0 0 1.6rem;
}
.rule--center { margin-left: auto; margin-right: auto; }

blockquote { margin: 0; }

ul.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
ul.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}
.section--brand ul.ticks li { color: var(--muted-on-brand); }
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--scarlet);
  border-bottom: 2px solid var(--scarlet);
  transform: rotate(-45deg);
}
.section--brand ul.ticks li::before {
  border-left-color: var(--blue-light);
  border-bottom-color: var(--blue-light);
}

/* 4. Layout helpers ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--paper-2); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.section--brand {
  background: var(--scarlet);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section--brand h1,
.section--brand h2,
.section--brand h3 { color: #fff; }

.section--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern-brand);
  background-size: 64px 64px;
  opacity: .10;
  pointer-events: none;
}
.section--brand > * { position: relative; z-index: 1; }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: 1.1rem; }

/* Ornament — the eight-fold rosette from the seal, used as a divider */
.ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  color: var(--scarlet);
  margin-block: clamp(28px, 4vw, 44px);
}
.section--brand .ornament { color: var(--blue-light); }
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 180px;
  background: linear-gradient(to right, transparent, currentColor);
}
.ornament::after { background: linear-gradient(to left, transparent, currentColor); }
.ornament svg { width: 26px; height: 26px; flex: none; }

/* 5. Buttons & links ----------------------------------------------------- */

a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--scarlet); }
/* Buttons are excluded: this rule is more specific than `.btn`'s own
   `color: var(--btn-fg)`, so without the :not() it repaints the label white
   on a button whose background has just been inverted to white. */
.section--brand a:not(.btn) { color: #fff; }

.btn {
  --btn-bg: var(--scarlet);
  --btn-fg: #fff;
  --btn-bd: var(--scarlet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary { --btn-bg: var(--scarlet); --btn-bd: var(--scarlet); --btn-fg: #fff; }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.btn--light   { --btn-bg: #fff; --btn-fg: var(--scarlet-deep); --btn-bd: #fff; }
.btn--block   { width: 100%; }

/* Scarlet surfaces invert the button pair: white fill, scarlet label. */
.hero .btn,
.page-hero .btn,
.section--brand .btn,
.cta-band .btn { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--scarlet-deep); }

.hero .btn--ghost,
.page-hero .btn--ghost,
.section--brand .btn--ghost,
.cta-band .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--line-brand-2); }

.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.section--brand .btn--ghost:hover,
.cta-band .btn--ghost:hover { --btn-bd: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--scarlet);
  padding-bottom: 2px;
  transition: gap .18s var(--ease);
}
.link-arrow:hover { gap: 13px; }
.link-arrow svg { width: 15px; height: 15px; }
.section--brand .link-arrow { color: #fff; border-bottom-color: var(--blue-light); }

/* 6. Header / navigation ------------------------------------------------- */

.announce {
  background: var(--scarlet-dark);
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
  letter-spacing: .02em;
  text-align: center;
  padding: 9px var(--gutter);
}
.announce strong { color: var(--blue-light); font-weight: 700; }
.announce a { color: #fff; text-underline-offset: 3px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 30px -22px rgba(23, 24, 29, .5); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand__seal {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  mix-blend-mode: multiply;
}
.brand__text { display: grid; line-height: 1.15; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.008em;
  white-space: nowrap;
}
.brand__tag {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-top: 4px;
}
@media (max-width: 420px) {
  .brand__seal { width: 44px; height: 44px; }
  .brand__name { font-size: 1.06rem; }
  .brand__tag { font-size: .55rem; letter-spacing: .12em; }
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-700);
  white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { background: var(--blue-soft); color: var(--blue-deep); }

/* --- Explore dropdown ---------------------------------------------------- */

.nav__group { position: relative; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-700);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav__trigger:hover { background: var(--blue-soft); color: var(--blue-deep); }
/* The chevron is a <span> wrapping the <svg> rather than the svg itself.
   Rotating an ordinary element sidesteps the transform-origin and
   transform-box differences that apply to SVG roots, so the flip behaves the
   same everywhere without needing SVG-specific overrides. */
.nav__chevron {
  display: block;
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform .22s var(--ease);
}
.nav__chevron svg { width: 100%; height: 100%; display: block; }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* The panel spans the header edge to edge. It is positioned against the header
   rather than the trigger — hence the static group — but stays a DESCENDANT of
   the group, so moving the pointer from the trigger down into the panel never
   counts as leaving it and the menu does not close underneath the cursor. */
.nav__group { position: static; }

.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
/* No CSS keyframe here: the open is animated by GSAP in main.js, and a CSS
   animation would outrank the inline styles GSAP writes and fight it. Without
   GSAP the panel simply appears, which is the correct degraded behaviour for
   a control that needs JavaScript to open at all. */
.nav__menu[hidden] { display: none; }

.nav__menu-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(26px, 3vw, 38px);
}

.nav__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 18px;
}
.nav__links a {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  white-space: normal;
}
.nav__links a:hover { background: var(--blue-soft); }
.nav__link-title {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
}
.nav__links a:hover .nav__link-title { color: var(--scarlet); }
.nav__link-desc { font-size: .84rem; color: var(--muted); line-height: 1.45; }

/* The seal anchors the right-hand side of the panel. */
.nav__brandmark {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--line);
}
.nav__brandmark img { width: clamp(84px, 9vw, 116px); mix-blend-mode: multiply; }
.nav__brandmark-motto {
  margin: 0;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scarlet);
  text-align: center;
  max-width: 15ch;
}

/* Active page state, driven by data-page on <body>.
   A tinted pill rather than a solid one, so it does not compete with the
   solid scarlet call-to-action sitting beside it. */
body[data-page="home"]       .nav a[href="index.html"],
body[data-page="about"]      .nav a[href="about.html"],
body[data-page="programmes"] .nav a[href="programmes.html"],
body[data-page="research"]   .nav a[href="research.html"],
body[data-page="collaborations"] .nav a[href="collaborations.html"],
body[data-page="admissions"] .nav a[href="admissions.html"],
body[data-page="news"]       .nav a[href="news.html"],
body[data-page="contact"]    .nav a[href="contact.html"],
/* The trigger carries the active mark when the current page lives inside it,
   so the user is never left wondering where in the nav they are. */
body[data-page="about"]          .nav__trigger,
body[data-page="programmes"]     .nav__trigger,
body[data-page="research"]       .nav__trigger,
body[data-page="collaborations"] .nav__trigger,
body[data-page="admissions"]     .nav__trigger {
  color: var(--scarlet);
  font-weight: 600;
  background: var(--scarlet-tint);
}

.header-cta { flex: none; }
.header-cta .btn { padding: 11px 20px; font-size: .87rem; }

/* The nav carries its own call-to-action for the mobile drawer only. */
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
  /* align-content must be centred, or the auto rows stretch to fill the 46px
     button and the bars end up far further apart than the gap suggests.
     With rows held to 2px and a 5px gap, centres sit exactly 7px apart —
     the distance the outer two travel to meet as a cross. */
  align-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Folding most links into the Explore dropdown cut the navigation from 771px
   to 291px, so the header no longer needs its own wider container, a hidden
   tagline or shrunken link text — all three of those were only ever there to
   absorb an over-full row. */

@media (max-width: 1080px) {
  .nav-toggle { display: grid; }
  .header-cta { display: none; }

  /* backdrop-filter would make the header a containing block for the
     fixed-position drawer below, clipping it to the header's height. */
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 88vw);
    background: var(--paper);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 104px var(--gutter) 40px;
    transform: translateX(102%);
    transition: transform .32s var(--ease);
    box-shadow: var(--shadow-2);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a {
    padding: 15px 12px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  /* In the drawer the dropdown becomes an inline, indented group rather than a
     floating panel — there is nothing to float over. */
  .nav__group { position: static; }
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 15px 12px;
    font-size: 1.05rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  /* Phones get a different treatment: no full-bleed panel and no seal — there
     is no width to spend on either. The five destinations become a stack of
     tappable cards instead, each with its description kept. */
  .nav__menu {
    position: static;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .nav__menu-inner {
    display: block;
    padding: 10px 0 14px;
    max-width: none;
    padding-inline: 0;
  }
  .nav__links { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .nav__links a {
    padding: 13px 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--scarlet);
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--line);
  }
  .nav__link-title { font-size: 1rem; }
  .nav__link-desc { font-size: .8rem; }

  .nav__brandmark { display: none; }

  /* Keep the toggle above the open drawer so it stays reachable as a close button. */
  .nav-toggle { position: relative; z-index: 2; background: var(--paper); }

  /* Selector must out-rank `.nav a` above, which zeroes the radius. */
  .nav a.nav__cta {
    display: inline-flex;
    margin-top: 22px;
    padding: 15px 24px;
    border-bottom: 0;
    border-radius: 999px;
    justify-content: center;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(18, 4, 8, .48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
    z-index: 99;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

body.nav-open { overflow: hidden; }

/* 7. Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--scarlet);
  background-image: linear-gradient(160deg, var(--scarlet) 0%, var(--scarlet-deep) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern-brand);
  background-size: 64px 64px;
  opacity: .11;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  right: -240px;
  top: -320px;
  background: radial-gradient(circle, rgba(255, 255, 255, .20), transparent 62%);
  z-index: -2;
  pointer-events: none;
}

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

   Headers carry a public-domain manuscript image, laid under a scarlet scrim.
   The scrim is not decoration: it is what keeps white text legible over an
   image whose pixels we do not control. Behind the text column it never drops
   below .92, so even a pure-white pixel underneath composites to rgb(204,35,63)
   — measured 5.40:1 against white, clear of WCAG AA. The scrim thins to .70
   only at the hero's far right, under the seal, where no text sits.
   -------------------------------------------------------------------------- */

.hero__media,
.page-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__media { z-index: -3; }

.hero__media img,
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Stripped of its own colour so it reads as tone inside the scarlet, never
     as a competing photograph. */
  filter: grayscale(1) contrast(1.15);
  /* Raising this does not weaken the contrast guarantee: the scrim is painted
     over the image, and the guarantee is calculated against a pure-white pixel
     underneath, which is already the worst case at any opacity. */
  opacity: .62;
  mix-blend-mode: luminosity;
  will-change: transform;
}

.hero__media::after,
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Hero: text sits left, seal right — so the image is released to the right. */
.hero__media::after {
  background:
    linear-gradient(100deg,
      var(--scarlet) 0%,
      rgba(200, 16, 46, .96) 34%,
      rgba(200, 16, 46, .92) 50%,
      rgba(155, 14, 36, .70) 100%);
}

/* Interior headers are text across the full width, so the scrim stays dense
   throughout and only thins toward the bottom edge. */
.page-hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(200, 16, 46, .95) 0%,
      rgba(200, 16, 46, .93) 55%,
      rgba(155, 14, 36, .86) 100%);
}

@media (max-width: 900px) {
  /* The seal moves above the text on narrow screens, so there is no longer a
     free side — hold the scrim dense everywhere. */
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(200, 16, 46, .94) 0%,
      rgba(200, 16, 46, .93) 60%,
      rgba(155, 14, 36, .88) 100%);
  }
  .hero__media img,
  .page-hero__media img { opacity: .5; }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(72px, 10vw, 132px);
}

.hero h1 {
  color: #fff;
  margin-bottom: .45em;
  font-size: clamp(2.2rem, 4.4vw, 3.35rem);
  text-wrap: pretty;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue-display);
}
.hero .lead { color: var(--muted-on-brand); max-width: 56ch; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 10px;
  border: 1px solid var(--line-brand-2);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1.7rem;
}
.hero__badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-light);
  box-shadow: 0 0 0 0 rgba(214, 235, 251, .7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 11px rgba(214, 235, 251, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 235, 251, 0); }
}

.hero__seal {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__seal img {
  width: min(400px, 96%);
  filter: invert(1);
  mix-blend-mode: screen;
  animation: sealIn 1.3s var(--ease) both;
}
@keyframes sealIn {
  from { opacity: 0; transform: scale(.9) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
.hero__seal::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .24), transparent 68%);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: 2.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line-brand);
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 600;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__seal { order: -1; }
  .hero__seal img { width: min(230px, 55%); }
}

/* Page header (interior pages) */
.page-hero {
  background: var(--scarlet);
  background-image: linear-gradient(160deg, var(--scarlet) 0%, var(--scarlet-deep) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern-brand);
  background-size: 64px 64px;
  opacity: .11;
  z-index: 1;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -180px;
  bottom: -340px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 62%);
  z-index: 1;
}
/* Layer order is stated explicitly, because the media panel is a real child
   and would otherwise be caught by the blanket rule below and lifted above
   the image it is supposed to sit behind. */
.page-hero__media { z-index: 0; }
.page-hero > *:not(.page-hero__media) { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero .lead { color: var(--muted-on-brand); max-width: 62ch; }

.breadcrumb {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted-on-brand);
  margin-bottom: 1.4rem;
}
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb span { margin-inline: 8px; opacity: .55; }

/* 8. Components ---------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--scarlet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .97rem; }
.section--tint .card { background: #fff; }
/* Recessed rather than raised: a dark tint keeps text on these cards above
   4.5:1, which a light tint on bright scarlet does not. */
.section--brand .card {
  background: rgba(0, 0, 0, .10);
  border-color: var(--line-brand);
  color: var(--muted-on-brand);
}
.section--brand .card p { color: var(--muted-on-brand); }
.section--brand .card::after { background: var(--blue-light); }
.section--brand .card:hover { border-color: var(--line-brand-2); }

.card--flat:hover { transform: none; box-shadow: none; }

/* Four-up grids hold narrower cards; tighten their internals. */
.grid--4 .card { padding: clamp(20px, 2.2vw, 26px); }
.grid--4 .card h3 { font-size: 1.12rem; }
.grid--4 .card p { font-size: .93rem; }

.card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  margin-bottom: 1.15rem;
  color: var(--scarlet);
  background: var(--blue-soft);
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.card__icon svg { width: 24px; height: 24px; }
.card:hover .card__icon { background: var(--scarlet); color: #fff; border-color: var(--scarlet); }
.section--brand .card__icon {
  background: rgba(255, 255, 255, .10);
  border-color: var(--line-brand);
  color: var(--blue-light);
}
.section--brand .card:hover .card__icon {
  background: #fff;
  color: var(--scarlet);
  border-color: #fff;
}

.card__index {
  font-family: var(--font-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--scarlet);
  display: block;
  margin-bottom: .8rem;
}
.section--brand .card__index { color: var(--blue-light); }

/* Pillar list */
.pillar {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.pillar:last-child { border-bottom: 0; }
.pillar h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.pillar p { color: var(--muted); font-size: .96rem; margin: 0; }

/* Numbered pathway */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--scarlet);
  line-height: 1;
}
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--muted); margin: 0; }
.section--brand .step { border-color: var(--line-brand); }
.section--brand .step::before { color: var(--blue-light); }
.section--brand .step p { color: var(--muted-on-brand); }

/* Pull quote */
.quote {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -.012em;
}
.quote cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scarlet);
  font-family: var(--font-sans);
  font-weight: 700;
}
.section--brand .quote cite { color: var(--blue-light); }

/* Figure strip */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.figure { background: var(--paper); padding: clamp(24px, 3vw, 34px); }
.figure dt {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scarlet);
  font-weight: 700;
  margin-bottom: .6rem;
}
.figure dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
}
.section--tint .figure { background: #fff; }
.section--brand .figures { background: var(--line-brand); border-color: var(--line-brand); }
.section--brand .figure { background: var(--scarlet-deep); }
.section--brand .figure dt { color: var(--blue-light); }

/* Audience chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: .89rem;
  font-weight: 500;
  background: #fff;
}
.section--brand .chip {
  background: rgba(255, 255, 255, .10);
  border-color: var(--line-brand);
  color: #fff;
}

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--scarlet);
  border-bottom: 2px solid var(--scarlet);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ease);
}
.accordion details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.accordion .accordion__body {
  padding: 0 clamp(0px, 4vw, 60px) 24px 0;
  color: var(--muted);
  animation: fadeUp .3s var(--ease) both;
}

/* Article / news list */
.post-list { display: grid; gap: 0; }
.post-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.post-item:last-child { border-bottom: 1px solid var(--line); }
.post-meta {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scarlet);
  font-weight: 700;
  line-height: 1.7;
}
.post-item h3 { margin-bottom: .5rem; }
.post-item p { color: var(--muted); }
@media (max-width: 720px) { .post-item { grid-template-columns: 1fr; } }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; color: var(--muted); }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--scarlet); }

/* Callout panel — light blue surface, scarlet marker */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--scarlet);
  background: var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: clamp(20px, 3vw, 28px);
}
.callout h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.callout p { color: var(--muted); font-size: .96rem; }

/* Simple data table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 560px;
  background: #fff;
}
table.data th,
table.data td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scarlet);
  font-weight: 700;
  background: var(--blue-soft);
}
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: 600; }

/* Collaborating institutions */
.collab {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.collab:last-child { margin-bottom: 0; }

.collab__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 26px);
  padding-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
/* A rounded square rather than a circle: partner logos are wordmarks as often
   as they are round seals, and a circular mask clips the lettering off them. */
.collab__logo {
  width: clamp(76px, 9vw, 108px);
  height: clamp(76px, 9vw, 108px);
  flex: none;
  border-radius: var(--radius-sm);
  object-fit: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
}
.collab__meta h3 { margin: 0 0 .35rem; }
.collab__role {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin: 0 0 .6rem;
}
.collab__meta address,
.collab__address {
  font-style: normal;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--muted);
}

.collab__gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.collab__gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.collab__gallery img:hover { transform: scale(1.02); box-shadow: var(--shadow-1); }

/* Programmes running at a collaborating institution */
.collab__courses {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.collab__courses li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  font-weight: 500;
}
.collab__badge {
  flex: none;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  border: 1px solid #C3DDF2;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.collab__map { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }

/* An open slot: styled as an invitation rather than a filled entry. */
.collab--open { border-style: dashed; border-color: var(--line-2); background: var(--paper-2); }
.collab--open .collab__logo { opacity: .55; }
.collab__cta { margin-top: 1.1rem; padding: 11px 20px; font-size: .87rem; }

@media (max-width: 520px) {
  .collab__head { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Marquee — a continuously scrolling band of collaboration photographs.
   The row is duplicated and the track shifts by exactly -50%, so the copy
   lands where the original started and the loop has no visible seam. */
.marquee {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  padding-block: clamp(18px, 2.4vw, 26px);
  overflow: hidden;
  position: relative;
}
.marquee__label {
  display: block;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
/* Two lanes: the first travels left, the second right. */
.marquee__lane { overflow: hidden; }
.marquee__lane + .marquee__lane { margin-top: clamp(10px, 1.4vw, 16px); }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 60s) linear infinite;
}
.marquee__lane--reverse .marquee__track { animation-direction: reverse; }

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* Cells are buttons so they are clickable and keyboard reachable. */
.marquee__cell {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.marquee__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }

/* Logos are wordmarks, not scenery: `cover` would crop the lettering away, so
   they are fitted whole onto white and given a little breathing room.
   The selector is deliberately more specific than `.marquee__row img` below,
   which sets object-fit: cover and would otherwise win on source order. */
.marquee__row .marquee__cell--logo img {
  object-fit: contain;
  background: #fff;
  padding: 12px;
}

.marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0 clamp(6px, .8vw, 10px) 0 0;
  list-style: none;
}
.marquee__row img {
  height: clamp(108px, 13vw, 158px);
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Edges fade into the band so images enter and leave rather than being cut. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--paper-2), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--paper-2), transparent); }

/* Lightbox — opened by clicking a marquee photograph */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 4, 8, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.lightbox__close:hover { background: var(--scarlet); color: #fff; transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; }

.lightbox__figure { margin: 0; display: grid; grid-template-columns: 1.35fr 1fr; }
@media (max-width: 760px) { .lightbox__figure { grid-template-columns: 1fr; } }

.lightbox__image {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 70vh;
  object-fit: cover;
  background: var(--paper-2);
}

.lightbox__caption { padding: clamp(22px, 3vw, 34px); align-self: center; }
.lightbox__role {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin: 0 0 .5rem;
}
.lightbox__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .7rem; }
.lightbox__courses {
  font-size: .95rem;
  color: var(--ink-700);
  margin: 0 0 .9rem;
}
.lightbox__address {
  font-style: normal;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.65;
  display: block;
  margin-bottom: 1.4rem;
}
.lightbox__map,
.lightbox__cta { padding: 10px 18px; font-size: .85rem; margin-right: 8px; }
.lightbox__map[hidden],
.lightbox__cta[hidden],
.lightbox__courses[hidden],
.lightbox__address[hidden] { display: none; }

/* CTA band */
.cta-band {
  background: var(--scarlet);
  background-image: linear-gradient(160deg, var(--scarlet) 0%, var(--scarlet-deep) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 60px);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern-brand);
  background-size: 64px 64px;
  opacity: .12;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: var(--muted-on-brand); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .eyebrow { color: var(--blue-light); justify-content: center; }

/* 9. Forms --------------------------------------------------------------- */

.form-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-1);
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 7px;
}
.field .req { color: var(--scarlet); }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 6px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-family: inherit;
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235E6169' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
/* Blue focus ring: distinct from the scarlet brand and from the red used for
   invalid fields, so the three states never read as the same signal. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 102, 160, .18);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #B3261E; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 0 18px;
}

.checkline {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .89rem;
  color: var(--muted);
}
.checkline input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--scarlet); }

.form-status {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status[data-tone="ok"]   { background: #E9F3EE; border: 1px solid #B7DCC8; color: #14563C; }
.form-status[data-tone="info"] { background: var(--blue-soft); border: 1px solid #C3DDF2; color: var(--blue-deep); }
.form-status[data-tone="err"]  { background: #FBECEA; border: 1px solid #F0C4BF; color: #8C1D18; }

/* 10. Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--scarlet-dark);
  color: rgba(255, 255, 255, .80);
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 7vw, 84px) 0;
  font-size: .93rem;
  /* The seal below is composited with mix-blend-mode, which blends against the
     backdrop *inside the nearest stacking context*. Isolating here and layering
     the pattern behind the content — rather than pushing children to z-index 1,
     which would make .container the stacking context and leave the blend with a
     transparent backdrop — keeps the footer background available to blend into. */
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern-brand);
  background-size: 64px 64px;
  opacity: .07;
  z-index: -1;
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-brand img {
  width: 68px;
  height: 68px;
  flex: none;
  filter: invert(1);
  mix-blend-mode: screen;
}
.footer-brand .name {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 6px;
}
.footer-brand .motto {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 700;
}

.footer-col h4 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a {
  color: rgba(255, 255, 255, .80);
  text-decoration: none;
  transition: color .16s var(--ease);
}
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.social { display: flex; gap: 10px; margin-top: 1.2rem; }
.social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-brand);
  border-radius: 50%;
  color: rgba(255, 255, 255, .88);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.social a:hover { background: #fff; border-color: #fff; color: var(--scarlet); }
.social svg { width: 17px; height: 17px; }

.footer-bar {
  border-top: 1px solid var(--line-brand);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255, 255, 255, .66);
}
.footer-bar a { color: rgba(255, 255, 255, .80); text-decoration: none; }
.footer-bar a:hover { color: #fff; text-decoration: underline; }
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 22px; }

/* 11. Motion & utilities ------------------------------------------------- */

/* --- Motion ---------------------------------------------------------------

   Three states, in order of preference:

     .js                 scripts are available; animatable elements start hidden
     .motion-ready       motion.js has taken control and will reveal them
     .motion-off         motion.js ran but is standing down (reduced motion, or
                         GSAP missing) — CSS transitions do the reveal instead
     .motion-static      motion.js never ran at all; the <head> failsafe fires
                         after 2.5s and everything is shown unconditionally

   Nothing is ever hidden without a route back to visible.
   -------------------------------------------------------------------------- */

.js [data-reveal] { opacity: 0; }

/* GSAP is absent or unwanted: reveal with the original CSS transition. */
.js.motion-off [data-reveal] {
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js.motion-off [data-reveal].is-visible { opacity: 1; transform: none; }

/* Failsafe: the motion layer never booted. Show everything, immediately. */
.js.motion-static [data-reveal],
.js.motion-static .hero__badge,
.js.motion-static .hero h1,
.js.motion-static .hero .lead,
.js.motion-static .hero .btn,
.js.motion-static .hero__meta,
.js.motion-static .hero__seal img,
.js.motion-static .page-hero .breadcrumb,
.js.motion-static .page-hero h1,
.js.motion-static .page-hero .lead,
.js.motion-static .page-hero .btn,
.js.motion-static .section-head h2,
.js.motion-static .cta-band h2,
.js.motion-static .quote,
.js.motion-static .step,
.js.motion-static .figure,
.js.motion-static .chip,
.js.motion-static .post-item,
.js.motion-static table.data tbody tr {
  opacity: 1 !important;
  transform: none !important;
}

/* Elements the GSAP timelines fade in. Held back only while motion.js is in
   charge and actively animating — never when it has stood down. */
.js:not(.motion-off):not(.motion-static) .hero__badge,
.js:not(.motion-off):not(.motion-static) .hero .lead,
.js:not(.motion-off):not(.motion-static) .hero .btn,
.js:not(.motion-off):not(.motion-static) .hero__meta,
.js:not(.motion-off):not(.motion-static) .hero__seal img,
.js:not(.motion-off):not(.motion-static) .page-hero .breadcrumb,
.js:not(.motion-off):not(.motion-static) .page-hero .eyebrow,
.js:not(.motion-off):not(.motion-static) .page-hero .lead,
.js:not(.motion-off):not(.motion-static) .page-hero .btn,
.js:not(.motion-off):not(.motion-static) .quote,
.js:not(.motion-off):not(.motion-static) .step,
.js:not(.motion-off):not(.motion-static) .figure,
.js:not(.motion-off):not(.motion-static) .chip,
.js:not(.motion-off):not(.motion-static) .post-item,
.js:not(.motion-off):not(.motion-static) table.data tbody tr { opacity: 0; }

/* Headings are revealed word by word, so the heading itself is unhidden the
   moment its words are in place. */
.js:not(.motion-off):not(.motion-static) .hero h1,
.js:not(.motion-off):not(.motion-static) .page-hero h1,
.js:not(.motion-off):not(.motion-static) .section-head h2,
.js:not(.motion-off):not(.motion-static) .cta-band h2 { opacity: 0; }

/* Word mask. The shell clips; the inner span slides up out of it. Padding
   plus a matching negative margin gives descenders (g, y, p) room to sit
   inside the clip without being sliced. */
.a-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.a-word__i { display: inline-block; will-change: transform; }

/* Reading progress, pinned to the bottom edge of the sticky header. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--scarlet);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.motion-off .scroll-progress,
.motion-static .scroll-progress { display: none; }

/* The accordion body is height-animated, so it must not leak while closing. */
.accordion .accordion__body { overflow: hidden; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2.4rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  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: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* motion.js also adds .motion-static here, which unhides everything via the
     rule list above. This is the belt-and-braces copy for the case where the
     script is slow to arrive: no reader who asked for less motion should ever
     be shown a blank hero while waiting for it. */
  .js [data-reveal],
  .js .hero__badge,
  .js .hero h1,
  .js .hero .lead,
  .js .hero .btn,
  .js .hero__meta,
  .js .hero__seal img,
  .js .page-hero .breadcrumb,
  .js .page-hero .eyebrow,
  .js .page-hero h1,
  .js .page-hero .lead,
  .js .page-hero .btn,
  .js .section-head h2,
  .js .cta-band h2,
  .js .quote,
  .js .step,
  .js .figure,
  .js .chip,
  .js .post-item,
  .js table.data tbody tr {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-progress { display: none; }

  /* Never scroll the marquee automatically. It becomes a plain strip the
     reader can push along themselves if they want to see the rest. */
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* 12. Print -------------------------------------------------------------- */

@media print {
  .site-header, .announce, .nav-scrim, .site-footer, .btn-row, .cta-band { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero, .page-hero, .section--brand {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }
  .hero h1, .page-hero h1, .section--brand h2, .section--brand h3 { color: #000 !important; }
  .section { padding-block: 18pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}