/* ============================================================
   riwaq.house — monochrome frame, life inside the photos.
   Two colors. One typeface. Photos do the talking.
   ============================================================ */

:root {
  --black:  #1A1714;
  --silver: #E9E7E3;

  --black-60:  rgba(26, 23, 20, .60);
  --silver-55: rgba(233, 231, 227, .55);
  --line-dark:  rgba(233, 231, 227, .14);
  --line-light: rgba(26, 23, 20, .12);

  /* elevated surfaces on dark — opacity mixes only, no new hues */
  --surface-dark:  rgba(233, 231, 227, .045);
  --surface-dark-2: rgba(233, 231, 227, .08);

  --font: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Amiri', 'Noto Naskh Arabic', serif;

  --pad-x: clamp(20px, 5vw, 64px);
  --band-y: clamp(72px, 12vw, 140px);
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --radius: 18px;
  --pill: 999px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  background: var(--black);
  color: var(--silver);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

::selection { background: var(--silver); color: var(--black); }

/* ---------- type scale ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.display {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 700;
}
h2, .h2 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); }
h3, .h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }

.label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--silver-55);
}
.band--light .label, .on-light .label { color: var(--black-60); }

.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); }
.muted { color: var(--silver-55); }
.band--light .muted { color: var(--black-60); }

/* hairline rule above labels/stats */
.rule-above { position: relative; padding-top: 18px; }
.rule-above::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 2px; background: var(--silver-55);
}
.band--light .rule-above::before { background: var(--black-60); }

/* ---------- bands ---------- */
.band { padding: var(--band-y) var(--pad-x); position: relative; }
.band--dark  { background: var(--black); color: var(--silver); }
.band--light { background: var(--silver); color: var(--black); }
.band__inner { max-width: var(--maxw); margin: 0 auto; }
.band__inner--narrow { max-width: var(--maxw-narrow); margin: 0 auto; }
.band--tight { padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(48px, 8vw, 88px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 30px;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, color .18s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

/* on dark: silver bg + black text */
.btn--primary { background: var(--silver); color: var(--black); }
.btn--primary:hover { opacity: .88; }
/* on light: inverted */
.band--light .btn--primary, .btn--primary.on-light { background: var(--black); color: var(--silver); }

.btn--ghost { border-color: var(--line-dark); color: var(--silver); }
.btn--ghost:hover { border-color: var(--silver-55); }
.band--light .btn--ghost { border-color: var(--line-light); color: var(--black); }
.band--light .btn--ghost:hover { border-color: var(--black-60); }

.btn--small { padding: 10px 22px; font-size: 14px; }

.text-link {
  border-bottom: 1px solid var(--silver-55);
  padding-bottom: 1px;
  transition: border-color .18s ease;
}
.text-link:hover { border-color: var(--silver); }
.band--light .text-link { border-color: var(--black-60); }
.band--light .text-link:hover { border-color: var(--black); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad-x);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled {
  background: rgba(26, 23, 20, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 1px 0 var(--line-dark);
}
.nav__logo { display: flex; align-items: center; gap: 10px; }
.nav__logo img { height: 26px; width: auto; }
.wordmark {
  font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
  color: var(--silver); line-height: 1;
}
.nav__links {
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px);
  font-size: 14.5px; font-weight: 500;
}
.nav__links a:not(.btn) { color: var(--silver-55); transition: color .18s ease; }
.nav__links a:not(.btn):hover, .nav__links a.active { color: var(--silver); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; }
@media (min-width: 861px) { .nav__right { display: none; } }

/* mobile nav */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 6px;
  }
  .nav__burger span {
    display: block; width: 22px; height: 2px; background: var(--silver);
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2) { opacity: 0; }
  .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--black);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad-x);
  gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em;
  padding: 10px 0; color: var(--silver);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu a.active { color: var(--silver-55); }
.mobile-menu a.mobile-menu__cta {
  margin-top: 28px; border-bottom: none;
  color: var(--black); font-size: 1.15rem; letter-spacing: 0;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--silver);
  overflow: hidden;
}
.hero--short { min-height: 82svh; }
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,23,20,.55) 0%,
    rgba(26,23,20,.25) 45%,
    rgba(26,23,20,.93) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(56px, 9vw, 110px);
}
.hero__content h1 { max-width: 14ch; }
.hero__sub { margin-top: 18px; font-size: clamp(1.05rem, 2.2vw, 1.35rem); }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer {
  background: var(--black); color: var(--silver);
  padding: clamp(56px, 8vw, 88px) var(--pad-x) 36px;
  border-top: 1px solid var(--line-dark);
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { height: 24px; margin-bottom: 16px; }
.footer__tagline { color: var(--silver-55); max-width: 30ch; font-size: 15px; }
.footer h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em;
  font-weight: 500; color: var(--silver-55); margin-bottom: 18px;
}
.footer ul li { margin-bottom: 10px; font-size: 15px; }
.footer ul a { color: var(--silver); opacity: .85; transition: opacity .18s ease; }
.footer ul a:hover { opacity: 1; }
.footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 13.5px; color: var(--silver-55);
}
.footer__legal a { color: var(--silver-55); }
.footer__legal a:hover { color: var(--silver); }
.footer__copy {
  margin-top: 18px; font-size: 13.5px; color: var(--silver-55);
}

/* ---------- cards ---------- */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  background: var(--surface-dark);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(233,231,227,.3); }
.band--light .card {
  border-color: var(--line-light);
  background: rgba(26,23,20,.03);
}
.band--light .card:hover { border-color: rgba(26,23,20,.35); }

/* ---------- stats row ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
.stat__num {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1;
}
.stat__desc { margin-top: 10px; font-size: 14.5px; color: var(--black-60); }
.band--dark .stat__desc { color: var(--silver-55); }

/* ---------- event cards / list ---------- */
.event-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-light);
}
.band--dark .event-row { border-color: var(--line-dark); }
.event-row__info { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.event-row__emoji { font-size: 1.4rem; }
.event-row__name { font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing: -0.01em; }
.event-row__date { color: var(--black-60); font-size: 15px; }
.band--dark .event-row__date { color: var(--silver-55); }
.event-row__tag { font-style: italic; color: var(--black-60); font-size: 14.5px; }
.band--dark .event-row__tag { color: var(--silver-55); }
@media (max-width: 620px) {
  .event-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* featured (next) event card */
.event-next {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 10px;
  background: rgba(26,23,20,.03);
}
@media (max-width: 620px) { .event-next { flex-direction: column; align-items: flex-start; } }
.event-next__name { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- utility ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 32px); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.arabic {
  font-family: var(--font-arabic);
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 1.25;
  color: var(--silver);
  direction: rtl;
}

/* ============================================================
   HOME specifics
   ============================================================ */

/* §02 the question */
.question-band { padding: clamp(110px, 18vw, 220px) var(--pad-x); }
.question-band h2 {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  font-weight: 600;
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}

/* §03 problem images */
.problem-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 20px); margin: 40px 0; }
.problem-imgs figure { border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 4/5; }
.problem-imgs img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.problem-imgs figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--silver); background: linear-gradient(to top, rgba(26,23,20,.75), transparent);
}
@media (max-width: 620px) {
  .problem-imgs { grid-template-columns: 1fr; }
  .problem-imgs figure { aspect-ratio: 16/9; }
}

/* the bridge */
.bridge { position: relative; height: 190px; background: var(--silver); overflow: hidden; }
.bridge__line {
  position: absolute; left: 50%; top: 0; width: 2px; height: 0;
  background: var(--black);
  transition: height 1.2s cubic-bezier(.65,0,.35,1);
}
.bridge.visible .bridge__line { height: 100%; }
.bridge__text {
  position: absolute; left: calc(50% + 22px); top: 50%; transform: translateY(-50%);
  font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--black);
  opacity: 0; transition: opacity .8s ease .7s;
}
.bridge.visible .bridge__text { opacity: 1; }

/* §06 pyramid */
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px; }
.pyramid__level {
  border: 1px solid var(--line-dark);
  background: var(--surface-dark);
  border-radius: var(--radius);
  padding: clamp(20px, 3.5vw, 34px) clamp(20px, 4vw, 44px);
  text-align: center;
  width: 100%;
}
.pyramid__level:nth-child(1) { max-width: 460px; }
.pyramid__level:nth-child(2) { max-width: 640px; }
.pyramid__level:nth-child(3) { max-width: 820px; background: var(--surface-dark-2); }
.pyramid__name { font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: .06em; }
.pyramid__desc { margin-top: 8px; color: var(--silver-55); font-size: 15.5px; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* §07 rituals — the elevated section */
.rituals-frame {
  border: 1px solid var(--line-dark);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px, 5vw, 64px);
  background: var(--surface-dark);
}
.rituals { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px) clamp(28px, 5vw, 64px); margin-top: 48px; }
@media (max-width: 760px) { .rituals { grid-template-columns: 1fr; } }
.ritual__emoji { font-size: 1.6rem; }
.ritual__name { font-weight: 600; font-size: 1.15rem; margin-top: 10px; letter-spacing: -0.01em; }
.ritual__desc { margin-top: 8px; color: var(--silver-55); font-size: 15.5px; }

/* §09 map */
.map-wrap {
  background: var(--black);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(20px, 4vw, 48px);
  margin-top: 48px;
  overflow: hidden;
}
.map-svg { width: 100%; height: auto; display: block; }
.map-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 860px) { .map-cities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .map-cities { grid-template-columns: 1fr; } }
.city-card {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .25s ease, border-color .25s ease;
  cursor: default;
}
.city-card:hover, .city-card.active { transform: translateY(-4px); border-color: rgba(26,23,20,.4); }
.city-card__name { font-weight: 600; font-size: 1.1rem; }
.city-card__desc { margin-top: 6px; font-size: 14.5px; color: var(--black-60); }
.city-card__live {
  display: inline-block; margin-top: 10px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.map-dot-pulse { animation: pulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }

/* ============================================================
   EVENTS specifics
   ============================================================ */

/* journey line */
.journey { position: relative; margin-top: 64px; }
.journey::before {
  content: ""; position: absolute; left: 24px; top: 0; bottom: 0;
  width: 1px; background: var(--line-dark);
}
.journey__station {
  position: relative;
  padding-left: 72px;
  margin-bottom: clamp(48px, 7vw, 80px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.journey__station:last-child { margin-bottom: 0; }
.journey__station::before {
  content: ""; position: absolute; left: 17px; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--black);
  border: 1px solid var(--silver-55);
}
.journey__station::after {
  content: ""; position: absolute; left: 22px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--silver);
}
@media (max-width: 800px) {
  .journey::before { left: 12px; }
  .journey__station { grid-template-columns: 1fr; padding-left: 44px; }
  .journey__station::before { left: 5px; }
  .journey__station::after { left: 10px; }
}
.journey__station img {
  border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; width: 100%;
}
.journey__emoji { font-size: 1.7rem; }
.journey__name { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 600; margin-top: 10px; letter-spacing: -0.015em; }
.journey__desc { margin-top: 12px; color: var(--silver-55); }

/* format cards */
.format-card { display: flex; flex-direction: column; }
.format-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.format-card__body { padding: clamp(20px, 3vw, 30px); flex: 1; }
.format-card__kicker { font-style: italic; font-size: 14px; color: var(--black-60); }
.format-card__name { font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; margin-top: 4px; }
.format-card__desc { margin-top: 12px; font-size: 15.5px; color: var(--black-60); }
.format-card__freq { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--black-60); }

/* rules list */
.rules-list { margin-top: 32px; display: grid; gap: 14px; max-width: 560px; }
.rules-list li { display: flex; gap: 14px; align-items: baseline; font-size: 16.5px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.5vw, 16px); margin-top: 48px; }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery a { border-radius: 12px; overflow: hidden; display: block; position: relative; }
.gallery img {
  aspect-ratio: 1; object-fit: cover; width: 100%;
  transition: transform .4s ease;
}
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--silver);
  background: linear-gradient(to top, rgba(26,23,20,.72), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.gallery a:hover figcaption { opacity: 1; }

/* ============================================================
   STORY specifics
   ============================================================ */
.story-hero { padding: clamp(150px, 24vw, 260px) var(--pad-x) clamp(90px, 14vw, 150px); }
.joe-card {
  border: 1px solid var(--line-light);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px, 5vw, 56px);
  background: rgba(26,23,20,.025);
}
.joe-beat { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
.joe-beat:last-of-type { border-bottom: none; }
.joe-beat__week { font-weight: 700; white-space: nowrap; font-size: 15px; min-width: 74px; }

/* ============================================================
   COMMUNITY specifics
   ============================================================ */
.room-card { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; }
.room-card:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
.room-card:nth-child(even) .room-card__img { order: 2; }
@media (max-width: 800px) {
  .room-card, .room-card:nth-child(even) { grid-template-columns: 1fr; }
  .room-card:nth-child(even) .room-card__img { order: 0; }
}
.room-card__img { min-height: 260px; }
.room-card__img img { width: 100%; height: 100%; object-fit: cover; }
.room-card__body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
.room-card__kicker { font-style: italic; font-size: 14px; color: var(--black-60); }
.room-card__name { font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.5rem); letter-spacing: .04em; }
.room-card__for { font-style: italic; font-size: 14.5px; color: var(--black-60); margin-top: 14px; }
.room-card__body .btn { margin-top: 20px; }

/* ============================================================
   LEGAL pages
   ============================================================ */
.legal-body { padding: clamp(140px, 20vw, 200px) var(--pad-x) var(--band-y); }
.legal-body .band__inner--narrow { max-width: 680px; }
.legal-body h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 8px; }
.legal-body h2 { font-size: 1.15rem; margin: 36px 0 10px; }
.legal-body p { margin-bottom: 16px; color: rgba(26,23,20,.85); }
.legal-body ul { margin: 0 0 16px 20px; list-style: disc; color: rgba(26,23,20,.85); }
.legal-body ul li { margin-bottom: 8px; }
.legal-updated { color: var(--black-60); font-style: italic; margin-bottom: 40px; }

/* ============================================================
   HOME v2 — cinematic hero, kinetic type, visual sections
   Motion is purposeful: it carries the message, never decorates.
   ============================================================ */

/* ---------- film grain (sits over photography) ---------- */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- §01 CINEMATIC HERO ---------- */
.hero-cine {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; color: var(--silver);
}
.hero-cine__stage { position: absolute; inset: 0; z-index: 0; background: var(--black); }
.hero-cine__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4,0,.2,1);
}
.hero-cine__slide.is-active { opacity: 1; }
.hero-cine__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.hero-cine__slide.is-active img { animation: kenburns 9s linear forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.15); } }

/* The copy sits in the lower third, so the scrim has to be genuinely dark
   there — a bright frame behind white type is otherwise unreadable. */
.hero-cine__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom,
    rgba(26,23,20,.55) 0%, rgba(26,23,20,.24) 34%,
    rgba(26,23,20,.66) 62%, rgba(26,23,20,.93) 100%);
}
.hero-cine__body {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad-x) clamp(40px, 6vw, 72px);
}
.hero-cine__body h1, .hero-cine__body .hero__sub {
  text-shadow: 0 2px 24px rgba(26,23,20,.6);
}
.hero-cine__foot { position: relative; z-index: 4; }

/* progress pips — which shot you're on */
.hero-pips { display: flex; gap: 8px; margin-bottom: 26px; }
.hero-pips button {
  width: 34px; height: 3px; border-radius: 2px;
  background: rgba(233,231,227,.28); padding: 0;
  transition: background .3s ease;
}
.hero-pips button.is-active { background: var(--silver); }

/* ---------- kinetic typography ----------
   Resting state is VISIBLE. JS adds `prep` to hide the words, then `go` to
   transition them in — so if the script never runs, or a browser drops the
   animation's end state, the headline is still on the page. */
.kin { display: block; }
.kin__line { display: block; }
.kin.prep { opacity: 0; transform: translateY(22px); }
.kin.prep.go {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.16,.84,.3,1),
              transform .9s cubic-bezier(.16,.84,.3,1);
}

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.fade-up.go { opacity: 1; transform: none; }

/* ---------- proof ticker ---------- */
.ticker {
  border-top: 1px solid var(--line-dark);
  background: rgba(26,23,20,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.ticker__track { display: flex; width: max-content; animation: tickerRun 34s linear infinite; }
.ticker__set { display: flex; }
.ticker__item {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: var(--silver-55); white-space: nowrap;
}
.ticker__item b { color: var(--silver); font-weight: 600; }
.ticker__item::after { content: "·"; margin-left: 20px; opacity: .5; }
@keyframes tickerRun { to { transform: translateX(-50%); } }

/* ---------- scroll cue ---------- */
.scroll-cue {
  position: absolute; z-index: 4; right: var(--pad-x); bottom: clamp(96px, 13vw, 150px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--silver-55);
  transition: opacity .4s ease;
}
.scroll-cue i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--silver-55), transparent); }
.scroll-cue.hide { opacity: 0; }
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* ---------- §02 THE QUESTION — drifting photo cloud ---------- */
.qcloud {
  position: relative; min-height: 96svh;
  display: grid; place-items: center;
  overflow: hidden; background: var(--black);
  padding: var(--band-y) var(--pad-x);
}
.qcloud__field { position: absolute; inset: 0; z-index: 0; }
.qcloud__tile {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: calc(var(--s) * 1.28);
  border-radius: 14px; overflow: hidden;
  opacity: 0; filter: grayscale(.15) contrast(1.05);
  animation: cloudIn 1.4s ease forwards var(--in, 0s), drift var(--d, 24s) ease-in-out infinite alternate var(--delay, 0s);
}
.qcloud__tile img { width: 100%; height: 100%; object-fit: cover; }
@keyframes cloudIn { to { opacity: var(--o, .42); } }
@keyframes drift { to { transform: translate3d(var(--dx, 16px), var(--dy, -22px), 0); } }

.qcloud__veil {
  position: absolute; inset: -10%; z-index: 1;
  background:
    radial-gradient(ellipse 54% 44% at 50% 50%,
      rgba(26,23,20,.96) 0%, rgba(26,23,20,.84) 42%,
      rgba(26,23,20,.42) 72%, rgba(26,23,20,.12) 100%);
}
.qcloud__q {
  position: relative; z-index: 2; text-align: center;
  max-width: 26ch; margin: 0 auto;
  text-shadow: 0 2px 30px rgba(26,23,20,.85);
  font-size: clamp(1.9rem, 5.2vw, 3.5rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.16;
}

/* ---------- §03 THE PROBLEM ---------- */
.place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 24px); margin-top: 44px; }
@media (max-width: 720px) { .place-grid { grid-template-columns: 1fr; } }
.place-card {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: clamp(26px, 3.6vw, 40px) clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: border-color .3s ease, transform .3s ease;
}
.place-card:hover { border-color: rgba(26,23,20,.32); transform: translateY(-3px); }
.place-card__art { width: 100%; max-width: 130px; height: auto; margin-bottom: 22px; }
.place-card__art [stroke] { stroke: var(--black); }
.place-card__name { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
.place-card__cap { margin-top: 12px; font-size: 15px; color: var(--black-60); }

/* the noise tiles — 5,000 followers / 200 chats / 5G */
.noise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 24px); margin-top: 26px; }
@media (max-width: 720px) { .noise-grid { grid-template-columns: 1fr; } }
.noise-tile {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 26px);
}
.noise-tile svg { flex: none; width: 40px; height: 40px; }
.noise-tile svg [stroke] { stroke: var(--black); }
.noise-tile__num { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.noise-tile__lab { margin-top: 5px; font-size: 13px; letter-spacing: .06em; color: var(--black-60); }

/* the question moment — its own beat, before the bridge */
.ask {
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--line-light);
  text-align: center;
}
.ask__q {
  font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
  max-width: 22ch; margin: 0 auto;
}

