/* ===========================================================
   HIGHER LIFE CHURCH — mobile-first redesign
   - Mobile (default) → Tablet (640px+) → Desktop (1024px+)
   =========================================================== */

:root {
  --c-bg: #1B242B;
  --c-ink: #ffffff;
  --c-mute: rgba(255, 255, 255, 0.78);
  --c-red: #d72027;
  --c-red-hot: #c8102e;
  --c-red-glow: rgba(215, 32, 39, 0.55);
  --c-line: rgba(255, 255, 255, 0.16);
  --c-line-strong: rgba(255, 255, 255, 0.32);
  --font-display: "Bebas Neue", "Oswald", "Impact", sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --header-h: 60px;
  --maxw: 1200px;
  --safe-x: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;          /* single-screen, no scroll */
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;        /* hide scrollbars — content fits in one screen */
}

body {
  position: relative;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--safe-x);
  height: var(--header-h);
  background: linear-gradient(180deg, rgba(27, 36, 43, 0.85) 0%, rgba(27, 36, 43, 0) 100%);
  pointer-events: none; /* let clicks through to hero on edges; re-enabled on brand/toggle */
}
.site-header > * { pointer-events: auto; }

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.site-header__emblem {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.site-header__emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.site-header__title {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.site-header__title-main {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--c-ink);
  white-space: nowrap;
}

.site-header__title-sub {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
}
.site-header__title-sub-line {
  flex: 1;
  height: 1px;
  background: var(--c-line-strong);
  min-width: 8px;
}
.site-header__title-sub-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  color: var(--c-mute);
}

/* hamburger */
.nav-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* X state when open */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   NAVIGATION DROPDOWN
   =========================================================== */
.nav-drawer {
  position: fixed;
  top: var(--header-h);
  right: 0.75rem;
  min-width: 280px;
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - var(--header-h) - 1.5rem);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  z-index: 60;
  padding: 0.5rem 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
}
.nav-drawer__nav::-webkit-scrollbar {
  width: 6px;
}
.nav-drawer__nav::-webkit-scrollbar-track {
  background: transparent;
}
.nav-drawer__nav::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border-radius: 3px;
}
.nav-drawer__link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--c-ink);
  padding: 0.6rem 1.25rem;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
  white-space: nowrap;
}
.nav-drawer__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--c-red); }

/* ===========================================================
   HERO + INFO layout — fits in one viewport
   =========================================================== */
main {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero {
  position: relative;
  width: 100%;
  flex: 1 1 auto;       /* hero takes the available space (top portion) */
  min-height: 0;        /* allow it to shrink so the info section fits */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* content stacks from bottom of hero, compact (no spreading) */
  /* padding accounts for fixed header (top) and breathing room (bottom).
     JS sets --hero-h on :root so font-sizes scale to actual hero height. */
  padding: calc(var(--header-h) + 0.4rem) var(--safe-x) 0.6rem;
  /* Reserve enough room for the full content stack. The min() prevents the
     hero from ever being too short for the type, and JS handles overflow. */
  min-height: 14rem;
}
.hero__bg,
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(1.05) contrast(1.02) brightness(0.78);
}
.hero__vignette {
  background:
    linear-gradient(180deg,
      rgba(27, 36, 43, 0.7) 0%,
      rgba(27, 36, 43, 0.25) 30%,
      rgba(27, 36, 43, 0.45) 70%,
      rgba(27, 36, 43, 0.95) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  /* Stack content normally from top — no spacing tricks.
     Font sizes scale via clamp() to fill the available height naturally.
     transform-origin: bottom left so shrinking grows upward, not toward
     the info section below. */
  transform-origin: bottom left;
  transform: scale(var(--content-scale, 1));
}

/* Wordmark */
.hero__wordmark {
  margin: 0 0 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* don't stretch children — let them shrink to content */
  line-height: 0.85;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
.hero__wordmark-line {
  font-family: var(--font-display);
  /* Scale to hero height: ~13% leaves room for 3 stacked lines (≈33%) of the
     hero's vertical space. JS sets --hero-h to the actual rendered hero
     height, so this scales smoothly with viewport, breakpoints, and rotation.
     Total content stack = ~71% of hero so it never overlaps header or info. */
  font-size: clamp(1.4rem, calc(var(--hero-h, 600px) * 0.13), 18rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  display: block;
}
.hero__wordmark-sub {
  margin-top: 0.1em;
  display: inline-block;       /* shrink-wraps to the text's intrinsic width */
  align-self: flex-start;
  /* CHURCH and the divider sit at ~4.5% of hero height — readable but visually
     subordinate to HIGHER/LIFE above. */
  --sub-font-size: clamp(0.65rem, calc(var(--hero-h, 600px) * 0.045), 7rem);
  font-size: var(--sub-font-size);
  padding-left: 0.4em;         /* optical alignment with letter-spacing — shared by line and divider */
}
.hero__wordmark-line--small {
  font-size: var(--sub-font-size);
  letter-spacing: 0.4em;
  color: var(--c-mute);
  display: block;
  white-space: nowrap;
  width: 100%;                 /* fills the sub-block so its width sets the divider's width */
}

/* Divider with maple leaf — sits inside hero__wordmark-sub and stretches to
   exactly match the CHURCH text's rendered width. */
.hero__divider {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.2em 0 0;
  width: 100%;                 /* matches CHURCH width exactly */
}
.hero__divider-line {
  flex: 1;
  height: 2px;
  background: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.hero__divider-leaf {
  /* The maple leaf image has transparent padding around the leaf shape, so the
     container needs to be larger than the visible CHURCH cap-height for the
     leaf's visible shape to match. We size it to 1.2em so the leaf's visual
     silhouette aligns with the wordmark's cap height. */
  flex: 0 0 1.2em;
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-self: center;
  font-size: var(--sub-font-size);
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(7471%) hue-rotate(355deg) brightness(95%) contrast(115%);
}
.hero__divider-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "Jesus still saves delivers heals" statement */
.hero__statement {
  margin: 0 0 0.3rem;
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.hero__statement-line {
  font-family: var(--font-display);
  /* "Jesus still saves delivers heals" — 3 lines at ~7.5% of hero height = ~21% */
  font-size: clamp(0.85rem, calc(var(--hero-h, 600px) * 0.075), 10rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.hero__statement-line--accent {
  color: var(--c-red);
}

/* Subtitle */
.hero__subtitle {
  margin: 0 0 0.5rem;
  /* Subtitle: ~2.2% of hero height — readable but doesn't dominate */
  font-size: clamp(0.55rem, calc(var(--hero-h, 600px) * 0.022), 3rem);
  line-height: 1.35;
  color: var(--c-mute);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  max-width: 28ch;
}

/* CTA buttons */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  /* Button text: ~1.4% of hero height. min() caps so it doesn't get huge on big screens. */
  font-size: clamp(0.55rem, calc(var(--hero-h, 600px) * 0.014), 2rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  min-height: 30px;
  cursor: pointer;
}
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icon scales with button text so it stays proportional */
  width: clamp(12px, calc(var(--hero-h, 600px) * 0.017), 40px);
  height: clamp(12px, calc(var(--hero-h, 600px) * 0.017), 40px);
  flex: 0 0 clamp(12px, calc(var(--hero-h, 600px) * 0.017), 40px);
}
.btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.btn--primary {
  background: var(--c-red);
  color: var(--c-ink);
  border: 1.5px solid var(--c-red);
  box-shadow: 0 4px 16px rgba(215, 32, 39, 0.35);
}
.btn--primary:hover {
  background: var(--c-red-hot);
  border-color: var(--c-red-hot);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.btn--ghost:hover {
  border-color: var(--c-ink);
  transform: translateY(-1px);
}

/* Button label + shine sweep (GSAP hooks) */
.btn { position: relative; overflow: hidden; }
.btn__label { position: relative; z-index: 2; }
.btn__shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-18deg);
  z-index: 1;
  pointer-events: none;
}

/* ===========================================================
   HERO ATMOSPHERIC EFFECTS — particles + light beam + scroll cue
   =========================================================== */

/* Subtitle word-by-word reveal container */
.hero__subtitle {
  overflow: hidden;
}
.hero__subtitle .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.35;
}
.hero__subtitle .word__inner {
  display: inline-block;
  will-change: transform, opacity;
}
.hero__subtitle br { display: block; content: ""; }

.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  display: block;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 40%,
    transparent 70%
  );
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  opacity: 0;
  will-change: transform, opacity;
}
.particle--1  { --size: 5px; left:  8%; top: 20%; }
.particle--2  { --size: 4px; left: 22%; top: 70%; }
.particle--3  { --size: 7px; left: 45%; top: 35%; }
.particle--4  { --size: 3px; left: 60%; top: 78%; }
.particle--5  { --size: 6px; left: 78%; top: 25%; }
.particle--6  { --size: 4px; left: 88%; top: 55%; }
.particle--7  { --size: 8px; left: 35%; top: 88%; }
.particle--8  { --size: 3px; left: 12%; top: 50%; }
.particle--9  { --size: 5px; left:  5%; top: 45%; }
.particle--10 { --size: 6px; left: 18%; top: 88%; }
.particle--11 { --size: 4px; left: 28%; top: 12%; }
.particle--12 { --size: 7px; left: 38%; top: 60%; }
.particle--13 { --size: 3px; left: 52%; top: 14%; }
.particle--14 { --size: 5px; left: 55%; top: 92%; }
.particle--15 { --size: 4px; left: 68%; top: 42%; }
.particle--16 { --size: 6px; left: 72%; top: 68%; }
.particle--17 { --size: 3px; left: 82%; top: 10%; }
.particle--18 { --size: 8px; left: 92%; top: 38%; }
.particle--19 { --size: 4px; left: 50%; top:  4%; }
.particle--20 { --size: 5px; left: 95%; top: 82%; }

/* ===========================================================
   SERVICE TIMES + ADDRESS (info section) — compact, fits at bottom
   =========================================================== */
.info {
  flex: 0 0 auto;             /* don't grow — only take what it needs */
  /* Two-layer background: top gradient mirrors the bottom of the hero's
     vignette (rgba(27, 36, 43, 0.95) → transparent) so the dark frame
     extends at least 5px into the info section. Below that is the
     solid info background. */
  background:
    linear-gradient(180deg,
      rgba(27, 36, 43, 0.95) 0%,
      rgba(27, 36, 43, 0) 100%),
    var(--c-bg);
  background-size: 100% clamp(5px, 1vh, 16px), 100% 100%;
  background-repeat: no-repeat;
  background-position: top, bottom;
  padding: 0.6rem var(--safe-x) 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}

/* Service times title */
.info__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.75rem, 1.7vh, 1rem);
  letter-spacing: 0.3em;
  color: var(--c-ink);
  text-transform: uppercase;
}
.info__title-line {
  flex: 0 0 auto;
  width: 32px;
  height: 1.5px;
  background: var(--c-red);
}

