:root {
  /* --- color --- */
  --blue-brand: #02578c;     /* headlines on light bg */
  --blue-deep: #004C8F;      /* hero gradient anchor */
  --panel-top: #025F97;      /* dark panel gradient top */
  --panel-mid: #12517F;      /* dark panel gradient mid */
  --panel-ink: #171717;      /* dark panel base */
  --ink: #282828;            /* body text on light bg */
  --cyan: #68E0E8;           /* accents ON DARK ONLY */
  --cyan-bright: #70E8F8;    /* phone numbers ON DARK ONLY */
  --steel: #4a6c8c;          /* believe-band background */
  --steel-deep: #3d5c70;     /* darkened accent for light bg (was #4f758e) */
  --slate-name: #4a6c9e;     /* testimony names */
  --paper: #e9eae4;          /* page background */
  --cream: #e7e2d5;          /* body text on dark panel */
  --ice: #e8f0f0;            /* testimony card background */
  --field: #EEEAEA;          /* form input fill */
  --error: #E85D5D;

  /* --- type (mobile-first fluid scale; values = 320/390/768/1440px) --- */
  --fs-display: clamp(2.5rem, 1rem + 7.5vw, 7.5rem);        /* 40/45/74/120 — hero h1 */
  --fs-h2: clamp(2rem, 0.75rem + 5.5vw, 5.5rem);            /* 32/34/54/88 — come-as-you-are */
  --fs-h3: clamp(1.625rem, 1rem + 2.75vw, 3.5rem);          /* 26/27/37/56 — form h2, testimonies h2 */
  --fs-phone: clamp(1.75rem, 1.25rem + 2.5vw, 4rem);        /* 28/30/39/56 — tel numbers */
  --fs-lead: clamp(1.0625rem, 0.9375rem + 0.55vw, 1.375rem);/* 17/17/19/22 — hero p, form intro */
  --fs-body: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);         /* 16/16/18/20 — all body copy */
  --fs-button: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);     /* 16/17/18/18 */
  --fs-times: clamp(0.9375rem, 0.8rem + 0.7vw, 2rem);       /* 15/15/16/32 — service times */
  --fs-caption: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);  /* 14/14/16/18 — address, tel lead-in, labels */

  /* --- font stacks --- */
  --font-display: 'Futura Cond XBold', 'Arial Narrow', sans-serif;
  --font-condensed: 'Futura PT Cond', 'Arial Narrow', sans-serif;
  --font-sans: 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- spacing / shape --- */
  --section-pad: clamp(2.5rem, 6vw, 5.5rem);   /* vertical section padding */
  --gutter: clamp(1.25rem, 4vw, 4rem);         /* horizontal page gutter */
  --stack-s: 0.75rem;
  --stack-m: 1.5rem;
  --stack-l: 2.5rem;
  --radius-card: 16px;
  --radius-field: 10px;
  --radius-box: 24px;                          /* call pill outline */
  --radius-pill: 100px;
  --tap: 48px;                                 /* minimum size for form controls & primary buttons */
}

