/* ===========================================================
   PARTY PEAK — "THE RUN DOWN"  |  v2 concept stylesheet
   Locked brand tokens honored (purple/mauve/cream/black,
   Party Peak Font + Roboto + Noto Sans JP). One grounded
   addition: Booth Blue, sampled from the real bar paint in
   Zac's own venue photos. No orange, no red (competitor colors).
   =========================================================== */

@font-face {
  font-family: 'Party Peak Font';
  src: url('fonts/PartyPeakFont.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Party Peak Mountain';
  src: url('fonts/PartyPeakMountain.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

:root {
  /* locked brand tokens */
  --purple:   #68459B;
  --purple-d: #4B2F77;
  --mauve:    #9C89B3;
  --white:    #FFFADE;
  --cream:    #FFFADE;
  --black:    #0A0710;
  --ink:      #1B1424;

  /* lighter tint of --purple, for legibility when placed on --purple-d */
  --purple-light: #BBA6D2;

  /* one grounded addition — sampled from the real booth paint */
  --booth-blue: #2B6690;
  --booth-blue-d: #1D4763;

  --display: 'Party Peak Font', 'Arial Black', sans-serif;
  --wordmark: 'Party Peak Mountain', 'Party Peak Font', sans-serif;
  --body:    'Roboto', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1180px;
  --maxw-nav: 1400px;
  --nav-h: 76px;
  --route-w: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--body);
  background: var(--black);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Type ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.02;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.4vw, 6.4rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); }
p  { font-size: 1.02rem; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6; max-width: 60ch; }
.eyebrow {
  font-family: var(--body); font-size: .72rem; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--purple);
  margin-bottom: 14px; display: block;
}
.eyebrow.on-dark { color: rgba(255,250,222,.7); }
.muted { color: #6B6076; }
.sec-dark .muted, .route-shell .muted { color: rgba(255,250,222,.62); }

/* mono / data / plate numerals */
.plate-num, .mono-tag, .stat-fig {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.nav-inner {
  max-width: var(--maxw-nav); margin: 0 auto; padding: 0 24px;
  height: var(--nav-h); display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 27px; width: auto; }
.brand span {
  font-family: var(--display); color: var(--white); font-size: 1.02rem;
  letter-spacing: .14em; line-height: 1; padding-top: 3px; text-transform: uppercase;
}
.nav-inner .brand img { height: 48px; }
.nav-inner .brand span { font-size: 33px; }
.nav-links { display: flex; gap: 10px; margin-left: auto; align-items: center; flex-wrap: nowrap; }
.nav-links a {
  text-decoration: none; color: rgba(255,250,222,.78);
  font-size: 15.81px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 12px; border-radius: 2px; white-space: nowrap; transition: .18s;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav-links a.active { color: var(--white); box-shadow: inset 0 -2px 0 var(--purple); }
.nav-links a.cta { background: var(--purple); color: var(--white); padding: 10px 18px; margin-left: 8px; }
.nav-links a.cta:hover { background: #7a53b5; }
.nav-links a.highlight { background: none; color: rgba(255,250,222,.78); padding: 9px 12px; border-radius: 2px; font-size: 15.81px; }
.nav-links a.highlight:hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--white); font-size: 1.6rem; line-height: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--body); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 2px; transition: .18s;
}
.btn-primary { background: var(--purple); color: var(--white); }
.btn-primary:hover { background: #7a53b5; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,250,222,.45); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

/* ---------- Hero: SUMMIT (full-bleed video, pinned while the reveal covers it) ---------- */
/* The sticky video box is sized to the video's own 16:9 ratio (100% width, 56.25vw tall)
   instead of a flat 100vh — so on any screen not wider than 16:9 (virtually every phone,
   tablet and laptop) the box IS the video's shape exactly: cover fills it with zero crop
   and zero letterbox, and the curtain starts the instant the box ends, so top/bottom stay
   flush against the nav and the curtain at every size. min(..., 100vh) only steps in on
   monitors WIDER than 16:9 (ultra-wide desktops) — there a 16:9-tall box would exceed the
   screen height, so it caps at 100vh and crops a sliver off the sides instead; that's the
   one shape where "always 16:9, always flush, always full-bleed" can't all be true at once.
   The wrapper height mirrors it so the curtain still gets one full viewport's scroll to
   slide up over the pinned video, whatever the video box's own height turns out to be. */
/* --reveal-h sizes the purple curtain to just what the logo needs (its own rendered
   height, plus breathing room) instead of a flat 100vh — a full viewport of curtain
   left a dead purple gap below the logo before the next section ever started. */
:root {
  --curtain-w: clamp(190px, 84vw - 138px, 620px);
  /* the band is a fixed MULTIPLE of the logo's own height (0.1906 x its width), so the
     breathing room under the peaks is the same proportion on a phone as on a desktop.
     The old version added a flat 40px: a third of the logo height on desktop, but taller
     than the whole logo on a phone. */
  --reveal-h: calc(var(--curtain-w) * 0.2554);
  /* every display line on the homepage runs off this one value */
  --pp-display: min(5.9vw, 5.9rem);
  /* every call-to-action button on the homepage is this wide */
  --pp-btn-w: 320px;
}
.hero-curtain {
  position: relative;
  height: calc(min(100vh, 56.25vw) + var(--reveal-h));
  height: calc(min(100dvh, 56.25vw) + var(--reveal-h));
}
.summit {
  position: sticky; top: 0; z-index: 0;
  background: var(--black); color: var(--white);
  overflow: hidden; isolation: isolate;
  height: min(100vh, 56.25vw);
  height: min(100dvh, 56.25vw);
}
.summit-bg { position: absolute; inset: 0; z-index: -1; }
.summit-bg img, .summit-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* ---------- Brand reveal: purple curtain that slides up over the video ---------- */
.brand-reveal {
  position: relative; z-index: 1; background: var(--black);
  height: var(--reveal-h); padding: 0;
}
/* Curtain peaks + logo + wordmark are one flattened, transparent PNG (built with the
   curtain composer tool) instead of separately-positioned CSS elements — its own
   aspect ratio is locked in the file, so width:%/height:auto is all that's needed
   to keep it proportional at any screen size. */
.curtain-graphic {
  position: absolute; left: 50%; top: 0;
  width: var(--curtain-w);
  height: auto;
  display: block;
  /* translateY is a % of the graphic's OWN rendered height (unlike top/bottom,
     which are % of the container) — this keeps the peaks overlapping the video
     by the same proportion at every screen width. The old bottom:calc(100% - 112px)
     trick anchored a FIXED px offset against a width-driven (i.e. variable) height,
     so the overlap swung from 0% on phones to 70%+ on wide desktops. */
  transform: translate(-50%, -50.9%);
}

/* ---------- Brand stack: tagline / location / venue / IG / join / social, on purple ---------- */
.eyebrow.on-purple { color: var(--white); }

.brand-stack { position: relative; z-index: 1; background: var(--black); color: var(--white); padding: 0 0 38px; }
.brand-stack .wrap { max-width: 900px; }

.bs-tagline { text-align: center; padding: calc(var(--pp-display) * .2) 18px calc(var(--pp-display) * .34); }
.bs-tagline p {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--pp-display); line-height: 1.04; color: var(--white); white-space: nowrap;
}

.bs-location {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: calc(var(--pp-display) * .28) 18px 0; color: var(--white);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .03em;
  flex-wrap: wrap; text-align: center;
}
.bs-location svg { flex: 0 0 auto; opacity: .85; }
.bs-alt { opacity: .75; }
.bs-alt::before { content: '\00b7'; margin-right: 9px; opacity: .7; }

.bs-block { padding: 44px 0; }
/* full-bleed break-out: .wrap caps this section at 900px and insets it 24px, but the
   black panel itself should run to the true screen edges, so size it off the viewport
   instead of the parent — the carousel/text inside keep their own max-widths, so the
   copy doesn't stretch edge-to-edge too, only the black background does. */
.bs-block.bs-venue { padding: 6px 0; }

.bs-bubble {
  background: var(--black); color: var(--white); border-radius: 0;
  padding: clamp(22px, 4vw, 28px); text-align: center;
}
.bs-bubble .eyebrow {
  color: var(--white); margin-bottom: -11px; margin-top: 8px; display: block;
  font-family: var(--display); font-weight: 800; letter-spacing: .09em;
  font-size: var(--pp-display); line-height: 1.02; text-transform: uppercase; white-space: nowrap;
}
.bs-bubble p { margin: 30px auto 0; max-width: 56ch; color: var(--white); font-size: 1.17rem; }
.bs-hours { margin-top: 22px; font-family: var(--mono); font-size: 1.17rem; color: var(--white); opacity: .75; }
.bs-textlinks {
  display: grid; justify-items: center;
  gap: clamp(8px, 1vw, 18px); margin-top: clamp(12px, 1.6vw, 24px);
}
.bs-textlink {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: var(--pp-display); line-height: 1.02; letter-spacing: .06em;
  color: var(--white); white-space: nowrap;
  border-bottom: 1px solid rgba(255,250,222,.35); padding-bottom: 2px; transition: .18s;
}
.bs-textlink:hover { border-color: var(--white); }

/* ---------- Peak experience: counter-ribbon ---------- */
.cr {
  --cr-pad: clamp(22px, 4vw, 28px);
  --cr-h: clamp(92px, 13.5vw, 200px);
  --cr-fs: var(--pp-display);
  margin: clamp(30px, 4vw, 44px) calc(-1 * var(--cr-pad)) 6px;
  text-align: center;
}
.cr-rib { overflow: hidden; }
.cr-track { display: flex; gap: 3px; width: max-content; }
.cr-shot { display: block; flex: 0 0 auto; }
.cr-shot img {
  display: block; width: auto; height: var(--cr-h);
  object-fit: cover; cursor: zoom-in;
}
.cr-left  { animation: cr-slide-l 78s linear infinite; }
.cr-right { animation: cr-slide-r 92s linear infinite; }
.cr-rib:hover .cr-track, .cr-rib:focus-within .cr-track { animation-play-state: paused; }
@keyframes cr-slide-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes cr-slide-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.cr-mid { padding: clamp(26px, 3.8vw, 52px) var(--cr-pad); background: var(--purple); }
.cr-rotator { display: grid; justify-items: center; min-height: calc(var(--cr-fs) * 1.04); }
.cr-rotator p {
  grid-area: 1 / 1; margin: 0; opacity: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.02;
  font-size: var(--cr-fs);
  color: var(--white); white-space: nowrap;
  animation: cr-cycle 15.9s linear infinite;
  animation-delay: calc(var(--i) * 2.65s);
}
/* fades in, holds, fades out */
@keyframes cr-cycle {
  0%    { opacity: 0; }
  3.2%  { opacity: 1; }
  13.4% { opacity: 1; }
  16.6% { opacity: 0; }
  100%  { opacity: 0; }
}
.cr-facts {
  list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0 var(--cr-pad);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  font-family: var(--mono); font-size: clamp(.6rem, .92vw, .74rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--white);
}
.cr-facts li { position: relative; }
.cr-facts li + li::before {
  content: ''; position: absolute; left: -17px; top: 50%;
  width: 1px; height: 11px; transform: translateY(-50%);
  background: rgba(255,250,222,.3);
}
@media (max-width: 620px) {
  .cr-facts { gap: 8px 22px; }
  .cr-facts li + li::before { left: -11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-left, .cr-right { animation: none; }
  .cr-rotator p { animation: none; opacity: 0; }
  .cr-rotator p:first-child { opacity: 1; }
}

.bs-ig-embed { margin-top: 24px; }
.bs-ig-placeholder {
  min-height: 320px; border: 1.5px dashed rgba(255,255,255,.28); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 40px 20px;
}
.bs-ig-placeholder svg { color: var(--purple-light); }
.bs-ig-placeholder p { font-family: var(--mono); font-size: .8rem; letter-spacing: .03em; color: rgba(255,250,222,.6); }
.bs-ig-placeholder span { font-family: var(--body); font-weight: 700; font-size: .85rem; color: var(--white); }

.bs-joinup { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; }
.bs-join-col + .bs-join-col { padding-left: 48px; border-left: 1px solid rgba(255,255,255,.15); }
.bs-join-col { text-align: center; }
.bs-join-col p { margin-top: 14px; color: rgba(255,250,222,.85); max-width: 46ch; margin-inline: auto; }
.bs-join-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px auto 0; max-width: var(--pp-btn-w); }
.bs-join-actions .btn { width: 100%; text-align: center; justify-content: center; white-space: nowrap; }
@media (max-width: 860px) {
  .bs-joinup { grid-template-columns: 1fr; gap: 34px; }
  .bs-join-col + .bs-join-col { padding-left: 0; border-left: 0; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.15); }
}

