/* ============================================================
   H.O.P.E. Through Christ Ministries
   "Dawn light through darkness" — vesper plum · gold leaf · alabaster
   Display: Cormorant Garamond · Body/UI: Onest
   ============================================================ */

:root {
  --vesper: #241134;
  --vesper-2: #2F1745;
  --vesper-3: #3D2157;
  --plum: #241134;
  --ivory: #FAF6EC;
  --ivory-card: #FFFDF4;
  --parchment: #F1EAD7;
  --ink: #352845;
  --ink-soft: #6B5D85;
  --gold: #C9A24B;
  --gold-deep: #8A6B2E;
  --gold-light: #EDD394;
  --on-dark: #EAE4D2;
  --on-dark-soft: rgba(234, 228, 210, .72);
  --line-light: rgba(53, 40, 69, .16);
  --line-dark: rgba(237, 211, 148, .18);
  --gild: linear-gradient(105deg, #8A6B2E 0%, #C9A24B 32%, #F3E0A6 50%, #C9A24B 68%, #8A6B2E 100%);
  --gild-ink: linear-gradient(100deg, #6E521F 0%, #8F6B24 40%, #A5822F 58%, #755A1F 100%);
  --gild-air: linear-gradient(100deg, #C9A24B 0%, #F3E0A6 45%, #EDD394 62%, #C9A24B 100%);
  --rose: #C67A5F;
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Onest', 'Segoe UI', system-ui, sans-serif;
  --shadow-card: 0 24px 60px -32px rgba(60, 45, 10, .35);
  --shadow-card-hover: 0 34px 70px -30px rgba(60, 45, 10, .45);
  --ease-out: cubic-bezier(.2, .65, .25, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--vesper);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Themed scrollbar (WebKit) — gold thumb in a vesper channel */
::-webkit-scrollbar { width: 13px; }
::-webkit-scrollbar-track { background: var(--vesper); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 40%, var(--gold-deep));
  border-radius: 10px;
  border: 3px solid var(--vesper);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--vesper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--vesper); }

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--gold); color: var(--vesper);
  padding: .6em 1.2em; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

[id] { scroll-margin-top: 136px; }

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; }

h2 {
  font-size: clamp(2.1rem, 4.3vw, 3.3rem);
  letter-spacing: -.008em;
  text-wrap: balance;
}
h2 em {
  font-style: italic;
  background: var(--gild-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-dark h2 em {
  background: var(--gild-air);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h3 { font-size: 1.42rem; font-weight: 600; }

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: .9em;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 2.2em; height: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}
.section-dark .eyebrow, .hero-eyebrow { color: var(--gold); }

.gild, .acronym-letter {
  background: var(--gild);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 107, 46, .35);
  padding-bottom: .2em;
  transition: color .25s, border-color .25s;
}
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.section-dark .text-link { color: var(--gold-light); border-color: var(--line-dark); }
.section-dark .text-link:hover { color: var(--on-dark); border-color: var(--on-dark); }

/* ---------- Layout scaffolding ---------- */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.wrap-narrow { max-width: 860px; }

.section { padding-block: clamp(4.2rem, 9vw, 7rem); }

/* Light pools at the crest of every pale section — the hero's dawn carried down the page */
.section-light {
  background:
    radial-gradient(58% 340px at 50% -50px, rgba(201, 162, 75, .13), transparent 72%),
    var(--grain) var(--ivory);
  color: var(--ink);
}
.section-wash {
  background:
    radial-gradient(58% 340px at 50% -50px, rgba(201, 162, 75, .15), transparent 72%),
    var(--grain) var(--parchment);
  color: var(--ink);
}
.section-dark {
  background: var(--vesper);
  color: var(--on-dark);
  border-block: 1px solid rgba(237, 211, 148, .13);
}

.section-head { max-width: 720px; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.section-sub { margin-top: 1.1rem; color: var(--ink-soft); max-width: 58ch; }
.section-sub a { color: var(--gold-deep); }
.section-cta { text-align: center; margin-top: 3rem; }

.card-grid { display: grid; gap: 1.6rem; }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 1.9em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s, filter .3s, color .3s, border-color .3s, background-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gild);
  background-size: 160% 100%;
  background-position: 30% 0;
  color: #221A05;
  border-color: rgba(34, 26, 5, .45);
  box-shadow: 0 10px 26px -12px rgba(201, 162, 75, .65), inset 0 0 0 1px rgba(255, 253, 244, .35);
}
.btn-gold:hover {
  background-position: 68% 0;
  box-shadow: 0 16px 34px -12px rgba(201, 162, 75, .8);
}
/* light sweep across the gilding on hover */
.btn-gold::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 252, 240, .5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn-gold:hover::after, .btn-gold:focus-visible::after { transform: translateX(130%); }