.info__service-times {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Kids Church announcement — between service times and address */
.info__kids {
  display: flex;
  justify-content: center;
  padding: 0.3rem 0;
  border-top: 1px solid var(--c-line);
}
.kids {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.6vh, 1rem);
  width: 100%;
  max-width: 520px;
  justify-content: center;
}
.kids__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.9;
  flex: 0 0 auto;
}
.kids__title-kids {
  font-family: "Allura", "Brush Script MT", cursive;
  font-size: clamp(1rem, 2.4vh, 1.6rem);
  font-weight: 400;
  color: #f3c14b;            /* warm gold, picks up the red bg from the example */
  letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(243, 193, 75, 0.35);
  line-height: 0.85;
}
.kids__title-church {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.8vh, 1.1rem);
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-left: 0.28em;       /* optical alignment with letter-spacing */
}
.kids__lines {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  line-height: 1;
  border-left: 1px solid var(--c-line-strong);
  padding-left: clamp(0.3rem, 1.2vh, 0.7rem);
}
.kids__line {
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.1vh, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kids__line--white { color: var(--c-ink); }

/* Times row */
.times {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  justify-items: center;
}
.times > .time {
  position: relative;
}
.times > .time:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--c-line);
}
.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2rem;
  padding: 0 0.4rem;
  width: 100%;
}
.time__icon {
  width: clamp(28px, 3.8vh, 40px);
  height: clamp(28px, 3.8vh, 40px);
  border-radius: 50%;
  background: var(--c-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(28px, 3.8vh, 40px);
  box-shadow: 0 0 10px rgba(215, 32, 39, 0.35);
}
.time__icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.time__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.05;
}
.time__day {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 1.5vh, 0.85rem);
  letter-spacing: 0.16em;
  color: var(--c-ink);
}
.time__sub {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.2vh, 0.7rem);
  letter-spacing: 0.16em;
  color: var(--c-mute);
}
.time__hour {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18rem;
  margin-top: 0.05rem;
  width: 100%;
}
.time__hour-num {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.1vh, 1.35rem);
  color: var(--c-ink);
  letter-spacing: 0.02em;
}
.time__hour-meridiem {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.6vh, 0.95rem);
  color: var(--c-red);
  letter-spacing: 0.18em;
}

/* Address row — single horizontal line: pin + address + vertical divider + maple leaf + CANADA */
.info__address {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c-line);
}
.info__pin {
  width: clamp(18px, 2.3vh, 24px);
  height: clamp(18px, 2.3vh, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.info__pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.info__address-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-align: left;
}
.info__address-line1 {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.6vh, 0.9rem);
  letter-spacing: 0.16em;
  color: var(--c-ink);
  line-height: 1.1;
}
.info__address-line2 {
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.25vh, 0.72rem);
  letter-spacing: 0.2em;
  color: var(--c-mute);
  line-height: 1.1;
}
/* vertical divider between address and country */
.info__address > .info__address-divider {
  width: 1px;
  height: 1.8em;
  background: var(--c-line-strong);
  flex: 0 0 1px;
}
.info__country {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.info__country-leaf {
  width: clamp(14px, 2.1vh, 20px);
  height: clamp(14px, 2.1vh, 20px);
  display: inline-flex;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(7471%) hue-rotate(355deg) brightness(95%) contrast(115%);
}
.info__country-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.info__country span {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.6vh, 0.9rem);
  letter-spacing: 0.3em;
  color: var(--c-ink);
}

/* ===========================================================
   TABLET (640px+)
   =========================================================== */
@media (min-width: 640px) {
  :root {
    --header-h: 64px;
    --safe-x: 2rem;
  }

  /* Header scales with viewport height so it stays balanced against the
     hero on tall screens. */
  .site-header__emblem { flex-basis: clamp(32px, 4.5vh, 56px); width: clamp(32px, 4.5vh, 56px); height: clamp(32px, 4.5vh, 56px); }
  .site-header__title-main { font-size: clamp(1rem, 2.9vh, 2.2rem); }
  .site-header__title-sub-text { font-size: clamp(0.55rem, 1.7vh, 1.3rem); }
  .nav-toggle__bar { width: clamp(20px, 2.6vh, 30px); height: 2px; }

  .hero {
    padding: calc(var(--header-h) + 1rem) var(--safe-x) 1.5rem;
  }
  /* Hero fonts scale with --hero-h (set by JS) via the base rules.
     No per-breakpoint overrides are needed — the base clamp()s now
     have raised max values (18rem wordmark, 10rem statement, etc.)
     so the content fills the available space at any hero height. */
  .hero__divider { gap: 0.6rem; }

  /* Info section: scale fonts with viewport height so service times,
     address, kids, etc. read at the right size on tall viewports. */
  .info__title { font-size: clamp(0.7rem, 1.9vh, 1.4rem); }
  .info__title-line { width: clamp(28px, 4.5vh, 70px); }
  .time__icon { width: clamp(32px, 4.5vh, 64px); height: clamp(32px, 4.5vh, 64px); flex-basis: clamp(32px, 4.5vh, 64px); }
  .time__day { font-size: clamp(0.6rem, 1.8vh, 1.4rem); }
  .time__sub { font-size: clamp(0.5rem, 1.4vh, 1.1rem); }
  .time__hour-num { font-size: clamp(1rem, 2.9vh, 2.1rem); }
  .time__hour-meridiem { font-size: clamp(0.7rem, 2vh, 1.5rem); }

  .info__address-line1 { font-size: clamp(0.7rem, 2vh, 1.4rem); }
  .info__address-line2 { font-size: clamp(0.55rem, 1.5vh, 1.1rem); }
  .info__country { gap: clamp(0.4rem, 1.1vh, 0.9rem); }
  .info__country span { font-size: clamp(0.7rem, 2vh, 1.4rem); }
  .info__country-leaf { width: clamp(14px, 2.2vh, 28px); height: clamp(14px, 2.2vh, 28px); }
  .info__pin { width: clamp(18px, 2.9vh, 36px); height: clamp(18px, 2.9vh, 36px); }

  .kids__title-kids { font-size: clamp(1.2rem, 3.2vh, 2.5rem); }
  .kids__title-church { font-size: clamp(0.8rem, 2.1vh, 1.6rem); }
  .kids__lines { padding-left: clamp(0.4rem, 1.3vh, 1rem); }
  .kids__line { font-size: clamp(0.55rem, 1.3vh, 1rem); }
}

/* ===========================================================
   DESKTOP (1024px+)
   - Uses min(vw, vh) for content so it scales with the SHORTER axis
     when the viewport is wider than tall (landscape).
   =========================================================== */