/* bridge v2 — line drops out of the question into the dark */
.bridge2 {
  position: relative; height: clamp(200px, 26vw, 300px);
  background: var(--silver); overflow: hidden;
}
.bridge2__line {
  position: absolute; left: 50%; top: 0; width: 2px; height: 0;
  background: var(--black); transform: translateX(-50%);
  transition: height 1.5s cubic-bezier(.65,0,.35,1);
}
.bridge2.visible .bridge2__line { height: 100%; }
.bridge2__text {
  position: absolute; left: 50%; top: 52%;
  transform: translate(28px, -50%);
  font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--black);
  opacity: 0; transition: opacity .9s ease 1s;
}
.bridge2.visible .bridge2__text { opacity: 1; }

/* ---------- §04 THE ARCADE (house of the city) ---------- */
.arcade { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 1000px; }
.arcade__stroke {
  fill: none; stroke: var(--silver); stroke-width: 1.5; opacity: .85;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.arcade-wrap.visible .arcade__stroke { animation: archDraw 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.arcade-wrap.visible .arcade__stroke:nth-of-type(2) { animation-delay: .18s; }
.arcade-wrap.visible .arcade__stroke:nth-of-type(3) { animation-delay: .36s; }
@keyframes archDraw { to { stroke-dashoffset: 0; } }
.arcade__photo { opacity: 0; transition: opacity 1.2s ease .9s; }
.arcade-wrap.visible .arcade__photo { opacity: .82; }
.arcade__ground { stroke: var(--silver-55); stroke-width: 1; }
.arcade__mark {
  font-family: var(--font-arabic); font-size: 46px; fill: var(--silver);
  opacity: 0; transition: opacity 1s ease 1.6s;
}
.arcade-wrap.visible .arcade__mark { opacity: .9; }

/* ---------- §05 STATS v2 ---------- */
.statsv2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 48px; }
@media (max-width: 760px) { .statsv2 { grid-template-columns: repeat(2, 1fr); gap: 36px 22px; } }
.statv2__bar { height: 2px; background: var(--line-light); position: relative; overflow: hidden; }
.statv2__bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; background: var(--black);
  transition: width 1.5s cubic-bezier(.2,.7,.2,1) .1s;
}
.statv2.go .statv2__bar i { width: var(--fill, 100%); }
.statv2__num {
  margin-top: 20px;
  font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.statv2__lab { margin-top: 10px; font-size: 14.5px; color: var(--black-60); }

/* ---------- §06 PYRAMID as feature box ---------- */
.corebox {
  border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 8px);
  background: var(--surface-dark);
  padding: clamp(28px, 5vw, 64px);
  position: relative;
}
.corestack { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 44px; position: relative; }
.corestack::before {
  content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(var(--line-dark), var(--silver-55));
  transform: translateX(-50%);
}
.coretier {
  position: relative; z-index: 1;
  width: 100%; border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(26,23,20,.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: clamp(20px, 3.2vw, 32px) clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  text-align: left;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.coretier + .coretier { margin-top: 14px; }
.coretier:nth-child(1) { max-width: 560px; }
.coretier:nth-child(2) { max-width: 720px; }
.coretier:nth-child(3) { max-width: 880px; background: rgba(233,231,227,.09); }
.coretier:hover { transform: translateY(-3px); border-color: rgba(233,231,227,.34); }
.coretier__step {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid; place-items: center; font-size: 1.35rem;
}
.coretier__name { font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing: .08em; }
.coretier__desc { margin-top: 6px; color: var(--silver-55); font-size: 15px; }
@media (max-width: 620px) {
  .coretier { grid-template-columns: 1fr; gap: 12px; }
  .corestack::before { display: none; }
}

/* ---------- §08 EVENT rows with descriptions ---------- */
.event-row__desc, .event-next__desc {
  width: 100%; margin-top: 6px; font-size: 14.5px; color: var(--black-60);
}
.event-next__desc { max-width: 46ch; }
.event-row__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.event-row__block { flex: 1; min-width: 0; }
.tag-soldout {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--line-light); border-radius: var(--pill); padding: 4px 10px;
}

/* ---------- §09 MAP v2 ---------- */
.mapv2 { background: var(--black); border-radius: calc(var(--radius) + 8px); padding: clamp(20px, 3.5vw, 44px) clamp(16px, 3vw, 40px); margin-top: 44px; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-55);
}
.map-legend span { display: flex; align-items: center; gap: 9px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--silver-55); }
.map-legend i.live { background: var(--silver); box-shadow: 0 0 0 3px rgba(233,231,227,.18); }
.map-city-label { font-size: 15px; font-weight: 500; fill: var(--silver-55); letter-spacing: .04em; }
.map-city-label.live { fill: var(--silver); font-weight: 600; }
.map-arc { fill: none; stroke: rgba(233,231,227,.3); stroke-width: 1; stroke-dasharray: 3 6; }
.mapv2.visible .map-arc { animation: arcIn 2.4s ease forwards; }
@keyframes arcIn { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }

.city-card { position: relative; }
.city-card__status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.city-card__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--black-60); }
.city-card__status.live i { background: var(--black); animation: blip 2s ease-in-out infinite; }
@keyframes blip { 50% { opacity: .3; } }

/* ---------- §10 CLOSE with photo ---------- */
.closing {
  position: relative; overflow: hidden;
  min-height: 88svh; display: grid; place-items: center;
  padding: var(--band-y) var(--pad-x); text-align: center; color: var(--silver);
}
.closing__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.closing__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(26,23,20,.86), rgba(26,23,20,.7) 45%, rgba(26,23,20,.95));
}
.closing__body { position: relative; z-index: 4; max-width: 760px; }

/* ---------- reduced motion: everything settles, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-cine__slide.is-active img,
  .qcloud__tile,
  .ticker__track,
  .city-card__status.live i { animation: none !important; }
  .qcloud__tile { opacity: .42; }
  .kin.prep { transform: none; opacity: 1; transition: none; }
  .fade-up { opacity: 1; transform: none; }
  .arcade__stroke { stroke-dashoffset: 0; animation: none !important; }
  .arcade__photo, .arcade__mark { opacity: .85; }
}

/* ---------- v2 corrections ---------- */

/* icons are drawn with stroke-width only — colour them from the band */
.place-card__art *, .noise-tile svg * { stroke: var(--black); }

/* event rows: description block takes the room, button holds its size */
.event-row__block { flex: 1; min-width: 0; }
.event-row .btn, .event-next .btn { flex: none; }

/* arcs animate on any map, not just the home one */
.map-wrap.visible .map-arc { animation: arcIn 2.4s ease forwards; }

/* the closing headline reveals like the hero */
.closing .kin__line { display: block; }

/* drifting cloud: smaller and calmer on phones */
@media (max-width: 760px) {
  .qcloud { min-height: 88svh; }
  .qcloud__tile { width: calc(var(--s) * .56); height: calc(var(--s) * .72); }
  .qcloud__q { max-width: 16ch; }
}

/* hero: give the pips and ticker breathing room on small screens */
@media (max-width: 620px) {
  .hero-cine__body { padding-bottom: clamp(28px, 6vw, 44px); }
  .hero-pips { margin-top: 32px !important; }
  .ticker__item { padding: 13px 20px; font-size: 10px; }
}

/* ============================================================
   SEPT 2026 UPDATE — gold accent, the loneliness era, promises,
   photo pyramid, Satu Bali
   ============================================================ */

:root { --gold: #B8873C; }
.gold { color: var(--gold); }

/* ---------- §03 THE 5G LONELINESS ERA ---------- */
.era-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 24px); margin-top: 44px; }
@media (max-width: 760px) { .era-cards { grid-template-columns: 1fr; } }
.era-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3/4; display: flex; align-items: flex-end;
}
.era-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.85) contrast(1.05);
  transition: filter .5s ease, transform .5s ease;
}
.era-card:hover img { filter: grayscale(.2); transform: scale(1.03); }
.era-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,23,20,.88) 0%, rgba(26,23,20,.25) 45%, rgba(26,23,20,.15) 100%);
}
.era-card__body { position: relative; z-index: 2; padding: clamp(18px, 2.6vw, 28px); color: var(--silver); }
.era-card__place { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); }
.era-card__line { margin-top: 8px; font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: -0.01em; }
@media (max-width: 760px) { .era-card { aspect-ratio: 16/10; } }

/* ---------- rituals: the promise line ---------- */
.ritual__promise {
  margin-top: 10px; font-style: italic; font-size: 14.5px; line-height: 1.55;
  color: var(--gold);
}

/* ---------- pyramid with photos ---------- */
.coretier__photo {
  width: 78px; height: 78px; flex: none; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-dark);
}
.coretier__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) { .coretier__photo { width: 100%; height: 140px; } }

/* ---------- Satu Bali teaser band (home) ---------- */
.satu-teaser {
  display: block; position: relative; overflow: hidden;
  background: var(--black); color: var(--silver);
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  padding: clamp(56px, 9vw, 104px) var(--pad-x);
  text-align: center;
  transition: background .4s ease;
}
.satu-teaser:hover { background: #201c18; }
.satu-lockup {
  font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
  font-size: clamp(1.6rem, 5vw, 3rem); line-height: 1.1;
}
.satu-lockup .gold { letter-spacing: inherit; }
.satu-teaser__tag { margin-top: 14px; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--silver-55); }
.satu-teaser__by { margin-top: 22px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--silver-55); }
.satu-teaser__cta { margin-top: 26px; }

/* ---------- Satu Bali page ---------- */
.satu-hero__lockup { letter-spacing: .3em; }
.ep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.6vw, 28px); margin-top: 44px; }
@media (max-width: 760px) { .ep-grid { grid-template-columns: 1fr; } }
.ep-card { padding: clamp(24px, 3.6vw, 40px); display: flex; flex-direction: column; }
.ep-card__num { font-size: 12px; letter-spacing: .3em; font-weight: 600; color: var(--gold); }
.ep-card__name { margin-top: 10px; font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: -0.01em; }
.ep-card__when { margin-top: 6px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--black-60); }
.band--dark .ep-card__when { color: var(--silver-55); }
.ep-card__desc { margin-top: 14px; font-size: 15.5px; color: var(--black-60); flex: 1; }
.band--dark .ep-card__desc { color: var(--silver-55); }

.counter-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); max-width: 640px; margin: 44px auto 0; text-align: center; }
.counter__num { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--gold); }
.counter__lab { margin-top: 10px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-55); }

.rules-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 24px); margin-top: 40px;
}
@media (max-width: 860px) { .rules-strip { grid-template-columns: repeat(2, 1fr); } }
.rule-tile {
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 26px); font-size: 14.5px; color: var(--silver-55);
}
.rule-tile b { display: block; color: var(--silver); font-size: 15px; margin-bottom: 6px; }

/* permanent Sunday block on /events */
.sunday-block {
  border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 6px);
  padding: clamp(24px, 4vw, 44px);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px, 4vw, 44px); align-items: center;
  background: rgba(26,23,20,.03);
}
@media (max-width: 800px) { .sunday-block { grid-template-columns: 1fr; } }
.sunday-block__badge {
  display: inline-block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; border: 1px solid var(--line-light); border-radius: var(--pill);
  padding: 6px 14px; margin-bottom: 16px;
}
.price-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 14.5px; color: var(--black-60); }
.price-row b { color: var(--black); }

/* ============================================================
   v3 — proof panel (last 90 days) + promises bento grid
   ============================================================ */

/* ---------- the proof panel ---------- */
.proof {
  background: var(--black); color: var(--silver);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(28px, 5vw, 60px);
  margin-top: 40px;
}
.proof__label { color: var(--gold); }
.proof__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px); margin-top: 36px;
}
@media (max-width: 700px) { .proof__grid { grid-template-columns: 1fr; gap: 28px; } }
.proof .statv2__bar { background: var(--line-dark); }
.proof .statv2__bar i { background: var(--gold); }
.proof .statv2__num { color: var(--silver); }
.proof .statv2__lab { color: var(--silver-55); }
.proof__divider {
  height: 1px; background: var(--line-dark);
  margin: clamp(28px, 4vw, 44px) 0;
}
.proof__zeros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
@media (max-width: 700px) { .proof__zeros { grid-template-columns: 1fr; gap: 18px; } }
.proof__zero { display: flex; align-items: center; gap: 16px; }
.proof__zero b {
  font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 700; line-height: 1;
  color: var(--gold); letter-spacing: -0.02em;
}
.proof__zero span { font-size: 14.5px; color: var(--silver-55); }
.proof__foot {
  margin-top: clamp(24px, 3.6vw, 36px);
  font-size: clamp(1rem, 1.8vw, 1.15rem); font-style: italic; color: var(--silver);
}
.proof__foot .gold { font-style: normal; font-weight: 600; }

/* ---------- promises bento ---------- */
.promises {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 2vw, 22px); margin-top: 48px;
}
.promise {
  border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 2px);
  background: var(--surface-dark);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.promise:hover { transform: translateY(-4px); border-color: rgba(233,231,227,.32); }
.promise__body { padding: clamp(20px, 2.8vw, 30px); display: flex; flex-direction: column; flex: 1; }
.promise__head { display: flex; align-items: center; gap: 12px; }
.promise__num {
  font-size: 12px; letter-spacing: .22em; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(184,135,60,.4); border-radius: var(--pill); padding: 4px 12px;
}
.promise__emoji { font-size: 1.15rem; }
.promise__name { margin-top: 14px; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -0.015em; }
.promise__desc { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--silver-55); }
.promise__img { width: 100%; overflow: hidden; }
.promise__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* spans */
.promise--p1 { grid-column: span 3; grid-row: span 2; }
.promise--p1 .promise__img { aspect-ratio: 16/10; }
.promise--p2 { grid-column: span 3; }
.promise--p3 { grid-column: span 2; }
.promise--p4 { grid-column: span 2; }
.promise--p5 { grid-column: span 2; }
.promise--p6 { grid-column: span 3; }
.promise--p6 { flex-direction: row; }
.promise--p6 .promise__img { width: 42%; flex: none; }
.promise--p7 { grid-column: span 3; background: rgba(184,135,60,.10); border-color: rgba(184,135,60,.35); }
.promise--p7:hover { border-color: rgba(184,135,60,.6); }
.promise--p5 { background: var(--silver); border-color: transparent; }
.promise--p5 .promise__name { color: var(--black); }
.promise--p5 .promise__desc { color: var(--black-60); }
.promise--p7 .promise__sign {
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; margin-top: auto; padding-top: 14px;
}
@media (max-width: 960px) {
  .promises { grid-template-columns: 1fr 1fr; }
  .promise--p1, .promise--p2, .promise--p3, .promise--p4, .promise--p6, .promise--p7 { grid-column: span 2; grid-row: auto; }
  .promise--p5 { grid-column: span 2; }
}
@media (max-width: 620px) {
  .promise--p6 { flex-direction: column; }
  .promise--p6 .promise__img { width: 100%; aspect-ratio: 16/9; }
}

/* ============================================================
   EVENTS v2 — mosaic hero, filters, experience deck, bands
   ============================================================ */

/* ---------- mosaic hero ---------- */
.hero-mosaic { position: absolute; inset: 0; z-index: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 4px; background: var(--black); }
.hero-mosaic figure { overflow: hidden; }
.hero-mosaic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.hero-mosaic figure:nth-child(odd) img { animation: kenburns 12s linear infinite alternate; }
.hero-mosaic figure:nth-child(even) img { animation: kenburns 14s linear infinite alternate-reverse; }
@media (max-width: 720px) {
  .hero-mosaic { grid-template-columns: 1fr 1fr; }
  .hero-mosaic figure:nth-child(n+5) { display: none; }
}

/* ---------- filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.filter-bar button {
  padding: 10px 22px; border-radius: var(--pill); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line-light); color: var(--black-60);
  transition: all .25s ease;
}
.filter-bar button:hover { border-color: var(--black-60); color: var(--black); }
.filter-bar button.is-active { background: var(--black); color: var(--silver); border-color: var(--black); }

.event-card {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 36px);
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(26,23,20,.02);
  transition: transform .25s ease, border-color .25s ease, opacity .3s ease;
}
.event-card:hover { transform: translateY(-3px); border-color: rgba(26,23,20,.3); }
.event-card.is-hidden { display: none; }
.event-card__cat {
  align-self: flex-start; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; border: 1px solid var(--line-light); border-radius: var(--pill); padding: 5px 12px;
  color: var(--black-60);
}
.event-card__name { font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -0.015em; }
.event-card__date { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--black-60); font-weight: 600; }
.event-card__desc { font-size: 15px; color: var(--black-60); flex: 1; }
.event-card__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.event-card--next { grid-column: 1 / -1; background: var(--black); color: var(--silver); border-color: transparent; }
.event-card--next .event-card__cat { color: var(--gold); border-color: rgba(184,135,60,.4); }
.event-card--next .event-card__date { color: var(--gold); }
.event-card--next .event-card__desc { color: var(--silver-55); }
.event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); margin-top: 28px; }
@media (max-width: 760px) { .event-grid { grid-template-columns: 1fr; } }
.event-card__prices { font-size: 13.5px; color: var(--black-60); }
.event-card--next .event-card__prices, .event-card--next .event-card__prices b { color: var(--silver-55); }
.event-card__prices b { color: var(--black); }

/* ---------- experience deck (masonry) ---------- */
.exp-deck { columns: 3; column-gap: clamp(14px, 2vw, 22px); margin-top: 44px; }
@media (max-width: 960px) { .exp-deck { columns: 2; } }
@media (max-width: 620px) { .exp-deck { columns: 1; } }
.exp-card {
  break-inside: avoid; margin-bottom: clamp(14px, 2vw, 22px);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: var(--surface-dark); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.exp-card:hover { transform: translateY(-3px); border-color: rgba(233,231,227,.3); }
.exp-card__body { padding: clamp(18px, 2.6vw, 26px); }
.exp-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.exp-card__emoji { font-size: 1.4rem; }
.exp-card__name { margin-top: 8px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.exp-card__desc { margin-top: 6px; font-size: 14.5px; color: var(--silver-55); }
.exp-card--wide .exp-card__name { font-size: 1.35rem; }

/* ---------- thumbprint band ---------- */
.thumb-band {
  position: relative; overflow: hidden; min-height: 82svh;
  display: grid; place-items: center; text-align: center;
  padding: var(--band-y) var(--pad-x); color: var(--silver);
}
.thumb-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.thumb-band__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(26,23,20,.88), rgba(26,23,20,.72) 50%, rgba(26,23,20,.9)); }
.thumb-band__body { position: relative; z-index: 4; max-width: 860px; }