.btn-ghost {
  color: var(--on-dark);
  border-color: rgba(234, 228, 210, .38);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.btn-outline {
  color: var(--ink);
  border-color: rgba(53, 40, 69, .32);
  background: transparent;
}
.btn-outline:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn-sm { padding: .8em 1.5em; font-size: .74rem; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--on-dark);
  background: rgba(28, 16, 40, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: background-color .35s, box-shadow .35s, border-color .35s;
  border-bottom: 1px solid rgba(237, 211, 148, .14);
}
.site-header.scrolled {
  background: rgba(22, 12, 32, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: rgba(237, 211, 148, .14);
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .6);
}

.header-inner {
  max-width: none;
  margin-inline: auto;
  padding: .8rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit;
}
.brand-mark { width: 38px; height: 38px; color: var(--gold); flex: none; }
img.brand-mark { width: auto; max-width: 210px; height: 44px; object-fit: contain; }
.site-header .brand, .site-footer .brand {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.site-header .brand::before,
.site-footer .brand::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: url("../images/logo-cloud.svg") center / contain no-repeat;
  transform-origin: center center;
}
.site-header .brand::after,
.site-footer .brand::after { content: none; display: none; }
.site-header .brand {
  padding: .85rem 1.6rem 1rem;
  margin: 6px 0 4px;
}
.site-header .brand::before {
  inset: -18% -8% -22%;
  transform: scale(1.2, 1.44);
}
.site-footer .brand {
  padding: 1.45rem 1.7rem 1.55rem;
  display: inline-flex;
  margin-top: 18px;
  margin-bottom: 1.45rem;
}
.site-footer .brand::before {
  inset: -28% -14% -32%;
  transform: scale(1.28, 1.55);
}
@media (max-width: 760px) {
  .site-footer .brand {
    padding: 1rem 1.1rem 1.1rem;
    margin-top: 14px;
    margin-bottom: 1.1rem;
  }
  .site-footer .brand::before {
    inset: -26% -12% -30%;
    transform: scale(1.24, 1.5);
  }
}
.site-header img.brand-mark, .site-footer img.brand-mark { filter: none; position: relative; z-index: 1; mix-blend-mode: multiply; }
.site-header img.brand-mark { height: 54px; max-width: 300px; }
.site-footer img.brand-mark { width: 240px; max-width: 100%; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.18rem; letter-spacing: .05em;
}
.brand-sub {
  font-size: .58rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(234, 228, 210, .68);
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; flex: 1; }
.site-nav ul { display: flex; list-style: none; gap: 1.25rem; flex: 1; justify-content: center; align-items: center; }
.site-nav .btn-nav { flex: none; }
.site-nav a:not(.btn) {
  font-size: .76rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  color: rgba(234, 228, 210, .85);
  padding-bottom: .3em;
  background: linear-gradient(var(--gold), var(--gold)) bottom left / 0 1px no-repeat;
  transition: color .25s, background-size .3s var(--ease-out);
}
.site-nav a:not(.btn):hover { color: var(--gold-light); background-size: 100% 1px; }
.btn-nav { padding: .7em 1.4em; font-size: .72rem; }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 7px;
  width: 44px; height: 44px;
  background: none; border: 1px solid rgba(234, 228, 210, .3);
  border-radius: 10px; cursor: pointer; padding: 10px;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--on-dark);
  transition: transform .3s var(--ease-out);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 12%, #2A3158 0%, rgba(42, 49, 88, 0) 55%),
    radial-gradient(70% 55% at 50% 88%, rgba(36, 17, 52, .55), rgba(36, 17, 52, 0) 70%),
    linear-gradient(180deg, #0C1226 0%, #141B36 46%, #0F1529 100%);
  color: var(--on-dark);
  overflow: hidden;
  padding: 7.5rem 1.25rem 5.5rem;
}
/* CSS fallback rays when WebGL is unavailable */
.hero.no-webgl::before {
  content: "";
  position: absolute; inset: -20% -10%;
  background: conic-gradient(from 168deg at 50% 18%,
    transparent 0deg, rgba(237, 211, 148, .07) 6deg, transparent 14deg,
    transparent 22deg, rgba(237, 211, 148, .05) 28deg, transparent 38deg,
    transparent 48deg, rgba(237, 211, 148, .08) 54deg, transparent 64deg,
    transparent 300deg, rgba(237, 211, 148, .06) 310deg, transparent 320deg,
    transparent 336deg, rgba(237, 211, 148, .05) 344deg, transparent 352deg);
  pointer-events: none;
}

.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease .2s;
}
.hero-canvas.lit { opacity: 1; }

.hero-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 62%, rgba(10, 14, 30, .38) 0%, rgba(10, 14, 30, 0) 70%),
    linear-gradient(180deg, rgba(12, 17, 35, .66) 0%, rgba(12, 17, 35, .22) 18%, rgba(12, 17, 35, 0) 34%, rgba(12, 17, 35, 0) 62%, rgba(13, 18, 36, .88) 100%);
}

.hero-content { position: relative; max-width: 900px; }

.hero-eyebrow { justify-content: center; text-shadow: 0 1px 14px rgba(8, 12, 26, .9); }
.hero-eyebrow::after {
  content: "";
  width: 2.2em; height: 1px;
  background: currentColor; opacity: .6; flex: none;
}