@media (min-width: 1024px) {
  :root {
    --header-h: 64px;
    /* Larger screens have more horizontal real estate, so push content
       further from the edges. The 5vw multiplier scales gracefully with
       viewport width; the 3rem floor keeps it from feeling cramped at the
       1024px breakpoint, and the 8rem ceiling stops it from getting
       absurdly wide on 4K displays. */
    --safe-x: clamp(3rem, 5vw, 8rem);
  }

  /* Always show the hamburger (per user request) — no inline nav on desktop.
     Header scales with viewport height so it stays balanced against the
     hero on tall viewports. Multipliers and caps are calibrated so content
     fills the space at 1500h+. */
  .site-header__emblem { flex-basis: clamp(36px, 5vh, 60px); width: clamp(36px, 5vh, 60px); height: clamp(36px, 5vh, 60px); }
  .site-header__title-main { font-size: clamp(1.1rem, 3.4vh, 2.6rem); }
  .site-header__title-sub-text { font-size: clamp(0.6rem, 1.9vh, 1.5rem); }
  .nav-toggle__bar { width: clamp(22px, 2.8vh, 34px); height: 2px; }
  .nav-drawer { right: clamp(1.5rem, 3vw, 3rem); min-width: 320px; }

  .hero {
    /* on desktop, content stacks from bottom (compact) */
    justify-content: flex-end;
    padding: calc(var(--header-h) + 0.5rem) var(--safe-x) 0.75rem;
  }
  .hero__content {
    max-width: 720px;
  }
  /* Hero fonts now scale with --hero-h (set by JS), so no per-breakpoint
     font overrides are needed for the hero. The base clamp()s in the
     mobile-first rules use --hero-h with raised max caps (18rem wordmark,
     10rem statement, etc.) so the content fills the available space at
     any hero height. */

  /* Info section: scale fonts and icons with viewport height so service
     times, address, kids, etc. read at the right size on tall viewports. */
  .info { padding: 0.8rem var(--safe-x) 1rem; gap: 0.5rem; }
  .info__title { font-size: clamp(0.7rem, 2.2vh, 1.7rem); gap: 0.8rem; }
  .info__title-line { width: clamp(32px, 5vh, 80px); }

  .time__icon { width: clamp(36px, 5.5vh, 80px); height: clamp(36px, 5.5vh, 80px); flex-basis: clamp(36px, 5.5vh, 80px); }
  .time__day { font-size: clamp(0.65rem, 2vh, 1.6rem); }
  .time__sub { font-size: clamp(0.55rem, 1.6vh, 1.2rem); }
  .time__hour-num { font-size: clamp(1.1rem, 3.3vh, 2.5rem); }
  .time__hour-meridiem { font-size: clamp(0.75rem, 2.2vh, 1.7rem); }

  .info__pin { width: clamp(20px, 3.4vh, 44px); height: clamp(20px, 3.4vh, 44px); }
  .info__address-line1 { font-size: clamp(0.75rem, 2.2vh, 1.7rem); }
  .info__address-line2 { font-size: clamp(0.6rem, 1.7vh, 1.3rem); }
  .info__country { gap: clamp(0.4rem, 1.2vh, 1rem); }
  .info__country span { font-size: clamp(0.75rem, 2.2vh, 1.7rem); }
  .info__country-leaf { width: clamp(16px, 2.7vh, 36px); height: clamp(16px, 2.7vh, 36px); }

  .kids__title-kids { font-size: clamp(1.4rem, 3.6vh, 3rem); }
  .kids__title-church { font-size: clamp(0.9rem, 2.4vh, 2rem); letter-spacing: 0.32em; }
  .kids__lines { padding-left: clamp(0.5rem, 1.5vh, 1.2rem); }
  .kids__line { font-size: clamp(0.6rem, 1.5vh, 1.1rem); }
}

/* ===========================================================
   SHORT VIEWPORT (height < 700px) — hero is shorter, so fonts
   auto-scale via --hero-h. Only info-section and info-padding
   need explicit adjustments here.
   =========================================================== */
@media (max-height: 700px) {
  .hero {
    padding: calc(var(--header-h) + 0.3rem) var(--safe-x) 0.4rem;
  }

  .info { padding: 0.5rem var(--safe-x) 0.6rem; gap: 0.35rem; }
  .info__title { font-size: clamp(0.7rem, 1.4vh, 0.9rem); }
  .time__icon { width: clamp(26px, 3.5vh, 36px); height: clamp(26px, 3.5vh, 36px); flex-basis: clamp(26px, 3.5vh, 36px); }
  .time__day { font-size: clamp(0.6rem, 1.3vh, 0.78rem); }
  .time__sub { font-size: clamp(0.5rem, 1.1vh, 0.65rem); }
  .time__hour-num { font-size: clamp(0.9rem, 2vh, 1.25rem); }
  .time__hour-meridiem { font-size: clamp(0.7rem, 1.5vh, 0.9rem); }
  .info__pin { width: clamp(16px, 2.2vh, 22px); height: clamp(16px, 2.2vh, 22px); }
  .info__address-line1 { font-size: clamp(0.7rem, 1.5vh, 0.9rem); }
  .info__address-line2 { font-size: clamp(0.55rem, 1.2vh, 0.7rem); }
  .info__country span { font-size: clamp(0.7rem, 1.5vh, 0.9rem); }
  .info__country-leaf { width: clamp(14px, 2vh, 18px); height: clamp(14px, 2vh, 18px); }
  .kids__title-kids { font-size: clamp(1.1rem, 2.2vh, 1.6rem); }
  .kids__title-church { font-size: clamp(0.8rem, 1.6vh, 1.1rem); }
  .kids__line { font-size: clamp(0.55rem, 1vh, 0.7rem); }
  .kids__lines { padding-left: clamp(0.4rem, 0.9vh, 0.7rem); }
}

/* ===========================================================
   MICRO VIEWPORT (< 360px width) — extremely small screens
   or high-zoom levels. Hero fonts scale via --hero-h automatically;
   here we only tweak header, CHURCH letter-spacing, and info section.
   =========================================================== */
@media (max-width: 360px) {
  :root {
    --header-h: 48px;          /* smaller header to save vertical space */
    --safe-x: 0.5rem;          /* tighter horizontal padding */
  }

  /* Header: shrink logo + text + hamburger */
  .site-header {
    padding: 0.4rem var(--safe-x);
  }
  .site-header__emblem { flex-basis: 24px; width: 24px; height: 24px; }
  .site-header__title-main { font-size: 0.78rem; letter-spacing: 0.08em; }
  .site-header__title-sub { gap: 0.2rem; margin-top: 0.1rem; }
  .site-header__title-sub-text { font-size: 0.5rem; letter-spacing: 0.24em; }
  .nav-toggle { width: 28px; height: 28px; gap: 4px; }
  .nav-toggle__bar { width: 18px; }
  .nav-drawer { right: 0.5rem; min-width: 220px; }

  /* CHURCH letter-spacing needs to be tighter at very small sizes so it fits */
  .hero__wordmark-line--small { letter-spacing: 0.3em; padding-left: 0.3em; }

  /* Info section: smaller icons + text */
  .info { padding: 0.4rem var(--safe-x) 0.5rem; gap: 0.25rem; }
  .info__title { font-size: clamp(0.55rem, 1.1vh, 0.7rem); letter-spacing: 0.24em; gap: 0.4rem; }
  .info__title-line { width: 20px; }
  .time { gap: 0.1rem; padding: 0 0.15rem; }
  .time__icon { width: clamp(20px, 2.6vh, 28px); height: clamp(20px, 2.6vh, 28px); flex-basis: clamp(20px, 2.6vh, 28px); }
  .time__day { font-size: clamp(0.5rem, 1vh, 0.65rem); letter-spacing: 0.1em; }
  .time__sub { font-size: clamp(0.42rem, 0.85vh, 0.55rem); letter-spacing: 0.1em; }
  .time__hour-num { font-size: clamp(0.7rem, 1.6vh, 0.95rem); }
  .time__hour-meridiem { font-size: clamp(0.55rem, 1.2vh, 0.75rem); letter-spacing: 0.12em; }
  .time__hour { gap: 0.15rem; }

  /* Kids section: even smaller */
  .info__kids { padding: 0.25rem 0; }
  .kids { gap: clamp(0.3rem, 1vh, 0.6rem); }
  .kids__title-kids { font-size: clamp(0.85rem, 1.8vh, 1.2rem); }
  .kids__title-church { font-size: clamp(0.6rem, 1.2vh, 0.85rem); letter-spacing: 0.2em; }
  .kids__lines { padding-left: clamp(0.25rem, 0.7vh, 0.5rem); }
  .kids__line { font-size: clamp(0.45rem, 0.9vh, 0.6rem); letter-spacing: 0.14em; }

  /* Address: compact */
  .info__address { padding-top: 0.3rem; gap: 0.25rem; }
  .info__pin { width: clamp(12px, 1.6vh, 16px); height: clamp(12px, 1.6vh, 16px); }
  .info__address-line1 { font-size: clamp(0.55rem, 1.2vh, 0.75rem); letter-spacing: 0.1em; }
  .info__address-line2 { font-size: clamp(0.42rem, 0.9vh, 0.58rem); letter-spacing: 0.14em; }
  .info__country { gap: 0.25rem; }
  .info__country span { font-size: clamp(0.55rem, 1.2vh, 0.75rem); letter-spacing: 0.2em; }
  .info__country-leaf { width: clamp(10px, 1.4vh, 14px); height: clamp(10px, 1.4vh, 14px); }
  .info__address > .info__address-divider { height: 1.4em; }
}

