/* Liquid Glass theme. Loads after style.css and photo-hero.css.
   The site has two layers that share one geometry. The floating layer (header,
   menus, buttons, chips, fact strips, the report banner) is clear glass:
   nearly transparent in the middle, bending the backdrop in a thick band at
   the edge, with a lit rim. liquid-glass.js puts a .lg-lens behind each glass
   surface and builds the SVG displacement filters. The content layer under it
   is not glass; it takes the same rounded, concentric shapes and hairlines. */
:root {
  --lg-radius: 28px;
  --lg-pill: 999px;
  --lg-header-h: calc(4.75rem + 24px);
  --lg-shadow: 0 24px 60px -28px rgba(11, 23, 36, .55), 0 1px 1px rgba(11, 23, 36, .06);
}

/* Material --------------------------------------------------------------- */
.lg-glass, .lg-glass-navy {
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: var(--lg-shadow);
}
.lg-glass-navy { border-color: rgba(255, 255, 255, .18); background: rgba(11, 23, 36, .10); }
.lg-lens {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(1.2px) saturate(1.75) brightness(1.05);
  backdrop-filter: blur(1.2px) saturate(1.75) brightness(1.05);
}
/* The refraction. The classes are built in liquid-glass.js, not written in the HTML. */
.lg-lens--wide { filter: url(#lg-lens-wide); }
.lg-lens--pill { filter: url(#lg-lens-pill); }
.lg-lens--card { filter: url(#lg-lens-card); }
.lg-glass-navy > .lg-lens { -webkit-backdrop-filter: blur(1.6px) saturate(1.55) brightness(.94); backdrop-filter: blur(1.6px) saturate(1.55) brightness(.94); }
/* Thickness: inner glow at the top, soft shade at the bottom, a directional
   highlight sweeping in from the upper-left and a faint exit light lower-right. */
.lg-glass::before, .lg-glass-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 14px 30px -22px rgba(255, 255, 255, .75),
    inset 0 -14px 26px -24px rgba(11, 23, 36, .35),
    inset 0 0 14px 1px rgba(255, 255, 255, .16),
    inset 0 0 28px 4px rgb(255 255 255 / calc(var(--lg-hot) * .16));
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 18%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(60% 50% at 100% 115%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%);
}
.lg-glass-navy::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 18%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(60% 50% at 100% 115%, rgba(201, 220, 233, .10), rgba(201, 220, 233, 0) 60%);
}
.lg-glass-navy::before { box-shadow: inset 0 14px 30px -22px rgba(255, 255, 255, .6), inset 0 -14px 26px -24px rgba(11, 23, 36, .35), inset 0 0 14px 1px rgba(255, 255, 255, .12), inset 0 0 28px 4px rgb(255 255 255 / calc(var(--lg-hot) * .14)); }
/* Specular rim: light caught in the edge of the glass. A key light at the
   upper left and a softer exit light at the lower right flare along the rim
   near those corners, the top edge is brighter than the bottom, and the rim
   also lights up beside the pointer. Painted on a 1.5px band: the mask keeps
   only the padding. Buttons use ::before for it; ::after is their volume. */
.lg-glass, .lg-glass-navy, .lg-button { --lg-glint-w: 14rem; --lg-glint-h: 6rem; --lg-key: 1; --lg-exit: .8; --lg-rim-top: .32; --lg-rim-bottom: .1; }
.lg-glass-navy { --lg-key: .95; --lg-exit: .7; --lg-rim-top: .28; --lg-rim-bottom: .08; }
.lg-glass::after, .lg-glass-navy::after, .lg-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at 0 0, rgb(255 255 255 / var(--lg-key)), rgb(255 255 255 / 0) 72%),
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at 100% 100%, rgb(255 255 255 / var(--lg-exit)), rgb(255 255 255 / 0) 72%),
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at var(--lg-mx) var(--lg-my), rgb(255 255 255 / calc(var(--lg-hot) * .9)), rgb(255 255 255 / 0) 72%),
    linear-gradient(rgb(255 255 255 / var(--lg-rim-top)), rgb(255 255 255 / var(--lg-rim-bottom)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lg-button, .lg-chip { --lg-glint-w: 4.5rem; --lg-glint-h: 2.25rem; }
/* Glass on dark colour ----------------------------------------------------
   Real glass over a dark colour is nearly invisible across its face. You see
   it at the edge: a thin band where the backdrop bends, an edge that reflects
   more light than the face (Fresnel), a thin specular line on the rim, and a
   soft shadow. Painted gloss, a tinted body or a hard outline make it read as
   plastic, so glass over a dark backdrop (.lg-on-dark, set by liquid-glass.js)
   has none of them: a clear face, a brighter edge band, a thin lit rim, and a
   shadow soft enough that the pane still seems to let light through. */
.lg-on-dark {
  --lg-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 18px 40px -20px rgba(0, 0, 0, .5);
  --lg-rim-top: .26;
  --lg-rim-bottom: .07;
  --lg-key: .95;
  --lg-exit: .45;
}
.lg-glass.lg-on-dark, .lg-glass-navy.lg-on-dark { border-color: rgba(255, 255, 255, .1); }
.lg-glass.lg-on-dark::before, .lg-glass-navy.lg-on-dark::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 0 10px rgba(255, 255, 255, .08),
    inset 0 0 36px rgba(255, 255, 255, .06),
    inset 0 0 28px 4px rgb(255 255 255 / calc(var(--lg-hot) * .08));
  background: radial-gradient(34% 70% at var(--lg-mx) var(--lg-my), rgb(255 255 255 / calc(var(--lg-hot) * .07)), rgb(255 255 255 / 0) 70%);
}

/* Over photos the lens keeps its vivid refraction; over a dark flat colour the
   same saturation boost only turns the pane into a brighter patch of that
   colour, so there the lens stays almost clear. */
.lg-on-dark.lg-on-flat > .lg-lens { -webkit-backdrop-filter: blur(.5px) saturate(1.06) brightness(1.03); backdrop-filter: blur(.5px) saturate(1.06) brightness(1.03); }

/* Content sits above the lens and the sheen. */
.lg-glass > :not(.lg-lens):not(.lg-flare):not(.site-nav), .lg-glass-navy > :not(.lg-lens):not(.lg-flare) { position: relative; z-index: 1; }
@media (min-width: 61.26em) { .header-inner > .site-nav { position: relative; z-index: 1; } }
/* Text on clear glass gets a whisper of shadow so it survives busy backdrops. */
.site-header[data-lg-tone="dark"] .header-inner, .lg-glass-navy, .photo-hero .button, .closing-cta--photo .button { text-shadow: 0 1px 2px rgba(11, 23, 36, .35); }

/* Wordmark: the style guide's type (League Spartan Bold for OPEN MINDS,
   Times New Roman Bold for FOUNDATION) on two lines, which sits better beside
   the mark at header size than the guide's three-line stack. FOUNDATION is the
   smaller, secondary line at its natural width, lightly spaced and centred. */
.brand, .footer-brand { gap: .75rem; }
.brand-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "League Spartan", "Arial Narrow", Arial, sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .9;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Centred under OPEN MINDS; the negative margin cancels the tracking after the last letter so the centring is exact. */
.brand-name__sub { align-self: center; margin: .45em -.06em 0 0; font-family: "Times New Roman", Times, serif; font-size: .6em; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.brand .brand-mark { width: 3rem; height: 3rem; flex-basis: 3rem; }
.footer-brand .brand-name { font-size: 1.1875rem; }
@media (max-width: 61.25em) {
  .brand-name { display: inline-flex; font-size: 1.125rem; }
  .brand .brand-mark { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
}
@media (max-width: 47.5em) {
  .brand, .footer-brand { gap: .625rem; }
  .brand-name { font-size: 1rem; }
  .brand .brand-mark { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }
}

/* Floating header capsule ------------------------------------------------- */
.site-header { background: transparent; border-bottom: 0; padding: 12px 0; transition: color .25s ease; }
.site-header .header-inner { position: relative; min-height: 4.75rem; padding-inline: var(--space-4) var(--space-3); border-radius: var(--lg-pill); }
.site-header:has(+ main > .photo-hero:first-child) { margin-bottom: calc(var(--lg-header-h) * -1); }
.site-header:has(+ main > .photo-hero:first-child) + main > .photo-hero:first-child .photo-hero__copy { padding-top: calc(var(--space-6) + var(--lg-header-h)); }
.site-header[data-lg-tone="dark"] { color: var(--paper-bright); }
.site-header[data-lg-tone="dark"] .brand-mark img { filter: brightness(0) invert(1); }
.site-header[data-lg-tone="dark"] .site-nav > a::after, .site-header[data-lg-tone="dark"] .nav-dropdown > summary::before { background: currentColor; }
.site-header[data-lg-tone="dark"] .nav-toggle-lines i { background: currentColor; }
.site-nav > a, .nav-dropdown > summary { padding-inline: var(--space-2); }
/* The desktop nav is inline inside the capsule; on small screens it is the
   drawer, which carries its own lens (shown by the media query below). */
.site-nav > .lg-lens { display: none; }
.nav-dropdown-menu {
  position: absolute;
  isolation: isolate;
  top: calc(100% + var(--space-3));
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 22px;
  background: rgba(251, 252, 247, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--lg-shadow);
  color: var(--ink);
  text-shadow: none;
}
.nav-dropdown-menu > a { position: relative; z-index: 1; border-bottom: 0; border-radius: 14px; }
.nav-dropdown-menu > a + a { margin-top: 2px; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { background: rgba(255, 255, 255, .5); }
/* Menus carry text, so their lens softens the backdrop a little more than the
   bar does; the edge still bends. Over photos the menu follows the header tone. */
.nav-dropdown-menu > .lg-lens { -webkit-backdrop-filter: blur(4px) saturate(1.8) brightness(1.06); backdrop-filter: blur(4px) saturate(1.8) brightness(1.06); }
.site-header[data-lg-tone="dark"] .nav-dropdown-menu { border-color: rgba(255, 255, 255, .3); background: rgba(11, 23, 36, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--lg-shadow); color: var(--paper-bright); text-shadow: 0 1px 2px rgba(11, 23, 36, .45); }
.site-header[data-lg-tone="dark"] .nav-dropdown-menu a:hover, .site-header[data-lg-tone="dark"] .nav-dropdown-menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); }

/* Hero: text stays plain on the photo; secondary links are glass pills too. */
.photo-hero .text-link.lg-button, .closing-cta--photo .text-link.lg-button { min-height: 3rem; padding: 0 1.25rem; color: var(--paper-bright); }
.photo-hero__publication > img { border-radius: 6px; }

/* Buttons: every clickable button is a glass pill with real volume, so it
   reads as 3D even on a flat backdrop. Layers, bottom to top: the lens
   (backdrop, with the pointer highlight), a convex body gradient, ::after =
   inner shading (bright top crescent, shaded lower edge, caustic glow at the
   bottom), ::before = the specular rim, then the label. The outer drop shadow lives on the
   element so hover/press can swap it without touching the shading. */
.lg-button, .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--lg-pill);
  border: 1px solid rgba(255, 255, 255, .32);
  background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .10) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 14px 28px -14px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lg-button > :not(.lg-lens):not(.lg-flare), .button > :not(.lg-lens):not(.lg-flare) { position: relative; z-index: 1; }
.lg-button > .lg-lens { -webkit-backdrop-filter: blur(1.2px) saturate(1.8) brightness(1.08); backdrop-filter: blur(1.2px) saturate(1.8) brightness(1.08); }
.lg-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 2px 1px -1px rgba(255, 255, 255, .85),
    inset 0 12px 16px -12px rgba(255, 255, 255, .45),
    inset 0 -2px 2px -1px rgba(0, 0, 0, .28),
    inset 0 -10px 16px -12px rgba(0, 0, 0, .25),
    inset 0 -6px 14px -8px rgba(255, 255, 255, .28),
    inset 2px 0 6px -4px rgba(255, 255, 255, .35),
    inset -2px 0 6px -4px rgba(255, 255, 255, .2);
  background:
    radial-gradient(120% 65% at 50% -25%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%),
    radial-gradient(90% 55% at 50% 125%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 60%);
}
.photo-hero .button, .closing-cta--photo .button, .report-banner .button { color: var(--paper-bright); text-shadow: 0 1px 2px rgba(11, 23, 36, .35); }
.photo-hero .button:hover, .closing-cta--photo .button:hover, .report-banner .button:hover { color: var(--paper-bright); border-color: rgba(255, 255, 255, .6); background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, .10) 60%, rgba(255, 255, 255, .18) 100%); }
/* Light buttons on paper: the same volume with ink shading. */
.button--paper {
  color: var(--ink);
  border-color: rgba(11, 23, 36, .22);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .32) 48%, rgba(255, 255, 255, .22) 60%, rgba(255, 255, 255, .5) 100%);
  box-shadow: 0 1px 2px rgba(11, 23, 36, .1), 0 6px 14px -8px rgba(11, 23, 36, .24);
}