.hero-title {
  font-size: clamp(3rem, 9vw, 6.1rem);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.012em;
  color: #F6F1E2;
  margin-block: .5rem .3rem;
}
.hero-line { display: block; }
.hero-title .gild {
  font-style: normal;
  -webkit-text-stroke: .75px var(--gold-light);
  text-stroke: .75px var(--gold-light);
  paint-order: stroke fill;
}
.hero-line-it {
  font-style: italic;
  font-weight: 500;
  font-size: .58em;
  color: var(--gold-light);
  margin-top: .12em;
}

.hero-lead {
  max-width: 44ch;
  margin: 1.1rem auto 0;
  color: var(--on-dark-soft);
  font-size: 1.06rem;
}

/* H·O·P·E acronym */
.acronym {
  list-style: none;
  display: flex;
  justify-content: center;
  margin-top: 2.2rem;
}
.acronym li {
  display: flex; flex-direction: column; align-items: center;
  padding-inline: clamp(1.1rem, 3.4vw, 2.4rem);
  gap: .15rem;
}
.acronym li + li { border-left: 1px solid rgba(237, 211, 148, .22); }
.acronym-letter {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
}
.acronym-word {
  font-size: .6rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(234, 228, 210, .62);
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: .9rem;
  justify-content: center;
  margin-top: 2.4rem;
}
.hero-book {
  display: inline-block;
  margin-top: 1.3rem;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(234, 228, 210, .6);
  text-decoration: none;
  border-bottom: 1px solid rgba(234, 228, 210, .25);
  padding-bottom: .25em;
  transition: color .25s, border-color .25s;
}
.hero-book:hover { color: var(--gold-light); border-color: var(--gold); }

.hero-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: .5rem 1.4rem;
  padding: 1.05rem 1.5rem;
  border-top: 1px solid rgba(237, 211, 148, .13);
  background: rgba(13, 18, 36, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(234, 228, 210, .66);
}
.hero-strip i { font-style: normal; color: var(--gold); opacity: .7; font-size: .6rem; }

/* Hero load choreography */
.hero-eyebrow, .hero-title .hero-line, .hero-lead, .acronym li, .hero-ctas, .hero-book {
  opacity: 0;
  transform: translateY(22px);
  animation: rise 1s var(--ease-out) forwards;
}
.hero-eyebrow { animation-delay: .15s; }
.hero-title .hero-line:first-child { animation-delay: .28s; }
.hero-line-it { animation-delay: .4s; }
.hero-lead { animation-delay: .55s; }
.acronym li:nth-child(1) { animation-delay: .68s; }
.acronym li:nth-child(2) { animation-delay: .76s; }
.acronym li:nth-child(3) { animation-delay: .84s; }
.acronym li:nth-child(4) { animation-delay: .92s; }
.hero-ctas { animation-delay: 1.05s; }
.hero-book { animation-delay: 1.15s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ---------- Mission ---------- */

.mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.mission-copy h2 { margin-bottom: 1.4rem; }
.mission-copy p { margin-bottom: 1.1rem; }
.mission-copy strong { color: var(--gold-deep); font-weight: 600; }

.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.4em;
  float: left;
  line-height: .82;
  padding: .08em .14em 0 0;
  color: var(--gold-deep);
}

.mission-welcome {
  border-left: 2px solid var(--gold);
  padding: .35rem 0 .35rem 1.2rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-style: italic;
  color: var(--ink);
}

.mission-side { position: relative; padding-bottom: 3.5rem; }

.arch-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 16px 16px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 20%, #4A2A63 0%, #2C1540 70%),
    var(--vesper-2);
  box-shadow: var(--shadow-card);
}
.arch-frame::after {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(237, 211, 148, .55);
  border-radius: 999px 999px 10px 10px;
  box-shadow: inset 0 0 46px rgba(24, 12, 34, .35);
  pointer-events: none;
}
.arch-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.mission-art { max-width: 400px; margin-left: auto; }

.medallion {
  position: absolute;
  left: -1rem; bottom: 0;
  width: clamp(170px, 17vw, 224px);
  aspect-ratio: 1;
  color: var(--gold-deep);
  background: radial-gradient(circle at 50% 38%, #FFFDF4 0%, #FBF3DF 62%, #F3E6C6 100%);
  border: 1px solid rgba(138, 107, 46, .35);
  border-radius: 50%;
  box-shadow: 0 18px 44px -18px rgba(60, 45, 10, .4);
}
.medallion svg { width: 100%; height: 100%; }
.med-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2.6px;
  fill: var(--gold-deep);
}
.med-core {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .22em;
  fill: var(--gold-deep);
}
.med-dawn {
  transform-origin: 130px 104px;
  animation: med-dawn-breathe 5s ease-in-out infinite;
}
@keyframes med-dawn-breathe {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
.med-glow {
  opacity: .75;
  transform-origin: 130px 115px;
  animation: med-breathe 5s ease-in-out infinite;
}
@keyframes med-breathe { 0%, 100% { opacity: .4; } 50% { opacity: .95; } }
@keyframes spin { to { transform: rotate(360deg); } }

.values-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(3.2rem, 7vw, 5rem);
  padding-top: 2.6rem;
  border-top: 1px solid var(--line-light);
}
.value h3 {
  font-size: 1.3rem;
  color: var(--gold-deep);
  margin-bottom: .35rem;
}
.value p { font-size: .92rem; color: var(--ink-soft); }