/* ===========================================================
   BACK BUTTON (used on coming-soon + contact pages)
   =========================================================== */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  pointer-events: auto;
}
.back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--c-red);
  color: var(--c-red);
}
.back-btn__arrow {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
}

/* ===========================================================
   COMING SOON + CONTACT PAGES
   Shared layout: full-screen centered content, dark bg
   =========================================================== */
.coming-soon,
.contact {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 1rem) var(--safe-x) 2rem;
  background: var(--c-bg);
}
.coming-soon__content,
.contact__content {
  max-width: 560px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 2vh, 1.25rem);
}
.coming-soon__badge,
.contact__badge {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.6vh, 0.95rem);
  letter-spacing: 0.3em;
  color: var(--c-red);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--c-red);
  border-radius: 999px;
  background: rgba(215, 32, 39, 0.08);
}
.coming-soon__title,
.contact__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vh, 5rem);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
.coming-soon__divider,
.contact__divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 360px;
}
.coming-soon__divider-line,
.contact__divider-line {
  flex: 1;
  height: 2px;
  background: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.coming-soon__divider-leaf,
.contact__divider-leaf {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(7471%) hue-rotate(355deg) brightness(95%) contrast(115%);
}
.coming-soon__divider-leaf img,
.contact__divider-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.coming-soon__message,
.contact__message {
  margin: 0;
  font-size: clamp(0.85rem, 2vh, 1.1rem);
  line-height: 1.5;
  color: var(--c-mute);
  max-width: 36ch;
}
.coming-soon__btn,
.contact__btn {
  margin-top: clamp(0.5rem, 1.5vh, 1rem);
}
.coming-soon__btn .btn__icon img,
.contact__btn .btn__icon img {
  filter: brightness(0) invert(1);
}

/* ===========================================================
   CONTACT PAGE — contact methods (email + address)
   =========================================================== */
.contact__methods {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.8vh, 1rem);
  width: 100%;
  max-width: 440px;
  margin-top: clamp(0.5rem, 1.5vh, 1rem);
}
.contact__method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.8rem, 2vh, 1.1rem) clamp(1rem, 2.5vw, 1.4rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-ink);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-align: left;
}
.contact__method:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-red);
  transform: translateY(-2px);
}

/* ===========================================================
   GIVE PAGE — Ways to Give (e-Transfer, PayPal, Cheques, Crypto)
   =========================================================== */
.give {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tighter top padding (was 1rem below header, now just header).
     Tighter bottom padding. Side padding scales down on tiny
     screens so content has more room to fit. */
  padding: calc(var(--header-h) + 0.4rem) clamp(0.5rem, 2vw, var(--safe-x)) 0.6rem;
  background: var(--c-bg);
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the scrollbar (it's just a thin chrome sliver on mobile
     anyway, and the design language is "single screen, no chrome").
     Scroll still works — just no visible bar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.give::-webkit-scrollbar { display: none; }
/* On the give page specifically, allow body scrolling when the
   content stack is taller than the viewport (mobile, micro, short
   landscape orientations). The give section has more rows than
   contact/coming-soon, so body needs to scroll.

   CRITICAL: the base html/body rule sets overflow:hidden on BOTH
   the html and body elements. That blocks scrolling entirely even
   if body overflow-y is auto — wheel events get eaten by the
   outer html element. We must override BOTH html and body to allow
   scroll. The scrollbar is hidden via scrollbar-width/webkit rules
   so the design language stays "single-screen, no chrome". */
html:has(.give) {
  overflow: hidden auto;
  height: auto;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html:has(.give)::-webkit-scrollbar { display: none; }
body:has(.give) {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body:has(.give)::-webkit-scrollbar { display: none; }
body:has(.give) main {
  height: auto;
  min-height: 100dvh;
}
.give__content {
  max-width: 880px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Tightened gap so the stack fits more compactly on small screens. */
  gap: clamp(0.3rem, 1.1vh, 1.1rem);
}
.give__badge {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 1.4vh, 0.95rem);
  letter-spacing: 0.3em;
  color: var(--c-red);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-red);
  border-radius: 999px;
  background: rgba(215, 32, 39, 0.08);
}
.give__title {
  margin: 0;
  font-family: var(--font-display);
  /* Smaller max + tighter vh multiplier so title fits at 360×740. */
  font-size: clamp(1.9rem, 5.5vh, 4.5rem);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
.give__divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 360px;
}
.give__divider-line {
  flex: 1;
  height: 2px;
  background: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.give__divider-leaf {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(7471%) hue-rotate(355deg) brightness(95%) contrast(115%);
}
.give__divider-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.give__message {
  margin: 0;
  font-size: clamp(0.75rem, 1.6vh, 1.05rem);
  line-height: 1.4;
  color: var(--c-mute);
  max-width: 40ch;
}

/* Three primary giving methods — horizontal cards on desktop, stacked on mobile */
.give__methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.4rem, 1.1vh, 1rem);
  width: 100%;
  margin-top: clamp(0.2rem, 0.8vh, 0.9rem);
}
@media (min-width: 720px) {
  .give__methods {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.6rem, 1.4vw, 1rem);
  }
}
.give__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.25rem, 0.9vh, 0.7rem);
  /* Tighter card padding on small screens. */
  padding: clamp(0.55rem, 1.6vh, 1.4rem) clamp(0.6rem, 1.8vw, 1.2rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  color: var(--c-ink);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  /* Critical: grid items default to min-width: auto which prevents
     shrinking below content size. Interac's wider icon would push
     the card past its column on narrow viewports without this. */
  min-width: 0;
  overflow: hidden;
}
.give__method:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-red);
  transform: translateY(-2px);
}
.give__method-icon {
  flex: 0 0 auto;
  /* Icon size keyed off height so Interac's wider logo matches
     the visual weight of the square PayPal/Cheques icons.
     Smaller cap + tighter vh multiplier so the icon row doesn't
     eat the whole stack on small screens. */
  height: clamp(40px, 7vh, 96px);
  min-width: clamp(40px, 7vh, 96px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* If the Interac image is still wider than its column, scale it
     down rather than overflowing. Aspect ratio is preserved. */
  max-width: 100%;
}
.give__method-icon img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.give__method-label {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.5vh, 1.1rem);
  letter-spacing: 0.22em;
  color: var(--c-red);
}
.give__method-value {
  font-size: clamp(0.65rem, 1.3vh, 0.95rem);
  line-height: 1.35;
  color: var(--c-ink);
  word-break: break-word;
}
a.give__method-value {
  text-decoration: none;
  transition: color 0.15s ease;
}
a.give__method-value:hover { color: var(--c-red); }

/* Cryptocurrency panel — outlined container holding the four coins */
.give__crypto {
  width: 100%;
  max-width: 720px;
  margin-top: clamp(0.3rem, 1vh, 1rem);
  /* Tighter padding so the panel doesn't take the full viewport. */
  padding: clamp(0.4rem, 1vh, 1rem) clamp(0.5rem, 1.6vw, 1.2rem)
           clamp(0.5rem, 1.4vh, 1.5rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  position: relative;
}
.give__crypto-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: calc(clamp(0.4rem, 1vh, 1rem) * -1 + 0.85rem);
  margin-bottom: clamp(0.3rem, 0.9vh, 1rem);
  background: var(--c-bg);
  padding: 0 0.6rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.give__crypto-title {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.7vh, 1.25rem);
  letter-spacing: 0.18em;
  color: var(--c-ink);
  white-space: nowrap;
}
.give__crypto-line {
  display: none; /* the panel border itself is the visual rail */
}
.give__crypto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.3rem, 0.9vh, 1rem);
}
@media (max-width: 520px) {
  .give__crypto-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.give__coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.2rem, 0.7vh, 0.5rem);
  padding: clamp(0.3rem, 0.9vh, 0.8rem) 0.25rem;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.give__coin:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}
