/* ============================================================
   DESIGN TOKENS - shared with /members/*
   ============================================================ */
:root {
  --navy:        #2c1c62;
  --navy-mid:    #1f1448;
  --navy-deep:   #161033;
  --gold:        #ba9823;
  --gold-bright: #d4ae37;
  --violet:      #6B5CDB;
  --violet-dim:  rgba(107,92,219,0.15);
  --cream:       #F5F2EA;
  --cream-dark:  #EDE8DC;
  --warm-grey:   #6B645A;
  --rule:        #D8D3C8;
  --rule-dark:   rgba(245,242,234,0.1);

  --serif: 'Cormorant Infant', Georgia, 'Times New Roman', serif;
  --sans:  'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Sacramento', cursive;

  --max:    1180px;
  --text:   720px;
  --narrow: 580px;

  --lion-mask: url("/lion-mark.svg");
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  background: var(--cream);
  color: var(--navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }

/* Avoid single-word last lines in running text (supported browsers only) */
p, li, blockquote, figcaption { text-wrap: pretty; }

em { font-style: normal; }
.br-desktop { display: none; }
.br-mobile  { display: inline; }
@media (min-width: 760px) {
  .br-desktop { display: inline; }
  .br-mobile  { display: none; }
}

/* ============================================================
   SCROLL PROGRESS - thin gold rail at the very top
   ============================================================ */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--gold);
  z-index: 250;
  transition: width 0.1s linear;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 0.10s; }
.reveal[data-delay="2"] { transition-delay: 0.20s; }
.reveal[data-delay="3"] { transition-delay: 0.32s; }
.reveal[data-delay="4"] { transition-delay: 0.46s; }
.reveal[data-delay="5"] { transition-delay: 0.60s; }

/* ============================================================
   MASTHEAD - scroll-hide pattern
   ============================================================ */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 22px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
  border-bottom: 1px solid transparent;
  will-change: transform;
}
.masthead.is-scrolled {
  background: var(--cream);
  border-bottom-color: var(--rule);
  padding: 14px 56px;
}
.masthead.is-hidden {
  transform: translateY(-100%);
}
.masthead__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  overflow: hidden;
}
.masthead__lion-mark {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background-color: var(--navy);
  -webkit-mask: var(--lion-mask) no-repeat center / contain;
          mask: var(--lion-mask) no-repeat center / contain;
}
.masthead__name {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.masthead__wordmark {
  display: block;
  height: 22px;
  width: auto;
  background: transparent;
}
@media (hover: hover) {
  .masthead__wordmark {
    max-width: 0;
    opacity: 0;
    transform: translateX(-10px);
    clip-path: inset(0 100% 0 0);
    transition: max-width 0.55s cubic-bezier(0.65, 0, 0.2, 1),
                opacity 0.35s ease 0.08s,
                clip-path 0.6s cubic-bezier(0.65, 0, 0.2, 1) 0.05s,
                transform 0.55s cubic-bezier(0.65, 0, 0.2, 1) 0.05s;
  }
  .masthead__logo:hover .masthead__wordmark,
  .masthead__logo:focus-visible .masthead__wordmark {
    max-width: 220px;
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .masthead__lion-mark,
  .masthead__wordmark { transition: none !important; }
}
.masthead__cta {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 10px 22px;
  border: 1px solid var(--navy);
  transition: background 0.2s ease, color 0.2s ease;
}
.masthead__cta:hover {
  background: var(--navy);
  color: var(--cream);
}
.masthead__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.masthead__link {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-mid);
  transition: color 0.2s ease;
}
.masthead__link:hover { color: var(--violet); }

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
/* Keep the plural 's' lowercase inside uppercase-styled labels
   (e.g. "AEs", "CEOs"). Wrap the trailing 's' in <span class="lc">. */
.lc { text-transform: lowercase; }
.chapter {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--violet);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.section-title {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 24px;
  max-width: var(--text);
}

.section-lead {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--navy-mid);
  max-width: var(--text);
}

/* Founder signatures - each name in its own hand, signed bottom-right. */
.signature { margin-top: 56px; text-align: right; }
.signature__names {
  line-height: 1;
  white-space: nowrap;
  color: var(--navy);
  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
}
.signature__names .sig { display: inline-block; margin-left: 0.55em; }
.signature__names .sig:first-child { margin-left: 0; }
.sig--ema    { font-family: 'Alex Brush', cursive; font-size: 1.3em; }
.sig--haris  { font-family: 'Mr Dafoe', cursive;   font-size: 1.22em; }
.sig--sanjin { font-family: 'Allura', cursive;     font-size: 1.34em; }
.sig--faris  { font-family: 'Yellowtail', cursive; font-size: 1.12em; }
.signature__role {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-top: 16px;
}