/* ---------- Services ---------- */

.services-grid { grid-template-columns: repeat(3, 1fr); }

.svc-card {
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.6rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(201, 162, 75, .55); }
.svc-card:hover .arch-frame img { transform: scale(1.045); }

.svc-card .arch-frame { aspect-ratio: 5 / 4; margin-bottom: 1.3rem; }

.svc-body { display: flex; flex-direction: column; flex: 1; padding-inline: .35rem; }
.svc-title-row { display: flex; align-items: center; gap: .7rem; }
.svc-icon { width: 34px; height: 34px; color: var(--gold-deep); flex: none; }
.svc-tag {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep);
  margin: .5rem 0 .7rem;
}
.svc-body > p:not(.svc-tag) { font-size: .95rem; margin-bottom: .9rem; }

.tick-list { list-style: none; margin-bottom: 1rem; }
.tick-list li {
  position: relative;
  padding-left: 1.4em;
  font-size: .92rem;
  margin-bottom: .45em;
  color: var(--ink-soft);
}
.tick-list li::before {
  content: "✦";
  position: absolute; left: 0; top: 0;
  color: var(--gold);
  font-size: .8em;
  line-height: 2.1;
}

.svc-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-light);
}
.price {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.svc-foot .btn { white-space: nowrap; }
.price small {
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}

.more-ways {
  margin-top: 3.2rem;
  text-align: center;
  padding: 2.2rem 1.5rem;
  border-block: 1px solid var(--line-light);
}
.more-ways-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-deep);
  margin-bottom: .6rem;
}
.more-ways-list { color: var(--ink-soft); margin-bottom: 1.2rem; }
.more-ways-list i { font-style: normal; color: var(--gold); padding-inline: .7em; font-size: .8em; }

/* ---------- How it works ---------- */

.steps { position: relative; margin-bottom: clamp(2.6rem, 5vw, 4rem); }

.steps-path {
  position: absolute;
  top: 6px; left: 0;
  width: 100%; height: 120px;
  color: var(--gold);
  opacity: .55;
}

.steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
  position: relative;
}

.step { text-align: center; padding-top: .5rem; }
.step-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 1px solid rgba(138, 107, 46, .45);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.65rem; font-weight: 600;
  color: var(--gold-deep);
  background:
    radial-gradient(closest-side, rgba(237, 211, 148, .32), rgba(237, 211, 148, 0)),
    var(--ivory);
  margin-bottom: 1.1rem;
}
.step h3 { margin-bottom: .45rem; }
.step p { font-size: .93rem; color: var(--ink-soft); max-width: 26ch; margin-inline: auto; }

.expect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.expect-panel {
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 18px;
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow-card);
}
.expect-panel h3 {
  color: var(--gold-deep);
  margin-bottom: .9rem;
  font-style: italic;
}
.expect-panel .tick-list { margin-bottom: 0; }

.assurance {
  margin-top: 2.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--ink);
  max-width: 46ch;
  margin-inline: auto;
}

/* ---------- Welcome band ---------- */

.welcome-band {
  background:
    radial-gradient(60% 340px at 84% -60px, rgba(237, 211, 148, .13), transparent 70%),
    radial-gradient(46% 320px at 6% 112%, rgba(36, 17, 52, .85), transparent 72%),
    radial-gradient(80% 100% at 50% 0%, #3A1E55 0%, var(--vesper) 70%);
  padding-block: clamp(4rem, 8vw, 6rem);
}
.welcome-title { margin-bottom: 2.2rem; }

.welcome-list { list-style: none; max-width: 780px; }
.welcome-list li { border-bottom: 1px solid rgba(237, 211, 148, .14); }
.welcome-list li:first-child { border-top: 1px solid rgba(237, 211, 148, .14); }
.welcome-list a {
  display: block;
  padding: 1.05rem .25rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--on-dark);
  text-decoration: none;
  transition: color .3s, padding-left .35s var(--ease-out);
}
.welcome-list a span { color: var(--gold); opacity: 0; transition: opacity .3s; }
.welcome-list a:hover { color: var(--gold-light); padding-left: .9rem; }
.welcome-list a:hover span { opacity: 1; }

/* ---------- Stories ---------- */

.stories-grid { grid-template-columns: 1fr 1fr; }

