/* =====================================================================
   Obesity Summit 2026 · one-page site
   Layout: a light, flyer-style hero (figure network + swoosh bands),
   then alternating paper and deep-navy bands, closing on a navy footer.
   All class names use the .os- prefix.
   ===================================================================== */

:root {
  /* Colour: taken from the logo, flyer and deck */
  --navy-950: #061631;
  --navy-900: #0B2549;
  --navy-800: #123561;
  --blue-700: #17509A;
  --blue-500: #2F78C8;
  --sky-300: #8EBBE9;
  --sky-100: #DDEAF8;
  --ice: #F3F7FC;
  --paper: #FFFFFF;
  --gold-600: #B07B24;
  --gold-500: #C8963A;
  --gold-400: #E0B457;
  --gold-200: #F3DFAE;
  --gold-ink: #8C5F14;
  --red: #D91A21;

  --ink: #0B1D3A;
  --ink-2: #3F5070;
  --ink-3: #66758E;
  --line: rgba(11, 37, 73, .10);
  --line-strong: rgba(11, 37, 73, .2);
  --on-dark: #EEF4FC;
  --on-dark-2: rgba(238, 244, 252, .74);
  --on-dark-3: rgba(238, 244, 252, .5);
  --line-dark: rgba(238, 244, 252, .12);

  --gold-grad: linear-gradient(135deg, #F4D48A 0%, #DDAA48 42%, #B07B24 100%);

  /* Type: Montserrat (the flyer's face) for headings, with its light
     weights (200–300) for accent words and numerals; Manrope for reading */
  --f-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-body: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 86px;
  --gut-l: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  --gut-r: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px));
  --sec-y: clamp(84px, 10vw, 150px);
  --swoosh-h: clamp(84px, 12.5vw, 200px);
  --round: clamp(28px, 4vw, 56px);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before { /* paints the phone status-bar band above the fixed nav */
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 61; background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold-200); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 8px; }
html.is-locked, html.is-locked body { overflow: hidden; }

.os-site { position: relative; }
.os-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.os-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.os-skip {
  position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--navy-900); color: #fff; font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .3s;
}
.os-skip:focus { transform: none; }

.os-ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.os-wrap {
  width: 100%;
  max-width: calc(1240px + var(--gut-l) + var(--gut-r));
  margin-inline: auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
}
.os-sec { position: relative; padding-block: var(--sec-y); scroll-margin-top: 60px; }
#contact { scroll-margin-top: 60px; }

/* ---------- Type ---------- */
.os-eyebrow {
  display: inline-flex; align-items: center; gap: .85em; margin: 0 0 1.4rem;
  font-family: var(--f-display); font-weight: 700; font-size: .76rem; line-height: 1.2;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink);
}
.os-eyebrow::before {
  content: ""; width: 38px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, currentColor);
}
.os-eyebrow > span { display: inline-flex; align-items: center; gap: .85em; }
.os-eyebrow > span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.os-eyebrow--both::after { content: ""; width: 38px; height: 1px; flex: none; background: linear-gradient(90deg, currentColor, transparent); }
.os-eyebrow--both > span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.os-eyebrow--gold { color: var(--gold-400); }
.os-eyebrow--blue { color: var(--blue-700); }

.os-h2 {
  margin: 0; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.03em;
  color: var(--navy-900); text-wrap: balance;
}
.os-h2 em, .os-display em {
  font-style: normal; font-weight: 300; letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--blue-700), var(--blue-500) 60%, var(--blue-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.os-h2--light { color: #fff; }
.os-h2--light em, .os-display em {
  background: linear-gradient(100deg, #F6DC9C 0%, #E0B457 35%, #FFF1CC 50%, #E0B457 65%, #B98428 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: os-sheen 6s var(--ease-io) infinite;
}
@keyframes os-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

.os-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(44px, 5.5vw, 76px); }
.os-label {
  margin: 0 0 18px; font-family: var(--f-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- Buttons ---------- */
.os-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  padding: .95em 1.55em; border-radius: 999px; border: 0;
  font-family: var(--f-display); font-weight: 700; font-size: .8rem; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), color .45s, background-color .45s, border-color .45s;
}
.os-btn .os-ico { width: 1.15em; height: 1.15em; stroke-width: 2; transition: transform .7s var(--ease-out); }
.os-btn:hover .os-ico { transform: translateX(5px); }
.os-btn--lg { padding: 1.15em 1.9em; font-size: .82rem; }
.os-btn--xl { padding: 1.35em 2.4em; font-size: .9rem; }

.os-btn--gold {
  color: var(--navy-950); background: var(--gold-grad);
  box-shadow: 0 12px 30px -12px rgba(176, 123, 36, .75), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(120, 80, 10, .25);
}
.os-btn--gold::after { /* travelling light */
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-130%); animation: os-shine 5s var(--ease-io) infinite 1.6s;
}
.os-btn--gold::before { /* hover deepen */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, #FFE3A1, #E8B95A 50%, #C48E30);
  opacity: 0; transition: opacity .4s;
}
/* Hover: the button rises a little, its glow widens and one light sweeps across (no pointer-follow) */
.os-btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 5px rgba(224, 180, 87, .14), 0 24px 44px -16px rgba(176, 123, 36, .8), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.os-btn--gold:hover::before { opacity: 1; }
.os-btn--gold:hover::after { animation: os-shine-once 1.1s var(--ease-out) both; }
.os-btn--gold:active { transform: translateY(-1px); transition-duration: .2s; }
@keyframes os-shine { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
@keyframes os-shine-once { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

.os-btn--ghost {
  color: var(--navy-900); background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.os-btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--navy-900);
  transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.os-btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--navy-900); }
.os-btn--ghost:hover::before { transform: none; }

/* ---------- Scroll progress ---------- */
.os-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 62; pointer-events: none; }
.os-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--gold-400)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Navigation ---------- */
.os-nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .5s, box-shadow .5s, -webkit-backdrop-filter .5s, backdrop-filter .5s;
}
.os-nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); transition: height .5s var(--ease-out); }
.os-nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(11, 37, 73, .45);
}
.os-nav.is-scrolled .os-nav__inner { height: 70px; }
.os-brand { flex: none; display: block; }
.os-brand img { height: 50px; width: auto; transition: height .5s var(--ease-out); }
.os-nav.is-scrolled .os-brand img { height: 42px; }

.os-menu { position: relative; margin-left: auto; display: flex; align-items: center; gap: 2px; }
.os-menu a {
  position: relative; padding: .7em 1em; border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: .84rem; letter-spacing: .01em;
  color: var(--ink-2); text-decoration: none; transition: color .3s;
}
.os-menu a:hover, .os-menu a.is-active { color: var(--navy-900); }
.os-menu__ink {
  position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); opacity: 0;
  transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s;
}
.os-nav__cta { padding: .95em 1.4em; font-size: .74rem; }