.button--paper.lg-button::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 2px 1px -1px rgba(255, 255, 255, 1),
    inset 0 12px 16px -12px rgba(255, 255, 255, .8),
    inset 0 -2px 2px -1px rgba(11, 23, 36, .18),
    inset 0 -10px 16px -12px rgba(11, 23, 36, .14),
    inset 0 -6px 14px -8px rgba(255, 255, 255, .5);
  background: radial-gradient(120% 65% at 50% -25%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 60%), radial-gradient(90% 55% at 50% 125%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%);
}
.button--paper:hover { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(220, 236, 243, .6) 48%, rgba(220, 236, 243, .5) 60%, rgba(255, 255, 255, .7) 100%); }
.photo-hero .button--paper, .closing-cta--photo .button--paper { color: var(--paper-bright); border-color: rgba(255, 255, 255, .32); background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .10) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 14px 28px -14px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35); }
.photo-hero .button--paper.lg-button::after, .closing-cta--photo .button--paper.lg-button::after, .report-banner:not([data-lg-tone="light"]) .button--paper.lg-button::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 2px 1px -1px rgba(255, 255, 255, .85), inset 0 12px 16px -12px rgba(255, 255, 255, .45), inset 0 -2px 2px -1px rgba(0, 0, 0, .28), inset 0 -10px 16px -12px rgba(0, 0, 0, .25), inset 0 -6px 14px -8px rgba(255, 255, 255, .28), inset 2px 0 6px -4px rgba(255, 255, 255, .35), inset -2px 0 6px -4px rgba(255, 255, 255, .2); background: radial-gradient(120% 65% at 50% -25%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%), radial-gradient(90% 55% at 50% 125%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 60%); }
.photo-hero .button--paper:hover, .closing-cta--photo .button--paper:hover { color: var(--paper-bright); background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, .10) 60%, rgba(255, 255, 255, .18) 100%); }
/* Ink buttons: dark glass with the same lighting. Off photos the page behind is
   light, so their shadow is a soft ink one rather than a deep black drop. */