.story-card {
  position: relative;
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow-card);
}
.story-card p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.story-lg p { font-size: clamp(1.35rem, 2.3vw, 1.6rem); }
.story-mark { width: 22px; height: 22px; color: var(--gold); margin-bottom: 1rem; }
.story-card footer { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.story-card cite {
  font-style: normal;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.story-card footer span { font-size: .8rem; color: var(--ink-soft); }

/* ---------- Get involved ---------- */

.doors-grid { grid-template-columns: repeat(3, 1fr); }

.door-card {
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.door-card h3 { color: var(--gold-deep); margin-bottom: .7rem; }
.door-card > p { font-size: .95rem; margin-bottom: .9rem; }
.door-foot { margin-top: auto; font-size: .92rem; color: var(--ink-soft); }
.door-foot a { color: var(--gold-deep); }

.newsletter {
  margin-top: 2.8rem;
  background: var(--vesper);
  color: var(--on-dark);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.8rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background-image:
    radial-gradient(70% 120% at 85% 0%, rgba(237, 211, 148, .15), transparent 60%),
    radial-gradient(40% 120% at 4% 110%, rgba(198, 122, 95, .12), transparent 70%);
}
.newsletter h3 { color: var(--gold-light); margin-bottom: .3rem; }
.newsletter p { color: var(--on-dark-soft); font-size: .95rem; max-width: 44ch; }
.newsletter-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.newsletter .ministry-form.newsletter-form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gold);
  color: var(--on-dark);
  caret-color: var(--gold);
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .55em .1em;
  min-width: 240px;
}
.newsletter .ministry-form.newsletter-form input::placeholder { color: rgba(234, 228, 210, .4); }
.newsletter .ministry-form.newsletter-form input:focus { outline: none; border-bottom-color: var(--gold); }

/* ---------- Forms (shared) ---------- */

.ministry-form label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.ministry-form .opt { opacity: .6; letter-spacing: .08em; text-transform: none; font-weight: 500; }
.ministry-form input:not(.hp), .ministry-form select, .ministry-form textarea {
  display: block;
  width: 100%;
  margin-top: .35em;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-light);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: .5em .05em;
  transition: border-color .25s;
}
.ministry-form select { cursor: pointer; }
.ministry-form textarea { resize: vertical; }
.ministry-form input:focus, .ministry-form select:focus, .ministry-form textarea:focus {
  outline: none;
  border-bottom-color: var(--gold-deep);
}
.ministry-form button { margin-top: .4rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-note {
  margin-top: .9rem;
  font-size: .88rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
}

.inline-form { margin-top: auto; }
.inline-form summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid rgba(138, 107, 46, .35);
  padding-bottom: .2em;
  transition: color .25s;
}
.inline-form summary::-webkit-details-marker { display: none; }
.inline-form summary::after { content: "  +"; color: var(--gold); }
.inline-form[open] summary::after { content: "  −"; }
.inline-form summary:hover { color: var(--ink); }
.inline-form form { margin-top: 1.3rem; }

/* ---------- Groups ---------- */

.groups-grid { grid-template-columns: repeat(4, 1fr); }

.group-card {
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 18px;
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  border-top: 3px solid var(--gold);
}
.door-card, .group-card {
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.door-card:hover, .group-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(201, 162, 75, .45);
}
.group-card:hover { border-top-color: var(--gold); }

.group-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.group-card > p { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.2rem; }

/* ---------- Events ---------- */

.events-grid { grid-template-columns: repeat(3, 1fr); }

.event-card {
  display: flex; flex-direction: column;
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.7rem;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(201, 162, 75, .55); }
.event-card:hover .arch-frame img { transform: scale(1.045); }
.event-card .arch-frame { aspect-ratio: 5 / 4; margin-bottom: 1.3rem; }
.event-body { display: flex; flex-direction: column; flex: 1; padding-inline: .35rem; }
.event-venue {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .5rem;
}
.event-body h3 { margin-bottom: .6rem; }
.event-body > p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.event-body .text-link { margin-top: auto; align-self: flex-start; }

/* ---------- Give ---------- */

