:root {
  --bg: #030506;
  --ink: #f5f4f0;
  --muted: #929b9b;
  --faint: rgba(236,245,243,.26);
  --hair: rgba(225,237,232,.17);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
::selection { background: #e8e8e0; color: #080a0a; }
.skip-link { position: absolute; left: 18px; top: -80px; z-index: 20; padding: 12px; background: white; color: black; }
.skip-link:focus { top: 10px; }
.experience { position: relative; isolation: isolate; min-height: max(830px, 100svh); overflow: hidden; display: flex; flex-direction: column; background: #030505; }
#water-canvas { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; display: block; }
.ambient-glow { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(1,3,3,.65), rgba(1,3,3,.32) 31%, rgba(1,3,3,.25) 61%, rgba(1,3,3,.65)), radial-gradient(ellipse 46% 58% at 50% 43%, rgba(0,0,0,.62), transparent 77%); }
.fine-grain { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .17; background: repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(255,255,255,.006) 3.5px, transparent 4px); }
.site-header { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 106px; padding: 23px clamp(28px, 4.1vw, 80px) 21px; border-bottom: 1px solid var(--hair); }
.brand { text-decoration: none; white-space: nowrap; width: max-content; font: 400 clamp(36px, 3.5vw, 53px)/.9 var(--serif); letter-spacing: -.07em; }
.header-middle, .header-status { font: 500 10px/1.6 var(--mono); letter-spacing: .11em; color: #a2aaaa; }
.header-middle { text-align: center; }
.header-separator { color: #546061; padding: 0 .45em; }
.header-status { display: flex; align-items: center; gap: 12px; justify-self: end; color: #d6dedc; }
.status-pulse { flex: none; width: 6px; height: 6px; border: 1px solid #dce7e5; background: #e7f1f0; border-radius: 50%; box-shadow: 0 0 0 3px rgba(235,245,243,.065); animation: breathe 3s ease-in-out infinite; }
.stage { flex: 1 1 auto; position: relative; margin: 0 auto; width: min(100%, 1640px); min-height: 655px; }
.stage-coordinates { position: absolute; z-index: 2; display: flex; gap: 15px; left: clamp(28px,4.1vw,80px); top: 19px; font: 400 9px/1.5 var(--mono); color: rgba(230,238,235,.39); letter-spacing: .12em; }
.stage-coordinates span + span { color: rgba(230,238,235,.24); }
.launch-center { position: absolute; z-index: 3; top: 46%; left: 50%; transform: translate(-50%,-50%); width: min(46vw, 710px); min-width: 480px; text-align: center; padding: 26px 0; }
.launch-kicker { display: inline-flex; gap: 11px; align-items: center; margin-bottom: clamp(22px, 3vh, 40px); color: rgba(245,244,240,.59); white-space: nowrap; font: 500 clamp(8px,.66vw,10px)/1.4 var(--mono); letter-spacing: .15em; }
.kicker-rule { width: 30px; height: 1px; background: #d0d7d5; }
.launch-center h1 { margin: 0; font: 400 clamp(98px, 10.25vw, 180px)/.81 var(--serif); letter-spacing: -.076em; color: #f4f3f0; text-wrap: nowrap; text-shadow: 0 12px 65px rgba(0,0,0,.35); }
.launch-center h1 em { display: block; font-weight: 400; padding: .06em .18em .10em 0; }
.launch-description { margin: clamp(17px,3.2vh,38px) auto 0; max-width: 360px; color: rgba(239,244,242,.68); font: 400 clamp(13px, 1.05vw, 17px)/1.46 var(--sans); letter-spacing: -.025em; }
.launch-underbar { display: flex; align-items: center; justify-content: center; gap: 17px; margin-top: 26px; color: #8a9593; font: 500 9px/1 var(--mono); letter-spacing: .14em; }
.launch-underbar span:first-child { width: 62px; height: 1px; background: #b0b9b6; }
.module { position: absolute; z-index: 2; width: clamp(175px, 16.7vw, 258px); display: flex; flex-direction: column; gap: 9px; text-align: left; }
.module--artists { top: 6.8%; left: clamp(37px, 6.1vw, 110px); --tilt: -2.5deg; }
.module--freedom { top: 8.9%; right: clamp(37px, 6.1vw, 110px); --tilt: 2deg; }
.module--tools { bottom: 6.5%; left: clamp(37px, 8.9vw, 150px); --tilt: 2.25deg; }
.module--beyond { bottom: 5.8%; right: clamp(37px, 7.5vw, 125px); --tilt: -2deg; }
.module-top { display: flex; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--hair); font: 500 clamp(8px,.67vw,10px)/1 var(--mono); letter-spacing: .1em; color: rgba(233,242,240,.55); }
.module-plus { font-size: 14px; font-weight: 300; line-height: .8; }
.module-photo { margin: 4px 0 0; width: 77%; aspect-ratio: 1.46; overflow: hidden; border: 1px solid rgba(233,241,239,.20); filter: grayscale(1); transform: rotate(var(--tilt)); box-shadow: 0 7px 27px rgba(0,0,0,.35); transition: transform .65s cubic-bezier(.2,.7,.3,1), filter .65s; }
.module-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(0) contrast(1.22) brightness(.91); }
.module--artists .module-photo { aspect-ratio: 1.35; }
.module--artists img { object-position: center 38%; }
.module--freedom .module-photo { align-self: flex-end; aspect-ratio: 1.65; }
.module--tools .module-photo { aspect-ratio: 1.69; }
.module--beyond .module-photo { align-self: flex-end; aspect-ratio: 1.7; }
.module:hover .module-photo { transform: rotate(0deg) translateY(-3px); filter: grayscale(.72); }
.module-copy { margin-top: 4px; }
.module h2 { margin: 0; font: 400 clamp(16px, 1.38vw, 21px)/1.11 var(--serif); letter-spacing: -.034em; color: rgba(252,252,249,.92); }
.module p { margin: 8px 0 0; font: 400 10px/1.45 var(--sans); color: rgba(231,240,238,.42); letter-spacing: .01em; }
.stage-marker { position: absolute; color: rgba(220,229,226,.29); font: 400 8px/1 var(--mono); letter-spacing: .17em; writing-mode: vertical-rl; }
.stage-marker--left { top: 43%; left: clamp(17px,2.1vw,33px); transform: rotate(180deg); }
.stage-marker--right { top: 41%; right: clamp(17px,2.1vw,33px); }
.bottom-rail { position: relative; z-index: 4; min-height: 53px; padding: 0 clamp(28px,4.1vw,80px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; color: rgba(236,245,241,.62); font: 500 9px/1.5 var(--mono); letter-spacing: .12em; }
.rail-summary { color: rgba(241,245,242,.78); text-align: center; }
.rail-summary span { margin: 0 .6em; color: rgba(223,231,227,.4); }
.rail-action { justify-self: end; }
.rail-action span { margin-left: 7px; }
.footer { position: relative; z-index: 4; min-height: 65px; padding: 0 clamp(28px,4.1vw,80px); display: flex; justify-content: space-between; align-items: center; color: rgba(242,246,244,.55); font: 400 10px/1.6 var(--mono); letter-spacing: .09em; }
.footer a, .footer a:visited, .footer a:hover, .footer a:active { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; }
.footer a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
/* Entrance effects are subtle: typography is never hidden while scripts are off. */
.js-on .launch-center, .js-on .module, .js-on .stage-coordinates { animation: rise-in 1.2s cubic-bezier(.16,.7,.22,1) both; }
.js-on .launch-center { animation-delay: .11s; }
.js-on .module--artists { animation-delay: .27s; }
.js-on .module--freedom { animation-delay: .38s; }
.js-on .module--tools { animation-delay: .48s; }
.js-on .module--beyond { animation-delay: .59s; }
@keyframes rise-in { from { opacity: 0; translate: 0 17px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes breathe { 0%,100% { opacity: .44; } 55% { opacity: 1; } }
@media (min-width: 1650px) { .module { width: 258px; } .launch-center h1 { font-size: 174px; } }
@media (max-width: 1180px) and (min-width: 761px) {
  .experience { min-height: max(800px, 100svh); }
  .stage { min-height: 625px; }
  .module { width: clamp(170px, 18vw, 205px); }
  .module--artists, .module--tools { left: 5vw; }
  .module--freedom, .module--beyond { right: 5vw; }
  .launch-center { width: 52vw; min-width: 0; }
  .launch-center h1 { font-size: clamp(80px, 10vw, 124px); }
  .module h2 { font-size: 18px; }
  .rail-action { display:none; }
  .bottom-rail { grid-template-columns: 1fr auto; }
}
@media (max-width: 760px) {
  .experience { min-height: 100svh; overflow: clip; }
  .site-header { grid-template-columns: 1fr auto; min-height: 92px; padding: 23px 22px; }
  .brand { font-size: 44px; }
  .header-middle { display: none; }
  .header-status { font-size: 9px; }
  .stage { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 23px; row-gap: 35px; padding: 22px 28px 72px; }
  .stage-coordinates { position: relative; grid-column: 1 / -1; left: auto; top: auto; font-size: 8px; gap: 10px; }
  .launch-center { grid-column: 1 / -1; position: relative; top: auto; left: auto; transform: none; width: 100%; min-width: 0; padding: 60px 0 34px; text-align: left; }
  .launch-kicker { font-size: 8px; letter-spacing: .105em; gap: 9px; margin-bottom: 30px; white-space: normal; }
  .kicker-rule { width: 20px; flex: 0 0 20px; }
  .launch-center h1 { font-size: clamp(78px, 15.6vw, 122px); letter-spacing: -.078em; line-height: .84; }
  .launch-center h1 em { padding: .06em 0 .09em; }
  .launch-description { margin: 30px 0 0; font-size: 16px; }
  .launch-underbar { justify-content: start; margin-top: 27px; }
  .module { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; gap: 11px; }
  .module-top { font-size: 8px; letter-spacing: .04em; }
  .module-photo, .module--artists .module-photo, .module--freedom .module-photo, .module--tools .module-photo, .module--beyond .module-photo { width: 100%; aspect-ratio: 1.35; align-self: auto; }
  .module--freedom { margin-top: 67px; }
  .module--tools { margin-top: -28px; }
  .module--beyond { margin-top: 46px; }
  .module h2 { font-size: clamp(17px,3.5vw,23px); line-height: 1.15; }
  .module p { font-size: 10px; }
  .stage-marker { display: none; }
  .bottom-rail { padding: 16px 28px; grid-template-columns: 1fr; gap: 6px; }
  .rail-number, .rail-summary { text-align: left; }
  .rail-action { display: none; }
  .footer { padding: 0 28px; min-height: 71px; font-size: 9px; }
}
@media (max-width: 440px) {
  .site-header { padding: 22px 23px; }
  .stage { padding: 20px 23px 66px; gap: 27px 16px; }
  .launch-center { padding: 61px 0 33px; }
  .launch-center h1 { font-size: clamp(68px, 16.2vw, 82px); }
  .module--freedom { margin-top: 56px; }
  .module--tools { margin-top: -18px; }
  .module--beyond { margin-top: 52px; }
  .module h2 { font-size: 18px; }
  .module p { font-size: 9px; }
  .footer { padding: 0 23px; }
}
@media (max-width: 355px) {
  .launch-center h1 { font-size: 15.4vw; }
  .module h2 { font-size: 16px; }
  .module p { font-size: 8px; }
  .stage { gap: 18px 13px; }
  .header-status { font-size: 8px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .experience { min-height: 760px; }
  .stage { min-height: 610px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}