/* ============================================================
   elsewhere. — v2 · dark editorial
   ============================================================ */

/* ---------- fonts (self-hosted Stack Sans, variable) ---------- */
@font-face {
  font-family: "Stack Headline";
  src: url("fonts/StackSansHeadline.ttf") format("truetype");
  font-weight: 200 700; font-display: swap;
}
@font-face {
  font-family: "Stack Notch";
  src: url("fonts/StackSansNotch.ttf") format("truetype");
  font-weight: 200 700; font-display: swap;
}
@font-face {
  font-family: "Stack Text";
  src: url("fonts/StackSansText.ttf") format("truetype");
  font-weight: 200 700; font-display: swap;
}

:root {
  --bg: #121212;
  --bg-2: #171717;
  --bg-card: #1a1a1a;
  --fg: #f1efe9;
  --fg-soft: #c9c7c1;
  --muted: #7a8282;
  --muted-2: #555b5b;
  --orange: #ff3a0f;
  --lime: #c8f04a;
  --line: rgba(241, 239, 233, 0.12);
  --line-soft: rgba(241, 239, 233, 0.07);

  --display: "Stack Headline", system-ui, sans-serif;
  --head: "Stack Notch", system-ui, sans-serif;
  --text: "Stack Text", system-ui, sans-serif;

  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --maxw: 1680px;
  --e1: cubic-bezier(0.22, 1, 0.36, 1);
  --e2: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body[data-loading] { overflow: hidden; height: 100vh; }

::selection { background: var(--orange); color: #fff; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--fg-soft);
}
.eyebrow--orange { color: var(--orange); }

.label {
  font-family: var(--text);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.display-2 {
  font-family: var(--head);
  font-weight: 300;
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  vertical-align: middle;
  flex: none;
}

/* ---------- wordmark ---------- */
.wm { display: inline-block; height: 1em; width: auto; color: var(--fg); }
.wm use { color: inherit; }
.wm--orange { color: var(--orange); }
.wm--lime { color: var(--lime); }

/* ============================================================
   LOADING SCREEN  (replicates Figma "Loading screen")
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #1e1e1e;
  overflow: hidden;
}
.loader__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__center { position: absolute; inset: 0; display: grid; place-items: center; }

/* word cycle: movement → culture → connection → elsewhere
   (soft blur-from-top entrance, blur-to-bottom exit) */
.loader__flip {
  grid-area: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  height: 1.3em;
  font-family: var(--head);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.01em;
  color: #fff;
}
.loader__face {
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}
.loader__wm {
  grid-area: 1 / 1;
  width: 256px; height: auto; color: #fff;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.loader__bottom {
  position: absolute;
  left: 40px; right: 40px; bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loader__pct {
  font-family: var(--head);
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.loader__bar { width: 100%; height: 2px; background: #333; overflow: hidden; }
.loader__fill { display: block; height: 100%; width: 0%; background: #d9d9d9; }

@media (max-width: 600px) {
  .loader__wm { width: 180px; }
  .loader__bottom { left: 20px; right: 20px; bottom: 24px; }
  .loader__pct { font-size: 28px; }
}

/* ============================================================
   GRAIN
   ============================================================ */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 985;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 20px; left: 20px; right: 20px;
  z-index: 300;   /* stays above the menu overlay so the burger/X is clickable */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 20px;
  border-radius: 48px;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  color: #fff;
  pointer-events: none;
  transition: background 0.5s var(--e1), backdrop-filter 0.5s var(--e1), -webkit-backdrop-filter 0.5s var(--e1);
}
/* gains a frosted background once past the header */
.nav.is-solid {
  background: rgba(20, 20, 20, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav > * { pointer-events: auto; }
.nav a { font-family: var(--text); font-weight: 300; font-size: 16px; letter-spacing: 0; }

.nav__menu {
  justify-self: start;
  display: inline-flex; align-items: center;
  padding: 8px 6px;
  color: #fff;
}
.nav__burger {
  position: relative;
  display: block;
  width: 24px; height: 8px;
}
.nav__burger::before, .nav__burger::after {
  content: ""; position: absolute; left: 0;
  width: 24px; height: 1px; background: currentColor;
  transition: transform 0.4s var(--e1);
}
.nav__burger::before { top: 0; }
.nav__burger::after { bottom: 0; }
.nav__menu:hover .nav__burger::before { transform: translateX(3px); }
.nav__menu:hover .nav__burger::after { transform: translateX(-3px); }
/* burger morphs into an X while the menu is open */
.nav.is-menu-open .nav__burger::before { transform: translateY(3.5px) rotate(45deg); }
.nav.is-menu-open .nav__burger::after  { transform: translateY(-3.5px) rotate(-45deg); }

.nav__logo { justify-self: center; }
.nav__logo .wm { height: 18px; }

.nav__right { justify-self: end; display: flex; gap: 0.25rem; }
.nav__right a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 24px; }
.nav__right .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent; border: 1px solid currentColor; opacity: 0.85;
}

.nav a:not(.nav__logo) { position: relative; }
.nav a:not(.nav__logo)::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--e1);
}
.nav a:not(.nav__logo):hover::after { transform: scaleX(1); transform-origin: left; }
/* right-side links are padded pills — use a soft fill on hover, not an underline */
.nav__right a::after { display: none; }
.nav__right a { transition: background 0.4s var(--e1); }
.nav__right a:hover { background: rgba(255, 255, 255, 0.08); }

/* ============================================================
   MENU OVERLAY  (Figma "Website - Header" → "Menu - Open")
   ============================================================ */
.menu {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;       /* JS toggles to auto while open */
  visibility: hidden;         /* GSAP autoAlpha drives show/hide */
  background: rgba(0, 0, 0, 0.55);   /* dims the page; site stays visible behind */
}
.menu__panel {
  position: absolute;
  top: 86px; left: 20px;
  width: clamp(320px, 30vw, 420px);
  display: flex; flex-direction: column;
  gap: clamp(56px, 9vh, 120px);
  padding: 28px;
  border-radius: 24px;
  background: rgba(20, 20, 20, 0.42);   /* dark frosted glass — keeps white text legible over any section */
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  color: #fff;
}
.menu__panel:focus, .menu__panel:focus-visible { outline: none; }
.menu__list { list-style: none; display: flex; flex-direction: column; }
.menu__list--primary { gap: 24px; }
.menu__list--secondary { gap: 20px; }
.menu__list a {
  display: inline-block;
  font-family: var(--head);   /* Stack Notch */
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  text-decoration: none;
}
.menu__list a span { display: inline-block; transition: transform 0.5s var(--e1); }
.menu__list--primary a { font-size: 24px; }
.menu__list--secondary a { font-size: 16px; color: rgba(255, 255, 255, 0.72); transition: color 0.35s var(--e1); }
.menu__list--primary a:hover span { transform: translateX(14px); }
.menu__list--secondary a:hover { color: #fff; }
.menu__list a:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 6px; border-radius: 2px; }
.menu__code { display: none; }   /* desktop: "enter code" lives in the top bar */

/* ============================================================
   HERO / HEADER  (replicates Figma "Website - Header")
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.4rem, 2.78vw, 2.5rem);
  overflow: clip;
  background: #1e1e1e;
}

/* full-bleed concrete photo + 40% dark overlay */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.02);
  will-change: transform;
}
.hero__overlay { position: absolute; inset: 0; background: rgba(30, 30, 30, 0.4); }

/* the "blurry rectangle" — frosted right half, stretches left on scroll */
.hero__frost {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; right: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(var(--frost, 40px));
  backdrop-filter: blur(var(--frost, 40px));
  will-change: left;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  color: #fff;
}

.hero__head { position: relative; }
.hero__title {
  font-family: var(--display);
  font-weight: 200;          /* ExtraLight */
  font-size: clamp(3.2rem, 8.33vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line__in { display: inline-block; will-change: transform; }

.hero__wm {
  display: block;
  width: clamp(300px, 44.4vw, 639px);   /* 639px @1440 */
  height: auto;
  color: #fff;
  margin-top: clamp(0.2rem, 0.5vw, 0.5rem);
}

.hero__aside {
  flex: 0 0 auto;
  max-width: clamp(19rem, 32.15vw, 463px);  /* 463px @1440 */
  text-align: right;
  font-family: var(--display);
  font-weight: 300;          /* Light */
  font-size: clamp(1rem, 1.667vw, 24px);
  line-height: 1.32;
  color: #fff;
}
/* hide the descriptor + cue from the very first paint (before JS sets the
   start state) so they can never flash in ahead of the headline */
.anim .hero__aside,
.anim .hero__cue { opacity: 0; visibility: hidden; }

/* scroll cue — subtle, fades on scroll */
.hero__cue {
  position: absolute;
  left: 50%; bottom: clamp(1.4rem, 2.78vw, 2.5rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.hero__cue i {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  animation: cuepulse 2s var(--e1) infinite;
  transform-origin: top;
}
@keyframes cuepulse {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(30px); opacity: 0; }
}

/* ============================================================
   THE FIRST MOVE
   ============================================================ */
/* event section: full-bleed ticker, then a padded header + cards over a faint warm field */
.move-event { position: relative; isolation: isolate; overflow: clip; background: #1e1e1e; }
.move-event__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.me__inner { position: relative; z-index: 1; padding: clamp(3rem, 8vh, 6.5rem) var(--pad) clamp(4rem, 9vh, 8rem); }

.me__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.me__title .eyebrow { margin-bottom: 0.6rem; }

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px 24px;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--head);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--fg);
  white-space: nowrap;
}
.countdown b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--fg); margin-right: 0.12em; }
.countdown .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: 1; }