.give-band {
  background:
    radial-gradient(70% 90% at 18% 8%, rgba(237, 211, 148, .14) 0%, transparent 55%),
    radial-gradient(42% 320px at 94% 104%, rgba(36, 17, 52, .9), transparent 70%),
    radial-gradient(80% 100% at 85% 100%, #3A1E55 0%, var(--vesper) 60%);
}

.give-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.give-copy h2 { margin-bottom: 1.2rem; }
.give-copy > p { color: var(--on-dark-soft); max-width: 52ch; }

.gift-list { list-style: none; margin-block: 1.6rem; }
.gift-list li {
  display: flex; align-items: baseline; gap: .8em;
  padding-block: .55em;
  border-bottom: 1px solid rgba(237, 211, 148, .12);
  font-family: var(--font-display);
  font-size: 1.22rem;
}
.gift-list li:first-child { border-top: 1px solid rgba(237, 211, 148, .12); }
.gift-spark { color: var(--gold); font-size: .75em; }

.give-alt { font-size: .92rem; color: var(--on-dark-soft); }
.give-alt a { color: var(--gold-light); }

.give-form {
  background: rgba(43, 22, 60, .75);
  border: 1px solid rgba(237, 211, 148, .2);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.give-form h3 {
  color: var(--gold-light);
  font-style: italic;
  margin-bottom: 1.4rem;
  font-size: 1.6rem;
}
.give-form label { color: rgba(234, 228, 210, .6); }
.give-form input:not(.hp), .give-form textarea {
  color: var(--on-dark);
  border-bottom-color: rgba(234, 228, 210, .28);
}
.give-form input:focus, .give-form textarea:focus { border-bottom-color: var(--gold); }
.give-form textarea::placeholder { color: rgba(234, 228, 210, .35); font-size: .9rem; }
.give-form .form-note { color: var(--gold-light); }
.give-form button[type="submit"], .contact-form button[type="submit"] { width: 100%; }

/* ---------- Posts ---------- */

.posts-grid { grid-template-columns: repeat(3, 1fr); }

.post-card {
  display: flex; flex-direction: column;
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-top: 3px solid var(--gold);
  border-radius: 18px;
  padding: 1.9rem 1.9rem 1.7rem;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(201, 162, 75, .55); border-top-color: var(--gold); }
.post-kicker {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .7rem;
}
.post-card h3 { margin-bottom: .7rem; font-size: 1.3rem; }
.post-card > p:not(.post-kicker) { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.post-card .text-link { margin-top: auto; align-self: flex-start; }

/* ---------- FAQ ---------- */

.faq-list { border-top: 1px solid var(--line-light); }

.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.15rem .2rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--ink);
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.3em;
  color: var(--gold-deep);
  line-height: 1;
  flex: none;
  transition: transform .3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item p {
  padding: 0 .2rem 1.3rem;
  max-width: 62ch;
  color: var(--ink-soft);
}
.faq-item a { color: var(--gold-deep); }

/* ---------- Scripture band ---------- */

.scripture-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  background:
    radial-gradient(320px 320px at 50% 34%, rgba(237, 211, 148, .11), transparent 70%),
    radial-gradient(60% 70% at 50% 108%, rgba(36, 17, 52, .85), transparent 70%),
    radial-gradient(60% 90% at 50% 0%, #3A1E55 0%, var(--vesper) 65%);
  text-align: center;
}

.scripture-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.anchor-art { width: clamp(88px, 10vw, 120px); color: var(--gold); }
.anchor-rays {
  transform-origin: 70px 75px;
  animation: spin 90s linear infinite;
}

.scripture p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.3;
  color: #F1ECDD;
  max-width: 26ch;
  text-wrap: balance;
}
.scripture cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Floating gold motes */
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes i {
  position: absolute;
  bottom: -12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light) 0%, rgba(237, 211, 148, 0) 72%);
  opacity: 0;
  animation: mote-rise 16s linear infinite;
}
.motes i:nth-child(1)  { left: 6%;  animation-delay: 0s;    scale: 1.6; }
.motes i:nth-child(2)  { left: 14%; animation-delay: -6s;   scale: 1; }
.motes i:nth-child(3)  { left: 23%; animation-delay: -11s;  scale: 2.2; }
.motes i:nth-child(4)  { left: 31%; animation-delay: -3s;   scale: .9; }
.motes i:nth-child(5)  { left: 42%; animation-delay: -13s;  scale: 1.4; }
.motes i:nth-child(6)  { left: 51%; animation-delay: -8s;   scale: 2; }
.motes i:nth-child(7)  { left: 58%; animation-delay: -1.5s; scale: 1.1; }
.motes i:nth-child(8)  { left: 67%; animation-delay: -10s;  scale: 1.7; }
.motes i:nth-child(9)  { left: 74%; animation-delay: -5s;   scale: .8; }
.motes i:nth-child(10) { left: 82%; animation-delay: -14s;  scale: 2.4; }
.motes i:nth-child(11) { left: 90%; animation-delay: -7s;   scale: 1.2; }
.motes i:nth-child(12) { left: 96%; animation-delay: -2.5s; scale: 1.5; }

@keyframes mote-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: .85; }
  60%  { opacity: .5; }
  100% { transform: translateY(-560px) translateX(24px); opacity: 0; }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-copy h2 { margin-bottom: 1.8rem; }

.contact-details div { margin-bottom: 1.4rem; }
.contact-details dt {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .25rem;
}
.contact-details dd { color: var(--ink); }
.contact-details a {
  color: var(--ink);
  text-decoration-color: rgba(138, 107, 46, .5);
  text-underline-offset: 3px;
  transition: color .25s;
}
.contact-details a:hover { color: var(--gold-deep); }

.contact-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.14rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
  max-width: 44ch;
}

.contact-form {
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-card);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background:
    radial-gradient(52% 280px at 50% 106%, rgba(36, 17, 52, .9), transparent 72%),
    radial-gradient(52% 280px at 50% 106%, rgba(237, 211, 148, .11), transparent 72%),
    var(--vesper);
  color: var(--on-dark);
  border-top: 1px solid rgba(237, 211, 148, .14);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-brand .brand { margin-bottom: 1.45rem; }
.footer-tag { color: var(--on-dark-soft); font-size: .95rem; max-width: 40ch; margin-bottom: 1.2rem; }
.footer-verse {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--gold-light);
  max-width: 36ch;
}
.footer-verse span { font-size: .75em; color: var(--on-dark-soft); font-style: normal; }