.btn-apply {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  background: var(--gold);
  padding: 18px 44px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-apply:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
}
.btn-apply:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.btn-quiet {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 18px 0;
  border-bottom: 1px solid var(--navy);
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
  display: inline-flex;
  gap: 10px;
}
.btn-quiet:hover { color: var(--violet); border-color: var(--violet); gap: 18px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: auto;
  padding: 132px 56px 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.hero__watermark {
  position: absolute;
  top: 50%;
  right: -18%;
  transform: translateY(-50%);
  width: 960px;
  height: 960px;
  background-color: var(--navy);
  opacity: 0.06;
  -webkit-mask: var(--lion-mask) no-repeat center / contain;
          mask: var(--lion-mask) no-repeat center / contain;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero__headline {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 24px;
  max-width: 14ch;
}
.hero__headline em {
  font-style: normal;
  color: var(--navy);
}
.hero__sub {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.32rem;
  line-height: 1.55;
  color: var(--navy-mid);
  max-width: 580px;
  margin-bottom: 40px;
}
.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
/* Quiet status line: the next gathering, not a button. Links through to
   the events page without competing with the headline or the CTAs. */
.hero__next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero__next:hover strong { color: var(--violet); }
.hero__next-arrow {
  color: var(--violet);
  transition: transform 0.2s ease;
}
.hero__next:hover .hero__next-arrow { transform: translateX(4px); }
.hero__next::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
}
.hero__next strong {
  font-weight: 700;
  color: var(--navy);
}
.hero__next .sep {
  opacity: 0.4;
  margin: 0 2px;
}
/* ============================================================
   NARRATIVE SECTIONS - generic wrapper
   ============================================================ */
.section {
  padding: 120px 56px;
  max-width: var(--max);
  margin: 0 auto;
}
.section--narrow { max-width: 880px; }

/* ============================================================
   THESIS - "Why now" as a centred statement, distinct from the
   labelled manifesto grid that follows it
   ============================================================ */
.thesis {
  max-width: 880px;
  padding-top: 48px;
  padding-bottom: 0;
  text-align: center;
}
.thesis__setup {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--navy-mid);
  opacity: 0.82;
  max-width: 58ch;
  margin: 0 auto 36px;
}
.thesis__line {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.4;
  color: var(--navy);
  margin: 0 auto;
  max-width: 30ch;
}
.thesis__line em {
  font-style: normal;
  color: var(--violet);
}

/* ============================================================
   PROOF - stat section under hero (Chief-style)
   ============================================================ */
.proof {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 100px 56px 92px;
}
.proof__inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.proof__head { margin-bottom: 72px; }
.proof__headline {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 24px;
}
.proof__intro {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(245, 242, 234, 0.7);
  max-width: 62ch;
  margin: 0 auto;
}
/* "Who you sit with" - headline set left with a 2x2 stat block on the
   right, instead of four identical full-width columns. Keeps the figures
   literal and scannable while breaking the page's centred rhythm and the
   generic metrics-row look. */
.proof__head--split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
  text-align: left;
  margin-bottom: 0;
}
.proof__head--split .proof__headline { margin-bottom: 0; }
.proof__stats2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 48px;
}
.proof__stats2 .proof__k { font-size: clamp(2.8rem, 4.6vw, 4.2rem); margin-bottom: 12px; }
.proof__stats2 .proof__v { margin: 0; max-width: 22ch; }
@media (max-width: 860px) {
  .proof__head--split { grid-template-columns: 1fr; gap: 32px; }
}
/* "By the numbers" - reach figures woven into one sentence, left-aligned,
   instead of a three-up grid. The soft reach numbers read fine as prose;
   the deliberate grid-vs-sentence contrast with the calibre section reads
   as a choice, not an inconsistency. */
.proof__head--reach {
  text-align: left;
  max-width: 66ch;
  margin: 0;
}
.proof__head--reach .proof__intro { margin: 0; }
.proof__reach {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.4;
  color: var(--cream);
  max-width: 30ch;
  margin: 28px 0 0;
}
.proof__reach .fig { font-style: normal; color: var(--violet); }
@media (max-width: 460px) {
  .proof__stats2 { gap: 32px 28px; }
}
.proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: start;
}
.proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: start;
}
/* the calibre row carries four stats; the reach row carries three */
.proof__stats--four {
  grid-template-columns: repeat(4, 1fr);
}
/* Member atlas - full-width map of member cities. Land is a light cream
   tint on the navy background; member cities are gold dots with a
   repeating pulse. Tap or hover a dot for its city label. */