.bs-social { border-bottom: 0; padding-top: 0; padding-bottom: 0; }
.bs-social .eyebrow { text-align: center; margin-bottom: -19px; }
.bs-social .social-row { justify-content: center; }
.bs-instagram { padding-top: 0; padding-bottom: 0; }

/* ---------- Route shell: the descent spine ---------- */
.route-shell { position: relative; background: var(--black); color: var(--white); }
.route-line {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--route-w);
  display: flex; justify-content: center;
}
.route-line::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, rgba(156,137,179,.06), rgba(156,137,179,.35) 8%, rgba(156,137,179,.35) 92%, rgba(156,137,179,.06));
}
@media (max-width: 900px) { .route-line { display: none; } }
.waypoint { position: relative; }
.waypoint-flag {
  position: absolute; left: calc(var(--route-w) / 2); top: 64px; transform: translateX(-50%);
  width: 15px; height: 11px; z-index: 2;
  background: var(--mauve); clip-path: polygon(0 0, 100% 22%, 0 44%);
  opacity: 0; transition: opacity .5s, background .3s;
}
.waypoint-flag::after { content:''; position:absolute; left:0; top:0; bottom:-28px; width:1px; background: var(--mauve); opacity:.5; }
.waypoint.in-view .waypoint-flag { opacity: 1; background: var(--purple); }
@media (max-width: 900px) { .waypoint-flag { display: none; } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Sections ---------- */
section { padding: clamp(64px, 8vw, 116px) 0; }
section.tight { padding: clamp(44px, 5vw, 68px) 0; }
.route-shell .wrap { padding-left: calc(24px + var(--route-w)); }
@media (max-width: 900px) { .route-shell .wrap { padding-left: 24px; } }
.sec-dark  { background: var(--black); color: var(--white); }
.sec-cream { background: var(--cream); color: var(--ink); }
.sec-head { max-width: 68ch; margin-bottom: 44px; }
.sec-head h2 + p { margin-top: 18px; }

/* ---------- Signage plates (replaces generic numbered cards) ---------- */
.plates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,.1); }
.sec-cream .plates { background: rgba(10,7,16,.1); }
.plate {
  background: var(--black); padding: 26px 22px 24px; position: relative;
}
.sec-dark .plate { background: #0f0a18; }
.sec-cream .plate { background: var(--cream); }
.plate::before {
  content:''; position:absolute; top:0; left:0; right:0; height: 3px; background: var(--booth-blue);
}
.plate .peak { font-family: var(--display); color: var(--mauve); font-size: 1.1rem; display:block; margin-bottom: 12px; }
.sec-cream .plate .peak { color: var(--purple); }
.plate h3 { font-size: .92rem; margin-bottom: 9px; letter-spacing: .09em; }
.plate p { font-size: .86rem; color: rgba(255,250,222,.62); }
.sec-cream .plate p { color: #5C5266; }
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plates { grid-template-columns: 1fr; } }

/* ---------- Waypoint steps (real sequence — keeps numbering) ---------- */
.wstep { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.wstep:last-child { border-bottom: 0; }
.wstep .plate-num { font-size: 1.7rem; color: rgba(255,250,222,.7); line-height: 1; }
.wstep .wstep-icon { color: var(--mauve); }
.wstep .wstep-icon svg { width: 58px; height: 58px; display: block; margin-top: -6px; }
.wstep h3 { text-transform: none; font-family: var(--body); font-weight: 700; letter-spacing: .01em; font-size: 1.05rem; margin-bottom: 6px; }

/* ---------- Basecamp: destination rows (replaces tile grid) ---------- */
.dest-list { display: flex; flex-direction: column; }
.dest-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 22px; align-items: center;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); text-decoration: none; color: inherit;
  transition: .15s;
}
.sec-cream .dest-row { border-top-color: rgba(10,7,16,.12); }
.dest-list .dest-row:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.sec-cream .dest-list .dest-row:last-child { border-bottom-color: rgba(10,7,16,.12); }
.dest-row:hover { background: rgba(104,69,155,.08); }
.dest-thumb { width: 130px; aspect-ratio: 4/3; overflow: hidden; background: var(--black); flex: 0 0 auto; }
.dest-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.dest-row:hover .dest-thumb img { transform: scale(1.06); }
.dest-body h3 { text-transform: none; font-family: var(--body); font-weight: 700; font-size: 1.08rem; letter-spacing: .01em; margin-bottom: 4px; }
.dest-body p { font-size: .88rem; color: rgba(255,250,222,.6); }
.sec-cream .dest-body p { color: #5C5266; }
.dest-go { font-family: var(--mono); font-size: .78rem; color: rgba(255,250,222,.7); white-space: nowrap; }
.sec-cream .dest-go { color: var(--purple); }
@media (max-width: 700px) {
  .dest-row { grid-template-columns: 84px 1fr; }
  .dest-thumb { width: 84px; }
  .dest-go { display: none; }
}

/* ---------- Basecamp feature (venue photo moment) ---------- */
.basecamp-feature { position: relative; aspect-ratio: 21/9; overflow: hidden; margin-bottom: 40px; }
.basecamp-feature img { width: 100%; height: 100%; object-fit: cover; }
.basecamp-feature::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,7,16,.82) 0%, rgba(10,7,16,.15) 55%, transparent 100%); }
.basecamp-feature-copy { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px,4vw,56px); max-width: 46ch; }
.basecamp-feature-copy .eyebrow { color: rgba(255,250,222,.7); }
.basecamp-feature-copy h2 { color: var(--white); }
.basecamp-feature-copy p { color: rgba(255,250,222,.82); margin-top: 14px; }
@media (max-width: 700px) { .basecamp-feature { aspect-ratio: 4/5; } }