.give__coin-icon {
  width: clamp(36px, 5.5vh, 68px);
  height: clamp(36px, 5.5vh, 68px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.give__coin-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.give__coin-name {
  font-size: clamp(0.6rem, 1.2vh, 0.85rem);
  letter-spacing: 0.06em;
  color: var(--c-ink);
}

.give__thanks {
  margin: 0;
  font-size: clamp(0.6rem, 1.2vh, 0.85rem);
  letter-spacing: 0.06em;
  color: var(--c-mute);
  font-style: italic;
  max-width: 40ch;
  line-height: 1.35;
}

/* ===========================================================
   PAGE-LOAD SLIDE
   The inline <script> in <head> immediately sets <main> to
   translate3d(100%, 0, 0) and adds .page-prep to <html>. That
   .page-prep class sets every entry-animated element to its
   animation START state (offset, faded out, scaled down, etc.)
   BEFORE the deferred GSAP CDN script even loads. The result:
   the user never sees the final layout briefly before the entry
   animation begins — elements are already at their starting
   offsets when the slide brings the page into view.

   gsap.js later removes .page-prep (after the entry animation
   completes) so the natural CSS takes over for future renders.
   =========================================================== */

/* Ensure <main> can be hardware-accelerated and transformed
   without breaking the single-viewport layout. */
main {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Hero (index) entry-animated elements — pre-entry start state */
.page-prep .site-header              { opacity: 0; transform: translateY(-24px); }
.page-prep .site-header__emblem      { opacity: 0; transform: scale(0.6); }
.page-prep .site-header__title-main  { opacity: 0; transform: translateX(-12px); }
.page-prep .site-header__title-sub-text { opacity: 0; transform: translateY(4px); }
.page-prep .nav-toggle               { opacity: 0; transform: scale(0.5); }
.page-prep .hero__bg img             { opacity: 0; transform: scale(1.25); }
.page-prep .hero__vignette           { opacity: 0; }
.page-prep .hero__wordmark-line      { opacity: 0; transform: translateY(30px); }
.page-prep .hero__wordmark-line--small { opacity: 0; transform: translateY(14px); }
.page-prep .hero__divider-line       { opacity: 0; transform: scaleX(0); }
.page-prep .hero__divider-leaf       { opacity: 0; transform: scale(0) rotate(-90deg); }
.page-prep .hero__statement-line     { opacity: 0; transform: translateY(16px); }
.page-prep .hero__subtitle           { opacity: 0; transform: translateY(12px); }
.page-prep .hero__actions .btn       { opacity: 0; transform: translateY(18px) scale(0.92); }
.page-prep .info__title              { opacity: 0; transform: translateY(12px); }
.page-prep .info__title-line         { opacity: 0; transform: scaleX(0); }
.page-prep .times > .time            { opacity: 0; transform: translateY(12px); }
.page-prep .kids                     { opacity: 0; transform: translateY(10px); }
.page-prep .info__address            { opacity: 0; transform: translateY(10px); }
.page-prep .info__pin                { opacity: 0; transform: translateY(-40px); }
/* Subtitle word__inner is hidden by gsap.fromTo in animateSubtitleWords,
   not by CSS, because the wrap happens AFTER .page-prep is applied and
   the spans don't exist at pre-entry time. */

/* Contact / coming-soon entry-animated elements — pre-entry start state */
.page-prep .back-btn                 { opacity: 0; transform: translateX(20px); }
.page-prep .contact, .page-prep .coming-soon { opacity: 0; }
.page-prep .contact__badge, .page-prep .coming-soon__badge {
  opacity: 0; transform: translateY(16px) scale(0.85);
}
.page-prep .contact__title, .page-prep .coming-soon__title {
  opacity: 0; transform: translateY(28px);
}
.page-prep .contact__divider-line, .page-prep .coming-soon__divider-line {
  opacity: 0; transform: scaleX(0);
}
.page-prep .contact__divider-leaf, .page-prep .coming-soon__divider-leaf {
  opacity: 0; transform: scale(0) rotate(-120deg);
}
.page-prep .contact__message, .page-prep .coming-soon__message {
  opacity: 0; transform: translateY(14px);
}
.page-prep .contact__btn, .page-prep .coming-soon__btn {
  opacity: 0; transform: translateY(18px) scale(0.92);
}
.page-prep .contact__method          { opacity: 0; transform: translateX(-20px); }

/* Give page pre-entry start state (matches .give elements below) */
.page-prep .give                     { opacity: 0; }
.page-prep .give__method             { opacity: 0; transform: translateY(14px); }
.page-prep .give__crypto             { opacity: 0; transform: translateY(14px); }
.page-prep .give__coin               { opacity: 0; transform: scale(0.7); }
.page-prep .give__thanks             { opacity: 0; transform: translateY(8px); }

.contact__method-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 12px rgba(215, 32, 39, 0.35);
}
.contact__method-icon img,
.contact__method-icon svg {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.contact__method-label {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.6vh, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--c-red);
  display: block;
  margin-bottom: 0.15rem;
}
.contact__method-value {
  font-size: clamp(0.85rem, 1.9vh, 1rem);
  color: var(--c-ink);
  font-weight: 500;
  word-break: break-word;
}

/* ===========================================================
   A11y: reduced motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===========================================================
   GSAP-DRIVEN UI ELEMENTS
   =========================================================== */

/* Service-time icon "ping" ring (created by JS on hover) */
.time__icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-red);
  pointer-events: none;
  z-index: -1;
}

/* Page transition overlay (created by JS on link click) */
.page-transition {
  will-change: clip-path;
}

/* Cursor follower removed — no longer needed */

/* ===========================================================
   ABOUT US PAGE — pastors Phil & Jamie Hutchings bio
   Long-form bio content. Same dark theme + Bebas/Montserrat
   type system as contact/give/coming-soon. Body scroll is
   enabled (same pattern as the give page) so the multi-
   paragraph bio fits on short viewports.
   =========================================================== */
.about {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;        /* establishes a stacking context so .about__hero (fixed) + .about__content (relative) layer correctly */
  /* Tighter top padding below header + comfortable bottom. Side
     padding scales down on tiny screens so the card stays legible.
     Left padding accounts for the .about__hero panel on desktop
     (so the content doesn't sit on top of the photo). */
  padding: calc(var(--header-h) + 0.4rem) clamp(0.5rem, 2vw, var(--safe-x)) 0.6rem;
  background: var(--c-bg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.about::-webkit-scrollbar { display: none; }

/* Pastors photo — full-bleed background layer. position:fixed
   so it never affects the content's layout, fills the entire
   viewport edge-to-edge, and the .about__content / .about__card
   (text container) sit on top of it as a translucent overlay.

   CRITICAL — the global <main> rule below sets
     main { transform: translate3d(0,0,0); backface-visibility: hidden }
   to GPU-accelerate the index page. A non-`none` transform on
   any ancestor promotes that ancestor to the containing block
   for position:fixed descendants, which would drag the hero
   off-screen whenever main scrolls. We override main's transform
   and backface-visibility ONLY when the about page is active so
   the hero stays anchored to the viewport. On viewports
   narrower than 720px the panel becomes a short top banner. */
main:has(.about) {
  transform: none;
  backface-visibility: visible;
}
.about__hero {
  position: fixed;
  inset: 0;                  /* top/right/bottom/left: 0 — full viewport */
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  /* Hard-clip anything that would render above/outside the panel. */
  clip-path: inset(0);
  z-index: 0;                /* behind everything (content is z-index 1) */
  pointer-events: none;      /* never intercept clicks intended for content */
}
/* Dark scrim overlay on top of the photo — ensures the white
   text and the bio card's translucent surface stay readable
   against any part of the photo. Fades top-to-bottom so the
   heads of the photo (top of image) stay most visible. */
.about__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(27, 36, 43, 0.55) 0%,
      rgba(27, 36, 43, 0.35) 30%,
      rgba(27, 36, 43, 0.45) 60%,
      rgba(27, 36, 43, 0.75) 100%
    );
  pointer-events: none;
}
.about__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  object-fit: cover;
  object-position: center top;  /* show the heads (top of portrait photo) — the bottom of the photo is naturally cropped on landscape viewports, which is acceptable for a full-bleed background */
  /* No margins, padding, or transforms on the image itself. */
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}
@media (max-width: 719px) {
  .about__hero {
    width: 100%;
    height: clamp(180px, 36vh, 260px);
    max-height: clamp(180px, 36vh, 260px);
  }
  .about__hero-img {
    max-height: clamp(180px, 36vh, 260px);
  }
}

/* Same body-scroll override used on the give page — the about
   content is taller than a single viewport on mobile/micro/short
   landscape, so the body itself needs to scroll. CRITICAL: the
   base html/body rule sets overflow:hidden on BOTH, so we MUST
   override BOTH html and body to allow scroll. */
html:has(.about) {
  overflow: hidden auto;
  height: auto;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html:has(.about)::-webkit-scrollbar { display: none; }
body:has(.about) {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body:has(.about)::-webkit-scrollbar { display: none; }
body:has(.about) main {
  height: auto;
  min-height: 100dvh;
}

.about__content {
  position: relative;        /* z-index context — sits on top of the fixed .about__hero */
  z-index: 1;
  max-width: 980px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1.1vh, 1rem);
}

.about__badge {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 1.4vh, 0.95rem);
  letter-spacing: 0.3em;
  color: var(--c-red);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-red);
  border-radius: 999px;
  background: rgba(215, 32, 39, 0.08);
}