.ticker {
  position: relative; z-index: 1;
  padding: 18px 0;
  background: rgba(255, 255, 255, 0.02);
  overflow: clip;
}
.ticker__track { display: flex; width: max-content; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-family: var(--text);
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
}
.ticker__item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: 0.8; }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.6vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
}
.ecard {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 3rem;
  min-height: clamp(380px, 56vh, 640px);
  padding: clamp(1.4rem, 2vw, 1.6rem);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.5s var(--e1), transform 0.6s var(--e1);
}
.ecard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.ecard__badge {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.25rem); color: var(--fg);
}
.ecard__badge i { width: 8px; height: 8px; background: #fff; flex: none; }
.ecard__time {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.25rem); color: var(--fg);
  text-transform: lowercase; white-space: nowrap;
}
.ecard__foot { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; width: 100%; }
.ecard__text { display: flex; flex-direction: column; gap: 20px; }
.ecard__name { display: flex; align-items: center; gap: 14px; line-height: 1; }
.ecard__word { font-family: var(--text); font-weight: 300; font-size: clamp(2.2rem, 3.4vw, 3rem); }
.ecard__word--lime { color: #e3ff44; }
.ecard__word--orange { color: var(--orange); }
.ecard__name .wm { height: clamp(1.5rem, 2.3vw, 2.05rem); width: auto; color: var(--fg); }
.ecard__lead { font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--fg); }
.ecard__desc { font-family: var(--display); font-weight: 300; font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--muted); }
.ecard__desc--lower { text-transform: lowercase; }
.ecard__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 20px; border-radius: 48px;
  font-family: var(--text); font-weight: 400; font-size: clamp(0.95rem, 1.1vw, 1rem);
  color: #fff; white-space: nowrap; cursor: pointer;
  transition: background 0.4s var(--e1), border-color 0.4s var(--e1);
}
.ecard__btn--fill { background: #333; }
.ecard__btn--outline { background: transparent; border: 1px solid #333; }
@media (hover: hover) {
  .ecard:hover { border-color: rgba(255, 255, 255, 0.16); }
  .ecard__btn--fill:hover { background: var(--orange); }
  .ecard__btn--outline:hover { border-color: var(--fg); background: rgba(255, 255, 255, 0.06); }
}

/* ============================================================
   EVENT FLOW OVERLAY  (enter code → choose session)
   ============================================================ */
.eflow {
  position: fixed; inset: 0; z-index: 400;   /* above the nav (300) so the close button is reachable */
  display: flex;
  padding: max(20px, 4vh) max(16px, 4vw);
  overflow-y: auto;
  pointer-events: none;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.eflow__viewport { width: 100%; max-width: 928px; margin: auto; }   /* centres when short, scrolls when tall */
html.eflow-open .nav { opacity: 0 !important; pointer-events: none; transition: opacity 0.3s var(--e1); }
.eflow__step { width: 100%; }
.eflow__step[hidden] { display: none; }
.eflow__step--center { text-align: center; }
.eflow__step:focus { outline: none; }

.eflow__close {
  position: fixed; top: 22px; right: 22px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: #fff; cursor: pointer; border-radius: 50%;
  transition: background 0.35s var(--e1);
}
.eflow__close:hover { background: rgba(255, 255, 255, 0.08); }
.eflow__x { position: relative; width: 22px; height: 22px; display: block; }
.eflow__x::before, .eflow__x::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor;
}
.eflow__x::before { transform: rotate(45deg); }
.eflow__x::after { transform: rotate(-45deg); }

.eflow__panel {
  width: 100%;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-radius: 8px;
  background: rgba(30, 30, 30, 0.42);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex; flex-direction: column;
}
.eflow__panel--narrow { align-items: center; text-align: center; gap: 1.4rem; max-width: 560px; margin: 0 auto; }

.eflow__brand { display: inline-flex; align-items: center; gap: 10px; }
.eflow__brand .ecard__word { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.eflow__brand .wm { height: clamp(1.1rem, 1.8vw, 1.6rem); width: auto; color: #fff; }

/* — enter code — */
.eflow__step[data-step="code"] .eflow__panel { align-items: center; text-align: center; gap: 40px; padding-block: clamp(2.5rem, 6vh, 4rem); }
.eflow__tagline { font-family: var(--head); font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: #fff; }
.codeform { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }
.codeform__boxes { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.codeform__box {
  width: clamp(40px, 6vw, 60px); height: clamp(40px, 6vw, 60px);
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 16px;
  background: transparent; color: #fff; text-align: center;
  font-family: var(--head); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  text-transform: uppercase; caret-color: var(--orange);
  transition: border-color 0.3s, background 0.3s;
}
.codeform__box:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.codeform__box--filled { border-color: rgba(255, 255, 255, 0.85); }
.codeform__dash { width: 20px; height: 1px; background: #d9d9d9; flex: none; }
.codeform__error { color: var(--orange); font-size: 0.95rem; margin-top: -12px; }
.codeform[data-shake] { animation: eflow-shake 0.4s; }
@keyframes eflow-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

/* — shared buttons — */
.eflow__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 48px;
  font-family: var(--text); font-weight: 400; font-size: 1rem; color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: background 0.4s var(--e1), opacity 0.3s;
}
.eflow__btn--fill { background: var(--orange); }
.eflow__btn--fill:hover { background: #ff5630; }
.eflow__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* — code works (transition) — */
.eflow__big { font-family: var(--head); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.4rem); color: #fff; line-height: 1.18; }
.eflow__big span { color: var(--muted); }

/* — choose session — */
.eflow__title { font-family: var(--head); font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3rem); color: #fff; text-transform: lowercase; margin-top: 1.4rem; }
.eflow__titlerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2.5rem; margin-top: 1.4rem; }
.eflow__titlerow .eflow__title { margin-top: 0; }
.eflow__price { display: flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 300; color: var(--muted); text-transform: lowercase; white-space: nowrap; }
.eflow__price-amt { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.eflow__price-unit { font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
.sessions { display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.6rem); margin-top: 1.6rem; }
.session {
  text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-radius: 12px;
  background: #333; border: 1px solid transparent; cursor: pointer;
  transition: border-color 0.35s var(--e1), background 0.35s var(--e1);
}
.session:hover { background: #3a3a3a; }
.session[aria-pressed="true"] { border-color: var(--orange); background: #3a3a3a; }
.session__top { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.session__title { font-family: var(--head); font-weight: 300; font-size: clamp(1.3rem, 2vw, 2rem); color: #fff; }
.session__time { font-family: var(--display); font-weight: 300; font-size: clamp(0.95rem, 1.3vw, 1.25rem); color: rgba(255, 255, 255, 0.85); margin-top: 4px; }
.session__trainer { text-align: right; flex: none; font-family: var(--display); font-weight: 300; font-size: clamp(0.85rem, 1.3vw, 1.25rem); line-height: 1.4; color: #fff; }
.session__trainer span { color: var(--muted); display: block; }
.session__bottom { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; }
.session__desc { font-family: var(--display); font-weight: 300; font-size: clamp(0.9rem, 1.3vw, 1.25rem); color: var(--muted); max-width: 560px; text-transform: lowercase; }
.session__spots { font-family: var(--display); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.5rem); color: #fff; white-space: nowrap; }
.session__spots b { font-weight: 400; }
.session--full { opacity: 0.5; cursor: not-allowed; }
.eflow__includes { font-family: var(--display); font-weight: 400; font-size: clamp(0.95rem, 1.3vw, 1.25rem); color: var(--muted); margin-top: 1.8rem; }
.eflow__includes b { color: #fff; font-weight: 400; }
.eflow__step[data-step="sessions"] .eflow__btn { align-self: flex-start; margin-top: 1.4rem; }

/* — round full / community — */
.eflow__step[data-step="full"] .eflow__panel { gap: 1.2rem; }
.eflow__sub { font-family: var(--display); font-weight: 300; font-size: clamp(1rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, 0.8); }
.eflow__body { font-family: var(--text); font-weight: 300; font-size: clamp(0.95rem, 1.2vw, 1.05rem); color: var(--muted); line-height: 1.6; max-width: 62ch; }
.eflow__join { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 0.6rem; }
.eflow__field { flex: 1 1 320px; min-width: 0; }
.eflow__field input {
  width: 100%; padding: 14px 20px; border-radius: 48px;
  background: transparent; border: 1px solid var(--muted); color: #fff;
  font-family: var(--text); font-weight: 300; font-size: 1rem;
}
.eflow__field input::placeholder { color: var(--muted); }
.eflow__field input:focus { outline: none; border-color: var(--fg-soft); }
.eflow__join .eflow__btn { flex: 0 0 auto; }
.eflow__joined { color: var(--lime); font-family: var(--text); margin-top: 0.4rem; }

/* ============================================================
   EYEBROW RULE  (shared: "born in madrid", "our pillars", …)
   ============================================================ */
.eyebrow-rule {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--head); font-weight: 200;
  font-size: clamp(1rem, 1.67vw, 24px);
  color: var(--muted);
}
.eyebrow-rule__line {
  width: 120px; height: 1px; background: currentColor; flex: none;
  transform-origin: left center;
}
.eyebrow-rule__text { white-space: nowrap; }
.anim [data-eyebrow-line] { transform: scaleX(0); }
.anim [data-eyebrow-text] { opacity: 0; }

/* ============================================================
   ABOUT US  (replicates Figma "Website - About us")
   ============================================================ */
.about {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(4rem, 12vh, 9rem) var(--pad);
  background: #1e1e1e;
  overflow: clip;
}
.about__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.about__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);
}
.about__main { flex: 0 1 825px; display: flex; flex-direction: column; gap: 32px; }
.about__text {
  font-family: var(--text);
  font-weight: 200;
  font-size: clamp(1.25rem, 2.22vw, 32px);
  line-height: 1.38;
  color: #7a8282;   /* starts dim before the scroll-wash lifts each word to white */
}
.about__text p { margin: 0; }
.about__text p + p { margin-top: 1.4em; }
.about__text .word { color: #7a8282; }

.about__side { flex: 0 0 309px; display: flex; flex-direction: column; gap: 20px; }
.about__wm { width: 153px; height: auto; color: var(--fg); }
.about__tag {
  font-family: var(--text); font-weight: 200;
  font-size: clamp(1rem, 1.67vw, 24px);
  line-height: 1.3;
  color: var(--muted);
}

/* ============================================================
   SIGNATURE  (Figma "Website - signature section 2")
   ============================================================ */
.signature {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0c;
}
.signature__photo { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.signature__photo img {
  width: 100%; height: 116%; object-fit: cover;
  object-position: center 38%;
}
/* whole photo frosted */
.signature__frost {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
/* repeating "elsewhere." covering the entire section, scroll-driven */
.signature__rows {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
  mix-blend-mode: luminosity;
}
.signature__row {
  display: flex; width: max-content;
  font-family: var(--head); font-weight: 400;
  font-size: clamp(3.2rem, 10.5vw, 10.5rem);
  line-height: 1.04; letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  will-change: transform;
}
.signature__frame {
  position: relative; z-index: 3;
  width: clamp(240px, 33vw, 480px);
  aspect-ratio: 480 / 697;
  overflow: hidden;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55);
  will-change: transform;
}
.signature__frame img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 32%;
  transform: scale(1.12);
  will-change: transform;
}

/* ============================================================
   OUR PILLARS — move / make / meet (scroll-driven rotation)
   ============================================================ */
.pillars {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: clip;
  /* new background (Figma): dark → mid-grey → orange-red, top to bottom */
  background: linear-gradient(to bottom, #1e1e1e 0%, #333 50%, #ff3a0f 100%);
}
.pillars__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.pillars__inner {
  position: relative; z-index: 1;
  height: 100%;
  max-width: 1440px; margin: 0 auto;
}
/* eyebrow sits clear of the fixed top bar so it's always visible while pinned */
.pillars__head {
  position: absolute;
  top: clamp(6.5rem, 13vh, 8.5rem);
  left: var(--pad);
  z-index: 3;
}
.pillars__stage { position: absolute; inset: 0; z-index: 2; }

.pillars__media {
  position: absolute;
  left: 13.6%; top: 50%;
  transform: translateY(-50%);
  width: min(46vh, 32vw);
  aspect-ratio: 1;
}
.pillars__frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
.pillars__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}
.pillars__img.is-active { opacity: 1; }

.pillars__copy {
  position: absolute;
  left: 51.4%; top: 40%;
  width: min(495px, 36%);
  color: #fff;
  font-family: var(--text); font-weight: 300;
  font-size: clamp(1rem, 1.39vw, 20px);
  line-height: 1.45;
}
.pillars__desc { margin-top: 1.3em; color: rgba(255, 255, 255, 0.84); }

.pillars__title {
  position: absolute;
  left: 36.25%; top: 60%;
  margin: 0;
  font-family: var(--text); font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 64px);
  letter-spacing: -0.02em; line-height: 1.1;
  color: #fff; white-space: nowrap;
  display: flex; align-items: baseline;
}
/* fixed-width rotor slot → "elsewhere" never shifts as the word changes */
.pillars__rotor {
  display: inline-block;
  width: var(--rotor-w, 4.4ch);
  flex: none;
}
.pillars__rotor .pchar { display: inline-block; will-change: transform, opacity; }
.pillars__static { margin-left: 0.31em; }

/* ============================================================
   CTA  (Figma "Website signature + CTA" — top block)
   ============================================================ */
.cta {
  background: #1e1e1e;
  min-height: 100svh;            /* full-height so the CTA can't be skipped */
  display: flex;
  flex-direction: column;
}
.cta__inner {
  flex: 1 1 auto;               /* fill the section; marquee anchors to the bottom */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertically centre the headline + form */
  align-items: stretch;         /* children keep their max-widths, left-aligned */
  max-width: 1280px;
  padding: clamp(7rem, 16vh, 11rem) var(--pad) clamp(2.5rem, 7vh, 5rem);
}
.cta__title {
  font-family: var(--head);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 1000px;
}
.cta__sub {
  margin-top: 20px;
  font-family: var(--text); font-weight: 200;
  font-size: clamp(1rem, 1.4vw, 20px);
  color: var(--muted);
  max-width: 1000px;
}
/* mobile-first: field + button stacked full-width.
   At >=1080px they sit side by side (Figma: 740px field + natural button). */
.cta__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 40px;
  max-width: 1000px;
}
.cta__field { width: 100%; min-width: 0; }
.cta__field input {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 48px;
  color: var(--fg);
  font-family: var(--text); font-weight: 300; font-size: clamp(1rem, 1.4vw, 20px);
  transition: border-color 0.4s;
}
.cta__field input::placeholder { color: var(--muted); }
.cta__field input:focus { outline: none; border-color: var(--fg-soft); }
.cta__btn {
  padding: 16px 24px;
  background: var(--orange);
  color: #fff;
  border-radius: 48px;
  font-family: var(--text); font-weight: 400; font-size: clamp(1rem, 1.4vw, 20px);
  white-space: nowrap;
  text-align: center;
  transition: background 0.4s var(--e1);
}
.cta__btn:hover { background: #ff5630; }

/* desktop: email field (740px) + button side by side, exactly as the Figma */
@media (min-width: 1080px) {
  .cta__form { flex-direction: row; align-items: center; gap: 20px; }
  .cta__field { flex: 0 0 740px; width: auto; }
  .cta__btn { width: auto; text-align: left; }
}

.cta__marquee {
  margin-top: 0;                /* flex:1 on .cta__inner pins this to the bottom */
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.02);
  overflow: clip;
}
.cta__track { display: flex; width: max-content; }
.cta__mq {
  display: inline-flex; align-items: center; gap: 24px;
  padding-right: 24px;
  font-family: var(--text); font-weight: 300;
  font-size: clamp(1rem, 1.67vw, 24px);
  color: var(--muted);
  white-space: nowrap;
}
.cta__mq .dot { width: 8px; height: 8px; opacity: 1; background: var(--muted); }

/* ============================================================
   FOOTER  (wordmark + legal)
   ============================================================ */
.footer { background: #1e1e1e; }
.footer__bottom {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(3rem, 10vh, 80px) var(--pad) 40px;
}
.footer__wm { display: block; width: clamp(160px, 18vw, 205px); height: auto; color: var(--muted); }
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  margin-top: 60px;
  font-size: 14px;
  color: var(--muted);
}
.footer__row a:hover { color: var(--fg-soft); }
.footer__legal { display: flex; gap: 24px; }

/* ============================================================
   REVEAL PREP (no-JS-safe: visible by default; JS adds .anim)
   ============================================================ */
.anim [data-reveal],
.anim [data-reveal-lines] .line__in,
.anim [data-fade] { will-change: transform, opacity; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }

  /* about → stack, side block below */
  .about__inner { flex-direction: column; align-items: flex-start; gap: 2.5rem; }
  .about__main { flex: 1 1 auto; }
  .about__side { flex: 0 0 auto; }

  /* pillars → stacked flow: eyebrow, image, title, copy */
  .pillars { height: auto; min-height: 100svh; }
  .pillars__inner { display: flex; flex-direction: column; padding: 0 var(--pad); }
  .pillars__head { position: relative; top: auto; left: auto; padding-top: clamp(5rem, 13vh, 7rem); }
  .pillars__stage {
    position: relative; inset: auto; z-index: auto;
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    gap: clamp(1.4rem, 4vw, 2rem); padding: 2rem 0;
  }
  .pillars__media { position: relative; left: auto; top: auto; transform: none; width: min(62vw, 340px); }
  .pillars__copy { position: relative; left: auto; top: auto; width: 100%; max-width: 34rem; }
  .pillars__title { position: relative; left: auto; top: auto; font-size: clamp(2.6rem, 11vw, 4.2rem); }

  /* header → single column content; the blurry rectangle stays on the RIGHT, lighter blur */
  .hero__inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hero__aside {
    text-align: left;
    max-width: 32rem;
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.86);
  }
  .hero__frost { --frost: 28px; }
  .hero__media img { object-position: 50% 56%; }

  /* signature → smaller frame, type still fills the screen */
  .signature__frame { width: 58vw; }
  .signature__row { font-size: clamp(2.6rem, 16vw, 6rem); }

  /* event cards → shorter when stacked; session rows wrap */
  .ecard { min-height: clamp(320px, 42vh, 460px); gap: 2.4rem; }
  .session__bottom { flex-wrap: wrap; gap: 10px 20px; }
}

@media (max-width: 600px) {
  /* top bar: elsewhere logo on the left, hamburger on the right */
  .nav { top: 14px; left: 14px; right: 14px; padding: 10px 14px; grid-template-columns: 1fr 1fr; }
  .nav__menu { justify-self: end; order: 2; }
  .nav__logo { justify-self: start; order: 1; display: block; }
  .nav__logo .wm { height: 16px; }
  .nav__right { display: none; }

  /* menu becomes a near-fullscreen frosted sheet; "enter code" joins the list */
  .menu__panel {
    top: 70px; left: 14px; right: 14px; bottom: 16px;
    width: auto;
    justify-content: space-between;   /* sections up top, social pinned to the bottom */
    gap: 28px;
    padding: 34px 26px;
    border-radius: 28px;
  }
  .menu__list--primary { gap: 6px; }
  .menu__list--primary a { font-size: clamp(34px, 10vw, 52px); line-height: 1.18; }
  .menu__list--secondary { gap: 14px; }
  .menu__list--secondary a { font-size: 18px; }
  .menu__code { display: block; }

  .hero__cue { display: none; }   /* no scroll cue on mobile */

  .hero__title { font-size: clamp(2.8rem, 14vw, 4rem); }
  .hero__wm { width: min(82vw, 360px); }

  .me__head { align-items: flex-start; }
  /* shrink the headline so "this is just the start." / "more coming soon."
     each fit on one line (no orphaned "start."/"soon.") */
  .cta__title { font-size: clamp(1.9rem, 9.2vw, 2.4rem); }
  .footer__row { gap: 1rem; }
  .footer__legal { width: 100%; order: 3; }

  /* event flow → full-screen frosted sheets */
  .eflow { padding: 0; }
  .eflow__viewport { max-width: none; }
  .eflow__panel {
    min-height: 100svh; justify-content: center;
    padding: 80px 22px 36px; border-radius: 0; border: 0;
  }
  .eflow__panel--narrow { min-height: 100svh; }
  .eflow__close { top: 16px; right: 14px; }
  .codeform__boxes { gap: 1.1vw; flex-wrap: nowrap; }   /* keep all 9 on one line */
  .codeform__box { width: 7.2vw; height: 46px; border-radius: 10px; font-size: clamp(1rem, 4.4vw, 1.4rem); }
  .codeform__dash { width: 1.4vw; }
  .session__top { flex-direction: column; gap: 6px; }
  .session__trainer { text-align: left; }
  .session__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .eflow__join { flex-direction: column; align-items: stretch; }
  .eflow__field { flex: 1 1 auto; }
  .eflow__join .eflow__btn { width: 100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .about__text .word { color: #f1efe9 !important; }
  .about__text p[data-wash-to="dim"] .word { color: #a5a7a9 !important; }
  .pillars__img.is-active { opacity: 1; }
}