/* ==================================================================
   GLOBAL DESIGN SYSTEM — START
   Shared palette, typography, resets, accessibility and utilities.
   ================================================================== */
:root {
  --black: #050505;
  --black-soft: #0b0b0b;
  --gold: #d6ae4b;
  --gold-light: #f2d17b;
  --gold-pale: #f8e7b0;
  --gold-bright: #f4d06f;
  --ivory: #f6f1e4;
  --white: #ffffff;
  --muted: #c9c3b6;
  --line: rgba(214, 174, 75, 0.42);
  --panel: rgba(5, 5, 5, 0.84);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --header-height: 124px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 9999;
  padding: 0.75rem 1rem;
  color: var(--black);
  background: var(--gold-light);
}

.skip-link:focus { top: 1rem; }

.page-shell {
  width: min(100%, 1800px);
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 0.6rem;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gold-rule {
  width: min(520px, 100%);
  height: 1px;
  margin: 1.15rem 0;
  border: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
}

.gold-button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 54px;
  padding: 0.8rem 1.65rem;
  border: 1px solid var(--gold);
  background: rgba(0, 0, 0, 0.38);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.gold-button:hover,
.gold-button:focus-visible {
  color: var(--black);
  background: var(--gold-light);
  transform: translateY(-2px);
}

.section-heading {
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 5.6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* GLOBAL DESIGN SYSTEM — END */


/* ================================================================
   EDITORIAL PARAGRAPH ALIGNMENT
   Centers the content container while keeping the writing aligned left.
   ================================================================ */

.inner-hero-copy > p,
.split-copy > p,
.copy-panel > p,
.about-section-heading > p,
.about-mission-content > p,
.page-cta > p,
.card-copy > p,
.sacred-pathway-copy > p {
  width: min(100%, 64ch);
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}


/* ==================================================================
   SHARED HEADER — START
   Full-width polished black header used on every page.
   ================================================================== */
.site-header {
  position: relative;
  z-index: 100;
  width: 100%;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(214, 174, 75, 0.28);
  background: #000;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

.header-inner {
  width: min(100%, 1800px);
  min-height: var(--header-height);
  margin-inline: auto;
  padding: 12px clamp(18px, 3vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo-link {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.logo-link img {
  width: clamp(240px, 31vw, 520px);
  max-height: 96px;
  object-fit: contain;
  object-position: left center;
  filter:
    drop-shadow(0 0 5px rgba(242, 209, 123, 0.72))
    drop-shadow(0 0 22px rgba(214, 174, 75, 0.38));
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  white-space: nowrap;
}

.primary-nav a {
  position: relative;
  padding: 0.85rem clamp(0.75rem, 1.3vw, 1.35rem);
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(0.78rem, 1vw, 1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.primary-nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 28px;
  transform: translateY(-50%);
  background: rgba(214, 174, 75, 0.48);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0.25rem;
  height: 1px;
  transform: scaleX(0);
  background: var(--gold-light);
  transition: transform 0.25s ease;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 44px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-light);
  cursor: pointer;
}

/* SHARED HEADER — END */


/* ==================================================================
   HOME PAGE — START
   Exact visual structure: header, full hero background, left copy,
   and four page cards aligned across the bottom.
   ================================================================== */
.home-page {
  min-height: 100vh;
  background: #000;
}

.home-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.88) 28%, rgba(0,0,0,0.28) 56%, rgba(0,0,0,0.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.02) 52%, rgba(0,0,0,0.95) 100%),
    url("../images/about-herop.jpg") center 25% / cover no-repeat;
}

.home-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 72% 28%, rgba(242,209,123,0.12), transparent 34%),
    linear-gradient(90deg, rgba(214,174,75,0.05), transparent 48%);
  pointer-events: none;
}

.home-content {
  min-height: calc(100vh - var(--header-height));
  padding: clamp(36px, 6vh, 82px) clamp(28px, 4vw, 76px) 34px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
}

.home-copy {
  width: min(560px, 48vw);
  align-self: center;
  margin-top: -2rem;
}

.home-copy h1 {
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(3rem, 5.6vw, 6.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.88);
}

.home-copy p {
  max-width: 520px;
  margin: 0 0 1.7rem;
  color: rgba(255,255,255,0.92);
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  text-shadow: 0 2px 12px rgba(0,0,0,0.82);
}

.home-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  align-items: end;
}

.home-card {
  position: relative;
  min-height: clamp(260px, 27vw, 390px);
  overflow: hidden;
  border: 1px solid rgba(214,174,75,0.72);
  background: #050505;
  box-shadow: 0 18px 48px rgba(0,0,0,0.48);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-card:hover,
.home-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 24px 62px rgba(0,0,0,0.62);
}

.home-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 62%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.45s ease;
}

.home-card:hover img { transform: scale(1.035); }

.home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.98) 68%),
    linear-gradient(90deg, rgba(214,174,75,0.08), transparent);
}


.card-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 0.7rem;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  background: rgba(0,0,0,0.72);
  font-size: 1.2rem;
}

.card-content h2 {
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.2vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* HOME PAGE — END */



/* ==================================================================
   HOMEPAGE TEXT ALIGNMENT AND WIDOW CONTROL — START

   Paragraph containers remain centered within their available space,
   while the actual words remain aligned to the left.
   ================================================================== */


/* ------------------------------------------------------------------
   HERO INTRODUCTION PARAGRAPH

   The paragraph sits inside the left hero column, but its own readable
   text measure is centered within that column.
   ------------------------------------------------------------------ */

.home-intro {
  width: min(100%, 46ch);

  margin:
    0
    auto
    1.7rem;

  color: rgba(255, 255, 255, 0.92);

  font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1.55;

  text-align: left;

  text-wrap: pretty;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.82);
}


/* Keep the introduction aligned with the hero heading on wide screens */

@media (min-width: 901px) {

  .home-copy .home-intro {
    margin-left: 0;
    margin-right: auto;
  }

}


/* ------------------------------------------------------------------
   CARD CONTENT CONTAINER

   The card content remains visually centered as a complete unit.
   ------------------------------------------------------------------ */

.card-content {
  position: absolute;
  z-index: 2;

  left: 50%;
  right: auto;
  bottom: 1.15rem;

  width: calc(100% - 2.5rem);
  max-width: 340px;

  transform: translateX(-50%);

  text-align: center;
}


/* ------------------------------------------------------------------
   CARD HEADINGS

   Heading wrapping is balanced to avoid a single short word
   appearing on its own line.
   ------------------------------------------------------------------ */

.card-content h2 {
  text-wrap: balance;
}


/* ------------------------------------------------------------------
   CARD PARAGRAPHS

   The paragraph block itself is centered, but the text inside it
   reads naturally from the left.
   ------------------------------------------------------------------ */

.card-description {
  width: min(100%, 29ch);

  margin:
    0.5rem
    auto
    0;

  color: rgba(255, 255, 255, 0.88);

  font-size: clamp(0.78rem, 0.95vw, 1rem);
  line-height: 1.5;

  text-align: left;

  text-wrap: pretty;

  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}


/* ------------------------------------------------------------------
   MOBILE TEXT MEASURE

   Slightly narrows text blocks on small screens to preserve
   comfortable line length and prevent isolated final words.
   ------------------------------------------------------------------ */

@media (max-width: 680px) {

  .home-intro {
    width: min(100%, 38ch);

    margin-left: auto;
    margin-right: auto;
  }

  .card-content {
    width: calc(100% - 3rem);
    max-width: 390px;
  }

  .card-description {
    width: min(100%, 32ch);

    font-size: 0.94rem;
    line-height: 1.55;
  }

}

/* HOMEPAGE TEXT ALIGNMENT AND WIDOW CONTROL — END */


/* ==================================================================
   INNER PAGES — START
   Shared cinematic layout for About, Ministry, Messages and Connect.
   ================================================================== */
.inner-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(214,174,75,0.08), transparent 30%),
    #050505;
}

.inner-hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.1fr);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #070707;
}

.inner-hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(54px, 8vw, 130px) clamp(28px, 6vw, 100px);
  align-self: center;
}

.inner-hero-copy h1 {
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.inner-hero-copy p {
  max-width: 55ch;
  color: rgba(255,255,255,0.86);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.inner-hero-image {
  position: relative;
  min-height: 540px;
}

.inner-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.inner-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #070707 0%, transparent 32%);
}

.content-section {
  padding: clamp(70px, 9vw, 140px) clamp(24px, 6vw, 100px);
  border-bottom: 1px solid rgba(214,174,75,0.18);
}

.content-section.alt {
  background:
    linear-gradient(135deg, rgba(214,174,75,0.07), transparent 48%),
    #0a0a0a;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
}

.split-layout.reverse .split-image { order: 2; }

.split-image {
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-copy p {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.2rem;
}

.feature-card {
  min-height: 250px;
  padding: 2rem;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(214,174,75,0.08), rgba(0,0,0,0.58));
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}

.feature-card h3 {
  margin: 0 0 0.6rem;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  text-transform: uppercase;
}

.feature-card p { color: rgba(255,255,255,0.78); }

.video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow);
}

.video-frame iframe,
.video-frame video {
  width: 100%;
  height: 100%;
  border: 0;
}

.form-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  background: #080808;
  box-shadow: var(--shadow);
}

.smart-form {
  padding: clamp(28px, 5vw, 72px);
}

.form-image {
  min-height: 700px;
}

.form-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

label {
  display: block;
  margin-top: 1rem;
  color: var(--gold-light);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input, textarea, select {
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(214,174,75,0.34);
  border-radius: 0;
  outline: 0;
  background: #111;
  color: var(--white);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px rgba(214,174,75,0.12);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

.form-status {
  min-height: 1.5rem;
  color: var(--gold-light);
  font-weight: 700;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 2rem;
  align-items: end;
  padding: 42px clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  background: #000;
}

.site-footer img {
  width: min(360px, 100%);
  filter: drop-shadow(0 0 18px rgba(214,174,75,0.28));
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  color: var(--gold-light);
}

.site-footer small { color: var(--muted); }

/* INNER PAGES — END */




/* ==================================================================
   MINISTRY CONSTELLATION FOOTER — START

   A premium editorial footer combining ministry identity,
   social communication, legal links and professional attribution.
   Every paragraph sits in a controlled centered block while the
   text remains left-aligned.
   ================================================================== */

.ministry-footer {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  border-top:
    1px solid rgba(215, 173, 66, 0.38);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(215, 173, 66, 0.13),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #090806 0%,
      #030303 22%,
      #000 100%
    );

  color: rgba(255, 255, 255, 0.76);
}


/* ------------------------------------------------------------------
   AMBIENT FOOTER LIGHT
   ------------------------------------------------------------------ */

.ministry-footer-light {
  position: absolute;
  z-index: -1;

  top: -310px;
  left: 50%;

  width: min(1050px, 95vw);
  height: 620px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    rgba(255, 214, 110, 0.13);

  filter: blur(120px);

  pointer-events: none;
}


/* ------------------------------------------------------------------
   FOOTER OPENING
   ------------------------------------------------------------------ */

.ministry-footer-opening {
  width: min(1600px, calc(100% - 40px));

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(330px, 0.48fr);

  gap: clamp(40px, 8vw, 130px);

  align-items: center;

  padding:
    clamp(75px, 9vw, 145px)
    0
    clamp(55px, 7vw, 100px);

  border-bottom:
    1px solid rgba(215, 173, 66, 0.22);
}

.footer-opening-copy {
  width: min(920px, 100%);
}

.footer-opening-copy .eyebrow,
.footer-opening-copy h2,
.footer-opening-copy > p:last-child {
  width: min(820px, 100%);

  margin-left: auto;
  margin-right: auto;

  text-align: left;
}

.footer-opening-copy h2 {
  margin-top: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 5.7vw, 6.7rem);
  font-weight: 400;

  line-height: 0.95;
  text-transform: uppercase;

  text-wrap: balance;
}

.footer-opening-copy > p:last-child {
  color: rgba(255, 255, 255, 0.74);

  line-height: 1.7;

  text-wrap: pretty;
}


/* PRAYER PATH */

.footer-prayer-path {
  position: relative;
  isolation: isolate;

  min-height: 265px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  overflow: hidden;

  padding:
    clamp(28px, 4vw, 48px);

  border:
    1px solid rgba(255, 217, 113, 0.46);

  background:
    linear-gradient(
      145deg,
      rgba(215, 173, 66, 0.17),
      transparent 43%
    ),
    #080808;

  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.55);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.footer-prayer-path::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -90px;
  right: -70px;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.16);

  filter: blur(52px);
}

.footer-prayer-path:hover,
.footer-prayer-path:focus-visible {
  transform: translateY(-8px);

  border-color:
    var(--gold-light);

  box-shadow:
    0 38px 90px rgba(0, 0, 0, 0.72),
    0 0 28px rgba(215, 173, 66, 0.14);

  outline: none;
}

.footer-prayer-path > span {
  position: absolute;

  top: 30px;
  right: 32px;

  color:
    rgba(255, 217, 113, 0.54);

  font-size: 2.5rem;
}

.footer-prayer-path strong,
.footer-prayer-path small {
  display: block;
}

.footer-prayer-path strong {
  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2rem, 3.1vw, 3.4rem);
  font-weight: 400;

  line-height: 1;
  text-transform: uppercase;
}

.footer-prayer-path small {
  margin-top: 0.8rem;

  color: rgba(255, 255, 255, 0.62);

  font-size: 0.67rem;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-prayer-path i {
  margin-top: 1.5rem;

  color: var(--gold-pale);

  font-style: normal;
}


/* ------------------------------------------------------------------
   MAIN FOOTER GRID
   ------------------------------------------------------------------ */

.ministry-footer-grid {
  width: min(1600px, calc(100% - 40px));

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(300px, 1.15fr)
    minmax(150px, 0.42fr)
    minmax(180px, 0.52fr)
    minmax(340px, 1fr);

  gap: clamp(35px, 5vw, 82px);

  padding:
    clamp(70px, 8vw, 125px)
    0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);
}


/* ------------------------------------------------------------------
   BRAND COLUMN
   ------------------------------------------------------------------ */

.footer-brand {
  display: block;

  width: min(300px, 100%);
}

.footer-brand img {
  display: block;

  width: 100%;
  max-height: 250px;

  object-fit: contain;
  object-position: left center;

  filter:
    drop-shadow(
      0 0 14px rgba(255, 217, 113, 0.32)
    );
}

.footer-brand-statement {
  width: min(100%, 38ch);

  margin:
    1.4rem
    0
    0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 1.3rem;

  line-height: 1.4;
  text-align: left;
}

.footer-brand-description {
  width: min(100%, 50ch);

  margin:
    1rem
    0
    0;

  color: rgba(255, 255, 255, 0.66);

  line-height: 1.7;

  text-align: left;
  text-wrap: pretty;
}


/* CONTACT LIST */

.footer-contact-list {
  margin-top: 2rem;

  display: flex;
  flex-direction: column;

  gap: 0.8rem;

  font-style: normal;
}

.footer-contact-list > a {
  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 0.9rem;

  align-items: center;

  padding:
    0.85rem
    0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.14);
}

.footer-contact-list > a > span:first-child {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(215, 173, 66, 0.31);

  border-radius: 50%;

  color: var(--gold-pale);
}

.footer-contact-list small,
.footer-contact-list strong {
  display: block;
}

.footer-contact-list small {
  color: rgba(255, 255, 255, 0.43);

  font-size: 0.56rem;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-contact-list strong {
  margin-top: 0.2rem;

  color: rgba(255, 255, 255, 0.8);

  font-size: 0.78rem;
  font-weight: 500;

  overflow-wrap: anywhere;
}


/* ------------------------------------------------------------------
   LINK COLUMNS
   ------------------------------------------------------------------ */

.footer-column-label {
  margin:
    0
    0
    1.4rem;

  color: var(--gold-light);

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}

.footer-link-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0.65rem;
}

.footer-link-column a {
  position: relative;

  padding:
    0.35rem
    0;

  color: rgba(255, 255, 255, 0.67);

  font-size: 0.84rem;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.footer-link-column a::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 0;
  height: 1px;

  background:
    var(--gold-light);

  transition:
    width 0.25s ease;
}

.footer-link-column a:hover,
.footer-link-column a:focus-visible {
  padding-left: 22px;

  color: var(--gold-light);

  outline: none;
}

.footer-link-column a:hover::before,
.footer-link-column a:focus-visible::before {
  width: 14px;
}


/* ------------------------------------------------------------------
   SOCIAL COLUMN
   ------------------------------------------------------------------ */

.footer-social-intro {
  width: min(100%, 45ch);

  margin:
    0
    0
    1.5rem;

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.65;

  text-align: left;
  text-wrap: pretty;
}

.footer-social-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0.65rem;
}

.footer-social-link {
  min-height: 98px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  gap: 0.8rem;

  padding:
    1rem;

  border:
    1px solid rgba(215, 173, 66, 0.22);

  color: rgba(255, 255, 255, 0.7);

  background:
    rgba(255, 255, 255, 0.015);

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition:
    transform 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  transform: translateY(-5px);

  color: #000;

  border-color:
    var(--gold-light);

  background:
    var(--gold-light);

  outline: none;
}

.footer-social-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid currentColor;

  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;

  text-transform: none;
}


/* ------------------------------------------------------------------
   FOOTER SCRIPTURE
   ------------------------------------------------------------------ */

.footer-scripture {
  width: min(1200px, calc(100% - 40px));

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap: clamp(20px, 4vw, 58px);

  align-items: start;

  padding:
    clamp(65px, 8vw, 115px)
    0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);
}

.footer-scripture-symbol {
  color:
    rgba(255, 217, 113, 0.18);

  font-family: var(--serif);
  font-size: clamp(6rem, 11vw, 12rem);

  line-height: 0.65;
}

.footer-scripture blockquote {
  width: min(850px, 100%);

  margin:
    0
    auto;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.4vw, 5rem);
  font-weight: 400;

  line-height: 1.14;
  text-align: left;

  text-wrap: balance;
}

.footer-scripture p {
  width: min(850px, 100%);

  margin:
    1.2rem
    auto
    0;

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   RICHARD BELL STUDIO CREDIT
   ------------------------------------------------------------------ */

.footer-studio-credit {
  width: min(1500px, calc(100% - 40px));

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    100px
    minmax(0, 1fr)
    minmax(250px, 0.55fr);

  gap: clamp(28px, 5vw, 75px);

  align-items: center;

  padding:
    clamp(55px, 7vw, 90px)
    0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);
}

.footer-studio-monogram {
  width: 88px;
  height: 88px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(215, 173, 66, 0.48);

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 1.8rem;

  box-shadow:
    inset 0 0 28px rgba(215, 173, 66, 0.06);
}

.footer-studio-copy > p:first-child {
  margin: 0;

  color: rgba(255, 255, 255, 0.43);

  font-size: 0.57rem;
  font-weight: 700;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}



.footer-studio-contact {
  display: flex;
  flex-direction: column;

  gap: 0.65rem;
}

.footer-studio-contact a {
  padding:
    0.7rem
    0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.14);

  color: rgba(255, 255, 255, 0.66);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.05em;

  overflow-wrap: anywhere;
}

