/* ============================================================
   Rise Up Queens — Inner Healing Landing Page
   Aesthetic: editorial, warm, ethereal. Cream + champagne.
   Type: Cormorant Garamond (display) + Lato (body).
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Tokens ---------- */
:root {
  /* Palette — warm cream + champagne */
  --cream-50: #FBF7F0;
  --cream-100: #F6EFE2;
  --cream-200: #EFE5D1;
  --cream-300: #E5D6B6;

  --gold-300: #E8C97E;
  --gold-400: #D6B05E;
  --gold-500: #C9A84C;   /* primary champagne gold */
  --gold-600: #B8923D;
  --gold-700: #8E6E26;

  --ink-900: #2A2520;    /* deep warm charcoal — for body copy */
  --ink-700: #4A4138;
  --ink-500: #756957;
  --ink-400: #9C907C;
  --ink-300: #C0B6A2;

  --white: #FFFFFF;

  /* Surfaces */
  --bg-page: #FBF7F0;
  --bg-card: #FFFFFF;
  --bg-deep: #2A2520;   /* used very sparingly */

  /* Type */
  --f-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --f-body: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* Sizing */
  --container: 1240px;
  --container-narrow: 980px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  /* Shadows — soft, warm */
  --shadow-sm: 0 2px 6px rgba(138, 110, 50, 0.06), 0 1px 2px rgba(138, 110, 50, 0.04);
  --shadow-md: 0 10px 30px rgba(138, 110, 50, 0.08), 0 4px 12px rgba(138, 110, 50, 0.05);
  --shadow-lg: 0 30px 60px rgba(138, 110, 50, 0.12), 0 12px 24px rgba(138, 110, 50, 0.06);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--ink-900);
  background: var(--bg-page);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--gold-300); color: var(--ink-900); }

/* Subtle paper grain overlay across whole page */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.30  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
}

/* ---------- Reusable ---------- */
.eyebrow {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 1.25rem 0;
}

.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 1.25rem 0;
}
.section-title em {
  font-style: italic;
  color: var(--gold-600);
  font-weight: 500;
}
.section-title--light { color: var(--cream-50); }
.section-title--light em { color: var(--gold-300); }

.section-lede,
.book__lede,
.donate__body,
.mtt__body {
  font-family: var(--f-body);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-700);
  margin: 0 0 1rem 0;
  max-width: 56ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.55rem;
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              background-color 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: var(--white);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
}
.btn--ghost:hover {
  border-color: var(--gold-500);
  color: var(--gold-700);
}

.btn--outline {
  background: transparent;
  color: var(--gold-700);
  border: 1px solid var(--gold-500);
}
.btn--outline:hover {
  background: var(--gold-500);
  color: var(--white);
}

.btn--full { width: 100%; justify-content: center; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.2rem 0;
  transition: background-color 0.4s var(--ease-out),
              backdrop-filter 0.4s, box-shadow 0.4s, padding 0.4s;
}
.nav.is-scrolled,
.nav.is-open {
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(201, 168, 76, 0.18);
}
.nav.is-scrolled { padding: 0.8rem 0; }
/* When the mobile menu is open, the nav strip uses the cream backdrop
   so the hamburger and any links stay legible. */
.nav.is-open .nav__links a:not(.nav__cta) { color: var(--ink-700); }
.nav.is-open .nav__menu-btn span { background: var(--ink-900); }

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  display: flex; align-items: center; gap: 0.85rem;
  color: var(--gold-600);
}
.nav__brand-mark svg { width: 36px; height: auto; }

.nav__brand-logo {
  /* Transparent gold shield — floats cleanly on the cream nav. */
  display: block;
  height: 72px;
  width: auto;
  transition: transform 0.3s var(--ease-out), height 0.4s var(--ease-out);
}
.nav.is-scrolled .nav__brand-logo { height: 56px; }
.nav__brand:hover .nav__brand-logo { transform: translateY(-1px); }

.nav__brand-text {
  display: flex; flex-direction: column;
  line-height: 1;
  color: var(--ink-900);
}
.nav__brand-line1 {
  font-family: var(--f-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.15rem;
}
.nav__brand-line2 {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__links {
  display: flex; align-items: center; gap: 2.25rem;
}
.nav__links a {
  font-family: var(--f-body);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-50);   /* light over the dark hero */
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.nav.is-scrolled .nav__links a:not(.nav__cta) {
  color: var(--ink-700);     /* dark once nav has the cream backdrop */
}
.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}
.nav__links a:not(.nav__cta):hover { color: var(--gold-700); }
.nav__links a:not(.nav__cta):hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__cta {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: var(--white) !important;
  padding: 0.7rem 1.3rem !important;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, filter 0.3s;
}
.nav__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(201, 168, 76, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.nav__menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px; height: 32px;
  justify-content: center;
  align-items: center;
}
.nav__menu-btn span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--cream-50);
  transition: transform 0.4s var(--ease-out), opacity 0.3s, background-color 0.3s;
}
.nav.is-scrolled .nav__menu-btn span { background: var(--ink-900); }
.nav__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile dropdown — full-width panel beneath the nav strip.
   Uses opacity + transform (not max-height) so it animates reliably
   and never gets clipped by viewport quirks. */