.atlas {
  /* Full-bleed strip: break out of the section padding to the viewport
     edges, and swallow the section's bottom padding so the map lands on
     the section seam. Soft vertical fades hide the flat crop lines
     where the projection window cuts through land. */
  width: 100vw;
  margin: 40px calc(50% - 50vw) -92px;
  position: relative;
}
/* Soft vertical fades via overlays, not a mask - a mask over the pulsing
   dots re-rasterizes the whole strip every frame (see the logo marquee
   note above for the same trap). */
.atlas::before,
.atlas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.atlas::before {
  top: 0;
  height: 14%;
  background: linear-gradient(180deg, var(--navy-deep), transparent);
}
.atlas::after {
  bottom: 0;
  height: 12%;
  background: linear-gradient(0deg, var(--navy-deep), transparent);
}
@media (max-width: 1080px) {
  .atlas { margin-bottom: -80px; }
}
.atlas svg { display: block; width: 100%; height: auto; }
.atlas__land {
  fill: rgba(245, 242, 234, 0.06);
  stroke: rgba(245, 242, 234, 0.12);
  stroke-width: 0.6;
}
.atlas__dot { cursor: pointer; outline: none; }
.atlas__hit { fill: transparent; }
.atlas__pin {
  fill: var(--gold-bright);
  transition: fill 0.25s ease;
}
.atlas__dot:hover .atlas__pin,
.atlas__dot:focus-visible .atlas__pin,
.atlas__dot.is-on .atlas__pin { fill: var(--cream); }
.atlas__pulse {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: atlas-pulse 3.6s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes atlas-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas__pulse { animation: none; }
}
.atlas__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--cream);
  stroke: var(--navy-deep);
  stroke-width: 3.5;
  paint-order: stroke;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.atlas__dot:hover .atlas__label,
.atlas__dot:focus-visible .atlas__label,
.atlas__dot.is-on .atlas__label { opacity: 1; }
/* One member quote positioned over the empty part of the map.
   Desktop-only; on mobile there is no room for it. */
.atlas__voice {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 30%;
  max-width: 300px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 174, 55, 0.42);
}
.atlas__voice blockquote {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.88;
}
.atlas__voice figcaption {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, 0.5);
}
@media (max-width: 900px) {
  .atlas__voice { display: none; }
}


/* Member-company logo marquee - the proof made tangible. Same drift and
   edge-fade as the city strip, but readable (this is proof, not texture).
   Items carry their own side margins so the duplicated track loops
   seamlessly under translateX(-50%). */
.logos { margin-top: 76px; }
.logos__label {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(245, 242, 234, 0.72);
  text-align: left;
  margin-bottom: 22px;
}
/* Two rows drifting in opposite directions. Edges fade with solid-to-
   transparent gradient overlays rather than a mask: a mask over a moving
   track re-rasterizes every frame (janky on Safari and phones), while
   these overlays just composite. Gradient origin matches the section
   background (--navy-deep) so the fade is invisible. */
.logos__row {
  position: relative;
  overflow: hidden;
}
.logos__row::before,
.logos__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  z-index: 2;
  pointer-events: none;
}
.logos__row::before {
  left: 0;
  background: linear-gradient(90deg, var(--navy-deep), transparent);
}
.logos__row::after {
  right: 0;
  background: linear-gradient(270deg, var(--navy-deep), transparent);
}
.logos__row + .logos__row { margin-top: 18px; }
.logos__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* The marquee is driven by native scroll (scrollLeft, via JS), not a CSS
   transform. A transform-animated layer this wide flickered and dropped the
   second row on iOS Safari; native scrolling renders rock-solid there. The
   JS wraps each track in this viewport and scrolls it. */
.marquee-vp {
  width: 100%;
  overflow: hidden;
}
.logos__track img {
  height: 54px;
  width: auto;
  margin: 0 30px;
  flex: none;
  opacity: 0.72;
  transition: opacity 0.3s ease;
}
/* Pause-on-hover and the per-logo brighten only on real pointers. On a
   touchscreen :hover sticks after a tap, which froze the marquee and read
   as a glitch. */