/* ---------- rules band ---------- */
.rules-strip--light .rule-tile { border-color: var(--line-light); color: var(--black-60); }
.rules-strip--light .rule-tile b { color: var(--black); }
.rules-strip--light { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1020px) { .rules-strip--light { grid-template-columns: repeat(2, 1fr); } }
.rule-tile__emoji { font-size: 1.5rem; display: block; margin-bottom: 10px; }

/* the featured event card is dark even on a light band — its button flips back */
.band--light .event-card--next .btn--primary { background: var(--silver); color: var(--black); }

/* ============================================================
   v4 — promise visuals, calendar, doors, rule circles
   ============================================================ */

/* every promise card carries a visual */
.promise__img--strip { aspect-ratio: 16/8; }
.promise--p7 .promise__img { aspect-ratio: 16/7; }
.promise--p5 .promise__img { aspect-ratio: 16/8; }

/* ---------- events hero: full height ---------- */
.hero--events { min-height: 100svh; }

/* ---------- september calendar ---------- */
.cal-wrap { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(20px, 3vw, 36px); margin-top: 28px; align-items: start; }
@media (max-width: 900px) { .cal-wrap { grid-template-columns: 1fr; } }
.cal {
  background: var(--black); color: var(--silver);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(20px, 3vw, 30px);
  position: sticky; top: 90px;
}
@media (max-width: 900px) { .cal { position: static; } }
.cal__head { display: flex; align-items: baseline; justify-content: space-between; }
.cal__month { font-weight: 700; font-size: 1.3rem; letter-spacing: .06em; }
.cal__year { color: var(--silver-55); font-size: 13px; letter-spacing: .18em; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 18px; }
.cal__dow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-55); text-align: center; padding: 6px 0; }
.cal__day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13.5px; color: var(--silver-55); position: relative;
}
.cal__day--pad { visibility: hidden; }
.cal__day--ev { color: var(--silver); font-weight: 600; border: 1px solid var(--line-dark); background: var(--surface-dark); }
.cal__day--ev i { width: 5px; height: 5px; border-radius: 50%; margin-top: 3px; }
.cal__day--sleepover { border-color: rgba(184,135,60,.6); background: rgba(184,135,60,.14); }
.cal__day--sleepover i { background: var(--gold); }
.cal__day--satubali i { background: var(--silver); }
.cal__day--builders i { background: rgba(233,231,227,.45); }
.cal__legend { margin-top: 18px; display: grid; gap: 8px; font-size: 12.5px; color: var(--silver-55); }
.cal__legend span { display: flex; align-items: center; gap: 10px; }
.cal__legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal__legend .l-sleep { background: var(--gold); }
.cal__legend .l-satu { background: var(--silver); }
.cal__legend .l-build { background: rgba(233,231,227,.45); }

.cal-wrap .event-grid { grid-template-columns: 1fr; margin-top: 0; }

/* ---------- exp cards: all get visuals ---------- */
.exp-card img { aspect-ratio: 16/9; }

/* ---------- three literal doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 36px); margin-top: 52px; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
.door { display: block; text-align: center; }
.door__arch {
  position: relative; overflow: hidden;
  border-radius: 999px 999px 20px 20px;
  border: 1px solid var(--line-light);
  aspect-ratio: 3/4.4;
  background: var(--black);
  transition: transform .35s ease, box-shadow .35s ease;
}
.door:hover .door__arch { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(26,23,20,.18); }
.door__arch img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, filter .5s ease;
}
.door:hover .door__arch img { transform: scale(1.06); }
.door__arch::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,23,20,.78) 0%, rgba(26,23,20,.12) 45%, rgba(26,23,20,.05) 100%);
}
.door__knob {
  position: absolute; right: 12%; top: 55%; z-index: 2;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(184,135,60,.25);
}
.door__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 16px; color: var(--silver);
}
.door__kicker { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(233,231,227,.75); }
.door__name { margin-top: 6px; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: .03em; }
.door__body { padding: 18px 8px 0; }
.door__desc { font-size: 14.5px; color: var(--black-60); }
.door__freq { margin-top: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--black); }
.door__cta { margin-top: 8px; display: inline-block; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--black-60); }

/* ---------- rule circles ---------- */
.rule-circles { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 3vw, 36px); margin-top: 52px; }
@media (max-width: 960px) { .rule-circles { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } }
@media (max-width: 480px) { .rule-circles { grid-template-columns: 1fr; } }
.rule-c { text-align: center; }
.rule-c__ring {
  width: clamp(96px, 10vw, 128px); height: clamp(96px, 10vw, 128px);
  margin: 0 auto; border-radius: 50%;
  border: 1.5px solid var(--black);
  display: grid; place-items: center;
  position: relative;
  transition: transform .3s ease, background .3s ease;
}
.rule-c:hover .rule-c__ring { transform: translateY(-4px); background: var(--black); }
.rule-c__ring svg { width: 44%; height: 44%; }
.rule-c__ring svg * { stroke: var(--black); transition: stroke .3s ease; }
.rule-c:hover .rule-c__ring svg * { stroke: var(--silver); }
.rule-c__name { margin-top: 16px; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.rule-c__desc { margin-top: 6px; font-size: 14px; color: var(--black-60); max-width: 22ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   v5 — promises masonry, flat architecture, interactive calendar
   ============================================================ */

/* promises: masonry columns — every card its natural height */
.promises {
  display: block; columns: 3; column-gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 1080px) { .promises { columns: 2; } }
@media (max-width: 640px)  { .promises { columns: 1; } }
.promise { break-inside: avoid; margin-bottom: clamp(14px, 2vw, 22px); display: block; }
.promise--p1, .promise--p2, .promise--p3, .promise--p4, .promise--p5, .promise--p6, .promise--p7 {
  grid-column: auto; grid-row: auto; flex-direction: column; max-width: none;
}
.promise--p6 { flex-direction: column; }
.promise--p6 .promise__img { width: 100%; aspect-ratio: 16/9; }
.promise__img, .promise__img--strip, .promise--p1 .promise__img,
.promise--p5 .promise__img, .promise--p7 .promise__img { aspect-ratio: 16/9; }
.promise__body { display: block; }

/* architecture: no outer box — the tiers sit on the band */
.corebox { border: 0; background: transparent; padding: 0; }

/* ---------- interactive calendar (rcal) ---------- */
.rcal { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 36px; align-items: start; }
@media (max-width: 900px) { .rcal { grid-template-columns: 1fr; } }
.rcal .cal { position: static; }
.cal__nav { display: flex; align-items: center; gap: 12px; }
.cal__nav button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--silver);
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  transition: border-color .2s ease, opacity .2s ease;
}
.cal__nav button:hover { border-color: var(--silver-55); }
.cal__nav button:disabled { opacity: .25; cursor: default; }
.cal__day--ev { cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.cal__day--ev:hover { transform: scale(1.06); border-color: var(--silver-55); }
.cal__day.is-selected { outline: 2px solid var(--gold); outline-offset: 1px; }

.rcal__detail {
  background: var(--black); color: var(--silver);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(24px, 3.6vw, 40px);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 100%;
}
.rcal__detail .event-card__cat { color: var(--gold); border-color: rgba(184,135,60,.4); }
.rcal__detail .event-card__date { color: var(--gold); }
.rcal__detail .event-card__desc { color: var(--silver-55); flex: 1; }
.rcal__detail .btn--primary { background: var(--silver); color: var(--black); align-self: flex-start; }

/* ============================================================
   v6 — category colors, quick-next links, life map, satu v2
   ============================================================ */

:root { --c-sleep: #5B8DEF; --c-build: #E0574F; --c-satu: #4CAF7D; }

/* calendar category colors (dots + day tiles) */
.cal__day--sleepover { border-color: rgba(91,141,239,.55); background: rgba(91,141,239,.16); }
.cal__day--sleepover i { background: var(--c-sleep); }
.cal__day--satubali { border-color: rgba(76,175,125,.5); background: rgba(76,175,125,.14); }
.cal__day--satubali i { background: var(--c-satu); }
.cal__day--builders { border-color: rgba(224,87,79,.45); background: rgba(224,87,79,.12); }
.cal__day--builders i { background: var(--c-build); }
.cal__legend .l-sleep { background: var(--c-sleep); }
.cal__legend .l-satu { background: var(--c-satu); }
.cal__legend .l-build { background: var(--c-build); }

/* quick "next" links */
.next-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; font-size: 14.5px; font-weight: 600; }
.next-links button { display: flex; align-items: center; gap: 8px; padding: 4px 0; transition: opacity .2s ease; }
.next-links button:hover { opacity: .75; }
.next-links i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.next-links .nl-sleep { color: var(--c-sleep); } .next-links .nl-sleep i { background: var(--c-sleep); }
.next-links .nl-build { color: var(--c-build); } .next-links .nl-build i { background: var(--c-build); }
.next-links .nl-satu { color: var(--c-satu); } .next-links .nl-satu i { background: var(--c-satu); }

/* ---------- the life map ---------- */
.lifemap { position: relative; margin-top: 72px; padding: 0 clamp(4px, 2vw, 24px); }
.lifemap__line {
  position: absolute; left: 0; right: 0; top: 130px; height: 2px;
  background: linear-gradient(90deg, var(--line-dark), var(--silver-55) 40%, var(--gold));
}
.lifemap__line::after {
  content: ""; position: absolute; right: -2px; top: -5px;
  border: 6px solid transparent; border-left: 9px solid var(--gold);
}
.lifemap__stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); position: relative; }
.lifestop { text-align: center; position: relative; }
.lifestop__photo {
  width: clamp(88px, 9vw, 116px); height: clamp(88px, 9vw, 116px);
  margin: 0 auto; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--line-dark);
  transition: transform .3s ease, border-color .3s ease;
}
.lifestop:hover .lifestop__photo { transform: translateY(-4px); border-color: var(--gold); }
.lifestop__photo img { width: 100%; height: 100%; object-fit: cover; }
.lifestop__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--black); border: 2px solid var(--silver);
  margin: 16px auto 0; position: relative; z-index: 2;
}
.lifestop:last-child .lifestop__dot { border-color: var(--gold); background: var(--gold); }
.lifestop__name { margin-top: 16px; font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: .08em; }
.lifestop__desc { margin-top: 8px; font-size: 14.5px; color: var(--silver-55); max-width: 30ch; margin-left: auto; margin-right: auto; }
.lifemap__ends {
  display: flex; justify-content: space-between; margin-top: 28px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-55);
}
.lifemap__ends b { color: var(--gold); font-weight: 600; }
@media (max-width: 700px) {
  .lifemap__line { left: 24px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--line-dark), var(--silver-55) 40%, var(--gold)); }
  .lifemap__line::after { right: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--gold); }
  .lifemap__stops { grid-template-columns: 1fr; gap: 44px; }
  .lifestop { display: grid; grid-template-columns: 56px auto 1fr; gap: 16px; text-align: left; align-items: center; }
  .lifestop__photo { width: 76px; height: 76px; grid-column: 2; margin: 0; }
  .lifestop__dot { grid-column: 1; margin: 0 auto; }
  .lifestop div:last-child { grid-column: 3; }
  .lifestop__name, .lifestop__desc { margin-left: 0; }
  .lifemap__ends { flex-direction: column; gap: 6px; margin-left: 48px; }
}

/* ---------- satu bali v2 ---------- */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.6vw, 28px); margin-top: 44px; }
.pillar {
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: var(--surface-dark); padding: clamp(22px, 3.4vw, 36px); text-align: center;
}
.pillar--top { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; width: 100%;
  background: rgba(184,135,60,.10); border-color: rgba(184,135,60,.35); }
@media (max-width: 700px) { .pillars { grid-template-columns: 1fr; } .pillar--top { max-width: none; } }
.pillar__emoji { font-size: 1.6rem; }
.pillar__name { margin-top: 10px; font-weight: 700; letter-spacing: .1em; }
.pillar__tag { margin-top: 4px; font-style: italic; color: var(--gold); font-size: 15px; }
.pillar__desc { margin-top: 10px; font-size: 14.5px; color: var(--silver-55); }

.ep-card--photo { position: relative; overflow: hidden; color: var(--silver); border-color: var(--line-dark); }
.ep-card--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ep-card--photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(26,23,20,.94) 20%, rgba(26,23,20,.62)); }
.ep-card--photo > *:not(img) { position: relative; z-index: 2; }
.ep-card__badge {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  font-size: 10px; letter-spacing: .24em; font-weight: 700; color: var(--black);
  background: var(--gold); border-radius: var(--pill); padding: 5px 12px;
}
.ep-card--photo .ep-card__desc, .ep-card--photo .ep-card__when { color: var(--silver-55); }

/* one circle visual */
.onecircle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.6vw, 28px); margin-top: 44px; }
.onecircle__five { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 420px; }
.onecircle__c {
  border: 1px solid var(--line-dark); border-radius: var(--pill);
  padding: 10px 18px; font-size: 11px; letter-spacing: .16em; font-weight: 600; color: var(--silver-55);
}
.onecircle__arrow { font-size: 1.6rem; color: var(--gold); }
.onecircle__one {
  width: clamp(150px, 18vw, 200px); height: clamp(150px, 18vw, 200px);
  border-radius: 50%; border: 2px solid var(--gold);
  display: grid; place-items: center; text-align: center;
  font-weight: 700; letter-spacing: .18em; color: var(--gold); font-size: 14px;
  box-shadow: 0 0 0 10px rgba(184,135,60,.07);
}

/* ============================================================
   v7 — Satu Bali: movie poster hero, venn, visual sections
   ============================================================ */

/* ---------- movie poster hero ---------- */
.satu-poster {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--silver); background: var(--black); text-align: center;
}
.satu-poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.satu-poster__scrim { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,23,20,.92) 0%, rgba(26,23,20,.35) 38%, rgba(26,23,20,.55) 70%, rgba(26,23,20,.96) 100%); }
.satu-poster__bar { position: relative; z-index: 3; height: clamp(34px, 5vh, 54px); background: #0d0b0a; flex: none; }
.satu-poster__mid { position: relative; z-index: 3; padding: 20px var(--pad-x); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.satu-poster__presents { font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--silver-55); }
.satu-poster__title {
  margin-top: 18px; font-weight: 700; letter-spacing: .22em; line-height: 1.02;
  font-size: clamp(3rem, 11vw, 7.5rem);
  text-shadow: 0 4px 40px rgba(26,23,20,.8);
}
.satu-poster__title .gold { letter-spacing: inherit; }
.satu-poster__tag { margin-top: 18px; font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 600; letter-spacing: .08em; }
.satu-poster__sub { margin-top: 8px; color: var(--silver-55); letter-spacing: .14em; font-size: 13px; text-transform: uppercase; }
.satu-poster__date {
  margin-top: 30px; display: inline-block;
  border: 1px solid rgba(184,135,60,.5); border-radius: var(--pill);
  padding: 10px 24px; color: var(--gold);
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
}
.satu-poster__credits {
  position: relative; z-index: 3; padding: 0 var(--pad-x) 16px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--silver-55); line-height: 1.9;
}
.satu-poster__credits b { color: var(--silver); font-weight: 600; }

/* ---------- what-is: text + photo stack ---------- */
.satu-what { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .satu-what { grid-template-columns: 1fr; } }
.satu-what__stack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 16px); }
.satu-what__stack img { border-radius: var(--radius); width: 100%; aspect-ratio: 1; object-fit: cover; }
.satu-what__stack img:nth-child(1) { transform: rotate(-2deg); }
.satu-what__stack img:nth-child(2) { transform: rotate(2deg) translateY(14px); }
.satu-what__stack img:nth-child(3) { transform: rotate(1.5deg); }
.satu-what__stack img:nth-child(4) { transform: rotate(-1.5deg) translateY(14px); }

/* ---------- venn: three-circle map ---------- */
.venn { position: relative; max-width: 720px; margin: 56px auto 0; }
.venn__row { display: flex; justify-content: center; }
.venn__row + .venn__row { margin-top: -34px; }
.venn__row--two { gap: clamp(0px, 2vw, 20px); }
.venn__c {
  width: clamp(200px, 30vw, 300px); height: clamp(200px, 30vw, 300px);
  border-radius: 50%; border: 1.5px solid rgba(233,231,227,.35);
  background: rgba(233,231,227,.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px; position: relative;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: border-color .3s ease, transform .3s ease;
}
.venn__c:hover { border-color: var(--gold); transform: scale(1.03); z-index: 3; }
.venn__c--top { border-color: rgba(184,135,60,.55); background: rgba(184,135,60,.08); z-index: 2; }
.venn__emoji { font-size: 1.7rem; }
.venn__name { margin-top: 8px; font-weight: 700; letter-spacing: .12em; font-size: clamp(.85rem, 1.6vw, 1rem); }
.venn__tag { margin-top: 4px; font-style: italic; color: var(--gold); font-size: clamp(.8rem, 1.5vw, .92rem); }
.venn__desc { margin-top: 8px; font-size: clamp(.75rem, 1.4vw, .85rem); color: var(--silver-55); max-width: 24ch; }
.venn__center {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 4;
  font-size: 11px; letter-spacing: .3em; font-weight: 700; color: var(--gold);
  background: var(--black); border: 1px solid rgba(184,135,60,.5); border-radius: var(--pill);
  padding: 8px 18px; pointer-events: none;
}
@media (max-width: 560px) {
  .venn__row--two { flex-direction: column; align-items: center; gap: 0; }
  .venn__row + .venn__row { margin-top: -26px; }
  .venn__c { width: min(76vw, 300px); height: min(76vw, 300px); }
  .venn__center { display: none; }
}

/* ---------- one circle: photo chips ---------- */
.onecircle__chip { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.onecircle__pic {
  width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px);
  border-radius: 50%; overflow: hidden; border: 2px solid var(--line-dark);
}
.onecircle__pic img { width: 100%; height: 100%; object-fit: cover; }
.onecircle__lab { font-size: 10px; letter-spacing: .16em; font-weight: 600; color: var(--silver-55); }
.onecircle__five { max-width: 560px; gap: clamp(12px, 2vw, 24px); }

/* ---------- what happens: visual tiles ---------- */
.happens { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.8vw, 20px); margin-top: 44px; }
@media (max-width: 1000px) { .happens { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .happens { grid-template-columns: repeat(2, 1fr); } }
.happen {
  border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden;
  background: rgba(26,23,20,.02);
  transition: transform .25s ease, border-color .25s ease;
}
.happen:hover { transform: translateY(-4px); border-color: rgba(26,23,20,.3); }
.happen img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.happen__body { padding: 14px 16px 18px; }
.happen__name { font-weight: 700; font-size: .98rem; letter-spacing: -0.01em; }
.happen__line { margin-top: 4px; font-size: 12.5px; color: var(--black-60); line-height: 1.5; }

/* ============================================================
   v8 — campaign promises: geometry path (circle · line · triangle)
   ============================================================ */
.vals { position: relative; margin-top: 64px; }
.vals__line {
  position: absolute; left: 6%; right: 6%; top: 54px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--silver-55) 15%, var(--gold) 85%, transparent);
}
.vals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.6vw, 32px); position: relative; }
.val { text-align: center; }
.val__badge {
  width: 108px; height: 108px; margin: 0 auto;
  display: grid; place-items: center;
  background: var(--black); position: relative; z-index: 2;
  transition: transform .3s ease;
}
.val:hover .val__badge { transform: translateY(-5px); }
.val__badge svg { width: 100%; height: 100%; overflow: visible; }
.val__name { margin-top: 18px; font-weight: 700; font-size: clamp(1rem, 1.9vw, 1.2rem); letter-spacing: -0.01em; }
.val__desc { margin-top: 8px; font-size: 14px; color: var(--silver-55); max-width: 26ch; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .vals__line { left: 50%; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto;
    background: linear-gradient(180deg, transparent, var(--silver-55) 15%, var(--gold) 85%, transparent); }
  .vals__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ============================================================
   v9 — story page: black cover, 1-in-4, Joe's film strip
   ============================================================ */

/* black cover */
.story-cover {
  min-height: 100svh; background: var(--black); color: var(--silver);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--band-y) var(--pad-x); position: relative;
}
.story-cover__q {
  font-size: clamp(1.9rem, 5.4vw, 3.8rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.18; max-width: 24ch;
}
.story-cover__sub { margin-top: 28px; color: var(--silver-55); font-size: clamp(1rem, 1.9vw, 1.2rem); }

/* 1 in 4 */
.oneinfour { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; margin-top: 44px; }
.oneinfour__figs { display: flex; gap: clamp(10px, 2vw, 22px); }
.oneinfour__figs svg { width: clamp(44px, 6vw, 72px); height: auto; }
.oneinfour__figs svg * { stroke: rgba(26,23,20,.35); }
.oneinfour__figs svg.is-lonely * { stroke: var(--gold); }
.oneinfour__num { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.oneinfour__num .gold { display: block; font-size: .32em; letter-spacing: .1em; font-weight: 600; margin-top: 8px; }

/* Joe's film strip */
.joe-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: 44px; }
@media (max-width: 960px) { .joe-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .joe-strip { grid-template-columns: 1fr; } }
.joe-beat2 {
  border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden;
  background: rgba(26,23,20,.02); display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease;
}
.joe-beat2:hover { transform: translateY(-4px); }
.joe-beat2 img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(.8); }
.joe-beat2--found img { filter: none; }
.joe-beat2--found { border-color: rgba(184,135,60,.5); background: rgba(184,135,60,.06); }
.joe-beat2__body { padding: 16px 18px 20px; flex: 1; }
.joe-beat2__week { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--black-60); }
.joe-beat2--found .joe-beat2__week { color: var(--gold); }
.joe-beat2__line { margin-top: 8px; font-size: 14px; color: rgba(26,23,20,.8); line-height: 1.55; }