@font-face { font-family:'Mona Sans'; src:url('fonts/MonaSans-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('fonts/MonaSans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('fonts/MonaSans-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Mona Sans'; src:url('fonts/MonaSans-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Futura Cond XBold'; src:url('fonts/Futura-CondensedExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Futura PT Cond'; src:url('fonts/FuturaPTCond-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; }
/* Author display values (flex/grid) would otherwise defeat the UA's
   [hidden]{display:none} — this rule is load-bearing for the sticky bar
   and the post-submit form swap. Do not remove. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
       font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blue-brand); outline-offset: 2px; }
.panel :focus-visible, .action-bar :focus-visible { outline-color: var(--cyan-bright); }
section { padding-block: var(--section-pad);
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
                  max(var(--gutter), env(safe-area-inset-right)); }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0.9em 2em; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); font-family: var(--font-sans);
  font-weight: 600; font-size: var(--fs-button); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
.btn-dark { background: #111; color: #fff; }
.btn-dark:hover { background: #000; }

.hero { position: relative; text-align: center;
  background: radial-gradient(200% 80% at 100% 0%,
    #004C8F 0%, #2F89B8 20%, #73B3CC 35%, #B6D1D9 48%,
    #E0E4E1 62%, #EDEBE4 72%) #EDEBE4; }
.lang-toggle { position: absolute; top: 0; right: 0; padding: 8px; }
.lang-toggle a { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; font-weight: 700; font-size: 0.875rem;
  color: #fff; text-decoration: none; }
.lang-toggle a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.hero-logo { width: clamp(56px, 6.5vw, 96px); height: auto; margin-inline: auto;
  filter: drop-shadow(0 1px 6px rgba(0,40,70,.45)); }
.hero h1 { margin: var(--stack-m) auto 0; max-width: 12ch;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display);
  line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--blue-brand); }
.hero-lead { margin: var(--stack-m) auto 0; max-width: 34ch;
  font-weight: 600; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.hero .btn { margin-top: var(--stack-l); }
.hero-call { display: flex; width: fit-content; margin-inline: auto;
  align-items: center; min-height: 44px;
  margin-top: var(--stack-s); font-size: var(--fs-caption); color: var(--ink);
  text-decoration: none; }
.hero-call strong { color: var(--blue-brand); margin-left: 0.4ch; }

.believe { background: var(--steel); text-align: center; }
.believe p { margin: 0 auto; max-width: 60ch; font-weight: 500;
  font-size: var(--fs-body); line-height: 1.6; color: #fff; }
.believe p + p { margin-top: 1.4em; }

.leadin { text-align: center; padding-bottom: calc(var(--section-pad) + 10vw);
  background: #dfe5e4 radial-gradient(135% 150% at -8% 112%,
    #1f86bd 0%, #47a3ce 20%, #8ac2da 45%, #c2dae0 70%,
    #dde4e2 88%, #e9eae4 100%); }
.leadin p { margin: 0 auto; max-width: 40ch; font-weight: 700;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.leadin span { color: var(--steel-deep); }  /* darkened from #4f758e for contrast */

.panel { margin-top: -10vw; /* overlap the leadin */ position: relative;
  scroll-margin-top: 16px;
  border-radius: min(7.3vw, 140px) min(7.3vw, 140px) 0 0;
  background: linear-gradient(180deg, #025F97 0%, #12517F 34%,
    #1A1A1C 52%, #171717 60%, #171717 100%);
  text-align: center; color: #fff; overflow: hidden; }
/* optional crowd texture layer */
.panel::before { content: ''; position: absolute; inset: 0 0 auto 0;
  height: min(90vw, 900px);
  background: url('img/crowd-texture.webp') center top / cover no-repeat;
  opacity: 0.5; mix-blend-mode: luminosity; pointer-events: none; }
.panel > * { position: relative; }  /* content above the texture */

#form-heading { margin: 0 auto; max-width: 16ch; font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.15; color: #fff; }

#prayer-form { margin: var(--stack-l) auto 0; max-width: 420px;
  display: grid; gap: var(--stack-m); text-align: left; }
.f-field label, .f-lang legend { display: block; margin-bottom: 0.5em;
  font-weight: 600; font-size: var(--fs-caption); color: #fff; }
.f-field small { font-weight: 400; font-size: inherit; opacity: 0.75; }
.f-field input, .f-field textarea { width: 100%; min-height: 52px;
  padding: 14px 16px; border: 0; border-radius: var(--radius-field);
  background: var(--field); color: #222; font-family: var(--font-sans);
  font-size: max(1rem, 16px); }
.f-field textarea { min-height: 120px; resize: vertical; }
/* :user-invalid is progressive enhancement; .show-errors (added by JS on a
   failed submit) is the deterministic fallback — some engines only set
   user-validity after user edits, not on reportValidity(). */
input:user-invalid, textarea:user-invalid,
.show-errors input:invalid, .show-errors textarea:invalid {
  outline: 2px solid var(--error); }
.f-lang { border: 0; margin: 0; padding: 0; }
.f-lang label { display: inline-flex; margin-right: var(--stack-s); }
.f-lang input { position: absolute; opacity: 0; }
.f-lang span { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 1.5em; border: 2px solid var(--cyan-bright);
  border-radius: var(--radius-pill); color: #fff; font-weight: 600; cursor: pointer; }
.f-lang input:checked + span { background: var(--cyan-bright); color: #111; }
.f-lang input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
#prayer-form .btn { width: 100%; min-height: 52px; }

.thanks { margin: var(--stack-l) auto 0; max-width: 420px; min-height: 200px; }
.thanks-head { margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); letter-spacing: 0.04em; }
  /* WAS a 'Helvetica Neue' stack in the export — intentionally unified to the
     brand display face (declared delta, §4) */
.thanks p + p { margin: 0.75em auto 0; max-width: 36ch;
  font-size: var(--fs-body); color: rgba(255,255,255,0.88); }

.call-pill { display: inline-flex; flex-direction: column; gap: 2px;
  align-items: center; margin-top: var(--stack-l); padding: 14px 24px;
  border: 2px solid var(--cyan-bright); border-radius: var(--radius-box);
  text-decoration: none; }
  /* border is NEW vs the original borderless text — declared delta (§4):
     makes the call path visibly tappable */
.call-pill span { font-family: var(--font-condensed); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: var(--fs-caption); color: #fff; }
.call-pill strong { font-family: var(--font-condensed); font-weight: 700;
  font-size: var(--fs-phone); color: var(--cyan-bright); white-space: nowrap; }

.panel-logo { width: clamp(48px, 5vw, 80px); height: auto;
  margin: var(--stack-l) auto 0; }
.come-head { margin: var(--stack-m) auto 0; max-width: 14ch;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--cyan); }
  /* no specificity conflict: the generic heading rule is scoped to
     #form-heading, so .come-head needs no !important */
.come-body { margin: var(--stack-m) auto 0; max-width: 60ch;
  font-weight: 500; font-size: var(--fs-body); line-height: 1.6;
  color: var(--cream); }

.times-card { margin: var(--stack-l) auto 0; max-width: 640px;
  border: 2px solid var(--cyan); border-radius: var(--radius-card);
  padding: 1rem 1.25rem; }
.times-card p { margin: 0.35em 0; font-family: var(--font-condensed);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: var(--fs-times); line-height: 1.45; color: #fff; }
.times-card span { color: var(--cyan); }  /* incl. the "-" separators — matches the original */
@media (max-width: 539px) {
  /* stack the sunday times as rows: the separators become invisible breaks */
  .times-card .sep { display: block; height: 0; overflow: hidden; }
}
.address { display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--stack-m); font-family: var(--font-condensed); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-caption);
  color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  /* now a tappable Maps link, underlined as affordance — declared delta (§4);
     original was plain text at 82% white */
.panel-phone { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); margin-top: var(--stack-s); width: 100%;
  font-family: var(--font-condensed); font-weight: 700;
  font-size: var(--fs-phone); color: var(--cyan-bright); text-decoration: none; }

@media (min-width: 768px) {
  #prayer-form { max-width: 640px; grid-template-columns: 1fr 1fr; }
  .f-wide { grid-column: 1 / -1; }
  #prayer-form .btn { width: auto; justify-self: center; padding-inline: 3em; }
}

.testimonies { background: #fff; text-align: center; }
.testimonies h2 { margin: 0 auto; max-width: 20ch;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3);
  line-height: 1.08; text-transform: uppercase;
  color: var(--blue-brand); }   /* WAS #68E0E8 on white = 1.57:1 — do not restore */
.t-cards { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px; margin-top: var(--stack-l); }
.t-card { flex: 1 1 100%; max-width: 440px; background: var(--ice);
  border-radius: var(--radius-card); padding: 24px 22px; text-align: left; }
.t-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.t-card img { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.t-name { margin: 0; font-family: var(--font-condensed); font-weight: 700;
  text-transform: uppercase; font-size: var(--fs-caption); line-height: 1.1;
  color: var(--slate-name); }
.t-card blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.55;
  color: #333; }
.t-card strong { color: #1f1f1f; }
@media (min-width: 768px) { .t-card { flex: 1 1 46%; } }

.video-band { padding: 0; background: #101014; }
.video-poster { display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; position: relative; }
.video-poster img { width: 100%; height: auto; aspect-ratio: 1918 / 918; }
.play-badge { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: clamp(56px, 8vw, 84px);
  aspect-ratio: 1; border-radius: 50%; background: rgba(233,238,242,0.42);
  display: flex; align-items: center; justify-content: center; }
.video-poster:hover .play-badge { background: rgba(233,238,242,0.6); }
.video-poster.no-video { cursor: default; }
.video-poster.no-video .play-badge { display: none; }

.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 10px; align-items: center;
  padding: 10px
    max(var(--gutter), env(safe-area-inset-left))
    calc(10px + env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-right));
  background: rgba(23,23,23,0.92); backdrop-filter: blur(8px); }
.action-bar .btn { flex: 1; }
.bar-call { display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none; border-radius: 50%;
  border: 2px solid var(--cyan-bright); color: var(--cyan-bright); }
@media (max-width: 767px) {
  /* reserve space so the fixed bar never occludes the page bottom; the dark
     strip matches the video band. Acceptable even while the bar is hidden. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom));
         background: #101014; }
}
@media (min-width: 768px) { .action-bar { display: none; } }