@media (hover: hover) {
  .logos:hover .logos__track { animation-play-state: paused; }
  .logos__track img:hover { opacity: 1; }
}
@keyframes logos-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes logos-drift-rev { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .logos { margin-top: 60px; }
  .logos__row + .logos__row { margin-top: 0; }
  .logos__track, .logos__track--rev {
    animation: none;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    gap: 28px 8px;
  }
  .logos__track img { margin: 0 20px; }
}

.proof__stat {
  text-align: center;
  position: relative;
  padding: 0 24px;
}
.proof__stat + .proof__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 38%;
  width: 1px;
  background: rgba(245, 242, 234, 0.18);
}
.proof__k {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 400;
  font-size: clamp(4rem, 9vw, 6.8rem);
  color: var(--violet);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.proof__k em {
  font-style: normal;
  color: var(--violet);
}
.proof__v {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--cream);
  max-width: 24ch;
  margin: 0 auto;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  padding-bottom: 56px;
}

.manifesto__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
}
/* Section intro set as a serif headline (like the rest of the page's
   section titles) rather than a small sans kicker, so the manifesto's
   left column matches the "This is who you sit with." treatment. */
.manifesto__label {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--navy);
  align-self: start;
}
.manifesto__body p {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--navy);
  margin-bottom: 28px;
}
.manifesto__body p:last-child { margin-bottom: 0; }
.manifesto__body p em {
  font-style: normal;
  color: var(--violet);
}

/* ============================================================
   MEMBER TIERS
   ============================================================ */
.tiers {
  background: var(--cream-dark);
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
}
/* The assembly photo, barely there behind the tiers - the actual room
   showing through behind "who's in it". */
.tiers::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assembly.jpg) center / cover no-repeat;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.tiers:hover::before { opacity: 0.22; }
.tiers__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 56px;
  position: relative;
  z-index: 1;
}
.tiers__cta { text-align: center; margin-top: 56px; }
.tiers__cta-line {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--navy);
  max-width: 24ch;
  margin: 0 auto 30px;
}
.tiers__cta .btn-quiet { border-bottom: none; }
.tiers__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px;
  align-items: start;
}
.tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tier {
  padding: 48px 36px 48px 0;
  transition: background 0.3s ease;
  cursor: default;
}
.tier:last-child { padding-right: 0; }
.tier:nth-child(2) { padding-left: 36px; }
.tier:nth-child(3) { padding-left: 36px; }
.tier:hover { background: rgba(107,92,219,0.04); }
.tier__who {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 18px;
  display: inline-block;
}
.tier__name {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--navy);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.tier__body {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--navy-mid);
}

/* ============================================================
   TRADE - what members exchange
   ============================================================ */
.trade {
  padding: 140px 0;
}
.trade__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 56px;
}
.trade__head {
  margin-bottom: 96px;
  max-width: var(--text);
}
/* Numbered editorial list: oversized folio numbers in the left margin,
   content offset right, full-width rules between. Asymmetric on purpose -
   a different rhythm from the headline-left sections, and the big 01/02/03
   become the page's signature detail. */
.trade__list {
  display: block;
}
.trade__item {
  display: grid;
  grid-template-columns: minmax(110px, 0.26fr) 1fr;
  gap: 48px;
  padding: 46px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.trade__item:last-child {
  border-bottom: 1px solid var(--rule);
}
.trade__num {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-style: normal;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  color: var(--violet);
  line-height: 0.9;
  margin-bottom: 0;
}
.trade__content { max-width: 62ch; }
.trade__title {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}
.trade__title small {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet);
  margin-top: 12px;
}
.trade__body {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--navy-mid);
}

/* ============================================================
   RULES - show up / give back / protect
   ============================================================ */
.rules {
  background: var(--navy);
  color: var(--cream);
  padding: 140px 56px 96px;
}
.rules__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.rules__head { margin-bottom: 80px; max-width: var(--text); }
/* A single member voice under the deal-flow block. Set apart from the
   centered editorial copy above it: left-aligned, hung off a gold rule,
   so it reads as one person speaking, not more body text. */
.rules__voice {
  max-width: 54ch;
  margin: 52px auto 0;
  padding-left: 30px;
  border-left: 2px solid var(--gold-bright);
  text-align: left;
}
.rules__voice blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.82;
}
.rules__voice figcaption {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, 0.5);
}
.rules__head .section-title { color: var(--cream); }
.rules__head .section-lead { color: rgba(245,242,234,0.7); }