/* story build section logo */
.story-mark { width: clamp(64px, 8vw, 96px); margin: 0 auto 28px; display: block; }

/* ============================================================
   v10 — story: photo cover + phone, joe notification path,
   photo satu teaser, story vals
   ============================================================ */

/* photo cover with phone popping out */
.story-cover2 {
  position: relative; min-height: 100svh; overflow: hidden; color: var(--silver);
  display: flex; align-items: center; padding: var(--band-y) var(--pad-x);
}
.story-cover2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-cover2__scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(26,23,20,.94) 30%, rgba(26,23,20,.55) 65%, rgba(26,23,20,.35)); }
.story-cover2__inner {
  position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .story-cover2__inner { grid-template-columns: 1fr; } }
.story-cover2__q { font-size: clamp(2.4rem, 6.5vw, 4.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; max-width: 13ch; }
.story-cover2__sub { margin-top: 20px; color: var(--silver-55); font-size: clamp(1rem, 1.9vw, 1.2rem); }

/* the phone */
.phone {
  width: min(280px, 74vw); margin: 0 auto;
  background: #100e0d; border: 1.5px solid rgba(233,231,227,.25);
  border-radius: 36px; padding: 14px 12px 22px;
  transform: rotate(6deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  transition: transform .4s ease;
}
.phone:hover { transform: rotate(3deg) translateY(-6px); }
.phone__notch { width: 90px; height: 22px; background: #000; border-radius: 12px; margin: 0 auto 18px; }
.phone__time { text-align: center; font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
.phone__date { text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-55); margin-top: 4px; }
.phone__notifs { margin-top: 20px; display: grid; gap: 8px; }
.phone__n {
  background: rgba(233,231,227,.08); border-radius: 14px; padding: 10px 12px;
  font-size: 11.5px; line-height: 1.45; color: var(--silver-55);
}
.phone__n b { color: var(--silver); display: block; font-size: 12px; }
.phone__n--empty { text-align: center; color: var(--gold); background: rgba(184,135,60,.12); font-weight: 600; }

/* joe path — dashed journey with notifications */
.joepath { position: relative; margin-top: 56px; }
.joepath__line {
  position: absolute; left: 5%; right: 5%; top: 64px; height: 0;
  border-top: 2px dashed rgba(26,23,20,.28);
}
.joepath__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 28px); position: relative; }
@media (max-width: 900px) {
  .joepath__line { left: 50%; top: 5%; bottom: 5%; right: auto; height: auto; border-top: 0; border-left: 2px dashed rgba(26,23,20,.28); }
  .joepath__grid { grid-template-columns: 1fr; gap: 40px; max-width: 420px; margin: 0 auto; }
}
.joestop { text-align: center; position: relative; }
.joestop__pic {
  width: clamp(96px, 11vw, 132px); height: clamp(96px, 11vw, 132px);
  border-radius: 50%; overflow: hidden; margin: 0 auto;
  border: 3px solid var(--silver); box-shadow: 0 10px 26px rgba(26,23,20,.22);
  position: relative; z-index: 2; background: var(--black);
}
.joestop__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85); }
.joestop--found .joestop__pic { border-color: var(--gold); }
.joestop--found .joestop__pic img { filter: none; }
.joestop__notif {
  margin: 18px auto 0; max-width: 260px; text-align: left;
  background: #fff; border: 1px solid var(--line-light); border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 8px 22px rgba(26,23,20,.1);
  font-size: 12.5px; line-height: 1.5; color: rgba(26,23,20,.75);
  transition: transform .25s ease;
}
.joestop:hover .joestop__notif { transform: translateY(-4px); }
.joestop__app { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--black-60); margin-bottom: 5px; }
.joestop__app i { width: 16px; height: 16px; border-radius: 5px; background: var(--black); display: grid; place-items: center; font-style: normal; font-size: 9px; }
.joestop--found .joestop__notif { background: var(--black); color: var(--silver-55); border-color: rgba(184,135,60,.4); }
.joestop--found .joestop__app { color: var(--gold); }
.joestop--found .joestop__app i { background: var(--gold); }
.joestop__notif b { color: inherit; }
.joestop--found .joestop__notif b { color: var(--silver); }

/* photo satu teaser */
.satu-teaser--photo { position: relative; overflow: hidden; padding: clamp(88px, 14vw, 170px) var(--pad-x); }
.satu-teaser--photo:hover { background: var(--black); }
.satu-teaser__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.satu-teaser--photo:hover .satu-teaser__bg { transform: scale(1.03); }
.satu-teaser__veil { position: absolute; inset: 0; z-index: 1; background: rgba(26,23,20,.68); }
.satu-teaser--photo > *:not(.satu-teaser__bg):not(.satu-teaser__veil) { position: relative; z-index: 2; }
.satu-teaser--photo .satu-lockup { font-size: clamp(2.2rem, 7vw, 4.4rem); }

/* story vals: 3 columns */
.vals--three .vals__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .vals--three .vals__grid { grid-template-columns: 1fr; } }

/* ============================================================
   COMMUNITY PAGE — one action: join the community
   ============================================================ */

:root { --cream: #F6F3EC; }
.band--cream { background: var(--cream); color: var(--black); }
.band--cream .label { color: var(--black-60); }

/* primary action button — the green one, used sparingly */
.btn--join { background: #25A55F; color: #fff; border-color: #25A55F; }
.btn--join:hover { background: #1f9152; opacity: 1; }
.btn--lg { padding: 18px 38px; font-size: 17px; }

/* sticky nav join button — appears once the hero is gone */
.nav__join { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.nav__join.show { opacity: 1; pointer-events: auto; }

/* ---------- §1 hero ---------- */
.chero { min-height: 100svh; }
@media (max-width: 760px) { .chero { min-height: 85svh; } }
.chero__eyebrow { color: var(--gold); }
.chero h1 { max-width: 15ch; }
.chero__sub { margin-top: 20px; max-width: 52ch; font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(233,231,227,.9); }
.chero__under { margin-top: 18px; font-size: 14.5px; }

/* ---------- §2 numbers ---------- */
.cstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 52px); margin-top: 44px; text-align: center; }
@media (max-width: 700px) { .cstats { grid-template-columns: 1fr 1fr; gap: 36px 20px; } }
.cstat__num { font-size: clamp(2.4rem, 6.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.cstat__lab { margin-top: 10px; font-size: 13.5px; color: var(--black-60); }
.band--dark .cstat__lab { color: var(--silver-55); }

/* ---------- §3 genre grid ---------- */
.genres { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.2vw, 24px); margin-top: 44px; }
@media (max-width: 1000px) { .genres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .genres { grid-template-columns: 1fr; } }
.genre {
  display: block; border: 1px solid var(--line-light); border-radius: var(--radius);
  overflow: hidden; background: rgba(26,23,20,.02);
  transition: border-color .3s ease, transform .3s ease;
}
.genre:hover { border-color: rgba(26,23,20,.32); transform: translateY(-4px); }
.genre__pic { overflow: hidden; }
.genre__pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s ease; }
.genre:hover .genre__pic img { transform: scale(1.03); }
.genre__body { padding: clamp(18px, 2.4vw, 24px); }
.genre__emoji { font-size: 1.3rem; }
.genre__name { margin-top: 8px; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.genre__line { margin-top: 8px; font-size: 14.5px; color: var(--black-60); }

/* ---------- §4 join grid ---------- */
.joingrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-top: 44px; }
@media (max-width: 860px) { .joingrid { grid-template-columns: 1fr; } }
.joincard {
  border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 4px);
  padding: clamp(22px, 3.4vw, 38px); display: flex; flex-direction: column;
  background: rgba(26,23,20,.02);
}
.joincard--main {
  grid-column: span 2; background: var(--black); color: var(--silver);
  border-color: rgba(184,135,60,.55); box-shadow: 0 0 0 1px rgba(184,135,60,.25);
}
@media (max-width: 860px) { .joincard--main { grid-column: span 1; } }
.joincard__kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.joincard--main .joincard__kicker { color: var(--gold); }
.joincard--main .joincard__kicker::before { content: "🟢 "; }
.joincard__name { margin-top: 10px; font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.6rem); letter-spacing: -0.015em; }
.joincard__desc { margin-top: 12px; font-size: 15px; color: var(--black-60); flex: 1; }
.joincard--main .joincard__desc { color: var(--silver-55); }
.joincard .btn { margin-top: 22px; align-self: flex-start; }

/* ---------- §5 volunteer ---------- */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 44px; }
@media (max-width: 800px) { .perks { grid-template-columns: 1fr; gap: 26px; } }
.perk__icon { font-size: 1.7rem; }
.perk__name { margin-top: 10px; font-weight: 700; font-size: 1.02rem; }
.perk__line { margin-top: 6px; font-size: 14.5px; color: var(--black-60); }
.volform { margin-top: 40px; border-top: 1px solid var(--line-light); padding-top: 28px; }
.volform__lab { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--black-60); }
.volform__fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.volform__f { font-size: 13px; border: 1px solid var(--line-light); border-radius: var(--pill); padding: 7px 14px; color: var(--black-60); }

/* ---------- §6 family ---------- */
.family { display: flex; gap: clamp(18px, 3vw, 40px); margin-top: 44px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.family::-webkit-scrollbar { display: none; }
@media (min-width: 880px) { .family { justify-content: center; overflow: visible; } }
.fam { text-align: center; flex: none; }
.fam__pic {
  width: clamp(84px, 9vw, 116px); height: clamp(84px, 9vw, 116px);
  border-radius: 50%; overflow: hidden; border: 2px solid var(--line-light);
  transition: border-color .3s ease, transform .3s ease;
}
.fam:hover .fam__pic { border-color: var(--gold); transform: translateY(-4px); }
.fam__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s ease; }
.fam:hover .fam__pic img { filter: none; }
.fam__name { margin-top: 12px; font-weight: 700; font-size: 15px; }

/* ---------- §8 upcoming ---------- */
.ucards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-top: 40px; }
@media (max-width: 900px) { .ucards { grid-template-columns: 1fr; } }
.ucard { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; background: var(--surface-dark); display: flex; flex-direction: column; }
.ucard img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ucard__body { padding: clamp(18px, 2.6vw, 26px); display: flex; flex-direction: column; flex: 1; }
.ucard__cat { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.ucard__name { margin-top: 8px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.ucard__when { margin-top: 6px; font-size: 13px; color: var(--silver-55); }
.ucard__desc { margin-top: 10px; font-size: 14px; color: var(--silver-55); flex: 1; }
.ucard .btn { margin-top: 18px; align-self: flex-start; }
.uempty { text-align: center; }

/* ---------- §9 FAQ ---------- */
.faq { max-width: 780px; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 600; font-size: clamp(1rem, 2vw, 1.18rem); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--gold); transition: transform .25s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq__a { padding: 0 44px 24px 0; font-size: 15.5px; color: var(--black-60); line-height: 1.65; }

/* ---------- §10 final CTA ---------- */
.finalcta__line { margin-top: 20px; color: var(--silver-55); font-size: clamp(1rem, 2vw, 1.15rem); }
.finalcta__alt { margin-top: 20px; font-size: 14px; }

/* ============================================================
   COMMUNITY v2 — face wall hero, genre tiles, join phone,
   volunteer floor, family roles, social-proof CTA
   ============================================================ */

/* ---------- hero: a wall of the people themselves ---------- */
.cwall {
  position: relative; min-height: 100svh; background: var(--black); color: var(--silver);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; padding: 0;
}
@media (max-width: 760px) { .cwall { min-height: 88svh; } }
.wall { display: grid; gap: clamp(8px, 1.2vw, 14px); padding: clamp(18px, 3vw, 34px) 0; flex: none; }
.wall__row { display: flex; gap: clamp(8px, 1.2vw, 14px); width: max-content; }
.wall__row--l { animation: wallL 70s linear infinite; }
.wall__row--r { animation: wallR 85s linear infinite; }
@keyframes wallL { to { transform: translateX(-50%); } }
@keyframes wallR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wall__a {
  width: clamp(58px, 7vw, 92px); height: clamp(58px, 7vw, 92px);
  border-radius: 50%; overflow: hidden; flex: none;
  border: 1px solid rgba(233,231,227,.16);
}
.wall__a img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45); }
.cwall__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 66% 54% at 50% 50%,
    rgba(26,23,20,.97) 0%, rgba(26,23,20,.9) 42%, rgba(26,23,20,.55) 74%, rgba(26,23,20,.25) 100%);
}
.cwall__body {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(24px, 5vw, 60px) var(--pad-x);
}
.cwall__eyebrow { color: var(--gold); }
.cwall__body h1 { max-width: 16ch; text-shadow: 0 2px 34px rgba(26,23,20,.85); }
.cwall__sub { margin-top: 20px; max-width: 50ch; font-size: clamp(1rem, 2vw, 1.22rem); color: rgba(233,231,227,.88); }
.cwall__live {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--silver-55);
}
.cwall__live i { width: 8px; height: 8px; border-radius: 50%; background: #25A55F; animation: blip 2s ease-in-out infinite; }

/* ---------- §3 genre tiles ---------- */
.genres { grid-template-columns: repeat(4, 1fr); }
.genre { position: relative; border: 0; background: none; border-radius: calc(var(--radius) + 4px); }
.genre__pic { position: relative; border-radius: calc(var(--radius) + 4px); aspect-ratio: 3/4; }
.genre__pic img { aspect-ratio: 3/4; height: 100%; }
.genre__pic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top, rgba(26,23,20,.92) 8%, rgba(26,23,20,.35) 52%, rgba(26,23,20,.1) 100%);
}
.genre__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  background: rgba(233,231,227,.14); color: var(--silver);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--pill); padding: 6px 12px;
}
.genre__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(18px, 2.4vw, 26px); color: var(--silver);
}
.genre__name { color: var(--silver); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.genre__line { color: rgba(233,231,227,.7); }
.genre__go { margin-top: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold); }

/* ---------- §4 join: the phone + the ways in ---------- */
.joinwrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 48px; }
@media (max-width: 900px) { .joinwrap { grid-template-columns: 1fr; gap: 40px; } }
.wa { width: min(330px, 88vw); margin: 0 auto; background: #0d0b0a; border: 1.5px solid rgba(26,23,20,.2);
  border-radius: 38px; padding: 12px 10px 18px; box-shadow: 0 30px 70px rgba(26,23,20,.28); }
.wa__notch { width: 100px; height: 22px; background: #000; border-radius: 12px; margin: 0 auto 14px; }
.wa__head { display: flex; align-items: center; gap: 10px; padding: 0 10px 12px; border-bottom: 1px solid rgba(233,231,227,.1); }
.wa__ava { width: 38px; height: 38px; border-radius: 50%; background: #25A55F; display: grid; place-items: center; font-size: 17px; flex: none; }
.wa__name { color: var(--silver); font-weight: 600; font-size: 14px; line-height: 1.2; }
.wa__meta { color: var(--silver-55); font-size: 11px; margin-top: 2px; }
.wa__feed { padding: 14px 10px 0; display: grid; gap: 9px; }
.wa__m { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45;
  background: rgba(233,231,227,.09); color: var(--silver-55); border-bottom-left-radius: 5px; }
.wa__m b { color: var(--silver); display: block; font-size: 11px; margin-bottom: 2px; }
.wa__m--me { margin-left: auto; background: rgba(37,165,95,.22); color: #cfeeda; border-bottom-right-radius: 5px; border-bottom-left-radius: 14px; }
.wa__typing { font-size: 11px; color: var(--silver-55); padding: 6px 12px; font-style: italic; }

.ways { display: grid; gap: clamp(12px, 1.8vw, 18px); }
.way {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 26px); background: rgba(26,23,20,.02);
  transition: transform .25s ease, border-color .25s ease;
}
.way:hover { transform: translateY(-3px); border-color: rgba(26,23,20,.3); }
.way__ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 22px; background: rgba(26,23,20,.06); }
.way__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.way__line { margin-top: 4px; font-size: 14px; color: var(--black-60); }
.way__cta { margin-left: auto; flex: none; }
@media (max-width: 560px) { .way { flex-wrap: wrap; } .way__cta { margin-left: 0; width: 100%; } .way__cta .btn { width: 100%; } }
.way--main { background: var(--black); color: var(--silver); border-color: rgba(37,165,95,.45); box-shadow: 0 0 0 1px rgba(37,165,95,.22); }
.way--main .way__ico { background: #25A55F; }
.way--main .way__line { color: var(--silver-55); }

/* ---------- §5 volunteer floor ---------- */
.volstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 16px); margin-top: 40px; }
@media (max-width: 760px) { .volstrip { grid-template-columns: 1fr 1fr; } }
.volshot { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.volshot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.volshot:hover img { transform: scale(1.04); }
.volshot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,20,.8), transparent 55%); }
.volshot__job {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px;
  color: var(--silver); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
}
.roles { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.role { font-size: 13px; font-weight: 600; border: 1px solid var(--line-light); border-radius: var(--pill); padding: 9px 16px; }
.role--on { background: var(--black); color: var(--silver); border-color: var(--black); }

/* ---------- §6 family roles ---------- */
.famroles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.6vw, 30px); margin-top: 48px; }
@media (max-width: 860px) { .famroles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .famroles { grid-template-columns: 1fr; } }
.famrole { text-align: center; }
.famrole__pic {
  width: clamp(92px, 10vw, 128px); height: clamp(92px, 10vw, 128px); margin: 0 auto;
  border-radius: 50%; overflow: hidden; border: 2px solid var(--line-dark);
  transition: border-color .3s ease, transform .3s ease;
}
.famrole:hover .famrole__pic { border-color: var(--gold); transform: translateY(-4px); }
.famrole__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .45s ease; }
.famrole:hover .famrole__pic img { filter: none; }
.famrole__name { margin-top: 16px; font-weight: 700; font-size: clamp(1rem, 2vw, 1.15rem); letter-spacing: .04em; }
.famrole__line { margin-top: 7px; font-size: 14px; color: var(--silver-55); max-width: 26ch; margin-left: auto; margin-right: auto; }

