@font-face {
  font-family: Space;
  src: url("./assets/spacegrotesk.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 700;
}

:root {
  color-scheme: dark;
  --ink: #f4f9ff;
  --muted: #becadc;
  --green: #64ffac;
  --event: #cf9cff;
  --special: #ffb774;
  --pulse: #75caff;
  --night: #060e1b;
  --header-height: 74px;
  --gutter: clamp(1.2rem,5.5vw,6rem);
  font-family: Space,system-ui,sans-serif;
  background: var(--night);
  color: var(--ink);
}

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

body {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,input,select {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 5px;
}

.skip {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9;
  transform: translateY(-200%);
  background: var(--night);
  padding: 1rem;
}

.skip:focus {
  transform: none;
}

.header {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
  min-height: var(--header-height);
  padding: .7rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(180deg,#050d1beF,#050d1bc0 72%,#050d1b00);
  padding-bottom: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

.feature-business { --feature-color: var(--green); }
.feature-events { --feature-color: var(--event); }
.feature-specials { --feature-color: var(--special); }
.feature-pulse { --feature-color: var(--pulse); }
.feature-business,.feature-events,.feature-specials,.feature-pulse { color: var(--feature-color); }

.preferences:not([hidden]) {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
}

.preferences select {
  min-height: 2.2rem;
  border: 1px solid #52687e;
  border-radius: .55rem;
  padding: .35rem .43rem;
  background: #0c1a2b;
  color: var(--ink);
  font-size: .77rem;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.header-cta {
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid #65ffaa78;
  border-radius: 99px;
  padding: .7rem 1rem;
  background: #0d2926;
  color: #ddffed;
  white-space: nowrap;
}

.header-cta:hover {
  border-color: var(--green);
  background: #164636;
}

.story {
  position: relative;
  --accent: var(--green);
  isolation: isolate;
}

.stage {
  height: 100svh;
  position: sticky;
  top: 0;
  margin-bottom: -100svh;
  overflow: hidden;
  background: #060f1d;
  z-index: -1;
}

.sky,.shade,#world,.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sky {
  background: #081526 url("./assets/horizon.webp") center 47% / cover no-repeat;
}

#world {
  display: block;
  opacity: 0;
}

.ready #world {
  opacity: 1;
  transition: opacity .5s;
}

.shade {
  background: linear-gradient(90deg,#050d1bed 1%,#050d1bd5 19%,#050d1b53 43%,transparent 65%),linear-gradient(0deg,#060e1b 0%,transparent 24%,transparent 80%,#060e1b70);
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #050e1c;
  opacity: calc(var(--final-blend,0) * .28);
}

.frame {
  inset: calc(var(--header-height) + .85rem) var(--gutter) 5.05rem;
  width: auto;
  height: auto;
  opacity: .44;
}

.frame span {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid #9cacbb;
}

.frame span:nth-child(1) {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.frame span:nth-child(2) {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.frame span:nth-child(3) {
  bottom: 0;
  left: 0;
  border-top: none;
  border-right: none;
}

.frame span:nth-child(4) {
  bottom: 0;
  right: 0;
  border-top: none;
  border-left: none;
}

.scene-caption,.view-index {
  position: absolute;
  top: 6rem;
  color: #bdcadb;
  text-transform: uppercase;
  font-size: .67rem;
  letter-spacing: .16em;
}

.scene-caption {
  top: calc(var(--header-height) + 1.4rem);
  right: calc(var(--gutter) + .7rem);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.view-index {
  right: calc(var(--gutter) + .7rem);
  top: auto;
  bottom: 5.65rem;
}

.view-index span:first-child {
  color: var(--accent);
}

.chapter {
  min-height: 100svh;
  position: relative;
  --accent: var(--green);
}

.events {
  --accent: var(--event);
}

.specials {
  --accent: var(--special);
}

.pulse {
  --accent: var(--pulse);
}

.chapter-inner {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 6rem var(--gutter) 6rem;
  position: relative;
}

.copy {
  width: min(100%,31rem);
  padding-left: clamp(0rem,1vw,1.2rem);
}

.kicker {
  text-transform: uppercase;
  color: var(--accent,var(--green));
  font-weight: 700;
  letter-spacing: .17em;
  font-size: .7rem;
  margin: 0 0 1.3rem;
}

h1,h2,p {
  margin: 0;
}

h1,h2 {
  font-weight: 700;
  letter-spacing: -.078em;
  line-height: .98;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.7rem,6.8vw,8rem);
  text-wrap: nowrap;
}

h2 {
  font-size: clamp(3rem,5.4vw,6.1rem);
}

em {
  font-style: normal;
  color: var(--accent,var(--green));
}

.copy p,.interest p {
  font-size: clamp(.99rem,1.35vw,1.18rem);
  color: var(--muted);
  line-height: 1.55;
  max-width: 33ch;
  margin-top: 1.25rem;
}

.copy .tagline {
  font-size: clamp(1.15rem,2vw,1.56rem);
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.45rem;
}

.tagline+p {
  margin-top: .55rem;
}

.journey {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.6rem;
  font-size: .81rem;
  font-weight: 700;
  letter-spacing: .015em;
}

.journey > [aria-hidden] {
  display: grid;
  place-items: center;
  border: 1px solid #64ffac72;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--green);
  background: #0d2925;
}

.journey:hover > [aria-hidden] {
  background: #17523e;
}

.chapter-note {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
  color: #d4e0ed;
  font-size: .76rem;
  letter-spacing: .075em;
}

.chapter-note i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.ready .chapter {
  min-height: 130svh;
}

.ready .chapter-inner {
  position: sticky;
  top: 0;
}

.ready .finale {
  min-height: 250svh;
}

.ready .copy {
  opacity: var(--copy-opacity,1);
  transform: translateY(var(--copy-shift,0));
  transition: opacity .15s linear,transform .15s linear;
}

.copy:focus-within {
  opacity: 1!important;
  transform: none!important;
}

.story-nav {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  gap: .32rem;
  padding: .3rem;
  border: 1px solid #7da2bb35;
  border-radius: 99px;
  background: #071221ef;
}

.story-nav a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .7rem;
  border-radius: 99px;
  font-size: .7rem;
  color: var(--feature-color,var(--muted));
  white-space: nowrap;
}

.story-nav a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: currentColor;
  flex: none;
}

.story-nav a[aria-current],.story-nav a:hover {
  color: var(--feature-color,var(--green));
  background: #1b2a3a;
}

.interest {
  scroll-margin-top: var(--header-height);
  border-top: 1px solid #345368;
  position: relative;
  background: radial-gradient(ellipse at 17% 25%,#12342c 0%,#0b1a28 45%,#07111e 86%);
  padding: clamp(4rem,9vw,8rem) var(--gutter);
}

.interest-inner {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,6vw,6rem);
  align-items: center;
}

.interest h2 {
  font-size: clamp(2.85rem,5.2vw,5.35rem);
}

.interest p {
  max-width: 37ch;
}

.interest-form {
  padding: clamp(1.15rem,3vw,2rem);
  border: 1px solid #354e60;
  border-radius: 1.2rem;
  background: #091624;
}

fieldset {
  padding: 0;
  border: 0;
  margin: 0 0 1rem;
  min-width: 0;
}

legend {
  font-weight: 700;
  margin-bottom: .8rem;
}

legend span {
  font-weight: 400;
  color: var(--muted);
  font-size: .81rem;
}

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.choices label {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #3a4f62;
  border-radius: .55rem;
  padding: .65rem .6rem;
  font-size: .85rem;
  cursor: pointer;
}

.choices label:has(:checked) {
  border-color: var(--choice);
  background: #182e3b;
}

.choices input {
  margin: 0;
  accent-color: var(--choice);
}

.interest-form button {
  width: 100%;
  cursor: pointer;
  border: 0;
  border-radius: .55rem;
  background: var(--green);
  color: #052217;
  font-weight: 700;
  padding: .8rem 1rem;
}

.interest-form button:disabled {
  cursor: default;
  background: #1a4d3b;
  color: #edfff6;
}

.interest-form .privacy,.interest-form .form-status {
  font-size: .8rem;
  max-width: none;
  margin-top: .7rem;
}

.form-status {
  color: #a3ffca!important;
}

.form-status:empty {
  display: none;
}

footer {
  position: relative;
  padding: 1.2rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid #24394a;
  color: var(--muted);
  font-size: .77rem;
}

footer>a:last-child {
  margin-left: auto;
  color: var(--green);
}

.static .stage {
  display: none;
}

.static .chapter {
  min-height: 0;
  background: linear-gradient(90deg,#050e1cf0 0%,#050e1ca6 45%,#050e1c25),var(--still,url("./assets/horizon.webp")) center / cover;
  border-bottom: 1px solid #20344a;
}

.intro {
  --still: url("./assets/wide-intro.webp");
}

.businesses {
  --still: url("./assets/wide-businesses.webp");
}

.events {
  --still: url("./assets/wide-events.webp");
}

.specials {
  --still: url("./assets/wide-specials.webp");
}

.pulse {
  --still: url("./assets/wide-pulse.webp");
}

.finale {
  --still: url("./assets/wide-finale.webp");
}

:lang(af) .intro { --still: url("./assets/wide-af-intro.webp"); }
:lang(af) .businesses { --still: url("./assets/wide-af-businesses.webp"); }
:lang(af) .events { --still: url("./assets/wide-af-events.webp"); }
:lang(af) .specials { --still: url("./assets/wide-af-specials.webp"); }
:lang(af) .pulse { --still: url("./assets/wide-af-pulse.webp"); }
:lang(af) .finale { --still: url("./assets/wide-af-finale.webp"); }

.static .chapter:not(.intro) {
  content-visibility: auto;
  contain-intrinsic-size: auto 100svh;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #142639;
  --muted: #354c61;
  --green: #006740;
  --event: #6934a0;
  --special: #9c410b;
  --pulse: #035d97;
  --night: #edf5f9;
}

[data-theme="light"] .brand img { content: url("./assets/brand-light.webp"); }
[data-theme="light"] .header { background: linear-gradient(#f7fbfd 68%,#f7fbfdd9 85%,#f7fbfd00); }
[data-theme="light"] .preferences select { background: #f7fbfd; border-color: #849bad; }
[data-theme="light"] .header-cta,
[data-theme="light"] .journey > [aria-hidden] { background: #e1f4e9; border-color: #649781; color: #005532; }
[data-theme="light"] .header-cta:hover,
[data-theme="light"] .journey:hover > [aria-hidden] { background: #cdebd9; }
[data-theme="light"] .stage { background: #dbeef8; }
[data-theme="light"] .sky {
  background: linear-gradient(180deg,#b5d9ee 0%,#e4f1f7 57%,#b3cbdc 82%,#dbe9f1 100%);
}
[data-theme="light"] .sky::after {
  background: radial-gradient(ellipse at 68% 48%,#fafffb,#b8d1e2);
  opacity: var(--final-blend,0);
}
[data-theme="light"] .shade {
  background: linear-gradient(90deg,#f5fafdfc 4%,#f5fafdf0 25%,#f5fafdce 36%,#f5fafd38 48%,transparent 63%),
    linear-gradient(0deg,#edf5f9 0%,transparent 23%,transparent 80%,#edf5f982);
}
[data-theme="light"] .frame span { border-color: #49697f; }
[data-theme="light"] .scene-caption,
[data-theme="light"] .view-index {
  color: #2e4a60;
  background: #f4f9fce8;
  padding: .24rem .4rem;
  border-radius: .25rem;
}
[data-theme="light"] .chapter-note { color: var(--muted); }
[data-theme="light"] .story-nav { background: #f4f9fcf5; border-color: #9bb1c2; }
[data-theme="light"] .story-nav a[aria-current],
[data-theme="light"] .story-nav a:hover { background: #e0ebf3; }
[data-theme="light"] .interest { background: radial-gradient(ellipse at 17% 25%,#e0f4e9,#e8f1f8 65%,#f4f8fc); border-color: #a0b6c7; }
[data-theme="light"] .interest-form { background: #f9fcff; border-color: #9bb1c2; }
[data-theme="light"] .choices label { border-color: #9bb1c2; }
[data-theme="light"] .choices label:has(:checked) { background: #e8f1f7; }
[data-theme="light"] .interest-form button { color: #fff; }
[data-theme="light"] .interest-form button:disabled { background: #e0eee7; color: #174730; }
[data-theme="light"] .form-status { color: var(--green) !important; }
[data-theme="light"] footer { border-color: #a0b6c7; }
[data-theme="light"] .static .chapter {
  background-image: linear-gradient(90deg,#f5fafdfc 6%,#f5fafdf5 25%,#f5fafdce 41%,#e0edf48a 65%),var(--still);
  border-color: #b6cad8;
}
@media(max-width:1400px) {
  :root { --header-height: 124px; }
  .header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: .32rem .7rem;
    padding-block: .48rem .62rem;
  }
  .preferences:not([hidden]) { grid-column: 2; }
  .header-cta { grid-column: 3; }
  .story-nav {
    position: static;
    translate: none;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: calc(100vw - .75rem);
    flex-wrap: wrap;
    justify-content: center;
  }
  .chapter-inner { padding-top: calc(var(--header-height) + .5rem); }
}

@media(max-width:850px) {
  .header .brand {
    width: 140px;
  }
  .copy {
    width: min(43vw,30rem);
  }
  h1 {
    font-size: clamp(3.3rem,7.3vw,5.7rem);
  }
}

@media(max-width:650px),(max-aspect-ratio:82/100) {
  .intro {
    --still: url("./assets/narrow-intro.webp");
  }
  .businesses {
    --still: url("./assets/narrow-businesses.webp");
  }
  .events {
    --still: url("./assets/narrow-events.webp");
  }
  .specials {
    --still: url("./assets/narrow-specials.webp");
  }
  .pulse {
    --still: url("./assets/narrow-pulse.webp");
  }
  .finale {
    --still: url("./assets/narrow-finale.webp");
  }
  :lang(af) .intro { --still: url("./assets/narrow-af-intro.webp"); }
  :lang(af) .businesses { --still: url("./assets/narrow-af-businesses.webp"); }
  :lang(af) .events { --still: url("./assets/narrow-af-events.webp"); }
  :lang(af) .specials { --still: url("./assets/narrow-af-specials.webp"); }
  :lang(af) .pulse { --still: url("./assets/narrow-af-pulse.webp"); }
  :lang(af) .finale { --still: url("./assets/narrow-af-finale.webp"); }
  .header .brand {
    width: 128px;
  }
  .header-cta {
    font-size: .75rem;
    padding: .57rem .72rem;
  }
  .frame {
    bottom: 4.55rem;
  }
  .scene-caption {
    font-size: .56rem;
  }
  .view-index {
    bottom: 5rem;
    font-size: .58rem;
  }
  .shade {
    background: linear-gradient(180deg,#060e1b42 32%,#060e1ba0 53%,#060e1bf8 91%),linear-gradient(90deg,#060e1b30,transparent 55%);
  }
  .chapter-inner {
    align-items: flex-end;
    padding-bottom: clamp(6.6rem,16svh,9rem);
  }
  .copy {
    width: 100%;
    padding-left: 0;
  }
  h1 {
    font-size: clamp(2.9rem,11vw,4.45rem);
  }
  h2 {
    font-size: clamp(2.5rem,9.6vw,4rem);
    text-wrap: unset;
  }
  .copy .tagline {
    margin-top: .65rem;
  }
  .copy p {
    margin-top: .65rem;
    line-height: 1.37;
  }
  .kicker {
    font-size: .62rem;
    margin-bottom: .75rem;
  }
  .chapter-note,.journey {
    margin-top: .85rem;
  }
  .journey > [aria-hidden] {
    width: 1.65rem;
    height: 1.65rem;
  }
  .story-nav {
    gap: 0;
    padding: .23rem;
  }
  .story-nav a {
    font-size: clamp(.57rem,2.28vw,.72rem);
    padding: .48rem clamp(.24rem,1.2vw,.57rem);
    gap: .2rem;
  }
  .story-nav a::before {
    display: none;
  }
  .interest-inner {
    grid-template-columns: 1fr;
  }
  .static .chapter {
    background-position: 60% top;
    background-image: linear-gradient(0deg,#050e1c 0%,#050e1cab 46%,#050e1c12 80%),var(--still,url("./assets/horizon.webp"));
  }
  [data-theme="light"] .shade {
    background: linear-gradient(180deg,#edf5f949 30%,#edf5f9a9 43%,#edf5f9f8 59%,#edf5f9 85%);
  }
  [data-theme="light"] .static .chapter {
    background-image: linear-gradient(0deg,#edf5f9 13%,#edf5f9ed 47%,#edf5f94f 80%),var(--still);
  }
}

@media(max-width:540px) {
  :root { --header-height: 128px; }
  .header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .28rem .55rem;
    padding: .48rem var(--gutter) .62rem;
  }
  .header .brand { width: 112px; grid-row: 1 / span 2; }
  .preferences:not([hidden]) { grid-column: 2; grid-row: 1; }
  .header-cta { grid-column: 2; grid-row: 2; justify-self: end; }
  .preferences select { min-height: 1.8rem; font-size: .73rem; }
  .story-nav { grid-row: 3; }
  .story-nav a { padding-inline: .33rem; }
}

@media(max-width:360px) {
  .story-nav a { padding-inline: .19rem; }
  footer { gap: .7rem; }
}

@media(max-height:620px) and (max-width:650px) {
  .chapter-inner {
    padding-bottom: 4.6rem;
  }
  .copy h1,.copy h2 {
    font-size: clamp(2rem,9vw,3.1rem);
  }
  .frame,.scene-caption,.view-index {
    display: none;
  }
}

@media(orientation:landscape) and (max-height:500px) {
  :root { --header-height: 88px; }
  .header .brand { width: 112px; }
  .header-cta { padding-block: .42rem; }
  .story-nav { padding: .2rem; }
  .story-nav a { padding-block: .38rem; }
  .chapter-inner {
    align-items: center;
    padding-block: calc(var(--header-height) + .45rem) 1.7rem;
  }
  .copy { width: min(44vw,28rem); }
  .copy h1,.copy h2 { font-size: clamp(2.15rem,6.1vw,3.35rem); }
  .kicker { margin-bottom: .55rem; font-size: .62rem; }
  .copy p { margin-top: .6rem; font-size: .86rem; line-height: 1.33; }
  .copy .tagline { margin-top: .55rem; font-size: 1rem; }
  .journey,.chapter-note { margin-top: .55rem; }
  .journey > [aria-hidden] { width: 1.55rem; height: 1.55rem; }
  .frame,.scene-caption,.view-index { display: none; }
}

@media(orientation:landscape) and (max-height:360px) {
  :root { --header-height: 82px; }
  .header { padding-block: .3rem; gap: .2rem .7rem; }
  .header .brand { width: 96px; }
  .preferences select { min-height: 1.75rem; padding-block: .2rem; }
  .header-cta { padding-block: .3rem; }
  .story-nav a { min-height: 24px; padding-block: .25rem; }
  .chapter-inner { padding-bottom: .8rem; }
  .copy { width: min(52vw,28rem); }
  .copy h1,.copy h2 { font-size: clamp(1.85rem,5.5vw,2.6rem); }
  .copy p { margin-top: .42rem; font-size: .8rem; }
  .copy .tagline { margin-top: .42rem; font-size: .92rem; }
  .kicker { margin-bottom: .42rem; letter-spacing: .12em; }
  .journey,.chapter-note { margin-top: .42rem; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior: auto!important;
    transition: none!important;
  }
}