/* ---------- Contact-sheet Instagram strip ---------- */
.sheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; background: rgba(255,255,255,.08); }
.sheet-tile { position: relative; aspect-ratio: 1; overflow: hidden; text-decoration: none; display: block; background: var(--black); }
.sheet-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, filter .35s; filter: grayscale(.35) contrast(1.05); }
.sheet-tile:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.05); }
.sheet-tile .frame-no {
  position: absolute; top: 6px; left: 7px; font-family: var(--mono); font-size: .62rem;
  color: rgba(255,250,222,.75); background: rgba(10,7,16,.5); padding: 1px 5px;
}
.sheet-tile .frame-view {
  position: absolute; inset: 0; background: rgba(43,102,144,.55); color: var(--white);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 10px;
  opacity: 0; transition: .18s;
}
.sheet-tile:hover .frame-view { opacity: 1; }
@media (max-width: 900px) { .sheet { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .sheet { grid-template-columns: repeat(2, 1fr); } }
.follow-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }

/* ---------- Pull quote / CTA strip ---------- */
.quote {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing: .1em; line-height: 1.2; max-width: 22ch;
}
.cta-strip { background: var(--purple); color: var(--white); }
.cta-strip h2 { margin-bottom: 18px; }
.cta-strip p { max-width: 52ch; color: rgba(255,250,222,.85); }
.cta-strip-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.btn-light { background: var(--white); color: var(--purple-d); }
.btn-light:hover { background: var(--cream); transform: translateY(-1px); }