/* ---------- §10 CTA social proof ---------- */
.stackrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; }
.stack { display: flex; }
.stack img {
  width: clamp(40px, 5vw, 52px); height: clamp(40px, 5vw, 52px); border-radius: 50%;
  object-fit: cover; border: 2px solid var(--black); margin-left: -14px;
}
.stack img:first-child { margin-left: 0; }
.stack__more {
  width: clamp(40px, 5vw, 52px); height: clamp(40px, 5vw, 52px); border-radius: 50%;
  display: grid; place-items: center; margin-left: -14px;
  background: #25A55F; color: #fff; border: 2px solid var(--black);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.stackrow__lab { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); text-align: left; }
@media (max-width: 520px) { .stackrow { flex-direction: column; gap: 12px; } .stackrow__lab { text-align: center; } }

/* genre tiles: restate the breakpoints (the v2 rule above resets the columns) */
@media (max-width: 1060px) { .genres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .genres { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .genre__pic, .genre__pic img { aspect-ratio: 4/3; } }
/* keep the caption legible however long it runs */
.genre__pic::after { background: linear-gradient(to top, rgba(26,23,20,.95) 12%, rgba(26,23,20,.62) 46%, rgba(26,23,20,.12) 100%); }

/* ============================================================
   COMMUNITY v3 — mixed wall, visual stats, app switcher,
   volunteer pick-board, illustrated family
   ============================================================ */

/* ---------- hero wall: solo circles, pair + group pills, seamless loop ---------- */
.wall { gap: clamp(8px, 1.2vw, 14px); }
.wall__row { gap: 0; }
.wall__a { margin-right: clamp(8px, 1.2vw, 14px); }            /* margin, not gap → the -50% loop lands exactly */
.wall__a--pair  { width: calc(clamp(58px, 7vw, 92px) * 1.9); border-radius: 999px; }
.wall__a--group { width: calc(clamp(58px, 7vw, 92px) * 2.9); border-radius: 999px; }
.wall__a img { filter: grayscale(.35); }
.wall__row--l2 { animation: wallL 95s linear infinite; }
.wall__row--r2 { animation: wallR 110s linear infinite; }
@media (max-width: 760px) { .wall__row--l2, .wall__row--r2 { display: none; } }

/* ---------- §2 visual stats ---------- */
.vstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 20px); margin-top: 44px; }
@media (max-width: 900px) { .vstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .vstats { grid-template-columns: 1fr; } }
.vstat {
  border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px) clamp(18px, 2.4vw, 26px);
  text-align: left; background: rgba(233,231,227,.03); transition: border-color .3s ease, transform .3s ease;
}
.vstat:hover { border-color: rgba(184,135,60,.55); transform: translateY(-3px); }
.vstat__vis { height: 58px; display: flex; align-items: center; }
.vstat__num { margin-top: 18px; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.vstat__lab { margin-top: 8px; font-size: 13.5px; color: var(--silver-55); }
.mini { display: flex; }
.mini img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--black); margin-left: -12px; }
.mini img:first-child { margin-left: 0; }
.mini__more { width: 40px; height: 40px; border-radius: 50%; margin-left: -12px; display: grid; place-items: center; background: var(--gold); color: var(--black); font-size: 12px; font-weight: 700; font-style: normal; border: 2px solid var(--black); }
.vstat__vis svg { height: 54px; width: auto; }
.flags { font-size: 28px; letter-spacing: -.12em; line-height: 1; }
.dots12 { display: grid; grid-template-columns: repeat(6, 14px); gap: 6px; }
.dots12 i { width: 14px; height: 14px; border-radius: 4px; background: var(--gold); display: block; }
.dots12 i:nth-child(n+11) { background: rgba(184,135,60,.4); }

/* ---------- §4 join: app switcher ---------- */
.way[data-app] { cursor: pointer; user-select: none; }
.way--on { background: var(--black); color: var(--silver); border-color: var(--black); }
.way--on .way__line { color: var(--silver-55); }
.way--on .way__ico { background: rgba(233,231,227,.12); }
.way--on.way--wa { border-color: rgba(37,165,95,.5); box-shadow: 0 0 0 1px rgba(37,165,95,.25); }
.way--on.way--wa .way__ico { background: #25A55F; }
.way--on.way--ig { border-color: rgba(214,72,135,.55); box-shadow: 0 0 0 1px rgba(214,72,135,.25); }
.way--on.way--ig .way__ico { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.way--on.way--nt { border-color: rgba(184,135,60,.6); box-shadow: 0 0 0 1px rgba(184,135,60,.3); }
.way--on.way--nt .way__ico { background: var(--gold); }
.way--on .btn--ghost { color: var(--silver); border-color: rgba(233,231,227,.4); }
.way--on .btn--ghost:hover { background: var(--silver); color: var(--black); }
.way__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.way { position: relative; overflow: hidden; }
.way--on .way__bar { animation: wayBar 3s linear forwards; }
.joinwrap:hover .way--on .way__bar { animation-play-state: paused; }
@keyframes wayBar { to { transform: scaleX(1); } }
.way--main { background: none; color: inherit; border-color: var(--line-light); box-shadow: none; }
.way--main .way__ico { background: rgba(26,23,20,.06); }
.way--main .way__line { color: var(--black-60); }

.ph__screens { position: relative; min-height: 470px; }
.ph__screen { animation: phIn .4s ease both; }
@keyframes phIn { from { transform: translateY(10px); opacity: .5; } to { transform: none; opacity: 1; } }
.wa__cta { margin: 16px 10px 0; }
.wa__cta .btn { width: 100%; }
/* instagram screen */
.ig { color: var(--silver); padding: 6px 10px 0; }
.ig__top { display: flex; align-items: center; gap: 14px; }
.ig__ava { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); flex: none; }
.ig__ava div { width: 100%; height: 100%; border-radius: 50%; background: var(--black); display: grid; place-items: center; }
.ig__ava img { width: 30px; height: 30px; }
.ig__stats { display: flex; gap: 14px; }
.ig__stats div { text-align: center; font-size: 10px; color: var(--silver-55); line-height: 1.2; }
.ig__stats b { display: block; color: var(--silver); font-size: 14px; }
.ig__handle { margin-top: 12px; font-weight: 700; font-size: 13px; }
.ig__bio { font-size: 11.5px; color: var(--silver-55); line-height: 1.45; margin-top: 3px; }
.ig__bio b { color: var(--silver); font-weight: 600; }
.ig__follow { margin-top: 12px; display: block; text-align: center; border-radius: 9px; padding: 9px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 14px; border-top: 1px solid rgba(233,231,227,.1); padding-top: 12px; }
.ig__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* nomadtable screen */
.nt__head { display: flex; align-items: center; gap: 10px; padding: 0 10px 12px; border-bottom: 1px solid rgba(233,231,227,.1); }
.nt__pic { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.nt__m--host { background: rgba(184,135,60,.2); color: #f1dcb5; }
.nt__m--host b { color: var(--gold); }
.nt__count { font-size: 11px; color: var(--silver-55); padding: 8px 12px 0; display: flex; align-items: center; gap: 6px; }
.nt__count i { width: 64px; height: 4px; border-radius: 2px; background: rgba(233,231,227,.12); position: relative; overflow: hidden; }
.nt__count i::after { content: ""; position: absolute; inset: 0; width: 85%; background: var(--gold); }

/* ---------- §5 volunteer: the pick-board ---------- */
.volstrip { margin-top: 36px; }
.pickboard {
  margin-top: clamp(36px, 5vw, 60px); background: var(--black); color: var(--silver);
  border-radius: calc(var(--radius) + 6px); padding: clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { .pickboard { grid-template-columns: 1fr; } }
.pickboard h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--silver); }
.pickboard__sub { margin-top: 14px; color: var(--silver-55); max-width: 36ch; }
.pickboard__cta { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pickboard__cta .btn--primary { background: var(--gold); color: var(--black); border-color: var(--gold); }
.pickboard__cta .btn--primary:hover { background: #cf9b4a; border-color: #cf9b4a; }
.pickboard__note { font-size: 13px; color: var(--silver-55); }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 14px); }
@media (max-width: 560px) { .picks { grid-template-columns: 1fr 1fr; } }
.pick {
  text-align: left; cursor: pointer; border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: clamp(16px, 2vw, 22px); background: rgba(233,231,227,.03); color: var(--silver);
  transition: border-color .25s ease, background .25s ease, transform .25s ease; font: inherit; position: relative;
}
.pick:hover { transform: translateY(-3px); border-color: rgba(233,231,227,.35); }
.pick svg { width: 32px; height: 32px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pick__name { margin-top: 14px; font-weight: 700; font-size: 1rem; }
.pick__line { margin-top: 4px; font-size: 12.5px; color: var(--silver-55); line-height: 1.4; }
.pick__tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-dark); display: grid; place-items: center; font-size: 11px; color: var(--black); }
.pick--on { border-color: var(--gold); background: rgba(184,135,60,.12); }
.pick--on .pick__tick { background: var(--gold); border-color: var(--gold); }
.pick--on .pick__tick::after { content: "✓"; font-weight: 700; }

/* ---------- §6 illustrated family / host types ---------- */
.famrole__pic { background: rgba(233,231,227,.04); display: grid; place-items: center; }
.famrole__pic svg { width: 78%; height: 78%; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.famrole:hover .famrole__pic svg { transform: scale(1.06); }
.famrole__type { margin-top: 6px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }

/* ============================================================
   PARTNER v2 — eight doors, one form
   ============================================================ */
.phero { min-height: 92svh; }
@media (max-width: 760px) { .phero { min-height: 80svh; } }
.phero__eyebrow { color: var(--gold); }
.phero h1 { max-width: 13ch; }
.phero__sub { margin-top: 20px; max-width: 54ch; font-size: clamp(1rem, 2vw, 1.22rem); color: rgba(233,231,227,.9); }
.phero__under { margin-top: 18px; font-size: 14.5px; }

/* §2 proof points */
/* (the old partner .proof card styles were removed: they collided with the Home numbers panel) */

/* §3 the eight doors */
.doors8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: 44px; }
@media (max-width: 1060px) { .doors8 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .doors8 { grid-template-columns: 1fr; } }
.door8 {
  display: flex; flex-direction: column; border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 2px);
  background: #fff; overflow: hidden; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.door8:hover { transform: translateY(-4px); border-color: rgba(26,23,20,.35); box-shadow: 0 24px 50px rgba(26,23,20,.12); }
.door8__pic { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.door8__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.door8:hover .door8__pic img { transform: scale(1.05); }
.door8__num {
  position: absolute; top: 12px; left: 12px; font-size: 11px; letter-spacing: .18em; font-weight: 700; color: var(--silver);
  background: rgba(26,23,20,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--pill); padding: 6px 11px;
}
.door8__ico {
  position: absolute; right: 12px; bottom: -18px; width: 44px; height: 44px; border-radius: 12px; background: var(--black);
  display: grid; place-items: center; border: 3px solid #fff;
}
.door8__ico svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.door8__body { padding: clamp(22px, 2.4vw, 26px) clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px); display: flex; flex-direction: column; flex: 1; }
.door8__kicker { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.door8__name { margin-top: 6px; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.2; letter-spacing: -0.01em; }
.door8__line { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--black-60); }
.door8__for { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--black-60); font-style: italic; border-top: 1px solid var(--line-light); padding-top: 12px; }
.door8__cta { margin-top: auto; padding-top: 16px; }
.door8__cta .btn { width: 100%; }

/* §4 what you get */
.gets-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-dark); border-radius: var(--radius); }
.gets { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.gets th, .gets td { padding: 14px 16px; border-bottom: 1px solid var(--line-dark); text-align: center; white-space: nowrap; }
.gets th { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--silver-55); background: rgba(233,231,227,.03); }
.gets th:first-child, .gets td:first-child { text-align: left; position: sticky; left: 0; background: var(--black); color: var(--silver); font-weight: 500; }
.gets tr:last-child td { border-bottom: 0; }
.gets td i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(184,135,60,.16); color: var(--gold); font-style: normal; font-weight: 700; font-size: 13px; }
.gets td small { display: block; font-size: 11px; color: var(--silver-55); margin-top: 4px; }
.gets td.no { color: rgba(233,231,227,.18); }
.gets__hint { display: none; font-size: 12px; color: var(--silver-55); margin-top: 10px; }
@media (max-width: 760px) { .gets__hint { display: block; } }

/* §5 logos */
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2vw, 22px); margin-top: 36px; }
.logo {
  min-width: 200px; height: 84px; display: grid; place-items: center; padding: 0 28px;
  border: 1px solid var(--line-light); border-radius: var(--radius); background: #fff;
  filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.logo:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.logo img { max-height: 44px; max-width: 160px; }
.logo__word { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.logo__word small { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-top: 2px; }

/* §6 three steps */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 44px; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }
.step3 { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: #fff; border: 1px solid var(--line-light); }
.step3__n { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--gold); }
.step3__name { margin-top: 12px; font-weight: 700; font-size: 1.1rem; }
.step3__line { margin-top: 6px; font-size: 14.5px; color: var(--black-60); line-height: 1.55; }
.step3 + .step3::before {
  content: "→"; position: absolute; left: -22px; top: 40px; color: var(--gold); font-size: 20px;
}
@media (max-width: 760px) { .step3 + .step3::before { content: "↓"; left: 50%; top: -26px; transform: translateX(-50%); } }

/* §7 what we do not do */
.nobox { margin-top: clamp(36px, 5vw, 56px); background: var(--cream); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: clamp(24px, 3.4vw, 40px); }
.nobox__head { font-weight: 700; font-size: 1.2rem; }
.nobox ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.nobox li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--black); }
.nobox li b { font-weight: 600; }
.nobox li::before { content: "✕"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--black); color: var(--silver); margin-top: 2px; }

/* §9 form */
.pform { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 700px) { .pform { grid-template-columns: 1fr; } }
.pform__f { display: grid; gap: 7px; }
.pform__f--full { grid-column: 1 / -1; }
.pform label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--silver-55); }
.pform label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pform input, .pform select, .pform textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--silver); background: rgba(233,231,227,.05);
  border: 1px solid var(--line-dark); border-radius: 12px; padding: 14px 16px; outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.pform input:focus, .pform select:focus, .pform textarea:focus { border-color: var(--gold); background: rgba(233,231,227,.08); }
.pform select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8873C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.pform select option { color: var(--black); }
.pform textarea { min-height: 110px; resize: vertical; }
.pform__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.pform__submit .btn--primary { background: var(--gold); color: var(--black); border-color: var(--gold); }
.pform__submit .btn--primary:hover { background: #cf9b4a; border-color: #cf9b4a; }
.pform__note { font-size: 13px; color: var(--silver-55); }
.pform__done { display: none; margin-top: 36px; border: 1px solid rgba(184,135,60,.45); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px); background: rgba(184,135,60,.08); }
.pform__done.show { display: block; }
.pform.sent { display: none; }
.pform__done h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--silver); }
.pform__done p { margin-top: 10px; color: var(--silver-55); max-width: 56ch; }
.form-card { max-width: 860px; margin: 0 auto; }
.form-card__pick { display: block; margin-top: 18px; font-size: 13px; color: var(--silver-55); }
.form-card__pick b { color: var(--gold); }

/* ============================================================
   PARTNER v3 — the door plaque hero, visual proofs, photo doors,
   icon table, reach-out steps, the no-list, plaque closing
   ============================================================ */

/* ---------- hero: your name on the door ---------- */
.plaque-hero {
  position: relative; min-height: 100svh; background: var(--black); color: var(--silver); overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 5vw, 72px);
  padding: calc(var(--nav-h, 72px) + 40px) var(--pad-x) 64px;
}
@media (max-width: 900px) { .plaque-hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 48px; } }
.plaque-hero__bg { position: absolute; inset: 0; z-index: 0; }
.plaque-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.4); }
.plaque-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,23,20,.96) 30%, rgba(26,23,20,.55) 70%, rgba(26,23,20,.85)); }
.plaque-hero__txt { position: relative; z-index: 2; }
.plaque-hero__eyebrow { color: var(--gold); }
.plaque-hero h1 { max-width: 12ch; }
.plaque-hero__sub { margin-top: 20px; max-width: 50ch; font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(233,231,227,.88); }
.plaque-hero__under { margin-top: 18px; font-size: 14.5px; }