.footer-head {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-nav ul, .footer-links ul { list-style: none; }
.footer-nav li, .footer-links li { margin-bottom: .55rem; }
.footer-nav a, .footer-links a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: .94rem;
  transition: color .25s;
}
.footer-nav a:hover, .footer-links a:hover { color: var(--gold-light); }

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(237, 211, 148, .1);
  font-size: .78rem;
  color: rgba(234, 228, 210, .55);
}
.footer-credit {
  color: inherit;
  text-decoration: none;
}
.footer-credit:hover {
  color: rgba(234, 228, 210, .75);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-bar-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  color: rgba(237, 211, 148, .6);
}


@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-title .hero-line, .hero-lead, .acronym li, .hero-ctas, .hero-book {
    animation: none; opacity: 1; transform: none;
  }
  .med-glow, .med-dawn, .anchor-rays { animation: none; }
  .motes { display: none; }
  .hero-canvas { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .header-inner { gap: 1rem; }
  .site-nav { gap: 1rem; }
  .site-nav ul { gap: 1rem; }
  .site-nav a:not(.btn) { font-size: .7rem; letter-spacing: .08em; }
  .btn-nav { padding: .7em 1.1em; font-size: .68rem; }
  .services-grid, .events-grid, .posts-grid, .doors-grid { grid-template-columns: 1fr 1fr; }
  .groups-grid { grid-template-columns: 1fr 1fr; }
  .values-row { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .steps-list { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
  .steps-path { display: none; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-art { margin-inline: auto; }
  .mission-side { max-width: 460px; margin-inline: auto; }
  .give-grid, .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 2rem;
    margin: 0;
    background-color: var(--vesper);
    background-image:
      radial-gradient(90% 160px at 50% 0%, #3A1E55 0%, rgba(58, 30, 85, 0) 70%);
    border-bottom: 1px solid rgba(237, 211, 148, .2);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
    max-height: calc(100svh - 90px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform .35s var(--ease-out), opacity .3s, visibility 0s .35s;
  }
  .nav-open .site-nav {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform .35s var(--ease-out), opacity .3s, visibility 0s;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: none;
    gap: .15rem;
    width: 100%;
  }
  .site-nav ul li { width: 100%; text-align: center; }
  .site-nav a:not(.btn) {
    display: block;
    padding: .55rem .5rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: .02em;
    line-height: 1.4;
    background: none;
  }
  .site-nav .btn-nav {
    flex: none;
    align-self: center;
    display: inline-block;
    line-height: 1.2;
    font-size: .8rem;
    padding: 1em 2.2em;
    margin-top: .5rem;
  }
  .nav-toggle { display: flex; flex: none; }
  .nav-open .site-header, .nav-open .site-header.scrolled {
    background: var(--vesper);
    background-color: var(--vesper);
    border-bottom-color: rgba(237, 211, 148, .14);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 760px) {
  /* Mobile: fallback rays render at half brightness to match the WebGL dimming */
  .hero.no-webgl::before {
    opacity: .5;
  }
  body { font-size: 1rem; }
  .services-grid, .events-grid, .posts-grid, .doors-grid, .groups-grid,
  .stories-grid, .expect-grid, .steps-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .hero { padding-bottom: 7rem; }
  .hero-strip { gap: .4rem .9rem; font-size: .6rem; }
  .acronym li { padding-inline: .85rem; }
  .step { text-align: left; }
  .step p { margin-inline: 0; }
  .medallion { left: 0; }
  .newsletter { flex-direction: column; align-items: flex-start; }
  .svc-foot { flex-wrap: wrap; }
  .footer-bar { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
  .hero-eyebrow { font-size: .6rem; letter-spacing: .18em; }
  .hero-eyebrow::before, .hero-eyebrow::after { display: none; }
}

@media (max-width: 420px) {
  .values-row { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.7rem; }
  .brand-sub { display: none; }
}

/* ============================================================
   Internal pages — dawn-crest hero, articles, features
   ============================================================ */

/* Active page in the nav */
.site-nav a[aria-current="page"] {
  color: var(--gold-light);
  background-size: 100% 1px;
}

/* Slim dark page hero: CSS ray fan from the upper corner, gold motes drifting */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(46% 440px at 80% -80px, rgba(237, 211, 148, .17), transparent 70%),
    radial-gradient(36% 320px at 6% 108%, rgba(36, 17, 52, .85), transparent 72%),
    linear-gradient(180deg, #190D28 0%, #2B1745 55%, var(--vesper) 100%);
  padding: clamp(8.5rem, 16vw, 11rem) 0 clamp(3.4rem, 7vw, 5rem);
  border-bottom: 1px solid rgba(237, 211, 148, .13);
}
.page-hero::before {
  content: "";
  position: absolute; inset: -10% -5%;
  pointer-events: none;
  background: conic-gradient(from 192deg at 82% -8%,
    transparent 0deg, rgba(237, 211, 148, .09) 7deg, transparent 15deg,
    transparent 24deg, rgba(237, 211, 148, .05) 31deg, transparent 40deg,
    transparent 50deg, rgba(237, 211, 148, .08) 57deg, transparent 66deg);
}
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.3rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.01em;
  color: #F6F1E2;
  text-wrap: balance;
  margin-bottom: 1rem;
  max-width: 18ch;
}
.page-hero h1 em {
  font-style: italic;
  background: var(--gild-air);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-hero-lead {
  max-width: 56ch;
  color: var(--on-dark-soft);
  font-size: 1.08rem;
}
.page-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .9rem;
  margin-top: 1.4rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(234, 228, 210, .6);
}
.page-hero-meta i { font-style: normal; color: var(--gold); font-size: .62rem; }

/* Article (journal posts) */
.article-wrap { max-width: 780px; }
.article { font-size: 1.09rem; }
.article > p { margin-bottom: 1.3rem; }
.article h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.25rem);
  margin: 2.9rem 0 1rem;
}
.article .tick-list { margin: 0 0 1.3rem; }
.article .tick-list li { font-size: 1rem; margin-bottom: .55em; }
.article .pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding: .4rem 0 .4rem 1.5rem;
  margin: 2.4rem 0;
}
.article-note {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink-soft);
}

/* Alternating feature rows (services, events) */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature + .feature { margin-top: clamp(3.6rem, 7vw, 5.5rem); }
.feature--flip .feature-art { order: 2; }
.feature-art .arch-frame { max-width: 380px; margin-inline: auto; }
.feature-body .eyebrow { margin-bottom: .7rem; }
.feature-body h2 { margin-bottom: .8rem; }
.feature-body > p { margin-bottom: 1rem; }
.feature-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

/* Page-end call to action */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band .section-sub { margin-inline: auto; }
.cta-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem;
  margin-top: 2rem;
}