/* ---------- Feature split (image | dark panel) ---------- */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; }
.feature-split .feature-media { position: relative; min-height: 460px; }
.feature-split .feature-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-split .feature-copy { background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,5vw,76px); }
.feature-split .feature-copy .eyebrow { color: rgba(255,250,222,.7); }
.feature-split .feature-copy p { margin-top: 16px; color: rgba(255,250,222,.85); max-width: 46ch; }
@media (max-width: 860px) {
  .feature-split { grid-template-columns: 1fr; }
  .feature-split .feature-media { min-height: 300px; }
}

/* ---------- Ticker ---------- */
.ticker { background: var(--black); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); overflow: hidden; padding: 20px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 34s linear infinite; }
.ticker-seg { display: flex; align-items: center; gap: 16px; padding-right: 16px; white-space: nowrap; }
.ticker-seg span.t { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 1.05rem; color: rgba(255,250,222,.7); }
.ticker-seg span.sep { width: 8px; height: 8px; background: var(--purple); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: 0 0 auto; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Festival card grid ---------- */
.festival-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.festival-card { border: 1px solid rgba(255,255,255,.14); text-decoration: none; color: inherit; display: block; transition: .2s; }
.festival-card:hover { border-color: var(--mauve); transform: translateY(-3px); }
.festival-card .fc-media { aspect-ratio: 4/3; overflow: hidden; }
.festival-card .fc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.festival-card:hover .fc-media img { transform: scale(1.05); }
.festival-card .fc-body { padding: 22px 24px 26px; }
.festival-card h3 { text-transform: none; font-family: var(--body); font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; margin-bottom: 8px; color: var(--white); }
.festival-card p { font-size: .9rem; color: rgba(255,250,222,.65); }
.festival-card .fc-go { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: .76rem; color: rgba(255,250,222,.7); letter-spacing: .05em; }
@media (max-width: 900px) { .festival-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .festival-grid { grid-template-columns: 1fr; } }

/* ---------- Crew band (solid CTA) ---------- */
.crew-band { background: var(--purple); color: var(--white); text-align: center; }
.crew-band h2 { color: var(--white); }
.crew-band p { max-width: 48ch; margin: 16px auto 0; color: rgba(255,250,222,.92); }
.crew-band .btn { margin-top: 30px; }
.crew-band.solo .btn { margin-top: 0; }

/* ---------- Connect split (newsletter + social) ---------- */
.connect-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); }
.connect-panel { background: var(--black); padding: clamp(32px,4vw,52px); }
.connect-panel h2 { margin-bottom: 14px; }
.connect-panel p { color: rgba(255,250,222,.75); max-width: 44ch; }
.connect-form { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.connect-form .field label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,250,222,.6); margin-bottom: 6px; }
.connect-form .field input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.28); color: var(--white); padding: 12px 14px; font-family: var(--body); font-size: .95rem; border-radius: 2px; }
.connect-form .field input::placeholder { color: rgba(255,250,222,.4); }
.connect-form .field input:focus { outline: 2px solid var(--mauve); outline-offset: 1px; border-color: var(--mauve); }
.connect-note { font-size: .78rem; color: rgba(255,250,222,.45); }
.social-row { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.social-row a { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: .18s; }
.social-row a:hover { background: var(--purple); border-color: var(--purple); }
@media (max-width: 860px) { .connect-split { grid-template-columns: 1fr; } }

/* ---------- Closing statement ---------- */
.closer { text-align: center; background: var(--black); color: var(--white); }
.closer h2 { font-size: clamp(2.1rem, 5.5vw, 4.2rem); color: var(--white); }
.closer p { max-width: 52ch; margin: 20px auto 0; color: rgba(255,250,222,.75); }

/* ---------- Footer ---------- */
.foot { background: var(--black); color: rgba(255,250,222,.62); padding: 64px 0 34px; font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.foot h4 { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; font-weight: 700; }
.foot a { color: rgba(255,250,222,.62); text-decoration: none; display: block; padding: 5px 0; }
.foot a:hover { color: var(--white); }
.foot .brand img { height: 40px; }
.foot-bot { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.11); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; font-family: var(--mono); }

/* ---------- Responsive nav ---------- */
@media (max-width: 1410px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--black); flex-direction: column; align-items: stretch;
    padding: 10px 18px 22px; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 8px; font-size: .8rem; }
  .nav-links a.cta { margin: 8px 0 0; text-align: center; }
  .nav-inner .brand img { height: 30px; }
  .nav-inner .brand span { font-size: 20px; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr; }
  .cta-strip-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Sub-page head (photo band under the nav) ---------- */