.footer-studio-contact a:first-child {
  color: var(--gold-pale);

  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   LEGAL BAR
   ------------------------------------------------------------------ */

.footer-legal-bar {
  width: min(1600px, calc(100% - 40px));

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  gap: 2rem;

  align-items: center;

  padding:
    1.7rem
    0
    2.2rem;

  color: rgba(255, 255, 255, 0.43);

  font-size: 0.59rem;
  font-weight: 700;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.footer-legal-bar p {
  margin: 0;

  text-align: left;
}

.footer-legal-bar nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 0.8rem 1.2rem;
}

.footer-legal-bar a {
  color: rgba(255, 255, 255, 0.49);

  transition:
    color 0.25s ease;
}

.footer-legal-bar a:hover,
.footer-legal-bar a:focus-visible {
  color: var(--gold-light);

  outline: none;
}

.footer-designer-line {
  text-align: right !important;
}


/* ------------------------------------------------------------------
   RETURN TO TOP
   ------------------------------------------------------------------ */

.footer-return-top {
  position: absolute;

  right: clamp(18px, 3vw, 45px);
  bottom: 94px;

  width: 70px;
  height: 96px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 0.4rem;

  border:
    1px solid rgba(215, 173, 66, 0.42);

  color: var(--gold-pale);

  background:
    rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(12px);

  transition:
    color 0.28s ease,
    background 0.28s ease,
    transform 0.28s ease;
}

.footer-return-top:hover,
.footer-return-top:focus-visible {
  transform: translateY(-7px);

  color: #000;

  background:
    var(--gold-light);

  outline: none;
}

.footer-return-top > span {
  font-size: 1.35rem;
}

.footer-return-top small {
  max-width: 55px;

  font-size: 0.46rem;
  font-weight: 700;

  letter-spacing: 0.09em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   RESPONSIVE FOOTER
   ------------------------------------------------------------------ */

@media (max-width: 1200px) {

  .ministry-footer-opening {
    grid-template-columns: 1fr;
  }

  .ministry-footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .footer-studio-credit {
    grid-template-columns:
      88px
      minmax(0, 1fr);
  }

  .footer-studio-contact {
    grid-column:
      1 / -1;

    padding-left:
      calc(88px + clamp(28px, 5vw, 75px));
  }

  .footer-legal-bar {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .footer-legal-bar p,
  .footer-designer-line {
    text-align: center !important;
  }

}

@media (max-width: 760px) {

  .ministry-footer-opening,
  .ministry-footer-grid,
  .footer-scripture,
  .footer-studio-credit {
    width:
      min(100% - 28px, 100%);
  }

  .ministry-footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-social-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .footer-scripture {
    grid-template-columns: 1fr;
  }

  .footer-scripture-symbol {
    height: 52px;
  }

  .footer-studio-credit {
    grid-template-columns: 1fr;
  }

  .footer-studio-contact {
    grid-column: auto;

    padding-left: 0;
  }

  .footer-return-top {
    position: static;

    width: calc(100% - 28px);
    height: 58px;

    margin:
      0
      auto
      1.2rem;

    flex-direction: row;
  }

  .footer-return-top small {
    max-width: none;
  }

}

@media (max-width: 470px) {

  .footer-social-grid {
    grid-template-columns: 1fr;
  }

  .footer-social-link {
    min-height: 72px;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

}


/* ==================================================================
   FOOTER SOCIAL NOTICE
   Matches the same visual language as the social contact cards.
   ================================================================== */

.footer-social-note {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 0.9rem;

  align-items: center;

  margin-top: 0.8rem;

  padding:
    1rem
    1.1rem;

  border:
    1px solid rgba(215, 173, 66, 0.22);

  color:
    rgba(255, 255, 255, 0.7);

  background:
    rgba(255, 255, 255, 0.015);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.01);

  transition:
    transform 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.footer-social-note:hover {
  transform:
    translateY(-4px);

  color:
    rgba(255, 255, 255, 0.92);

  border-color:
    var(--gold-light);

  background:
    rgba(215, 173, 66, 0.06);

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 217, 113, 0.04);
}

.footer-social-note > span {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid currentColor;

  border-radius: 50%;

  color:
    var(--gold-light);

  font-size: 0.9rem;
  font-weight: 700;

  line-height: 1;
}

.footer-social-note p {
  width: 100%;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.63);

  font-size: 0.74rem;
  line-height: 1.68;

  text-align: left;
  text-wrap: pretty;
}

.footer-social-note:hover p {
  color:
    rgba(255, 255, 255, 0.82);
}


/* Responsive */

@media (max-width: 760px) {

  .footer-social-note {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    padding:
      0.95rem
      1rem;
  }

  .footer-social-note > span {
    width: 36px;
    height: 36px;
  }

  .footer-social-note p {
    font-size: 0.72rem;
  }

}

@media (max-width: 470px) {

  .footer-social-note {
    align-items: start;

    gap: 0.75rem;

    padding:
      0.9rem;
  }

  .footer-social-note p {
    font-size: 0.7rem;
    line-height: 1.62;
  }

}


/* MINISTRY CONSTELLATION FOOTER — END */




/* ==================================================================
   WEBSITE DESIGN CREDIT EMPHASIS
   Makes the design attribution immediate and unmistakable.
   ================================================================== */

.footer-studio-kicker {
  margin: 0;

  color: var(--gold-light) !important;

  font-size: 0.68rem !important;
  font-weight: 800 !important;

  letter-spacing: 0.2em !important;
  line-height: 1.2;

  text-align: left;
  text-transform: uppercase;
}

.footer-studio-copy h3 {
  margin:
    0.45rem
    0
    0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  font-weight: 400;

  line-height: 0.95;
  text-align: left;
  text-transform: uppercase;
}

.footer-studio-services {
  width: min(100%, 58ch);

  margin:
    1rem
    0
    0;

  color: var(--gold-pale) !important;

  font-size: 0.72rem !important;
  font-weight: 700;

  letter-spacing: 0.12em;
  line-height: 1.6;

  text-align: left;
  text-transform: uppercase;
}

.footer-studio-copy > p:last-child {
  width: min(100%, 66ch);

  margin:
    1rem
    0
    0;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.7;

  text-align: left;
  text-wrap: pretty;
}

.footer-studio-primary-link {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  padding:
    1rem
    1.15rem !important;

  border:
    1px solid rgba(255, 217, 113, 0.52) !important;

  color: #000 !important;

  background:
    var(--gold-light);

  font-size: 0.68rem !important;
  font-weight: 800 !important;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.footer-studio-primary-link:hover,
.footer-studio-primary-link:focus-visible {
  transform: translateY(-4px);

  background: var(--gold-pale);

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(215, 173, 66, 0.2);

  outline: none;
}






/* ================================================================
   STACKED PAGE MARKERS
   Each word is displayed one letter per line.
   ================================================================ */

.scripture-markers {
  position: fixed;
  z-index: 450;

  left: 0;
  top: 50%;

  display: flex;
  flex-direction: column;
  gap: 8px;

  transform: translateY(-50%);
}

.page-marker {
  width: 52px;

  min-height: 138px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 2px;

  padding: 12px 8px;

  border-top: 1px solid rgba(255, 220, 133, 0.55);
  border-right: 1px solid rgba(255, 220, 133, 0.72);
  border-bottom: 1px solid rgba(255, 220, 133, 0.55);

  border-radius: 0 7px 7px 0;

  box-shadow:
    10px 16px 34px rgba(0, 0, 0, 0.4),
    inset -1px 0 rgba(255, 255, 255, 0.08);

  transition:
    width 0.3s ease,
    transform 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease;
}

.page-marker span {
  display: block;

  color: rgba(255, 255, 255, 0.92);

  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 700;

  line-height: 1;
  letter-spacing: 0;

  text-align: center;
  text-transform: uppercase;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.72);
}


/* About */

.page-marker-about {
  background:
    linear-gradient(
      180deg,
      #7d2b37,
      #4f141d
    );
}


/* Ministry */

.page-marker-ministry {
  background:
    linear-gradient(
      180deg,
      #274f7a,
      #102b49
    );
}


/* Messages */

.page-marker-messages {
  background:
    linear-gradient(
      180deg,
      #3e6652,
      #1c392e
    );
}


/* Connect */

.page-marker-connect {
  background:
    linear-gradient(
      180deg,
      #74566f,
      #402b3f
    );
}


/* Hover */

.page-marker:hover,
.page-marker:focus-visible {
  width: 66px;

  transform: translateX(0);

  filter: brightness(1.14);

  box-shadow:
    16px 20px 48px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(215, 173, 66, 0.18);

  outline: none;
}


/* Current page */

.page-marker.is-active {
  width: 74px;

  border-color: rgba(255, 222, 131, 0.95);

  box-shadow:
    18px 22px 56px rgba(0, 0, 0, 0.62),
    0 0 28px rgba(215, 173, 66, 0.24),
    inset -6px 0 18px rgba(255, 220, 132, 0.08);
}

.page-marker.is-active span {
  color: #fff0b5;
}


/* Small screens — still stacked vertically */

@media (max-width: 680px) {

  .scripture-markers {
    left: 0;
    top: 50%;

    transform: translateY(-50%);

    gap: 5px;
  }

  .page-marker {
    width: 38px;
    min-height: 108px;

    padding: 8px 5px;
  }

  .page-marker span {
    font-size: 0.62rem;
  }

  .page-marker.is-active {
    width: 48px;
  }

}


/* ==================================================================
   RESPONSIVE DESIGN — START
   Maintains the same visual hierarchy on laptop, tablet and mobile.
   ================================================================== */
@media (max-width: 1050px) {
  :root { --header-height: 104px; }

  .menu-toggle { display: grid; place-items: center; }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    background: #000;
    border-bottom: 1px solid var(--line);
  }

  .primary-nav.open { display: flex; }

  .primary-nav a {
    padding: 0.9rem 1rem;
    text-align: center;
  }

  .primary-nav a + a::before { display: none; }

  .home-copy {
    width: min(620px, 66vw);
  }

  .home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inner-hero {
    grid-template-columns: 1fr;
  }

  .inner-hero-image {
    min-height: 430px;
  }

  .inner-hero-image::after {
    background: linear-gradient(180deg, #070707 0%, transparent 30%);
  }

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

  .form-panel,
  .split-layout {
    grid-template-columns: 1fr;
  }

  .split-layout.reverse .split-image { order: 0; }

  .site-footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  :root { --header-height: 88px; }

  .header-inner {
    padding-inline: 14px;
    gap: 1rem;
  }

  .logo-link img {
    width: min(245px, 70vw);
    max-height: 68px;
  }

  .home-stage {
    min-height: auto;
    background-position: 63% 18%;
  }

  .home-content {
    min-height: auto;
    padding: 58px 16px 24px;
    grid-template-rows: auto auto;
  }

  .home-copy {
    width: 100%;
    padding-top: 33vh;
    margin: 0;
  }

  .home-copy h1 {
    font-size: clamp(2.65rem, 13vw, 4.5rem);
  }

  .home-card-grid {
    grid-template-columns: 1fr;
  }

  .home-card {
    min-height: 330px;
  }

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

  .form-row { grid-template-columns: 1fr; }

  .inner-hero-copy,
  .content-section {
    padding-inline: 20px;
  }

  .inner-hero-image {
    min-height: 370px;
  }
}
/* RESPONSIVE DESIGN — END */




/*//  +++++++++++++++++++++++++++++++++++++++++++++++++++++  //*/


/* ==================================================================
   ABOUT PAGE ENHANCEMENTS — START
   Adds depth, storytelling, visual hierarchy and alternating sections.
   ================================================================== */

.about-page {
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(214, 174, 75, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 44%,
      rgba(214, 174, 75, 0.045),
      transparent 30%
    ),
    #050505;
}


/* ------------------------------------------------------------------
   ABOUT HERO
   ------------------------------------------------------------------ */

.about-hero {
  position: relative;
}

.about-hero::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 73% 30%,
      rgba(242, 209, 123, 0.13),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      transparent 68%,
      rgba(0, 0, 0, 0.35)
    );
}

.about-hero-lead {
  color: var(--gold-light) !important;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  line-height: 1.35;
}


/* ------------------------------------------------------------------
   FOUNDATION AND IMAGE FRAMES
   ------------------------------------------------------------------ */

.about-intro {
  color: var(--ivory) !important;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 2rem) !important;
  line-height: 1.4;
}

.about-image-frame {
  position: relative;
}

.about-image-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(214, 174, 75, 0.48);
  pointer-events: none;
}


/* ------------------------------------------------------------------
   TRIALS SECTION
   ------------------------------------------------------------------ */

.about-trials {
  background:
    linear-gradient(
      135deg,
      rgba(214, 174, 75, 0.08),
      transparent 46%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(214, 174, 75, 0.07),
      transparent 28%
    ),
    #090909 !important;
}


/* ------------------------------------------------------------------
   SCRIPTURE BAND
   ------------------------------------------------------------------ */

.about-scripture-band {
  position: relative;
  overflow: hidden;

  padding:
    clamp(70px, 9vw, 135px)
    clamp(24px, 8vw, 140px);

  border-block:
    1px solid rgba(214, 174, 75, 0.35);

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(214, 174, 75, 0.15),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #050505,
      #11100b 50%,
      #050505
    );
}

.about-scripture-band::before,
.about-scripture-band::after {
  content: "";
  position: absolute;
  left: 50%;

  width: min(600px, 70vw);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold-light),
      transparent
    );
}

.about-scripture-band::before {
  top: 28px;
}

.about-scripture-band::after {
  bottom: 28px;
}

.about-scripture-inner {
    position: relative;
    z-index: 2;

    width: min(980px, 100%);

    margin: 0 auto;

    text-align: left;      /* Align all text to the left */
}

.about-scripture-mark {
  display: inline-block;

  height: auto;
  margin-right: 12px;

  color: rgba(242, 209, 123, 0.22);

  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;

  vertical-align: top;
}

.about-scripture-band blockquote {
  display: inline;

  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.3rem);
  font-weight: 400;
  line-height: 1.18;

  text-align: left;
}





.quote-mark{

    position:absolute;

    top:-45px;
    left:-40px;

    font-family:var(--serif);

    font-size:10rem;

    line-height:1;

    color:rgba(212,175,55,.12);

    pointer-events:none;

    user-select:none;
}

.scripture-quote blockquote{

    margin:0;

    text-align:left;

    font-size:clamp(2rem,4vw,4rem);

    line-height:1.2;
}






.about-scripture-band p {
  margin: 1.5rem 0 0;

  color: var(--ivory);

  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   POWER AND LOVE PANEL
   ------------------------------------------------------------------ */

.about-power-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: clamp(32px, 5vw, 68px);

  border:
    1px solid rgba(214, 174, 75, 0.55);

  background:
    linear-gradient(
      145deg,
      rgba(214, 174, 75, 0.13),
      transparent 36%
    ),
    rgba(4, 4, 4, 0.92);

  box-shadow: var(--shadow);
}

.about-power-glow {
  position: absolute;
  z-index: -1;

  top: -110px;
  right: -80px;

  width: 290px;
  height: 290px;

  border-radius: 50%;

  background:
    rgba(242, 209, 123, 0.18);

  filter: blur(55px);
}

.about-power-panel h3 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.about-power-panel > p {
  color: rgba(255, 255, 255, 0.82);
}

.about-belief-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.about-belief-list li {
  position: relative;

  padding:
    0.8rem
    0
    0.8rem
    2rem;

  border-bottom:
    1px solid rgba(214, 174, 75, 0.17);

  color: var(--ivory);
}

.about-belief-list li::before {
  content: "✦";

  position: absolute;
  left: 0;

  color: var(--gold-light);
}


/* ------------------------------------------------------------------
   SHARED ABOUT SECTION HEADINGS
   ------------------------------------------------------------------ */

.about-section-heading {
  width: min(900px, 100%);
  margin-bottom: 2.5rem;
}

.about-section-heading > p:last-child {
  max-width: 64ch;
  color: rgba(255, 255, 255, 0.78);
}


/* ------------------------------------------------------------------
   CALLING JOURNEY
   ------------------------------------------------------------------ */

.about-journey-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 1.3rem;
}

.about-journey-card {
  position: relative;
  overflow: hidden;

  min-height: 310px;
  padding: 2rem;

  border:
    1px solid rgba(214, 174, 75, 0.35);

  background:
    linear-gradient(
      150deg,
      rgba(214, 174, 75, 0.09),
      transparent 42%
    ),
    #0b0b0b;

  transition:
    transform 0.28s ease,
    border-color 0.28s ease;
}

.about-journey-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-light);
}

.about-journey-card span {
  display: block;

  margin-bottom: 2.5rem;

  color: rgba(242, 209, 123, 0.42);

  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
}

.about-journey-card h3 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  text-transform: uppercase;
}

.about-journey-card p {
  color: rgba(255, 255, 255, 0.76);
}


/* ------------------------------------------------------------------
   CORE CONVICTIONS
   ------------------------------------------------------------------ */

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

.about-feature-grid .feature-card {
  position: relative;
  overflow: hidden;
}

.about-card-number {
  display: block;

  margin-bottom: 1.4rem;

  color: rgba(242, 209, 123, 0.34);

  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
}


/* ------------------------------------------------------------------
   MISSION TO LOST SOULS
   ------------------------------------------------------------------ */

.about-mission-section {
  position: relative;

  min-height: 620px;

  display: grid;
  place-items: center;

  padding:
    clamp(80px, 10vw, 150px)
    clamp(24px, 7vw, 120px);

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94),
      rgba(0, 0, 0, 0.55)
    ),
    url("../images/about-hero.jpg")
    center 25% / cover no-repeat;
}

.about-mission-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 68% 30%,
      rgba(242, 209, 123, 0.13),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.82)
    );
}

.about-mission-content {
  position: relative;
  z-index: 2;

  width: min(850px, 100%);
  margin-right: auto;
}

.about-mission-content h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6.8rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.about-mission-content p {
  max-width: 64ch;

  color: rgba(255, 255, 255, 0.86);

  font-size: 1.08rem;
}


/* ------------------------------------------------------------------
   FINAL ABOUT CTA
   ------------------------------------------------------------------ */

.about-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;

  padding:
    clamp(55px, 7vw, 100px)
    clamp(24px, 7vw, 120px);

  border-top:
    1px solid rgba(214, 174, 75, 0.28);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(214, 174, 75, 0.11),
      transparent 28%
    ),
    #050505;
}

.about-final-cta h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
}

.about-final-cta p {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.76);
}


/* ------------------------------------------------------------------
   ABOUT PAGE RESPONSIVE DESIGN
   ------------------------------------------------------------------ */

@media (max-width: 1100px) {

  .about-journey-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .about-feature-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}

@media (max-width: 720px) {

  .about-journey-grid,
  .about-feature-grid {
    grid-template-columns: 1fr;
  }

  .about-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-mission-section {
    min-height: 700px;
    background-position: 62% center;
  }

  .about-scripture-band {
    padding-inline: 20px;
  }

}


/*====================================================
  LIVING WORD EXPERIENCE
====================================================*/

.living-word-band{

position:relative;

overflow:hidden;

padding:140px 8%;

background:
radial-gradient(circle at center,
rgba(255,206,85,.18),
transparent 35%),
linear-gradient(180deg,#050505,#000);

border-top:1px solid rgba(255,215,110,.18);

border-bottom:1px solid rgba(255,215,110,.18);

}


.living-word-glow{

position:absolute;

top:-350px;

left:50%;

transform:translateX(-50%);

width:900px;

height:900px;

background:

radial-gradient(circle,
rgba(255,214,120,.35),
transparent 70%);

filter:blur(90px);

pointer-events:none;

}


.living-word-inner{

position:relative;

max-width:1200px;

margin:auto;

text-align:left;

}


.living-word-label{

letter-spacing:.55em;

font-size:.82rem;

color:#d9b25a;

margin-bottom:35px;

}


.living-word-inner h2{

font-size:clamp(2rem,4vw,4rem);

font-family:var(--serif);

font-weight:300;

color:#fff;

margin-bottom:70px;

}


.living-bible{

width:230px;

height:120px;

margin:auto;

background:url("../images/logo-prophet-hanrick-hunt.png")
center/contain no-repeat;

filter:

drop-shadow(0 0 45px rgba(255,214,90,.75));

margin-bottom:70px;

}


.scripture-stage{

position:relative;

min-height:340px;

}


.scripture-slide{

position:absolute;

width:100%;

left:0;

top:0;

opacity:0;

transform:

translateX(70px);

transition:

all 1.2s ease;

}


.scripture-slide.active{

opacity:1;

transform:

translateX(0);

}


.scripture-slide blockquote{

max-width:860px;

margin:auto;

font-family:var(--serif);

font-size:clamp(2rem,3vw,3.7rem);

line-height:1.28;

text-align:left;

color:#fff;

text-wrap:pretty;

}


.scripture-slide p{

margin-top:35px;

font-size:1rem;

letter-spacing:.35em;

text-transform:uppercase;

color:#d9b25a;

text-align:left;

max-width:860px;

margin-left:auto;

margin-right:auto;

}


.scripture-progress{

margin-top:40px;

display:flex;

justify-content:center;

gap:15px;

}


.scripture-progress span{

width:12px;

height:12px;

border-radius:50%;

background:#444;

transition:.5s;

}


.scripture-progress span.active{

background:#d7af42;

box-shadow:

0 0 25px #d7af42;

}


/*====================================================
  LIVING WORD HEADING
====================================================*/

.living-word-heading{

width:min(760px,100%);

margin:
0 auto
4rem;

font-family:var(--serif);

font-size:clamp(2.1rem,4vw,4rem);

font-weight:300;

line-height:1.18;

color:#ffffff;

text-align:left;

text-wrap:balance;

}


/* ABOUT PAGE ENHANCEMENTS — END */






/* ==================================================================
   MINISTRY MASTHEAD — START

   Converts the original square logo into a wide, cinematic ministry
   identity without displaying the full square artwork at the top.
   ================================================================== */

.ministry-masthead {
  position: relative;
  z-index: 100;

  width: 100%;
  min-height: clamp(150px, 15vw, 235px);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-bottom:
    1px solid rgba(222, 181, 74, 0.42);

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(222, 181, 74, 0.12),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #050505 0%,
      #000000 64%,
      #070501 100%
    );

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.58),
    inset 0 -1px 0 rgba(255, 216, 108, 0.15);
}


/* Subtle gold line across the bottom */

.ministry-masthead::after {
  content: "";

  position: absolute;

  left: 7%;
  right: 7%;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(222, 181, 74, 0.5),
      var(--gold-bright),
      rgba(222, 181, 74, 0.5),
      transparent
    );
}


/* Moving vertical light behind the emblem */

.masthead-light {
  position: absolute;

  top: -40%;
  left: 50%;

  width: 240px;
  height: 190%;

  transform:
    translateX(-50%)
    rotate(8deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 217, 113, 0.03),
      rgba(255, 217, 113, 0.18),
      rgba(255, 217, 113, 0.03),
      transparent
    );

  filter: blur(10px);

  opacity: 0.7;

  pointer-events: none;

  animation:
    mastheadLightMove 7s ease-in-out infinite alternate;
}


/* Main brand link */

.masthead-brand {
  position: relative;
  z-index: 2;

  width: min(1500px, 94vw);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(22px, 4vw, 72px);

  padding:
    clamp(18px, 2vw, 34px)
    clamp(18px, 4vw, 72px);
}


/* Logo emblem container */

.masthead-emblem {
  position: relative;

  flex: 0 0 auto;

  width: clamp(105px, 11vw, 180px);
  height: clamp(105px, 11vw, 180px);

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 216, 108, 0.13),
      rgba(0, 0, 0, 0.04) 55%,
      transparent 72%
    );
}


/*
   The source image is enlarged and repositioned so the Bible and
   flame are visible while the large name underneath is cropped out.
*/

.masthead-emblem img {
  width: 185%;
  max-width: none;

  transform:
    translateY(-17%)
    scale(1.03);

  filter:
    drop-shadow(
      0 0 7px rgba(255, 225, 139, 0.9)
    )
    drop-shadow(
      0 0 24px rgba(222, 181, 74, 0.65)
    )
    drop-shadow(
      0 0 54px rgba(222, 181, 74, 0.28)
    );
}


/* Gold aura around the emblem */

.masthead-emblem::before {
  content: "";

  position: absolute;
  z-index: -1;

  inset: 17%;

  border-radius: 50%;

  background:
    rgba(255, 216, 108, 0.26);

  filter: blur(28px);

  animation:
    emblemGlow 3.2s ease-in-out infinite alternate;
}


/* Ministry title group */