.nav__mobile {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(1.25rem, 5vw, 2rem) 1.5rem;
  background: rgba(251, 247, 240, 0.98);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 24px 48px rgba(42, 37, 32, 0.18);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out),
              transform 0.32s var(--ease-out),
              visibility 0s linear 0.32s;
}
.nav.is-open .nav__mobile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.32s var(--ease-out),
              transform 0.32s var(--ease-out),
              visibility 0s linear 0s;
}
.nav__mobile a {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--ink-900);
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--cream-200);
  transition: color 0.3s, padding-left 0.3s var(--ease-out);
}
.nav__mobile a:last-child {
  border-bottom: none;
  margin-top: 0.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--white);
  text-align: center;
  border-radius: 999px;
  font-style: normal;
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav__mobile a:hover { padding-left: 0.85rem; color: var(--gold-700); }
.nav__mobile a:last-child:hover { padding-left: 1.5rem; color: var(--white); }

/* ============================================================
   HERO
   ============================================================ */
/* Hero-scoped override: ghost button needs to read on dark bg */
.hero .btn--ghost {
  color: var(--cream-50);
  border-color: rgba(232, 201, 126, 0.4);
}
.hero .btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-300);
  background: rgba(232, 201, 126, 0.06);
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(4rem, 8vh, 6rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--cream-50);
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(232, 201, 126, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 90% 100%, rgba(184, 146, 61, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #15110D 0%, #1F1A14 40%, #2A2520 100%);
}
.hero::after {
  /* subtle vignette so the gold accents pop against the dark field */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.hero__orb--a {
  width: 520px; height: 520px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(232, 201, 126, 0.45), transparent 70%);
  opacity: 0.7;
  animation: float 14s ease-in-out infinite;
}
.hero__orb--b {
  width: 460px; height: 460px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(184, 146, 61, 0.4), transparent 70%);
  opacity: 0.6;
  animation: float 18s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.06); }
}

/* Overhead light beam: a soft column of warmth from above,
   gently breathing in opacity to feel sanctuary-like. */
.hero__beam {
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 60vw; height: 120%;
  background: radial-gradient(ellipse 40% 60% at 50% 0%,
                              rgba(232, 201, 126, 0.18) 0%,
                              rgba(232, 201, 126, 0.06) 35%,
                              transparent 70%);
  filter: blur(20px);
  animation: beam-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes beam-breathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.04); }
}

/* Floating gold motes: tiny points of light drifting upward,
   like incense rising or dust caught in chapel light. */
.hero__motes {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__motes span {
  position: absolute;
  left: var(--x);
  bottom: -20px;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 170, 0.95) 0%,
                                       rgba(232, 201, 126, 0.7) 40%,
                                       transparent 70%);
  box-shadow: 0 0 8px rgba(232, 201, 126, 0.6);
  opacity: 0;
  animation: mote-rise var(--d, 20s) linear var(--delay, 0s) infinite;
}
@keyframes mote-rise {
  0%   { transform: translate(0, 0) scale(0.6);     opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(-12px, -55vh) scale(1); opacity: 0.85; }
  92%  { opacity: 0.6; }
  100% { transform: translate(10px, -110vh) scale(0.7); opacity: 0; }
}

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  width: 100%;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.2s forwards;
}
.hero__eyebrow-line {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.hero__eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--gold-500), transparent);
}
.hero__eyebrow-text {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.hero__eyebrow-line {
  background: linear-gradient(90deg, transparent, var(--gold-400));
}
.hero__eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  margin: 0 0 1.75rem 0;
  letter-spacing: -0.015em;
  line-height: 0.98;
}
.hero__title-main {
  display: block;
  font-size: clamp(3.8rem, 11vw, 8.5rem);
  font-weight: 400;
  color: var(--cream-50);
  line-height: 0.95;
  letter-spacing: -0.015em;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 0.35s forwards;
}
.hero__title-main em {
  font-style: italic;
  color: var(--gold-400);
  font-weight: 500;
}
.hero__title-sub {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.005em;
  margin-top: 1.1rem;
  color: rgba(251, 247, 240, 0.88);
  line-height: 1.2;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.55s forwards;
}
.hero__title-name {
  display: inline;
  color: var(--cream-50);
  white-space: nowrap;
}

.hero__sub {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-style: italic;
  color: rgba(251, 247, 240, 0.82);
  margin: 0 auto 2.5rem;
  max-width: 30rem;
  line-height: 1.55;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.7s forwards;
}
.hero__sub-accent {
  display: inline-block;
  position: relative;
  color: var(--gold-300);
}
.hero__sub-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--gold-300) 30%, var(--gold-300) 70%, transparent);
  opacity: 0.55;
  border-radius: 50%;
  filter: blur(2px);
}

.hero__actions {
  display: flex; gap: 1rem;
  justify-content: center; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.85s forwards;
}