.button--ink { color: var(--paper-bright); border-color: rgba(255, 255, 255, .28); background: linear-gradient(180deg, rgba(23, 58, 89, .78) 0%, rgba(11, 23, 36, .66) 48%, rgba(11, 23, 36, .66) 60%, rgba(23, 58, 89, .72) 100%); box-shadow: 0 1px 2px rgba(11, 23, 36, .14), 0 6px 14px -8px rgba(11, 23, 36, .3); }
.button--ink:hover { color: var(--paper-bright); background: linear-gradient(180deg, rgba(49, 91, 122, .85) 0%, rgba(23, 58, 89, .75) 48%, rgba(23, 58, 89, .75) 60%, rgba(49, 91, 122, .8) 100%); }
.nav-toggle { color: var(--ink); border-color: rgba(11, 23, 36, .22); text-transform: none; }
.site-header[data-lg-tone="dark"] .nav-toggle { color: var(--paper-bright); border-color: rgba(255, 255, 255, .32); }
.report-banner-close { color: var(--paper-bright); border-color: rgba(255, 255, 255, .32); }
.report-banner-close:hover { color: var(--paper-bright); }

/* Dynamics: the glass answers the pointer, and only then. ----------------
   At rest a surface shows just its rim. Hovering fades in a specular highlight
   that follows the cursor; pressing blooms the lens and (on buttons and rows)
   throws a flare from the touch point. Large surfaces never transform: a
   transform on an element with backdrop-filter children makes Chromium
   re-rasterize the backdrop and the bar visibly changes colour afterwards. */
@property --lg-hot { syntax: "<number>"; inherits: true; initial-value: 0; }
.lg-glass, .lg-glass-navy, .lg-button, .lg-tap {
  --lg-mx: 50%;
  --lg-my: 50%;
  --lg-hot: 0;
  transition: --lg-hot .35s ease, box-shadow .35s ease, background-color .25s ease, border-color .25s ease, color .2s ease;
}
.lg-button, .lg-tap { transition: --lg-hot .35s ease, transform .5s cubic-bezier(.2, 1.6, .3, 1), box-shadow .35s ease, background-color .25s ease, border-color .25s ease, color .2s ease; }
.lg-glass:hover, .lg-glass-navy:hover, .lg-button:hover, .lg-tap:hover, .lg-press { --lg-hot: 1; }
/* The same key and exit lights glow faintly inside the glass near their corners. */
.lg-glass::before, .lg-glass-navy::before {
  background:
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at 0 0, rgb(255 255 255 / calc(var(--lg-key) * .2)), rgb(255 255 255 / 0) 62%),
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at 100% 100%, rgb(255 255 255 / calc(var(--lg-exit) * .14)), rgb(255 255 255 / 0) 62%),
    radial-gradient(34% 70% at var(--lg-mx) var(--lg-my), rgb(255 255 255 / calc(var(--lg-hot) * .28)), rgb(255 255 255 / 0) 70%),
    linear-gradient(112deg, rgb(255 255 255 / calc(var(--lg-hot) * .16)) 0%, rgb(255 255 255 / 0) 30%);
}
.lg-glass-navy::before {
  background:
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at 0 0, rgb(255 255 255 / calc(var(--lg-key) * .16)), rgb(255 255 255 / 0) 62%),
    radial-gradient(var(--lg-glint-w) var(--lg-glint-h) at 100% 100%, rgb(255 255 255 / calc(var(--lg-exit) * .1)), rgb(255 255 255 / 0) 62%),
    radial-gradient(34% 70% at var(--lg-mx) var(--lg-my), rgb(255 255 255 / calc(var(--lg-hot) * .2)), rgb(255 255 255 / 0) 70%),
    linear-gradient(112deg, rgb(255 255 255 / calc(var(--lg-hot) * .12)) 0%, rgb(255 255 255 / 0) 30%);
}
.lg-button > .lg-lens { background: radial-gradient(40% 90% at var(--lg-mx) var(--lg-my), rgb(255 255 255 / calc(var(--lg-hot) * .32)), rgb(255 255 255 / 0) 72%); }
.lg-button > :not(.lg-lens):not(.lg-flare) { z-index: 1; }
/* Hover: buttons stay where they are; only the rim and lens brighten. */
.lg-button:hover { border-color: rgba(255, 255, 255, .55); }
.button--paper.lg-button:hover { border-color: rgba(11, 23, 36, .3); }
.lg-button:hover > .lg-lens { -webkit-backdrop-filter: blur(1.2px) saturate(1.9) brightness(1.14); backdrop-filter: blur(1.2px) saturate(1.9) brightness(1.14); }
/* Press: buttons spring up; everything blooms its lens and lights its rim. */
.lg-press { transition-duration: .12s; }
.lg-button.lg-press, .lg-tap.lg-press { transform: translateY(-1px) scale(1.045); }
.lg-button.lg-press > .lg-lens, .lg-tap.lg-press > .lg-lens { -webkit-backdrop-filter: blur(1.5px) saturate(2.1) brightness(1.24); backdrop-filter: blur(1.5px) saturate(2.1) brightness(1.24); }
.lg-glass.lg-press > .lg-lens { -webkit-backdrop-filter: blur(1.2px) saturate(1.9) brightness(1.1); backdrop-filter: blur(1.2px) saturate(1.9) brightness(1.1); }
.lg-glass-navy.lg-press > .lg-lens { -webkit-backdrop-filter: blur(1.6px) saturate(1.6) brightness(1.0); backdrop-filter: blur(1.6px) saturate(1.6) brightness(1.0); }
.lg-button.lg-press { border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 34px rgba(220, 236, 243, .5), 0 18px 40px -18px rgba(0, 0, 0, .6); }
.lg-button.lg-press::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 2px 1px -1px rgba(255, 255, 255, 1), inset 0 14px 18px -12px rgba(255, 255, 255, .6), inset 0 -2px 2px -1px rgba(0, 0, 0, .2), inset 0 -8px 16px -10px rgba(255, 255, 255, .45), inset 0 0 22px rgba(255, 255, 255, .2); }
.lg-glass.lg-press, .lg-glass-navy.lg-press { border-color: rgba(255, 255, 255, .6); }
/* The flare: an expanding, fading disc of light at the touch point. */
.lg-flare, .lg-button > .lg-flare, .lg-tap > .lg-flare {
  position: absolute;
  left: var(--lg-fx, 50%);
  top: var(--lg-fy, 50%);
  z-index: 2;
  width: var(--lg-fs, 12rem);
  height: var(--lg-fs, 12rem);
  margin: calc(var(--lg-fs, 12rem) / -2) 0 0 calc(var(--lg-fs, 12rem) / -2);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .45) 22%, rgba(220, 236, 243, .18) 45%, rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
  animation: lg-flare .75s cubic-bezier(.2, .8, .2, 1) forwards;
}
.lg-tap { overflow: hidden; border-radius: 10px; }
.site-nav > a.lg-tap { padding-inline: var(--space-2); }
.lg-tap > .lg-flare { opacity: .7; }
@keyframes lg-flare {
  0% { transform: scale(.25); opacity: 1; }
  60% { opacity: .55; }
  100% { transform: scale(1.8); opacity: 0; }
}
.nav-dropdown-menu > a, .site-nav > a, .footer-dropdown > summary, .nav-dropdown > summary { position: relative; }
.nav-dropdown-menu > a.lg-press { background: rgba(255, 255, 255, .7); }
.site-header[data-lg-tone="dark"] .nav-dropdown-menu > a.lg-press { background: rgba(255, 255, 255, .22); }
/* Focus: rounded rings for keyboard users; none for mouse and touch clicks. */
.site-nav a:focus-visible, .nav-dropdown > summary:focus-visible, .nav-dropdown-menu > a:focus-visible, .footer-dropdown > summary:focus-visible, .lg-button:focus-visible { border-radius: 10px; outline: 2px solid currentColor; outline-offset: 3px; box-shadow: none; }
.lg-button:focus-visible { border-radius: var(--lg-pill); }
html.lg-pointer .site-nav :focus, html.lg-pointer .nav-dropdown :focus, html.lg-pointer .footer-dropdown :focus, html.lg-pointer .lg-button:focus, html.lg-pointer .nav-toggle:focus { outline: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .lg-glass, .lg-glass-navy, .lg-button, .lg-tap { transition: none; }
  .lg-button.lg-press, .lg-tap.lg-press { transform: none; }
  .lg-flare { animation: none; display: none; }
}