.masthead-identity {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}


/* Small word: Prophet */

.masthead-title-small {
  color: var(--gold-pale);

  font-family: var(--serif);
  font-size: clamp(0.8rem, 1.25vw, 1.15rem);
  font-weight: 600;

  letter-spacing: 0.42em;
  text-transform: uppercase;

  text-shadow:
    0 0 16px rgba(222, 181, 74, 0.42);
}


/* Main ministry name */

.masthead-title {
  display: block;

  margin-top: -0.05em;

  color: var(--gold-bright);

  font-family: var(--serif);
  font-size: clamp(2.7rem, 6vw, 7.2rem);
  font-weight: 400;

  line-height: 0.92;
  letter-spacing: 0.025em;

  text-transform: uppercase;

  white-space: nowrap;

  background:
    linear-gradient(
      180deg,
      #fff1b5 0%,
      #f2cb68 31%,
      #bf8623 68%,
      #f0ce73 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  filter:
    drop-shadow(
      0 4px 10px rgba(0, 0, 0, 0.85)
    )
    drop-shadow(
      0 0 16px rgba(222, 181, 74, 0.18)
    );
}


/* Decorative divider under the name */

.masthead-divider {
  width: min(660px, 100%);
  height: 1px;

  margin:
    clamp(9px, 1vw, 15px)
    0
    clamp(8px, 0.9vw, 13px);

  background:
    linear-gradient(
      90deg,
      var(--gold-bright),
      rgba(222, 181, 74, 0.65),
      transparent
    );
}


/* Slogan */

.masthead-slogan {
  color: rgba(248, 231, 176, 0.86);

  font-size: clamp(0.68rem, 1vw, 0.95rem);
  font-weight: 700;

  letter-spacing: 0.11em;
  line-height: 1.4;

  text-transform: uppercase;
}


/* Interaction */

.masthead-brand:hover .masthead-emblem img,
.masthead-brand:focus-visible .masthead-emblem img {
  filter:
    drop-shadow(
      0 0 11px rgba(255, 235, 168, 1)
    )
    drop-shadow(
      0 0 36px rgba(222, 181, 74, 0.85)
    )
    drop-shadow(
      0 0 70px rgba(222, 181, 74, 0.38)
    );
}


/* Light animation */

@keyframes mastheadLightMove {

  from {
    transform:
      translateX(-62%)
      rotate(8deg);

    opacity: 0.42;
  }

  to {
    transform:
      translateX(-38%)
      rotate(8deg);

    opacity: 0.82;
  }

}


/* Emblem glow animation */

@keyframes emblemGlow {

  from {
    opacity: 0.42;
    transform: scale(0.9);
  }

  to {
    opacity: 0.86;
    transform: scale(1.12);
  }

}


/* Tablet */

@media (max-width: 900px) {

  .ministry-masthead {
    min-height: 158px;
  }

  .masthead-brand {
    gap: 20px;
  }

  .masthead-emblem {
    width: 112px;
    height: 112px;
  }

  .masthead-title {
    font-size:
      clamp(2.2rem, 7vw, 4.6rem);
  }

  .masthead-title-small {
    letter-spacing: 0.3em;
  }

}


/* Mobile */

@media (max-width: 620px) {

  .ministry-masthead {
    min-height: 175px;
  }

  .masthead-brand {
    width: 100%;

    gap: 13px;

    padding:
      20px
      14px;
  }

  .masthead-emblem {
    width: 82px;
    height: 82px;
  }

  .masthead-identity {
    flex: 1;
  }

  .masthead-title-small {
    font-size: 0.58rem;
    letter-spacing: 0.23em;
  }

  .masthead-title {
    font-size:
      clamp(1.55rem, 8vw, 2.7rem);

    white-space: normal;
  }

  .masthead-divider {
    margin:
      7px
      0;
  }

  .masthead-slogan {
    max-width: 34ch;

    font-size: 0.52rem;
    letter-spacing: 0.07em;
  }

}



/* ==================================================================
   MINISTRY PAGE EXPERIENCE — START
   Builds a cinematic, interactive ministry presentation.
   ================================================================== */

.ministry-page {
  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(215, 173, 66, 0.075),
      transparent 29%
    ),
    radial-gradient(
      circle at 84% 48%,
      rgba(73, 96, 120, 0.08),
      transparent 31%
    ),
    #050505;
}


/* ------------------------------------------------------------------
   MINISTRY HERO
   ------------------------------------------------------------------ */

.ministry-experience-hero {
  position: relative;
}

.ministry-experience-hero::before {
  content: "";

  position: absolute;
  z-index: 3;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 73% 28%,
      rgba(255, 217, 113, 0.14),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(0, 0, 0, 0.45)
    );
}

.ministry-hero-lead {
  color: var(--gold-light) !important;

  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.95rem) !important;

  line-height: 1.38;
}


/* ------------------------------------------------------------------
   LIVING ASSIGNMENT
   ------------------------------------------------------------------ */

.living-assignment-section {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(380px, 0.8fr);

  gap: clamp(42px, 8vw, 130px);

  align-items: center;

  padding:
    clamp(78px, 9vw, 145px)
    clamp(24px, 7vw, 120px);

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(215, 173, 66, 0.11),
      transparent 32%
    ),
    #080808;
}

.living-assignment-copy h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 6.2rem);
  font-weight: 400;

  line-height: 0.96;
  text-transform: uppercase;
}

.living-assignment-copy p {
  max-width: 64ch;

  color: rgba(255, 255, 255, 0.8);

  font-size: 1.06rem;
}

.living-assignment-declaration {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;

  gap: 0.5rem;

  overflow: hidden;

  padding:
    clamp(34px, 5vw, 68px);

  border:
    1px solid rgba(215, 173, 66, 0.54);

  background:
    linear-gradient(
      145deg,
      rgba(215, 173, 66, 0.14),
      transparent 38%
    ),
    #070707;

  box-shadow:
    0 30px 85px rgba(0, 0, 0, 0.5);
}

.living-assignment-declaration::after {
  content: "";

  position: absolute;
  z-index: -1;

  top: -100px;
  right: -70px;

  width: 270px;
  height: 270px;

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.14);

  filter: blur(55px);
}

.living-assignment-declaration > span {
  margin-bottom: 1.5rem;

  color: rgba(255, 217, 113, 0.42);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.living-assignment-declaration strong {
  padding: 0.7rem 0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 400;

  line-height: 1.05;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   SHARED MINISTRY SECTION INTRO
   ------------------------------------------------------------------ */

.ministry-section-intro {
  width: min(930px, 100%);

  margin-bottom: 3rem;
}

.ministry-section-intro > p:last-child {
  width: min(100%, 64ch);

  color: rgba(255, 255, 255, 0.76);

  text-align: left;
}


/* ------------------------------------------------------------------
   MINISTRY AREAS
   ------------------------------------------------------------------ */

.ministry-areas-section {
  background:
    linear-gradient(
      140deg,
      rgba(215, 173, 66, 0.075),
      transparent 42%
    ),
    #090909 !important;
}

.ministry-area-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1.35rem;
}

.ministry-area-card {
  position: relative;

  min-height: 390px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  padding:
    clamp(26px, 3vw, 42px);

  border:
    1px solid rgba(215, 173, 66, 0.28);

  background:
    linear-gradient(
      150deg,
      rgba(215, 173, 66, 0.08),
      transparent 40%
    ),
    #0a0a0a;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ministry-area-card::after {
  content: "";

  position: absolute;

  right: -80px;
  bottom: -100px;

  width: 210px;
  height: 210px;

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.07);

  filter: blur(42px);
}

.ministry-area-card:hover {
  transform: translateY(-9px);

  border-color:
    rgba(255, 217, 113, 0.75);

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.52);
}

.ministry-area-number {
  display: block;

  color:
    rgba(255, 217, 113, 0.28);

  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
}

.ministry-area-icon {
  width: 52px;
  height: 52px;

  margin:
    1.5rem
    0
    1.1rem;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255, 217, 113, 0.48);

  border-radius: 50%;

  color: var(--gold-light);

  font-size: 1.15rem;
}

.ministry-area-card h3 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.7vw, 2.8rem);
  font-weight: 400;

  line-height: 1.04;
  text-transform: uppercase;
}

.ministry-area-card p {
  color: rgba(255, 255, 255, 0.74);
}

.ministry-area-card small {
  margin-top: auto;
  padding-top: 1rem;

  border-top:
    1px solid rgba(215, 173, 66, 0.18);

  color: var(--gold-pale);

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   BEFORE THE PLATFORM
   ------------------------------------------------------------------ */

.before-platform-section {
  background:
    radial-gradient(
      circle at 14% 30%,
      rgba(215, 173, 66, 0.07),
      transparent 28%
    ),
    #050505;
}

.ministry-framed-image {
  position: relative;
}

.ministry-framed-image::after {
  content: "";

  position: absolute;

  inset: 14px;

  border:
    1px solid rgba(255, 217, 113, 0.46);

  pointer-events: none;
}

.ministry-emphasis-text {
  color: var(--gold-light) !important;

  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.9rem) !important;

  line-height: 1.4;
}


/* ------------------------------------------------------------------
   MINISTRY PULSE
   ------------------------------------------------------------------ */

.ministry-pulse-section {
  position: relative;
  isolation: isolate;

  min-height: 720px;

  display: grid;
  place-items: center;

  overflow: hidden;

  padding:
    clamp(85px, 10vw, 160px)
    clamp(24px, 7vw, 120px);

  border-block:
    1px solid rgba(215, 173, 66, 0.25);

  background:
    radial-gradient(
      circle at center,
      rgba(215, 173, 66, 0.12),
      transparent 38%
    ),
    #040404;
}

.ministry-pulse-orbit {
  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: min(680px, 80vw);
  aspect-ratio: 1;

  transform:
    translate(-50%, -50%);
}

.pulse-ring {
  position: absolute;
  inset: 0;

  border:
    1px solid rgba(255, 217, 113, 0.18);

  border-radius: 50%;

  animation:
    ministryPulseRing 8s linear infinite;
}

.pulse-ring-two {
  inset: 14%;

  animation-duration: 11s;
  animation-direction: reverse;
}

.pulse-ring-three {
  inset: 29%;

  animation-duration: 6s;
}

.pulse-ring::before {
  content: "";

  position: absolute;

  top: 50%;
  left: -5px;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background:
    var(--gold-light);

  box-shadow:
    0 0 18px rgba(255, 217, 113, 0.9);
}

.ministry-pulse-content {
  width: min(1050px, 100%);

  text-align: center;
}

.ministry-pulse-content h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 400;

  line-height: 0.94;
  text-transform: uppercase;
}

.ministry-pulse-content > p:last-child {
  width: min(720px, 100%);

  margin:
    1.5rem
    auto
    0;

  color: rgba(255, 255, 255, 0.76);

  text-align: left;
}

.ministry-pulse-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 0.75rem;

  margin:
    2.4rem
    0;
}

.ministry-pulse-words span {
  padding:
    0.75rem
    1.1rem;

  border:
    1px solid rgba(255, 217, 113, 0.34);

  color: var(--gold-pale);

  background:
    rgba(0, 0, 0, 0.58);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes ministryPulseRing {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* ------------------------------------------------------------------
   PRAYER JOURNEY
   ------------------------------------------------------------------ */

.prayer-journey-section {
  background:
    linear-gradient(
      135deg,
      rgba(215, 173, 66, 0.07),
      transparent 44%
    ),
    #090909 !important;
}

.prayer-journey {
  display: grid;

  grid-template-columns:
    minmax(250px, 0.55fr)
    minmax(0, 1.45fr);

  border:
    1px solid rgba(215, 173, 66, 0.38);

  background:
    #070707;

  box-shadow:
    0 30px 85px rgba(0, 0, 0, 0.52);
}

.prayer-journey-path {
  display: flex;
  flex-direction: column;

  padding:
    clamp(20px, 3vw, 38px);

  border-right:
    1px solid rgba(215, 173, 66, 0.22);

  background:
    linear-gradient(
      145deg,
      rgba(215, 173, 66, 0.075),
      transparent 40%
    ),
    #0b0b0b;
}

.prayer-journey-path button {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 1rem;

  padding:
    1rem;

  border: 0;
  border-bottom:
    1px solid rgba(215, 173, 66, 0.17);

  color: rgba(255, 255, 255, 0.76);

  background:
    transparent;

  font-family: var(--serif);
  font-size: 1.3rem;

  text-align: left;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    padding-left 0.25s ease;
}

.prayer-journey-path button span {
  color:
    rgba(255, 217, 113, 0.38);

  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.prayer-journey-path button:hover,
.prayer-journey-path button:focus-visible,
.prayer-journey-path button.is-active {
  padding-left: 1.5rem;

  color: #000;

  background:
    var(--gold-light);

  outline: none;
}

.prayer-journey-path button:hover span,
.prayer-journey-path button:focus-visible span,
.prayer-journey-path button.is-active span {
  color: rgba(0, 0, 0, 0.58);
}

.prayer-journey-result {
  position: relative;

  min-height: 460px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;

  padding:
    clamp(36px, 6vw, 90px);
}

.prayer-result-light {
  position: absolute;

  top: -120px;
  right: -80px;

  width: 340px;
  height: 340px;

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.12);

  filter: blur(65px);
}

.prayer-result-label {
  position: relative;
  z-index: 2;

  margin: 0 0 0.7rem;

  color: rgba(255, 255, 255, 0.56);

  font-size: 0.67rem;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prayer-journey-result h3 {
  position: relative;
  z-index: 2;

  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.7vw, 5.4rem);
  font-weight: 400;

  line-height: 0.98;
  text-transform: uppercase;
}

.prayer-journey-result blockquote {
  position: relative;
  z-index: 2;

  margin:
    1.5rem
    0
    0.8rem;

  color: rgba(255, 255, 255, 0.88);

  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);

  line-height: 1.4;
}

.prayer-journey-result strong {
  position: relative;
  z-index: 2;

  color: var(--gold-pale);

  font-size: 0.74rem;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prayer-journey-result > p:last-child {
  position: relative;
  z-index: 2;

  width: min(700px, 100%);

  color: rgba(255, 255, 255, 0.72);

  text-align: left;
}


/* ------------------------------------------------------------------
   ASSIGNMENT MAP
   ------------------------------------------------------------------ */

.assignment-map-section {
  padding:
    clamp(80px, 10vw, 155px)
    clamp(24px, 6vw, 100px);

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);

  background:
    radial-gradient(
      circle at 50% 14%,
      rgba(215, 173, 66, 0.095),
      transparent 30%
    ),
    #050505;
}

.assignment-map-heading {
  width: min(950px, 100%);

  margin-bottom: 4rem;
}

.assignment-map-heading h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 5.6vw, 6.5rem);
  font-weight: 400;

  line-height: 0.96;
  text-transform: uppercase;
}

.assignment-map-heading > p:last-child {
  width: min(100%, 65ch);

  color: rgba(255, 255, 255, 0.76);

  text-align: left;
}

.assignment-map {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr
    auto
    1fr
    auto
    1fr
    auto
    1fr;

  align-items: center;

  gap: 0.8rem;
}

.assignment-point {
  min-height: 270px;

  padding:
    1.7rem;

  border:
    1px solid rgba(215, 173, 66, 0.3);

  background:
    linear-gradient(
      150deg,
      rgba(215, 173, 66, 0.08),
      transparent 40%
    ),
    #0a0a0a;
}

.assignment-point span {
  color:
    rgba(255, 217, 113, 0.31);

  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
}

.assignment-point h3 {
  margin:
    1.3rem
    0
    0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;

  text-transform: uppercase;
}

.assignment-point p {
  color:
    rgba(255, 255, 255, 0.72);
}

.assignment-connector {
  width: 36px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(215, 173, 66, 0.3),
      var(--gold-light),
      rgba(215, 173, 66, 0.3)
    );
}


/* ------------------------------------------------------------------
   MINISTRY IMPACT
   ------------------------------------------------------------------ */

.ministry-impact-section {
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(215, 173, 66, 0.07),
      transparent 27%
    ),
    #080808;
}

.ministry-fruit-list {
  margin:
    1.5rem
    0
    0;

  padding: 0;

  list-style: none;
}

.ministry-fruit-list li {
  position: relative;

  padding:
    0.8rem
    0
    0.8rem
    2rem;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.16);

  color:
    rgba(255, 255, 255, 0.82);
}

.ministry-fruit-list li::before {
  content: "✦";

  position: absolute;

  left: 0;

  color: var(--gold-light);
}


/* ------------------------------------------------------------------
   SCRIPTURE MANDATE
   ------------------------------------------------------------------ */

.ministry-scripture-section {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  padding:
    clamp(90px, 11vw, 175px)
    clamp(24px, 9vw, 155px);

  border-block:
    1px solid rgba(215, 173, 66, 0.3);

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(215, 173, 66, 0.14),
      transparent 44%
    ),
    #040404;
}

.ministry-scripture-glow {
  position: absolute;
  z-index: -1;

  left: 50%;
  top: -45%;

  width: 230px;
  height: 180%;

  transform:
    translateX(-50%)
    rotate(7deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 217, 113, 0.17),
      transparent
    );

  filter: blur(22px);
}

.ministry-scripture-content {
  width: min(1050px, 100%);

  margin-inline: auto;
}

.ministry-scripture-content blockquote {
  width: min(900px, 100%);

  margin:
    0.5rem
    auto
    1.5rem;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.6vw, 5.2rem);
  font-weight: 400;

  line-height: 1.14;
  text-align: left;
}

.ministry-scripture-content > p:last-child {
  width: min(900px, 100%);

  margin-inline: auto;

  color: rgba(255, 255, 255, 0.68);

  font-size: 0.74rem;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   FINAL MINISTRY CTA
   ------------------------------------------------------------------ */

.ministry-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 3rem;

  padding:
    clamp(70px, 8vw, 120px)
    clamp(24px, 7vw, 120px)
    clamp(110px, 12vw, 165px);

  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(215, 173, 66, 0.12),
      transparent 31%
    ),
    #050505;
}

.ministry-final-cta h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.4vw, 6rem);
  font-weight: 400;

  line-height: 0.96;
  text-transform: uppercase;
}

.ministry-final-cta p {
  width: min(100%, 62ch);

  color: rgba(255, 255, 255, 0.74);

  text-align: left;
}

.ministry-final-actions {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 1rem;
}

.ministry-text-link {
  display: inline-flex;
  align-items: center;

  gap: 1rem;

  color: var(--gold-pale);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   MINISTRY PAGE RESPONSIVE DESIGN
   ------------------------------------------------------------------ */

@media (max-width: 1180px) {

  .living-assignment-section {
    grid-template-columns: 1fr;
  }

  .ministry-area-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .assignment-map {
    grid-template-columns: 1fr;
  }

  .assignment-connector {
    width: 1px;
    height: 34px;

    margin-inline: auto;

    background:
      linear-gradient(
        180deg,
        rgba(215, 173, 66, 0.3),
        var(--gold-light),
        rgba(215, 173, 66, 0.3)
      );
  }

}

@media (max-width: 820px) {

  .ministry-area-grid {
    grid-template-columns: 1fr;
  }

  .prayer-journey {
    grid-template-columns: 1fr;
  }

  .prayer-journey-path {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    border-right: 0;

    border-bottom:
      1px solid rgba(215, 173, 66, 0.22);
  }

  .prayer-journey-path button {
    text-align: center;
  }

  .prayer-journey-path button:hover,
  .prayer-journey-path button:focus-visible,
  .prayer-journey-path button.is-active {
    padding-left: 1rem;
  }

  .ministry-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

}

@media (max-width: 540px) {

  .prayer-journey-path {
    grid-template-columns: 1fr;
  }

}

/* MINISTRY PAGE EXPERIENCE — END */


/* ==================================================================
   THE ROAD OF THE ASSIGNMENT — START

   A cinematic editorial journey using personal everyday photographs.
   Every paragraph block is centered while its text remains left-aligned.
   ================================================================== */

.assignment-road-section {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  padding:
    clamp(85px, 10vw, 165px)
    clamp(20px, 6vw, 105px);

  border-block:
    1px solid rgba(215, 173, 66, 0.22);

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(215, 173, 66, 0.09),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #050505,
      #090909 48%,
      #040404
    );
}


/* Subtle vertical journey line */

.assignment-road-section::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 330px;
  bottom: 210px;
  left: 50%;

  width: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255, 217, 113, 0.62) 10%,
      rgba(215, 173, 66, 0.25) 90%,
      transparent
    );
}


/* --------------------------------------------------------------
   SECTION INTRODUCTION
   -------------------------------------------------------------- */

.assignment-road-intro {
  width: min(920px, 100%);

  margin:
    0
    auto
    clamp(70px, 9vw, 130px);
}

.assignment-road-intro h2 {
  width: min(820px, 100%);

  margin:
    0
    auto;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 5.8vw, 6.6rem);
  font-weight: 400;

  line-height: 0.96;
  text-align: left;
  text-transform: uppercase;

  text-wrap: balance;
}

.assignment-road-intro > p {
  width: min(100%, 64ch);

  margin:
    1.4rem
    auto
    0;

  color: rgba(255, 255, 255, 0.77);

  font-size: 1.06rem;
  line-height: 1.68;

  text-align: left;
  text-wrap: pretty;
}


/* Keep eyebrow aligned with the same editorial column */

.assignment-road-intro .eyebrow {
  width: min(820px, 100%);

  margin:
    0
    auto
    0.7rem;

  text-align: left;
}


/* --------------------------------------------------------------
   VISUAL JOURNEY
   -------------------------------------------------------------- */

.assignment-road {
  width: min(1560px, 100%);

  margin-inline: auto;

  display: flex;
  flex-direction: column;

  gap: clamp(90px, 12vw, 190px);
}


/* Shared chapter layout */

.assignment-road-chapter {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(350px, 0.95fr);

  gap: clamp(45px, 8vw, 130px);

  align-items: center;
}