.page-head { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.page-head-bg { position: absolute; inset: 0; }
.page-head-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.03); }
.page-head::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,7,16,.55) 0%, rgba(10,7,16,.72) 45%, rgba(10,7,16,.94) 100%);
}
.page-head .wrap { position: relative; z-index: 1; padding-top: clamp(72px, 11vw, 132px); padding-bottom: clamp(52px, 8vw, 92px); }
.page-head h1 { color: var(--white); }
.page-head .lede { margin-top: 22px; color: rgba(255,250,222,.82); }
.page-head .eyebrow { color: rgba(255,250,222,.7); }

/* ---------- Map frames ---------- */
.map-shot { border: 1px solid rgba(255,255,255,.14); background: #0f0a18; display: block; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.map-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.map-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; margin-top: 40px; }
@media (max-width: 860px) { .map-pair { grid-template-columns: 1fr; } }

/* ---------- Role cards (Work With Us) ---------- */
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 860px) { .role-grid { grid-template-columns: 1fr; } }
.role-card {
  border: 1px solid rgba(255,255,255,.14); background: #0f0a18;
  padding: 30px 30px 32px; display: flex; flex-direction: column; transition: .2s;
}
.role-card:hover { border-color: var(--mauve); transform: translateY(-3px); }
.role-card h3 { color: var(--white); text-transform: none; font-family: var(--body); font-weight: 700; font-size: 1.18rem; letter-spacing: .01em; }
.role-meta {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,250,222,.7); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.role-card ul { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.role-card li { position: relative; padding-left: 20px; font-size: .93rem; color: rgba(255,250,222,.72); line-height: 1.55; }
.role-card li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; background: var(--purple);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.role-card .role-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; color: rgba(255,250,222,.55); }