.rules__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.rule {
  border-top: 1px solid rgba(245,242,234,0.18);
  padding-top: 28px;
}
.rule__roman {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-style: normal;
  font-size: 1.1rem;
  color: var(--gold-bright);
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}
.rule__title {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.9vw, 2.3rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 22px;
}
.rule__body {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(245,242,234,0.78);
}
/* ============================================================
   FEATURED MEMBER - preview card linking to /members/...
   ============================================================ */
.feature {
  padding: 140px 0 88px;
  background: var(--cream);
}
.feature__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 56px;
}
.feature__head { margin-bottom: 64px; }


/* ============================================================
   MEMBER CONSTELLATION - animated network (replaces the
   single featured-member card). Cream + calm variant.
   ============================================================ */
.net {
  /* Full-bleed constellation: no card, no frame - the network runs edge
     to edge and gets extra height for more spacing. */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(480px, 52vw, 680px);
  overflow: hidden;
  isolation: isolate;
}
.net__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.net__link         { stroke: rgba(107,92,219,0.30); stroke-width: 1; }
.net__link.is-gold { stroke: rgba(186,152,35,0.38); stroke-width: 1; }

.net__node { position: absolute; z-index: 2; border-radius: 50%; text-decoration: none; will-change: transform; -webkit-tap-highlight-color: transparent; }
.net__photo {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background-size: cover; background-position: center top;
  filter: grayscale(0.2);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.92), 0 0 0 3px rgba(44,28,98,0.07), 0 10px 22px -10px rgba(44,28,98,0.38);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), filter 0.4s ease, box-shadow 0.4s ease;
}
.net__node.is-founder .net__photo {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(186,152,35,0.75), 0 6px 20px -6px rgba(186,152,35,0.4), 0 10px 22px -10px rgba(44,28,98,0.32);
}
.net__node:hover { z-index: 40; }
.net__node:hover .net__photo {
  transform: scale(1.16); filter: grayscale(0);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(107,92,219,0.5), 0 14px 30px -10px rgba(44,28,98,0.45);
}
.net__node.is-founder:hover .net__photo {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold), 0 0 26px 0 rgba(186,152,35,0.42), 0 14px 30px -10px rgba(44,28,98,0.4);
}
.net__node.is-blob { pointer-events: none; z-index: 1; }
.net__node.is-blob .net__photo { box-shadow: 0 0 0 1px rgba(255,255,255,0.55); filter: none; opacity: 0.5; }
/* The violet "YOU" circle - the visitor's place in the network. */
.net__node.is-you .net__photo { opacity: 0.92; }
.net__you {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #fff;
  z-index: 2;
}
.net__grad-0 { background: radial-gradient(circle at 35% 30%, #c3b9f7, #9485e8); }
.net__grad-1 { background: radial-gradient(circle at 35% 30%, #eddc97, #d0b057); }
.net__grad-2 { background: radial-gradient(circle at 35% 30%, #ffffff, #e3ddcd); }

.net__label {
  position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translate(-50%, 4px);
  background: rgba(22,16,51,0.95); border: 1px solid rgba(212,174,55,0.35);
  color: var(--cream); padding: 7px 12px; border-radius: 10px;
  white-space: nowrap; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 50; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
}
.net__node.lbl-up .net__label { top: auto; bottom: calc(100% + 10px); }
.net__label b { display: block; font-family: var(--serif); font-weight: 700; font-size: 0.95rem; line-height: 1.1; }
.net__label i { display: block; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.04em; color: rgba(245,242,234,0.7); margin-top: 2px; max-width: 240px; white-space: normal; }
.net__node:hover .net__label { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .net { height: min(78vh, 560px); min-height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .net__photo { transition: none; }
}

/* ============================================================
   APPLY - closing call-to-action
   ============================================================ */
.apply {
  position: relative;
  background: var(--navy-deep);
  color: var(--cream);
  padding: 160px 56px;
  overflow: hidden;
}
.apply__watermark {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background-color: var(--violet);
  opacity: 0.07;
  -webkit-mask: var(--lion-mask) no-repeat center / contain;
          mask: var(--lion-mask) no-repeat center / contain;
  pointer-events: none;
}
.apply__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.apply__headline {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 28px;
}
.apply__sub {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1.18rem;
  line-height: 1.65;
  color: rgba(245,242,234,0.78);
  max-width: 56ch;
  margin: 0 auto 56px;
}
.apply__note {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245,242,234,0.55);
  max-width: 52ch;
  margin: 48px auto 0;
}
.apply__note em {
  font-style: normal;
  color: var(--gold-bright);
  font-weight: 400;
}

/* ============================================================
   FOOTER
   ============================================================ */
.page-footer {
  background: var(--navy);
  border-top: 1px solid rgba(247,244,236,0.08);
  padding: 36px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-footer__copy {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(247,244,236,0.25);
}
.page-footer__nav { display: flex; gap: 32px; }
.page-footer__nav a {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(247,244,236,0.35);
  transition: color 0.2s;
}
.page-footer__nav a:hover { color: var(--gold-bright); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .masthead { padding: 18px 28px; }
  .masthead.is-scrolled { padding: 12px 28px; }
  .hero { padding: 128px 28px 72px; min-height: auto; }
  .hero__watermark { width: 520px; height: 520px; right: -20%; opacity: 0.05; }
  .section, .tiers__inner, .trade__inner, .feature__inner { padding-left: 28px; padding-right: 28px; }
  .proof { padding: 80px 28px; }
  .proof__head { margin-bottom: 56px; }
  .proof__stats { grid-template-columns: 1fr; gap: 48px; }
  .proof__stat + .proof__stat::before { display: none; }
  .rules { padding: 100px 28px; }
  .apply { padding: 120px 28px; }
  .manifesto__grid { grid-template-columns: 1fr; gap: 32px; }
  .tiers__head { grid-template-columns: 1fr; gap: 32px; }
  .tiers__grid { grid-template-columns: 1fr; }
  .tier { padding: 32px 0 !important; border-right: none; border-bottom: 1px solid var(--rule); }
  .tier:last-child { border-bottom: none; }
  .room__stats { grid-template-columns: 1fr; gap: 32px; padding-bottom: 80px; }
  .trade__list { grid-template-columns: 1fr; gap: 40px; }
  .rules__grid { grid-template-columns: 1fr; gap: 36px; }
  .page-footer { flex-direction: column; gap: 18px; padding: 28px; text-align: center; }
  .page-footer__nav { flex-wrap: wrap; justify-content: center; gap: 18px; }
}

/* ============================================================
   MOBILE CAROUSELS - shared pattern (Vladimir-style)
   Desktop grid is hidden, carousel + dots take over.
   One slide visible at a time, scroll-snap to start.
   ============================================================ */
.m-carousel { display: none; }
.m-dots { display: none; }

@media (max-width: 760px) {
  .m-carousel {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-slide {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }
  .m-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }
  .m-dot {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    color: inherit;
    background: currentColor;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  }
  .m-dot--active { opacity: 1; transform: scale(1.25); }

  /* Per-section dot colour (overrides currentColor inheritance) */
  .proof .m-dots, .rules .m-dots { color: var(--cream); }
  .proof .m-dot--active, .rules .m-dot--active { background: var(--gold-bright); opacity: 1; }
  .trade .m-dots { color: var(--navy); }
  .trade .m-dot--active { background: var(--violet); opacity: 1; }

  /* PROOF - hide desktop grid, show carousel */
  .proof__stats { display: none; }
  .proof__slide {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 8px;
  }
  .proof__slide .proof__k { margin-bottom: 18px; }

  /* TRADE - hide desktop list, show carousel */
  .trade__list { display: none; }
  .trade__slide {
    background: transparent;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .trade__slide .trade__num {
    display: block;
    font-size: 3rem;
    margin-bottom: 18px;
  }
  .trade__slide .trade__title { margin-bottom: 18px; }

  /* RULES - hide desktop grid, show carousel */
  .rules__grid { display: none; }
  .rules .m-carousel { padding-bottom: 4px; }
  .rule-slide {
    background: rgba(245, 242, 234, 0.04);
    border: 1px solid rgba(245, 242, 234, 0.10);
    padding: 36px 32px;
    border-radius: 2px;
  }
  /* TIERS - hide desktop grid, show carousel */
  .tiers__grid { display: none; }
  .tiers .m-dots { color: var(--navy); }
  .tiers .m-dot--active { background: var(--violet); opacity: 1; }
  .tier-slide { padding: 20px 4px 28px; }

  /* Tighten the hero-to-manifesto seam on small screens */
  .hero { padding-bottom: 40px; }
  .manifesto { padding-top: 48px; }
}

/* Rule numeral - bigger, serif, matches trade__num pattern.
   Applies on every viewport. */
.rule__roman {
  font-family: var(--serif);
  font-size-adjust: 0.49;
  font-style: normal;
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--gold-bright);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

@media (max-width: 560px) {
  .hero__cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .room__overlay { left: 28px; bottom: 28px; }
  .room__overlay-caption { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .masthead { transition: none; }
}