/* Alternate image and copy placement */

.assignment-road-right .assignment-road-image {
  order: 2;
}

.assignment-road-right .assignment-road-copy {
  order: 1;
}


/* --------------------------------------------------------------
   IMAGE PRESENTATION
   -------------------------------------------------------------- */

.assignment-road-image {
  position: relative;

  min-height: clamp(520px, 61vw, 820px);

  overflow: hidden;

  border:
    1px solid rgba(215, 173, 66, 0.34);

  background: #050505;

  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.58);
}

.assignment-road-image::before {
  content: "";

  position: absolute;
  z-index: 2;

  inset: 15px;

  border:
    1px solid rgba(255, 217, 113, 0.37);

  pointer-events: none;
}

.assignment-road-image::after {
  content: "";

  position: absolute;
  z-index: 1;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04),
      transparent 52%,
      rgba(0, 0, 0, 0.47)
    );
}

.assignment-road-image img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  object-fit: cover;

  filter:
    saturate(0.9)
    contrast(1.06);

  transform: scale(1.01);

  transition:
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.65s ease;
}

.assignment-road-chapter:hover .assignment-road-image img {
  transform: scale(1.055);

  filter:
    saturate(1)
    contrast(1.09);
}


/* Individual image positions */

.assignment-road-chapter:nth-child(1) img {
  object-position: center 52%;
}

.assignment-road-chapter:nth-child(2) img {
  object-position: center center;
}

.assignment-road-chapter:nth-child(3) img {
  object-position: center 35%;
}

.assignment-road-chapter:nth-child(4) img {
  object-position: center 48%;
}


/* Large chapter index */

.assignment-road-index {
  position: absolute;
  z-index: 4;

  right: clamp(20px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 38px);

  color: rgba(255, 224, 139, 0.84);

  font-family: var(--serif);
  font-size: clamp(3.3rem, 7vw, 8rem);
  line-height: 0.8;

  text-shadow:
    0 6px 25px rgba(0, 0, 0, 0.84);
}


/* --------------------------------------------------------------
   CHAPTER COPY
   -------------------------------------------------------------- */

.assignment-road-copy {
  width: min(590px, 100%);

  margin-inline: auto;
}

.assignment-road-command {
  margin: 0 0 0.75rem !important;

  color: var(--gold-pale) !important;

  font-size: 0.7rem !important;
  font-weight: 700;

  letter-spacing: 0.22em;
  text-align: left;
  text-transform: uppercase;
}

.assignment-road-copy h3 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.7vw, 5.5rem);
  font-weight: 400;

  line-height: 0.98;
  text-align: left;
  text-transform: uppercase;

  text-wrap: balance;
}

.assignment-road-copy > p:not(.assignment-road-command) {
  width: min(100%, 58ch);

  margin:
    1.4rem
    auto
    0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 1.04rem;
  line-height: 1.72;

  text-align: left;
  text-wrap: pretty;
}

.assignment-road-copy blockquote {
  width: min(100%, 56ch);

  margin:
    2rem
    auto
    0;

  padding:
    1.4rem
    0
    0
    1.5rem;

  border-top:
    1px solid rgba(215, 173, 66, 0.33);

  border-left:
    2px solid var(--gold-light);

  color: var(--gold-pale);

  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.48;

  text-align: left;
  text-wrap: pretty;
}

.assignment-road-copy > strong {
  display: block;

  width: min(100%, 56ch);

  margin:
    0.9rem
    auto
    0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.67rem;

  letter-spacing: 0.17em;
  text-align: left;
  text-transform: uppercase;
}


/* --------------------------------------------------------------
   CENTER JOURNEY NODES
   -------------------------------------------------------------- */

.assignment-road-chapter::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 13px;
  height: 13px;

  transform:
    translate(-50%, -50%)
    rotate(45deg);

  border:
    1px solid var(--gold-light);

  background: #070707;

  box-shadow:
    0 0 22px rgba(255, 217, 113, 0.65);
}


/* --------------------------------------------------------------
   CLOSING STATEMENT
   -------------------------------------------------------------- */

.assignment-road-closing {
  width: min(1020px, 100%);

  margin:
    clamp(100px, 13vw, 200px)
    auto
    0;

  display: grid;

  grid-template-columns:
    120px
    minmax(0, 1fr);

  gap: clamp(25px, 5vw, 70px);

  align-items: start;
}

.assignment-road-closing-line {
  display: block;

  width: 100%;
  height: 1px;

  margin-top: 1.2rem;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold-light)
    );
}

.assignment-road-closing h3 {
  width: min(760px, 100%);

  margin:
    0
    auto;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.7rem, 5vw, 5.8rem);
  font-weight: 400;

  line-height: 0.96;
  text-align: left;
  text-transform: uppercase;

  text-wrap: balance;
}

.assignment-road-closing div > p:last-child {
  width: min(100%, 62ch);

  margin:
    1.2rem
    auto
    0;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.7;

  text-align: left;
  text-wrap: pretty;
}

.assignment-road-closing .eyebrow {
  width: min(760px, 100%);

  margin:
    0
    auto
    0.7rem;

  text-align: left;
}


/* --------------------------------------------------------------
   TABLET
   -------------------------------------------------------------- */

@media (max-width: 1050px) {

  .assignment-road-section::before,
  .assignment-road-chapter::after {
    display: none;
  }

  .assignment-road-chapter {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .assignment-road-right .assignment-road-image,
  .assignment-road-right .assignment-road-copy {
    order: initial;
  }

  .assignment-road-image {
    min-height: 620px;
  }

  .assignment-road-copy {
    width: min(720px, 100%);
  }

}


/* --------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------- */

@media (max-width: 680px) {

  .assignment-road-section {
    padding-inline: 16px;
  }

  .assignment-road {
    gap: 90px;
  }

  .assignment-road-image {
    min-height: 520px;
  }

  .assignment-road-copy {
    padding-inline: 5px;
  }

  .assignment-road-closing {
    grid-template-columns: 1fr;
  }

  .assignment-road-closing-line {
    width: 80px;
  }

}

/* THE ROAD OF THE ASSIGNMENT — END */



/* MINISTRY MASTHEAD — END */


/* ==================================================================
   MESSAGES PAGE EXPERIENCE — START
   Adds cinematic storytelling, interactive response tools,
   a message library and strong spiritual visual hierarchy.
   ================================================================== */

.messages-page {
  background:
    radial-gradient(
      circle at 16% 14%,
      rgba(215, 173, 66, 0.07),
      transparent 29%
    ),
    radial-gradient(
      circle at 82% 46%,
      rgba(66, 100, 78, 0.08),
      transparent 32%
    ),
    #050505;
}


/* ------------------------------------------------------------------
   MESSAGES HERO
   ------------------------------------------------------------------ */

.messages-hero {
  position: relative;
}

.messages-hero::before {
  content: "";

  position: absolute;
  z-index: 3;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 74% 30%,
      rgba(255, 217, 113, 0.13),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(0, 0, 0, 0.45)
    );
}

.messages-hero-lead {
  color: var(--gold-light) !important;

  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 2rem) !important;

  line-height: 1.35;
}


/* ------------------------------------------------------------------
   PROPHETIC MANDATE
   ------------------------------------------------------------------ */

.message-mandate {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 0.85fr);

  gap: clamp(40px, 8vw, 130px);

  align-items: center;

  padding:
    clamp(75px, 9vw, 145px)
    clamp(24px, 7vw, 120px);

  border-bottom:
    1px solid rgba(215, 173, 66, 0.2);

  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(215, 173, 66, 0.12),
      transparent 31%
    ),
    #080808;
}

.message-mandate-copy h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3rem, 5.4vw, 6.2rem);
  font-weight: 400;

  line-height: 0.96;
  text-transform: uppercase;
}

.message-mandate-copy p {
  max-width: 62ch;

  color: rgba(255, 255, 255, 0.8);

  font-size: 1.06rem;
}

.message-mandate-statement {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 0.4rem;

  padding:
    clamp(34px, 5vw, 68px);

  overflow: hidden;

  border:
    1px solid rgba(215, 173, 66, 0.52);

  background:
    linear-gradient(
      145deg,
      rgba(215, 173, 66, 0.13),
      transparent 37%
    ),
    #060606;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.48);
}

.message-mandate-statement::after {
  content: "";

  position: absolute;

  top: -70px;
  right: -70px;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.14);

  filter: blur(45px);
}

.message-mandate-statement > span {
  margin-bottom: 1.4rem;

  color:
    rgba(255, 217, 113, 0.32);

  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
}

.message-mandate-statement strong {
  position: relative;
  z-index: 2;

  padding: 0.65rem 0;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.19);

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.6vw, 2.8rem);
  font-weight: 400;

  line-height: 1.15;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   FEATURED MESSAGE
   ------------------------------------------------------------------ */

.featured-message-section {
  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(215, 173, 66, 0.07),
      transparent 26%
    ),
    #050505;
}

.featured-message-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.7fr);

  gap: clamp(35px, 6vw, 100px);

  align-items: end;

  margin-bottom: 3rem;
}

.featured-message-heading > p {
  max-width: 52ch;

  color: rgba(255, 255, 255, 0.72);
}

.featured-message-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(320px, 0.65fr);

  border:
    1px solid rgba(215, 173, 66, 0.35);

  background: #070707;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.58);
}

.featured-video-shell {
  min-height: 620px;

  background: #000;
}

.featured-video-shell iframe {
  width: 100%;
  height: 100%;
  min-height: 620px;

  border: 0;
}

.message-response-card {
  padding:
    clamp(30px, 4vw, 62px);

  border-left:
    1px solid rgba(215, 173, 66, 0.28);

  background:
    linear-gradient(
      155deg,
      rgba(215, 173, 66, 0.1),
      transparent 40%
    ),
    #0b0b0b;
}

.message-response-card h3 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.8rem);
  font-weight: 400;

  line-height: 1;
  text-transform: uppercase;
}

.message-response-card ol {
  margin: 1.6rem 0 0;
  padding-left: 1.25rem;
}

.message-response-card li {
  padding:
    0.7rem
    0
    0.7rem
    0.4rem;

  border-bottom:
    1px solid rgba(215, 173, 66, 0.14);

  color: rgba(255, 255, 255, 0.8);
}

.message-response-scripture {
  margin-top: 2rem;
  padding-top: 1.5rem;

  border-top:
    1px solid rgba(215, 173, 66, 0.3);

  color: var(--gold-pale);

  font-family: var(--serif);
  font-size: 1.25rem;
}

.message-response-scripture strong {
  display: block;

  margin-top: 0.6rem;

  color: rgba(255, 255, 255, 0.64);

  font-family: var(--sans);
  font-size: 0.7rem;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   SHARED MESSAGES SECTION INTRO
   ------------------------------------------------------------------ */

.messages-section-intro {
  width: min(910px, 100%);
  margin-bottom: 3rem;
}

.messages-section-intro > p:last-child {
  max-width: 63ch;

  color: rgba(255, 255, 255, 0.76);
}


/* ------------------------------------------------------------------
   WHAT JESUS EXPECTS
   ------------------------------------------------------------------ */

.jesus-expects-section {
  background:
    linear-gradient(
      135deg,
      rgba(215, 173, 66, 0.07),
      transparent 43%
    ),
    #090909 !important;
}

.expectation-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1.35rem;
}

.expectation-card {
  position: relative;

  min-height: 310px;

  padding:
    clamp(27px, 3vw, 42px);

  overflow: hidden;

  border:
    1px solid rgba(215, 173, 66, 0.3);

  background:
    linear-gradient(
      150deg,
      rgba(215, 173, 66, 0.075),
      transparent 40%
    ),
    #0b0b0b;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.expectation-card:hover {
  transform: translateY(-8px);

  border-color:
    rgba(255, 217, 113, 0.75);

  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5);
}

.expectation-card > span {
  display: block;

  margin-bottom: 2.2rem;

  color:
    rgba(255, 217, 113, 0.28);

  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: 1;
}

.expectation-card h3 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;

  text-transform: uppercase;
}

.expectation-card p {
  color:
    rgba(255, 255, 255, 0.76);
}


/* ------------------------------------------------------------------
   ENEMY TERRITORY RECLAIMED
   ------------------------------------------------------------------ */

.territory-section {
  position: relative;
  isolation: isolate;

  min-height: 760px;

  display: grid;
  align-items: center;

  overflow: hidden;

  padding:
    clamp(80px, 10vw, 155px)
    clamp(24px, 7vw, 120px);

  border-block:
    1px solid rgba(215, 173, 66, 0.25);

  background:
    #030303;
}

.territory-background {
  position: absolute;
  z-index: -2;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.98),
      rgba(0, 0, 0, 0.57)
    ),
    url("../images/messages-card.jpg")
    center 25% / cover no-repeat;

  filter:
    saturate(0.65)
    contrast(1.08);
}

.territory-section::after {
  content: "";

  position: absolute;
  z-index: -1;
  inset: 0;

  background:
    radial-gradient(
      circle at 70% 28%,
      rgba(255, 217, 113, 0.14),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.75)
    );
}

.territory-content {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(440px, 1.2fr);

  gap: clamp(50px, 8vw, 140px);

  align-items: center;
}

.territory-heading h2 {
  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(3.2rem, 6vw, 7rem);
  font-weight: 400;

  line-height: 0.92;
  text-transform: uppercase;
}

.territory-heading p:last-child {
  max-width: 56ch;

  color:
    rgba(255, 255, 255, 0.82);
}

.territory-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1rem;
}

.territory-item {
  min-height: 175px;

  padding:
    1.7rem;

  border:
    1px solid rgba(255, 217, 113, 0.27);

  background:
    rgba(0, 0, 0, 0.68);

  backdrop-filter:
    blur(10px);

  transition:
    transform 0.28s ease,
    background 0.28s ease;
}

.territory-item:hover {
  transform:
    translateY(-5px);

  background:
    rgba(20, 16, 7, 0.84);
}

.territory-item span {
  color: var(--gold-light);

  font-family: var(--serif);
  font-size: 1.8rem;

  text-transform: uppercase;
}

.territory-item p {
  margin-bottom: 0;

  color:
    rgba(255, 255, 255, 0.76);
}


/* ------------------------------------------------------------------
   SPIRITUAL RESPONSE ROOM
   ------------------------------------------------------------------ */

.response-room-section {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(215, 173, 66, 0.08),
      transparent 28%
    ),
    #050505;
}

.response-room-intro {
  width: min(900px, 100%);
  margin-bottom: 2.5rem;
}

.response-room-intro > p:last-child {
  max-width: 64ch;

  color:
    rgba(255, 255, 255, 0.76);
}

.response-room {
  display: grid;

  grid-template-columns:
    minmax(250px, 0.55fr)
    minmax(0, 1.45fr);

  border:
    1px solid rgba(215, 173, 66, 0.38);

  background:
    #080808;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5);
}

.response-room-options {
  display: flex;
  flex-direction: column;

  padding:
    clamp(20px, 3vw, 38px);

  border-right:
    1px solid rgba(215, 173, 66, 0.22);

  background:
    linear-gradient(
      145deg,
      rgba(215, 173, 66, 0.07),
      transparent 40%
    ),
    #0b0b0b;
}

.response-room-options button {
  width: 100%;

  padding:
    1.1rem
    1rem;

  border: 0;
  border-bottom:
    1px solid rgba(215, 173, 66, 0.17);

  color:
    rgba(255, 255, 255, 0.76);

  background:
    transparent;

  font-family: var(--serif);
  font-size: 1.3rem;

  text-align: left;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    padding-left 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}

.response-room-options button:hover,
.response-room-options button:focus-visible,
.response-room-options button.is-active {
  padding-left: 1.5rem;

  color: #000;

  background:
    var(--gold-light);

  outline: none;
}

.response-room-result {
  position: relative;

  min-height: 430px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(35px, 6vw, 90px);

  overflow: hidden;

  transition: 0.6s ease;
}


.response-room-result::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(215, 173, 66, 0.08),
    transparent
  );
  transform: translateX(-100%);
  pointer-events: none;
}

.response-room-result.is-revealing::before,
.response-room-result:hover::before {
  animation: responseLightSweep 2s linear;
}

@keyframes responseLightSweep {
  to {
    transform: translateX(100%);
  }
}

.response-room-result::after {
  content: "";

  position: absolute;

  top: -130px;
  right: -100px;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.11);

  filter:
    blur(65px);
}

.response-label {
  position: relative;
  z-index: 2;

  margin: 0 0 0.7rem;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 0.67rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.response-room-result h3 {
  position: relative;
  z-index: 2;

  margin: 0;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.6vw, 5.4rem);
  font-weight: 400;

  line-height: 0.98;
  text-transform: uppercase;
}

.response-room-result blockquote {
  position: relative;
  z-index: 2;

  margin:
    1.5rem
    0
    0.8rem;

  color:
    rgba(255, 255, 255, 0.88);

  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);

  line-height: 1.4;
}

.response-room-result strong {
  position: relative;
  z-index: 2;

  color: var(--gold-pale);

  font-size: 0.75rem;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.response-room-result > p:last-child {
  position: relative;
  z-index: 2;

  max-width: 66ch;

  color:
    rgba(255, 255, 255, 0.7);
}


/* ------------------------------------------------------------------
   MESSAGE LIBRARY
   ------------------------------------------------------------------ */

.message-library-section {
  background:
    linear-gradient(
      140deg,
      rgba(215, 173, 66, 0.06),
      transparent 42%
    ),
    #090909 !important;
}

.message-filter {
  display: flex;
  flex-wrap: wrap;

  gap: 0.7rem;

  margin-bottom: 2.2rem;
}

.message-filter button {
  padding:
    0.75rem
    1.1rem;

  border:
    1px solid rgba(215, 173, 66, 0.3);

  color:
    var(--gold-pale);

  background:
    transparent;

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.message-filter button:hover,
.message-filter button:focus-visible,
.message-filter button.is-active {
  color: #000;

  border-color:
    var(--gold-light);

  background:
    var(--gold-light);

  outline: none;
}

.message-library-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1.35rem;
}

.library-message {
  position: relative;

  min-height: 360px;

  display: flex;
  flex-direction: column;

  padding:
    clamp(26px, 3vw, 40px);

  border:
    1px solid rgba(215, 173, 66, 0.28);

  background:
    linear-gradient(
      150deg,
      rgba(215, 173, 66, 0.075),
      transparent 38%
    ),
    #0a0a0a;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    border-color 0.3s ease;
}

.library-message:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(255, 217, 113, 0.7);
}

.library-message.is-hidden {
  display: none;
}

.library-message-number {
  display: block;

  margin-bottom: 2rem;

  color:
    rgba(255, 217, 113, 0.28);

  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
}

.library-message small {
  color:
    rgba(255, 255, 255, 0.55);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.library-message h3 {
  margin:
    0.45rem
    0
    0;

  color:
    var(--gold-light);

  font-family:
    var(--serif);

  font-size:
    clamp(1.8rem, 2.8vw, 2.9rem);

  font-weight: 400;

  line-height: 1.05;
  text-transform: uppercase;
}

.library-message p {
  color:
    rgba(255, 255, 255, 0.73);
}

.library-message a {
  margin-top: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 1rem;

  border-top:
    1px solid rgba(215, 173, 66, 0.2);

  color:
    var(--gold-pale);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   PROPHETIC DECLARATION
   ------------------------------------------------------------------ */

.message-declaration-section {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  padding:
    clamp(90px, 11vw, 175px)
    clamp(24px, 9vw, 155px);

  border-block:
    1px solid rgba(215, 173, 66, 0.3);

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(215, 173, 66, 0.14),
      transparent 44%
    ),
    #040404;
}

.message-declaration-light {
  position: absolute;
  z-index: -1;

  left: 50%;
  top: -45%;

  width: 220px;
  height: 180%;

  transform:
    translateX(-50%)
    rotate(7deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 217, 113, 0.17),
      transparent
    );

  filter:
    blur(20px);
}

.message-declaration-content {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.message-declaration-content blockquote {
  width: min(900px, 100%);

  margin:
    0.5rem
    auto
    1.5rem;

  color: var(--gold-light);

  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.7vw, 5.4rem);
  font-weight: 400;

  line-height: 1.13;

  text-align: left;
}

.message-declaration-content > p:last-child {
  width: min(780px, 100%);

  margin:
    0
    auto;

  color: rgba(255, 255, 255, 0.74);

  text-align: left;
}


/* ------------------------------------------------------------------
   FINAL RESPONSE CTA
   ------------------------------------------------------------------ */

.message-final-response {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 3rem;

  padding:
    clamp(65px, 8vw, 115px)
    clamp(24px, 7vw, 120px)
    clamp(105px, 11vw, 155px);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(215, 173, 66, 0.11),
      transparent 31%
    ),
    #050505;
}

.message-final-response h2 {
  margin: 0;

  color:
    var(--gold-light);

  font-family:
    var(--serif);

  font-size:
    clamp(2.8rem, 5.4vw, 6rem);

  font-weight: 400;

  line-height: 0.96;
  text-transform: uppercase;
}

.message-final-response p {
  max-width: 58ch;

  color:
    rgba(255, 255, 255, 0.74);
}

.message-final-links {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 1rem;
}