/* Glass chips over photographs: dates on competition cards, categories on
   Impact stories. Small enough to sit clear of faces. */
.lg-chip {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 .95rem;
  border-radius: var(--lg-pill);
  color: var(--paper-bright);
  font: 600 .875rem/1 var(--sub);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(11, 23, 36, .55);
  white-space: nowrap;
}
.impact-story figure figcaption.lg-chip { top: auto; right: auto; bottom: 18px; left: 18px; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, .22); background: rgba(11, 23, 36, .10); color: var(--paper-bright); font: 600 .875rem/1 var(--body); text-transform: none; }

/* Facts and Impact totals sit inside the photo, with no paper strip below.
   Keep these in normal flow so wrapped mobile facts never cover hero actions. */
.photo-hero--with-summary {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  border-bottom: 0;
}
.photo-hero--with-summary .photo-hero__copy { padding-bottom: var(--space-5); }
.event-facts, .impact-stat-grid--flow {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: min(var(--frame), calc(100% - var(--space-6)));
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 22px;
  overflow: hidden;
  color: var(--paper-bright);
  background: rgba(23, 58, 89, .14);
  box-shadow: var(--lg-shadow);
}
.event-facts > .lg-lens, .impact-stat-grid > .lg-lens { -webkit-backdrop-filter: blur(1.2px) saturate(1.7) brightness(1.04); backdrop-filter: blur(1.2px) saturate(1.7) brightness(1.04); }
.event-facts > div, .impact-stat-grid--flow > div { background: transparent; border-right: 1px solid rgba(255, 255, 255, .22); }
.event-facts > div:last-child, .impact-stat-grid--flow > div:last-child { border-right: 0; }
.event-facts span, .impact-stat-grid span { color: #dcecf3; font-family: var(--sub); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.impact-stat-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.impact-stat-grid:not(.impact-stat-grid--flow) {
  left: auto; right: auto; bottom: var(--space-5);
  width: min(var(--frame), calc(100% - var(--space-6)));
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  overflow: hidden;
  color: var(--paper-bright);
  background: rgba(11, 23, 36, .08);
  box-shadow: var(--lg-shadow);
}
.impact-stat-grid:not(.impact-stat-grid--flow) > div { border-right: 1px solid rgba(255, 255, 255, .22); }
.impact-stat-grid:not(.impact-stat-grid--flow) > div:last-child { border-right: 0; }

/* Content layer ------------------------------------------------------------
   The content is not glass, but it shares the glass layer's geometry: rounded
   tiles and cards instead of a ruled grid, hairlines instead of 2px rules.
   Coloured and photographic sections become inset tiles on the paper page;
   paper sections stay open. */
:root {
  --rule: 1px solid rgba(11, 23, 36, .14);
  --tile-radius: 28px;
  --card-radius: 22px;
  --tile-gap: clamp(8px, 1.3vw, 18px);
}
#main > * { border-bottom: 0; }
#main { padding-bottom: var(--tile-gap); }
.site-footer { border-top: var(--rule); }
.mission-panel, .values-section, .feature-event, .impact-stories, .team-callout,
.program-chapter, .closing-cta--photo, .impact-story,
.event-about:not(.event-about--light), .velocity-details, .velocity-story, .team-principle,
.report-reader, .blog-article-header {
  margin: var(--tile-gap) var(--tile-gap) 0;
  border: 0;
  border-radius: var(--tile-radius);
  overflow: hidden;
  isolation: isolate;
}
.impact-story:not(.impact-story--slate):not(.impact-story--deep), .program-chapter:not(.program-chapter--reverse) {
  border: 1px solid rgba(11, 23, 36, .08);
  background: var(--paper-bright);
}
.program-chapter:not(.program-chapter--reverse) .program-chapter-copy { background: var(--paper-bright); }
.feature-event figure, .program-chapter figure, .program-chapter--reverse figure, .impact-story figure, .impact-story--reverse figure { border: 0; }
.program-panels { gap: var(--tile-gap); padding: var(--tile-gap) var(--tile-gap) 0; }
.program-panel { border: 0; border-radius: var(--tile-radius); isolation: isolate; }
.program-panel-copy { justify-content: flex-end; }
.program-panel-copy .button { margin-top: var(--space-4); color: var(--paper-bright); font-weight: 600; text-decoration: none; text-shadow: 0 1px 2px rgba(11, 23, 36, .4); }