.os-burger {
  display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy-900); position: relative; z-index: 70; flex: none;
  box-shadow: 0 10px 24px -10px rgba(11, 37, 73, .6);
}
.os-burger span { position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px; background: #fff; transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.os-burger span:nth-child(1) { top: 19px; }
.os-burger span:nth-child(2) { top: 27px; }
.os-burger[aria-expanded="true"] { background: var(--gold-400); }
.os-burger[aria-expanded="true"] span { background: var(--navy-950); }
.os-burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.os-burger[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* ---------- Mobile menu "Midnight Globe" (below 1120px) ----------
   Blue then navy open in a circle from the menu button; large light links rise out of a mask,
   a dotted globe turns at the side (drawn by main.js) and the live countdown sits above Registration.
   While it is open the bar above it turns clear: its colour logo and Registration button hide
   (the menu shows its own white logo), and the round button stays on top to close it. */
.os-mm2 {
  --ox: calc(100% - var(--gut-r) - 24px); --oy: calc(env(safe-area-inset-top, 0px) + var(--nav-h) / 2);
  position: fixed; inset: 0; z-index: 65; visibility: hidden; color: #fff; transition: visibility 0s linear 1s;
}
.os-mm2.is-open { visibility: visible; transition: none; }
.os-mm2__veil { position: absolute; inset: 0; clip-path: circle(0 at var(--ox) var(--oy)); }
.os-mm2__veil--a { background: linear-gradient(200deg, #2F78C8, #17509A 60%, #123561); transition: clip-path .75s var(--ease-io) .16s; }
.os-mm2__veil--b {
  background:
    radial-gradient(520px 380px at 100% 0, rgba(47, 120, 200, .45), transparent 62%),
    radial-gradient(440px 360px at 0 100%, rgba(200, 150, 58, .22), transparent 60%),
    var(--navy-950);
  transition: clip-path .7s var(--ease-io);
}
.os-mm2.is-open .os-mm2__veil--a { clip-path: circle(150% at var(--ox) var(--oy)); transition: clip-path .95s var(--ease-io); }
.os-mm2.is-open .os-mm2__veil--b { clip-path: circle(150% at var(--ox) var(--oy)); transition: clip-path 1.05s var(--ease-io) .15s; }
.os-mm2__globe { position: absolute; right: -150px; top: 34%; width: 380px; height: 380px; pointer-events: none; opacity: 0; transition: opacity .5s; }
.os-mm2.is-open .os-mm2__globe { opacity: .9; transition: opacity 1.4s .7s; }
.os-mm2__inner {
  position: relative; z-index: 2; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 22px) var(--gut-l);
  opacity: 0; transition: opacity .35s;
}
.os-mm2__inner > :not(.os-mm2__head) { width: 100%; max-width: 560px; }
.os-mm2.is-open .os-mm2__inner { opacity: 1; transition: none; }
.os-mm2__head { height: var(--nav-h); flex: none; display: flex; align-items: center; }
.os-mm2__head img { height: 50px; width: auto; }
.os-mm2.is-open .os-mm2__head { animation: os-mm-rise .8s var(--ease-out) .45s backwards; }

.os-mm2__nav { display: flex; flex-direction: column; margin-top: 14px; }
.os-mm2__nav a {
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; text-decoration: none;
  font-family: var(--f-display); font-weight: 300; font-size: 1.95rem; line-height: 1.12; letter-spacing: -.025em; white-space: nowrap;
  color: rgba(238, 244, 252, .72); transition: color .5s, transform .7s var(--ease-out);
}
.os-mm2__m { display: block; min-width: 0; overflow: hidden; padding: 0 .04em .08em 0; }
.os-mm2__m > span { display: block; }
.os-mm2__nav sup { margin-top: .55em; font: 600 .62rem var(--f-display); letter-spacing: .12em; color: rgba(238, 244, 252, .4); transition: color .5s; }
/* Hover only lightens and slides the link; the weight never changes, so nothing wraps */
.os-mm2__nav a:hover { color: #fff; transform: translateX(6px); }
.os-mm2__nav a:hover sup { color: var(--gold-200); }
.os-mm2__nav a.is-active { color: #fff; font-weight: 600; }   /* the section in view, set by main.js */
.os-mm2__nav a.is-active sup { color: var(--gold-400); }
.os-mm2__nav a.is-active .os-mm2__m > span { background: linear-gradient(90deg, #fff 55%, var(--gold-200)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes os-mm-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes os-mm2-up { from { transform: translate3d(0, 108%, 0) rotate(3deg); } to { transform: none; } }
@keyframes os-mm2-fade { from { opacity: 0; } }
/* "backwards" so the hover can move the links once they have risen in */
.os-mm2.is-open .os-mm2__m > span { animation: os-mm2-up 1.05s var(--ease-out) backwards; animation-delay: calc(.5s + var(--i, 0) * .07s); }
.os-mm2.is-open .os-mm2__nav sup { animation: os-mm2-fade .8s backwards; animation-delay: calc(.8s + var(--i) * .07s); }

.os-mm2__count {
  margin-top: auto; padding: 14px 16px 12px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.os-mm2__count[hidden] { display: none; }
.os-mm2__count p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .62rem var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-2); }
.os-mm2__live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 0 rgba(224, 180, 87, .6); animation: os-mm2-live 2.4s ease-out infinite; }
@keyframes os-mm2-live { 0% { box-shadow: 0 0 0 0 rgba(224, 180, 87, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224, 180, 87, 0); } }
.os-mm2__cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.os-mm2__cd span { display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .1); }
.os-mm2__cd span:first-child { padding-left: 0; border-left: 0; }
.os-mm2__cd b { font: 200 1.85rem/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.os-mm2__cd small { font: 600 .56rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.os-mm2__cta { justify-content: center; margin: 14px 0 16px; }
.os-mm2__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.os-mm2__foot p { margin: 0; font: 600 .74rem var(--f-display); color: var(--on-dark-2); }
.os-mm2__social { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.os-mm2__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .4s, color .4s; }
.os-mm2__social a:hover { background: var(--gold-400); color: var(--navy-950); }
.os-mm2__social .os-ico { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.os-mm2.is-open .os-mm2__count, .os-mm2.is-open .os-mm2__cta, .os-mm2.is-open .os-mm2__foot { animation: os-mm-rise .9s var(--ease-out) backwards; animation-delay: calc(.5s + var(--i) * .07s); }

/* the bar above the open menu */
html.is-menu-open .os-nav { z-index: 66; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.os-nav .os-brand, .os-nav .os-nav__cta { transition: opacity .4s, visibility 0s; }
html.is-menu-open .os-nav .os-brand, html.is-menu-open .os-nav .os-nav__cta { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }

@media (min-width: 700px) {
  .os-mm2__globe { width: 600px; height: 600px; right: -120px; top: 22%; }
  .os-mm2__nav a { font-size: 2.6rem; }
}
@media (max-width: 640px) { .os-mm2__head img { height: 40px; } }
@media (max-width: 380px) { .os-mm2__nav a { font-size: 1.72rem; } } /* small phones: "Who Should Attend" stays on one line */
@media (prefers-reduced-motion: reduce) {
  .os-mm2__veil { transition-duration: .01s !important; }
  .os-mm2.is-open .os-mm2__m > span, .os-mm2.is-open .os-mm2__nav sup, .os-mm2.is-open .os-mm2__head,
  .os-mm2.is-open .os-mm2__count, .os-mm2.is-open .os-mm2__cta, .os-mm2.is-open .os-mm2__foot { animation: none; }
}

/* ---------- Page loader "Constellation" ----------
   Deep navy. Scattered points gather into the turning dotted globe (drawn by main.js), a gold wave crosses it
   and the white figure settles in a glass medallion; the screen then opens from the centre outwards.
   html.is-loading is set by a script in <head>, so the loader is there from the first paint and never appears
   without JavaScript. The page's own entrance animations wait for it (whenOpen in main.js). */
@property --os-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
html.is-loading.is-locked { background: #061631; scrollbar-gutter: stable; } /* the scrollbar then takes this same space; it comes off with the lock, while the screen is still closed, because the gutter also changes vw */
.os-ld2 {
  display: none; position: fixed; inset: 0; z-index: 200; container-type: size; overflow: hidden; color: #fff; --os-r: 0px;
  background:
    radial-gradient(70cqw 60cqh at 80% 0, rgba(47, 120, 200, .38), transparent 62%),
    radial-gradient(60cqw 50cqh at 0 100%, rgba(200, 150, 58, .16), transparent 60%),
    #061631;
  /* the edge sits just inside --os-r, so at 0 the mask is solid: no pinhole in the middle before it opens */
  -webkit-mask: radial-gradient(circle at 50% 42%, transparent calc(var(--os-r) - 2px), #000 var(--os-r));
  mask: radial-gradient(circle at 50% 42%, transparent calc(var(--os-r) - 2px), #000 var(--os-r));
}
html.is-loading .os-ld2 { display: block; }
.os-ld2::after { /* gold rim that rides the opening edge */
  content: ""; position: absolute; left: 50%; top: 42%; width: calc(var(--os-r) * 2 + 4px); height: calc(var(--os-r) * 2 + 4px);
  transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(224, 180, 87, .9), 0 0 30px 4px rgba(224, 180, 87, .35); opacity: 0;
}
.os-ld2__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.os-ld2__core { position: absolute; left: 50%; top: 42%; width: max(84px, 15cqmin); aspect-ratio: 1; transform: translate(-50%, -50%); }
.os-ld2__medal {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 .7cqmin rgba(224, 180, 87, .14), 0 0 6cqmin rgba(47, 120, 200, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.os-ld2__medal img { width: 58%; height: auto; }
.os-ld2__copy { position: absolute; left: 0; right: 0; top: calc(42% + max(118px, 25cqmin)); padding: 0 16px; display: grid; justify-items: center; text-align: center; }
.os-ld2__name { margin: 0; font: 700 max(12px, 2.6cqmin) var(--f-display); letter-spacing: .44em; margin-right: -.44em; text-transform: uppercase; }
.os-ld2__name span { color: var(--gold-400); }
.os-ld2__meta { margin: 1.4cqmin 0 0; font: 500 max(9.5px, 1.5cqmin)/1.7 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-2); }
.os-ld2__bar { position: relative; width: 22cqmin; height: 2px; margin-top: 3cqmin; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.os-ld2__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #F4D48A, #DDAA48, #B07B24); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

@keyframes os-ld2-medal { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes os-ld2-copy { from { opacity: 0; transform: translate3d(0, 2.5cqmin, 0); letter-spacing: .7em; } }
@keyframes os-ld2-fade { from { opacity: 0; } }
.os-ld2.is-run .os-ld2__medal { animation: os-ld2-medal 1.3s var(--ease-out) 1s backwards; }
.os-ld2.is-run .os-ld2__name { animation: os-ld2-copy 1.4s var(--ease-out) .6s backwards; }
.os-ld2.is-run .os-ld2__meta, .os-ld2.is-run .os-ld2__bar { animation: os-ld2-fade 1s .95s backwards; }
.os-ld2.is-done { --os-r: 130cqmax; pointer-events: none; transition: --os-r 1.4s cubic-bezier(.7, 0, .25, 1) .25s; }
.os-ld2.is-done::after { opacity: 1; transition: opacity .3s .25s; }
.os-ld2.is-done .os-ld2__core { opacity: 0; transform: translate(-50%, -50%) scale(1.5); transition: opacity .5s, transform .9s var(--ease-io); }
.os-ld2.is-done .os-ld2__copy { opacity: 0; transition: opacity .4s; }
@media (prefers-reduced-motion: reduce) {
  .os-ld2.is-done { --os-r: 0px; opacity: 0; transition: opacity .4s !important; }
}

/* ---------- Reveal system ----------
   Items fade in once as they scroll into view (main.js adds .is-in).
     data-rv            fade and rise a little
     data-rv="left"     fade and drift in from the left
     data-rv="right"    fade and drift in from the right
     data-rv="fade"     fade only        data-rv="scale"   fade and settle from 96%
     data-rv="lines"    heading lines rise out of a mask
     data-rv="words"    words rise one by one
     data-rv="rise"     the first child rises out of the element's own mask
   Paragraphs also lose a soft blur as they appear.
   Delay = --b (set by main.js so items that appear together follow one another
   from top to bottom) + --d (set in the markup to fine-tune a group). */
.js [data-rv] {
  --rv-x: 0px; --rv-y: 26px;
  opacity: 0; transform: translate3d(var(--rv-x), var(--rv-y), 0);
  transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: calc(var(--b, 0s) + var(--d, 0s));
}
.js [data-rv="left"]  { --rv-x: -40px; --rv-y: 0px; }
.js [data-rv="right"] { --rv-x: 40px; --rv-y: 0px; }
.js [data-rv="fade"] { transform: none; transition-duration: 1.6s; }
.js [data-rv="scale"] { transform: scale(.96); }
.js p[data-rv], .js ul[data-rv] { filter: blur(5px); }
.js [data-rv].is-in { opacity: 1; transform: none; filter: none; }
.js [data-rv="lines"], .js [data-rv="words"], .js [data-rv="rise"] { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .js [data-rv] { --rv-y: 20px; }
  .js [data-rv="left"]  { --rv-x: -22px; --rv-y: 0px; }
  .js [data-rv="right"] { --rv-x: 22px; --rv-y: 0px; }
}

/* eyebrow rules draw outwards from the label */
.js .os-eyebrow[data-rv]::before, .js .os-eyebrow--both[data-rv]::after {
  transform: scaleX(0); transform-origin: right center;
  transition: transform 1.2s var(--ease-out) calc(var(--b, 0s) + var(--d, 0s) + .25s);
}
.js .os-eyebrow--both[data-rv]::after { transform-origin: left center; }
.js .os-eyebrow[data-rv].is-in::before, .js .os-eyebrow--both[data-rv].is-in::after { transform: none; }

.js [data-rv="rise"] > * { transform: translate3d(0, 72%, 0); opacity: 0; transition: transform 1.6s var(--ease-out), opacity 1.2s var(--ease-out); transition-delay: calc(var(--b, 0s) + var(--d, 0s)); }
.js [data-rv="rise"].is-in > * { transform: none; opacity: 1; }

.os-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.os-line > span { display: block; }
.js [data-rv="lines"] .os-line > span { transform: translate3d(0, 108%, 0) rotate(1.5deg); transform-origin: 0 100%; transition: transform 1.35s var(--ease-out); transition-delay: calc(var(--b, 0s) + var(--d, 0s)); }
.js [data-rv="lines"].is-in .os-line > span { transform: none; }

/* once an item has revealed (JS adds .rv-done), hand transforms back to its hover effects */
.js .os-sign.rv-done { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.js .os-sign.rv-done:hover { transform: translateY(-4px); }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.js [data-rv="words"] .w > span { transform: translate3d(0, 105%, 0); opacity: 0; transition: transform 1s var(--ease-out), opacity .8s; transition-delay: calc(var(--b, 0s) + var(--d, 0s) + var(--i) * 55ms); }
.js [data-rv="words"].is-in .w > span { transform: none; opacity: 1; }

/* =====================================================================
   HERO
   ===================================================================== */
.os-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + clamp(20px, 4vw, 56px));
  padding-bottom: calc(var(--swoosh-h) + 8px);
  background:
    radial-gradient(1100px 700px at 80% 28%, #D6E7FA 0%, rgba(214, 231, 250, 0) 62%),
    radial-gradient(800px 520px at 6% 0%, #EDF3FC 0%, rgba(237, 243, 252, 0) 60%),
    linear-gradient(180deg, #F8FBFE 0%, #EAF2FB 100%);
}
.os-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.os-hero__bg::before { /* fine dot grid, like the flyer's network field */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23, 80, 154, .2) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 76% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 65% at 76% 42%, #000 0%, transparent 72%);
}
.os-hero__bg::after { /* soft light beam */
  content: ""; position: absolute; width: 900px; height: 900px; right: -260px; top: -380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%);
  animation: os-breathe 9s ease-in-out infinite;
}
@keyframes os-breathe { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.os-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "copy visual" "org visual" "ctas visual";
  align-items: center; column-gap: clamp(20px, 4vw, 60px); row-gap: 0;
}
.os-hero__copy { grid-area: copy; position: relative; z-index: 2; min-width: 0; }
.os-hero__visual { grid-area: visual; }
.os-hero__org { grid-area: org; align-self: start; }

.os-hero .os-eyebrow { color: var(--gold-600); font-size: clamp(.78rem, 1.1vw, .92rem); letter-spacing: .42em; margin-bottom: clamp(14px, 2vw, 22px); }
.os-hero__title { margin: 0; font-family: var(--f-display); line-height: .9; }
.os-hero__t1 {
  font-weight: 900; font-size: clamp(3.5rem, 9.6vw, 9rem); letter-spacing: -.035em; text-transform: uppercase;
  background: linear-gradient(100deg, #0A2552 0%, #0F3B7A 38%, #2F78C8 50%, #0F3B7A 62%, #0A2552 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: os-ink 9s var(--ease-io) infinite 2s;
  padding-right: .04em;
}
@keyframes os-ink { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.os-hero__t2 {
  display: flex !important; align-items: center; gap: .7em; margin-top: .42em;
  font-weight: 500; font-size: clamp(1.1rem, 2.5vw, 2.25rem); letter-spacing: .44em; text-transform: uppercase; color: var(--gold-600);
}
.os-hero__t2 > span { margin-right: -.44em; white-space: nowrap; }
.os-hero__t2::before, .os-hero__t2::after { content: ""; height: 2px; width: 1.4em; flex: none; background: var(--gold-grad); border-radius: 2px; }

.os-hero__tag {
  margin: clamp(20px, 2.6vw, 30px) 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem); line-height: 1.5; color: var(--navy-800); letter-spacing: -.005em;
}
.os-hero__hl { color: var(--blue-500); }

.os-hero__meta { display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 3vw, 44px); margin-top: clamp(26px, 3.4vw, 40px); }
.os-meta { display: flex; align-items: center; gap: 16px; }
.os-meta__icon {
  width: clamp(54px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 26%, #3C86D3 0%, #17509A 45%, #0B2549 80%);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px rgba(176, 123, 36, .55), 0 16px 30px -12px rgba(11, 37, 73, .6);
}
.os-meta__icon .os-ico { width: 46%; height: 46%; stroke-width: 1.7; }
.os-meta__text { display: flex; flex-direction: column; border-left: 2px solid rgba(11, 37, 73, .18); padding-left: 16px; font-family: var(--f-display); line-height: 1.02; }
.os-meta__big { font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--navy-900); letter-spacing: -.02em; }
.os-meta__small { font-weight: 800; font-size: clamp(.84rem, 1.2vw, 1.02rem); color: var(--blue-700); letter-spacing: .04em; text-transform: uppercase; margin-top: .3em; }

.os-hero__ctas { grid-area: ctas; position: relative; z-index: 3; align-self: start; display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: clamp(28px, 3.6vw, 42px); }

/* Visual: globe + figure network */
.os-hero__visual { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: end; z-index: 1; }
.os-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.os-hero__halo {
  position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(214, 232, 250, .7) 45%, rgba(214, 232, 250, 0) 72%);
  filter: blur(6px);
}
.os-hero__mark { position: absolute; left: 50%; top: 52%; width: 58%; transform: translate(-50%, -50%); opacity: .95; transition: opacity 1.2s; }
.os-hero__visual.is-ready .os-hero__mark { opacity: 0; }
.os-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.os-orbit--1 { inset: 1%; border: 1px dashed rgba(23, 80, 154, .22); animation: os-spin 90s linear infinite; }
.os-orbit--2 { inset: 9%; border: 1px solid rgba(23, 80, 154, .1); }
.os-orbit--3 { inset: 1%; border: 2px solid transparent; border-top-color: rgba(224, 180, 87, .75); border-right-color: rgba(224, 180, 87, .2); animation: os-spin 14s linear infinite; }
@keyframes os-spin { to { transform: rotate(360deg); } }

.os-badge {
  position: absolute; width: clamp(46px, 5.2vw, 68px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff; z-index: 2;
  background: radial-gradient(circle at 32% 26%, #5A9BE0 0%, #1E5FAA 48%, #0B2549 92%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 0 0 6.5px rgba(47, 120, 200, .3), 0 20px 40px -14px rgba(11, 37, 73, .55);
  animation: os-float 6.5s ease-in-out infinite;
}
.os-badge .os-ico { width: 48%; height: 48%; stroke-width: 1.7; }
.os-badge--1 { top: 7%; right: 15%; animation-delay: -1s; }
.os-badge--2 { top: 33%; right: -1%; animation-delay: -2.6s; }
.os-badge--3 { top: 60%; right: 1%; animation-delay: -4s; }
.os-badge--4 { bottom: 5%; right: 21%; animation-delay: -5.2s; }
@keyframes os-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }

/* Co-organizers in hero */
.os-hero__org { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(30px, 4vw, 52px); }
.os-hero__org .os-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .28em; color: var(--blue-700); }
.os-hero__logos {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 24px);
  padding: 14px clamp(16px, 2vw, 26px); border-radius: 20px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(11, 37, 73, .06), 0 20px 40px -24px rgba(11, 37, 73, .4);
}
.os-hero__logo-edes { height: clamp(36px, 3.6vw, 46px); width: auto; }
.os-hero__logo-es { height: clamp(28px, 2.9vw, 37px); width: auto; }
.os-hero__logos-rule { width: 1px; align-self: stretch; background: var(--line-strong); }

/* Swoosh bands */
.os-swoosh { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: var(--swoosh-h); display: block; z-index: 1; pointer-events: none; }
.os-swoosh__fill { fill: var(--paper); }
.os-swoosh--flip { transform: scaleX(-1); }
.os-swoosh--flip .os-swoosh__fill { fill: var(--navy-950); }

/* =====================================================================
   WELCOME MESSAGE
   ===================================================================== */
.os-welcome { background: var(--paper); padding-top: clamp(56px, 7vw, 100px); }
.os-welcome__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr); gap: clamp(36px, 7vw, 120px); align-items: start; }
.os-welcome__side { position: sticky; top: 110px; }

.os-seal { position: relative; width: clamp(180px, 17vw, 236px); aspect-ratio: 1; margin-top: clamp(36px, 4vw, 56px); }
.os-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: os-spin 40s linear infinite; overflow: visible; }
.os-seal__ring text { font-family: var(--f-display); font-weight: 700; font-size: 9.4px; letter-spacing: .1em; text-transform: uppercase; fill: var(--blue-700); }
.os-seal::before { content: ""; position: absolute; inset: 21%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--ice) 70%); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -24px rgba(11, 37, 73, .45); }
.os-seal img { position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -50%); }

.os-letter { min-width: 0; max-width: 720px; color: var(--ink-2); font-size: clamp(1rem, 1.1vw, 1.08rem); }
.os-letter p { margin: 0 0 1.35em; }
.os-letter__salute { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.02em; color: var(--navy-900); margin-bottom: .8em !important; }
.os-letter__lead {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1.28rem, 2vw, 1.68rem); line-height: 1.45;
  letter-spacing: -.012em; color: var(--navy-900); margin-bottom: 1.2em !important; text-wrap: pretty;
}
.lw { transition: color .5s, opacity .5s; }
.js [data-lit] .lw { color: rgba(11, 37, 73, .2); }
.js [data-lit] .lw.on { color: var(--navy-900); }

.os-letter__goal {
  position: relative; margin: 2.1em 0 2em !important; padding: 1.6em 76px 1.5em 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.os-letter__goal::before { /* quote mark */
  content: ""; position: absolute; right: 0; top: 26px; width: 54px; height: 45px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23DDEAF8' d='M0 40V24C0 10.7 6.3 2.7 19 0l2.4 5.2C14.6 7.4 11.3 11.6 11.1 18H20v22H0zm28 0V24C28 10.7 34.3 2.7 47 0l1 5.2C42.6 7.4 39.3 11.6 39.1 18H48v22H28z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.os-letter__goal-k { display: block; margin-bottom: .8em; font-family: var(--f-display); font-weight: 700; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.os-letter__goal-v {
  position: relative; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.38; letter-spacing: -.02em; color: var(--navy-900);
  background: linear-gradient(transparent 62%, rgba(224, 180, 87, .32) 62%, rgba(224, 180, 87, .32) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.8s var(--ease-out) .5s;
}
.os-letter__goal.is-in .os-letter__goal-v, html:not(.js) .os-letter__goal-v { background-size: 100% 100%; }
.os-letter__close { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -.005em; color: var(--navy-900); margin: 1.8em 0 1.1em !important; }

.os-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.os-sign {
  margin: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px;
  padding: 26px 26px 24px; border-radius: 22px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.os-sign::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.os-sign:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(176, 123, 36, .35), 0 26px 50px -30px rgba(11, 37, 73, .5); }
.os-sign:hover::after { transform: none; }
.os-sign__logo { width: auto; height: 42px; object-fit: contain; object-position: left center; }
.os-sign__logo--es { height: 36px; margin-block: 3px; }
.os-sign figcaption { display: flex; align-items: center; gap: 16px; }
.os-sign__who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.os-sign__photo { /* small round portrait with a fine gold ring */
  width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(200, 150, 58, .6), 0 12px 24px -12px rgba(11, 37, 73, .6);
}
.os-sign__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.25; letter-spacing: -.01em; color: var(--navy-900); }
.os-sign__role { font-size: .9rem; line-height: 1.45; color: var(--ink-3); }

/* =====================================================================
   ABOUT / LEARNING OBJECTIVES
   Five white pillars side by side on a light band, joined by a fine
   gold line. Calm motion: a one-time reveal and a light outline on hover.
   ===================================================================== */
.os-about { overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F3F7FC 0%, #E9F1FB 100%); }
.os-about__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(720px 380px at 8% 100%, rgba(142, 187, 233, .38), rgba(142, 187, 233, 0) 65%),
    radial-gradient(720px 380px at 94% 92%, rgba(240, 200, 110, .2), rgba(240, 200, 110, 0) 65%);
}
.os-about__bg::before { /* fine dotted field */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23, 80, 154, .14) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 60%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 60%, #000, transparent);
}

.os-pillars {
  position: relative; list-style: none; margin: 0; padding: 40px 0 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
}
.os-pillars::before { /* the line that joins the five */
  content: ""; position: absolute; top: 6px; height: 1px;
  left: calc((100% - 72px) / 10); right: calc((100% - 72px) / 10);
  background: linear-gradient(90deg, rgba(224, 180, 87, .2), rgba(224, 180, 87, .85) 15%, rgba(224, 180, 87, .85) 85%, rgba(224, 180, 87, .2));
}
.os-pillar {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  padding: 28px 24px 30px; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(11, 37, 73, .07), 0 30px 60px -38px rgba(11, 37, 73, .45);
}
.os-pillar::before { /* its point on the line */
  content: ""; position: absolute; left: 50%; top: -40px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 3px var(--gold-400), 0 0 0 5px rgba(224, 180, 87, .16);
}
.js .os-pillar.rv-done { transition: box-shadow .4s; }
.os-pillar:hover { box-shadow: inset 0 0 0 1.5px rgba(23, 80, 154, .3), 0 30px 60px -38px rgba(11, 37, 73, .45); }

.os-pillar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.os-pillar__icon {
  width: 60px; height: 60px; flex: none; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: var(--tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 28px -14px var(--tile-shadow);
}
.os-pillar__icon .os-ico { width: 28px; height: 28px; stroke-width: 1.6; }
.os-pillar__num {
  font-family: var(--f-display); font-weight: 200; font-size: 2.5rem; line-height: .9; letter-spacing: -.05em;
  color: var(--sky-300); opacity: .75;
}
.os-pillar--navy { --tile: linear-gradient(140deg, #1A4378, #0B2549); --tile-shadow: rgba(11, 37, 73, .8); }
.os-pillar--blue { --tile: linear-gradient(140deg, #4A93DE, #17509A); --tile-shadow: rgba(23, 80, 154, .8); }
.os-pillar--gold { --tile: var(--gold-grad); --tile-shadow: rgba(176, 123, 36, .75); }
.os-pillar--gold .os-pillar__icon { color: var(--navy-950); }

.os-pillar__k {
  margin: 30px 0 10px; font-family: var(--f-display); font-weight: 700; font-size: .68rem; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.os-pillar__t {
  margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.42;
  letter-spacing: -.01em; color: var(--navy-900); text-wrap: pretty;
}

/* =====================================================================
   WHO SHOULD ATTEND
   ===================================================================== */
.os-attend {
  background:
    radial-gradient(800px 500px at 100% 30%, rgba(214, 232, 250, .9), rgba(214, 232, 250, 0) 60%),
    var(--ice);
  padding-top: 0; padding-bottom: calc(clamp(48px, 6vw, 90px) + var(--swoosh-h));
  overflow: hidden;
}

.os-marquee { overflow: hidden; padding-block: clamp(30px, 4.4vw, 58px); margin-bottom: clamp(56px, 7vw, 100px); border-bottom: 1px solid var(--line); background: var(--paper); }
.os-marquee__track { display: flex; width: max-content; animation: os-marquee 46s linear infinite; will-change: transform; }
.os-marquee__set { display: flex; align-items: center; flex: none; }
.os-marquee__set > span {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 6.2vw, 5.6rem); line-height: 1; letter-spacing: -.03em;
  text-transform: uppercase; white-space: nowrap; padding-inline: .2em;
}
.os-marquee .f {
  background: linear-gradient(100deg, var(--navy-900), var(--blue-700) 60%, var(--navy-900));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.os-marquee .o { /* ghost words (a solid tint: outlined text shows the variable font's overlapping contours) */
  background: linear-gradient(180deg, #C6DAF1, #E3EDF9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.os-marquee .g { font-weight: 300; letter-spacing: -.02em; color: var(--gold-600); }
.os-marquee__dot { height: clamp(34px, 4.6vw, 62px); width: auto; margin-inline: clamp(16px, 2.4vw, 36px); flex: none; }
@keyframes os-marquee { to { transform: translate3d(-50%, 0, 0); } }

.os-head--center { justify-content: center; text-align: center; }
.os-head--center .os-eyebrow { justify-content: center; }

/* Dark rounded panel (one-time reveal, colour-only hover) */
.os-hubpanel {
  position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark);
  margin-inline: clamp(8px, 1.4vw, 22px); border-radius: var(--round);
  padding-block: clamp(72px, 8.4vw, 124px) clamp(56px, 6vw, 96px);
  background: var(--navy-950);
  box-shadow: 0 60px 110px -70px rgba(6, 22, 49, .8);
}
.os-hubpanel__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(780px 540px at 50% 62%, rgba(47, 120, 200, .55) 0%, rgba(47, 120, 200, 0) 70%),
    radial-gradient(620px 420px at 0% 0%, rgba(142, 187, 233, .2), transparent 60%),
    radial-gradient(620px 420px at 100% 100%, rgba(142, 187, 233, .12), transparent 60%),
    linear-gradient(180deg, #0D2B58 0%, var(--navy-950) 100%);
}
.os-hubpanel__stars {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 32% 72%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 12%, #CFE2F7, transparent),
    radial-gradient(1px 1px at 76% 46%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90% 84%, #F3DFAE, transparent),
    radial-gradient(1px 1px at 46% 92%, #fff, transparent);
  background-size: 420px 420px;
}

/* Hub: roles on both sides, joined by dotted lines to the globe */
.os-hub { position: relative; height: 640px; }
.os-hub::before { /* concentric guide rings */
  content: ""; position: absolute; left: 50%; top: 50%; width: 980px; height: 980px; margin: -490px 0 0 -490px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 89px, rgba(255, 255, 255, .055) 90px 91px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%); mask-image: radial-gradient(circle, #000 25%, transparent 68%);
}
.os-hub__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* the lines and the pulse, drawn by main.js */

.os-hub__core { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; display: grid; place-items: center; }
.os-hub__core > * { grid-area: 1 / 1; }
.os-hub__ring { width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .26); }
.os-hub__ring--2 { width: 122%; height: 122%; border: 1px solid rgba(142, 187, 233, .16); }
.os-hub__disc { /* the blue sphere the dotted globe turns on */
  width: 84%; height: 84%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2F74C4 0%, #1A55A2 46%, #0F3672 100%);
  box-shadow: inset 0 -26px 50px rgba(6, 22, 49, .4), 0 0 90px rgba(47, 120, 200, .5), 0 40px 70px -30px rgba(0, 0, 0, .6);
}
.os-hub__globe { width: 100%; height: 100%; display: block; }
.os-hub__badge { /* frosted glass medallion with the white logo; the globe turns behind it */
  position: relative; width: 40%; height: 40%; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 50% 55%, rgba(14, 45, 92, .26), rgba(8, 30, 66, .55));
  -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .36),
    inset 0 -14px 26px rgba(6, 22, 49, .34),
    0 0 0 7px rgba(255, 255, 255, .05),
    0 0 46px rgba(110, 170, 235, .45),
    0 22px 40px -18px rgba(3, 12, 30, .8);
}
.os-hub__badge::before { /* a gold light that travels round the rim */
  content: ""; position: absolute; inset: -7px; border-radius: 50%; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(240, 200, 110, 0) 0deg 200deg, rgba(240, 200, 110, .85) 330deg, #FFF1CC 352deg, rgba(240, 200, 110, 0) 360deg);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: os-spin 10s linear infinite;
}
.os-hub__badge img { position: relative; z-index: 1; width: 60%; height: auto; transform: translateX(3%); filter: drop-shadow(0 6px 14px rgba(3, 12, 30, .45)); }
/* The logo receives the light: a warm glow gathers inside the glass (.is-charging, set by main.js),
   then a gold aura and one soft pulse (.is-glow) */
.os-hub__badge::after {
  content: ""; position: absolute; inset: -16%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 120, .75) 0%, rgba(245, 190, 80, .42) 36%, rgba(240, 180, 70, 0) 70%);
  mix-blend-mode: screen; /* adds light, so the gold stays bright on the navy glass instead of turning grey */
  opacity: 0; transform: scale(.6); transition: opacity 1.4s var(--ease-out), transform 1.8s var(--ease-out);
}
.os-hub__core.is-charging .os-hub__badge::after { opacity: .5; transform: scale(.8); transition-duration: .7s, 1s; }
.os-hub__core.is-glow .os-hub__badge::after { opacity: 1; transform: scale(1.12); transition: opacity .35s, transform 1.2s var(--ease-out); }
.os-hub__core.is-glow .os-hub__badge { animation: os-hub-glow 2.1s var(--ease-out); }
.os-hub__core.is-glow .os-hub__badge img { animation: os-hub-glow-img 2.1s var(--ease-out); }
@keyframes os-hub-glow {
  18% {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .85), inset 0 -14px 26px rgba(6, 22, 49, .2), 0 0 0 7px rgba(240, 200, 110, .16), 0 0 70px rgba(240, 200, 110, .6), 0 22px 40px -18px rgba(3, 12, 30, .8);
  }
}
@keyframes os-hub-glow-img { 18% { filter: drop-shadow(0 0 14px rgba(255, 220, 150, .85)) brightness(1.06); } }

.os-hub__list { list-style: none; margin: 0; padding: 0; }
.os-hub__item { position: absolute; top: calc(50% + var(--y) - 28px); width: 262px; display: flex; align-items: center; gap: 16px; }
.os-hub__item--l { right: calc(50% + var(--x) - 28px); flex-direction: row-reverse; text-align: right; }
.os-hub__item--r { left: calc(50% + var(--x) - 28px); }
.os-hub__icon {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 26%, #5A9FE4, var(--blue-500) 45%, var(--blue-700));
  box-shadow: 0 0 0 6px rgba(142, 187, 233, .12), 0 14px 30px -12px rgba(47, 120, 200, .95);
  transition: box-shadow .9s var(--ease-out);
}
.os-hub__icon .os-ico { width: 25px; height: 25px; stroke-width: 1.7; }
.os-hub__name { font-family: var(--f-display); font-weight: 600; font-size: .98rem; line-height: 1.3; color: #fff; transition: color .9s var(--ease-out); }
.os-hub__item:hover .os-hub__name { color: var(--gold-200); }
/* A role as the pulse reaches it: a gold ring round the icon, the name warms to gold */
.os-hub__item.is-lit .os-hub__icon {
  box-shadow: 0 0 0 6px rgba(240, 200, 110, .14), 0 0 0 1.5px rgba(246, 220, 156, .9), 0 0 30px rgba(240, 200, 110, .45), 0 14px 30px -12px rgba(47, 120, 200, .95);
}
.os-hub__item.is-lit .os-hub__name { color: var(--gold-200); }

.os-attend .os-swoosh { bottom: -1px; }

/* =====================================================================
   REGISTRATION
   ===================================================================== */
.os-register { background: var(--navy-950); color: var(--on-dark); overflow: hidden; isolation: isolate; padding-top: clamp(40px, 5vw, 70px); }
.os-register__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.os-register__bg::after { /* film grain */
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.os-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.os-blob--1 { width: 560px; height: 560px; left: -140px; top: -120px; background: radial-gradient(circle, #1E63B0, transparent 70%); animation: os-drift1 18s ease-in-out infinite; }
.os-blob--2 { width: 520px; height: 520px; right: -120px; bottom: -200px; background: radial-gradient(circle, #B07B24, transparent 70%); opacity: .4; animation: os-drift2 22s ease-in-out infinite; }
.os-blob--3 { width: 420px; height: 420px; left: 45%; top: 20%; background: radial-gradient(circle, #2F78C8, transparent 70%); opacity: .3; animation: os-drift1 26s ease-in-out infinite reverse; }
@keyframes os-drift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(120px, 60px, 0) scale(1.15); } }
@keyframes os-drift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-140px, -80px, 0) scale(1.1); } }

.os-register__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.os-register__copy { min-width: 0; }
.os-display {
  margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.7rem, 6.6vw, 6rem); line-height: .95; letter-spacing: -.035em; color: #fff;
}
.os-display em { padding-right: .04em; }
.os-register__facts { list-style: none; margin: clamp(28px, 3.4vw, 40px) 0 clamp(30px, 3.6vw, 44px); padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.os-register__facts li {
  display: inline-flex; align-items: center; gap: .7em; padding: .8em 1.2em; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size: .92rem; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-dark);
}
.os-register__facts .os-ico { color: var(--gold-400); }

.os-countdown {
  position: relative; min-width: 0; padding: clamp(26px, 3vw, 38px); border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -40px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.os-countdown::before { /* gold hairline on top edge */
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.os-countdown__label { display: flex; align-items: center; gap: .8em; margin: 0 0 22px; font-family: var(--f-display); font-weight: 700; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-2); }
.os-countdown__live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 0 rgba(224, 180, 87, .6); animation: os-ping 2s ease-out infinite; }
@keyframes os-ping { 0% { box-shadow: 0 0 0 0 rgba(224, 180, 87, .6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(224, 180, 87, 0); } }
.os-countdown__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.os-cd {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 6px 14px; border-radius: 18px; overflow: hidden;
  background: rgba(6, 22, 49, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.os-cd__num {
  display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff;
}
.os-cd__num.tick { animation: os-tick .6s var(--ease-out); }
@keyframes os-tick { from { transform: translateY(-55%); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.os-cd__unit { font-family: var(--f-display); font-weight: 700; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }
.os-countdown__foot { margin: 20px 0 0; text-align: right; font-family: var(--f-display); font-weight: 600; font-size: .9rem; letter-spacing: .06em; color: var(--gold-400); }

/* =====================================================================
   SPONSORS
   ===================================================================== */
.os-partners { background: var(--paper); }
.os-orgs { margin-bottom: clamp(48px, 6vw, 80px); }
.os-orgs__group { min-width: 0; }
.os-orgs__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.os-logo-card {
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(150px, 15vw, 190px);
  display: grid; place-items: center; padding: 30px clamp(20px, 3vw, 40px); border-radius: 24px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
}
.os-logo-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(214, 232, 250, .9), transparent 60%);
  opacity: 0; transition: opacity .5s;
}
.os-logo-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(176, 123, 36, .4), 0 30px 60px -36px rgba(11, 37, 73, .55); }
.os-logo-card:hover::before { opacity: 1; }
.os-logo-card img { width: auto; transition: transform .8s var(--ease-out); }
.os-logo-card:hover img { transform: scale(1.04); }
.os-logo-card__edes { max-height: 76px; }
.os-logo-card__es { max-height: 58px; }

.os-sponsors__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.os-slot {
  position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 5 / 2; padding: 20px; border-radius: 18px;
  background: var(--ice); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--f-display); font-weight: 700; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  transition: box-shadow .5s, background .5s;
}
.os-slot::after { /* placeholder shimmer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%);
  transform: translateX(-100%); animation: os-slot 3.6s ease-in-out infinite;
}
.os-slot:nth-child(2n)::after { animation-delay: .4s; }
.os-slot:nth-child(3n)::after { animation-delay: .8s; }
@keyframes os-slot { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.os-slot:hover { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(23, 80, 154, .35); }
.os-slot--logo { background: var(--paper); }
.os-slot--logo::after { display: none; }
.os-slot--logo > a { display: grid; place-items: center; width: 100%; height: 100%; } /* a sponsor logo with a link (PHP version) */
.os-slot--logo img { max-height: 70%; width: auto; } /* logos show in full colour; the card outline turns blue on hover */

/* Sample sponsor logos for the client preview (invented brands). They scale
   with the card and show in their own colours. */
.os-slot--logo { container-type: inline-size; }
.os-spn {
  display: inline-flex; align-items: center; gap: .72em; max-width: 100%;
  font-size: clamp(7px, 6.5cqi, 16.5px); line-height: 1; letter-spacing: 0; text-transform: none;
}
.os-spn__mark { width: 2.75em; height: 2.75em; flex: none; overflow: visible; }
.os-spn__mark .p { fill: var(--c1); }
.os-spn__mark .s { fill: var(--c2); }
.os-spn__mark .ps { fill: none; stroke: var(--c1); }
.os-spn__mark .ss { fill: none; stroke: var(--c2); }
.os-spn__word { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; }
.os-spn__word b { font-family: var(--f-display); font-weight: 600; font-size: 1.5em; line-height: 1; color: var(--ink-c, #14243F); white-space: nowrap; }
.os-spn__word small { font-family: var(--f-display); font-weight: 600; font-size: .58em; line-height: 1; letter-spacing: .34em; text-transform: uppercase; color: var(--c1); white-space: nowrap; }
.os-spn--1 { --c1: #0E6672; --c2: #C8963A; }
.os-spn--1 b { font-weight: 500; letter-spacing: .26em; text-transform: uppercase; font-size: 1.32em; }
.os-spn--2 { --c1: #B4173A; --c2: #E9A23B; }
.os-spn--2 b { font-family: var(--f-body); font-weight: 800; letter-spacing: -.035em; font-size: 1.62em; }
.os-spn--2 small { font-family: var(--f-body); letter-spacing: .5em; font-weight: 700; }
.os-spn--3 { --c1: #17734F; --c2: #7DB83A; }
.os-spn--3 b { font-weight: 300; letter-spacing: -.01em; font-size: 1.68em; }
.os-spn--4 { --c1: #0B2549; --c2: #E2A21B; }
.os-spn--4 b { font-weight: 400; letter-spacing: .4em; text-transform: uppercase; font-size: 1.24em; }
.os-spn--4 small { color: var(--c2); letter-spacing: .52em; }
.os-spn--5 { --c1: #1D4ED8; --c2: #5BA7F7; }
.os-spn--5 b { font-family: var(--f-body); font-weight: 800; letter-spacing: -.02em; font-size: 1.6em; }
.os-spn--6 { --c1: #2F7D32; --c2: #F2F7E8; }
.os-spn--6 b { font-weight: 700; letter-spacing: -.03em; font-size: 1.6em; }
.os-spn--6 small { text-transform: none; letter-spacing: .14em; font-size: .74em; font-weight: 500; color: #4E7A3A; }
.os-spn--7 { --c1: #5B21B6; --c2: #9F7AEA; }
.os-spn--7 b { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 1.34em; }
.os-spn--8 { --c1: #0E7490; --c2: #38BDF8; }
.os-spn--8 b { font-weight: 500; letter-spacing: .02em; font-size: 1.58em; }
.os-spn--8 small { padding: .38em .5em .3em .84em; border-radius: 3px; box-shadow: inset 0 0 0 1px currentColor; }

.os-sponsor-cta {
  margin-top: clamp(36px, 4.4vw, 56px); display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap;
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 34px); border-radius: 24px;
  background: linear-gradient(120deg, var(--ice), #fff 70%); box-shadow: inset 0 0 0 1px var(--line);
}
.os-sponsor-cta__icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; background: radial-gradient(circle at 32% 26%, #3C86D3, #17509A 50%, #0B2549); }
.os-sponsor-cta__text { flex: 1 1 260px; min-width: 0; }
.os-sponsor-cta__k { margin: 0 0 4px; font-family: var(--f-display); font-weight: 700; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.os-sponsor-cta__v { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--navy-900); text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat 0 100% / 0 2px; transition: background-size .6s var(--ease-out); padding-bottom: 2px; }
.os-sponsor-cta__v:hover { background-size: 100% 2px; }

/* Copy buttons */
.os-copy {
  position: relative; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--paper); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--ease-out);
}
.os-copy:hover { background: var(--navy-900); color: #fff; transform: scale(1.06); }
.os-copy .os-ico { width: 19px; height: 19px; grid-area: 1 / 1; transition: transform .4s var(--ease-out), opacity .3s; }
.os-copy__b { opacity: 0; transform: scale(.4); stroke-width: 2.2; }
.os-copy.is-copied { background: var(--gold-400); color: var(--navy-950); box-shadow: none; }
.os-copy.is-copied .os-copy__a { opacity: 0; transform: scale(.4); }
.os-copy.is-copied .os-copy__b { opacity: 1; transform: none; }
.os-copy--dark { margin-left: auto; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.os-copy--dark:hover { background: #fff; color: var(--blue-700); transform: none; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.os-footer {
  position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: 60px;
  padding-top: clamp(72px, 9vw, 128px); color: var(--on-dark); background: var(--navy-950);
  border-radius: var(--round) var(--round) 0 0;
}
.os-footer__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #0D2B58, var(--navy-950) 60%); }
.os-footer__bg span { position: absolute; border-radius: 50%; }
.os-footer__bg .a1 { width: 820px; height: 620px; left: -240px; top: -280px; background: radial-gradient(circle, rgba(47, 120, 200, .55), transparent 65%); animation: os-drift1 20s ease-in-out infinite alternate; }
.os-footer__bg .a2 { width: 620px; height: 520px; right: -220px; top: 8%; background: radial-gradient(circle, rgba(142, 187, 233, .24), transparent 65%); animation: os-drift2 24s ease-in-out infinite alternate; }
.os-footer__bg .a3 { width: 640px; height: 520px; left: 38%; bottom: -320px; background: radial-gradient(circle, rgba(224, 180, 87, .2), transparent 65%); }
.os-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.os-footer__brand { min-width: 0; }
.os-footer__logo { height: 64px; width: auto; margin-bottom: 24px; }
.os-footer__tag { margin: 0 0 28px; max-width: 22em; font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; line-height: 1.5; color: var(--on-dark-2); }
.os-footer__tag span { color: var(--gold-400); }
.os-social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.os-social a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17);
  transition: background-color .3s, color .3s, transform .5s var(--ease-out);
}
.os-social a .os-ico { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.os-social a:hover { background: var(--gold-400); color: var(--navy-950); transform: translateY(-3px); }
.os-social__handle { margin-left: 6px; font-family: var(--f-display); font-weight: 600; font-size: .95rem; color: var(--on-dark-2); }

.os-footer__contact { min-width: 0; }
.os-contacts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.os-contact {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 16px;
  padding: 16px 16px 16px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11);
}
.js .os-contact.rv-done { transition: background-color .4s, box-shadow .4s; }
.os-contact::before { /* soft light that follows the pointer */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(142, 187, 233, .16), transparent 65%);
}
.os-contact:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.os-contact:hover::before { opacity: 1; }
.os-contact__icon {
  flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue-500), #6FA6DE); box-shadow: 0 12px 24px -12px rgba(47, 120, 200, .95);
}
.os-contact__icon .os-ico { width: 22px; height: 22px; stroke-width: 1.8; }
.os-contact__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.os-contact__k { font-family: var(--f-display); font-weight: 700; font-size: .68rem; line-height: 1.25; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.os-contact__v { font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.3; color: #fff; text-decoration: none; overflow-wrap: anywhere; transition: color .3s; }
.os-contact__v:hover { color: var(--gold-200); }

.os-footer__word { position: relative; margin-top: clamp(56px, 7vw, 100px); font-family: var(--f-display); font-weight: 800; font-size: 120px; line-height: .92; letter-spacing: -.055em; white-space: nowrap; overflow: hidden; user-select: none; }
.os-footer__word span {
  display: inline-block; padding: 0 .04em .06em 0;
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 40%), #F0CE7E 0%, rgba(240, 206, 126, 0) 70%),
    linear-gradient(180deg, rgba(170, 205, 245, .34) 0%, rgba(170, 205, 245, .05) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.os-footer__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap;
  padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px)); margin-top: 12px; border-top: 1px solid var(--line-dark);
  font-size: .95rem; line-height: 1.5; color: var(--on-dark-2);
}
.os-footer__bar p { margin: 0; }
@media (min-width: 641px) { .os-footer__bar { padding-right: 72px; } } /* clear of the back-to-top button */
.os-footer__legal { display: flex; align-items: center; gap: 22px; min-width: 0; }
.os-footer__mci { /* white MCI logo, set off by a fine rule */
  flex: none; display: flex; align-items: center; padding-right: 22px; border-right: 1px solid var(--line-dark);
}
.os-footer__mci img { height: 46px; width: auto; }
.os-footer__links { display: flex; align-items: center; gap: 10px 32px; flex-wrap: wrap; }
.os-footer__links a {
  color: var(--on-dark-2); text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(var(--gold-400), var(--gold-400)) no-repeat 0 100% / 0 1px;
  transition: color .3s, background-size .5s var(--ease-out);
}
.os-footer__links a:hover { color: #fff; background-size: 100% 1px; }

/* Back to top */
.os-totop {
  position: fixed; z-index: 55; width: 54px; height: 54px; border-radius: 50%;
  right: calc(var(--gut-r) - 4px); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; color: #fff; background: var(--navy-900);
  box-shadow: 0 16px 34px -14px rgba(6, 22, 49, .7);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .4s, transform .6s var(--ease-out), background .3s;
}
.os-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.os-totop:hover { background: var(--blue-700); }
.os-totop > .os-ico { width: 20px; height: 20px; stroke-width: 2; grid-area: 1 / 1; }
.os-totop__ring { grid-area: 1 / 1; width: 54px; height: 54px; transform: rotate(-90deg); }
.os-totop__ring circle { fill: none; stroke-width: 2; stroke: rgba(255, 255, 255, .14); }
.os-totop__ring .os-totop__bar { stroke: var(--gold-400); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Learning Objectives: three over two on tablets, one column on phones */
@media (max-width: 1180px) {
  .os-pillars { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 0; }
  .os-pillars::before, .os-pillar::before { display: none; }
  .os-pillar { grid-column: span 2; }
  .os-pillar:nth-child(4) { grid-column: 2 / span 2; }
  .os-pillar:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 760px) {
  .os-pillars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .os-pillar, .os-pillar:nth-child(4), .os-pillar:nth-child(5) { grid-column: auto; }
  .os-pillar { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 20px 20px 22px; }
  .os-pillar__top { grid-row: 1 / span 2; }
  .os-pillar__num { display: none; }
  .os-pillar__icon { width: 52px; height: 52px; border-radius: 15px; }
  .os-pillar__icon .os-ico { width: 24px; height: 24px; }
  .os-pillar__k, .os-pillar__t { grid-column: 2; }
  .os-pillar__k { margin: 4px 0 6px; }
}

/* Hub: below 1200px the globe sits above the roles, which become cards */
@media (max-width: 1200px) {
  .os-hub { height: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 5vw, 52px); }
  .os-hub::before, .os-hub__fx { display: none; }
  .os-hub__core { position: relative; left: auto; top: auto; margin: 0; width: 290px; height: 290px; }
  .os-hub__list { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .os-hub__item, .os-hub__item--l, .os-hub__item--r {
    position: relative; top: auto; left: auto; right: auto; width: auto; flex-direction: row; text-align: left;
    padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  }
  .os-hub__item::after { /* a gold edge fades in as the pulse reaches a card's row */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    box-shadow: inset 0 0 0 1px rgba(240, 200, 110, .55), inset 0 0 28px rgba(240, 200, 110, .08);
    transition: opacity .9s var(--ease-out);
  }
  .os-hub__item.is-lit::after { opacity: 1; }
  .os-hub__icon { width: 50px; height: 50px; }
}
@media (max-width: 760px) {
  .os-hub__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .os-hub__item, .os-hub__item--l, .os-hub__item--r { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .os-hub__icon { width: 46px; height: 46px; }
  .os-hub__icon .os-ico { width: 22px; height: 22px; }
  .os-hub__name { font-size: .92rem; }
  .os-hub__core { width: 250px; height: 250px; }
}
@media (max-width: 1120px) {
  .os-menu { display: none; }
  .os-burger { display: block; margin-left: 0; }
  .os-nav__cta { margin-left: auto; }
}
@media (max-width: 960px) {
  :root { --nav-h: 76px; }
  .os-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "org" "ctas" "visual"; }
  .os-hero__visual { justify-self: center; max-width: 500px; margin-top: 28px; }
  .os-hero__org { margin-top: 18px; }
  .os-welcome__grid { grid-template-columns: minmax(0, 1fr); }
  .os-welcome__side { position: static; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .os-welcome__side .os-eyebrow { width: 100%; }
  .os-seal { margin-top: 0; width: 150px; }
  .os-register__grid { grid-template-columns: minmax(0, 1fr); }
  .os-footer__top { grid-template-columns: minmax(0, 1fr); }
  .os-sponsors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .os-brand img { height: 40px; }
  .os-nav.is-scrolled .os-brand img { height: 36px; }
  .os-nav__cta { display: none; }
  .os-burger { margin-left: auto; }
  .os-hero .os-eyebrow { letter-spacing: .3em; }
  .os-hero__t2 { letter-spacing: .3em; gap: .5em; }
  .os-hero__t2 > span { margin-right: -.3em; }
  .os-hero__meta { flex-direction: column; }
  .os-hero__ctas .os-btn { flex: 1 1 auto; }
  .os-hero__logos { padding: 12px 16px; }
  .os-hero__logo-edes { height: 34px; }
  .os-hero__logo-es { height: 27px; }
  .os-signs { grid-template-columns: minmax(0, 1fr); }
  .os-letter__goal { padding-right: 46px; }
  .os-letter__goal::before { width: 36px; height: 30px; top: 20px; }
  .os-about .os-eyebrow--both::before, .os-about .os-eyebrow--both::after { display: none; }
  .os-orgs__row { grid-auto-flow: row; grid-auto-columns: auto; }
  .os-sponsors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .os-countdown__grid { gap: 6px; }
  .os-cd { padding: 14px 2px 12px; border-radius: 14px; }
  .os-cd__unit { font-size: .58rem; letter-spacing: .12em; }
  .os-contact { padding: 12px 12px 12px 16px; gap: 12px; }
  .os-contact__icon { display: none; }
  .os-contact__v { font-size: min(1rem, calc((100vw - 112px) / 17.6)); }
  .os-footer__bar { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); font-size: .88rem; }
  .os-footer__legal { gap: 16px; }
  .os-footer__mci { padding-right: 16px; }
  .os-footer__mci img { height: 40px; }
  .os-copy { width: 40px; height: 40px; }
  .os-copy--dark { width: 42px; height: 42px; }
  .os-social__handle { width: 100%; margin: 8px 0 0; }
}

/* =====================================================================
   THEME SWITCH (in the menu bar)
   A small sky: the gold sun slides across and closes into a pearl
   crescent, and stars come out behind it. main.js toggles html.is-dark.
   ===================================================================== */
.os-theme {
  --tw: 62px; --th: 34px; --kn: 26px; --pad: 4px; --go: calc(var(--tw) - var(--kn) - var(--pad) * 2);
  position: relative; flex: none; width: var(--tw); height: var(--th); padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #FFFFFF, #E4EEFA);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 2px 5px rgba(11, 37, 73, .09), 0 10px 22px -14px rgba(11, 37, 73, .5);
  transition: box-shadow .5s var(--ease-out), opacity .3s, visibility 0s; -webkit-tap-highlight-color: transparent;
}
.os-theme::before { content: ""; position: absolute; inset: -7px -3px; } /* a 48px touch target */
.os-theme__sky { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.os-theme__sky::after { /* a faint crescent shows where the sun can go */
  content: ""; position: absolute; right: 11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  box-shadow: inset -3px -1.5px 0 0 rgba(11, 37, 73, .34); transition: opacity .5s;
}
.os-theme__sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #F3DFAE; opacity: 0; transition: opacity .6s; }
.os-theme__sky i:nth-child(1) { left: 11px; top: 9px; }
.os-theme__sky i:nth-child(2) { left: 21px; top: 15px; width: 1.5px; height: 1.5px; }
.os-theme__sky i:nth-child(3) { left: 14px; top: 23px; width: 1.5px; height: 1.5px; }
.os-theme__knob {
  position: absolute; left: var(--pad); top: var(--pad); width: var(--kn); height: var(--kn); border-radius: 50%;
  display: grid; place-items: center; color: var(--navy-950); background: var(--gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 80, 10, .25), 0 5px 11px -3px rgba(176, 123, 36, .85);
  transition: transform .85s var(--ease-out), box-shadow .6s;
}
.os-theme__ico { width: 18px; height: 18px; overflow: visible; transition: transform .95s var(--ease-out); }
.os-theme__disc { fill: currentColor; transform-origin: 12px 12px; transition: transform .85s var(--ease-out); }
.os-theme__bite { transform: translate(12px, -12px); transition: transform .85s var(--ease-out); }
.os-theme__rays { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .75s var(--ease-out), opacity .35s; }
@media (hover: hover) {
  .os-theme:hover { box-shadow: inset 0 0 0 1px rgba(176, 123, 36, .6), inset 0 2px 5px rgba(11, 37, 73, .09), 0 12px 24px -12px rgba(176, 123, 36, .6); }
  .os-theme:hover .os-theme__knob { transform: translateX(2px); }
  html.is-dark .os-theme:hover { box-shadow: inset 0 0 0 1px rgba(243, 223, 174, .6), inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 18px -4px rgba(255, 222, 150, .5); }
  html.is-dark .os-theme:hover .os-theme__knob { transform: translateX(calc(var(--go) - 2px)); }
}
html:not(.js) .os-theme { visibility: hidden; }  /* it needs the script; the space is kept so nothing jumps */
html.is-menu-open .os-theme { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; } /* the open menu is dark in both themes */

html.is-dark .os-theme {
  background: linear-gradient(135deg, #10274E, #050C1D);
  box-shadow: inset 0 0 0 1px rgba(243, 223, 174, .3), inset 0 2px 6px rgba(0, 0, 0, .5);
}
html.is-dark .os-theme__sky::after { opacity: 0; }
html.is-dark .os-theme__sky i { opacity: 1; animation: os-theme-star 3.2s ease-in-out infinite; }
html.is-dark .os-theme__sky i:nth-child(2) { animation-delay: -1.1s; }
html.is-dark .os-theme__sky i:nth-child(3) { animation-delay: -2.2s; }
@keyframes os-theme-star { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
html.is-dark .os-theme__knob {
  transform: translateX(var(--go));
  background: radial-gradient(circle at 34% 28%, #FFFDF6 0%, #F6E6BE 56%, #D9B163 118%);
  box-shadow: inset 0 -1px 1px rgba(150, 105, 30, .35), 0 0 0 3px rgba(255, 228, 168, .1), 0 0 16px rgba(255, 222, 150, .55);
}
html.is-dark .os-theme__ico { transform: rotate(-24deg); }
html.is-dark .os-theme__disc { transform: scale(1.66); }
html.is-dark .os-theme__bite { transform: none; }
html.is-dark .os-theme__rays { transform: scale(.4) rotate(70deg); opacity: 0; }

/* Where it sits in the bar */
@media (min-width: 1121px) and (max-width: 1300px) { .os-menu a { padding-inline: .7em; } }
@media (max-width: 1120px) { .os-theme { margin-left: auto; } .os-nav__cta { margin-left: 0; } }
@media (max-width: 640px) { .os-theme { --tw: 58px; --th: 32px; --kn: 24px; } .os-burger { margin-left: 0; } }

/* Theme change: the new theme opens in a circle from the switch, the same gesture as
   the mobile menu, with a fine line of gold light on its edge (the backdrop of the
   image pair, seen through the gap between the two masked layers). */
@property --tw-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes os-theme-open { from { --tw-r: 0px; } to { --tw-r: var(--tw-end, 2400px); } }
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: 1s; }
::view-transition-image-pair(root) { isolation: auto; background: linear-gradient(135deg, #FFE9B5, #E0B457 55%, #FFE9B5); }
::view-transition-old(root), ::view-transition-new(root) { animation: os-theme-open 1s cubic-bezier(.65, 0, .35, 1) both; mix-blend-mode: normal; }
::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--tw-x, 50%) var(--tw-y, 0), #000 calc(var(--tw-r) - 1.5px), transparent var(--tw-r));
  mask-image: radial-gradient(circle at var(--tw-x, 50%) var(--tw-y, 0), #000 calc(var(--tw-r) - 1.5px), transparent var(--tw-r));
}
::view-transition-old(root) {
  -webkit-mask-image: radial-gradient(circle at var(--tw-x, 50%) var(--tw-y, 0), transparent calc(var(--tw-r) + .5px), rgba(0, 0, 0, .8) calc(var(--tw-r) + 2.5px), #000 calc(var(--tw-r) + 44px));
  mask-image: radial-gradient(circle at var(--tw-x, 50%) var(--tw-y, 0), transparent calc(var(--tw-r) + .5px), rgba(0, 0, 0, .8) calc(var(--tw-r) + 2.5px), #000 calc(var(--tw-r) + 44px));
}
@media (pointer: coarse) { /* phones: a plain circle, which is lighter to draw */
  ::view-transition-image-pair(root) { background: none; }
  ::view-transition-old(root) { -webkit-mask-image: none; mask-image: none; }
  ::view-transition-new(root) { -webkit-mask-image: none; mask-image: none; clip-path: circle(var(--tw-r) at var(--tw-x, 50%) var(--tw-y, 0)); }
}

/* =====================================================================
   DARK THEME (html.is-dark)
   Midnight rather than plain black: light surfaces become deep navy
   glass, headings go white, accent words go gold. Most of it is done by
   changing the tokens; the rules below are what tokens cannot reach.
   Partner logos keep their real colours on small white plates. Page
   glows are blue only: a faint gold wash over navy turns grey.
   ===================================================================== */
html.is-dark {
  color-scheme: dark;
  --paper: #060E20;
  --ice: #0A1630;
  --navy-900: #F6F9FE;     /* heading ink */
  --navy-800: #C9D8EC;
  --gold-600: #E0B457;     /* gold text needs the lighter step on dark */
  --gold-ink: #E6BE6A;
  --ink: #EEF4FC;
  --ink-2: #B7C5DA;
  --ink-3: #8797B0;
  --line: rgba(226, 236, 250, .1);
  --line-strong: rgba(226, 236, 250, .22);
  --dk-card: linear-gradient(165deg, #10234A 0%, #0A172F 100%);
  --dk-edge: rgba(226, 236, 250, .1);
  --dk-gold-edge: rgba(243, 223, 174, .32);
}
img.os-d { display: none; }
html.is-dark img.os-l { display: none; }
html.is-dark img.os-d { display: block; }

/* Bar */
html.is-dark .os-nav.is-scrolled { background: rgba(6, 14, 32, .88); box-shadow: 0 1px 0 rgba(243, 223, 174, .14), 0 18px 40px -24px rgba(0, 0, 0, .85); }
html.is-dark .os-burger:not([aria-expanded="true"]) { background: #142B52; box-shadow: inset 0 0 0 1px var(--dk-gold-edge), 0 10px 24px -10px #000; }
html.is-dark .os-totop { background: #122849; box-shadow: inset 0 0 0 1px rgba(226, 236, 250, .12), 0 16px 34px -14px #000; }
html.is-dark .os-totop:hover { background: var(--blue-700); }
html.is-dark .os-skip { background: #122849; }

/* Buttons and copy */
html.is-dark .os-btn--ghost { background: rgba(255, 255, 255, .06); }
html.is-dark .os-btn--ghost:hover { color: #0B2549; }
html.is-dark .os-copy:hover:not(.is-copied) { color: #0B2549; }

/* Accent words */
html.is-dark .os-h2 em {
  background: linear-gradient(100deg, #F6DC9C 0%, #E0B457 35%, #FFF1CC 50%, #E0B457 65%, #B98428 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: os-sheen 6s var(--ease-io) infinite;
}
html.is-dark .os-about .os-h2 em { animation: none; } /* calm motion on this section */
html.is-dark .os-eyebrow--blue { color: var(--sky-300); }

/* Hero: a night sky around the globe */
html.is-dark .os-hero {
  background:
    radial-gradient(1000px 700px at 78% 30%, rgba(47, 120, 200, .36) 0%, rgba(47, 120, 200, 0) 62%),
    radial-gradient(760px 520px at 8% 0%, rgba(142, 187, 233, .13) 0%, rgba(142, 187, 233, 0) 60%),
    linear-gradient(180deg, #081430 0%, #050C1D 100%);
}
html.is-dark .os-hero__bg {
  background-image:
    radial-gradient(1.3px 1.3px at 12% 18%, rgba(255, 255, 255, .75), transparent),
    radial-gradient(1px 1px at 32% 72%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.4px 1.4px at 58% 12%, rgba(207, 226, 247, .7), transparent),
    radial-gradient(1px 1px at 76% 46%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 90% 84%, rgba(243, 223, 174, .75), transparent),
    radial-gradient(1px 1px at 46% 92%, rgba(255, 255, 255, .5), transparent);
  background-size: 420px 420px;
}
html.is-dark .os-hero__bg::before { background-image: radial-gradient(rgba(142, 187, 233, .24) 1px, transparent 1.4px); }
html.is-dark .os-hero__bg::after { background: radial-gradient(circle, rgba(47, 120, 200, .3), rgba(47, 120, 200, 0) 62%); }
html.is-dark .os-hero__t1 { background-image: linear-gradient(100deg, #FFFFFF 0%, #DCE9F9 38%, #F6DC9C 50%, #DCE9F9 62%, #FFFFFF 100%); }
html.is-dark .os-hero__hl { color: var(--sky-300); }
html.is-dark .os-meta__icon { box-shadow: 0 0 0 4px #081430, 0 0 0 5.5px rgba(224, 180, 87, .6), 0 16px 30px -12px #000; }
html.is-dark .os-meta__text { border-left-color: rgba(226, 236, 250, .2); }
html.is-dark .os-meta__small { color: var(--sky-300); }
html.is-dark .os-hero__logos { background: #fff; box-shadow: 0 0 0 1px var(--dk-gold-edge), 0 0 0 6px rgba(255, 255, 255, .04), 0 26px 50px -24px #000; }
html.is-dark .os-hero__logos-rule { background: rgba(11, 37, 73, .2); }
html.is-dark .os-hero__halo { background: radial-gradient(circle, rgba(70, 140, 220, .42) 0%, rgba(47, 120, 200, .2) 45%, rgba(47, 120, 200, 0) 72%); }
html.is-dark .os-orbit--1 { border-color: rgba(142, 187, 233, .3); }
html.is-dark .os-orbit--2 { border-color: rgba(142, 187, 233, .13); }
html.is-dark .os-badge { box-shadow: 0 0 0 5px rgba(8, 20, 48, .9), 0 0 0 6.5px rgba(224, 180, 87, .42), 0 20px 40px -14px #000; }

/* Swoosh bands: ribbons of colour on midnight */
html.is-dark .os-swoosh path[fill="#FFFFFF"] { fill: #050C1D; }
html.is-dark .os-swoosh--flip path[fill="#FFFFFF"] { fill: var(--ice); }
html.is-dark #g-navy stop:first-child { stop-color: #235AA3; }
html.is-dark #g-navy stop:last-child { stop-color: #123561; }

/* Welcome */
html.is-dark .os-seal__ring text { fill: var(--gold-200); }
html.is-dark .os-seal::before { background: radial-gradient(circle at 35% 30%, #1A3768, #0A1630 72%); box-shadow: 0 0 0 1px var(--dk-gold-edge), 0 24px 50px -24px #000; }
html.is-dark [data-lit] .lw { color: rgba(226, 236, 250, .2); }
html.is-dark [data-lit] .lw.on { color: #F6F9FE; }
html.is-dark .os-letter__goal::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23E0B457' fill-opacity='.34' d='M0 40V24C0 10.7 6.3 2.7 19 0l2.4 5.2C14.6 7.4 11.3 11.6 11.1 18H20v22H0zm28 0V24C28 10.7 34.3 2.7 47 0l1 5.2C42.6 7.4 39.3 11.6 39.1 18H48v22H28z'/%3E%3C/svg%3E"); }
html.is-dark .os-letter__goal-v { background-image: linear-gradient(transparent 91%, #E0B457 91%, #E0B457 96%, transparent 96%); } /* a fine gold rule: a tinted band goes muddy on navy */
html.is-dark .os-sign { background: var(--dk-card); box-shadow: inset 0 0 0 1px var(--dk-edge), 0 30px 60px -40px #000; }
html.is-dark .os-sign:hover { box-shadow: inset 0 0 0 1px var(--dk-gold-edge), 0 30px 60px -32px #000; }
html.is-dark .os-sign__logo { box-sizing: content-box; align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: #fff; }
html.is-dark .os-sign__photo { box-shadow: 0 0 0 3px #0E2042, 0 0 0 4px rgba(224, 180, 87, .75), 0 12px 24px -12px #000; }

/* Learning Objectives */
html.is-dark .os-about { background: linear-gradient(180deg, var(--paper) 0%, #0B1833 24%, #0B1833 76%, var(--paper) 100%); } /* melts into the bands either side */
html.is-dark .os-about__bg {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(47, 120, 200, .2), rgba(47, 120, 200, 0) 70%),
    radial-gradient(720px 380px at 8% 100%, rgba(47, 120, 200, .16), rgba(47, 120, 200, 0) 65%);
}
html.is-dark .os-about__bg::before { background-image: radial-gradient(rgba(142, 187, 233, .16) 1px, transparent 1.5px); }
html.is-dark .os-pillar { background: var(--dk-card); box-shadow: inset 0 0 0 1px var(--dk-edge), 0 30px 60px -38px #000; }
html.is-dark .os-pillar:hover { box-shadow: inset 0 0 0 1.5px var(--dk-gold-edge), 0 30px 60px -38px #000; }
html.is-dark .os-pillar::before { background: #0A1630; }
html.is-dark .os-pillar--navy { --tile: linear-gradient(140deg, #2C619F, #143A70); --tile-shadow: rgba(0, 0, 0, .8); }
html.is-dark .os-pillar--blue { --tile-shadow: rgba(0, 0, 0, .8); }
html.is-dark .os-pillar__num { opacity: .55; }

/* Who Should Attend */
html.is-dark .os-attend { background: radial-gradient(800px 500px at 100% 30%, rgba(47, 120, 200, .16), rgba(47, 120, 200, 0) 60%), var(--ice); }
html.is-dark .os-marquee .f { background-image: linear-gradient(100deg, #FFFFFF, #BCD4F0 60%, #FFFFFF); }
html.is-dark .os-marquee .o { background-image: linear-gradient(180deg, #24406E, #142A50); }
html.is-dark .os-hubpanel { box-shadow: 0 60px 110px -60px #000; }
html.is-dark .os-hubpanel::after,
html.is-dark .os-footer::after { /* a fine gold edge lifts the panels off the midnight page */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
html.is-dark .os-hubpanel::after { box-shadow: inset 0 0 0 1px rgba(243, 223, 174, .16); }
html.is-dark .os-footer::after { box-shadow: inset 0 1px 0 rgba(243, 223, 174, .24); }

/* Registration: all-blue aurora (the bronze blob goes muddy on the deeper page) */
html.is-dark .os-blob--2 { background: radial-gradient(circle, #1E63B0, transparent 70%); }

/* Partners: real logo colours on white plates, framed in glass */
html.is-dark .os-logo-card { background: var(--dk-card); box-shadow: inset 0 0 0 1px var(--dk-edge); }
html.is-dark .os-logo-card:hover { box-shadow: inset 0 0 0 1px var(--dk-gold-edge), 0 30px 60px -36px #000; }
html.is-dark .os-logo-card::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(142, 187, 233, .16), transparent 60%); }
html.is-dark .os-logo-card img { box-sizing: content-box; padding: 16px 24px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -22px #000; }
html.is-dark .os-slot--logo { background: linear-gradient(165deg, #FFFFFF, #EDF2FA); box-shadow: 0 0 0 5px rgba(255, 255, 255, .04), 0 20px 40px -26px #000; }
html.is-dark .os-slot--logo:hover { box-shadow: 0 0 0 1.5px rgba(224, 180, 87, .85), 0 0 0 6px rgba(224, 180, 87, .08), 0 20px 40px -26px #000; }
html.is-dark .os-sponsor-cta { background: var(--dk-card); box-shadow: inset 0 0 0 1px var(--dk-edge); }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-rv], .js [data-rv="lines"] .os-line > span, .js [data-rv="words"] .w > span, .js [data-rv="rise"] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .os-eyebrow[data-rv]::before, .js .os-eyebrow--both[data-rv]::after { transform: none !important; }
  .os-marquee__track { animation: none; }
  .os-letter__goal-v { background-size: 100% 100% !important; }
}