.message-text-link {
  display: inline-flex;
  align-items: center;

  gap: 1rem;

  color:
    var(--gold-pale);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   MESSAGES PAGE RESPONSIVE DESIGN
   ------------------------------------------------------------------ */

@media (max-width: 1150px) {

  .message-mandate,
  .featured-message-heading,
  .featured-message-layout,
  .territory-content {
    grid-template-columns: 1fr;
  }

  .message-response-card {
    border-top:
      1px solid rgba(215, 173, 66, 0.28);

    border-left: 0;
  }

  .expectation-grid,
  .message-library-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .featured-video-shell,
  .featured-video-shell iframe {
    min-height: 520px;
  }

}

@media (max-width: 780px) {

  .expectation-grid,
  .message-library-grid,
  .territory-list {
    grid-template-columns: 1fr;
  }

  .response-room {
    grid-template-columns: 1fr;
  }

  .response-room-options {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    border-right: 0;
    border-bottom:
      1px solid rgba(215, 173, 66, 0.22);
  }

  .response-room-options button {
    text-align: center;
  }

  .response-room-options button:hover,
  .response-room-options button:focus-visible,
  .response-room-options button.is-active {
    padding-left: 1rem;
  }

  .message-final-response {
    align-items: flex-start;
    flex-direction: column;
  }

  .featured-video-shell,
  .featured-video-shell iframe {
    min-height: 340px;
  }

}

@media (max-width: 520px) {

  .response-room-options {
    grid-template-columns: 1fr;
  }

  .message-filter {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);
  }

  .message-filter button {
    width: 100%;
  }

}


/* ==================================================================
   THE WORD ROOM LIBRARY — START
   ================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.word-library-section {
  background:
    radial-gradient(
      circle at 83% 9%,
      rgba(215, 173, 66, 0.1),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      rgba(215, 173, 66, 0.055),
      transparent 43%
    ),
    #070707 !important;
}

.word-library-intro {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: clamp(40px, 7vw, 115px);
  align-items: end;
  margin-bottom: 2.8rem;
}

.word-library-intro > div:first-child > p:last-child {
  width: min(100%, 64ch);
  margin-left: 0;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.76);
  text-align: left;
  text-wrap: pretty;
}

.word-library-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1px;
  border: 1px solid rgba(215, 173, 66, 0.26);
  background: rgba(215, 173, 66, 0.18);
}

.word-library-stats div {
  min-width: 112px;
  padding: 1.25rem 1.4rem;
  background: #090909;
  text-align: left;
}

.word-library-stats strong,
.word-library-stats span {
  display: block;
}

.word-library-stats strong {
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
}

.word-library-stats span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.word-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.word-search {
  flex: 1;
  max-width: 560px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 1rem;
  border: 1px solid rgba(215, 173, 66, 0.28);
  background: #0b0b0b;
}

.word-search > span {
  color: var(--gold-light);
  font-size: 1.3rem;
}

.word-search input {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.word-search input:focus {
  box-shadow: none;
}

.word-library-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

.word-message-card {
  min-width: 0;
}

.word-message-card.is-hidden {
  display: none;
}

.word-message-open {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(215, 173, 66, 0.28);
  background: #090909;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.word-message-open:hover,
.word-message-open:focus-visible {
  transform: translateY(-9px);
  border-color: rgba(255, 217, 113, 0.82);
  box-shadow:
    0 35px 85px rgba(0, 0, 0, 0.62),
    0 0 28px rgba(215, 173, 66, 0.1);
  outline: none;
}

.word-message-visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}

.word-message-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.75s ease,
    filter 0.5s ease;
}

.word-message-open:hover .word-message-visual img {
  transform: scale(1.07);
  filter: brightness(1.05);
}

.word-message-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 46%,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 40%,
      rgba(0, 0, 0, 0.76) 100%
    );
}

.word-message-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 25px rgba(215, 173, 66, 0.24),
    inset 0 0 22px rgba(215, 173, 66, 0.08);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.word-message-open:hover .word-message-play {
  transform:
    translate(-50%, -50%)
    scale(1.1);
  background: var(--gold-light);
  color: #000;
}

.word-message-audio {
  font-size: 1.6rem;
}

.word-message-format,
.word-message-duration {
  position: absolute;
  bottom: 0.85rem;
  padding: 0.35rem 0.55rem;
  color: var(--gold-pale);
  background: rgba(0, 0, 0, 0.76);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.word-message-format {
  left: 0.85rem;
}

.word-message-duration {
  right: 0.85rem;
}

.word-message-copy {
  display: flex;
  min-height: 340px;
  flex-direction: column;
  padding: clamp(24px, 2.7vw, 38px);
}

.word-message-copy small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.word-message-copy > strong {
  margin-top: 0.6rem;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.85rem, 2.7vw, 2.9rem);
  font-weight: 400;
  line-height: 1.03;
  text-transform: uppercase;
  text-wrap: balance;
}

.word-message-scripture {
  margin-top: 0.85rem;
  color: var(--gold-pale);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.word-message-copy p {
  width: min(100%, 36ch);
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.73);
  line-height: 1.58;
  text-align: left;
  text-wrap: pretty;
}

.word-message-enter {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(215, 173, 66, 0.18);
  color: var(--gold-pale);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.word-library-empty {
  width: min(650px, 100%);
  margin: 3rem auto 0;
  color: rgba(255, 255, 255, 0.67);
  text-align: left;
}


/* ==================================================================
   THE WORD ROOM PLAYER — START
   ================================================================== */

body.word-room-open {
  overflow: hidden;
}

.word-room {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: none;
}

.word-room.is-open {
  display: block;
}

.word-room-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(215, 173, 66, 0.11),
      transparent 32%
    ),
    rgba(0, 0, 0, 0.93);
  backdrop-filter: blur(22px);
}

.word-room-shell {
  position: relative;
  z-index: 2;
  width: min(1760px, calc(100% - 34px));
  height: min(940px, calc(100vh - 34px));
  margin: 17px auto;
  overflow: hidden;
  border: 1px solid rgba(215, 173, 66, 0.42);
  background: #050505;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.85),
    0 0 70px rgba(215, 173, 66, 0.08);
}

.word-room-header {
  min-height: 80px;
  padding: 1rem 1.4rem 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(215, 173, 66, 0.22);
  background:
    linear-gradient(
      90deg,
      rgba(215, 173, 66, 0.08),
      transparent 38%
    ),
    #080808;
}

.word-room-header p,
.word-room-header span {
  margin: 0;
  display: block;
}

.word-room-header p {
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.4rem;
  text-transform: uppercase;
}

.word-room-header span {
  color: rgba(255, 255, 255, 0.49);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.word-room-close {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(215, 173, 66, 0.42);
  border-radius: 50%;
  color: var(--gold-light);
  background: transparent;
  font-size: 1.7rem;
  cursor: pointer;
}

.word-room-layout {
  height: calc(100% - 80px);
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(330px, 0.55fr);
}

.word-room-player-column {
  overflow-y: auto;
  padding: clamp(18px, 2.4vw, 38px);
}

.word-room-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(215, 173, 66, 0.3);
  background: #000;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65);
}

.word-room-media video,
.word-room-youtube,
.word-room-youtube iframe {
  width: 100%;
  height: 100%;
}

.word-room-youtube iframe {
  border: 0;
}

.word-room-audio-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 430px;
  overflow: hidden;
}

.word-room-audio-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    brightness(0.5)
    saturate(0.75);
}

.word-room-audio-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(215, 173, 66, 0.17),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28),
      rgba(0, 0, 0, 0.92)
    );
}

.word-room-audio-stage > p {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 5rem);
  text-transform: uppercase;
}

.word-room-audio-stage audio {
  position: absolute;
  z-index: 4;
  left: 7%;
  right: 7%;
  bottom: 8%;
  width: 86%;
}

.word-room-audio-pulse {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 42%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
}

.word-room-audio-pulse span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 217, 113, 0.24);
  border-radius: 50%;
  animation: wordRoomPulse 3.8s ease-out infinite;
}

.word-room-audio-pulse span:nth-child(2) {
  animation-delay: 1.2s;
}

.word-room-audio-pulse span:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes wordRoomPulse {
  from {
    opacity: 0.8;
    transform: scale(0.35);
  }

  to {
    opacity: 0;
    transform: scale(1.45);
  }
}

.word-room-transport {
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.3vw, 16px);
  border: 1px solid rgba(215, 173, 66, 0.22);
  border-top: 0;
  background: #090909;
}

.word-room-transport button {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(215, 173, 66, 0.3);
  border-radius: 50%;
  color: var(--gold-pale);
  background: transparent;
  cursor: pointer;
}

.word-room-transport button small {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  font-size: 0.45rem;
}

.word-room-transport .word-room-primary-control {
  width: 62px;
  height: 62px;
  color: #000;
  border-color: var(--gold-light);
  background: var(--gold-light);
  font-size: 1.1rem;
  box-shadow: 0 0 26px rgba(215, 173, 66, 0.26);
}

.word-room-speed {
  margin: 0 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.word-room-speed span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.word-room-speed select {
  width: auto;
  margin: 0;
  padding: 0.5rem;
}

.word-room-now-playing {
  padding: clamp(25px, 3vw, 45px) 0;
}

.word-room-now-playing > p:first-child {
  margin: 0;
  color: var(--gold-pale);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.word-room-now-playing h2 {
  width: min(900px, 100%);
  margin: 0.5rem 0 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 5.8rem);
  font-weight: 400;
  line-height: 0.96;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}

.word-room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.2rem 0;
}

.word-room-meta span {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(215, 173, 66, 0.25);
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.word-room-now-playing > p:last-of-type {
  width: min(100%, 64ch);
  margin-left: 0;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.74);
  text-align: left;
  text-wrap: pretty;
}

.word-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.word-room-actions button {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(215, 173, 66, 0.28);
  color: var(--gold-pale);
  background: transparent;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.word-room-actions button.is-saved {
  color: #000;
  background: var(--gold-light);
}

.word-room-notes {
  padding: 1.4rem;
  border: 1px solid rgba(215, 173, 66, 0.26);
  background: #0a0a0a;
}

.word-room-notes label {
  margin: 0;
}

.word-room-notes p {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.67rem;
}

.word-room-queue {
  overflow: hidden;
  border-left: 1px solid rgba(215, 173, 66, 0.25);
  background: #080808;
}

.word-room-queue-heading {
  min-height: 100px;
  padding: 1.4rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(215, 173, 66, 0.2);
}

.word-room-queue-heading p,
.word-room-queue-heading h3 {
  margin: 0;
}

.word-room-queue-heading p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.word-room-queue-heading h3 {
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  text-transform: uppercase;
}

.word-room-queue-heading > span {
  color: var(--gold-pale);
  font-size: 0.61rem;
}

.word-room-queue-list {
  height: calc(100% - 100px);
  overflow-y: auto;
  padding: 0.8rem;
}

.word-queue-item {
  width: 100%;
  padding: 0.8rem;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.9rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.word-queue-item:hover,
.word-queue-item.is-active {
  border-color: rgba(215, 173, 66, 0.32);
  background: rgba(215, 173, 66, 0.06);
}

.word-queue-item img {
  width: 86px;
  height: 68px;
  object-fit: cover;
}

.word-queue-item small,
.word-queue-item strong,
.word-queue-item span {
  display: block;
}

.word-queue-item small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.word-queue-item strong {
  margin-top: 0.25rem;
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.16;
  text-transform: uppercase;
}

.word-queue-item span {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.56rem;
}


/* ==================================================================
   STEPS ORDERED — START
   ================================================================== */

.steps-ordered-section {
  display: grid;
  grid-template-columns:
    minmax(420px, 1fr)
    minmax(0, 1fr);
  min-height: 760px;
  border-block: 1px solid rgba(215, 173, 66, 0.25);
  background:
    radial-gradient(
      circle at 75% 22%,
      rgba(215, 173, 66, 0.1),
      transparent 28%
    ),
    #050505;
}

.steps-ordered-image {
  position: relative;
  min-height: 760px;
  overflow: hidden;
}

.steps-ordered-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  filter:
    saturate(0.76)
    contrast(1.1)
    brightness(0.74);
}

.steps-ordered-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 38%,
      #050505 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.62)
    );
}

.steps-ordered-number {
  position: absolute;
  left: clamp(20px, 4vw, 65px);
  bottom: clamp(25px, 5vw, 75px);
  color: rgba(255, 217, 113, 0.78);
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 11rem);
  line-height: 0.8;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}

.steps-ordered-copy {
  align-self: center;
  width: min(760px, 100%);
  padding:
    clamp(55px, 8vw, 125px)
    clamp(25px, 6vw, 95px);
}

.steps-ordered-copy h2 {
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(3rem, 5.4vw, 6.2rem);
  font-weight: 400;
  line-height: 0.95;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}

.steps-ordered-copy > p {
  width: min(100%, 60ch);
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.76);
  text-align: left;
  text-wrap: pretty;
}

.steps-ordered-lead {
  color: var(--gold-pale) !important;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.42;
}

.steps-ordered-sequence {
  margin: 2.1rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--gold-pale);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.steps-ordered-sequence i {
  flex: 1;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(215, 173, 66, 0.2),
      var(--gold-light),
      rgba(215, 173, 66, 0.2)
    );
}

.steps-ordered-copy blockquote {
  width: min(100%, 58ch);
  margin: 2rem auto 0;
  padding: 1.3rem 0 0 1.4rem;
  border-top: 1px solid rgba(215, 173, 66, 0.28);
  border-left: 2px solid var(--gold-light);
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
}

.steps-ordered-copy > strong {
  display: block;
  width: min(100%, 58ch);
  margin: 0.9rem auto 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}


/* ==================================================================
   RESPONSIVE WORD ROOM
   ================================================================== */

@media (max-width: 1150px) {

  .word-library-intro,
  .word-room-layout,
  .steps-ordered-section {
    grid-template-columns: 1fr;
  }

  .word-library-stats {
    width: max-content;
  }

  .word-library-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .word-room-shell {
    overflow-y: auto;
  }

  .word-room-layout {
    height: auto;
  }

  .word-room-queue {
    border-top: 1px solid rgba(215, 173, 66, 0.25);
    border-left: 0;
  }

  .word-room-queue-list {
    height: auto;
    max-height: 460px;
  }

  .steps-ordered-image {
    min-height: 660px;
  }

  .steps-ordered-image-overlay {
    background:
      linear-gradient(
        180deg,
        transparent 42%,
        #050505 100%
      );
  }

}

@media (max-width: 760px) {

  .word-library-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .word-search {
    max-width: none;
  }

  .word-library-grid {
    grid-template-columns: 1fr;
  }

  .word-library-stats {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .word-library-stats div {
    min-width: 0;
    padding: 1rem 0.75rem;
  }

  .word-room-shell {
    width: 100%;
    height: 100vh;
    margin: 0;
    border: 0;
  }

  .word-room-transport {
    flex-wrap: wrap;
  }

  .word-room-speed {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
  }

  .steps-ordered-image {
    min-height: 540px;
  }

  .steps-ordered-sequence {
    align-items: flex-start;
    flex-direction: column;
  }

  .steps-ordered-sequence i {
    width: 1px;
    height: 22px;
    flex: none;
    margin-left: 0.25rem;
    background:
      linear-gradient(
        180deg,
        rgba(215, 173, 66, 0.2),
        var(--gold-light),
        rgba(215, 173, 66, 0.2)
      );
  }

}



/* ------------------------------------------------------------------
   SPIRITUAL RESPONSE ROOM MOTION
   Scoped to avoid affecting unrelated elements that use .animate.
   ------------------------------------------------------------------ */

.response-icon {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
  color: var(--gold-light);
  font-size: 3rem;
  transition: 0.4s ease;
}

.response-room-result .animate {
  animation: responseFade 0.7s ease;
}

@keyframes responseFade {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.response-room-options button.active,
.response-room-options button.is-active {
  padding-left: 1.5rem;
  color: #000;
  background: var(--gold-light);
  box-shadow: 0 0 25px rgba(215, 173, 66, 0.45);
}



/* ==================================================================
   MESSAGES PAGE — NEW HOPE + ONE FIRE SECTIONS
   ADD THIS ENTIRE BLOCK AT THE VERY BOTTOM OF assets/css/site.css.
   Keeping it at the bottom ensures these page-specific rules have
   priority without changing the established site-wide design.
   ================================================================== */


/* ==================================================================
   WHEN SURVIVAL FEELS IMPOSSIBLE — START
   ================================================================== */

.survival-hope-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    clamp(90px, 10vw, 170px)
    clamp(18px, 5vw, 86px);
  border-block:
    1px solid rgba(215, 173, 66, 0.24);
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(89, 131, 146, 0.14),
      transparent 27%
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(215, 173, 66, 0.1),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #030506,
      #070707 48%,
      #020202
    );
}

.survival-hope-light {
  position: absolute;
  z-index: -1;
  top: -260px;
  left: 50%;
  width: min(1100px, 96vw);
  height: 620px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    rgba(174, 195, 176, 0.09);
  filter: blur(110px);
  pointer-events: none;
}

.survival-hope-heading {
  width: min(1040px, 100%);
  margin-inline: auto;
  text-align: center;
}

.survival-hope-heading .eyebrow,
.survival-hope-heading h2 {
  width: min(100%, 960px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.survival-hope-heading h2 {
  margin-top: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 6.6rem);
  font-weight: 400;
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
}

.survival-hope-heading > p:last-child {
  width: min(100%, 67ch);
  margin:
    1.3rem
    auto
    0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  text-align: left;
  text-wrap: pretty;
}

.survival-hope-journey {
  width: min(1740px, 100%);
  margin:
    clamp(55px, 7vw, 105px)
    auto
    0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 38px);
  align-items: stretch;
}

.survival-hope-panel {
  min-width: 0;
}

.survival-hope-panel figure {
  position: relative;
  min-height: clamp(760px, 92vh, 1120px);
  margin: 0;
  overflow: hidden;
  border:
    1px solid rgba(215, 173, 66, 0.35);
  background: #020202;
  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.68);
}

.survival-hope-panel figure::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 14px;
  border:
    1px solid rgba(255, 222, 137, 0.28);
  pointer-events: none;
}

.survival-hope-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  transform: none;
}

.survival-hope-panel-low img {
  object-position: center 48%;
}

.survival-hope-panel-direction img {
  object-position: center 50%;
}

.survival-hope-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.12) 48%,
      rgba(0, 0, 0, 0.88) 100%
    );
  pointer-events: none;
}

.survival-hope-panel figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 62px);
  right: clamp(24px, 4vw, 62px);
  bottom: clamp(28px, 4vw, 64px);
  padding:
    clamp(24px, 3.4vw, 48px);
  border:
    1px solid rgba(255, 217, 113, 0.34);
  background:
    linear-gradient(
      145deg,
      rgba(5, 5, 5, 0.82),
      rgba(5, 5, 5, 0.56)
    );
  -webkit-backdrop-filter:
    blur(14px)
    saturate(115%);
  backdrop-filter:
    blur(14px)
    saturate(115%);
  box-shadow:
    0 26px 74px rgba(0, 0, 0, 0.5);
}

.survival-hope-panel figcaption > span {
  display: block;
  color: rgba(255, 217, 113, 0.36);
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
}

.survival-hope-panel figcaption .eyebrow,
.survival-hope-panel figcaption h3,
.survival-hope-panel figcaption > p,
.survival-hope-panel figcaption blockquote,
.survival-hope-panel figcaption strong {
  width: min(100%, 58ch);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.survival-hope-panel figcaption h3 {
  margin-top: 0.45rem;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 4.2rem);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

.survival-hope-panel figcaption > p {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.68;
  text-wrap: pretty;
}

.survival-hope-panel figcaption blockquote {
  margin:
    1.35rem
    0
    0;
  padding:
    1.1rem
    0
    0
    1.2rem;
  border-top:
    1px solid rgba(255, 217, 113, 0.42);
  border-left:
    2px solid var(--gold-light);
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.6vw, 1.65rem);
  line-height: 1.48;
  text-wrap: pretty;
}

.survival-hope-panel figcaption strong {
  display: block;
  margin-top: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.survival-hope-passage {
  width: clamp(52px, 5vw, 82px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.survival-hope-passage span {
  width: 1px;
  flex: 1;
  min-height: 100px;
  background:
    linear-gradient(
      transparent,
      var(--gold-light),
      transparent
    );
}

.survival-hope-passage strong {
  color: var(--gold-light);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.survival-hope-declaration {
  width: min(1160px, 100%);
  margin:
    clamp(42px, 6vw, 82px)
    auto
    0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding:
    clamp(24px, 3.5vw, 44px);
  border:
    1px solid rgba(215, 173, 66, 0.3);
  background:
    rgba(255, 255, 255, 0.018);
}

.survival-hope-declaration span {
  color: var(--gold-light);
  font-size: 1.35rem;
}

.survival-hope-declaration p {
  width: min(100%, 74ch);
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}


/* ==================================================================
   ONE FIRE, ONE SOURCE — START
   ================================================================== */

.one-fire-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    clamp(90px, 10vw, 170px)
    clamp(18px, 5vw, 90px);
  border-block:
    1px solid rgba(226, 141, 41, 0.32);
  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(255, 91, 0, 0.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #050201,
      #0a0502 46%,
      #020202
    );
}

.one-fire-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  bottom: -260px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background:
    rgba(255, 91, 0, 0.13);
  filter: blur(100px);
  pointer-events: none;
}

.one-fire-shell {
  width: min(1700px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    minmax(420px, 0.96fr)
    minmax(520px, 1.04fr);
  gap: clamp(42px, 7vw, 118px);
  align-items: center;
}

.one-fire-visual {
  position: relative;
  min-height: clamp(660px, 80vh, 960px);
  margin: 0;
  overflow: hidden;
  border:
    1px solid rgba(255, 164, 72, 0.5);
  background: #030100;
  box-shadow:
    0 45px 120px rgba(0, 0, 0, 0.72),
    0 0 48px rgba(255, 91, 0, 0.1);
}

.one-fire-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 14px;
  border:
    1px solid rgba(255, 205, 132, 0.32);
  pointer-events: none;
}

.one-fire-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.one-fire-image-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.65)
    );
  pointer-events: none;
}

.one-fire-visual figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 3vw, 46px);
  right: clamp(22px, 3vw, 46px);
  bottom: clamp(24px, 3vw, 48px);
  padding:
    1rem
    1.2rem;
  border:
    1px solid rgba(255, 190, 103, 0.44);
  color: var(--gold-light);
  background:
    rgba(7, 3, 1, 0.68);
  -webkit-backdrop-filter:
    blur(12px);
  backdrop-filter:
    blur(12px);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  text-align: center;
  text-transform: uppercase;
}