/* Labels, links and buttons: sentence case, no tracking; labels in the subheading face. */
.section-index, .eyebrow, .card-label, .footer-heading, .photo-hero__eyebrow, .photo-hero__meta,
.feature-event-copy dt, .event-gallery-card figcaption span, .momentum-story-frame figcaption span, .velocity-story-frame figcaption span {
  font-family: var(--sub);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.section-index, .eyebrow, .card-label, .feature-event-copy dt,
.event-gallery-card figcaption span, .momentum-story-frame figcaption span, .velocity-story-frame figcaption span { color: var(--deep); }
.button { min-height: 3rem; gap: .6rem; padding: var(--space-2) 1.35rem; font-size: 1rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; }
.text-link { gap: .4rem; padding-bottom: 2px; border-bottom-width: 1px; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Home */
.mission-grid { display: block; }
.mission-copy { max-width: 46rem; }
.section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.section-deck { grid-column: auto; }
.activity-list article { grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.25fr); }
.values-section .site-frame { align-items: start; }
.values-intro > p { max-width: 20rem; margin-top: var(--space-4); font-size: 1.0625rem; }
.values-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 0; }
/* The value tiles are clear glass. A large Open Minds mark sits behind them
   so their edges have something to bend. */
.values-section { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='%23173a59' opacity='.12'%3E%3Cpath fill-rule='evenodd' d='M256 0a256 256 0 1 0 0 512a256 256 0 1 0 0-512Zm0 56a200 200 0 1 1 0 400a200 200 0 1 1 0-400Z'/%3E%3Cpath d='M190 134H256L360 232L441 152L468 210L361 318L255 217V470H190Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -10rem center / 56rem auto, var(--sky); }
.values-list article {
  --lg-glint-w: 9rem;
  --lg-glint-h: 6rem;
  position: relative;
  display: block;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, .1);
}
.values-list article > .lg-lens { -webkit-backdrop-filter: blur(.6px) saturate(1.3) brightness(1.06); backdrop-filter: blur(.6px) saturate(1.3) brightness(1.06); }
.values-list h3 { margin-bottom: var(--space-2); }
.values-list p { grid-column: auto; }
.feature-event-copy dl div { grid-template-columns: 6rem 1fr; }
.feature-event-copy .display { max-width: 11ch; font-size: clamp(2.75rem, 4.2vw, 3.75rem); }
.competition-showcase-grid { gap: var(--tile-gap); border: 0; }
.competition-card { overflow: hidden; isolation: isolate; border: var(--rule); border-radius: var(--card-radius); box-shadow: 0 18px 40px -32px rgba(11, 23, 36, .5); }
.competition-card-visual { border-bottom: 0; }
.competition-card-copy { flex: 1; min-height: 19rem; }
.story-cards { align-items: stretch; gap: var(--tile-gap); }
.story-card { display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border: 0; border-radius: var(--card-radius); }
.story-card:nth-child(2), .story-card:nth-child(3) { margin-top: 0; }
.story-card img { border-bottom: 0; }
.story-card > div { flex: 1; min-height: 0; }
.story-card > div > p:not(.card-label) { margin-bottom: var(--space-4); font-size: .9375rem; }
.partner-grid { gap: 10px; border: 0; }
.partner-grid figure { border: var(--rule); border-radius: var(--card-radius); }
.partner-grid img { border-radius: 10px; }

/* Inner pages */
.chapter-nav.lg-glass {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: calc(100% - var(--tile-gap) * 2);
  margin: var(--space-5) auto var(--space-2);
  padding: 5px;
  border: 1px solid rgba(11, 23, 36, .1);
  border-radius: var(--lg-pill);
  background: rgba(251, 252, 247, .55);
}
.chapter-nav a { min-height: 2.75rem; padding: 0 1.2rem; border: 0; border-radius: var(--lg-pill); background: transparent; font-size: 1rem; white-space: nowrap; }
.chapter-nav a:hover { background: rgba(201, 220, 233, .8); }
.program-chapter li { padding-left: 1.1rem; }
.program-chapter li::before { content: ""; top: 1.05rem; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.process-heading { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); align-items: end; }
.process-heading .display { grid-column: 1; text-align: left; }
.process-heading > p:last-child { grid-column: 2; }
.velocity-details-grid { gap: 12px; border: 0; }
/* Velocity's day cards are the same clear glass as the home value tiles, over
   the mark in white on navy. */
.velocity-details { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='%23fbfcf7' opacity='.08'%3E%3Cpath fill-rule='evenodd' d='M256 0a256 256 0 1 0 0 512a256 256 0 1 0 0-512Zm0 56a200 200 0 1 1 0 400a200 200 0 1 1 0-400Z'/%3E%3Cpath d='M190 134H256L360 232L441 152L468 210L361 318L255 217V470H190Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -10rem center / 56rem auto, var(--navy); }
.velocity-details-grid article {
  --lg-glint-w: 6rem;
  --lg-glint-h: 4rem;
  position: relative;
  min-height: 12rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, .035);
}
.velocity-details-grid h3 { margin-top: 0; }
.partner-proof-grid { align-items: start; }
.photo-hero--lbcc .photo-hero__subtitle { text-transform: none; }
.velocity-details-head, .team-roster-heading { grid-template-columns: 1fr; }
.closing-cta-deck { font-family: var(--sub); max-width: 36rem; margin: calc(var(--space-3) * -1) 0 var(--space-5); font-size: 1.125rem; }
.momentum-story-grid, .velocity-story-grid, .event-gallery-grid { gap: var(--tile-gap); border: 0; }
.momentum-story-frame, .velocity-story-frame, .event-gallery-card {
  overflow: hidden;
  isolation: isolate;
  border: var(--rule);
  border-radius: var(--card-radius);
  background: var(--paper-bright);
}
.momentum-story-frame figcaption, .velocity-story-frame figcaption, .event-gallery-card figcaption { border-top: 0; background: var(--paper-bright); }
.roster-card { overflow: hidden; isolation: isolate; border: 0; border-radius: var(--card-radius); }
.team-principle-grid { grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr); }
.team-principle-grid > div { grid-column: auto; }
.team-quote figcaption { margin-top: var(--space-4); font-size: 1rem; font-weight: 500; }
.privacy-notice { border: 0; border-radius: var(--card-radius); }
.privacy-content section { border-top: var(--rule); }
.report-reader-toolbar { border: 0; border-radius: var(--card-radius) var(--card-radius) 0 0; }
.report-reader-frame { border: 0; border-radius: 0 0 var(--card-radius) var(--card-radius); }
.blog-section-heading { border-top: 0; }
.blog-feature, .blog-entry { overflow: hidden; isolation: isolate; border: var(--rule); border-radius: var(--tile-radius); }
.blog-feature { position: relative; background: var(--navy); }
.blog-feature--photo .blog-photo-stage { position: absolute; inset: 0; z-index: 0; border: 0; min-height: 0; aspect-ratio: auto; }
.blog-feature--photo .blog-feature-link { position: relative; z-index: 2; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.blog-feature--photo .blog-feature-copy { position: relative; z-index: 1; min-height: 24rem; margin: var(--space-5); padding: var(--space-5); border-radius: var(--lg-radius); background: rgba(11, 23, 36, .22); }
.blog-feature--photo .blog-meta { color: #dcecf3; }
.blog-entry-cover, .blog-photo-stage { border: 0; }
.blog-list + .blog-list { margin-top: var(--space-6); }
.blog-report-callout { border: 0; border-radius: var(--card-radius); }
.blog-article-hero img { border-radius: var(--tile-radius); }
.blog-article-cover img, .blog-entry-cover img { border-radius: 6px; }
.skip-link { border-radius: var(--lg-pill); }

/* Footer: plain copyright line, no boxes; conferences fold into a dropdown. */
.footer-legal { display: block; padding: 0 0 var(--space-5); background: transparent; border: 0; font-family: var(--body); font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--deep); }
.footer-legal span { min-height: 0; display: block; padding: 0; text-align: left; border: 0; width: min(var(--frame), calc(100% - var(--space-6))); margin-inline: auto; }
.footer-dropdown { margin-bottom: var(--space-2); font-size: .875rem; }
.footer-dropdown > summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-weight: 600; }
.footer-dropdown > summary::-webkit-details-marker { display: none; }
.footer-dropdown > summary::after { content: ""; width: .45rem; height: .45rem; margin-top: -.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.footer-dropdown[open] > summary::after { margin-top: .15rem; transform: rotate(225deg); }
.footer-dropdown > summary:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.footer-dropdown-list { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-2) 0 0 var(--space-3); border-left: 1px solid rgba(11, 23, 36, .18); margin-top: var(--space-2); }
.footer-main > nav .footer-dropdown-list a { margin-bottom: var(--space-2); }