.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vh, 4.5rem);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.about__divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 360px;
}
.about__divider-line {
  flex: 1;
  height: 2px;
  background: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.about__divider-leaf {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(7471%) hue-rotate(355deg) brightness(95%) contrast(115%);
}
.about__divider-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* H2 subtitle naming the pastors — sits between the divider
   and the bio card. Display font, white ink, narrower width so
   it reads as a label rather than a heading. */
.about__subtitle {
  margin: 0;
  margin-top: clamp(0.1rem, 0.4vh, 0.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vh, 1.65rem);
  letter-spacing: 0.06em;
  color: var(--c-ink);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  max-width: 32ch;
}

/* The bio card — sits on top of the full-bleed pastors photo
   as a translucent panel. The photo shows through behind the
   text so the image IS the card's background, exactly as
   requested. */
.about__card {
  display: block;
  width: 100%;
  max-width: 720px;
  margin-top: clamp(0.2rem, 0.8vh, 0.9rem);
  padding: clamp(0.8rem, 2.4vh, 1.8rem) clamp(0.8rem, 2.5vw, 1.6rem);
  background: rgba(27, 36, 43, 0.78);  /* the page bg color, mostly opaque so the text reads cleanly over the photo */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.about__bio {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.8vh, 1rem);
  text-align: left;
}

.about__paragraph {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.85vh, 1rem);
  line-height: 1.6;
  color: var(--c-mute);
  /* Slightly lighter than the standard --c-mute so the body text
     stays readable inside the card. */
  color: rgba(255, 255, 255, 0.86);
  /* Text balance helps the first/last lines of each paragraph
     render evenly without awkward orphans on small screens. */
  text-wrap: pretty;
}

/* "Back to Home" CTA — same .btn--primary style as contact/give,
   but .about__btn rules add margin so it doesn't crowd the card. */
.about__btn {
  margin-top: clamp(0.5rem, 1.6vh, 1.1rem);
}

/* ===========================================================
   STATEMENT OF FAITH SECTION — sits below the bio card,
   inside the same .about scroll container. Same theme tokens
   as the rest of the page (red accent, display font, dark
   translucent cards over the photo background).
   =========================================================== */
.about__faith {
  width: 100%;
  max-width: 880px;
  margin-top: clamp(2rem, 5vh, 3.6rem);
  padding-top: clamp(1.5rem, 3.5vh, 2.6rem);
  /* A subtle separator line above the section so it visually
     breaks from the bio block. */
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.4rem, 1.4vh, 1.2rem);
}

/* The faith section re-uses the existing .about__badge /
   .about__title / .about__divider classes, but its instances
   get a bit more vertical breathing room before the list
   begins. */
.about__faith-badge {
  margin-bottom: clamp(0.1rem, 0.4vh, 0.4rem);
}
.about__faith-title {
  font-size: clamp(1.6rem, 4.6vh, 3.6rem);
}

/* Ordered list of 9 doctrines. Each item is its own translucent
   card with a red-accent number, a display-font title, the
   scripture references in small italicized text, and the body
   paragraph below. */
.about__faith-list {
  list-style: none;
  margin: clamp(0.6rem, 1.8vh, 1.2rem) 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2.2vh, 1.6rem);
  counter-reset: faith;
}
.about__faith-item {
  counter-increment: faith;
  position: relative;
  padding: clamp(0.9rem, 2.6vh, 1.8rem) clamp(0.9rem, 2.6vw, 1.6rem) clamp(0.9rem, 2.6vh, 1.8rem) clamp(2.6rem, 7vw, 4rem);
  background: rgba(27, 36, 43, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-red);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vh, 0.7rem);
  text-align: left;
}
/* Big red ordinal number on the left side of each card. */
.about__faith-item::before {
  content: counter(faith, decimal-leading-zero);
  position: absolute;
  top: clamp(0.7rem, 2vh, 1.2rem);
  left: clamp(0.7rem, 2vw, 1.2rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vh, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--c-red);
  line-height: 1;
  text-shadow: 0 0 8px rgba(215, 32, 39, 0.45);
}
.about__faith-item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vh, 1.45rem);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.about__faith-item-refs {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1.4vh, 0.82rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-red);
  opacity: 0.92;
  line-height: 1.4;
}
.about__faith-item-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.75vh, 0.95rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

/* Pre-entry start state for about page (matches .about elements).
   The inline <script> in <head> adds .page-prep to <html>, so these
   styles set the entry-animated elements to their animation START
   state before the deferred GSAP CDN script even loads. The entry
   timeline then animates them forward to their natural end state. */
.page-prep .about                    { opacity: 0; }
.page-prep .about__hero              { opacity: 0; }
.page-prep .about__subtitle          { opacity: 0; transform: translateY(12px); }
.page-prep .about__card              { opacity: 0; transform: translateY(18px); }
.page-prep .about__paragraph         { opacity: 0; transform: translateY(10px); }
.page-prep .about__btn               { opacity: 0; transform: translateY(18px) scale(0.92); }
.page-prep .about__faith             { opacity: 0; }
.page-prep .about__faith-badge       { opacity: 0; transform: translateY(12px) scale(0.85); }
.page-prep .about__faith-title       { opacity: 0; transform: translateY(20px); }
.page-prep .about__faith-list        { opacity: 0; transform: translateY(14px); }
.page-prep .about__faith-item        { opacity: 0; transform: translateY(14px); }

/* ===========================================================
   HIGHER LIFE PENTECOSTAL FELLOWSHIP PAGE
   Mirrors the about page layout (full-bleed hero image + body
   scroll) but with a warm-amber/orange accent palette so the
   page reads as part of the same family as the rest of the
   site while leaning into the fiery Pentecostal/revival tone
   of the fellowship art (Canadian flag, Toronto skyline,
   seal, congregation).

   Tokens:
   --c-fellowship-amber : primary warm accent (replaces the
                           standard --c-red for the page).
   --c-fellowship-ember : deeper ember orange (callouts, slogan).
   --c-fellowship-glow  : soft glow tint matching the amber.
   =========================================================== */
.fellowship {
  --c-red: #f3a51c;                 /* primary accent on this page (warm amber) */
  --c-red-hot: #ffb835;             /* hover/bright variant */
  --c-red-glow: rgba(243, 165, 28, 0.55);
  --c-fellowship-ember: #d72027;    /* secondary accent — kept red for the "fire" callout */
  --c-fellowship-ember-glow: rgba(215, 32, 39, 0.45);
  --c-fellowship-glow: rgba(243, 165, 28, 0.18);

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: calc(var(--header-h) + 0.4rem) clamp(0.5rem, 2vw, var(--safe-x)) 0.6rem;
  background: var(--c-bg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fellowship::-webkit-scrollbar { display: none; }

/* Override the global main GPU transform for the fellowship page
   so the fixed hero image stays anchored to the viewport. Same
   pattern as the about page (see comments there for details). */
main:has(.fellowship) {
  transform: none;
  backface-visibility: visible;
}

/* Full-bleed fellowship art — the Canadian flag, the seal with
   flame + open Bible + maple leaf, the Toronto skyline, and the
   congregation in the foreground. Sits behind the content as a
   fixed background. */
.fellowship__hero {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  clip-path: inset(0);
  z-index: 0;
  pointer-events: none;
}
.fellowship__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  object-fit: cover;
  /* The source art is roughly square (1280x1249). The flag is on
     the left, the city+skyline on the right. Anchor slightly left
     of center so the seal stays in the visible window on
     landscape viewports. */
  object-position: center 38%;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
  filter: saturate(1.04) contrast(1.02) brightness(0.82);
}
@media (max-width: 719px) {
  .fellowship__hero {
    width: 100%;
    /* Shorter top banner on mobile so the badge + title + body
       card have somewhere to sit without overlapping the seal. */
    height: clamp(220px, 42vh, 320px);
    max-height: clamp(220px, 42vh, 320px);
  }
  .fellowship__hero-img {
    max-height: clamp(220px, 42vh, 320px);
    object-position: center 35%;
  }
}

/* Warm scrim on top of the art — slight amber tint on the edges
   to keep the visual language tied to the source image (which has
   a strong orange-to-black falloff). The center stays clearer so
   the seal remains visible. */
.fellowship__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center 35%,
      rgba(27, 36, 43, 0.32) 0%,
      rgba(27, 36, 43, 0.55) 45%,
      rgba(27, 36, 43, 0.88) 100%
    ),
    linear-gradient(
      180deg,
      rgba(27, 36, 43, 0.45) 0%,
      rgba(27, 36, 43, 0.25) 30%,
      rgba(27, 36, 43, 0.45) 65%,
      rgba(27, 36, 43, 0.92) 100%
    );
  pointer-events: none;
}