/* ---------- Perks row ---------- */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.1); }
@media (max-width: 900px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .perks { grid-template-columns: 1fr; } }
.perk { background: var(--black); padding: 26px 24px; }
.sec-cream .perks { background: rgba(10,7,16,.1); }
.sec-cream .perk { background: var(--cream); }
.perk .peak { font-family: var(--display); color: var(--mauve); font-size: 1rem; display: block; margin-bottom: 10px; }
.sec-cream .perk .peak { color: var(--purple); }
.perk h3 { font-size: .88rem; letter-spacing: .09em; margin-bottom: 7px; }
.perk p { font-size: .85rem; color: rgba(255,250,222,.62); }
.sec-cream .perk p { color: #5C5266; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.12); }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 22px 0; display: flex; align-items: center; gap: 16px;
  font-weight: 700; font-size: 1.02rem; color: var(--white);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; margin-left: auto; font-family: var(--mono); color: rgba(255,250,222,.7); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { padding: 0 0 22px; max-width: 68ch; color: rgba(255,250,222,.68); font-size: .96rem; }

/* ---------- Section spacing for sub-pages ---------- */
.page-body section { padding: clamp(58px, 7vw, 96px) 0; }
.page-body section.tight { padding: clamp(34px, 4vw, 52px) 0; }

/* ---------- Menu board table ---------- */
.menu-tbl { width: 100%; border-collapse: collapse; margin-top: 16px; }
.menu-tbl td { padding: 12px 0; border-bottom: 1px solid rgba(10,7,16,.12); vertical-align: top; font-size: .95rem; }
.menu-tbl tr:last-child td { border-bottom: 0; }
.menu-tbl .price { text-align: right; white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--purple); }
.menu-tbl .sub { display: block; font-size: .84rem; color: #5C5266; margin-top: 2px; }
.menu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 48px; }
@media (max-width: 860px) { .menu-split { grid-template-columns: 1fr; gap: 28px; } }
.menu-photo img { width: 100%; height: auto; }

/* ---------- Nav dropdown ---------- */
.nav-drop { position: relative; }
.nav-drop-btn {
  font-family: var(--body); font-size: 15.81px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: none; color: rgba(255,250,222,.78);
  padding: 9px 12px; border: 0; border-radius: 2px; cursor: pointer;
  line-height: 1.65; display: inline-flex; align-items: center; gap: 8px; transition: .18s;
}
.nav-drop-btn:hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav-drop[data-open="true"] .nav-drop-btn { color: var(--white); background: rgba(255,255,255,.07); }
.nav-drop-btn svg { transition: transform .18s; }
.nav-drop[data-open="true"] .nav-drop-btn svg { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  width: 100%; background: var(--black);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(10,7,16,.55);
  padding: 4px; display: none; flex-direction: column;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop[data-open="true"] .nav-drop-menu { display: flex; }
.nav-links .nav-drop-menu a {
  padding: 11px 8px; font-size: .72rem; letter-spacing: .1em;
  color: rgba(255,250,222,.82); border-radius: 0; background: none;
  white-space: nowrap; text-align: center;
}
.nav-links .nav-drop-menu a:hover { background: var(--purple); color: var(--white); }
.nav-links .nav-drop-menu a.active { color: var(--white); box-shadow: inset 2px 0 0 var(--purple); }

@media (max-width: 1410px) {
  .nav-drop { width: 100%; }
  .nav-links a.highlight { padding: 13px 8px; font-size: .8rem; }
  .nav-drop-btn { width: 100%; justify-content: space-between; font-size: .8rem; padding: 13px 8px; }
  .nav-drop-menu {
    position: static; min-width: 0; box-shadow: none; border: 0;
    border-left: 1px solid rgba(255,255,255,.14);
    margin: 6px 0 2px 6px; padding: 0 0 0 6px; background: none;
  }
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: none; }
  .nav-links .nav-drop-menu a { text-align: left; padding: 12px 8px; }
  .nav-drop[data-open="true"] .nav-drop-menu { display: flex; }
}