/* Report banner -------------------------------------------------------------
   A floating capsule of the same clear glass. Its text follows the backdrop:
   liquid-glass.js samples what is under it and sets data-lg-tone, the same
   way the header does, so the glass never needs a solid fill to stay legible. */
.report-banner {
  inset: auto 0 max(12px, env(safe-area-inset-bottom));
  width: min(40rem, calc(100% - 24px));
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--lg-pill);
  background: rgba(11, 23, 36, .12);
  box-shadow: var(--lg-shadow);
  color: var(--paper-bright);
  text-shadow: 0 1px 2px rgba(11, 23, 36, .45);
}
.report-banner > .lg-lens { -webkit-backdrop-filter: blur(4px) saturate(1.7) brightness(1.02); backdrop-filter: blur(4px) saturate(1.7) brightness(1.02); }
.report-banner-inner { width: 100%; grid-template-columns: 2.75rem minmax(0, 1fr) auto 2.5rem; gap: 14px; padding: 8px 8px 8px 10px; }
.report-banner-cover { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.report-banner-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
.report-banner-kicker { margin: 2px 0 0; color: #dcecf3; font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.report-banner-link { min-height: 2.5rem; padding: 0 1.15rem; }
.report-banner-close { width: 2.5rem; height: 2.5rem; color: var(--paper-bright); border-color: rgba(255, 255, 255, .32); }
.report-banner-close:hover { color: var(--paper-bright); }
.report-banner[data-lg-tone="light"] { border-color: rgba(255, 255, 255, .7); background: rgba(251, 252, 247, .34); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.report-banner[data-lg-tone="light"] .report-banner-kicker { color: var(--deep); }
.report-banner[data-lg-tone="light"] .report-banner-close { color: var(--ink); border-color: rgba(11, 23, 36, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .32) 48%, rgba(255, 255, 255, .22) 60%, rgba(255, 255, 255, .5) 100%); }

/* Mobile drawer and small screens ------------------------------------------
   The drawer keeps the clear material. Legibility comes from what is behind
   it: the page dims and softens while the menu is open, and the drawer's text
   turns light to match. */
@media (max-width: 61.25em) {
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(11, 23, 36, .5);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
  }
  .site-nav {
    isolation: isolate;
    top: calc(100% - 12px);
    margin-inline: 12px;
    padding-top: var(--space-5);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: var(--lg-radius);
    background: rgba(251, 252, 247, .06);
    box-shadow: var(--lg-shadow);
    color: var(--paper-bright);
    text-shadow: 0 1px 2px rgba(11, 23, 36, .4);
    height: auto;
    max-height: calc(100dvh - var(--lg-header-h) - var(--space-3));
  }
  .site-nav > .lg-lens { display: block; -webkit-backdrop-filter: blur(3px) saturate(1.6) brightness(1.08); backdrop-filter: blur(3px) saturate(1.6) brightness(1.08); }
  .site-nav > :not(.lg-lens):not(.lg-flare) { position: relative; z-index: 1; }
  .site-nav > a, .nav-dropdown > summary, .nav-dropdown-menu a { border-bottom-color: rgba(255, 255, 255, .16); }
  .site-nav > a[aria-current="page"], .nav-dropdown--active > summary, .nav-dropdown-menu a[aria-current="page"] { color: #dcecf3; }
  .nav-dropdown-menu, .site-header[data-lg-tone] .nav-dropdown-menu { position: static; border: 0; background: transparent; box-shadow: none; color: inherit; text-shadow: inherit; }
  .nav-dropdown-menu > .lg-lens { display: none; }
  .site-nav .lg-tap.lg-press, .nav-dropdown-menu > a.lg-press { background: rgba(255, 255, 255, .16); }
}
@media (max-width: 47.5em) {
  :root { --tile-radius: 22px; --card-radius: 18px; }
  .activity-list article { grid-template-columns: 1fr; gap: var(--space-2); }
  .activity-list p { grid-column: auto; }
  .values-list { grid-template-columns: 1fr; }
  .process-heading > p:last-child, .process-heading .display { grid-column: auto; }
  .team-principle-grid { grid-template-columns: 1fr; }
  .chapter-nav.lg-glass { display: grid; grid-template-columns: 1fr; width: calc(100% - var(--tile-gap) * 2); border-radius: 26px; }
  .chapter-nav a { min-height: 3rem; justify-content: center; border-bottom: 0; }
  .competition-card--velocity .competition-card-visual { border: 0; }
  .program-chapter figure, .program-chapter--reverse figure, .impact-story figure, .impact-story--reverse figure { border: 0; }
  .report-banner { width: calc(100% - 16px); }
  .report-banner-inner { grid-template-columns: minmax(0, 1fr) auto 2.5rem; gap: 10px; padding: 8px 8px 8px 20px; }
  .report-banner-cover, .report-banner-kicker { display: none; }
  .report-banner-copy { grid-column: 1; grid-row: 1; }
  .report-banner-title { max-width: none; font-size: .9375rem; }
  .report-banner .report-banner-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: auto;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, .32);
    background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .10) 100%);
    color: var(--paper-bright);
    font-size: .9375rem;
    text-decoration: none;
  }
  .report-banner[data-lg-tone="light"] .report-banner-link { border-color: rgba(11, 23, 36, .22); background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .32) 48%, rgba(255, 255, 255, .22) 60%, rgba(255, 255, 255, .5) 100%); color: var(--ink); }
  .report-banner-close { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  :root { --lg-radius: 22px; --lg-header-h: calc(4rem + 24px); }
  .site-header .header-inner { min-height: 4rem; padding-inline: var(--space-3) var(--space-2); }
  .site-header:has(+ main > .photo-hero:first-child) + main > .photo-hero:first-child .photo-hero__copy { padding-top: calc(var(--space-6) + var(--lg-header-h) / 2); }
  .event-facts, .impact-stat-grid--flow { width: calc(100% - var(--space-5)); }
  /* The injected lens is a span before the cells. Count divs, not all children,
     so the two-column dividers stay aligned when the material is enabled. */
  .event-facts > div:nth-of-type(odd), .impact-stat-grid--flow > div:nth-of-type(odd) { border-right: 1px solid rgba(255, 255, 255, .22); }
  .event-facts > div:nth-of-type(even), .impact-stat-grid--flow > div:nth-of-type(even) { border-right: 0; }
  .event-facts > div:nth-of-type(-n+2), .impact-stat-grid--flow > div:nth-of-type(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .event-facts > div:nth-of-type(n+3), .impact-stat-grid--flow > div:nth-of-type(n+3) { border-bottom: 0; }
  .impact-stat-grid--three { grid-template-columns: 1fr; }
  .impact-stat-grid--three.impact-stat-grid--flow > div:nth-of-type(n) { min-height: 0; flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 18px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .impact-stat-grid--three.impact-stat-grid--flow > div:nth-of-type(3) { border-bottom: 0; }
  .impact-stat-grid--three strong { font-size: 1.75rem; }
  .impact-stat-grid--three.impact-stat-grid--flow > div:nth-of-type(n) { justify-content: flex-start; }
  .photo-hero__actions .text-link.lg-button { align-self: stretch; justify-content: center; }
  .blog-feature--photo .blog-feature-link { grid-template-columns: 1fr; }
  .blog-feature--photo .blog-feature-copy { margin: var(--space-4); padding: var(--space-4); }
}
@media (prefers-reduced-transparency: reduce) {
  .lg-lens { display: none; }
  .lg-glass-navy, .event-facts, .impact-stat-grid, .report-banner, .lg-chip, .blog-feature--photo .blog-feature-copy { background: rgba(23, 58, 89, .96); }
  .lg-glass, .nav-dropdown-menu, .chapter-nav.lg-glass, .report-banner[data-lg-tone="light"] { background: rgba(251, 252, 247, .96); }
  .site-nav { background: rgba(23, 58, 89, .97); }
}
/* Banner button on each tone. Dark: clear glass with light text. Light: the
   paper button with ink text. */
.report-banner:not([data-lg-tone="light"]) .report-banner-link { border-color: rgba(255, 255, 255, .32); background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .10) 100%); color: var(--paper-bright); }
.report-banner[data-lg-tone="light"] .report-banner-link { border-color: rgba(11, 23, 36, .22); background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .32) 48%, rgba(255, 255, 255, .22) 60%, rgba(255, 255, 255, .5) 100%); color: var(--ink); text-shadow: none; }