.plaque-wrap { position: relative; z-index: 2; display: grid; place-items: center; padding: 20px 0; }
.plaque {
  position: relative; width: min(440px, 100%); aspect-ratio: 1 / 1.18; border-radius: 22px;
  background: linear-gradient(160deg, #d9ad5c 0%, #B8873C 38%, #7d5a22 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.35);
  padding: 14px; transform: rotate(-2.5deg);
}
.plaque::before { /* the brushed sweep */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 46%, transparent 58%);
  background-size: 260% 100%; animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep { 0%, 15% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.plaque__in {
  height: 100%; border-radius: 14px; border: 1.5px solid rgba(26,23,20,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 30px); color: var(--black);
}
.plaque__screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d59a, #6a4a17); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.plaque__screw:nth-child(1) { top: 14px; left: 14px; } .plaque__screw:nth-child(2) { top: 14px; right: 14px; }
.plaque__screw:nth-child(3) { bottom: 14px; left: 14px; } .plaque__screw:nth-child(4) { bottom: 14px; right: 14px; }
.plaque__mark { width: 40px; height: 40px; opacity: .85; }
.plaque__small { margin-top: 18px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; opacity: .8; }
.plaque__built { margin-top: 10px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.plaque__name {
  margin-top: 16px; min-height: 1.4em; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  border-bottom: 2px solid rgba(26,23,20,.55); padding: 0 8px 6px; min-width: 70%;
}
.plaque__name i { display: inline-block; width: 3px; height: .9em; background: var(--black); margin-left: 4px; vertical-align: -0.1em; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.plaque__date { margin-top: 18px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.plaque__tag {
  position: absolute; right: -14px; top: 26px; background: var(--black); color: var(--silver); border: 1px solid rgba(233,231,227,.2);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 9px 14px; border-radius: var(--pill);
  transform: rotate(4deg); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* ---------- §2 the three proofs, visual ---------- */
.proofv { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: 44px; }
@media (max-width: 860px) { .proofv { grid-template-columns: 1fr; } }
.proofv__card { border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 4px); overflow: hidden; background: rgba(233,231,227,.03); }
.proofv__vis { position: relative; height: 190px; display: grid; place-items: center; overflow: hidden; background: rgba(233,231,227,.04); }
.proofv__vis img { width: 100%; height: 100%; object-fit: cover; }
.proofv__rec {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(26,23,20,.7); border-radius: var(--pill); padding: 6px 12px; font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--silver);
}
.proofv__rec i { width: 8px; height: 8px; border-radius: 50%; background: #E0574F; animation: blip 1.2s ease-in-out infinite; }
.proofv__frame { position: absolute; inset: 14px; border: 1.5px solid rgba(233,231,227,.5); border-radius: 4px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
          mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.bars i { width: 22px; border-radius: 6px 6px 2px 2px; background: rgba(184,135,60,.35); display: block; transform-origin: bottom; animation: growbar 1.2s cubic-bezier(.2,.8,.2,1) both; }
.bars i:nth-child(1) { height: 38%; animation-delay: .0s; } .bars i:nth-child(2) { height: 52%; animation-delay: .1s; }
.bars i:nth-child(3) { height: 46%; animation-delay: .2s; } .bars i:nth-child(4) { height: 70%; animation-delay: .3s; }
.bars i:nth-child(5) { height: 84%; animation-delay: .4s; } .bars i:nth-child(6) { height: 100%; background: var(--gold); animation-delay: .5s; }
@keyframes growbar { from { transform: scaleY(0); } }
.bars__lab { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-55); font-weight: 700; }
.zeros { display: flex; gap: clamp(14px, 2.4vw, 26px); align-items: baseline; }
.zeros b { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.04em; }
.zeros span { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-55); font-weight: 700; text-align: center; margin-top: 6px; }
.proofv__body { padding: clamp(18px, 2.4vw, 26px); }
.proofv__name { font-weight: 700; font-size: 1.15rem; }
.proofv__line { margin-top: 6px; font-size: 14.5px; color: var(--silver-55); line-height: 1.55; }

/* ---------- §3 doors, photo-first ---------- */
.doorsv { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: 44px; }
@media (max-width: 1060px) { .doorsv { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .doorsv { grid-template-columns: 1fr; } }
.doorv {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4.2;
  border-radius: calc(var(--radius) + 4px); overflow: hidden; background: var(--black); color: var(--silver);
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (max-width: 560px) { .doorv { aspect-ratio: 4 / 4.4; } }
.doorv:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(26,23,20,.28); }
.doorv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.doorv:hover .doorv__img { transform: scale(1.06); }
.doorv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,20,.97) 0%, rgba(26,23,20,.86) 38%, rgba(26,23,20,.28) 68%, rgba(26,23,20,.05) 100%); }
.doorv__top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.doorv__num { font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--silver); background: rgba(26,23,20,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--pill); padding: 6px 11px; }
.doorv__ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(26,23,20,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; }
.doorv__ico svg { width: 19px; height: 19px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doorv__body { position: relative; z-index: 2; padding: clamp(16px, 2vw, 22px); }
.doorv__kicker { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.doorv__name { margin-top: 6px; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--silver); }
.doorv__line { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: rgba(233,231,227,.72); }
.doorv__for { margin-top: 10px; font-size: 12px; line-height: 1.45; color: rgba(233,231,227,.55); font-style: italic; }
.doorv__cta { margin-top: 14px; }
.doorv__cta .btn { width: 100%; background: var(--silver); color: var(--black); border-color: var(--silver); }
.doorv__cta .btn:hover { background: #fff; border-color: #fff; opacity: 1; }
.doorv__cta .btn::after { content: " →"; }

/* ---------- §4 the table, with icons + (i) ---------- */
.gets td:first-child { padding-left: 14px; }
.gets__row { display: flex; align-items: center; gap: 12px; }
.gets__ico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(184,135,60,.14); display: grid; place-items: center; }
.gets__ico svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(233,231,227,.35); font-size: 10px; font-weight: 700; color: var(--silver-55); cursor: help; font-style: normal; margin-left: 4px; }
.tip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
  width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--silver); color: var(--black); font-size: 12.5px; font-weight: 500; line-height: 1.45; white-space: normal; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 14px 40px rgba(0,0,0,.4); z-index: 20;
}
.tip:hover::after, .tip:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.gets th .gets__col { display: grid; gap: 6px; justify-items: center; }
.gets th .gets__col svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gets-defs { max-width: 780px; margin: 18px 0 0; }
.gets-defs summary { cursor: pointer; font-size: 13px; color: var(--silver-55); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.gets-defs summary::-webkit-details-marker { display: none; }
.gets-defs summary::before { content: "+"; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; font-size: 13px; }
.gets-defs[open] summary::before { content: "–"; }
.gets-defs dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 16px 0 0; font-size: 13.5px; }
@media (max-width: 560px) { .gets-defs dl { grid-template-columns: 1fr; gap: 4px; } .gets-defs dd { margin-bottom: 10px; } }
.gets-defs dt { font-weight: 600; color: var(--silver); }
.gets-defs dd { margin: 0; color: var(--silver-55); line-height: 1.5; }

/* ---------- §6 reach out → we call → we build ---------- */
.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: 44px; position: relative; }
@media (max-width: 860px) { .reach { grid-template-columns: 1fr; } }
.reach__step { position: relative; background: #fff; border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 2px); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; }
.reach__head { display: flex; align-items: center; gap: 14px; }
.reach__n { width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; flex: none; }
.reach__ico { margin-left: auto; width: 48px; height: 48px; border-radius: 14px; background: var(--cream); display: grid; place-items: center; }
.reach__ico svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reach__name { margin-top: 18px; font-weight: 700; font-size: 1.15rem; }
.reach__line { margin-top: 6px; font-size: 14.5px; color: var(--black-60); line-height: 1.55; }
.reach__cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.reach__cta .btn--join { color: #fff; }
.reach__step + .reach__step::before { content: "→"; position: absolute; left: -22px; top: 32px; color: var(--gold); font-size: 22px; font-weight: 700; }
@media (max-width: 860px) { .reach__step + .reach__step::before { content: "↓"; left: 50%; top: -28px; transform: translateX(-50%); } }
.reach__step--last { background: var(--black); color: var(--silver); border-color: var(--black); }
.reach__step--last .reach__line { color: var(--silver-55); }
.reach__step--last .reach__ico { background: rgba(233,231,227,.08); }
.reach__step--last .reach__n { background: var(--gold); color: var(--black); }

/* ---------- §7 what we say no to, visual ---------- */
.nolist { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: 44px; }
@media (max-width: 860px) { .nolist { grid-template-columns: 1fr; } }
.no {
  position: relative; border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 4px); padding: clamp(24px, 3vw, 34px);
  background: rgba(233,231,227,.03); overflow: hidden;
}
.no__ico { position: relative; width: 72px; height: 72px; border-radius: 20px; background: rgba(224,87,79,.1); display: grid; place-items: center; }
.no__ico svg { width: 34px; height: 34px; stroke: var(--silver); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.no__ico::after { content: ""; position: absolute; width: 88px; height: 3px; background: #E0574F; border-radius: 2px; transform: rotate(-45deg); box-shadow: 0 0 0 3px var(--black); }
.no__name { margin-top: 22px; font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.no__line { margin-top: 8px; font-size: 14.5px; color: var(--silver-55); line-height: 1.55; }
.no__stamp { position: absolute; top: 18px; right: 18px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: #E0574F; border: 1.5px solid #E0574F; border-radius: 6px; padding: 5px 9px; transform: rotate(6deg); opacity: .85; }

/* ---------- §10 closing: the plaque, again ---------- */
.plaque-close { position: relative; background: var(--black); color: var(--silver); overflow: hidden; padding: clamp(72px, 10vw, 130px) var(--pad-x); text-align: center; }
.plaque-close__glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(184,135,60,.22), transparent 60%); pointer-events: none; }
.plaque-close__row { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(10px, 2vw, 18px); flex-wrap: wrap; margin-bottom: 40px; }
.tile-name {
  background: linear-gradient(160deg, #d9ad5c, #B8873C 45%, #7d5a22); color: var(--black); border-radius: 12px;
  padding: 12px 18px; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transform: rotate(var(--r, 0deg));
}
.tile-name small { display: block; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; font-weight: 700; }
.tile-name--you { background: var(--silver); outline: 2px dashed rgba(184,135,60,.8); outline-offset: 3px; }
.plaque-close__body { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
/* doors: give the photo room to breathe above the copy */
.doorv { aspect-ratio: 3 / 5; }
@media (max-width: 1060px) { .doorv { aspect-ratio: 3 / 4.2; } }
@media (max-width: 560px)  { .doorv { aspect-ratio: 4 / 4.6; } }
.doorv__line { font-size: 13px; }
.doorv__for { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   PARTNER v4 — round two
   ============================================================ */
/* proofs: photos in all three */
.proofv__chip {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(26,23,20,.72); border-radius: var(--pill); padding: 6px 12px; font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--silver); text-transform: uppercase;
}
.proofv__chip b { color: var(--gold); }
.proofv__vis::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,20,.55), transparent 60%); pointer-events: none; }
.proofv__vis > span { z-index: 2; }

/* doors: copy on hover, gold always on a dark base */
.doorv::after { background: linear-gradient(to top, rgba(26,23,20,.98) 0%, rgba(26,23,20,.9) 22%, rgba(26,23,20,.35) 52%, rgba(26,23,20,.05) 100%); transition: background .3s ease; }
.doorv__body { padding-bottom: clamp(16px, 2vw, 22px); }
.doorv__kicker { display: inline-block; background: rgba(26,23,20,.7); border-radius: var(--pill); padding: 5px 10px; }
.doorv__more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.doorv:hover .doorv__more, .doorv:focus-within .doorv__more { max-height: 260px; opacity: 1; }
.doorv:hover::after, .doorv:focus-within::after { background: linear-gradient(to top, rgba(26,23,20,.98) 0%, rgba(26,23,20,.94) 45%, rgba(26,23,20,.55) 75%, rgba(26,23,20,.2) 100%); }
.doorv__hint { margin-top: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: rgba(233,231,227,.5); }
.doorv:hover .doorv__hint, .doorv:focus-within .doorv__hint { display: none; }
@media (hover: none) { .doorv__more { max-height: none; opacity: 1; } .doorv__hint { display: none; } .doorv::after { background: linear-gradient(to top, rgba(26,23,20,.98) 0%, rgba(26,23,20,.92) 45%, rgba(26,23,20,.5) 75%, rgba(26,23,20,.15) 100%); } }
.doorv--main { box-shadow: 0 0 0 2px var(--gold), 0 24px 60px rgba(184,135,60,.25); }
.doorv--main .doorv__ico { background: var(--gold); } .doorv--main .doorv__ico svg { stroke: var(--black); }
.doorv--main .doorv__num { background: var(--gold); color: var(--black); }
.doorv--main .doorv__cta .btn { background: var(--gold); border-color: var(--gold); color: var(--black); }
.doorv--main .doorv__cta .btn:hover { background: #cf9b4a; border-color: #cf9b4a; }

/* table: the empty cells are plain dashes */
.gets td.no { position: static; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; padding: 14px 16px; background: none; overflow: visible; }
.gets tr:last-child td.no { border-bottom: 0; }

/* the no-list cards, renamed so they don't collide with the table */
.nocard { position: relative; border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 4px); padding: clamp(24px, 3vw, 34px); background: rgba(233,231,227,.03); overflow: hidden; }

/* steps: hover moves the black card; CTAs live under the row */
.reach__step { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; cursor: default; }
.reach__step:hover { transform: translateY(-4px); }
.reach:has(.reach__step:hover) .reach__step--last:not(:hover) { background: #fff; color: var(--black); border-color: var(--line-light); }
.reach:has(.reach__step:hover) .reach__step--last:not(:hover) .reach__line { color: var(--black-60); }
.reach:has(.reach__step:hover) .reach__step--last:not(:hover) .reach__ico { background: var(--cream); }
.reach:has(.reach__step:hover) .reach__step--last:not(:hover) .reach__n { background: var(--black); color: var(--gold); }
.reach__step:hover { background: var(--black); color: var(--silver); border-color: var(--black); }
.reach__step:hover .reach__line { color: var(--silver-55); }
.reach__step:hover .reach__ico { background: rgba(233,231,227,.08); }
.reach__step:hover .reach__n { background: var(--gold); color: var(--black); }
.reach__ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.reach__ctas .btn--join { color: #fff; }
.reach__ctas span { font-size: 13.5px; color: var(--black-60); }

/* ============================================================
   THREE PAGES — nav dropdown, genre pages, What's On
   ============================================================ */

/* ---------- nav: Events ▾ ---------- */
.nav__dd { position: relative; }
.nav__dd-t { display: inline-flex; align-items: center; gap: 6px; }
.nav__dd-t svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; transition: transform .2s ease; }
.nav__dd:hover .nav__dd-t svg, .nav__dd.open .nav__dd-t svg { transform: rotate(180deg); }
.nav__dd-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 230px; background: rgba(26,23,20,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-dark); border-radius: 14px; padding: 8px; display: grid; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.nav__dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__dd:hover .nav__dd-menu, .nav__dd.open .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__links .nav__dd-menu a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 14px; color: var(--silver-55); }
.nav__links .nav__dd-menu a:hover, .nav__links .nav__dd-menu a.active { background: rgba(233,231,227,.07); color: var(--silver); }
.nav__dd-menu a small { display: block; font-size: 10px; color: var(--gold); letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; font-weight: 700; }
.nav__dd-menu a[hidden] { display: none; }
.mobile-menu__sub { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 0 14px; border-bottom: 1px solid var(--line-dark); }
.mobile-menu .mobile-menu__sub a { font-size: 1rem; font-weight: 500; padding: 4px 0; border: 0; color: var(--gold); letter-spacing: 0; }
.mobile-menu .mobile-menu__sub a[hidden] { display: none; }
.footer__sub { list-style: none; margin: 4px 0 6px 14px; padding: 0; border-left: 1px solid var(--line-dark); padding-left: 12px; }
.footer__sub li { font-size: 14px; margin-bottom: 8px; }

/* ---------- sticky Book bar on phones ---------- */
.stickybook {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; align-items: center; gap: 12px;
  background: rgba(26,23,20,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark); border-radius: 16px; padding: 10px 10px 10px 16px; color: var(--silver);
  transform: translateY(130%); transition: transform .3s ease; box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.stickybook.show { transform: none; }
@media (max-width: 860px) { .stickybook { display: flex; } }
.stickybook b { font-size: 13.5px; display: block; }
.stickybook span { font-size: 12px; color: var(--silver-55); display: block; }
.stickybook a { margin-left: auto; flex: none; }

/* ---------- genre pages ---------- */
.gh { min-height: 100svh; }
.gh__eyebrow { color: var(--gold); }
.gh h1 { max-width: 14ch; }
.gh__sub { margin-top: 18px; max-width: 46ch; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(233,231,227,.9); }
.gh__under { margin-top: 18px; font-size: 14.5px; }

.plain { display: grid; gap: 14px; margin-top: 36px; max-width: 700px; }
.plain__l { display: flex; gap: 16px; align-items: baseline; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.plain__l i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }

/* the night, in order */
.order { position: relative; margin-top: 44px; display: grid; gap: 0; max-width: 820px; }
.order::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: var(--line-dark); }
.band--light .order::before, .band--cream .order::before { background: var(--line-light); }
.orow { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; padding: 14px 0; }
.orow__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--black); border: 1px solid rgba(184,135,60,.5); display: grid; place-items: center; position: relative; z-index: 1; }
.band--dark .orow__ico { background: var(--black); box-shadow: 0 0 0 6px var(--black); }
.band--light .orow__ico { box-shadow: 0 0 0 6px var(--silver); }
.band--cream .orow__ico { box-shadow: 0 0 0 6px var(--cream); }
.orow__ico svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.orow__t { font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: -0.01em; }
.orow__t small { display: inline-block; margin-right: 10px; font-size: 11px; letter-spacing: .18em; color: var(--gold); font-weight: 700; vertical-align: middle; }
.orow__l { margin-top: 3px; font-size: 14.5px; color: var(--silver-55); }
.band--light .orow__l, .band--cream .orow__l { color: var(--black-60); }

/* what's included */
.incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 18px); margin-top: 40px; }
@media (max-width: 760px) { .incl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .incl { grid-template-columns: 1fr; } }
.incl__i { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-light); border-radius: var(--radius); padding: 16px 18px; background: #fff; font-weight: 600; font-size: 15px; }
.incl__i svg { width: 26px; height: 26px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the room, photo band */
.roomband { position: relative; min-height: 80svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--silver); }
.roomband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.roomband__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,20,.95) 0%, rgba(26,23,20,.55) 45%, rgba(26,23,20,.15) 100%); }
.roomband__body { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--pad-x); }
.roomband__big { font-size: clamp(2rem, 6vw, 4.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; max-width: 12ch; }
.roomband__big span { display: block; }
.roomband__big .gold { color: var(--gold); }
.roomnums { display: flex; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; margin-top: 32px; }
.roomnums div b { display: block; font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.roomnums div span { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-55); font-weight: 600; }

/* the seven laws */
.laws { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); margin-top: 40px; }
@media (max-width: 1000px) { .laws { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .laws { grid-template-columns: 1fr; } }
.law { border: 1px solid var(--line-light); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 24px); background: #fff; display: flex; flex-direction: column; }
.band--dark .law { border-color: var(--line-dark); background: rgba(233,231,227,.03); }
.law__n { font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--gold); }
.law__name { margin-top: 10px; font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.law__line { margin-top: 6px; font-size: 13.5px; color: var(--black-60); line-height: 1.5; }
.band--dark .law__line { color: var(--silver-55); }
.law--link { justify-content: center; align-items: flex-start; background: var(--black); color: var(--silver); border-color: var(--black); }
.law--link .law__name { color: var(--silver); }

/* photo strip */
.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-top: 36px; padding-bottom: 8px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip img { flex: none; width: clamp(220px, 28vw, 340px); aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); scroll-snap-align: start; }
.strip__cap { margin-top: 14px; font-size: 14px; color: var(--silver-55); font-style: italic; }