.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 201, 126, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 1s forwards;
}
.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--cream-50);
  line-height: 1;
}
.hero__meta-item svg {
  width: 18px; height: 18px;
  color: var(--gold-300);
  flex-shrink: 0;
}
.hero__meta-sep {
  width: 1px; height: 22px;
  background: rgba(232, 201, 126, 0.3);
}

.hero__scroll {
  position: absolute;
  bottom: 1.75rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem;
  color: var(--ink-500);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.3s forwards;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--gold-500));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -40px; left: 0;
  width: 100%; height: 40px;
  background: linear-gradient(180deg, transparent, var(--cream-50));
  animation: scrollIndicator 2.2s ease-in-out infinite;
}
@keyframes scrollIndicator {
  0% { top: -40px; }
  100% { top: 40px; }
}
.hero__scroll-text {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   WHAT TO EXPECT
   ============================================================ */
.expect {
  position: relative;
  padding: clamp(5rem, 10vh, 8rem) 0 clamp(4rem, 8vh, 7rem);
  background: var(--bg-page);
}
.expect::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(180deg, transparent, var(--gold-500));
}

.expect__head {
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vh, 4.5rem);
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}
.expect__head .section-lede {
  margin: 1.5rem auto 0;
}

.expect__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
              border-color 0.3s;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(232, 201, 126, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cream-300);
}
.card:hover::before { opacity: 1; }

.card--featured {
  background:
    linear-gradient(180deg, var(--cream-50) 0%, var(--white) 100%);
  border-color: var(--gold-300);
}
.card--featured::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

.card__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-600);
  margin-bottom: 1.75rem;
}
.card__icon svg { width: 100%; height: 100%; }

.card__number {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold-500);
  letter-spacing: 0.1em;
}

.card__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 0.85rem 0;
  line-height: 1.15;
}

.card__body {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0;
}

.verse {
  max-width: 760px;
  margin: clamp(4rem, 8vh, 6rem) auto 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  position: relative;
}
.verse__mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 7rem;
  line-height: 0.6;
  color: var(--gold-400);
  opacity: 0.4;
  margin-bottom: 0.5rem;
}
.verse__text {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0 0 1rem 0;
}
.verse__cite {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* ============================================================
   BOOK YOUR SESSION
   ============================================================ */
.book {
  position: relative;
  padding: clamp(5rem, 10vh, 8rem) 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232, 201, 126, 0.16), transparent),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
  overflow: hidden;
}
.book::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-300), transparent 70%);
  opacity: 0.25;
  filter: blur(60px);
  pointer-events: none;
}

.book__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
  z-index: 2;
}

.book__head {
  text-align: center;
  margin-bottom: 3rem;
}
.book__lede {
  margin: 0 auto 0.75rem;
}
.book__note {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-700);
  margin: 1.25rem auto 0;
  max-width: 50ch;
}

/* GHL Calendar Embed Wrapper.
   The iframe is allowed to grow to its natural content height
   (driven by GHL's resize postMessage in main.js) so every date,
   time slot, and booking step is visible without nested scrolling.
   The wrapper width keeps the calendar from sprawling on large
   monitors. */
.calendar-embed-wrapper {
  position: relative;
  background: var(--white);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-xl);
  padding: 0.5rem;
  box-shadow: var(--shadow-md);
  max-width: 820px;
  margin: 0 auto;
}
.calendar-embed-wrapper iframe {
  width: 100%;
  min-height: 760px;   /* fallback before GHL reports its real height */
  border: none;
  border-radius: calc(var(--radius-xl) - 0.5rem);
  display: block;
}
.calendar-embed-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  z-index: 3;
}

.calendar-placeholder {
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 30px, rgba(201, 168, 76, 0.03) 30px 31px),
    var(--cream-50);
  border-radius: calc(var(--radius-xl) - 0.75rem);
  padding: 2rem;
}
.calendar-placeholder__inner {
  text-align: center;
  max-width: 420px;
}
.calendar-placeholder__spinner {
  width: 56px; height: 56px;
  margin: 0 auto 1.5rem;
  color: var(--gold-500);
  animation: spin 1.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.calendar-placeholder__title {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink-900);
  margin: 0 0 0.75rem;
}
.calendar-placeholder__sub {
  font-size: 0.9rem;
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0;
}
.calendar-placeholder__sub span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-400);
  font-style: italic;
}
.calendar-placeholder code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--cream-200);
  color: var(--gold-700);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.book__zoom {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 540px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
}
.book__zoom-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-900);
  color: var(--gold-300);
  border-radius: 50%;
}
.book__zoom-icon svg { width: 22px; height: 22px; }
.book__zoom-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  margin: 0;
  color: var(--ink-900);
}
.book__zoom-link {
  font-size: 0.88rem;
  margin: 0.15rem 0 0;
  color: var(--ink-500);
}
.book__zoom-link a {
  color: var(--gold-700);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-300);
  transition: color 0.3s, border-color 0.3s;
}
.book__zoom-link a:hover {
  color: var(--gold-600);
  border-bottom-color: var(--gold-500);
}

/* ============================================================
   DONATE
   ============================================================ */
