.hero,
.s1,
.s2,
.s3 {
  position: relative;
}

.hero {
  z-index: var(--z-hero);
}

.s1 {
  z-index: var(--z-s1);
}

.s2 {
  z-index: var(--z-s2);
}

.s3 {
  z-index: var(--z-s3);
}

.hero__stage,
.s1__stage,
.s3__stage {
  position: absolute;
  pointer-events: none;
}

.hero__gl,
.s1__gl,
.s3__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__fallback,
.s1__fallback,
.s3__fallback {
  position: absolute;
  inset: 0;
  transition: opacity 900ms var(--ease-in-out-quad);
}

.is-gl-ready > .hero__fallback,
.is-gl-ready > .s1__fallback,
.is-gl-ready > .s3__fallback {
  opacity: 0;
}

.hero__fallback img,
.s1__fallback img,
.s3__fallback img {
  position: absolute;
}

.hero__anchor {
  position: absolute;
  visibility: hidden;
}

.over {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: var(--z-over);
  pointer-events: none;
}

.over img {
  position: absolute;
  user-select: none;
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 580;
  text-transform: uppercase;
  color: #f5f5f3;
  text-shadow: 0 0.06em 0.1em rgba(0, 0, 0, 0.55), 0 0 0.45em rgba(255, 196, 120, 0.14);
  font-kerning: normal;
}