/* ---------- Simple signup panel (Keep Updated) ---------- */
.signup-panel {
  max-width: 560px; background: #0f0a18;
  border: 1px solid rgba(255,255,255,.14); padding: clamp(28px, 4vw, 44px);
}
.signup-panel .field { margin-bottom: 18px; }
.signup-panel .field label {
  display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,250,222,.7); margin-bottom: 8px;
}
.signup-panel input {
  width: 100%; background: rgba(255,255,255,.05); color: var(--white);
  border: 1px solid rgba(255,255,255,.18); padding: 14px 16px;
  font-family: var(--body); font-size: 1rem; border-radius: 2px;
}
.signup-panel input:focus { outline: 2px solid var(--mauve); outline-offset: 1px; }
.signup-panel input::placeholder { color: rgba(255,250,222,.35); }
.signup-panel .btn { width: 100%; margin-top: 6px; }
.signup-panel .connect-note { margin-top: 16px; font-size: .85rem; color: rgba(255,250,222,.55); }
.signup-or {
  display: flex; align-items: center; gap: 16px; margin: 34px 0 26px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,250,222,.4);
}
.signup-or::before, .signup-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.14); }

/* ---------- Keep Updated: panel + what-you-get split ---------- */
.signup-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .signup-split { grid-template-columns: 1fr; } }
.signup-panel { max-width: none; }
.inbox-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.12); }
.inbox-item { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.inbox-item .plate-num { font-size: 1.4rem; color: rgba(255,250,222,.7); line-height: 1; }
.inbox-item h3 { text-transform: none; font-family: var(--body); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; margin-bottom: 5px; color: var(--white); }
.inbox-item p { font-size: .92rem; color: rgba(255,250,222,.62); }

/* ---------- Image zoom overlay ---------- */
.zoom-ov { position: fixed; inset: 0; z-index: 400; background: rgba(10,6,16,.94); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; cursor: zoom-out; }
.zoom-ov img { max-width: 95vw; max-height: 92vh; width: auto; height: auto; display: block; }
.zoom-ov.full { align-items: flex-start; justify-content: flex-start; cursor: zoom-out; }
.zoom-ov.full img { max-width: none; max-height: none; }
.zoom-close { position: fixed; top: 18px; right: 22px; z-index: 401; background: none; border: 0; color: var(--white); font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 4px 10px; }

/* ---------- Brevo signup embed ---------- */
.brevo-embed { width: 100%; max-width: 540px; margin: 34px auto 0; background: var(--black); border-radius: 2px; overflow: hidden; }
.brevo-embed iframe { display: block; width: 100%; height: 430px; border: 0; overflow: hidden; }
.wa-block { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 16px; margin: 26px auto 0; max-width: var(--pp-btn-w); }
.wa-btn { width: 100%; text-align: center; justify-content: center; white-space: nowrap; }
.wa-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; line-height: 1.5; color: rgba(255,250,222,.85); text-align: center; }
.signup-solo { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
.signup-solo .wa-block { margin: 0 auto; max-width: 440px; width: 100%; justify-items: stretch; }
.signup-solo .wa-btn { width: 100%; max-width: none; }
.signup-solo .brevo-embed { max-width: none; }
@media (max-width: 600px) { .brevo-embed iframe { height: 470px; } }

/* ---------- Apply button inside the page header ---------- */
.head-cta { margin-top: 30px; display: flex; justify-content: center; }
.head-cta .btn {
  background: var(--purple-d); color: var(--white);
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); letter-spacing: .07em;
  padding: clamp(18px, 2vw, 24px) clamp(34px, 4.4vw, 62px);
  text-align: center; justify-content: center;
}
.head-cta .btn:hover { background: var(--purple); transform: translateY(-1px); }
.head-alt {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px 16px;
  font-family: var(--mono); font-size: .82rem; color: rgba(255,250,222,.72);
}
.head-alt a {
  color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,250,222,.4);
  padding-bottom: 2px; transition: .18s;
}
.head-alt a:hover { border-bottom-color: var(--white); }

/* ---------- Venue feature bullets ---------- */
.feature-split .feature-copy .feature-points {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px; max-width: 46ch;
}
.feature-split .feature-copy .feature-points li {
  color: rgba(255,250,222,.85); line-height: 1.55;
}

/* ---------- Getting Here: bubble trail ---------- */
.trail { margin-top: 44px; }
.trail-row { display: flex; }
.trail-left   { justify-content: flex-start; }
.trail-right  { justify-content: flex-end; }
.trail-center { justify-content: center; }
.bubble {
  max-width: 430px;
  background: rgba(104,69,155,.16);
  border: 1px solid rgba(184,150,235,.34);
  border-radius: 26px;
  padding: 26px 30px;
}
.bubble h3 {
  text-transform: none; font-family: var(--body); font-weight: 700;
  letter-spacing: .01em; font-size: 1.05rem; margin-bottom: 8px; color: var(--white);
}
.bubble p { color: rgba(255,250,222,.75); font-size: .94rem; line-height: 1.6; }
.trail-link { color: var(--mauve); opacity: .8; margin: 4px 0; }
.trail-link svg { display: block; width: 100%; height: auto; max-height: 96px; }
@media (max-width: 820px) {
  .trail-row { justify-content: center; }
  .bubble { max-width: none; width: 100%; }
  .trail-link { height: 40px; margin: 0; display: flex; justify-content: center; }
  .trail-link svg { display: none; }
  .trail-link::before {
    content: ''; width: 3px; height: 100%;
    background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 11px);
    border-radius: 2px;
  }
}