.donate {
  position: relative;
  padding: clamp(5rem, 10vh, 8rem) 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 50%, rgba(232, 201, 126, 0.18), transparent),
    linear-gradient(135deg, #1F1A14 0%, #2A2520 50%, #1F1A14 100%);
  color: var(--cream-50);
  overflow: hidden;
}
.donate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232, 201, 126, 0.04) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(232, 201, 126, 0.04) 0, transparent 50%);
  pointer-events: none;
}

.donate__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.donate__logo {
  display: block;
  width: auto;
  height: 96px;
  margin: 0 0 1.75rem;
  /* Transparent gold shield — drop shadow gives it lift on the dark bg */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

.donate__copy .eyebrow { color: var(--gold-300); }
.donate__body {
  color: rgba(251, 247, 240, 0.85);
}
.donate__note {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-300);
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold-500);
}

.donate__card {
  position: relative;
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--white) 100%);
  color: var(--ink-900);
  border-radius: var(--radius-xl);
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.donate__card::before,
.donate__card::after {
  content: "";
  position: absolute;
  border: 1px solid var(--gold-400);
  border-radius: calc(var(--radius-xl) - 8px);
  pointer-events: none;
}
.donate__card::before {
  inset: 8px;
  opacity: 0.55;
}
.donate__card::after {
  inset: 14px;
  opacity: 0.25;
}
.donate__card-ornament {
  width: 48px; height: 48px;
  margin: 0 auto 1.5rem;
  color: var(--gold-500);
}
.donate__card-eyebrow {
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 0.5rem;
}
.donate__card-amount {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--ink-900);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.donate__card-currency {
  color: var(--gold-600);
  margin-right: 0.1em;
}
.donate__card-desc {
  font-size: 0.92rem;
  color: var(--ink-500);
  margin: 0 0 2rem;
  line-height: 1.6;
}

/* ============================================================
   MINING THE TRUTH
   ============================================================ */
.mtt {
  position: relative;
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg-page);
  overflow: hidden;
}

.mtt__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.mtt__visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.mtt__visual svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.mtt__body { max-width: 52ch; }
.mtt__body strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.18em;
  color: var(--gold-700);
}
.mtt__copy .btn { margin-top: 1.5rem; }

/* ============================================================
   FOOTER — centered editorial layout
   ============================================================ */
.footer {
  position: relative;
  background: var(--cream-100);
  padding: clamp(3rem, 6vh, 4rem) 0 1.75rem;
  border-top: 1px solid var(--cream-200);
  text-align: center;
}
/* the existing top accent line is removed; a centered diamond ornament
   handles the same "this is the end of the page" cue with more grace */
.footer::before { content: none; }

.footer__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

/* Diamond ornament with flanking hairlines */
.footer__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--gold-500);
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.footer__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}
.footer__ornament span:last-child {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}
.footer__ornament svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Two-column link block, centered as a pair */
.footer__nav {
  display: flex;
  justify-content: center;
  gap: clamp(3rem, 8vw, 5rem);
  width: 100%;
}
.footer__col { text-align: center; }
.footer__col-title {
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 1rem 0;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer__col a {
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--ink-700);
  transition: color 0.3s;
}
.footer__col a:hover { color: var(--gold-700); }

/* Disclaimer — italic display face for a softer reading tone */
.footer__disclaimer {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-500);
  max-width: 56ch;
  margin: 0.5rem auto 0;
}
.footer__disclaimer em {
  color: var(--gold-700);
  font-weight: 500;
}

.footer__copyright {
  font-family: var(--f-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-200);
  width: 100%;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .expect__grid { grid-template-columns: 1fr; max-width: 540px; }
  .donate__inner,
  .mtt__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .donate__body, .mtt__body, .section-lede { margin-left: auto; margin-right: auto; }
  .donate__note { display: inline-block; text-align: left; }
  .mtt__visual { order: -1; }
  .mtt__visual svg { max-width: 220px; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: flex; }
  .nav__mobile { display: flex; }

  .hero__ornament { display: none; }
  .hero__meta-sep { display: none; }
  .hero__meta { gap: 1rem 1.5rem; padding: 1rem 1.25rem; }
  .hero__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  .card { padding: 2rem 1.5rem; }

  .calendar-embed-wrapper { padding: 0.35rem; }
  .calendar-embed-wrapper iframe { min-height: 820px; }
  .calendar-placeholder { min-height: 540px; }

  .donate__card { padding: 2.25rem 1.5rem; }

  .footer__nav { gap: 2.5rem; }
}

