:root{color-scheme:dark;font-family:Geist,system-ui,sans-serif;background:#0a1022;color:#f5f6ff;--muted:#c2c8db;--border:#414b69;--gold:#ffdc9d}*{box-sizing:border-box}body{margin:0}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.wrap{width:min(100% - 32px,1160px);margin-inline:auto}header,nav,footer,.actions,.brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}header{justify-content:space-between;padding-block:16px}.brand{text-decoration:none;font-size:1.25rem;font-weight:600}.brand img{border-radius:8px}.brand small{display:block;font-size:.75rem;color:var(--muted)}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.skip{position:absolute;left:16px;top:-100px}.skip:focus{top:16px;z-index:5}.film{position:relative}.film.scrub{height:220svh}.stage{position:relative;isolation:isolate;min-height:640px;display:grid;align-items:center;background:#101a34;overflow:hidden}.scrub .stage{position:sticky;top:0;min-height:min(780px,100svh)}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.stage::after{content:"";position:absolute;inset:0;background:#070d20a8;z-index:-1}video.backdrop{opacity:0}.scrub video.backdrop{opacity:1}.hero{padding-block:48px}.eyebrow{color:var(--gold);font-size:.875rem;font-weight:600;letter-spacing:.06em}h1,h2,h3,p{margin:0 0 16px;text-wrap:pretty}h1{font-size:3.75rem;line-height:1;font-weight:600;letter-spacing:-.05em}h2{font-size:3rem;line-height:1;font-weight:600;letter-spacing:-.035em}h3{font-size:1.25rem}p,li{line-height:1.5;color:var(--muted)}.hero p:not(.eyebrow){font-size:1.25rem;color:#fff}.actions{margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--gold);color:#151323;border:1px solid transparent;border-radius:8px;padding:8px 12px;line-height:1.5;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s cubic-bezier(.22,1,.36,1)}.button:hover{background:#fff0c9}.button:active{transform:scale(.98)}.secondary{background:#181d38dc;color:white;border-color:var(--border)}.secondary:hover{background:#293355}.section{padding-block:64px;border-bottom:1px solid var(--border)}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:center}.statement{padding-block:48px}.statement p{font-size:2.25rem;line-height:2.5rem;color:var(--gold);font-weight:600}.preview,form,figure{border:1px solid var(--border);border-radius:16px;background:#151e38;padding:24px;margin:0}.preview p{display:flex;justify-content:space-between;gap:8px}.preview span,figcaption{color:var(--gold);font-size:.875rem}figure img{display:block;width:100%;height:auto;border-radius:8px}figcaption{padding-top:8px}details{border-bottom:1px solid var(--border);padding-block:16px}summary{cursor:pointer;font-weight:600}details p{margin-top:12px;margin-bottom:0}form{align-self:stretch}form h2{font-size:1.875rem;line-height:2.25rem}label{display:block;margin-bottom:16px}input{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid var(--border);border-radius:8px;background:#0a1022;color:white;font:inherit}footer{padding-block:32px;justify-content:space-between;color:var(--muted)}@media(max-width:700px){.split{grid-template-columns:1fr}.section{padding-block:40px}h1,h2{font-size:2.25rem;line-height:2.5rem}.stage{min-height:480px}.statement p{font-size:1.875rem;line-height:2.25rem}}@media(prefers-reduced-motion:reduce){.button{transition:none}.film.scrub{height:auto}.scrub video.backdrop{display:none}}

.film-caption {
  position: absolute;
  inset: auto max(16px, calc((100vw - 1160px) / 2)) 32px;
  width: fit-content;
  max-width: min(420px, calc(100% - 32px));
  padding: 16px 20px;
  border: 1px solid #8195bf6e;
  border-radius: 16px;
  background: #0a1022df;
  backdrop-filter: blur(14px);
}
.film-caption p { margin: 0; color: white }
.film-caption .eyebrow { margin-bottom: 6px; color: var(--gold) }
.film-line { font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 600 }
.film.has-chapter .hero { align-self: start; padding-top: 28px }
.film.has-chapter .hero h1, .film.has-chapter .hero > p { display: none }
.film.has-chapter .hero .actions { margin-top: 0 }
.film.has-chapter .stage::after {
  background: linear-gradient(180deg, #070d209c, transparent 35%, transparent 58%, #070d20c4);
}
.journey-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 38px;
  padding-inline-start: 24px;
}
.journey-steps strong { color: white }
@media (max-width: 700px) {
  .journey-steps { grid-template-columns: 1fr }
  .film-caption { bottom: 22px }
  .film.has-chapter video.backdrop { object-fit: contain }
}

header.wrap { gap: 12px 28px; padding-block: 10px }
header .brand { gap: 12px }
header .brand img { width: clamp(58px, 7vw, 86px); height: auto; border-radius: 20% }
header nav { gap: clamp(12px, 4vw, 32px) }
.hero { padding-block: 32px }
.hero-mark {
  display: block;
  width: clamp(120px, 15vw, 190px);
  height: auto;
  border-radius: 20%;
  box-shadow: 0 0 48px #259aff3a;
  margin-bottom: 22px;
}
.film.has-chapter .hero-mark { display: none }
.film.has-chapter .hero h1 { display: block; position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden }
#journey {
  padding-block: clamp(48px, 8vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 7vw, 100px);
}
#journey h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.25rem, 6vw, 4.5rem) }
.journey-steps { display: block; margin: 0; padding-inline-start: 30px }
.journey-steps li { padding: 14px 0 14px 10px; border-bottom: 1px solid var(--border) }
.journey-steps li::marker { color: var(--gold); font-weight: 600 }
.journey-steps strong { display: block }
@media (max-width: 700px) {
  #journey { grid-template-columns: 1fr }
  .film.has-chapter .hero .actions { gap: 8px }
  .film.has-chapter .hero .button { font-size: .875rem }
}

body.film-active { isolation: isolate }
.film-active .film.scrub { height: 120svh }
.film-active .scrub .stage {
  position: relative;
  isolation: auto;
  overflow: visible;
  min-height: 100%;
  background: transparent;
}
.film-active .stage::after {
  position: fixed;
  background: linear-gradient(90deg, #070d20db, #070d2082 65%, #070d2059);
}
.film-active .stage > .backdrop { position: fixed }
.film-active .stage > img.backdrop { display: none }
.film-active header, .film-active footer, .film-active .section {
  background: #0a1022e6;
  box-shadow: 0 16px 64px #050a1766;
}
.film-active header, .film-active footer { padding-inline: 18px }
.film-active .section {
  padding-inline: clamp(18px, 5vw, 68px);
  margin-bottom: clamp(18px, 15svh, 160px);
  border-radius: 18px;
  border: 1px solid var(--border);
}
.film-active .hero { align-self: center }
.film-active .film-caption { bottom: 32px }
.film-active .film.has-chapter .hero { align-self: center }
.film-active .film.has-chapter .hero-mark { display: block }
.film-active .film.has-chapter .hero h1 {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
}
.film-active .film.has-chapter .hero > p { display: block }
.film-active .film.has-chapter video.backdrop { object-fit: cover }
@media (max-width: 700px) {
  .film-active .film.scrub { height: max(120svh, 620px) }
  .film-active .film-caption { bottom: 12px }
}

/* Reserve the centre of the final frame for the original logo. */
.film-active.film-end .stage::after { background: #070d2033 }
.film-active.film-end .film-caption { display: none }
.film-active footer { margin-top: 90svh }

.film-active.film-end .film.has-chapter video.backdrop { object-fit: contain; background: #06132e }