/* next event card */
.nextev { display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 4px); overflow: hidden; background: rgba(233,231,227,.03); margin-top: 36px; }
@media (max-width: 800px) { .nextev { grid-template-columns: 1fr; } }
.nextev__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.nextev__body { padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.nextev__cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.nextev__name { margin-top: 10px; font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--silver); }
.nextev__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 14px; color: var(--silver-55); }
.nextev__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.nextev__spots { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); }
.nextev__spots i { width: 8px; height: 8px; border-radius: 50%; background: #25A55F; animation: blip 2s ease-in-out infinite; }
.nextev--empty { display: block; padding: clamp(28px, 4vw, 48px); text-align: center; }
.nextev--empty .nextev__name { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.nextev--empty .nextev__meta { justify-content: center; }

/* builders: who it's for, the rule, pricing */
.forlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
@media (max-width: 640px) { .forlist { grid-template-columns: 1fr; } }
.forlist div { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line-light); background: #fff; border-radius: var(--radius); padding: 18px 20px; font-weight: 600; font-size: 15.5px; }
.forlist i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--black); color: var(--gold); display: grid; place-items: center; font-style: normal; font-size: 13px; }
.bigrule { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.bigrule .gold { color: var(--gold); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px); margin-top: 40px; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } }
.tier { border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 2px); padding: clamp(22px, 3vw, 30px); background: #fff; display: flex; flex-direction: column; }
.tier--hot { background: var(--black); color: var(--silver); border-color: var(--black); }
.tier__lab { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.tier__price { margin-top: 10px; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier__price small { font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--black-60); margin-left: 4px; }
.tier--hot .tier__price small { color: var(--silver-55); }
.tier ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--black-60); flex: 1; }
.tier--hot ul { color: var(--silver-55); }
.tier li { display: flex; gap: 10px; }
.tier li::before { content: "✓"; color: var(--gold); font-weight: 700; }
.tier .btn { margin-top: 20px; }

/* ---------- What's On ---------- */
.wo-hero { min-height: 72svh; }
.wo-hero h1 { max-width: none; }
.nextup { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); margin-top: 40px; }
@media (max-width: 760px) { .nextup { grid-template-columns: 1fr; } }
.nucard { position: relative; border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 4px); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.nucard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.nucard__body { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; flex: 1; }
.nucard__cat { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--black-60); }
.nucard__cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.nucard--sleepover .nucard__cat i { background: var(--c-sleep); } .nucard--builders .nucard__cat i { background: var(--c-build); } .nucard--satubali .nucard__cat i { background: var(--c-satu); }
.nucard__name { margin-top: 8px; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -0.015em; line-height: 1.15; }
.nucard__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; color: var(--black-60); }
.nucard__desc { margin-top: 12px; font-size: 15px; color: var(--black-60); }
.nucard .btn { margin-top: auto; align-self: flex-start; margin-top: 18px; }
.nucard--big { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--black); color: var(--silver); border-color: var(--black); }
@media (max-width: 760px) { .nucard--big { grid-template-columns: 1fr; } }
.nucard--big img { aspect-ratio: auto; height: 100%; min-height: 280px; }
.nucard--big .nucard__cat { color: var(--gold); }
.nucard--big .nucard__name { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.nucard--big .nucard__meta, .nucard--big .nucard__desc { color: var(--silver-55); }
.nucard--big .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--black); }
.nucard--big .btn--primary:hover { background: #cf9b4a; border-color: #cf9b4a; }

.rooms4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(12px, 1.8vw, 20px); margin-top: 40px; }
.room4 { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 28px); background: rgba(233,231,227,.03); color: var(--silver); transition: transform .28s ease, border-color .28s ease; }
.room4:hover { transform: translateY(-4px); border-color: rgba(184,135,60,.6); }
.room4__top { display: flex; justify-content: space-between; align-items: center; }
.room4__ico { width: 46px; height: 46px; border-radius: 13px; background: rgba(184,135,60,.14); display: grid; place-items: center; }
.room4__ico svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.room4__core { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold); border: 1px solid rgba(184,135,60,.45); border-radius: var(--pill); padding: 5px 10px; }
.room4__name { margin-top: 18px; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.room4__line { margin-top: 6px; font-size: 14px; color: var(--silver-55); flex: 1; }
.room4__go { margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.room4[hidden] { display: none; }
.genres { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.genre[hidden] { display: none; }

/* ============================================================
   GENRE PAGES v2 — ticket hero, photo timeline, visual laws
   ============================================================ */
/* nav icons */
.nav__links .nav__dd-menu a { display: flex; align-items: center; gap: 10px; }
.nav__dd-menu svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mobile-menu__sub svg { display: none; }

/* ---------- sleepover hero: the ticket ---------- */
.sh { position: relative; min-height: 100svh; background: var(--black); color: var(--silver); overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 5vw, 72px); padding: 120px var(--pad-x) 64px; }
@media (max-width: 900px) { .sh { grid-template-columns: 1fr; min-height: auto; padding-top: 100px; } }
.sh__bg { position: absolute; inset: 0; z-index: 0; }
.sh__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.sh__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,23,20,.95) 25%, rgba(26,23,20,.45) 65%, rgba(26,23,20,.8)), linear-gradient(to top, rgba(26,23,20,.9), transparent 40%); }
.sh__txt { position: relative; z-index: 2; }
.sh__eyebrow { color: var(--gold); }
.sh h1 { max-width: 12ch; }
.sh__sub { margin-top: 18px; max-width: 44ch; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(233,231,227,.9); }
.sh__under { margin-top: 18px; font-size: 14.5px; }
.sh__stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(233,231,227,.7), transparent), radial-gradient(1px 1px at 30% 8%, rgba(233,231,227,.6), transparent), radial-gradient(1.5px 1.5px at 55% 14%, rgba(233,231,227,.5), transparent), radial-gradient(1px 1px at 72% 22%, rgba(233,231,227,.7), transparent), radial-gradient(1.5px 1.5px at 88% 10%, rgba(233,231,227,.6), transparent), radial-gradient(1px 1px at 42% 26%, rgba(233,231,227,.45), transparent); }
.tix-wrap { position: relative; z-index: 2; display: grid; place-items: center; padding: 20px 0; }
.tix { position: relative; width: min(420px, 100%); background: var(--cream); color: var(--black); border-radius: 18px; transform: rotate(3deg);
  box-shadow: 0 40px 90px rgba(0,0,0,.55); display: grid; grid-template-rows: auto auto; overflow: hidden; }
.tix::before, .tix::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--black); top: calc(72% - 13px); z-index: 2; }
.tix::before { left: -13px; } .tix::after { right: -13px; }
.tix__main { padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 30px); }
.tix__brand { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--black-60); }
.tix__brand img { width: 22px; height: 22px; }
.tix__name { margin-top: 18px; font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; line-height: .95; }
.tix__name span { display: block; color: var(--gold); }
.tix__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 22px; }
.tix__grid div { font-size: 14px; font-weight: 600; }
.tix__grid small { display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--black-60); font-weight: 700; margin-bottom: 3px; }
.tix__arc { margin-top: 20px; }
.tix__arc svg { width: 100%; height: auto; }
.tix__stub { border-top: 2px dashed rgba(26,23,20,.3); padding: 16px clamp(22px, 3vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; }
.tix__admit { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; }
.tix__admit b { display: block; font-size: 18px; letter-spacing: -0.02em; text-transform: none; }
.tix__bar { display: flex; gap: 2px; height: 34px; align-items: stretch; }
.tix__bar i { display: block; background: var(--black); width: 2px; }
.tix__bar i:nth-child(3n) { width: 4px; } .tix__bar i:nth-child(5n) { width: 1px; } .tix__bar i:nth-child(7n) { width: 5px; }
.tix__tag { position: absolute; left: -12px; top: 22px; background: var(--black); color: var(--silver); border: 1px solid rgba(233,231,227,.2);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 9px 14px; border-radius: var(--pill); transform: rotate(-5deg); box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 3; }

/* ---------- what it is, as photo tiles ---------- */
.isgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-top: 40px; }
.is { position: relative; border-radius: calc(var(--radius) + 2px); overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: flex-end; color: var(--silver); grid-column: span 2; }
.is:nth-child(n+4) { grid-column: span 3; aspect-ratio: 16/8; }
@media (max-width: 860px) { .is, .is:nth-child(n+4) { grid-column: span 3; aspect-ratio: 4/3; } }
@media (max-width: 520px) { .is, .is:nth-child(n+4) { grid-column: span 6; aspect-ratio: 16/10; } }
.is img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.is:hover img { transform: scale(1.05); }
.is::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,20,.94) 0%, rgba(26,23,20,.5) 45%, rgba(26,23,20,.1) 100%); }
.is__ico { position: absolute; top: 14px; left: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 12px; background: rgba(26,23,20,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; }
.is__ico svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is__body { position: relative; z-index: 2; padding: clamp(16px, 2vw, 22px); }
.is__name { font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: -0.01em; line-height: 1.2; }
.is__line { margin-top: 5px; font-size: 13.5px; color: rgba(233,231,227,.72); }

/* ---------- timeline with photos ---------- */
.tl { position: relative; margin-top: 48px; display: grid; gap: clamp(18px, 3vw, 36px); }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-light); transform: translateX(-50%); }
.tl__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 56px); align-items: center; position: relative; }
.tl__row::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px var(--silver); z-index: 2; }
.tl__row:nth-child(even) .tl__pic { order: 2; }
.tl__pic { border-radius: calc(var(--radius) + 2px); overflow: hidden; aspect-ratio: 4/3; }
.tl__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tl__row:hover .tl__pic img { transform: scale(1.04); }
.tl__txt { padding: 0 clamp(4px, 1vw, 12px); }
.tl__row:nth-child(odd) .tl__txt { padding-left: clamp(18px, 3vw, 40px); }
.tl__row:nth-child(even) .tl__txt { text-align: right; padding-right: clamp(18px, 3vw, 40px); }
.tl__time { display: inline-block; font-size: 11px; letter-spacing: .22em; font-weight: 700; color: var(--gold); border: 1px solid rgba(184,135,60,.5); border-radius: var(--pill); padding: 5px 11px; }
.tl__name { margin-top: 12px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tl__line { margin-top: 8px; font-size: 15px; color: var(--black-60); max-width: 34ch; }
.tl__row:nth-child(even) .tl__line { margin-left: auto; }
@media (max-width: 720px) {
  .tl::before { left: 22px; } .tl__row { grid-template-columns: 1fr; gap: 12px; padding-left: 52px; }
  .tl__row::before { left: 22px; top: 18px; transform: translateX(-50%); }
  .tl__row:nth-child(even) .tl__pic { order: 0; } .tl__row:nth-child(even) .tl__txt { text-align: left; padding: 0; } .tl__row:nth-child(odd) .tl__txt { padding: 0; }
  .tl__row:nth-child(even) .tl__line { margin-left: 0; }
}

/* ---------- included, dark icon tiles ---------- */
.inclv { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-top: 40px; }
@media (max-width: 900px) { .inclv { grid-template-columns: repeat(2, 1fr); } }
.inclv__i { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 24px); background: rgba(233,231,227,.03); }
.inclv__i svg { width: 30px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inclv__name { margin-top: 14px; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.inclv__line { margin-top: 4px; font-size: 13px; color: var(--silver-55); }
.inclv__i--main { background: rgba(184,135,60,.12); border-color: rgba(184,135,60,.5); }

/* ---------- forty ---------- */
.forty { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, 1vw, 12px); margin-top: 40px; max-width: 760px; }
@media (max-width: 640px) { .forty { grid-template-columns: repeat(8, 1fr); } }
.forty img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid rgba(233,231,227,.14); filter: grayscale(.5); transition: filter .4s ease, transform .3s ease, border-color .3s ease; }
.forty img:hover { filter: none; transform: scale(1.12); border-color: var(--gold); }
.forty__cap { margin-top: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); }
.dots10 { display: flex; gap: 8px; }
.dots10 i { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); display: block; }
.roomhead { font-size: clamp(2rem, 5.4vw, 4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; max-width: 14ch; }
.roomhead span { display: block; }

/* ---------- the laws, visual ---------- */
.lawsv { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); margin-top: 44px; }
@media (max-width: 1000px) { .lawsv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lawsv { grid-template-columns: 1fr; } }
.lawv { border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 2px); padding: clamp(20px, 2.4vw, 28px); background: rgba(233,231,227,.03); display: flex; flex-direction: column; transition: border-color .3s ease, transform .3s ease; }
.lawv:hover { border-color: rgba(184,135,60,.6); transform: translateY(-3px); }
.lawv__ring { width: 68px; height: 68px; border-radius: 50%; border: 1.5px solid rgba(184,135,60,.55); display: grid; place-items: center; background: rgba(184,135,60,.08); }
.lawv__ring svg { width: 32px; height: 32px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lawv__n { margin-top: 18px; font-size: 10.5px; letter-spacing: .22em; font-weight: 700; color: var(--gold); }
.lawv__name { margin-top: 6px; font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--silver); }
.lawv__line { margin-top: 6px; font-size: 13.5px; color: var(--silver-55); line-height: 1.5; }
.lawv--link { justify-content: center; background: var(--gold); color: var(--black); border-color: var(--gold); }
.lawv--link .lawv__name { color: var(--black); }
.lawv--link .lawv__line { color: rgba(26,23,20,.7); }

/* ---------- next event, bigger ---------- */
.nextband { position: relative; overflow: hidden; }
.nextband__bg { position: absolute; inset: 0; z-index: 0; }
.nextband__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: grayscale(.3); }
.nextband__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--black), rgba(26,23,20,.7), var(--black)); }
.nextband .band__inner { position: relative; z-index: 2; }
.nextev { background: rgba(26,23,20,.9); grid-template-columns: 1fr 1.1fr; }
.nextev__pic { position: relative; min-height: 300px; }
.nextev__date { position: absolute; left: 18px; top: 18px; background: var(--cream); color: var(--black); border-radius: 14px; padding: 10px 14px; text-align: center; line-height: 1; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.nextev__date b { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; }
.nextev__date span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin-top: 4px; color: var(--black-60); }
.nextev__in { position: absolute; right: 18px; top: 18px; background: #25A55F; color: #fff; border-radius: var(--pill); padding: 7px 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.nextev__desc { margin-top: 14px; font-size: 15px; color: var(--silver-55); max-width: 46ch; }

/* ---------- past nights ---------- */
.past { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1.2vw, 14px); margin-top: 36px; }
@media (max-width: 900px) { .past { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .past { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; } .past::-webkit-scrollbar { display: none; } .past figure { flex: none; width: 66vw; scroll-snap-align: start; } }
.past figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.past img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.past figure:hover img { transform: scale(1.05); }
.past figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 12px 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--silver); background: linear-gradient(to top, rgba(26,23,20,.85), transparent); }

/* ---------- closing with a date line ---------- */
.finalcta__date { margin-top: 12px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }

/* ---------- builders hero: the run of show ---------- */
.bh { position: relative; min-height: 100svh; background: var(--black); color: var(--silver); overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 5vw, 72px); padding: 120px var(--pad-x) 64px; }
@media (max-width: 900px) { .bh { grid-template-columns: 1fr; min-height: auto; padding-top: 100px; } }
.bh__bg { position: absolute; inset: 0; z-index: 0; }
.bh__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.bh__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,23,20,.96) 25%, rgba(26,23,20,.5) 65%, rgba(26,23,20,.85)), linear-gradient(to top, rgba(26,23,20,.9), transparent 40%); }
.bh__txt { position: relative; z-index: 2; }
.bh__eyebrow { color: var(--gold); }
.bh h1 { max-width: 15ch; }
.bh__sub { margin-top: 18px; max-width: 44ch; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(233,231,227,.9); }
.agenda-wrap { position: relative; z-index: 2; display: grid; place-items: center; padding: 20px 0; }
.agenda { position: relative; width: min(400px, 100%); background: #fff; color: var(--black); border-radius: 6px; padding: clamp(24px, 3vw, 34px); transform: rotate(-2deg);
  box-shadow: 0 40px 90px rgba(0,0,0,.55); font-family: inherit; }
.agenda::before { content: ""; position: absolute; right: 22px; top: -26px; width: 92px; height: 92px; border-radius: 50%; border: 9px solid rgba(120,80,30,.22); pointer-events: none; }
.agenda__top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--black-60); }
.agenda__top img { width: 22px; height: 22px; }
.agenda__title { margin-top: 16px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.agenda__title span { color: var(--gold); }
.agenda__rows { margin-top: 20px; border-top: 1px solid var(--line-light); }
.agenda__row { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-light); font-size: 14.5px; }
.agenda__row b { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.agenda__row small { display: block; font-size: 12px; color: var(--black-60); }
.agenda__stamp { position: absolute; right: -14px; bottom: 28px; border: 2px solid #E0574F; color: #E0574F; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; padding: 8px 12px; border-radius: 6px; transform: rotate(-8deg); background: rgba(255,255,255,.9); }
.agenda__note { margin-top: 14px; font-size: 12px; color: var(--black-60); }

/* ============================================================
   GENRE PAGES v3 — cleaner ticket, compact timeline, who cards
   ============================================================ */
.tix { transform: rotate(2deg); display: flex; flex-direction: column; overflow: visible; }
.tix::before, .tix::after { display: none; }
.tix__main { padding-bottom: 22px; }
.tix__grid { grid-template-columns: 1fr 1fr; }
.tix__grid .tix__wide { grid-column: 1 / -1; }
.tix__grid div { font-size: 14.5px; line-height: 1.35; }
.tix__stub { position: relative; border-radius: 0 0 18px 18px; }
.tix__stub::before, .tix__stub::after { content: ""; position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--black); }
.tix__stub::before { left: -13px; } .tix__stub::after { right: -13px; }
.tix__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tix__pills span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; border: 1px solid rgba(26,23,20,.35); border-radius: var(--pill); padding: 6px 10px; }
.tix__pills span.gold { background: var(--gold); border-color: var(--gold); color: var(--black); }

/* compact timeline */
.tlc { position: relative; margin-top: 40px; display: grid; gap: 6px; max-width: 760px; }
.tlc::before { content: ""; position: absolute; left: 44px; top: 30px; bottom: 30px; width: 1px; background: var(--line-light); }
.tlc__row { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; padding: 8px 0; }
.tlc__pic { width: 88px; height: 88px; border-radius: 18px; overflow: hidden; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--silver); }
.tlc__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tlc__row:hover .tlc__pic img { transform: scale(1.08); }
.tlc__time { font-size: 10.5px; letter-spacing: .2em; font-weight: 700; color: var(--gold); }
.tlc__name { margin-top: 3px; font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: -0.01em; line-height: 1.15; }
.tlc__line { margin-top: 3px; font-size: 14px; color: var(--black-60); }
@media (max-width: 480px) { .tlc::before { left: 34px; } .tlc__row { grid-template-columns: 68px 1fr; gap: 14px; } .tlc__pic { width: 68px; height: 68px; border-radius: 14px; } }

/* included: no defaults, gold on hover or tap */
.inclv__i { cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease; }
.inclv__i--main { background: rgba(233,231,227,.03); border-color: var(--line-dark); }
.inclv__i:hover, .inclv__i.on { background: var(--gold); border-color: var(--gold); color: var(--black); transform: translateY(-3px); }
.inclv__i:hover svg, .inclv__i.on svg { stroke: var(--black); }
.inclv__i:hover .inclv__line, .inclv__i.on .inclv__line { color: rgba(26,23,20,.7); }

/* forty, centred */
.roomwrap { text-align: center; }
.roomwrap .roomhead { margin-left: auto; margin-right: auto; }
.roomwrap .forty { margin-left: auto; margin-right: auto; }
.roomwrap .vstats { text-align: left; }