.one-fire-copy {
  width: min(760px, 100%);
  margin-inline: auto;
}

.one-fire-copy .eyebrow,
.one-fire-copy h2 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.one-fire-copy h2 {
  margin-top: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(3rem, 5.2vw, 6.4rem);
  font-weight: 400;
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
}

.one-fire-copy > p {
  width: min(100%, 66ch);
  margin:
    1.05rem
    auto
    0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.74;
  text-align: left;
  text-wrap: pretty;
}

.one-fire-copy .one-fire-lead {
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: clamp(1.28rem, 1.8vw, 1.85rem);
  line-height: 1.5;
}

.one-fire-declarations {
  width: 100%;
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.one-fire-declarations article {
  min-width: 0;
  min-height: 220px;
  padding:
    1.35rem;
  border:
    1px solid rgba(255, 164, 72, 0.28);
  background:
    linear-gradient(
      145deg,
      rgba(255, 91, 0, 0.07),
      transparent 40%
    ),
    rgba(255, 255, 255, 0.015);
}

.one-fire-declarations article > span {
  color: rgba(255, 172, 84, 0.38);
  font-family: var(--serif);
  font-size: 2.2rem;
}

.one-fire-declarations h3 {
  margin:
    0.85rem
    0
    0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
}

.one-fire-declarations p {
  width: 100%;
  margin:
    0.65rem
    0
    0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: left;
  text-wrap: pretty;
}

.one-fire-scripture {
  width: min(100%, 66ch);
  margin:
    2.5rem
    auto
    0;
  padding:
    1.5rem
    0
    0
    1.5rem;
  border-top:
    1px solid rgba(255, 176, 84, 0.42);
  border-left:
    2px solid #ff9a3c;
}

.one-fire-scripture p {
  width: 100%;
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}

.one-fire-scripture strong {
  display: block;
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

.one-fire-note {
  padding:
    1rem;
  border:
    1px solid rgba(255, 164, 72, 0.18);
  color:
    rgba(255, 255, 255, 0.5) !important;
  background:
    rgba(255, 255, 255, 0.012);
  font-size: 0.72rem;
}


/* ==================================================================
   RESPONSIVE BEHAVIOR — NEW MESSAGES SECTIONS
   ================================================================== */

@media (max-width: 1120px) {
  .survival-hope-journey,
  .one-fire-shell {
    grid-template-columns: 1fr;
  }

  .survival-hope-passage {
    width: 100%;
    min-height: 70px;
    flex-direction: row;
  }

  .survival-hope-passage span {
    width: auto;
    height: 1px;
    min-height: 0;
  }

  .survival-hope-passage strong {
    writing-mode: horizontal-tb;
  }

  .survival-hope-panel figure {
    min-height: clamp(760px, 105vw, 1040px);
  }

  .one-fire-visual {
    min-height: clamp(620px, 82vw, 900px);
  }
}

@media (max-width: 760px) {
  .survival-hope-section,
  .one-fire-section {
    padding-inline: 14px;
  }

  .survival-hope-panel figure {
    min-height: 900px;
  }

  .survival-hope-panel figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 22px;
  }

  .survival-hope-declaration {
    grid-template-columns: 1fr;
  }

  .one-fire-declarations {
    grid-template-columns: 1fr;
  }

  .one-fire-declarations article {
    min-height: auto;
  }

  .one-fire-visual {
    min-height: 680px;
  }
}

@media (max-width: 480px) {
  .survival-hope-panel figure {
    min-height: 980px;
  }

  .survival-hope-panel figcaption h3 {
    font-size: 2.2rem;
  }

  .survival-hope-panel figcaption > p {
    font-size: 0.9rem;
  }

  .survival-hope-panel figcaption blockquote {
    font-size: 1.08rem;
  }

  .one-fire-visual {
    min-height: 600px;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .survival-hope-panel figure {
    min-height: 880px;
  }

  .one-fire-visual {
    min-height: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .survival-hope-panel img,
  .one-fire-visual img {
    transition: none;
  }
}

/* MESSAGES PAGE — NEW HOPE + ONE FIRE SECTIONS — END */


/* ==================================================================
   MESSAGES PAGE — FINAL IMAGE SEPARATION & CLEAR PRESENTATION
   PURPOSE:
   1. Keeps the two hope images as separate full-width visual stories.
   2. Removes all text overlays from the photographs.
   3. Places all supporting text in dedicated editorial panels outside
      each image.
   4. Expands the fire image so every symbolic detail remains visible.
   5. Preserves centered titles and left-aligned paragraph text.
   ================================================================== */


/* ==================================================================
   SURVIVAL HOPE — SEPARATE IMAGE STORIES
   ================================================================== */

/*
  Stack each story vertically instead of placing both images
  side by side. This ensures each photograph has its own visual
  moment and can be seen clearly.
*/
.survival-hope-journey {
  width: min(1560px, 100%);

  margin:
    clamp(55px, 7vw, 105px)
    auto
    0;

  display: grid;

  grid-template-columns: 1fr;

  gap: clamp(70px, 9vw, 140px);

  align-items: start;
}


/*
  Remove the vertical "Keep Moving" divider between the two images.
  The visual separation is now created through spacing and editorial
  sequencing instead.
*/
.survival-hope-passage {
  display: none;
}


/*
  Each story now becomes a two-part editorial block:
  large clear image first, text panel below it.
*/
.survival-hope-panel {
  width: 100%;

  min-width: 0;

  display: grid;

  gap: 0;
}


/*
  The figure becomes a normal document-flow container instead of
  placing text over the photograph.
*/
.survival-hope-panel figure {
  position: relative;

  min-height: 0;

  margin: 0;

  display: grid;

  grid-template-columns: 1fr;

  overflow: visible;

  border: 0;

  background: transparent;

  box-shadow: none;
}


/*
  Keep the inner editorial border on the photograph only.
*/
.survival-hope-panel figure::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: clamp(12px, 1.4vw, 18px);
  left: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);

  height: calc(
    clamp(620px, 66vw, 980px)
    - (clamp(12px, 1.4vw, 18px) * 2)
  );

  border:
    1px solid rgba(255, 222, 137, 0.28);

  pointer-events: none;
}


/*
  The image remains fully visible, large and undimmed.
*/
.survival-hope-panel img {
  position: relative;

  inset: auto;

  width: 100%;
  height: clamp(620px, 66vw, 980px);

  max-width: none;

  display: block;

  object-fit: cover;

  transform: none;

  border:
    1px solid rgba(215, 173, 66, 0.4);

  background: #020202;

  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.64);
}


/*
  Fine-tune each photograph independently.
*/
.survival-hope-panel-low img {
  object-position: center 50%;
}

.survival-hope-panel-direction img {
  object-position: center 46%;
}


/*
  Remove the full-image shade completely so the images stay clear.
*/
.survival-hope-shade {
  display: none;
}


/*
  Move all text completely outside the image.
*/
.survival-hope-panel figcaption {
  position: relative;

  z-index: 1;

  left: auto;
  right: auto;
  bottom: auto;

  width: min(1080px, calc(100% - 36px));

  margin:
    clamp(28px, 4vw, 54px)
    auto
    0;

  padding:
    clamp(30px, 4.5vw, 58px);

  border:
    1px solid rgba(255, 217, 113, 0.34);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012)
    );

  -webkit-backdrop-filter: none;

  backdrop-filter: none;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.38);
}


/*
  All paragraph blocks remain centered as containers
  but left aligned internally.
*/
.survival-hope-panel figcaption .eyebrow,
.survival-hope-panel figcaption h3,
.survival-hope-panel figcaption > p,
.survival-hope-panel figcaption blockquote,
.survival-hope-panel figcaption strong {
  width: min(100%, 66ch);

  margin-left: auto;
  margin-right: auto;

  text-align: left;
}


/*
  Titles stay centered in the center.
*/
.survival-hope-panel figcaption .eyebrow,
.survival-hope-panel figcaption h3 {
  text-align: center;
}


/*
  Give the story title stronger editorial presence.
*/
.survival-hope-panel figcaption h3 {
  margin-top: 0.5rem;

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: clamp(2.5rem, 4.8vw, 5.6rem);

  font-weight: 400;

  line-height: 0.98;

  text-transform: uppercase;

  text-wrap: balance;
}


/*
  Supporting text remains readable and calm.
*/
.survival-hope-panel figcaption > p {
  margin-top: 1.25rem;

  color: rgba(255, 255, 255, 0.78);

  font-size: clamp(0.98rem, 1.1vw, 1.1rem);

  line-height: 1.75;

  text-wrap: pretty;
}


/*
  Scripture becomes a clearly separated statement beneath the text.
*/
.survival-hope-panel figcaption blockquote {
  margin:
    1.6rem
    auto
    0;

  padding:
    1.25rem
    0
    0
    1.3rem;

  border-top:
    1px solid rgba(255, 217, 113, 0.42);

  border-left:
    2px solid var(--gold-light);

  color: var(--gold-pale);

  font-family: var(--serif);

  font-size: clamp(1.25rem, 1.9vw, 1.9rem);

  line-height: 1.5;

  text-wrap: pretty;
}


/* ==================================================================
   ONE FIRE — LARGE, CLEAR, DETAIL-FOCUSED IMAGE
   ================================================================== */

/*
  Stack the fire image above the teaching text.
  This gives the visual the full width it needs to communicate
  the concept clearly.
*/
.one-fire-shell {
  width: min(1700px, 100%);

  margin-inline: auto;

  display: grid;

  grid-template-columns: 1fr;

  gap: clamp(50px, 7vw, 96px);

  align-items: start;
}


/*
  The fire visual becomes a wide cinematic panel.
*/
.one-fire-visual {
  position: relative;

  width: 100%;

  min-height: clamp(760px, 62vw, 1120px);

  margin: 0;

  overflow: hidden;

  border:
    1px solid rgba(255, 164, 72, 0.55);

  background: #030100;

  box-shadow:
    0 50px 130px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(255, 91, 0, 0.12);
}


/*
  Preserve the internal gold frame.
*/
.one-fire-visual::before {
  content: "";

  position: absolute;

  z-index: 3;

  inset: clamp(12px, 1.2vw, 18px);

  border:
    1px solid rgba(255, 205, 132, 0.34);

  pointer-events: none;
}


/*
  Show the complete fire illustration without cropping away detail.
*/
.one-fire-visual img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  display: block;

  object-fit: contain;

  object-position: center;

  transform: none;

  background: #030100;
}


/*
  Remove the image glow overlay so every symbolic detail stays clear.
*/
.one-fire-image-glow {
  display: none;
}


/*
  Move the fire caption outside the image.
*/
.one-fire-visual figcaption {
  position: absolute;

  z-index: 4;

  left: 50%;

  right: auto;
  bottom: clamp(20px, 2.4vw, 38px);

  width: min(720px, calc(100% - 48px));

  transform: translateX(-50%);

  padding:
    1rem
    1.3rem;

  border:
    1px solid rgba(255, 190, 103, 0.5);

  color: var(--gold-light);

  background:
    rgba(7, 3, 1, 0.84);

  -webkit-backdrop-filter: none;

  backdrop-filter: none;

  font-family: var(--serif);

  font-size: clamp(1.25rem, 2vw, 1.95rem);

  text-align: center;

  text-transform: uppercase;
}


/*
  The teaching copy now receives the full available width below
  the fire image while keeping paragraphs centered as containers
  and left aligned inside.
*/
.one-fire-copy {
  width: min(1050px, 100%);

  margin-inline: auto;
}

.one-fire-copy .eyebrow,
.one-fire-copy h2 {
  width: min(100%, 980px);

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.one-fire-copy > p,
.one-fire-scripture,
.one-fire-note {
  width: min(100%, 72ch);

  margin-left: auto;
  margin-right: auto;

  text-align: left;
}


/*
  Give the Father, Son and Holy Spirit declarations more room.
*/
.one-fire-declarations {
  width: min(1180px, 100%);

  margin:
    2.7rem
    auto
    0;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(14px, 1.6vw, 24px);
}

.one-fire-declarations article {
  min-height: 250px;

  padding:
    clamp(1.35rem, 2vw, 1.8rem);
}


/* ==================================================================
   RESPONSIVE RULES — SEPARATE VISUAL STORIES
   ================================================================== */

@media (max-width: 1120px) {

  .survival-hope-panel img {
    height: clamp(560px, 78vw, 860px);
  }

  .survival-hope-panel figure::before {
    height: calc(
      clamp(560px, 78vw, 860px)
      - (clamp(12px, 1.4vw, 18px) * 2)
    );
  }

  .one-fire-visual {
    min-height: clamp(700px, 82vw, 980px);
  }

}


@media (max-width: 760px) {

  .survival-hope-section,
  .one-fire-section {
    padding-inline: 14px;
  }

  .survival-hope-journey {
    gap: 78px;
  }

  .survival-hope-panel img {
    height: clamp(500px, 112vw, 760px);
  }

  .survival-hope-panel figure::before {
    top: 10px;
    left: 10px;
    right: 10px;

    height: calc(
      clamp(500px, 112vw, 760px)
      - 20px
    );
  }

  .survival-hope-panel figcaption {
    width: calc(100% - 20px);

    margin-top: 20px;

    padding: 24px;
  }

  .survival-hope-panel figcaption h3 {
    font-size: clamp(2.2rem, 10vw, 3.8rem);
  }

  .one-fire-visual {
    min-height: clamp(620px, 118vw, 860px);
  }

  .one-fire-declarations {
    grid-template-columns: 1fr;
  }

  .one-fire-declarations article {
    min-height: auto;
  }

}


@media (max-width: 480px) {

  .survival-hope-panel img {
    height: 560px;
  }

  .survival-hope-panel figure::before {
    height: 540px;
  }

  .survival-hope-panel figcaption {
    padding: 21px;
  }

  .one-fire-visual {
    min-height: 600px;
  }

  .one-fire-visual figcaption {
    width: calc(100% - 32px);

    bottom: 16px;

    font-size: 1.1rem;
  }

}


@media (orientation: landscape) and (max-height: 620px) {

  .survival-hope-panel img {
    height: 760px;
  }

  .survival-hope-panel figure::before {
    height: calc(760px - 28px);
  }

  .one-fire-visual {
    min-height: 820px;
  }

}

/* MESSAGES PAGE — FINAL IMAGE SEPARATION & CLEAR PRESENTATION — END */


/* THE WORD ROOM AND STEPS ORDERED — END */

/* MESSAGES PAGE EXPERIENCE — END */

/* ==================================================================
   REDUCED MOTION — ACCESSIBILITY
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==================================================================
   PRAYER CHAMBER — PREMIUM CONNECT PAGE FORM
   Scoped to #prayer to prevent conflicts with other site forms.
   ================================================================== */

#prayer {
  scroll-margin-top: 110px;
}

.prayer-chamber {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    clamp(90px, 10vw, 170px)
    clamp(18px, 6vw, 105px);
  border-block: 1px solid rgba(215, 173, 66, 0.28);
  background:
    radial-gradient(circle at 16% 15%, rgba(215, 173, 66, 0.13), transparent 28%),
    radial-gradient(circle at 84% 68%, rgba(89, 131, 146, 0.1), transparent 30%),
    linear-gradient(145deg, #030303 0%, #090807 48%, #020202 100%);
}

.prayer-chamber-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.prayer-chamber-orbit {
  position: absolute;
  border: 1px solid rgba(255, 217, 113, 0.12);
  border-radius: 50%;
}

.prayer-chamber-orbit-one {
  width: 720px;
  height: 720px;
  top: -360px;
  right: -180px;
}

.prayer-chamber-orbit-two {
  width: 430px;
  height: 430px;
  left: -215px;
  bottom: 10%;
}

.prayer-chamber-ray {
  position: absolute;
  top: -25%;
  left: 58%;
  width: 180px;
  height: 100%;
  transform: rotate(9deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 220, 130, 0.08),
      transparent
    );
  filter: blur(18px);
}

.prayer-chamber-shell {
  width: min(1660px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    minmax(340px, 0.78fr)
    minmax(560px, 1.22fr);
  gap: clamp(45px, 7vw, 120px);
  align-items: start;
}


/* STORY SIDE */

.prayer-chamber-story {
  position: relative;
}

.prayer-chamber-story-inner {
  position: sticky;
  top: 125px;
}

.prayer-chamber-story .eyebrow,
.prayer-chamber-story h2,
.prayer-chamber-story > .prayer-chamber-story-inner > p {
  width: min(680px, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.prayer-chamber-story h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(3.2rem, 5.6vw, 6.6rem);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

.prayer-chamber-story > .prayer-chamber-story-inner > p {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.72;
  text-wrap: pretty;
}

.prayer-chamber-lead {
  color: var(--gold-pale) !important;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.42 !important;
}

.prayer-chamber-assurances {
  width: min(680px, 100%);
  margin: 2.5rem auto 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(215, 173, 66, 0.22);
}

.prayer-chamber-assurances article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(215, 173, 66, 0.18);
}

.prayer-chamber-assurances article > span {
  color: rgba(255, 217, 113, 0.34);
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
}

.prayer-chamber-assurances h3 {
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  text-transform: uppercase;
}

.prayer-chamber-assurances p {
  width: min(100%, 48ch);
  margin: 0.45rem 0 0;
  color: rgba(255, 255, 255, 0.63);
  font-size: 0.84rem;
  line-height: 1.6;
  text-align: left;
  text-wrap: pretty;
}

.prayer-chamber-scripture {
  position: relative;
  width: min(680px, 100%);
  margin: 2.7rem auto 0;
  padding: 1.8rem 0 0 2rem;
  border-top: 1px solid rgba(215, 173, 66, 0.32);
  border-left: 2px solid var(--gold-light);
}

.prayer-chamber-quote {
  position: absolute;
  left: 1rem;
  top: 0.85rem;
  color: rgba(255, 217, 113, 0.18);
  font-family: var(--serif);
  font-size: 5.5rem;
  line-height: 1;
  pointer-events: none;
}

.prayer-chamber-scripture blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.25vw, 2.45rem);
  line-height: 1.42;
  text-align: left;
  text-wrap: pretty;
}

.prayer-chamber-scripture p {
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}


/* FORM CARD */

.prayer-chamber-form-wrap {
  position: relative;
  overflow: hidden;
  padding:
    clamp(30px, 4.5vw, 68px);
  border: 1px solid rgba(255, 217, 113, 0.42);
  background:
    linear-gradient(150deg, rgba(255, 217, 113, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    #080706;
  box-shadow:
    0 45px 120px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.prayer-chamber-form-wrap::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 217, 113, 0.09);
  filter: blur(70px);
  pointer-events: none;
}

.prayer-chamber-form-wrap::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 217, 113, 0.12);
  pointer-events: none;
}

.prayer-chamber-form-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.prayer-chamber-form-top h3 {
  width: min(760px, 100%);
  margin: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(2.7rem, 4.4vw, 5.2rem);
  font-weight: 400;
  line-height: 0.95;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}

.prayer-chamber-seal {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 217, 113, 0.5);
  border-radius: 50%;
  color: var(--gold-light);
  box-shadow:
    0 0 28px rgba(215, 173, 66, 0.14),
    inset 0 0 22px rgba(215, 173, 66, 0.08);
}

.prayer-chamber-form-intro {
  position: relative;
  z-index: 1;
  width: min(100%, 68ch);
  margin: 1.25rem 0 2.6rem;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.68;
  text-align: left;
  text-wrap: pretty;
}

.prayer-chamber-form {
  position: relative;
  z-index: 1;
}

.prayer-form-group {
  margin: 0;
  padding: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(215, 173, 66, 0.2);
}

.prayer-form-group legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-right: 1rem;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.prayer-form-group legend span {
  color: rgba(255, 217, 113, 0.38);
  font-size: 1rem;
}

.prayer-group-description {
  width: min(100%, 52ch);
  margin: 0.7rem 0 1.2rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: left;
}

.prayer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.prayer-field-full {
  grid-column: 1 / -1;
}

.prayer-field label {
  display: block;
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
}

.prayer-field label span {
  color: var(--gold-light);
}

.prayer-chamber-form input,
.prayer-chamber-form textarea,
.prayer-chamber-form select {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(215, 173, 66, 0.24);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.022);
  box-shadow: none;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.prayer-chamber-form input {
  min-height: 58px;
  padding: 0.9rem 1rem;
}

.prayer-chamber-form textarea {
  min-height: 220px;
  padding: 1rem;
  resize: vertical;
}

.prayer-chamber-form input::placeholder,
.prayer-chamber-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.prayer-chamber-form input:focus,
.prayer-chamber-form textarea:focus,
.prayer-chamber-form select:focus {
  border-color: var(--gold-light);
  background: rgba(255, 217, 113, 0.035);
  box-shadow:
    0 0 0 3px rgba(215, 173, 66, 0.09),
    0 0 30px rgba(215, 173, 66, 0.05);
  outline: none;
}

.prayer-field-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.65rem;
}

.prayer-field-meta small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.62rem;
  line-height: 1.5;
  text-align: left;
}


/* PRAYER FOCUS CHIPS */

.prayer-focus-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.prayer-focus-options label {
  position: relative;
  cursor: pointer;
}