@media (max-width: 480px) {
  .hero__title-name { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  .verse__mark { font-size: 5rem; }
  .footer__nav { gap: 2rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Active nav state */
.nav__links a.is-current {
  color: var(--gold-300);
}
.nav.is-scrolled .nav__links a.is-current {
  color: var(--gold-700);
}
.nav__links a.is-current::after {
  transform: scaleX(1) !important;
  transform-origin: left center;
}

/* ---------- About hero (slimmer than landing hero) ---------- */
.about-hero {
  position: relative;
  padding: clamp(8rem, 16vh, 11rem) 0 clamp(4rem, 8vh, 6rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232, 201, 126, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #1F1A14 0%, #2A2520 100%);
  color: var(--cream-50);
}
.about-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.about-hero__inner {
  position: relative; z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.about-hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cream-50);
  margin: 1.5rem 0 1.25rem;
}
.about-hero__title em {
  font-style: italic;
  color: var(--gold-400);
  font-weight: 500;
}
.about-hero__sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  color: rgba(251, 247, 240, 0.78);
  margin: 0;
  line-height: 1.45;
}

/* ---------- Bio section ---------- */
.bio {
  padding: clamp(4rem, 9vh, 7rem) 0;
  background: var(--bg-page);
  position: relative;
}
.bio::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(180deg, transparent, var(--gold-500));
}
.bio__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Portrait */
.bio__portrait {
  position: sticky;
  top: 6rem;
}
.bio__portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.bio__portrait-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-400);
  border-radius: calc(var(--radius-lg) - 8px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}
.bio__portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.bio__portrait-placeholder {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--gold-500);
  background:
    radial-gradient(ellipse at center, rgba(232, 201, 126, 0.18), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 30px, rgba(201, 168, 76, 0.05) 30px 31px),
    var(--cream-50);
}
.bio__portrait-frame.is-placeholder .bio__portrait-placeholder { display: flex; }
.bio__portrait-placeholder svg { width: 88px; height: 88px; opacity: 0.55; }
.bio__portrait-placeholder p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-500);
  margin: 0;
}

.bio__portrait-caption {
  text-align: center;
  margin-top: 1.25rem;
}
.bio__caption-name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink-900);
  margin: 0;
}
.bio__caption-role {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0.4rem 0 0;
}

/* Copy */
.bio__eyebrow { margin-bottom: 1rem; }
.bio__title {
  margin-bottom: 2rem;
}
.bio__text p {
  font-family: var(--f-body);
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--ink-700);
  margin: 0 0 1.25rem 0;
}
.bio__text p:last-of-type { margin-bottom: 1.75rem; }
.bio__close {
  font-family: var(--f-display) !important;
  font-style: italic;
  font-size: 1.15rem !important;
  color: var(--ink-900) !important;
  padding-left: 1.25rem;
  border-left: 1px solid var(--gold-400);
}
.bio__cta { margin-top: 0.5rem; }

/* ---------- Faith Statement ---------- */
.faith {
  padding: clamp(4rem, 9vh, 7rem) 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 100%, rgba(232, 201, 126, 0.16), transparent),
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(232, 201, 126, 0.12), transparent),
    linear-gradient(180deg, #1F1A14 0%, #2A2520 50%, #1F1A14 100%);
  color: var(--cream-50);
}
.faith__head {
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vh, 4rem);
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}
.faith__head .eyebrow { color: var(--gold-300); }
.faith__lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(251, 247, 240, 0.78);
  margin: 1.25rem auto 0;
  max-width: 50ch;
}

.faith__list {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.faith__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  background: rgba(251, 247, 240, 0.04);
  border: 1px solid rgba(232, 201, 126, 0.18);
  border-radius: var(--radius-md);
  transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--ease-out);
}
.faith__item:hover {
  background: rgba(251, 247, 240, 0.07);
  border-color: rgba(232, 201, 126, 0.32);
  transform: translateY(-2px);
}
.faith__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--gold-400);
  line-height: 1;
  padding-top: 0.1rem;
}
.faith__text {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--cream-50);
  margin: 0 0 0.85rem 0;
  letter-spacing: -0.005em;
}
.faith__refs {
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(251, 247, 240, 0.5);
  margin: 0;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .bio__inner {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .bio__portrait {
    position: static;
    margin: 0 auto;
    max-width: 360px;
  }
  .bio__title { text-align: left; }
}
@media (max-width: 720px) {
  .faith__item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
  }
  .faith__num { font-size: 1.5rem; }
}

/* ============================================================
   ABOUT PAGE — GALLERY (triptych)
   ============================================================ */
.gallery {
  padding: clamp(4rem, 9vh, 7rem) 0;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(232, 201, 126, 0.10), transparent),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(232, 201, 126, 0.08), transparent),
    var(--cream-100);
  position: relative;
}

.gallery__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.gallery__head {
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vh, 4rem);
  text-align: center;
}
.gallery__lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-700);
  margin: 1rem auto 0;
  max-width: 48ch;
  line-height: 1.55;
}

/* Asymmetric triptych: 1 large feature (left) + 2 stacked (right) */
.gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}

.gallery__feature {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.gallery__feature .gallery__frame {
  aspect-ratio: 4 / 5;
  flex: 1;
}

.gallery__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}
.gallery__item .gallery__frame {
  aspect-ratio: 4 / 3;
  flex: 1;
}

/* Frame: gold inner border + soft warm shadow */
.gallery__frame {
  position: relative;
  overflow: hidden;
  background: var(--cream-50);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}