/* Hierarchy ------------------------------------------------------------------
   Section titles share one size; galleries, partner notes and closing lines
   are a step down. Two-part section heads all use the same 7/5 split, so the
   right-hand column starts at the same x on every page. */
#main > section:not(.photo-hero) h2.display { font-size: clamp(2.5rem, 4.6vw, 4rem); }
#main > section.event-gallery h2.display, #main > section.momentum-story h2.display, #main > section.velocity-story h2.display,
#main > section.partner-proof h2.display, #main > section.roster-section h2.display, #main > section.closing-cta h2.display,
#main > section.impact-story h2.display, #main > section.program-chapter h2.display, #main > section.feature-event h2.display { font-size: clamp(2.125rem, 3.4vw, 3rem); }
.privacy-content h2 { max-width: none; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.section-heading, .competition-showcase-head, .process-heading, .momentum-story-intro, .velocity-story-intro,
.event-about-grid, .partner-proof-grid, .team-callout-grid, .activity-list article {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--space-6);
}
.closing-cta--sky { background: transparent; }
.values-section .site-frame { grid-template-columns: 1fr; gap: var(--space-5); }
.values-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.impact-story, .impact-story figure { min-height: 30rem; }
.story-actions { align-items: center; row-gap: var(--space-3); }
.roster-grid--four { display: flex; flex-wrap: wrap; justify-content: center; }
.roster-grid--four > .roster-card { width: calc((100% - var(--space-4) * 3) / 4); }

/* Buttons: ink glass for the main action off-photo; on photos the main action
   is light-tinted glass with ink text and the secondary one stays clear. */
.photo-hero .button--paper, .closing-cta--photo .button--paper {
  color: var(--ink);
  text-shadow: none;
  border-color: rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(251, 252, 247, .92) 48%, rgba(251, 252, 247, .9) 60%, rgba(255, 255, 255, .95) 100%);
}
.photo-hero .button--paper:hover, .closing-cta--photo .button--paper:hover { color: var(--ink); background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .97) 48%, rgba(255, 255, 255, .96) 60%, #fff 100%); }
.photo-hero .button--paper.lg-button::after, .closing-cta--photo .button--paper.lg-button::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 2px 1px -1px rgba(255, 255, 255, 1), inset 0 12px 16px -12px rgba(255, 255, 255, .8), inset 0 -2px 2px -1px rgba(11, 23, 36, .18), inset 0 -10px 16px -12px rgba(11, 23, 36, .14);
  background: radial-gradient(120% 65% at 50% -25%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 60%);
}

@media (max-width: 68.75em) {
  .values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster-grid--four > .roster-card { width: calc((100% - var(--space-4)) / 2); }
}
@media (max-width: 61.25em) {
  .footer-main > nav:last-child { display: flex; flex-direction: column; gap: 0; }
}
@media (max-width: 47.5em) {
  .section-heading, .competition-showcase-head, .process-heading, .momentum-story-intro, .velocity-story-intro,
  .event-about-grid, .partner-proof-grid, .team-callout-grid, .activity-list article { grid-template-columns: 1fr; }
  .values-list { grid-template-columns: 1fr; }
  .impact-story { min-height: 0; }
  .impact-story figure { min-height: 24rem; }
  .competition-card-copy, .competition-card--velocity .competition-card-copy { min-height: 0; }
  .roster-grid--four { gap: var(--space-3); }
  .roster-grid--four > .roster-card { width: calc((100% - var(--space-3)) / 2); }
  .footer-main > nav:last-child { grid-column: auto; }
  .footer-legal span { width: calc(100% - var(--space-5)); }
}