.prayer-focus-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.prayer-focus-options span {
  min-height: 55px;
  display: grid;
  place-items: center;
  padding: 0.65rem;
  border: 1px solid rgba(215, 173, 66, 0.24);
  color: rgba(255, 255, 255, 0.67);
  background: rgba(255, 255, 255, 0.018);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.prayer-focus-options label:hover span {
  transform: translateY(-3px);
  border-color: rgba(255, 217, 113, 0.58);
  color: var(--gold-pale);
}

.prayer-focus-options input:checked + span,
.prayer-focus-options input:focus-visible + span {
  color: #050505;
  border-color: var(--gold-light);
  background: var(--gold-light);
  box-shadow: 0 0 25px rgba(215, 173, 66, 0.18);
}


/* RESPONSE OPTIONS */

.prayer-response-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.prayer-response-options label {
  position: relative;
  cursor: pointer;
}

.prayer-response-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.prayer-response-options > label > span {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem;
  border: 1px solid rgba(215, 173, 66, 0.22);
  background: rgba(255, 255, 255, 0.018);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.prayer-response-options strong,
.prayer-response-options small {
  display: block;
  text-align: left;
}

.prayer-response-options strong {
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
}

.prayer-response-options small {
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  line-height: 1.5;
}

.prayer-response-options label:hover > span {
  transform: translateY(-3px);
  border-color: rgba(255, 217, 113, 0.52);
}

.prayer-response-options input:checked + span,
.prayer-response-options input:focus-visible + span {
  border-color: var(--gold-light);
  background: rgba(215, 173, 66, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 217, 113, 0.18);
}


/* PRIVACY AND SUBMIT */

.prayer-privacy-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1.1rem;
  border: 1px solid rgba(215, 173, 66, 0.2);
  background: rgba(255, 255, 255, 0.018);
}

.prayer-privacy-consent input {
  width: auto;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--gold-light);
}

.prayer-privacy-consent span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: left;
}

.prayer-privacy-consent a {
  color: var(--gold-pale);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prayer-submit-row {
  display: grid;
  grid-template-columns: minmax(250px, auto) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.prayer-submit-button {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 1.3rem 0 1.5rem;
  border: 1px solid var(--gold-light);
  color: #050505;
  background: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.prayer-submit-button i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  font-style: normal;
}

.prayer-submit-button:hover,
.prayer-submit-button:focus-visible {
  transform: translateY(-4px);
  background: var(--gold-pale);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(215, 173, 66, 0.16);
  outline: none;
}

.prayer-submit-row p {
  width: min(100%, 45ch);
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.63rem;
  line-height: 1.55;
  text-align: left;
}

.prayer-form-status {
  min-height: 1.5rem;
  margin-top: 1rem;
  color: var(--gold-pale);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: left;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

#prayer:target .prayer-chamber-form-wrap {
  animation: prayerChamberReveal 1s ease both;
}

@keyframes prayerChamberReveal {
  from {
    opacity: 0.4;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* RESPONSIVE */

@media (max-width: 1120px) {
  .prayer-chamber-shell {
    grid-template-columns: 1fr;
  }

  .prayer-chamber-story-inner {
    position: static;
  }

  .prayer-chamber-story {
    width: min(850px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  #prayer {
    scroll-margin-top: 80px;
  }

  .prayer-form-grid,
  .prayer-focus-options,
  .prayer-response-options,
  .prayer-submit-row {
    grid-template-columns: 1fr;
  }

  .prayer-field-full {
    grid-column: auto;
  }

  .prayer-chamber-form-top {
    flex-direction: column;
  }

  .prayer-chamber-seal {
    width: 52px;
    height: 52px;
  }

  .prayer-field-meta {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  #prayer:target .prayer-chamber-form-wrap {
    animation: none;
  }

  .prayer-focus-options span,
  .prayer-response-options > label > span,
  .prayer-submit-button {
    transition: none;
  }
}

/* PRAYER CHAMBER — END */


/* ==================================================================
   PRAYER TREE VISUAL — STORY-TO-FORM HEIGHT ALIGNMENT
   The image begins beneath the prayer story and fills the remaining
   height so its bottom aligns with the bottom of the form column.
   ================================================================== */

.prayer-chamber-shell {
  align-items: stretch;
}

.prayer-chamber-story {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prayer-chamber-story-inner {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}

.prayer-tree-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 720px;
  margin:
    clamp(40px, 5vw, 72px)
    0
    0;
  overflow: hidden;
  border:
    1px solid rgba(255, 217, 113, 0.34);
  background: #030303;
  box-shadow:
    0 35px 95px rgba(0, 0, 0, 0.64);
}

.prayer-tree-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 15px;
  border:
    1px solid rgba(255, 224, 139, 0.32);
  pointer-events: none;
}

.prayer-tree-visual img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: 49% 52%;
  filter:
    saturate(0.78)
    contrast(1.08)
    brightness(0.72);
  transform: scale(1.01);
  transition:
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.7s ease;
}

.prayer-tree-visual:hover img {
  transform: scale(1.045);
  filter:
    saturate(0.88)
    contrast(1.1)
    brightness(0.78);
}

.prayer-tree-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.16) 34%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.16),
      transparent 45%,
      rgba(0, 0, 0, 0.1)
    );
  pointer-events: none;
}

.prayer-tree-caption {
  position: absolute;
  z-index: 2;
  left: clamp(25px, 4.2vw, 58px);
  right: clamp(25px, 4.2vw, 58px);
  bottom: clamp(28px, 4vw, 58px);
  width: min(620px, calc(100% - 50px));
}

.prayer-tree-caption .eyebrow,
.prayer-tree-caption h3,
.prayer-tree-caption > p,
.prayer-tree-caption blockquote,
.prayer-tree-caption > strong {
  width: min(100%, 58ch);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.prayer-tree-caption h3 {
  margin-top: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 4.8rem);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

.prayer-tree-caption > p {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.67;
  text-wrap: pretty;
}

.prayer-tree-caption blockquote {
  margin-top: 1.4rem;
  margin-bottom: 0;
  padding:
    1.15rem
    0
    0
    1.25rem;
  border-top:
    1px solid rgba(255, 217, 113, 0.34);
  border-left:
    2px solid var(--gold-light);
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.prayer-tree-caption > strong {
  display: block;
  margin-top: 0.8rem;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* The right form establishes the full row height. */
.prayer-chamber-form-wrap {
  height: 100%;
}


/* TABLET: preserve the image beneath the story without forced matching. */

@media (max-width: 1120px) {
  .prayer-chamber-story {
    width: min(900px, 100%);
    margin-inline: auto;
  }

  .prayer-tree-visual {
    min-height: 760px;
  }

  .prayer-chamber-form-wrap {
    height: auto;
  }
}


/* MOBILE */

@media (max-width: 760px) {
  .prayer-tree-visual {
    min-height: 680px;
    margin-top: 42px;
  }

  .prayer-tree-caption {
    left: 22px;
    right: 22px;
    bottom: 28px;
    width: auto;
  }

  .prayer-tree-caption h3 {
    font-size: clamp(2rem, 10vw, 3.4rem);
  }
}

@media (max-width: 480px) {
  .prayer-tree-visual {
    min-height: 720px;
  }

  .prayer-tree-caption > p {
    font-size: 0.9rem;
  }

  .prayer-tree-caption blockquote {
    font-size: 1.12rem;
  }
}

/* PRAYER TREE VISUAL — END */


/* ==================================================================
   CONNECT PAGE FINAL POSITIONING CORRECTIONS
   Resolves hero balance, responsive tree caption and full-image
   presentation beside the ministry request form.
   ================================================================== */


/* ------------------------------------------------------------------
   CONNECT HERO
   Keep the hero text from changing the image column's placement.
   ------------------------------------------------------------------ */

.connect-hero {
  grid-template-columns:
    minmax(360px, 0.92fr)
    minmax(0, 1.08fr);
  align-items: stretch;
}

.connect-hero .inner-hero-copy {
  min-width: 0;
  width: 100%;
  max-width: none;
}

.connect-hero .inner-hero-copy .eyebrow,
.connect-hero .inner-hero-copy h1,
.connect-hero .inner-hero-copy .gold-rule,
.connect-hero .inner-hero-copy .connect-hero-lead {
  width: min(100%, 720px);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.connect-hero .inner-hero-image {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.connect-hero .inner-hero-image img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center 24%;
  transform: none;
}


/* ------------------------------------------------------------------
   PRAYER TREE CAPTION
   A responsive glass container anchored at the bottom of the image.
   ------------------------------------------------------------------ */

.prayer-tree-caption {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3vw, 42px);
  right: clamp(16px, 3vw, 42px);
  bottom: clamp(16px, 3vw, 42px);
  width: auto;
  max-width: none;
  padding:
    clamp(20px, 3.2vw, 38px);
  border:
    1px solid rgba(255, 217, 113, 0.34);
  background:
    linear-gradient(
      145deg,
      rgba(12, 12, 10, 0.9),
      rgba(0, 0, 0, 0.72)
    );
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.prayer-tree-caption > p,
.prayer-tree-caption blockquote,
.prayer-tree-caption > strong {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.prayer-tree-caption > p {
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.prayer-tree-caption blockquote {
  margin-top: clamp(16px, 2vw, 24px);
  margin-bottom: 0;
  padding:
    clamp(14px, 1.8vw, 20px)
    0
    0
    clamp(16px, 2vw, 22px);
  border-top:
    1px solid rgba(255, 217, 113, 0.34);
  border-left:
    2px solid var(--gold-light);
  color: var(--gold-pale);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.6vw, 1.55rem);
  line-height: 1.48;
  text-wrap: pretty;
}

.prayer-tree-caption > strong {
  display: block;
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(0.58rem, 0.75vw, 0.67rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   MINISTRY REQUEST IMAGE
   Show the complete original image without cropping or zooming.
   ------------------------------------------------------------------ */

#booking .form-panel {
  align-items: stretch;
}

#booking .form-image {
  min-width: 0;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(18px, 2.6vw, 34px);
  background:
    radial-gradient(
      circle at center,
      rgba(215, 173, 66, 0.08),
      transparent 55%
    ),
    #030303;
}

#booking .form-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transform: none;
}


/* ------------------------------------------------------------------
   RESPONSIVE CORRECTIONS
   ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .connect-hero {
    grid-template-columns: 1fr;
  }

  .connect-hero .inner-hero-image {
    min-height: 520px;
  }

  .connect-hero .inner-hero-image img {
    object-position: center 22%;
  }

  #booking .form-image {
    min-height: 620px;
  }
}

@media (max-width: 760px) {
  .connect-hero .inner-hero-copy .eyebrow,
  .connect-hero .inner-hero-copy h1,
  .connect-hero .inner-hero-copy .gold-rule,
  .connect-hero .inner-hero-copy .connect-hero-lead {
    width: 100%;
  }

  .connect-hero .inner-hero-image {
    min-height: 440px;
  }

  .prayer-tree-caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 20px;
  }

  .prayer-tree-caption > p {
    font-size: 0.9rem;
  }

  .prayer-tree-caption blockquote {
    font-size: 1.08rem;
  }

  #booking .form-image {
    min-height: 520px;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .connect-hero .inner-hero-image {
    min-height: 390px;
  }

  .prayer-tree-visual {
    min-height: 760px;
  }

  .prayer-tree-caption {
    padding: 18px;
  }

  #booking .form-image {
    min-height: 440px;
  }
}

/* CONNECT PAGE FINAL POSITIONING CORRECTIONS — END */


/* ==================================================================
   GLOBAL RESPONSIVE FOUNDATION — ALL DEVICES AND ORIENTATIONS
   Append-only overrides to preserve the existing visual system.
   ================================================================== */

:root {
  --site-gutter: clamp(16px, 4vw, 72px);
  --site-content-max: 1700px;
}

html {
  width: 100%;
  min-width: 320px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
}

img,
picture,
video,
iframe,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

main,
section,
header,
footer,
nav,
aside,
div,
form {
  min-width: 0;
}

.page-shell,
.content-section,
.inner-hero,
.ministry-footer-opening,
.ministry-footer-grid,
.footer-studio-credit,
.footer-legal-bar {
  width: min(var(--site-content-max), calc(100% - (var(--site-gutter) * 2)));
  margin-inline: auto;
}

/* Fluid typography protects the same hierarchy on every device. */
h1 {
  font-size: clamp(2.8rem, 6.2vw, 7.4rem);
}

h2 {
  font-size: clamp(2.25rem, 4.8vw, 5.8rem);
}

p,
li,
label,
input,
textarea,
select,
button {
  font-size: clamp(0.92rem, 0.72rem + 0.28vw, 1.08rem);
}

/* Prevent long strings from breaking layouts. */
p,
a,
strong,
small,
label,
blockquote {
  overflow-wrap: anywhere;
}

/* Landscape tablets and phones receive a shorter, wider rhythm. */
@media (orientation: landscape) and (max-height: 760px) {
  .ministry-masthead {
    min-height: 92px;
  }

  .inner-hero,
  .content-section,
  .prayer-chamber {
    padding-top: clamp(45px, 7vh, 78px);
    padding-bottom: clamp(45px, 7vh, 78px);
  }
}


/* ==================================================================
   CONNECT HERO — TEXT CANNOT MOVE OR RESIZE THE IMAGE
   ================================================================== */

.connect-page .connect-hero {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(340px, 0.88fr)
    minmax(0, 1.12fr);
  align-items: stretch;
  overflow: hidden;
}

.connect-page .connect-hero .inner-hero-copy {
  min-width: 0;
  width: 100%;
  max-width: none;
  align-self: center;
  padding:
    clamp(42px, 6vw, 100px)
    var(--site-gutter);
}

.connect-page .connect-hero .inner-hero-copy > * {
  width: min(100%, 720px);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.connect-page .connect-hero .inner-hero-image {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: clamp(620px, 74vh, 940px);
  overflow: hidden;
}

.connect-page .connect-hero .inner-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 24%;
  transform: none;
}

@media (max-width: 980px) {
  .connect-page .connect-hero {
    grid-template-columns: 1fr;
  }

  .connect-page .connect-hero .inner-hero-image {
    min-height: clamp(480px, 70vw, 760px);
  }
}

@media (orientation: landscape) and (max-width: 980px) {
  .connect-page .connect-hero {
    grid-template-columns:
      minmax(300px, 0.9fr)
      minmax(0, 1.1fr);
  }

  .connect-page .connect-hero .inner-hero-image {
    min-height: max(520px, 100vh);
  }
}


/* ==================================================================
   PRAYER CHAMBER — FLAGSHIP RESPONSIVE PRESENTATION
   ================================================================== */

.prayer-chamber-shell {
  width: min(1740px, 100%);
  grid-template-columns:
    minmax(420px, 0.9fr)
    minmax(580px, 1.1fr);
  gap: clamp(32px, 5vw, 94px);
  align-items: stretch;
}

.prayer-chamber-story {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.prayer-chamber-form-wrap {
  min-width: 0;
  height: 100%;
}

/* Tree begins after the written Prayer Chamber introduction and
   expands to align with the form column. */
.prayer-tree-visual {
  position: relative;
  flex: 1 1 880px;
  width: calc(100% + clamp(60px, 7vw, 150px));
  min-height: clamp(980px, 118vh, 1420px);
  margin:
    clamp(42px, 5vw, 76px)
    calc(clamp(30px, 3.5vw, 75px) * -1)
    0;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 113, 0.42);
  background: #020202;
  box-shadow:
    0 48px 130px rgba(0, 0, 0, 0.76),
    0 0 42px rgba(215, 173, 66, 0.07);
}

.prayer-tree-visual::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: clamp(12px, 1.2vw, 18px);
  border: 1px solid rgba(255, 224, 139, 0.3);
  pointer-events: none;
}

.prayer-tree-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  filter:
    saturate(0.94)
    contrast(1.04)
    brightness(0.9);
  transform: none;
}

/* Gentle contrast only; the photograph stays bold and clear. */
.prayer-tree-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.01) 0%,
      rgba(0, 0, 0, 0.04) 48%,
      rgba(0, 0, 0, 0.3) 100%
    );
  pointer-events: none;
}

/* Full-image glass surface with content permanently at the extreme bottom. */
.prayer-tree-caption {
  position: absolute;
  z-index: 2;
  inset: clamp(14px, 1.6vw, 26px);
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3.6vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.018)
    );
  -webkit-backdrop-filter: blur(8px) saturate(118%);
  backdrop-filter: blur(8px) saturate(118%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 30px 80px rgba(0, 0, 0, 0.2);
}

.prayer-tree-caption > p,
.prayer-tree-caption blockquote,
.prayer-tree-caption > strong {
  width: min(100%, 66ch);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.prayer-tree-caption > p {
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(0.98rem, 0.82rem + 0.22vw, 1.16rem);
  line-height: 1.72;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88);
  text-wrap: pretty;
}

.prayer-tree-caption blockquote {
  margin-top: clamp(18px, 2vw, 28px);
  margin-bottom: 0;
  padding:
    clamp(15px, 1.7vw, 22px)
    0
    0
    clamp(17px, 1.8vw, 24px);
  border-top: 1px solid rgba(255, 217, 113, 0.62);
  border-left: 2px solid var(--gold-light);
  color: #fff1bf;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1rem + 0.48vw, 1.72rem);
  line-height: 1.48;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  text-wrap: pretty;
}

.prayer-tree-caption > strong {
  display: block;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.6rem, 0.54rem + 0.1vw, 0.7rem);
  letter-spacing: 0.17em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
}

/* Tablet portrait and small laptops */
@media (max-width: 1120px) {
  .prayer-chamber-shell {
    grid-template-columns: 1fr;
  }

  .prayer-chamber-story {
    width: min(920px, 100%);
    margin-inline: auto;
  }

  .prayer-chamber-form-wrap {
    height: auto;
  }

  .prayer-tree-visual {
    width: 100%;
    min-height: clamp(900px, 115vw, 1220px);
    margin:
      clamp(40px, 6vw, 70px)
      0
      0;
  }
}

/* Tablet landscape */
@media (orientation: landscape) and (min-width: 760px) and (max-width: 1180px) {
  .prayer-chamber-shell {
    grid-template-columns:
      minmax(340px, 0.92fr)
      minmax(480px, 1.08fr);
    gap: 30px;
  }

  .prayer-tree-visual {
    width: 100%;
    min-height: max(900px, 128vh);
    margin:
      38px
      0
      0;
  }
}

/* Mobile portrait */
@media (max-width: 759px) {
  .prayer-chamber {
    padding-inline: 14px;
  }

  .prayer-tree-visual {
    width: 100%;
    min-height: clamp(860px, 175vw, 1080px);
    margin-top: 38px;
  }

  .prayer-tree-caption {
    inset: 10px;
    padding: clamp(20px, 6vw, 30px);
  }

  .prayer-tree-caption > p {
    font-size: 0.94rem;
  }

  .prayer-tree-caption blockquote {
    font-size: 1.14rem;
  }
}

/* Mobile landscape */
@media (orientation: landscape) and (max-height: 560px) {
  .prayer-chamber-shell {
    grid-template-columns: 1fr;
  }

  .prayer-tree-visual {
    width: 100%;
    min-height: 900px;
    margin-inline: 0;
  }

  .prayer-tree-caption {
    inset: 10px;
    padding: 24px;
  }
}


/* ==================================================================
   ALL CONNECT FORMS — RESPONSIVE WITHOUT FORMAT CHANGES
   ================================================================== */

.prayer-chamber-form,
.smart-form {
  width: 100%;
  min-width: 0;
}

.prayer-form-grid,
.form-row,
.split-layout,
.form-panel {
  min-width: 0;
}

.prayer-chamber-form input,
.prayer-chamber-form textarea,
.prayer-chamber-form select,
.smart-form input,
.smart-form textarea,
.smart-form select {
  max-width: 100%;
}

@media (max-width: 700px) {
  .prayer-form-grid,
  .form-row,
  .prayer-focus-options,
  .prayer-response-options {
    grid-template-columns: 1fr;
  }

  .form-panel,
  .split-layout {
    grid-template-columns: 1fr;
  }
}


/* ==================================================================
   FULL ORIGINAL IMAGE BESIDE “HOW MAY WE SERVE YOU?”
   ================================================================== */

#booking .form-panel {
  align-items: stretch;
}

#booking .form-image {
  min-width: 0;
  min-height: clamp(620px, 76vh, 960px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(14px, 2vw, 30px);
  background: #030303;
}

#booking .form-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transform: none;
}


/* ==================================================================
   REDUCED MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* GLOBAL RESPONSIVE FOUNDATION — END */


/* ==================================================================
   CONNECT PAGE — FINAL SPACING, CLEAR TREE AND HOPE VISUAL
   These scoped overrides preserve the existing form architecture.
   ================================================================== */

.connect-page {
  --connect-marker-gap: clamp(92px, 8vw, 138px);
}


/* ------------------------------------------------------------------
   CONNECT PAGE MARKER AND SAFE CONTENT SPACE
   Keeps the vertical CONNECT marker separated from every section.
   ------------------------------------------------------------------ */

.connect-page .scripture-markers {
  left: clamp(8px, 1vw, 16px);
}

.connect-page .page-marker-connect {
  width: clamp(46px, 4vw, 54px);
}

.connect-page .connect-hero .inner-hero-copy {
  padding-left: var(--connect-marker-gap);
  padding-right: clamp(24px, 5vw, 82px);
}

.connect-page .prayer-chamber {
  padding-left: var(--connect-marker-gap);
  padding-right: clamp(22px, 6vw, 105px);
}

/*
  The hero introduction and Prayer Chamber introduction now share
  the same left boundary, independent of image width or text length.
*/
.connect-page .connect-hero .inner-hero-copy > *,
.connect-page .prayer-chamber-story .eyebrow,
.connect-page .prayer-chamber-story h2,
.connect-page .prayer-chamber-story > .prayer-chamber-story-inner > p {
  margin-left: 0;
  margin-right: auto;
}


/* ------------------------------------------------------------------
   TREE IMAGE — BOLD, CLEAR AND WITHOUT A FULL-PHOTO OVERLAY
   ------------------------------------------------------------------ */

.connect-page .prayer-tree-visual {
  background: #020202;
}

.connect-page .prayer-tree-visual img {
  filter:
    saturate(1)
    contrast(1.02)
    brightness(1);
}

/* The old full-image overlay is disabled completely. */
.connect-page .prayer-tree-overlay {
  display: none !important;
}