.hero__title-gold {
  display: block;
  color: #f6c945;
  filter: drop-shadow(0 0 0.16em rgba(254, 206, 84, 0.34)) drop-shadow(0 0.05em 0.05em rgba(40, 20, 0, 0.6));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-gold,
  .hero__title-gold .bz-w {
    background-image: linear-gradient(180deg, #fff3b0 calc(50% - 0.43em), #fee15c calc(50% - 0.3em), #fdd845 calc(50% - 0.05em), #f7c63e calc(50% + 0.16em), #e3a735 calc(50% + 0.26em), #c88e34 calc(50% + 0.31em));
    background-repeat: repeat-y;
    background-size: 100% 1lh;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero__title-gold:has(.bz-w) {
    background-image: none;
  }
}

.hero__divider {
  display: block;
  font-size: 0;
  line-height: 0;
  color: var(--gold-bright);
}

.hero__divider > svg,
.hero__divider > img {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: top;
  overflow: visible;
}

.feature__arrow > svg,
.feature__arrow > img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.u-nowrap {
  white-space: nowrap;
}

.hero__lead {
  font-family: var(--font-sans);
  font-weight: 400;
  color: #eaebed;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  text-wrap: pretty;
}

.feature {
  position: absolute;
}

.feature__shadow {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.feature__inner {
  position: relative;
}

.feature__index {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1;
}

.feature__num {
  display: block;
  color: var(--gold-text);
  filter: drop-shadow(0 0 0.14em rgba(255, 200, 80, 0.28)) drop-shadow(0 0.04em 0.04em rgba(0, 0, 0, 0.7));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .feature__num,
  .feature__num .bz-w {
    background-image: linear-gradient(180deg, #fff1b0 18%, #f8d766 42%, #eeba48 66%, #cf9336 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .feature__num:has(.bz-w) {
    background-image: none;
  }
}

.feature__rule {
  display: block;
  flex: none;
  background: linear-gradient(90deg, #e0af47 0%, #f6d266 40%, #efc55a 75%, #d39b3b 100%);
  box-shadow: 0 0 6px rgba(240, 190, 80, 0.22);
}

.feature__title {
  font-family: var(--font-serif);
  font-weight: 580;
  text-transform: uppercase;
  color: #f4f4f3;
  text-shadow: var(--t-shadow, 0 0.05em 0.1em rgba(0, 0, 0, 0.55));
  font-kerning: normal;
  text-wrap: balance;
}

.feature__body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: #e4e4e4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.feature__more {
  display: flex;
  align-items: center;
  width: max-content;
  color: var(--gold-text);
}

.feature__arrow {
  display: block;
  flex: none;
  aspect-ratio: 2 / 1;
  transition: transform var(--exit-ms) var(--ease-in-quad);
}

.feature__more:hover .feature__arrow,
.feature__more:focus-visible .feature__arrow {
  transform: translateX(6px);
  transition: transform var(--enter-ms) var(--ease-in-out-quad);
}

@media (prefers-reduced-motion: reduce) {
  .feature__arrow,
  .feature__more:hover .feature__arrow,
  .feature__more:focus-visible .feature__arrow {
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .hero {
    height: calc(1072 * var(--u));
  }

  .hero__stage {
    inset: 0;
    height: calc(1073 * var(--u));
  }

  .hero__fallback-moon,
  .hero__anchor--moon {
    left: calc(-4 * var(--u));
    top: calc(-10 * var(--u));
    width: calc(1453 * var(--u));
    height: calc(1083 * var(--u));
  }

  .hero__fallback-boat,
  .hero__anchor--boat {
    left: calc(375 * var(--u));
    top: calc(250 * var(--u));
    width: calc(860 * var(--u));
    height: calc(676 * var(--u));
  }

  .hero__fallback-splash,
  .hero__anchor--splash {
    left: calc(278 * var(--u));
    top: calc(648 * var(--u));
    width: calc(1030 * var(--u));
    height: calc(338 * var(--u));
  }

  .hero__content {
    position: absolute;
    left: calc(106.5 * var(--u));
    top: calc(429.5 * var(--u));
    width: calc(1333.5 * var(--u));
    pointer-events: none;
  }

  .hero__content::before {
    content: "";
    float: right;
    width: 100%;
    height: calc(450.5 * var(--u));
    shape-outside: polygon(100% 0%, 23.810% 0%, 23.885% 1.332%, 23.960% 2.664%, 24.034% 3.996%, 24.334% 5.327%, 24.709% 6.659%, 27.784% 7.991%, 27.784% 9.323%, 27.934% 10.655%, 27.784% 11.987%, 27.559% 13.319%, 27.409% 14.650%, 27.109% 15.982%, 26.809% 17.314%, 26.584% 18.646%, 26.359% 19.978%, 26.059% 21.310%, 25.759% 22.642%, 25.534% 23.973%, 25.309% 25.305%, 25.084% 26.637%, 24.934% 27.969%, 24.709% 29.301%, 24.559% 30.633%, 24.334% 31.964%, 24.184% 33.296%, 24.109% 34.628%, 23.960% 35.960%, 23.885% 37.292%, 23.810% 38.624%, 23.660% 39.956%, 23.585% 41.287%, 23.510% 42.619%, 23.435% 43.951%, 23.435% 45.283%, 23.435% 46.615%, 23.360% 47.947%, 23.360% 49.279%, 23.360% 50.610%, 23.360% 51.942%, 23.360% 53.274%, 23.360% 54.606%, 23.360% 55.938%, 23.360% 57.270%, 23.360% 58.602%, 23.360% 59.933%, 19.760% 61.265%, 19.760% 62.597%, 19.760% 63.929%, 19.760% 65.261%, 19.760% 66.593%, 19.310% 67.925%, 19.310% 69.256%, 19.310% 70.588%, 19.310% 71.920%, 19.310% 73.252%, 19.310% 74.584%, 19.310% 75.916%, 17.735% 77.248%, 17.735% 78.579%, 15.261% 79.911%, 15.261% 81.243%, 15.261% 82.575%, 15.261% 83.907%, 15.261% 85.239%, 13.461% 86.570%, 13.311% 87.902%, 13.311% 89.234%, 13.311% 90.566%, 13.311% 91.898%, 13.311% 93.230%, 13.311% 94.562%, 12.711% 95.893%, 12.561% 97.225%, 11.661% 98.557%, 11.661% 99.889%, 11.661% 100%, 100% 100%);
    pointer-events: none;
  }

  .hero__title {
    max-width: calc(372 * var(--u));
    font-size: calc(39.3 * var(--u));
    line-height: calc(41.5 * var(--u));
    letter-spacing: calc(1.3 * var(--u));
    pointer-events: auto;
  }

  .hero__divider {
    width: calc(157 * var(--u));
    height: calc(13 * var(--u));
    margin: calc(6.5 * var(--u)) 0 0 calc(1.5 * var(--u));
  }

  .hero__lead {
    max-width: calc(296 * var(--u));
    margin: calc(7.6 * var(--u)) 0 0 calc(2.5 * var(--u));
    font-size: max(14px, calc(18.4 * var(--u)));
    line-height: 1.141;
    letter-spacing: calc(-0.1 * var(--u));
    pointer-events: auto;
  }

  .s1 {
    height: calc(1328 * var(--u));
  }

  .s1__stage {
    left: calc(-1 * var(--u));
    top: 0;
    width: calc(1445 * var(--u));
    height: calc(1445 * var(--u));
  }

  .s1__fallback img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .s2 {
    height: calc(475 * var(--u));
  }

  .s3 {
    height: calc(1487 * var(--u));
  }

  .s3__stage {
    left: 0;
    top: 0;
    width: calc(1440 * var(--u));
    height: calc(1486 * var(--u));
  }

  .s3__sticky {
    position: absolute;
    inset: 0;
  }

  .s3__fallback img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .feature {
    left: calc(var(--fx) * var(--u));
    top: calc(var(--fy) * var(--u));
    width: calc(var(--fw) * var(--u));
  }

  .feature__shadow {
    left: calc(var(--sx) * var(--u));
    top: calc(var(--sy) * var(--u));
    width: calc(var(--sw) * var(--u));
    height: calc(var(--sh) * var(--u));
    opacity: var(--so);
  }

  .feature__index {
    height: calc(var(--n-size) * var(--u));
    font-size: calc(var(--n-size) * var(--u));
    letter-spacing: calc(var(--n-ls) * var(--u));
  }

  .feature__num {
    margin-left: calc(var(--n-dx) * var(--u));
    line-height: 1;
  }

  .feature__rule {
    position: absolute;
    left: calc(var(--r-x) * var(--u));
    top: calc(var(--r-y) * var(--u));
    width: calc(var(--r-w) * var(--u));
    height: calc(1.5 * var(--u));
  }

  .feature__title {
    max-width: calc(var(--t-w) * var(--u));
    margin-top: calc(var(--t-mt) * var(--u));
    font-size: calc(var(--t-size) * var(--u));
    line-height: calc(var(--t-lh) * var(--u));
    letter-spacing: calc(var(--t-ls) * var(--u));
    color: var(--t-color, #f4f4f3);
  }

  .feature__body {
    max-width: calc(var(--b-w) * var(--u));
    margin-top: calc(var(--b-mt) * var(--u));
    margin-left: calc(var(--b-dx) * var(--u));
    font-size: max(14px, calc(var(--b-size) * var(--u)));
    line-height: var(--b-lh);
    letter-spacing: calc(var(--b-ls) * var(--u));
    color: var(--b-color, #e4e4e4);
  }

  .feature__more {
    height: calc(var(--a-h) * var(--u));
    margin-top: calc(var(--a-mt) * var(--u));
    margin-left: calc(var(--a-dx) * var(--u));
  }

  .feature__arrow {
    width: calc(var(--a-w) * var(--u));
  }

  .feature--1 {
    --fx: 992.6;
    --fy: 164.95;
    --fw: 376;
    --sx: -502.6;
    --sy: -596.95;
    --sw: 950;
    --sh: 1619;
    --so: 0.631;
    --n-size: 25;
    --n-ls: 1.5;
    --n-dx: 0;
    --r-x: 45.4;
    --r-y: 13.3;
    --r-w: 149;
    --t-w: 376;
    --t-mt: 19.85;
    --t-size: 43.6;
    --t-lh: 52;
    --t-ls: -1.1;
    --t-color: #f3f4f5;
    --b-w: 361.3;
    --b-mt: 12.8;
    --b-dx: 3.3;
    --b-size: 19.6;
    --b-lh: 1.2857;
    --b-ls: -0.1;
    --b-color: #e2e2e2;
    --a-h: 20;
    --a-mt: 12.7;
    --a-dx: 4.4;
    --a-w: 36;
  }

  .feature--2 {
    --fx: 124.6;
    --fy: 854.42;
    --fw: 362;
    --sx: -124.6;
    --sy: -322.42;
    --sw: 793;
    --sh: 1025;
    --so: 1;
    --n-size: 29.4;
    --n-ls: 1.5;
    --n-dx: 2.7;
    --r-x: 51.4;
    --r-y: 13.33;
    --r-w: 166;
    --t-w: 362;
    --t-mt: 17;
    --t-size: 43.6;
    --t-lh: 48;
    --t-ls: -1.6;
    --t-color: #f6f6f6;
    --b-w: 352.4;
    --b-mt: 12.87;
    --b-dx: 1.9;
    --b-size: 19;
    --b-lh: 1.3368;
    --b-ls: -0.05;
    --b-color: #e4e3e4;
    --a-h: 20;
    --a-mt: 13.9;
    --a-dx: 2.4;
    --a-w: 35;
  }

  .feature--3 {
    --t-shadow: 0 0 0.03em rgba(0, 0, 0, 0.95), 0 0.04em 0.06em rgba(0, 0, 0, 0.85), 0 0 0.3em rgba(0, 0, 0, 0.45);
    --fx: 76.2;
    --fy: 353.74;
    --fw: 500;
    --sx: -121.2;
    --sy: -148.74;
    --sw: 684;
    --sh: 668;
    --so: 1;
    --n-size: 29;
    --n-ls: 2;
    --n-dx: -1.85;
    --r-x: 53.8;
    --r-y: 15;
    --r-w: 179;
    --t-w: 497;
    --t-mt: 18.53;
    --t-size: 52.1;
    --t-lh: 58;
    --t-ls: 1.7;
    --t-color: #f8f6ec;
    --b-w: 479.5;
    --b-mt: 3.27;
    --b-dx: 3.3;
    --b-size: 25.2;
    --b-lh: 1.1667;
    --b-ls: 0.2;
    --b-color: #f3f3f3;
    --a-h: 24;
    --a-mt: 13.56;
    --a-dx: 4.8;
    --a-w: 44;
  }

  .feature--4 {
    --t-shadow: 0 0 0.03em rgba(0, 0, 0, 0.95), 0 0.04em 0.06em rgba(0, 0, 0, 0.85), 0 0 0.3em rgba(0, 0, 0, 0.45);
    --fx: 905.7;
    --fy: 616.34;
    --fw: 372;
    --sx: -133.7;
    --sy: -132.34;
    --sw: 600;
    --sh: 586;
    --so: 0.612;
    --n-size: 32;
    --n-ls: 2;
    --n-dx: -1.5;
    --r-x: 55.3;
    --r-y: 19.41;
    --r-w: 175;
    --t-w: 372;
    --t-mt: 16.95;
    --t-size: 42.1;
    --t-lh: 50;
    --t-ls: -0.45;
    --t-color: #f6efdc;
    --b-w: 350.8;
    --b-mt: 10.88;
    --b-dx: 2.8;
    --b-size: 18.8;
    --b-lh: 1.3085;
    --b-ls: 0;
    --b-color: #e6e4e1;
    --a-h: 22;
    --a-mt: 12.23;
    --a-dx: 3.3;
    --a-w: 42;
  }

  .over__wall {
    left: calc(-13 * var(--u));
    top: calc(800 * var(--u));
    width: calc(1486 * var(--u));
    height: calc(423 * var(--u));
  }

  .over__tree {
    left: calc(322 * var(--u));
    top: calc(-122 * var(--u));
    width: calc(1288 * var(--u));
    height: calc(1410 * var(--u));
  }

  .over__roof {
    left: calc(-40 * var(--u));
    top: calc(1073 * var(--u));
    width: calc(411 * var(--u));
    height: calc(490 * var(--u));
    opacity: 0.8;
  }
}

@media (max-width: 1023.98px) {
  .page {
    display: flex;
    flex-direction: column;
    --hdr: 72px;
    --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
    --ws: calc(clamp(700px, calc(1.9 * var(--vw)), 1486px) / 1486);
    --bs: calc(min(calc(1.06 * var(--vw)), 820px) / 1030);
    --ts: min(var(--ws), 0.6px);
  }

  .hero {
    order: 1;
    padding: calc(var(--hdr) + 28px + env(safe-area-inset-top)) var(--gutter) calc(736 * var(--bs) + 14px);
  }

  .over {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
  }

  .s1 {
    order: 3;
  }

  .s2 {
    order: 4;
  }

  .s3 {
    order: 5;
  }

  .hero__stage {
    inset: 0;
    overflow: hidden;
    container-type: size;
  }

  .hero__fallback-moon,
  .hero__anchor--moon {
    --mw: max(100cqw, calc(100cqh * 1453 / 1083));
    --mh: max(100cqh, calc(100cqw * 1083 / 1453));
    left: clamp(calc(100cqw - var(--mw)), calc(50cqw - var(--mw) * 744 / 1453), 0px);
    top: calc(100cqh - var(--mh));
    width: var(--mw);
    height: var(--mh);
  }

  .hero__fallback-boat,
  .hero__anchor--boat {
    left: calc(50% - 418 * var(--bs));
    top: calc(100% - 736 * var(--bs));
    width: calc(860 * var(--bs));
    height: calc(676 * var(--bs));
  }

  .hero__fallback-splash,
  .hero__anchor--splash {
    left: calc(50% - 515 * var(--bs));
    top: calc(100% - 338 * var(--bs));
    width: calc(1030 * var(--bs));
    height: calc(338 * var(--bs));
  }

  .hero__content {
    max-width: 640px;
  }

  .hero__content::before {
    content: "";
    position: absolute;
    top: -18%;
    right: -24%;
    bottom: -14%;
    left: -30%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(3, 6, 14, 0.5), rgba(3, 6, 14, 0.32) 60%, rgba(3, 6, 14, 0));
    pointer-events: none;
  }

  .hero__title {
    font-size: clamp(30px, 8.2vw, 54px);
    line-height: 1.08;
    letter-spacing: 0.025em;
    text-wrap: balance;
  }

  .hero__divider {
    width: clamp(132px, 40vw, 190px);
    height: clamp(11px, 3.3vw, 15px);
    margin: clamp(14px, 4vw, 22px) 0 0;
  }

  .hero__lead {
    max-width: 34em;
    margin-top: clamp(12px, 3.6vw, 20px);
    font-size: clamp(15.5px, 4.1vw, 19px);
    line-height: 1.55;
  }

  .over__wall {
    left: calc(50% - 743 * var(--ws));
    top: calc(-186 * var(--ws));
    width: calc(1486 * var(--ws));
    height: calc(423 * var(--ws));
  }

  .over__tree {
    left: calc(100% - 40px - 1000 * var(--ts));
    top: calc(5px - 186 * var(--ws) - 922 * var(--ts));
    width: calc(1288 * var(--ts));
    height: calc(1410 * var(--ts));
    -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 50%);
    mask-image: linear-gradient(180deg, transparent 38%, #000 50%);
  }

  .over__roof {
    display: none;
  }

  .s1 {
    padding: calc(237 * var(--ws) + 44px) var(--gutter) clamp(72px, 16vw, 120px);
  }

  .s1__stage {
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 96px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 96px), transparent);
  }

  .s1__fallback img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 35%;
  }

  .s3 {
    padding: 34svh var(--gutter) 72svh;
  }

  .s3__stage {
    inset: 0;
  }

  .s3__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .s3__fallback img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 50%;
  }

  .feature {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
  }

  .feature--2 {
    margin-top: clamp(260px, 52svh, 520px);
  }

  .feature--4 {
    margin-top: clamp(240px, 46svh, 480px);
  }

  .feature__shadow {
    display: none;
  }

  .feature::before {
    content: "";
    position: absolute;
    top: -26%;
    right: -30%;
    bottom: -24%;
    left: -30%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.66) 50%, rgba(0, 0, 0, 0.3) 76%, rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .feature__index {
    gap: clamp(12px, 3.6vw, 16px);
    font-size: clamp(22px, 6.2vw, 30px);
    letter-spacing: 0.04em;
  }

  .feature__rule {
    width: clamp(96px, 30vw, 160px);
    height: 1.5px;
    margin-top: 0.12em;
  }

  .feature__title {
    margin-top: clamp(12px, 3.6vw, 18px);
    font-size: clamp(28px, 7.4vw, 44px);
    line-height: 1.12;
    letter-spacing: 0.01em;
  }

  .feature__body {
    max-width: 36em;
    margin-top: clamp(12px, 3.6vw, 18px);
    text-wrap: pretty;
    font-size: clamp(15.5px, 4.1vw, 18px);
    line-height: 1.6;
    color: #ececec;
  }

  .feature__more {
    height: 44px;
    margin-top: 6px;
    margin-left: -8px;
    padding: 0 8px;
  }

  .feature__arrow {
    width: 38px;
    height: 20px;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .feature--1,
  .feature--4 {
    margin-left: auto;
  }
}

.feature__more--cta {
  gap: 0.85em;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: auto;
  transition: color var(--exit-ms) var(--ease-in-quad);
}

.feature__more--cta:hover,
.feature__more--cta:focus-visible {
  color: var(--gold-hover);
  transition: color var(--enter-ms) var(--ease-in-out-quad);
}

.feature__cta {
  display: block;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .feature__title {
    white-space: nowrap;
  }
}