.gallery__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(232, 201, 126, 0.55);
  border-radius: calc(var(--radius-md) - 6px);
  pointer-events: none;
  z-index: 3;
  transition: inset 0.55s var(--ease-out);
}
.gallery__frame:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.gallery__frame:hover::after {
  inset: 6px;
}
.gallery__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 1.2s var(--ease-out);
}
.gallery__frame:hover img {
  transform: scale(1.04);
}

/* Placeholder while real image is missing */
.gallery__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--gold-500);
  background:
    radial-gradient(ellipse at center, rgba(232, 201, 126, 0.18), transparent 65%),
    repeating-linear-gradient(45deg, transparent 0 32px, rgba(201, 168, 76, 0.06) 32px 33px),
    var(--cream-50);
  z-index: 2;
  padding: 1.5rem;
  text-align: center;
}
.gallery__frame.is-placeholder .gallery__placeholder { display: flex; }
.gallery__placeholder svg {
  width: 56px;
  height: 56px;
  opacity: 0.6;
}
.gallery__placeholder p {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 3px;
}

/* Italic captions, sitting under each frame */
.gallery__feature figcaption,
.gallery__item figcaption {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-500);
  line-height: 1.45;
  margin: 0;
  padding-left: 0.25rem;
}

/* Responsive: stack the triptych on tablet/mobile */
@media (max-width: 880px) {
  .gallery__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
  .gallery__feature .gallery__frame { aspect-ratio: 4 / 3; }
}

/* ============================================================
   DONATE PAGE — gold background, embedded Donorbox card
   ============================================================ */
.give {
  position: relative;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(4rem, 8vh, 6rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 10% 10%, rgba(255, 240, 200, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 90% 90%, rgba(232, 201, 126, 0.45) 0%, transparent 55%),
    linear-gradient(135deg,
      #F0D89A 0%,
      #E8C97E 35%,
      #D6B05E 70%,
      #C9A84C 100%);
}

.give__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.give__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.give__orb--a {
  width: 520px; height: 520px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, #FFF3D6, transparent 70%);
  animation: float 16s ease-in-out infinite;
}
.give__orb--b {
  width: 460px; height: 460px;
  bottom: -180px; right: -120px;
  background: radial-gradient(circle, #FFE9B8, transparent 70%);
  animation: float 20s ease-in-out infinite reverse;
}

.give__inner {
  position: relative; z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  text-align: center;
}

.give__head {
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.give__eyebrow {
  color: #5B4A1A;
  margin-bottom: 1rem;
}
.give__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 1.5rem 0;
}
.give__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink-900);
}
.give__lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(42, 37, 32, 0.78);
  max-width: 52ch;
  margin: 0 auto;
}

/* The card that holds the Donorbox iframe — white inside, gold around */
.give__card {
  position: relative;
  background: transparent;
  padding: 0;
  margin: 0 auto;
}

.give__card-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--gold-500);
  max-width: 200px;
  margin: 0 auto 0.5rem;
  position: relative;
  z-index: 2;
}
.give__card-ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}
.give__card-ornament span:last-child {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}
.give__card-ornament svg { width: 14px; height: 14px; flex-shrink: 0; }

.give__card iframe {
  display: block;
  position: relative;
  z-index: 2;
  background: transparent;
  border-radius: var(--radius-md);
}

.give__footnote {
  margin: 1.75rem auto 0;
  max-width: 44ch;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(42, 37, 32, 0.65);
  line-height: 1.55;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .give { padding-top: clamp(6rem, 12vh, 8rem); }
  .give__card iframe { height: 920px; }
}

/* ============================================================
   DONATE PAGE — overrides for the gold background
   ============================================================ */

/* Nav over gold needs the cream backdrop + dark text from the start
   (no "scroll to reveal" — the page is gold all the way up). */
.page-donate .nav {
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(201, 168, 76, 0.18);
}
.page-donate .nav__links a:not(.nav__cta) { color: var(--ink-700); }
.page-donate .nav__menu-btn span { background: var(--ink-900); }
/* Active "Donate" link: dark gold, fully visible on the cream nav strip */
.page-donate .nav__links a.is-current {
  color: var(--gold-700);
}

/* Form card: hugs the Donorbox iframe exactly.
   The iframe is forced to 500px (Donorbox's natural form width)
   and the card wraps it with a thin even cream/gold border on all
   four sides. No more lopsided whitespace inside the card. */
.give__card {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1rem 1.25rem;
  text-align: center;     /* helps any inline iframe sit dead-center */
}
.give__card iframe {
  display: block;
  margin: 0 auto;
  width: 100% !important;
  max-width: 420px !important;
}

/* Title now sits closer to the card since the lede is gone */
.give__head { margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }

/* On narrow screens give the gold gradient room to breathe under the
   nav before the title shows. */
@media (max-width: 720px) {
  .give__card { max-width: 100%; }
}

/* ============================================================
   CUSTOM BOOKING (Day Picker + Time List)
   Ported from ruk-app-portal/CalendarShowcase OptionC.
   ============================================================ */