/* ---------- Location link ---------- */
.bs-location a {
  display: inline-flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255,250,222,.28); padding-bottom: 2px; transition: .18s;
}
.bs-location a:hover { border-bottom-color: var(--white); }
.bs-location a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Get involved buttons ---------- */
.bs-join-actions .btn, .wa-btn, .soon-cta-actions .btn {
  background: var(--purple); color: var(--white);
  font-family: var(--display); font-weight: 800;
  font-size: 1.12rem; letter-spacing: .07em; padding: 15px 18px;
}
.bs-join-actions .btn:hover, .wa-btn:hover, .soon-cta-actions .btn:hover { background: var(--purple-d); color: var(--white); transform: translateY(-1px); }

/* ---------- Lineup: coming soon ---------- */
.soon { text-align: center; padding: clamp(18px, 4vw, 44px) 0 clamp(14px, 2.4vw, 26px); }
.soon .eyebrow { display: block; margin-bottom: clamp(10px, calc(var(--pp-display) * .16), 20px); }
.soon-head {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: max(var(--pp-display), 2.2rem); line-height: 1.02;
  color: var(--white); white-space: nowrap; margin: 0;
}
.soon-sub {
  margin: clamp(14px, calc(var(--pp-display) * .26), 26px) auto 0; max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.6; color: rgba(255,250,222,.78);
}

.soon-cta {
  text-align: center; max-width: 700px;
  margin: clamp(44px, 6vw, 78px) auto 0;
  padding-top: clamp(32px, 4.5vw, 54px);
  border-top: 1px solid rgba(255,250,222,.16);
}
.soon-cta-head {
  margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.04; color: var(--white);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
}
.soon-cta-sub {
  margin: 14px auto 0; max-width: 48ch; line-height: 1.6;
  font-size: clamp(.95rem, 1.2vw, 1.06rem); color: rgba(255,250,222,.72);
}
.soon-cta-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: clamp(22px, 3vw, 32px);
}
.soon-cta-actions .btn {
  width: 100%; max-width: var(--pp-btn-w); text-align: center;
  justify-content: center; white-space: nowrap;
}
@media (min-width: 620px) { .soon-cta-actions .btn { width: auto; min-width: 232px; } }

/* ---------- Getting Here: three steps ---------- */
.steps3-sec { overflow: hidden; }
.s3-head { text-align: center; margin-bottom: clamp(34px, 5vw, 58px); }
.s3-head h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.02; color: var(--white);
  font-size: clamp(2rem, 5.4vw, 4.2rem); margin: 0;
}
.s3-sub {
  margin: clamp(12px, 1.4vw, 18px) 0 0; font-family: var(--mono);
  font-size: clamp(.72rem, .95vw, .86rem); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,250,222,.6);
}
.s3-grid {
  display: grid; align-items: stretch;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(10px, 1.4vw, 20px);
}
.s3-card {
  background: #120D1C; border: 1px solid rgba(104,69,155,.55);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.s3-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(14px, 1.6vw, 22px); }
.s3-num {
  font-family: var(--display); font-weight: 800; color: var(--purple);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: .02em;
}
.s3-icon { color: var(--purple); flex: none; }
.s3-icon svg { display: block; width: clamp(30px, 3.2vw, 44px); height: auto; }
.s3-card h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.1; color: var(--white);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem); margin: 0 0 clamp(12px, 1.4vw, 18px);
}
.s3-card p {
  margin: 0; font-family: var(--mono); font-size: clamp(.78rem, .92vw, .88rem);
  line-height: 1.75; color: rgba(255,250,222,.72);
}
.s3-link { align-self: center; color: var(--mauve); width: clamp(44px, 6.4vw, 104px); opacity: .9; }
.s3-link svg { display: block; width: 100%; height: clamp(20px, 2.2vw, 30px); }
.s3-strip {
  list-style: none; margin: clamp(26px, 3.4vw, 44px) 0 0; padding: clamp(13px, 1.5vw, 18px) 20px;
  background: var(--purple); display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px clamp(16px, 2.4vw, 34px);
  font-family: var(--mono); font-size: clamp(.68rem, .88vw, .8rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--white); text-align: center;
}
@media (max-width: 880px) {
  .s3-grid { grid-template-columns: 1fr; gap: 0; }
  .s3-card { clip-path: none; }
  .s3-link { width: 4px; height: 46px; margin: 0 auto; }
  .s3-link svg { display: none; }
  .s3-link::before {
    content: ''; display: block; width: 4px; height: 100%; border-radius: 2px;
    background: repeating-linear-gradient(to bottom, currentColor 0 4px, transparent 4px 11px);
  }
}

/* ---------- Work with us: role swap ---------- */
.role-swap { background: var(--black); color: var(--white); }
.role-swap .cta-strip-inner { align-items: center; }
.role-swap h2 { margin-bottom: 14px; }
.role-swap p { max-width: 52ch; color: rgba(255,250,222,.72); }
.role-swap-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.role-swap-actions .btn {
  background: var(--purple); color: var(--white); border: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .07em; padding: 15px 26px;
  text-align: center; justify-content: center; white-space: nowrap;
}
.role-swap-actions .btn:hover { background: var(--purple-d); color: var(--white); transform: translateY(-1px); }