/* Same body-scroll override used on the give/about pages. */
html:has(.fellowship) {
  overflow: hidden auto;
  height: auto;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html:has(.fellowship)::-webkit-scrollbar { display: none; }
body:has(.fellowship) {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body:has(.fellowship)::-webkit-scrollbar { display: none; }
body:has(.fellowship) main {
  height: auto;
  min-height: 100dvh;
}

.fellowship__content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1.1vh, 1rem);
}

/* Amber-tinted pill badge — mirrors the .about__badge style but
   picks up the page's warm accent. */
.fellowship__badge {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 1.4vh, 0.95rem);
  letter-spacing: 0.3em;
  color: var(--c-red);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-red);
  border-radius: 999px;
  background: rgba(243, 165, 28, 0.08);
  text-shadow: 0 0 6px rgba(243, 165, 28, 0.35);
}

/* Title sits at the same scale as the about page title so the
   header language feels consistent across the site. */
.fellowship__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vh, 4.2rem);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75);
  max-width: 22ch;
}

/* Divider with maple leaf — uses the page's amber accent instead
   of the standard red, but the leaf color filter is intentionally
   kept on the Leaf.png path (it's the same red maple-leaf glyph
   used everywhere else; on this page it reads as the "fire" ember
   rather than a national symbol). */
.fellowship__divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 360px;
}
.fellowship__divider-line {
  flex: 1;
  height: 2px;
  background: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.fellowship__divider-leaf {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  /* Ember red for the leaf — keeps it visually connected to the
     fire/Holy-Ghost tone of the fellowship art. */
  filter: brightness(0) saturate(100%) invert(22%) sepia(85%) saturate(3800%) hue-rotate(345deg) brightness(95%) contrast(115%);
}
.fellowship__divider-leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tagline under the divider — "Raising a Holy Ghost Army in
   Canada." with the second half in the ember-red accent. Two
   stacked lines on mobile, single line on desktop. */
.fellowship__tagline {
  margin: 0;
  margin-top: clamp(0.1rem, 0.4vh, 0.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vh, 1.65rem);
  letter-spacing: 0.08em;
  color: var(--c-ink);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
}
.fellowship__tagline-accent {
  color: var(--c-fellowship-ember);
  text-shadow: 0 0 10px var(--c-fellowship-ember-glow);
}

/* The message card — same translucent panel pattern as
   .about__card. */
.fellowship__card {
  display: block;
  width: 100%;
  max-width: 720px;
  margin-top: clamp(0.2rem, 0.8vh, 0.9rem);
  padding: clamp(0.9rem, 2.6vh, 2rem) clamp(0.8rem, 2.5vw, 1.6rem);
  background: rgba(27, 36, 43, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.fellowship__bio {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.8vh, 1rem);
  text-align: left;
}

/* The "Hey!" greeting — slightly larger and in the amber accent
   so it lands as a warm opener. */
.fellowship__greeting {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vh, 1.8rem);
  letter-spacing: 0.05em;
  color: var(--c-red);
  text-shadow: 0 0 10px var(--c-red-glow);
}

.fellowship__paragraph {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.9vh, 1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

/* All-caps callout — "THIS IS SIMPLY A GREAT FAITH COMPANY TO
   KEEP YOU ENCOURAGED & FIRED UP." Display font, amber-on-darker
   card surface, with a left ember-red rail to call it out as a
   banner quote. */
.fellowship__callout {
  margin: clamp(0.4rem, 1.2vh, 0.8rem) 0;
  padding: clamp(0.7rem, 2.2vh, 1.1rem) clamp(0.8rem, 2.4vw, 1.2rem);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vh, 1.4rem);
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--c-red);
  text-transform: uppercase;
  background: rgba(243, 165, 28, 0.06);
  border: 1px solid rgba(243, 165, 28, 0.28);
  border-left: 3px solid var(--c-fellowship-ember);
  border-radius: 8px;
  text-align: center;
  text-shadow: 0 0 8px var(--c-red-glow);
  text-wrap: pretty;
}

/* Two short statements — "No formal oversight." / "No unnecessary
   politics." — display as a two-row rail so they read as a
   continuation of the "independent / free" theme without
   breaking the prose flow. */
.fellowship__pillars {
  list-style: none;
  margin: clamp(0.4rem, 1.2vh, 0.8rem) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.4vh, 0.8rem);
}
.fellowship__pillar {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vh, 1.3rem);
  letter-spacing: 0.05em;
  color: var(--c-ink);
}
.fellowship__pillar-line {
  flex: 0 0 clamp(28px, 5vw, 48px);
  height: 2px;
  background: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.fellowship__pillar-text {
  display: inline-block;
}

/* Slogan — "Independent. Free. Connected. Empowered." All caps,
   display font, with the final word in the ember-red accent. */
.fellowship__slogan {
  margin: clamp(0.4rem, 1.2vh, 0.8rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vh, 1.45rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em 0.55em;
  line-height: 1.2;
}
.fellowship__slogan-word--accent {
  color: var(--c-fellowship-ember);
  text-shadow: 0 0 10px var(--c-fellowship-ember-glow);
}
.fellowship__slogan-dot {
  color: var(--c-red);
  font-size: 1.1em;
  line-height: 0;
}

/* Closing line — "Raising a Holy Ghost army in Canada." Centered,
   italicized emphasis on "Holy Ghost", with a warm glow matching
   the tagline above. */
.fellowship__closing {
  margin: clamp(0.4rem, 1.2vh, 0.8rem) 0 0;
  padding-top: clamp(0.6rem, 1.8vh, 1.1rem);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vh, 1.3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  line-height: 1.25;
}

.fellowship__btn {
  margin-top: clamp(0.5rem, 1.6vh, 1.1rem);
}

/* Pre-entry start state for the fellowship page — matches the
   .page-prep pattern used on the other pages so the entry
   timeline can animate everything forward to its end state. */
.page-prep .fellowship              { opacity: 0; }
.page-prep .fellowship__hero        { opacity: 0; }
.page-prep .fellowship__tagline     { opacity: 0; transform: translateY(12px); }
.page-prep .fellowship__card        { opacity: 0; transform: translateY(18px); }
.page-prep .fellowship__greeting    { opacity: 0; transform: translateY(10px); }
.page-prep .fellowship__paragraph   { opacity: 0; transform: translateY(10px); }
.page-prep .fellowship__callout     { opacity: 0; transform: translateY(12px) scale(0.97); }
.page-prep .fellowship__pillar      { opacity: 0; transform: translateX(-14px); }
.page-prep .fellowship__slogan      { opacity: 0; transform: translateY(12px); }
.page-prep .fellowship__closing     { opacity: 0; transform: translateY(10px); }
.page-prep .fellowship__btn         { opacity: 0; transform: translateY(18px) scale(0.92); }

/* ===========================================================
   APPLICATION FORM
   3-page wizard for the Network Church / Minister Application.
   Picked up by the existing body:has(.fellowship) html
   scroll-override so the page can extend past one viewport
   to accommodate the form. Theme mirrors the fellowship page
   (amber pill, ember accent, ember-red headings, dark card).
   =========================================================== */
.apply {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin: clamp(1.4rem, 4vh, 2.6rem) auto clamp(2rem, 6vh, 4rem);
  padding: 0 var(--safe-x);
  text-align: left;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.apply__head {
  text-align: center;
  margin-bottom: clamp(0.8rem, 2.4vh, 1.4rem);
}

.apply__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.8vh, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--c-ink);
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}
.apply__title-sub {
  font-size: 0.92em;
  letter-spacing: 0.05em;
  color: var(--c-red);
  text-shadow: 0 0 8px var(--c-red-glow);
}

/* Page badges (1 / 2 / 3) � fixed top-right of the form, matching
   the numbered markers in the source document. */
.apply__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: clamp(0.6rem, 1.6vh, 1rem);
}
.apply__page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-mute);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.apply__page-badge:hover {
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.apply__page-badge--active {
  color: var(--c-bg);
  background: var(--c-red);
  border-color: var(--c-red);
  box-shadow: 0 0 16px var(--c-red-glow);
  cursor: default;
}

.apply__form {
  position: relative;
  background: rgba(27, 36, 43, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  padding: clamp(0.9rem, 2.4vh, 1.6rem) clamp(0.9rem, 2.8vw, 1.8rem) clamp(1rem, 2.6vh, 1.8rem);
  overflow: hidden;
}

.apply__panel {
  display: none;
  animation: applyPanelIn 0.32s ease both;
}
.apply__panel--active {
  display: block;
}
@keyframes applyPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.apply__copy {
  margin: 0 0 0.85em;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.9vh, 0.95rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.apply__copy--accent {
  color: var(--c-ink);
}
.apply__copy--accent strong {
  color: var(--c-red);
  text-shadow: 0 0 8px var(--c-red-glow);
  font-weight: 700;
}

.apply__heading {
  margin: clamp(0.9rem, 2.6vh, 1.4rem) 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vh, 1.25rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fellowship-ember);
  text-shadow: 0 0 8px var(--c-fellowship-ember-glow);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 0.35em;
}

.apply__subheading {
  margin: 0.9rem 0 0.35rem;
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.85vh, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-red);
  text-transform: none;
}

.apply__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.6vh, 0.9rem) clamp(0.6rem, 1.8vw, 1rem);
}
@media (max-width: 600px) {
  .apply__grid { grid-template-columns: 1fr; }
}