.booking-card {
  position: relative;
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--white) 100%);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-xl);
  padding: 1.25rem clamp(1rem, 2.5vw, 2rem) 1.75rem;
  box-shadow:
    0 30px 60px rgba(108, 84, 22, 0.14),
    0 8px 24px rgba(108, 84, 22, 0.08);
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
}
.booking-card::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: calc(var(--radius-xl) - 6px);
  pointer-events: none;
}
.booking-card__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--gold-500);
  max-width: 200px;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 2;
}
.booking-card__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}
.booking-card__ornament span:last-child {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}
.booking-card__ornament svg { width: 14px; height: 14px; flex-shrink: 0; }

#bookingApp { position: relative; z-index: 2; min-height: 340px; }

/* ---------- Loading / errors ---------- */
.booking__loading,
.booking__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
}
.booking__loading p,
.booking__error p {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink-500);
  margin: 0;
  max-width: 38ch;
}
.booking__spinner {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--cream-200);
  border-top-color: var(--gold-500);
  animation: booking-spin 0.9s linear infinite;
}
.booking__spinner--sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes booking-spin { to { transform: rotate(360deg); } }

/* ---------- Two-column layout ---------- */
.booking__layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

/* ---------- Mini calendar ---------- */
.booking__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.booking__month p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: 0.015em;
}
.booking__nav {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-500);
  transition: background-color 0.25s, color 0.25s;
}
.booking__nav svg { width: 16px; height: 16px; }
.booking__nav svg path { stroke-width: 1.4; }
.booking__nav:hover { background: var(--cream-100); color: var(--gold-700); }

.booking__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.booking__dow span {
  font-family: var(--f-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  text-align: center;
  padding: 0.4rem 0;
}

.booking__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.booking__day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition:
    background-color 0.25s, color 0.25s, border-color 0.25s,
    box-shadow 0.25s, transform 0.18s var(--ease-out);
}
.booking__day--blank { visibility: hidden; }
.booking__day--unavailable {
  color: var(--ink-300);
  cursor: default;
}
.booking__day--available {
  color: var(--ink-900);
  cursor: pointer;
}
.booking__day--available:hover {
  background: var(--cream-100);
  border-color: var(--gold-300);
}
.booking__day--selected {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--white);
  font-weight: 600;
  border-color: transparent;
  box-shadow:
    0 4px 12px rgba(201, 168, 76, 0.32),
    0 0 0 3px rgba(201, 168, 76, 0.18);
  transform: scale(1.04);
}
.booking__day-dot {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
}

/* ---------- Time list ---------- */
.booking__times {
  min-height: 240px;
  position: relative;
}
/* Editorial column divider — vertical hairline between calendar and times
   (desktop only; hidden when columns stack on mobile). */
.booking__times::before {
  content: "";
  position: absolute;
  top: 0.25rem; bottom: 0.25rem;
  left: calc(clamp(1.5rem, 4vw, 2.5rem) * -0.5);
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201, 168, 76, 0.25) 30%,
    rgba(201, 168, 76, 0.25) 70%,
    transparent 100%);
  pointer-events: none;
}
.booking__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem 1rem;
  height: 100%;
  text-align: center;
}
.booking__placeholder svg {
  width: 36px; height: 36px;
  color: var(--gold-400);
  opacity: 0.55;
}
.booking__placeholder p {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink-500);
  margin: 0;
}

.booking__day-label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-900);
  margin: 0 0 0.85rem 0;
}

.booking__slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.booking__slots::-webkit-scrollbar { width: 6px; }
.booking__slots::-webkit-scrollbar-thumb {
  background: var(--gold-300);
  border-radius: 3px;
}

.booking__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: 12px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--ink-700);
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition:
    border-color 0.25s, background-color 0.25s, color 0.25s,
    box-shadow 0.25s, transform 0.2s var(--ease-out);
}
.booking__slot svg {
  width: 18px; height: 18px;
  color: var(--gold-500);
  flex-shrink: 0;
}
.booking__slot svg path,
.booking__slot svg circle { stroke-width: 1.4; }
.booking__slot:hover {
  border-color: var(--gold-400);
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(108, 84, 22, 0.10);
}
.booking__slot--selected {
  border-color: var(--gold-500);
  background: rgba(201, 168, 76, 0.10);
  color: var(--gold-700);
  font-weight: 600;
  padding-left: 1.35rem;
}
.booking__slot--selected::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
}

.booking__confirm {
  margin-top: 1.25rem;
  width: 100%;
  justify-content: center;
  transition: transform 0.15s var(--ease-out), box-shadow 0.25s;
}
.booking__confirm svg {
  transition: transform 0.25s var(--ease-out);
}
.booking__confirm:hover svg {
  transform: translateX(3px);
}
.booking__confirm:active {
  transform: scale(0.98);
}

/* ---------- Form step ---------- */
.booking__form-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0.5rem 0 0.5rem;
}
.booking__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0;
  margin: 0 0 1.5rem 0;
  transition: color 0.25s;
}
.booking__back:hover { color: var(--gold-700); }
.booking__back svg { width: 14px; height: 14px; }

.booking__summary-label {
  font-family: var(--f-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 0.4rem 0;
}
.booking__summary {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  color: var(--ink-900);
  margin: 0 0 1.75rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cream-200);
  line-height: 1.3;
}