.event-gallery-card figcaption span, .momentum-story-frame figcaption span, .velocity-story-frame figcaption span { white-space: nowrap; }

/* "How support works" is a flat band: a four-step timeline on navy, no cards. */
.process-section { margin-top: var(--tile-gap); }
.process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); border: 0; }
.process-grid article { min-height: 0; padding: var(--space-4) 0 0; border: 0; border-top: 1px solid rgba(251, 252, 247, .3); border-radius: 0; background: none; }
.process-grid h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1.5rem; }

/* Executives without a headshot yet: the mark on navy, with their email. */
.roster-card--pending .portrait-mark { display: grid; justify-items: center; align-items: start; padding-top: 22%; width: 100%; aspect-ratio: 4 / 5; background: var(--navy); }
.roster-card--pending .portrait-mark img { width: 34%; height: auto; opacity: .92; }
.roster-plate a { margin-top: 2px; color: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: 2px; opacity: .9; }

@media (max-width: 68.75em) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.5em) {
  .process-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .roster-plate a { font-size: .6875rem; }
  .roster-card--pending .portrait-mark { padding-top: 14%; }
  .roster-card--pending .portrait-mark img { width: 28%; }
}

/* Event brands -------------------------------------------------------------
   The Lord Byng and Velocity pages take their competition's colours (from
   each brand guide) inside #main; type stays the site's own everywhere.
   LBCC: dark maroon #512826, maroon #7a3536, red #9c261e, pink #e7aaa3,
   off-white #f5f7f8. Velocity: blue #589dd3, steel #73a4c7, light #aac8dd,
   gradient deep blue #2a5b8c, logo slate #61859c. */
.theme-lbcc #main {
  --ink: #2e1716;
  --navy: #7a3536;
  --deep: #9c261e;
  --sky: #f3dedb;
  --mist: #e7aaa3;
  --ev-soft: #f2c9c4;
  --ev-shade-rgb: 66, 30, 29;
  --ev-button: 156 38 30;
  --ev-button-hover: 178 50 40;
}
.theme-velocity #main {
  --ink: #102a44;
  --navy: #2a5b8c;
  --deep: #2f6fa8;
  --sky: #d5e4ee;
  --mist: #aac8dd;
  --ev-soft: #cfe3f3;
  --ev-shade-rgb: 22, 44, 70;
  --ev-button: 47 108 165;
  --ev-button-hover: 60 124 182;
}

/* The hero: brand shade over the photo, facts glass tinted to match, and
   the main action in brand glass. */
.theme-lbcc .photo-hero, .theme-velocity .photo-hero { --hero-shade-rgb: var(--ev-shade-rgb); --hero-label: var(--ev-soft); }
:is(.theme-lbcc, .theme-velocity) .event-facts { background: rgba(var(--ev-shade-rgb), .2); }
:is(.theme-lbcc, .theme-velocity) .event-facts span { color: var(--ev-soft); }
:is(.theme-lbcc, .theme-velocity) .photo-hero .button--paper, :is(.theme-lbcc, .theme-velocity) #main .button--ink {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  border-color: rgba(255, 255, 255, .42);
  background: linear-gradient(180deg, rgb(var(--ev-button) / .94) 0%, rgb(var(--ev-button) / .8) 48%, rgb(var(--ev-button) / .76) 60%, rgb(var(--ev-button) / .88) 100%);
}
:is(.theme-lbcc, .theme-velocity) .photo-hero .button--paper:hover, :is(.theme-lbcc, .theme-velocity) #main .button--ink:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  background: linear-gradient(180deg, rgb(var(--ev-button-hover) / .96) 0%, rgb(var(--ev-button-hover) / .84) 48%, rgb(var(--ev-button-hover) / .8) 60%, rgb(var(--ev-button-hover) / .9) 100%);
}
/* Off the photo the page behind is light, so the brand glass is a little denser to keep white text readable. */
:is(.theme-lbcc, .theme-velocity) #main .button--ink { background: linear-gradient(180deg, rgb(var(--ev-button) / .97) 0%, rgb(var(--ev-button) / .9) 48%, rgb(var(--ev-button) / .88) 60%, rgb(var(--ev-button) / .95) 100%); }
/* The lens would saturate the brand colour; keep it at the guide's value. */
:is(.theme-lbcc, .theme-velocity) :is(.photo-hero .button--paper, #main .button--ink) > .lg-lens,
:is(.theme-lbcc, .theme-velocity) :is(.photo-hero .button--paper, #main .button--ink):hover > .lg-lens { -webkit-backdrop-filter: blur(1.2px) brightness(1.04); backdrop-filter: blur(1.2px) brightness(1.04); }
:is(.theme-lbcc, .theme-velocity) .photo-hero .button--paper.lg-button::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 2px 1px -1px rgba(255, 255, 255, .85), inset 0 12px 16px -12px rgba(255, 255, 255, .45), inset 0 -2px 2px -1px rgba(0, 0, 0, .28), inset 0 -10px 16px -12px rgba(0, 0, 0, .25), inset 0 -6px 14px -8px rgba(255, 255, 255, .28), inset 2px 0 6px -4px rgba(255, 255, 255, .35), inset -2px 0 6px -4px rgba(255, 255, 255, .2);
  background: radial-gradient(120% 65% at 50% -25%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%), radial-gradient(90% 55% at 50% 125%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%);
}

/* The glass cards sit on each brand's own colour and mark: the LBCC hexagon,
   the Velocity check. The hexagon is flat-topped, so its upright sides become
   slants and no edge runs straight down through a card like a box outline; its
   flat top and bottom fall clear of the cards. */
.theme-lbcc .velocity-details { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f5f7f8' opacity='.08' fill-rule='evenodd' d='M496 256L376 464L136 464L16 256L136 48L376 48ZM428 256L342 405L170 405L84 256L170 107L342 107Z'/%3E%3C/svg%3E") no-repeat right -8rem center / 50rem auto, var(--navy); }
/* On phones the cards stack down the whole section and some edge of the
   hexagon always crosses one, so the section is plain maroon there. */
@media (max-width: 47.5em) { .theme-lbcc .velocity-details { background: var(--navy); } }
.theme-velocity .velocity-details { position: relative; background: var(--navy); }
.theme-velocity .velocity-details::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../images/live/velocity-logo.png") no-repeat right -8rem center / 46rem auto;
  opacity: .1;
}
:is(.theme-lbcc, .theme-velocity) .velocity-story-frame figcaption span, :is(.theme-lbcc, .theme-velocity) .section-index { color: var(--deep); }
@media (max-width: 47.5em) {
  /* Labels line up across a row even when one value wraps. */
  .event-facts > div { justify-content: flex-start; }
}