/* ═══════════════════════════════════════════════════════
   KAELITH — membership.css  (complements kaelith.css)
════════════════════════════════════════════════════════ */

/* ── HERO ── */
.mem-hero {
  position: relative;
  background: var(--obsidian);
  padding: calc(var(--header-h) + 90px) 0 120px;
  overflow: hidden;
}
.mem-hero__bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(196,162,101,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(196,162,101,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35;
}
.mem-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mem-hero__glow--gold {
  width: 560px; height: 560px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(196,162,101,.09) 0%, transparent 70%);
}
.mem-hero__glow--teal {
  width: 400px; height: 400px;
  bottom: -80px; left: -60px;
  background: radial-gradient(circle, rgba(42,123,136,.09) 0%, transparent 70%);
}
.mem-hero__ring {
  position: absolute;
  right: -60px; top: 50%;
  transform: translateY(-50%);
  width: 500px; height: 500px;
  color: rgba(196,162,101,.06);
  pointer-events: none;
}
.mem-hero__inner { position: relative; z-index: 1; }
.mem-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.06;
  margin-bottom: 24px;
  letter-spacing: -.01em;
}
.mem-hero__title-gold { color: var(--gold); font-style: italic; }
.mem-hero__desc {
  font-size: 16px;
  font-weight: 300;
  color: var(--silver);
  line-height: 1.85;
  max-width: 500px;
  margin-bottom: 40px;
}
.mem-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }


/* ── WHY LIMITED ── */
.mem-why { padding: 100px 0; }
.mem-why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mem-why__body {
  font-size: 15px;
  font-weight: 300;
  color: var(--pewter);
  line-height: 1.85;
  margin-bottom: 20px;
}

/* Stats block */
.mem-why__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.mem-stat {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mem-stat__value {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  color: var(--slate);
  line-height: 1;
}
.mem-stat__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pewter);
}

@media (max-width: 900px) {
  .mem-why__inner { grid-template-columns: 1fr; gap: 56px; }
}


/* ── TIERS ── */
.mem-tiers { padding: 100px 0; }
.mem-tiers__grid { margin-top: 64px; }

/* top accent bar on each card */
.tier-card__top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.tier-card__top-bar--teal  { background: var(--teal); }
.tier-card__top-bar--gold  { background: var(--gold); }
.tier-card__top-bar--amber { background: var(--amber); }

.tier-card__divider {
  height: 1px;
  background: rgba(0,0,0,.07);
  margin: 24px 0;
}
.tier-card__divider--light { background: rgba(255,255,255,.1); }

.tier-card__note {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--pewter);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}
.tier-card__note--light { color: rgba(168,181,194,.7); }


/* ── COMPARISON TABLE ── */
.mem-compare { padding: 100px 0; }

.compare-table {
  margin-top: 56px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.compare-table__head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: var(--navy);
  padding: 0;
}
.compare-table__col-label {
  padding: 20px 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver);
}
.compare-table__tier {
  padding: 20px 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--silver);
  border-left: 1px solid rgba(255,255,255,.05);
}
.compare-table__tier--featured {
  color: var(--gold);
  background: rgba(196,162,101,.06);
}

.compare-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  border-top: 1px solid rgba(0,0,0,.06);
}
.compare-table__row--alt { background: rgba(0,0,0,.015); }

.compare-table__label {
  padding: 16px 28px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--slate);
  display: flex;
  align-items: center;
}
.compare-table__cell {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(0,0,0,.05);
}
.compare-table__cell--featured {
  background: rgba(196,162,101,.04);
  border-left: 1px solid rgba(196,162,101,.1);
}

.compare-check {
  width: 20px; height: 20px;
  color: var(--teal);
  flex-shrink: 0;
}
.compare-table__cell--featured .compare-check { color: var(--gold); }

.compare-dash {
  font-size: 16px;
  color: rgba(107,123,141,.3);
}
.compare-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: .04em;
}
.compare-table__cell--featured .compare-value { color: var(--gold-dark); }

@media (max-width: 700px) {
  .compare-table { overflow-x: auto; }
  .compare-table__head,
  .compare-table__row { min-width: 560px; }
}


/* ── PROCESS ── */
.mem-process { padding: 100px 0; }
.mem-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  position: relative;
}
.process-step {
  position: relative;
  padding: 0 32px 0 0;
}
.process-step__num {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 300;
  color: rgba(196,162,101,.25);
  line-height: 1;
  margin-bottom: 20px;
}
.process-step__connector {
  position: absolute;
  top: 22px;
  right: 0;
  width: calc(100% - 48px);
  height: 1px;
  background: linear-gradient(to right, rgba(196,162,101,.3), rgba(196,162,101,.1));
  left: 48px;
}
.process-step__connector--last { display: none; }
.process-step__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ivory);
  margin-bottom: 12px;
  line-height: 1.3;
}
.process-step__desc {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--silver);
  line-height: 1.8;
}

@media (max-width: 900px) {
  .mem-process__steps { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
  .process-step__connector { display: none; }
}
@media (max-width: 560px) {
  .mem-process__steps { grid-template-columns: 1fr; }
}


/* ── FAQ ── */
.mem-faq { padding: 100px 0; }
.mem-faq__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.faq-list { display: flex; flex-direction: column; }

.faq-item {
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--slate);
  text-align: left;
  cursor: pointer;
  transition: color .3s;
}
.faq-item__q:hover { color: var(--gold-dark); }
.faq-item.open .faq-item__q { color: var(--gold-dark); }

.faq-item__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--pewter);
  transition: transform .35s var(--ease-luxury);
}
.faq-item.open .faq-item__icon { transform: rotate(180deg); }

.faq-item__a {
  padding-bottom: 22px;
}
.faq-item__a p {
  font-size: 14px;
  font-weight: 300;
  color: var(--pewter);
  line-height: 1.85;
}

@media (max-width: 800px) {
  .mem-faq__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ── IMAGES MOBILE FIX ── */
@media (max-width: 768px) {
  .service-card-visual {
    aspect-ratio: unset !important;
    height: 350px;
  }

  .service-card-visual--photo {
    aspect-ratio: unset !important;
    height: 350px;
  }

  .service-card-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}