/*
  Only the text receives a localized glass background at the extreme
  bottom. The rest of the photograph remains uncovered and clear.
*/
.connect-page .prayer-tree-caption {
  inset: auto
    clamp(14px, 1.7vw, 28px)
    clamp(14px, 1.7vw, 28px);
  width: auto;
  max-width: none;
  display: block;
  padding:
    clamp(22px, 3vw, 42px);
  border:
    1px solid rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(
      145deg,
      rgba(8, 8, 8, 0.72),
      rgba(8, 8, 8, 0.5)
    );
  -webkit-backdrop-filter:
    blur(12px)
    saturate(115%);
  backdrop-filter:
    blur(12px)
    saturate(115%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.connect-page .prayer-tree-caption > p,
.connect-page .prayer-tree-caption blockquote,
.connect-page .prayer-tree-caption > strong {
  width: min(100%, 68ch);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.connect-page .prayer-tree-caption > p {
  color: rgba(255, 255, 255, 0.97);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.9);
}

.connect-page .prayer-tree-caption blockquote {
  color: #fff0bd;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.92);
}


/* ------------------------------------------------------------------
   MINISTRY REQUEST HOPE VISUAL
   Fills the entire right panel from edge to edge.
   ------------------------------------------------------------------ */

#booking .form-panel {
  align-items: stretch;
}

#booking .ministry-hope-visual {
  position: relative;
  min-width: 0;
  min-height: clamp(720px, 84vh, 1040px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #020202;
}

#booking .ministry-hope-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  transform: none;
}

#booking .ministry-hope-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.08) 48%,
      rgba(0, 0, 0, 0.78) 100%
    );
  pointer-events: none;
}

#booking .ministry-hope-caption {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 4vw, 58px);
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(24px, 4vw, 60px);
  padding:
    clamp(22px, 3vw, 38px);
  border:
    1px solid rgba(255, 222, 137, 0.42);
  background:
    linear-gradient(
      145deg,
      rgba(4, 4, 4, 0.72),
      rgba(4, 4, 4, 0.48)
    );
  -webkit-backdrop-filter:
    blur(12px)
    saturate(118%);
  backdrop-filter:
    blur(12px)
    saturate(118%);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.5);
}

#booking .ministry-hope-caption .eyebrow,
#booking .ministry-hope-caption blockquote,
#booking .ministry-hope-caption strong {
  width: min(100%, 58ch);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

#booking .ministry-hope-caption blockquote {
  margin-top: 0.55rem;
  margin-bottom: 0;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.2vw, 2.5rem);
  line-height: 1.4;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.94);
  text-wrap: pretty;
}

#booking .ministry-hope-caption strong {
  display: block;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   RESPONSIVE MARKER AND IMAGE RULES
   ------------------------------------------------------------------ */

@media (max-width: 980px) {
  .connect-page {
    --connect-marker-gap: clamp(82px, 11vw, 112px);
  }

  .connect-page .connect-hero .inner-hero-copy,
  .connect-page .prayer-chamber {
    padding-left: var(--connect-marker-gap);
  }

  #booking .ministry-hope-visual {
    min-height: clamp(650px, 96vw, 900px);
  }
}

@media (max-width: 640px) {
  .connect-page {
    --connect-marker-gap: 72px;
  }

  .connect-page .scripture-markers {
    left: 5px;
  }

  .connect-page .page-marker-connect {
    width: 44px;
  }

  .connect-page .connect-hero .inner-hero-copy {
    padding-left: var(--connect-marker-gap);
    padding-right: 18px;
  }

  .connect-page .prayer-chamber {
    padding-left: var(--connect-marker-gap);
    padding-right: 14px;
  }

  .connect-page .prayer-tree-caption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 20px;
  }

  #booking .ministry-hope-visual {
    min-height: 680px;
  }

  #booking .ministry-hope-caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 21px;
  }

  #booking .ministry-hope-caption blockquote {
    font-size: 1.3rem;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .connect-page {
    --connect-marker-gap: 76px;
  }

  #booking .ministry-hope-visual {
    min-height: 720px;
  }
}

/* CONNECT PAGE — FINAL SPACING, CLEAR TREE AND HOPE VISUAL — END */

/* ==================================================================
   FINAL PRODUCTION CORRECTIONS — 2026-07
   This block is intentionally placed at the end of site.css so these
   corrections override older duplicate declarations without deleting
   any existing design work.
   ================================================================== */

/* ------------------------------------------------------------------
   1. GLOBAL CONTAINMENT
   Keeps large headings and controls inside their cards and panels.
   ------------------------------------------------------------------ */

.message-response-card,
.message-response-card *,
.feature-card,
.expectation-card,
.library-message,
.word-message-card,
.word-message-open,
.word-message-copy,
.response-room-result,
.one-fire-declarations article,
.survival-hope-panel figcaption {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.message-response-card {
  overflow: hidden;
}

.message-response-card h3 {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: clamp(2px, 0.45vw, 8px);
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

/* Prevent decorative first/last glyphs from visually escaping boxes. */
.message-response-card h3::first-letter {
  margin-left: 0;
}

@media (max-width: 520px) {
  .message-response-card h3 {
    font-size: clamp(2rem, 11vw, 3.15rem);
    line-height: 1;
    letter-spacing: 0;
    padding-inline: 6px;
  }
}

/* ------------------------------------------------------------------
   2. FOOTER COPYRIGHT — NO WIDOWED “RESERVED”
   Applies consistently to About, Ministry, Messages and Connect.
   ------------------------------------------------------------------ */

.footer-legal-bar {
  min-width: 0;
}

.footer-legal-bar > p:first-child,
.footer-legal-bar .footer-copyright,
.footer-legal-bar [data-footer-copyright] {
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  letter-spacing: clamp(0.035em, 0.35vw, 0.07em);
}

@media (max-width: 760px) {
  .footer-legal-bar > p:first-child,
  .footer-legal-bar .footer-copyright,
  .footer-legal-bar [data-footer-copyright] {
    width: auto;
    margin-inline: auto;
    font-size: clamp(0.5rem, 2.55vw, 0.59rem);
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .footer-legal-bar > p:first-child,
  .footer-legal-bar .footer-copyright,
  .footer-legal-bar [data-footer-copyright] {
    letter-spacing: 0.02em;
    font-size: 0.48rem;
  }
}

/* ------------------------------------------------------------------
   3. HOMEPAGE MOBILE — SAME COMPOSITION, SCALED DOWN
   The portrait remains clearly visible on the right and is not hidden
   behind the left-side text. Rotation is handled professionally.
   ------------------------------------------------------------------ */

@media (max-width: 680px) {
  .home-page {
    min-height: 100svh;
  }

  .home-stage {
    min-height: calc(100svh - var(--header-height));
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 0, 0, 0.91) 28%,
        rgba(0, 0, 0, 0.48) 48%,
        rgba(0, 0, 0, 0.08) 72%,
        rgba(0, 0, 0, 0.02) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.02) 56%,
        rgba(0, 0, 0, 0.94) 100%
      ),
      url("../images/about-herop.jpg") 76% 20% / cover no-repeat;
  }

  .home-content {
    min-height: calc(100svh - var(--header-height));
    padding: clamp(24px, 5vh, 52px) 12px 18px;
    grid-template-rows: minmax(300px, 1fr) auto;
    gap: 1.1rem;
  }

  .home-copy {
    width: min(58%, 310px);
    max-width: 310px;
    margin: 0;
    padding-top: 0;
    align-self: center;
  }

  .home-copy .eyebrow {
    font-size: clamp(0.68rem, 2.8vw, 0.92rem);
  }

  .home-copy h1 {
    font-size: clamp(2rem, 9.8vw, 3.65rem);
    line-height: 0.94;
  }

  .home-copy .gold-rule {
    width: min(100%, 240px);
    margin-block: 0.75rem;
  }

  .home-copy p,
  .home-intro {
    width: min(100%, 31ch);
    margin-left: 0;
    margin-right: auto;
    font-size: clamp(0.78rem, 3vw, 0.98rem);
    line-height: 1.48;
  }

  .home-copy .gold-button {
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    font-size: 0.58rem;
  }

  .home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-card {
    min-height: clamp(190px, 55vw, 260px);
  }

  .home-card img {
    height: 58%;
  }

  .card-content {
    width: calc(100% - 1rem);
    bottom: 0.65rem;
  }

  .card-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
  }

  .card-content h2 {
    font-size: clamp(1.05rem, 5vw, 1.55rem);
  }

  .card-description {
    width: min(100%, 25ch);
    margin-top: 0.3rem;
    font-size: clamp(0.62rem, 2.55vw, 0.76rem);
    line-height: 1.35;
  }
}

/* Very narrow phones retain the same image-right composition. */
@media (max-width: 390px) {
  .home-stage {
    background-position: 80% 20%;
  }

  .home-copy {
    width: 61%;
  }

  .home-copy h1 {
    font-size: clamp(1.85rem, 9.6vw, 2.8rem);
  }
}

/* Rotated phones and small tablets keep the two-sided hero. */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 980px) {
  .home-stage {
    min-height: calc(100svh - var(--header-height));
    background-position: 74% 22%;
  }

  .home-content {
    min-height: calc(100svh - var(--header-height));
    grid-template-columns: minmax(250px, 0.72fr) minmax(360px, 1.28fr);
    grid-template-rows: 1fr;
    align-items: end;
    gap: 16px;
    padding: 18px 16px;
  }

  .home-copy {
    width: 100%;
    max-width: 390px;
    align-self: center;
  }

  .home-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-self: end;
  }

  .home-card {
    min-height: min(52vh, 250px);
  }

  .card-description {
    display: none;
  }
}

/* ------------------------------------------------------------------
   4. MESSAGE LIBRARY INTERACTION STATES
   Complements assets/js/messages-library.js.
   ------------------------------------------------------------------ */

.word-message-card[hidden],
.word-message-card.is-hidden {
  display: none !important;
}

.word-message-card.is-search-match .word-message-open {
  border-color: var(--gold-light);
  box-shadow:
    0 0 0 2px rgba(215, 173, 66, 0.13),
    0 28px 75px rgba(0, 0, 0, 0.58);
}

.word-library-empty {
  display: none;
}

.word-library-empty.is-visible {
  display: block;
}

.word-search:focus-within {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(215, 173, 66, 0.1);
}

.word-room button:disabled,
.message-filter button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.word-room [hidden] {
  display: none !important;
}

/* FINAL PRODUCTION CORRECTIONS — END */

/* ==================================================================
   FOOTER LEGAL SIGNATURE BAR — FINAL PRODUCTION DESIGN
   PURPOSE:
   1. Presents copyright, legal links and studio attribution as one
      clean, premium closing composition.
   2. Prevents “All Rights Reserved.” from becoming an isolated widow.
   3. Preserves clear spacing, hierarchy and touch targets on every
      screen size and orientation.
   4. This final override intentionally appears at the bottom of the
      stylesheet so it safely governs earlier footer-legal rules.
   ================================================================== */

.footer-legal-bar {
  position: relative;
  isolation: isolate;

  width: min(1600px, calc(100% - 40px));

  margin:
    clamp(18px, 2.5vw, 34px)
    auto
    0;

  display: grid;

  grid-template-columns:
    minmax(260px, 0.95fr)
    minmax(420px, 1.35fr)
    minmax(280px, 0.95fr);

  gap: clamp(18px, 2.4vw, 38px);

  align-items: center;

  padding:
    clamp(22px, 2.8vw, 36px)
    clamp(20px, 3vw, 42px);

  overflow: hidden;

  border:
    1px solid rgba(255, 217, 113, 0.28);

  border-radius: 18px 18px 0 0;

  color:
    rgba(255, 255, 255, 0.58);

  background:
    linear-gradient(
      145deg,
      rgba(255, 217, 113, 0.055),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    ),
    #050505;

  box-shadow:
    0 -18px 55px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.075em;
  line-height: 1.55;

  text-transform: uppercase;
}


/* Decorative illumination restrained to the legal bar. */

.footer-legal-bar::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -120px;
  left: 50%;

  width: min(760px, 76vw);
  height: 210px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    rgba(255, 217, 113, 0.065);

  filter: blur(62px);

  pointer-events: none;
}


/* Thin signature line across the top edge. */

.footer-legal-bar::after {
  content: "";

  position: absolute;

  top: 0;
  left: clamp(22px, 4vw, 70px);
  right: clamp(22px, 4vw, 70px);

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 217, 113, 0.44),
      var(--gold-light),
      rgba(255, 217, 113, 0.44),
      transparent
    );

  pointer-events: none;
}


/* ------------------------------------------------------------------
   COPYRIGHT GROUP
   ------------------------------------------------------------------ */

.footer-legal-bar .footer-copyright,
.footer-legal-bar > p:first-child {
  width: min(100%, 48ch);

  margin: 0;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.67rem;
  line-height: 1.65;

  text-align: left;

  text-wrap: pretty;
}


/*
  Keeps the legal phrase together while still allowing the entire
  copyright sentence to wrap naturally on very narrow screens.
*/

.footer-rights {
  display: inline-block;

  white-space: nowrap;

  color: var(--gold-pale);
}


/* ------------------------------------------------------------------
   LEGAL NAVIGATION
   ------------------------------------------------------------------ */

.footer-legal-bar nav {
  min-width: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap:
    0.65rem
    0.75rem;
}

.footer-legal-bar nav a {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0.62rem
    0.86rem;

  border:
    1px solid rgba(255, 217, 113, 0.18);

  border-radius: 999px;

  color:
    rgba(255, 255, 255, 0.64);

  background:
    rgba(255, 255, 255, 0.018);

  font-size: 0.59rem;
  font-weight: 800;

  letter-spacing: 0.09em;
  line-height: 1;

  text-align: center;
  white-space: nowrap;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.footer-legal-bar nav a:hover,
.footer-legal-bar nav a:focus-visible {
  transform: translateY(-3px);

  color: #050505;

  border-color: var(--gold-light);

  background: var(--gold-light);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(255, 217, 113, 0.12);

  outline: none;
}


/* ------------------------------------------------------------------
   DESIGNER ATTRIBUTION
   ------------------------------------------------------------------ */

.footer-designer-line {
  width: min(100%, 48ch);

  margin:
    0
    0
    0
    auto !important;

  color:
    rgba(255, 255, 255, 0.48);

  line-height: 1.65;

  text-align: right !important;
}

.footer-designer-line a {
  position: relative;

  display: inline-block;

  margin-left: 0.28rem;

  color: var(--gold-pale);

  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;

  letter-spacing: 0.055em;
  text-transform: none;

  white-space: nowrap;
}

.footer-designer-line a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -4px;

  height: 1px;

  transform: scaleX(0);
  transform-origin: left center;

  background:
    linear-gradient(
      90deg,
      var(--gold-light),
      transparent
    );

  transition:
    transform 0.25s ease;
}

.footer-designer-line a:hover,
.footer-designer-line a:focus-visible {
  color: var(--gold-light);

  outline: none;
}

.footer-designer-line a:hover::after,
.footer-designer-line a:focus-visible::after {
  transform: scaleX(1);
}


/* ------------------------------------------------------------------
   LARGE TABLETS AND SMALL LAPTOPS
   ------------------------------------------------------------------ */

@media (max-width: 1180px) {

  .footer-legal-bar {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .footer-legal-bar nav {
    grid-column:
      1 / -1;

    grid-row: 1;

    justify-content: center;
  }

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .footer-designer-line {
    grid-column: 2;
    grid-row: 2;
  }

}


/* ------------------------------------------------------------------
   TABLETS
   ------------------------------------------------------------------ */

@media (max-width: 820px) {

  .footer-legal-bar {
    width: min(100% - 28px, 100%);

    grid-template-columns: 1fr;

    gap: 1.25rem;

    padding:
      28px
      22px;

    border-radius:
      15px
      15px
      0
      0;
  }

  .footer-legal-bar nav,
  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child,
  .footer-designer-line {
    grid-column: 1;
    grid-row: auto;
  }

  .footer-legal-bar nav {
    order: 2;

    justify-content: flex-start;
  }

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child {
    order: 1;

    width: 100%;

    text-align: left !important;
  }

  .footer-designer-line {
    order: 3;

    width: 100%;

    margin: 0 !important;

    text-align: left !important;
  }

}


/* ------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------ */

@media (max-width: 540px) {

  .footer-legal-bar {
    width: calc(100% - 20px);

    margin-top: 12px;

    gap: 1rem;

    padding:
      24px
      16px;

    font-size: 0.62rem;
  }

  .footer-legal-bar nav {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.55rem;
  }

  .footer-legal-bar nav a {
    width: 100%;
    min-height: 44px;

    padding:
      0.7rem
      0.55rem;

    white-space: normal;
  }

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child,
  .footer-designer-line {
    font-size: 0.62rem;
    line-height: 1.72;
  }

  .footer-designer-line a {
    margin:
      0.3rem
      0
      0;

    display: table;

    font-size: 0.78rem;
  }

}


/* Very narrow devices retain usable legal controls. */

@media (max-width: 360px) {

  .footer-legal-bar nav {
    grid-template-columns: 1fr;
  }

}


/* Landscape phones maintain a compact horizontal legal presentation. */

@media (orientation: landscape) and (max-height: 620px) and (max-width: 980px) {

  .footer-legal-bar {
    width: min(100% - 24px, 100%);

    grid-template-columns:
      minmax(210px, 0.9fr)
      minmax(390px, 1.3fr);

    gap: 1rem;

    padding:
      18px
      20px;
  }

  .footer-legal-bar nav {
    grid-column: 2;
    grid-row: 1;

    justify-content: flex-end;
  }

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-designer-line {
    grid-column:
      1 / -1;
    grid-row: 2;

    width: 100%;

    margin: 0 !important;

    text-align: center !important;
  }

}


/* FOOTER LEGAL SIGNATURE BAR — END */

/* ==================================================================
   FOOTER LEGAL BAR — COPYRIGHT / PRIVACY SEPARATION FIX
   Creates an unmistakable visual boundary between the copyright
   statement and the legal-navigation controls.
   ================================================================== */

@media (min-width: 1181px) {

  .footer-legal-bar {
    grid-template-columns:
      minmax(320px, 1fr)
      minmax(500px, 1.45fr)
      minmax(300px, 1fr);

    column-gap:
      clamp(46px, 4.5vw, 88px);
  }

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child {
    position: relative;

    padding-right:
      clamp(34px, 3vw, 58px);
  }

  .footer-legal-bar .footer-copyright::after,
  .footer-legal-bar > p:first-child::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 48px;

    transform: translateY(-50%);

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(255, 217, 113, 0.46),
        transparent
      );
  }

  .footer-legal-bar nav {
    padding-inline:
      clamp(18px, 1.8vw, 34px);
  }

  .footer-designer-line {
    position: relative;

    padding-left:
      clamp(34px, 3vw, 58px);
  }

  .footer-designer-line::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 1px;
    height: 48px;

    transform: translateY(-50%);

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(255, 217, 113, 0.46),
        transparent
      );
  }

}


/* Tablet separation: each group receives its own visual row. */

@media (min-width: 821px) and (max-width: 1180px) {

  .footer-legal-bar {
    row-gap:
      1.8rem;
  }

  .footer-legal-bar nav {
    padding-bottom:
      1.5rem;

    border-bottom:
      1px solid rgba(255, 217, 113, 0.18);
  }

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child {
    padding-right:
      1.5rem;
  }

  .footer-designer-line {
    padding-left:
      1.5rem;

    border-left:
      1px solid rgba(255, 217, 113, 0.18);
  }

}


/* Mobile separation: copyright, links and design credit are distinct. */

@media (max-width: 820px) {

  .footer-legal-bar .footer-copyright,
  .footer-legal-bar > p:first-child {
    padding-bottom:
      1.15rem;

    border-bottom:
      1px solid rgba(255, 217, 113, 0.2);
  }

  .footer-legal-bar nav {
    padding:
      0.15rem
      0
      1.15rem;

    border-bottom:
      1px solid rgba(255, 217, 113, 0.2);
  }

  .footer-designer-line {
    padding-top:
      0.15rem;
  }

}

/* FOOTER LEGAL BAR — COPYRIGHT / PRIVACY SEPARATION FIX — END */


/* ==========================================================
   PRAYER FORM SUBMISSION NOTICE
   ========================================================== */

.prayer-submission-notice {
  position: relative;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.28);
}

.prayer-submission-notice::before {
  content: "";
  position: absolute;
  top: -55px;
  right: -45px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
}

.prayer-submission-notice-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 900;
}

.prayer-submission-notice strong {
  display: block;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.prayer-submission-notice p {
  margin: 7px 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
}

.prayer-submission-notice small {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  line-height: 1.6;
}

/* SUCCESS */

.prayer-submission-notice-success {
  color: #edf9ef;
  border: 1px solid rgba(169, 233, 186, 0.28);
  background:
    linear-gradient(
      145deg,
      rgba(169, 233, 186, 0.09),
      transparent
    ),
    rgba(7, 18, 10, 0.94);
}

.prayer-submission-notice-success::before {
  background: rgba(88, 200, 118, 0.16);
}

.prayer-submission-notice-success
.prayer-submission-notice-icon {
  color: #07130a;
  background:
    linear-gradient(
      135deg,
      #e4f8e9,
      #86d99d
    );
}

/* ERROR */

.prayer-submission-notice-error {
  color: #ffe8e8;
  border: 1px solid rgba(255, 173, 173, 0.3);
  background:
    linear-gradient(
      145deg,
      rgba(255, 105, 105, 0.09),
      transparent
    ),
    rgba(22, 7, 7, 0.94);
}

.prayer-submission-notice-error::before {
  background: rgba(255, 80, 80, 0.15);
}

.prayer-submission-notice-error
.prayer-submission-notice-icon {
  color: #220707;
  background:
    linear-gradient(
      135deg,
      #ffdede,
      #ff9696
    );
}

@media (max-width: 560px) {
  .prayer-submission-notice {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 17px;
  }

  .prayer-submission-notice-icon {
    width: 42px;
    height: 42px;
  }
}