/* Quieter scripture band for internal pages */
.scripture-band--page { padding-block: clamp(3.6rem, 7vw, 5rem); }

/* H·O·P·E letter tiles (about) */
.letters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.letter-tile {
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-top: 3px solid var(--gold);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.letter-tile .big {
  display: block;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: .5rem;
  background: var(--gild-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.letter-tile h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.letter-tile p { font-size: .92rem; color: var(--ink-soft); }

/* Journal index cards */
.journal-feature {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: center;
  background: var(--ivory-card);
  border: 1px solid var(--line-light);
  border-radius: 22px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.journal-feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(201, 162, 75, .55);
}
.journal-feature:hover .arch-frame img { transform: scale(1.045); }
.journal-feature + .journal-feature { margin-top: 1.8rem; }
.journal-feature .arch-frame { aspect-ratio: 5 / 4; }
.journal-feature h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .6rem; }
.journal-feature .post-kicker { margin-bottom: .5rem; }
.journal-feature p:not(.post-kicker) { color: var(--ink-soft); font-size: .98rem; margin-bottom: 1rem; }
.journal-feature .text-link { align-self: flex-start; }

/* Two-up continue-reading grid */
.posts-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1080px) {
  .letters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature-art { order: 0; }
  .feature-art .arch-frame { max-width: 420px; }
  .journal-feature { grid-template-columns: 1fr; }
  .journal-feature .arch-frame { max-width: 380px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .letters, .posts-grid--2 { grid-template-columns: 1fr; }
}

/* give-copy reused on light bands (contact's prayer corner): re-ink the paragraphs */
.section-wash .give-copy > p, .section-light .give-copy > p { color: var(--ink-soft); }

/* Dark form panels sitting on light bands: solid plum, no see-through grey */
.section-wash .give-form, .section-light .give-form {
  background: var(--vesper-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Booking modal (onsite Formspree popup) ---------- */

.book-modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.book-modal[hidden] { display: none; }
.book-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 12, 32, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.book-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh; overflow: auto;
  background: var(--ivory-card);
  color: var(--ink);
  border: 1px solid rgba(201, 162, 75, .45);
  border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65);
  animation: modal-rise .35s var(--ease-out);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.book-modal-panel h3 { font-size: 1.9rem; margin-bottom: .4rem; }
.book-modal-sub { color: var(--ink-soft); font-size: .96rem; margin-bottom: 1.4rem; max-width: 44ch; }
.book-modal-close {
  position: absolute; top: .9rem; right: 1rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  background: transparent;
  color: var(--ink);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.book-modal-close:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.book-form button[type="submit"] { width: 100%; }
body.modal-open { overflow: hidden; }

/* Modal triggers that keep their link looks */
button.hero-book {
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; font-family: var(--font-body);
}
button.text-link {
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; font-family: var(--font-body);
}
.faq-book-link {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-color: rgba(138, 107, 46, .5);
  text-underline-offset: 3px;
  cursor: pointer;
}
.faq-book-link:hover { color: var(--ink); }
.footer-modal-link {
  background: none; border: none; padding: 0;
  font: inherit; font-size: .94rem;
  color: var(--on-dark-soft);
  cursor: pointer;
  transition: color .25s;
}
.footer-modal-link:hover { color: var(--gold-light); }