.booking__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.booking__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.booking__field { display: block; }
.booking__field > span {
  display: block;
  font-family: var(--f-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.4rem;
}
.booking__field input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-family: var(--f-body);
  font-size: 0.98rem;
  color: var(--ink-900);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.booking__field input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.booking__form-error {
  font-family: var(--f-body);
  font-size: 0.88rem;
  color: #8B2727;
  background: rgba(139, 39, 39, 0.06);
  border-left: 2px solid #8B2727;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  margin: 0;
}

.booking__submit {
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}
.booking__submit[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- Success ---------- */
.booking__done {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}
.booking__check {
  width: 64px; height: 64px;
  margin: 0 auto 1.25rem;
  color: var(--gold-600);
}
.booking__done h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--ink-900);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.005em;
}
.booking__done-time {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 1.5rem 0;
}
.booking__done-msg {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 1rem 0;
}
.booking__done-msg strong {
  color: var(--ink-900);
  font-weight: 600;
}
.booking__done-zoom {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink-500);
  font-size: 0.95rem;
  margin: 1.25rem 0 0;
}
.booking__done-zoom a {
  color: var(--gold-700);
  border-bottom: 1px solid var(--gold-300);
  transition: color 0.25s, border-color 0.25s;
}
.booking__done-zoom a:hover {
  color: var(--gold-600);
  border-bottom-color: var(--gold-500);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .booking__layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .booking__calendar { max-width: 320px; margin: 0 auto; width: 100%; }
  .booking__row { grid-template-columns: 1fr; }
  .booking-card { padding: 1.25rem 1rem 1.5rem; }
  /* Hide vertical column divider when stacked */
  .booking__times::before { display: none; }
}

/* ---------- Session info chips (above the booking card) ---------- */
.book__chips {
  list-style: none;
  padding: 0;
  margin: 1.75rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  max-width: 640px;
}
.book__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--cream-200);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.88rem;
  color: var(--ink-700);
  backdrop-filter: blur(6px);
}
.book__chips li strong { color: var(--ink-900); font-weight: 600; }
.book__chips svg {
  width: 16px; height: 16px;
  color: var(--gold-600);
  flex-shrink: 0;
}

/* ---------- Step indicator (inside booking card) ---------- */
.booking__steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.booking__steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  transition: color 0.25s, background-color 0.25s;
}
.booking__steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--cream-300);
  font-size: 0.68rem;
  letter-spacing: 0;
  color: var(--ink-400);
  background: var(--white);
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.booking__steps li:not(:last-child)::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--cream-200);
  margin-left: 0.2rem;
}
.booking__steps li.is-active {
  color: var(--gold-700);
}
.booking__steps li.is-active span {
  border-color: rgba(201, 168, 76, 0.5);
  color: var(--gold-700);
  background: rgba(201, 168, 76, 0.08);
}
.booking__steps li.is-done {
  color: var(--ink-500);
}
.booking__steps li.is-done span {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--white);
}

/* ---------- "Today" cell indicator on mini-calendar ---------- */
.booking__day--today {
  font-weight: 600;
  color: var(--gold-700);
  box-shadow: inset 0 0 0 1px var(--gold-400);
}
.booking__day--today.booking__day--unavailable {
  color: var(--gold-400);
}

/* ---------- Times header (day label + timezone) ---------- */
.booking__times-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem 0;
}
.booking__times-head .booking__day-label { margin: 0; }
.booking__tz {
  font-family: var(--f-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 0.2rem 0.55rem;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: 999px;
  flex-shrink: 0;
}

/* ---------- Warmer empty placeholder ---------- */
.booking__placeholder p strong {
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: 0;
  font-style: normal;
}
.booking__placeholder-sub {
  font-family: var(--f-body) !important;
  font-style: normal !important;
  font-size: 0.82rem !important;
  color: var(--ink-400) !important;
  max-width: 26ch;
}

/* ---------- Trust reassurance row (below booking card) ---------- */
.book__trust {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 860px;
}
.book__trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
}
.book__trust svg {
  width: 22px; height: 22px;
  color: var(--gold-600);
  flex-shrink: 0;
  margin-top: 2px;
}
.book__trust p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 0.88rem;
  color: var(--ink-700);
  line-height: 1.4;
}
.book__trust p strong {
  display: block;
  color: var(--ink-900);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.book__trust p span {
  color: var(--ink-500);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .book__trust { grid-template-columns: 1fr; max-width: 480px; }
  .booking__steps li:not(:last-child)::after { width: 12px; }
  .booking__steps li { font-size: 0.62rem; padding: 0.25rem 0.4rem; gap: 0.35rem; }
}

/* Preview-mode note — only visible when mock slots are in use. */
.booking__mock-note {
  margin: 1.25rem 0 0;
  padding: 0.6rem 0.85rem;
  background: rgba(201, 168, 76, 0.10);
  border-left: 2px solid var(--gold-500);
  border-radius: 4px;
  font-family: var(--f-body);
  font-size: 0.8rem;
  color: var(--ink-500);
  font-style: italic;
}