/* builders: who it's for, as people */
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); margin-top: 40px; }
@media (max-width: 900px) { .who { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .who { grid-template-columns: 1fr; } }
.who__c { background: #fff; border: 1px solid var(--line-light); border-radius: calc(var(--radius) + 2px); overflow: hidden; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease; }
.who__c:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(26,23,20,.12); }
.who__pic { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.who__pic img { width: 100%; height: 100%; object-fit: cover; }
.who__role { position: absolute; left: 12px; bottom: 12px; background: var(--black); color: var(--gold); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; padding: 6px 11px; border-radius: var(--pill); }
.who__q { padding: clamp(16px, 2vw, 22px); font-size: 15px; line-height: 1.45; color: var(--black); position: relative; flex: 1; }
.who__q::before { content: "“"; position: absolute; top: 4px; left: 14px; font-size: 44px; line-height: 1; color: var(--gold); opacity: .6; }
.who__q span { display: block; padding-left: 22px; }
.who__q small { display: block; margin-top: 10px; padding-left: 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--black-60); }

/* the rule, as chips */
.rulechips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rulechip { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(184,135,60,.5); border-radius: var(--pill); padding: 12px 20px 12px 14px; font-weight: 600; font-size: 15px; color: var(--silver); background: rgba(184,135,60,.08); }
.rulechip i { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; }
.rulechip svg { width: 18px; height: 18px; stroke: var(--black); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* next event: tighter */
.nextev { max-width: 960px; grid-template-columns: .85fr 1.15fr; }
.nextev__pic { min-height: 220px; }
.nextev__img { min-height: 220px; }
.nextev__body { padding: clamp(20px, 2.8vw, 34px); }
.nextev__name { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.nextev__meta { margin-top: 12px; font-size: 13.5px; }
.nextev__desc { margin-top: 10px; font-size: 14px; }
.nextev__foot { margin-top: 20px; }
.nextev__foot .btn--lg { padding: 14px 28px; font-size: 15px; }
.nextev__date b { font-size: 1.7rem; }

/* ============================================================
   secondary pages + centering
   ============================================================ */
.center .tlc { margin-left: auto; margin-right: auto; text-align: left; }
.center .nextev { margin-left: auto; margin-right: auto; text-align: left; }
.nextev { max-width: 820px; }
.roomwrap .vstats { max-width: 900px; margin-left: auto; margin-right: auto; }
.roomwrap .vstat { text-align: center; }
.roomwrap .vstat__vis { justify-content: center; }
.center .rulechips { justify-content: center; }
.center .bigrule { margin-left: auto; margin-right: auto; }

/* agreement */
.agree__intro { font-size: 1.15rem; line-height: 1.55; }
.agree__by { color: var(--gold); font-weight: 600; margin-bottom: 28px !important; }
.agree { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.agree__i { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
.agree__n { font-weight: 700; color: var(--gold); font-size: 1.25rem; line-height: 1.2; }
.agree__t { font-weight: 700; letter-spacing: .02em; }
.agree__i p { margin: 4px 0 0 !important; }
.agree__loc { margin-top: 28px; background: var(--cream); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 18px 22px; }
.agree__loc p { margin: 4px 0 0 !important; }
.agree__close { margin-top: 36px !important; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.agree__sub { color: var(--gold); font-weight: 600; }

/* faq page */
.faqg { margin-top: 44px !important; font-size: 1.35rem !important; }
.faq--page { margin-top: 8px; }

/* contact */
.ways4 { display: grid; gap: 12px; margin-top: 8px; }
.way4 { display: flex; align-items: center; gap: 18px; border: 1px solid var(--line-light); border-radius: var(--radius); padding: 20px 22px; background: #fff; transition: transform .25s ease, border-color .25s ease; }
.way4:hover { transform: translateY(-3px); border-color: rgba(26,23,20,.35); }
.way4__ico { width: 52px; height: 52px; flex: none; border-radius: 16px; background: rgba(184,135,60,.14); display: grid; place-items: center; }
.way4__ico svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.way4__ico--wa { background: rgba(37,165,95,.14); } .way4__ico--wa svg { stroke: #25A55F; }
.way4__t { font-weight: 700; font-size: 1.05rem; }
.way4__l { margin-top: 3px; font-size: 14px; color: var(--black-60); }

/* cookie banner */
.consent { position: fixed; left: 12px; bottom: 12px; z-index: 95; max-width: 420px; background: rgba(26,23,20,.97); color: var(--silver); border: 1px solid var(--line-dark); border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.45); display: grid; gap: 12px; }
.consent p { font-size: 13.5px; line-height: 1.5; color: var(--silver-55); margin: 0; }
.consent a { color: var(--silver); text-decoration: underline; }
.consent div { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 860px) { .consent { right: 12px; max-width: none; bottom: 84px; } }

/* ============================================================
   forms + links round
   ============================================================ */
.fillout-card { margin-top: 28px; background: #fff; border-radius: calc(var(--radius) + 4px); padding: 8px; overflow: hidden; }

/* booking button + status note on any event card */
.evcta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.evcta__note { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.evcta__note i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.nucard .evcta { margin-top: 18px; }
.ucard .evcta { margin-top: 18px; }
.band--dark .evcta .btn--ghost, .nucard--big .evcta .btn--ghost, .nextev .evcta .btn--ghost { color: var(--silver); border-color: rgba(233,231,227,.4); }

/* calendar: social nights share the sleepover blue, The Hub is gold */
:root { --c-hub: #B8873C; }
.cal__day--social { border-color: rgba(91,141,239,.55); background: rgba(91,141,239,.16); }
.cal__day--social i { background: var(--c-sleep); }
.cal__day--hub { border-color: rgba(184,135,60,.6); background: rgba(184,135,60,.16); }
.cal__day--hub i { background: var(--c-hub); }
.cal__legend .l-hub { background: var(--c-hub); }
.next-links .nl-hub { color: var(--c-hub); } .next-links .nl-hub i { background: var(--c-hub); }
.nucard--social .nucard__cat i { background: var(--c-sleep); } .nucard--hub .nucard__cat i { background: var(--c-hub); }

/* floating WhatsApp */
.wafloat { position: fixed; right: 18px; bottom: 18px; z-index: 92; display: flex; align-items: center; gap: 0; height: 56px; min-width: 56px; padding: 0 16px; border-radius: 999px;
  background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.35); font-weight: 600; font-size: 14px; overflow: hidden; transition: gap .25s ease, transform .25s ease; }
.wafloat svg { width: 26px; height: 26px; flex: none; }
.wafloat span { max-width: 0; white-space: nowrap; overflow: hidden; transition: max-width .3s ease; }
.wafloat:hover { gap: 10px; transform: translateY(-2px); }
.wafloat:hover span { max-width: 120px; }
@media (max-width: 860px) { .wafloat { right: 14px; bottom: 86px; height: 52px; min-width: 52px; padding: 0 13px; } }

/* "registration opens soon" → message us on WhatsApp */
.btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn--wa:hover { background: #1fb959; border-color: #1fb959; opacity: 1; }

/* ============================================================
   HOME v4 — numbers, promises, Satu band, world box
   ============================================================ */
.numpanel { background: var(--black); color: var(--silver); border-radius: calc(var(--radius) + 8px); padding: clamp(28px, 4vw, 56px); }
.numpanel__lab { color: var(--gold); }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 44px); margin-top: clamp(24px, 3vw, 38px); }
@media (max-width: 760px) { .nums { grid-template-columns: 1fr; gap: 26px; } }
.num .statv2__bar { background: rgba(233,231,227,.14); }
.num .statv2__bar i { background: var(--gold); }
.num__n { margin-top: 18px; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: .95; color: var(--silver); font-variant-numeric: tabular-nums; }
.num__l { margin-top: 10px; font-size: 14.5px; color: var(--silver-55); }
.numzeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line-dark); }
@media (max-width: 620px) { .numzeros { grid-template-columns: 1fr; gap: 14px; } }
.numzero { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 16px 20px; background: rgba(233,231,227,.03); }
.numzero b { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.04em; }
.numzero span { font-size: 14px; color: var(--silver-55); line-height: 1.4; }
.numfoot { margin-top: clamp(22px, 3vw, 32px); font-size: clamp(1rem, 2vw, 1.2rem); color: var(--silver-55); }
.numfoot .gold { font-weight: 600; }

/* the seven promises */
.promgrid { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: clamp(14px, 2vw, 20px); }
.promrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); }
@media (max-width: 980px) { .promrow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .promrow { grid-template-columns: 1fr; } }
.prom { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 4px); overflow: hidden;
  background: rgba(233,231,227,.03); transition: transform .28s ease, border-color .28s ease; }
.prom:hover { transform: translateY(-4px); border-color: rgba(184,135,60,.55); }
.prom__pic { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.prom__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.prom:hover .prom__pic img { transform: scale(1.05); }
.prom__n { position: absolute; top: 12px; left: 12px; font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--black);
  background: var(--gold); border-radius: var(--pill); padding: 5px 11px; }
.prom__body { padding: clamp(18px, 2.2vw, 24px); }
.prom__name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.22rem); letter-spacing: -0.01em; line-height: 1.25; }
.prom__emoji { font-size: 1.2rem; }
.prom__desc { margin-top: 8px; font-size: 14px; color: var(--silver-55); line-height: 1.55; }
.prom--hero { flex-direction: row; align-items: stretch; border-color: rgba(184,135,60,.4); background: rgba(184,135,60,.07); }
.prom--hero .prom__pic { width: 46%; flex: none; aspect-ratio: auto; }
.prom--hero .prom__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 44px); }
.prom--hero .prom__name { font-size: clamp(1.4rem, 3vw, 2.1rem); }
.prom--hero .prom__desc { font-size: 15.5px; max-width: 46ch; }
@media (max-width: 760px) { .prom--hero { flex-direction: column; } .prom--hero .prom__pic { width: 100%; aspect-ratio: 16/10; } }

/* Satu Bali band */
.satuband { position: relative; display: block; min-height: 86svh; overflow: hidden; background: var(--black); color: var(--silver); text-align: center; }
.satuband__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.satuband:hover .satuband__bg { transform: scale(1.04); }
.satuband__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,23,20,.86), rgba(26,23,20,.6) 45%, rgba(26,23,20,.92)); }
.satuband__body { position: relative; z-index: 2; min-height: 86svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(60px, 9vw, 120px) var(--pad-x); }
.satuband__presents { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--silver-55); }
.satuband__lockup { margin-top: 18px; font-size: clamp(3rem, 12vw, 8rem); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.satuband__tag { margin-top: 14px; font-size: clamp(1.1rem, 2.6vw, 1.7rem); color: var(--gold); font-weight: 500; }
.satuband__meta { margin-top: 10px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); }
.satuband__cta { margin-top: 34px; }
.satuband__free { margin-top: 16px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); }

/* world box */
.worldbox { margin-top: clamp(32px, 4vw, 48px); background: var(--black); border-radius: calc(var(--radius) + 8px); padding: clamp(20px, 3vw, 40px); color: var(--silver); }
.worldbox__head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.worldbox__pill { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--silver-55);
  border: 1px solid var(--line-dark); border-radius: var(--pill); padding: 7px 13px; display: inline-flex; align-items: center; gap: 8px; }
.worldbox__pill--live { color: var(--gold); border-color: rgba(184,135,60,.5); }
.worldbox__pill--live i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: blip 2s ease-in-out infinite; }
.worldbox .mapv2 { background: none; padding: 0; margin-top: 18px; }
.citycards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(18px, 2.4vw, 28px); }
@media (max-width: 900px) { .citycards { grid-template-columns: 1fr 1fr; } }
.cityc { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(16px, 2vw, 22px); background: rgba(233,231,227,.03); transition: transform .25s ease, border-color .25s ease; }
.cityc:hover, .cityc.active { transform: translateY(-3px); border-color: rgba(233,231,227,.35); }
.cityc--live { border-color: rgba(184,135,60,.5); background: rgba(184,135,60,.09); }
.cityc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cityc__flag { font-size: 1.5rem; }
.cityc__tag { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--silver-55); border: 1px solid var(--line-dark); border-radius: var(--pill); padding: 4px 9px; }
.cityc__tag--live { color: var(--black); background: var(--gold); border-color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.cityc__tag--live i { width: 6px; height: 6px; border-radius: 50%; background: var(--black); animation: blip 2s ease-in-out infinite; }
.cityc__name { margin-top: 14px; font-weight: 700; font-size: 1.15rem; }
.cityc__line { margin-top: 5px; font-size: 13.5px; color: var(--silver-55); line-height: 1.5; }
.worldbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: clamp(20px, 2.6vw, 30px); padding-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--line-dark); }
.worldbox__foot p { font-size: 14.5px; color: var(--silver-55); }
.worldbox__foot strong { color: var(--silver); }

/* ---------- sleepover: the three stats, centred and even ---------- */
.roomwrap .vstats { grid-template-columns: repeat(3, 1fr); max-width: 860px; gap: clamp(12px, 2vw, 22px); }
@media (max-width: 760px) { .roomwrap .vstats { grid-template-columns: 1fr; max-width: 420px; } }
.roomwrap .vstat { padding: clamp(24px, 3vw, 34px) clamp(18px, 2.4vw, 26px); }
.roomwrap .vstat__vis { height: 46px; justify-content: center; }
.roomwrap .vstat__num { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.roomwrap .mini img, .roomwrap .mini__more { width: 34px; height: 34px; }
.roomwrap .flags { font-size: 22px; }
.roomwrap .dots10 { justify-content: center; flex-wrap: wrap; max-width: 180px; }
.roomwrap .dots10 i { width: 13px; height: 13px; }

/* ---------- nav CTA: always visible ---------- */
.nav__join { opacity: 1; pointer-events: auto; }

/* ---------- What's On: the deck ---------- */
.dflow { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold); flex-wrap: wrap; }
.dflow i { width: 34px; height: 1px; background: rgba(184,135,60,.5); display: block; }
.deck { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(28px, 3.4vw, 40px); }
@media (max-width: 1100px) { .deck { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .deck { grid-template-columns: 1fr 1fr; } }
.dcard { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: calc(var(--radius) + 2px); overflow: hidden;
  background: rgba(233,231,227,.03); transition: transform .28s ease, border-color .28s ease; }
.dcard:hover { transform: translateY(-4px); border-color: rgba(184,135,60,.55); }
.dcard__pic { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.dcard__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.dcard:hover .dcard__pic img { transform: scale(1.06); }
.dcard__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,20,.7), transparent 60%); }
.dcard__n { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 10px; letter-spacing: .18em; font-weight: 700; color: var(--silver);
  background: rgba(26,23,20,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--pill); padding: 4px 9px; }
.dcard__emoji { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-size: 1.5rem; }
.dcard__body { padding: clamp(14px, 1.8vw, 20px); }
.dcard__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.dcard__desc { margin-top: 6px; font-size: 13px; color: var(--silver-55); line-height: 1.5; }

/* ---------- What's On: the thumbprint band ---------- */
.printband { position: relative; overflow: hidden; color: var(--silver); text-align: center; }
.printband__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.printband__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,23,20,.92), rgba(26,23,20,.78) 45%, rgba(26,23,20,.95)); }
.printband__body { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: clamp(70px, 10vw, 130px) var(--pad-x); }
.printband__mark { width: clamp(64px, 9vw, 96px); margin: 0 auto 26px; opacity: .9; }
.printband__mark svg { width: 100%; height: auto; }
.printband__h { margin: 0 auto; }
.printband__sub { margin-top: 18px; font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; }
.printband__flags { margin-top: 26px; font-size: clamp(20px, 3vw, 28px); line-height: 1.7; letter-spacing: 2px; filter: saturate(.9); }
.printband__nums { display: flex; justify-content: center; gap: clamp(26px, 6vw, 72px); margin-top: 30px; flex-wrap: wrap; }
.printband__nums b { display: block; font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.printband__nums span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--silver-55); }
.printband__line { margin-top: 32px; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--silver-55); }
.printband__line strong { color: var(--silver); }

/* ============================================================
   PHONE FIXES — Sept 2026
   ============================================================ */
/* the next-event card: the later desktop rule was beating its own breakpoint */
@media (max-width: 800px) {
  .nextev { grid-template-columns: 1fr !important; }
  .nextev__pic { min-height: 0; }
  .nextev__img { min-height: 220px; height: 220px; }
  .nextev__date { left: 14px; top: 14px; padding: 8px 12px; }
  .nextev__date b { font-size: 1.5rem; }
  .nextev__in { right: 14px; top: 14px; font-size: 10px; padding: 6px 10px; }
  .nextev__body { padding: 22px 20px 24px; }
  .nextev__foot { gap: 12px; }
  .nextev__foot .btn { width: 100%; text-align: center; }
}

/* What's On: the featured card, photo above the words on phones */
@media (max-width: 760px) {
  .nucard--big { grid-template-columns: 1fr !important; }
  .nucard--big img { height: auto !important; min-height: 0 !important; aspect-ratio: 16/10; }
  .nucard--big .nucard__body { padding: 22px 20px 24px; }
  .nucard .btn { width: 100%; text-align: center; }
}

/* Satu Bali: five tiles, two per row, so the last one takes the full width */
@media (max-width: 620px) {
  .happen:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .happen:last-child:nth-child(odd) img { aspect-ratio: 16/9; }
}

/* The Hub: three photo tiles, stacked on phones */
.isgrid--3 { grid-template-columns: repeat(3, 1fr); }
.isgrid--3 .is { grid-column: auto; aspect-ratio: 4/3; }
@media (max-width: 900px) { .isgrid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .isgrid--3 { grid-template-columns: 1fr; } .isgrid--3 .is { aspect-ratio: 16/10; } }

/* Partner: the table becomes cards on phones */
.getsm { display: none; }
@media (max-width: 760px) {
  .gets-wrap { display: none; }
  .getsm { display: grid; gap: 12px; margin-top: 32px; }
  .getsm__c { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 20px 22px; background: rgba(233,231,227,.03); }
  .getsm__t { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
  .getsm__c ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
  .getsm__c li { display: flex; gap: 10px; font-size: 14.5px; color: var(--silver); line-height: 1.45; }
  .getsm__c li::before { content: "✓"; color: var(--gold); font-weight: 700; flex: none; }
  .getsm__c em { color: var(--silver-55); font-style: normal; font-size: 13px; }
}

/* ---------- home: the next night ---------- */
.nextbig { position: relative; display: block; border-radius: calc(var(--radius) + 6px); overflow: hidden; min-height: 260px; color: var(--silver); }
.nextbig__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.nextbig:hover .nextbig__img { transform: scale(1.04); }
.nextbig__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,23,20,.95) 30%, rgba(26,23,20,.7) 65%, rgba(26,23,20,.9)); }
.nextbig__body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 48px);
  padding: clamp(26px, 3.6vw, 44px); min-height: 260px; flex-wrap: wrap; }
.nextbig__lab { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.nextbig__name { margin-top: 12px; font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.nextbig__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 14.5px; color: var(--silver-55); }
.nextbig__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.nextbig__count b { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--gold); letter-spacing: -0.02em; line-height: 1; }
.nextbig__soon { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--silver-55); }
@media (max-width: 760px) {
  .nextbig__body { flex-direction: column; align-items: flex-start; text-align: left; }
  .nextbig__right { align-items: stretch; text-align: left; width: 100%; }
  .nextbig__right .btn { width: 100%; text-align: center; }
  .nextbig__veil { background: linear-gradient(to top, rgba(26,23,20,.96) 40%, rgba(26,23,20,.72)); }
}