.apply__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.apply__field--full {
  grid-column: 1 / -1;
}

.apply__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.apply__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.25rem;
}

.apply__input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: clamp(0.82rem, 1.9vh, 0.95rem);
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}
.apply__input:hover {
  border-color: var(--c-line-strong);
}
.apply__input:focus {
  outline: none;
  border-color: var(--c-red);
  background: rgba(243, 165, 28, 0.06);
  box-shadow: 0 0 0 3px var(--c-fellowship-glow);
}
.apply__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Inline input inside a chip (e.g. "Other: ____") */
.apply__input--inline {
  flex: 1 1 120px;
  min-width: 100px;
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  border-radius: 0;
}
.apply__input--inline:focus {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--c-red);
}

.apply__textarea {
  resize: vertical;
  min-height: 5.5em;
  line-height: 1.5;
  font-family: var(--font-body);
}
.apply__textarea--lines {
  /* Three blank-line rows for handwritten-style "How can we serve you?" */
  background-image:
    linear-gradient(to bottom, transparent calc(1.5em - 1px), var(--c-line) calc(1.5em - 1px), var(--c-line) 1.5em, transparent 1.5em);
  background-size: 100% 1.5em;
  background-attachment: local;
  line-height: 1.5em;
  padding-top: 0;
  padding-bottom: 0;
}

.apply__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.apply__chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
}
.apply__chips--wrap {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .apply__chips { flex-wrap: wrap; }
}

.apply__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  font-size: clamp(0.75rem, 1.8vh, 0.85rem);
  font-weight: 600;
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.apply__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apply__chip::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 3px;
  background: transparent;
  flex: 0 0 14px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.apply__chip:has(input[type="radio"])::before {
  border-radius: 50%;
}
.apply__chip:hover {
  border-color: var(--c-line-strong);
  background: rgba(255, 255, 255, 0.06);
}
.apply__chip:has(input:checked) {
  border-color: var(--c-red);
  background: rgba(243, 165, 28, 0.10);
  box-shadow: 0 0 12px rgba(243, 165, 28, 0.22);
  color: var(--c-ink);
}
.apply__chip:has(input:checked)::before {
  background: var(--c-red);
  border-color: var(--c-red);
  box-shadow: inset 0 0 0 2px rgba(27, 36, 43, 0.6);
}
.apply__chip:has(input:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
.apply__chip--inline-input {
  padding-right: 0.4rem;
  gap: 0.3rem;
}

/* Long checklist (BELIEFS & ALIGNMENT) � row-style with a
   custom checkbox mark to match the document's filled-square
   glyph. */
.apply__checks {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.apply__check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(0.8rem, 1.9vh, 0.92rem);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 0.25rem 0;
}
.apply__check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apply__check-box {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-bg);
  border-radius: 2px;
  display: inline-block;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.apply__check:has(input:checked) .apply__check-box {
  background: var(--c-red);
  border-color: var(--c-red);
  box-shadow: 0 0 8px var(--c-red-glow);
}
.apply__check:has(input:checked) .apply__check-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--c-bg);
  border-radius: 1px;
}
.apply__check:has(input:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
  border-radius: 3px;
}

/* FELLOWSHIP LEVEL � two card-style radios. */
.apply__radios {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.apply__radio {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.apply__radio:hover {
  border-color: var(--c-line-strong);
}
.apply__radio:has(input:checked) {
  border-color: var(--c-red);
  background: rgba(243, 165, 28, 0.08);
  box-shadow: 0 0 14px rgba(243, 165, 28, 0.18);
}
.apply__radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apply__radio-dot {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 0.18em;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.apply__radio:has(input:checked) .apply__radio-dot {
  background: var(--c-red);
  border-color: var(--c-red);
  box-shadow: inset 0 0 0 3px rgba(27, 36, 43, 0.85), 0 0 8px var(--c-red-glow);
}
.apply__radio-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.apply__radio-label {
  font-size: clamp(0.82rem, 1.95vh, 0.95rem);
  font-weight: 700;
  color: var(--c-ink);
}
.apply__radio-desc {
  font-size: clamp(0.72rem, 1.7vh, 0.82rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}
.apply__radio:has(input:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* SIGNATURE PAD ------------------------------------------------ */
.apply__signature {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
}
.apply__signature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.apply__signature-clear {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.apply__signature-clear:hover {
  color: var(--c-ink);
  border-color: var(--c-red);
  background: rgba(243, 165, 28, 0.08);
}

.apply__signature-pad {
  display: block;
  width: 100%;
  height: clamp(140px, 22vh, 220px);
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
  /* Subtle underline to suggest a "signature line" */
  background-image:
    linear-gradient(to right, transparent 6%, var(--c-line-strong) 6%, var(--c-line-strong) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-position: bottom 14px left 0;
  background-size: 100% 1px;
}

.apply__signature-hint {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

/* SUBMIT ROW --------------------------------------------------- */
.apply__submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1rem, 2.6vh, 1.4rem);
  padding-top: clamp(0.8rem, 2vh, 1.2rem);
  border-top: 1px solid var(--c-line);
}
.apply__submit {
  min-width: 240px;
  font-size: clamp(0.7rem, 1.7vh, 0.85rem);
  padding: 0.7rem 1.4rem;
  letter-spacing: 0.18em;
}
.apply__submit-note {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  max-width: 420px;
}
.apply__submit-note strong {
  color: var(--c-red);
  text-shadow: 0 0 6px var(--c-red-glow);
}

/* PREV / NEXT NAV --------------------------------------------- */
.apply__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1rem, 2.4vh, 1.4rem);
  padding-top: clamp(0.7rem, 2vh, 1.1rem);
  border-top: 1px solid var(--c-line);
}
.apply__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.7vh, 0.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.apply__nav-btn:hover:not([disabled]) {
  background: rgba(243, 165, 28, 0.10);
  border-color: var(--c-red);
  color: var(--c-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(243, 165, 28, 0.18);
}
.apply__nav-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.apply__nav-btn--next {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-bg);
  box-shadow: 0 4px 16px rgba(215, 32, 39, 0.35);
  margin-left: auto;
}
.apply__nav-btn--next:hover:not([disabled]) {
  background: var(--c-red-hot);
  border-color: var(--c-red-hot);
  color: var(--c-bg);
  box-shadow: 0 8px 22px rgba(215, 32, 39, 0.45);
}

.apply__sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible status line — sits below the submit button, glows on success. */
.apply__status {
  margin: 0.85rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-text-dim);
  text-align: center;
  min-height: 1.25em;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.apply__status:empty { visibility: hidden; }
.apply__status--ok    { color: var(--c-fellowship-ember); }
.apply__status--warn  { color: #ffb3b3; }

/* Success / download panel. Shown only after a successful export. */
.apply__success {
  margin-top: 1.75rem;
  padding: 1.5rem 1.5rem 1.4rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(243, 165, 28, 0.10), rgba(215, 32, 39, 0.06));
  border: 1px solid rgba(243, 165, 28, 0.45);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(243, 165, 28, 0.08) inset,
              0 8px 26px rgba(215, 32, 39, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.apply__success[hidden] { display: none; }
.apply__success--shown {
  opacity: 1;
  transform: translateY(0);
}
.apply__success-icon {
  width: 48px; height: 48px;
  margin: 0 auto 0.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-fellowship-ember);
  color: #1B242B;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 0 0 4px rgba(215, 32, 39, 0.15),
              0 6px 18px rgba(215, 32, 39, 0.35);
}
.apply__success-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.02em;
  color: #fff8e8;
  text-transform: none;
}
.apply__success-copy {
  margin: 0 auto 1.1rem;
  max-width: 32em;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text-dim);
}
.apply__success-copy strong {
  color: var(--c-fellowship-ember);
  font-weight: 600;
}
.apply__success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.apply__success-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 999px;
}
.apply__success-fine {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--c-text-dim);
  opacity: 0.85;
}

/* Reduced-motion: snap the panel in instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .apply__panel { animation: none !important; }
  .apply__nav-btn { transition: none !important; }
  .apply__success { transition: none !important; transform: none !important; }
}