: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}; the post-submit form swap depends on this. */
[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 { 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; }
/* logo left, language link right: one row so the headline starts sooner */
.hero-top { display: flex; align-items: center; justify-content: space-between;
  max-width: 960px; margin-inline: auto; }
.lang-toggle a { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: 4px; font-weight: 700;
  font-size: 0.9375rem; color: #fff; text-decoration: underline;
  text-underline-offset: 4px; }
.hero-logo { width: clamp(44px, 5vw, 72px); height: auto;
  filter: drop-shadow(0 1px 6px rgba(0,40,70,.45)); }
.hero h1 { margin: var(--stack-s) 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-support { margin: var(--stack-s) auto 0; max-width: 32ch;
  font-weight: 700; font-size: var(--fs-body); line-height: 1.35;
  color: var(--ink); }
.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; }

/* the form panel follows the video directly (it used to sit two screens
   down, after the believe/leadin bands) */
.panel { position: relative; scroll-margin-top: 16px;
  background: linear-gradient(180deg, #025F97 0%, #12517F 45%,
    #1A1A1C 85%, #171717 100%);
  text-align: center; color: #fff; overflow: hidden; }
@media (min-width: 768px) {
  .panel:not(.standalone) { border-radius: min(7.3vw, 140px) min(7.3vw, 140px) 0 0; }
}
.panel-intro { margin: var(--stack-s) auto 0; max-width: 32ch; font-weight: 500;
  font-size: var(--fs-body); line-height: 1.5; color: var(--cream); }
/* 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-m) auto 0; max-width: 420px;
  display: grid; gap: 1.25rem; text-align: left; }
#prayer-form small, .f-topics small { font-weight: 400; font-size: inherit; color: #d6dde3; }

/* topic chips: real checkboxes (work without JS, announce checked state) */
.f-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.f-topics legend { padding: 0; margin-bottom: 0.6em; font-weight: 600;
  font-size: var(--fs-caption); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.7); color: #fff;
  font-weight: 600; font-size: 0.9375rem; pointer-events: none; }
.chip input:checked + span { background: var(--cyan-bright); border-color: var(--cyan-bright);
  color: #0b2233; }
.chip input:checked + span::before { content: ''; width: 14px; height: 8px;
  margin-top: -4px; border: solid #0b2233; border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg); }
.chip input:focus-visible + span { outline: 3px solid var(--cyan-bright); outline-offset: 2px; }

/* inline errors: text + icon, not color alone */
.f-error { display: flex; gap: 6px; align-items: flex-start; margin: 0.5em 0 0;
  font-weight: 600; font-size: var(--fs-caption); line-height: 1.4; color: #FFC2C2; }
.f-error::before { content: '!'; flex: none; display: inline-flex;
  align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-top: 1px; border: 2px solid currentColor; border-radius: 50%;
  font-size: 12px; line-height: 1; }
#prayer-form [aria-invalid="true"] { outline: 3px solid #FFC2C2; outline-offset: 0; }
.form-summary { padding: 12px 14px; border-radius: var(--radius-field);
  background: #FFE3E3; color: #6b0f0f; font-weight: 600;
  font-size: var(--fs-caption); line-height: 1.4; }
.form-summary:focus { outline: 3px solid var(--cyan-bright); }

.btn-cyan { background: var(--cyan-bright); color: #0b2233; font-weight: 700;
  text-transform: none; letter-spacing: 0.02em; font-size: 1.0625rem; }
.btn-cyan:hover { background: #a6f2fb; }
.btn-cyan:disabled { opacity: 0.7; cursor: progress; }
.privacy { display: flex; gap: 10px; align-items: flex-start; margin: -0.25rem 0 0;
  font-size: var(--fs-caption); line-height: 1.45; color: var(--cream); }
.privacy svg { flex: none; margin-top: 1px; color: var(--cyan-bright); }

.or-divider { display: flex; align-items: center; gap: 12px;
  max-width: 420px; margin: var(--stack-l) auto var(--stack-s);
  color: #d6dde3; font-size: var(--fs-caption); }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.25); }
.call-line { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 44px; text-decoration: none; }
.call-line span { font-weight: 500; font-size: var(--fs-body); color: #fff; }
.call-line strong { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-condensed); font-weight: 700;
  font-size: var(--fs-phone); color: var(--cyan-bright); white-space: nowrap; }
.f-field label { display: block; margin-bottom: 0.5em;
  font-weight: 600; font-size: var(--fs-caption); color: #fff; }
.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(). */
/* no-JS path only: the JS path draws .f-error messages instead */
input:user-invalid, textarea:user-invalid { outline: 2px solid var(--error); }
#prayer-form .btn { width: 100%; min-height: 56px; }

.thanks { margin: var(--stack-l) auto 0; max-width: 420px; min-height: 200px; }
.thanks-check { display: block; margin: 0 auto var(--stack-s); color: var(--cyan-bright); }
.thanks-head { margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); line-height: 1.05; letter-spacing: 0.02em;
  text-transform: uppercase; }
.thanks > p + p { margin: 0.75em auto 0; max-width: 36ch;
  font-size: var(--fs-body); color: rgba(255,255,255,0.88); }
.thanks > .next-head { margin-top: var(--stack-l); max-width: none; text-align: left;
  font-weight: 700; font-size: var(--fs-caption); color: var(--cyan-bright); }
.next-steps { display: grid; gap: 10px; margin: var(--stack-s) 0 0; padding: 0;
  list-style: none; text-align: left; }
.next-step { display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 64px; padding: 10px 16px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
li.next-step { cursor: default; }
a.next-step:hover, button.next-step:hover { background: rgba(255,255,255,0.14); }
.next-step svg { flex: none; color: var(--cyan-bright); }
.next-text { display: flex; flex-direction: column; gap: 2px; }
.next-text strong { font-size: 1rem; }
.next-text > span { font-size: var(--fs-caption); color: #d6dde3; }
.next-cal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.next-cal a { display: inline-flex; align-items: baseline; gap: 4px;
  min-height: 44px; padding: 0 12px; align-items: center;
  border-radius: var(--radius-pill); border: 1.5px solid var(--cyan-bright);
  color: var(--cyan-bright); font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; }
.next-cal small { font-weight: 400; color: #d6dde3; font-size: 0.8125rem; }

.panel-logo { width: clamp(48px, 5vw, 80px); height: auto;
  margin: var(--stack-l) auto 0; }

/* one short testimony right after the form */
.proof { background: #fff; padding-block: 1.75rem; }
.proof figure { display: flex; gap: 14px; align-items: flex-start;
  max-width: 560px; margin: 0 auto; }
.proof img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.proof blockquote { margin: 0; font-weight: 600; font-size: var(--fs-lead);
  line-height: 1.45; color: #1f1f1f; }
.proof figcaption { margin-top: 6px; font-size: var(--fs-caption); color: #4a5560; }

/* believe + come-as-you-are, merged */
.belong { background: var(--panel-ink); color: #fff; text-align: center; }
.belong-logo { width: clamp(44px, 5vw, 72px); height: auto; margin: 0 auto; }
.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); }

/* service times as readable rows (were small all-caps condensed type) */
.times-card { margin: var(--stack-l) auto 0; max-width: 480px;
  border: 2px solid var(--cyan); border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem; text-align: left; }
.times-card h3 { margin: 0 0 0.6em; font-size: 0.9375rem; color: var(--cyan); }
.times-card dl { display: grid; gap: 8px; margin: 0; font-size: 1.0625rem; }
.times-card dl > div { display: flex; justify-content: space-between; gap: 12px; }
.times-card dt { font-weight: 700; }
.times-card dd { margin: 0; }
.times-card .times-youth { margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(104,224,232,0.35); }
.times-card .times-youth dt { color: var(--cyan); }
.address { margin: var(--stack-m) 0 0; font-size: var(--fs-body); color: #fff; }
.belong-actions { display: flex; gap: 10px; max-width: 480px; margin: var(--stack-s) auto 0; }
.btn-outline { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-pill);
  border: 2px solid var(--cyan-bright); color: var(--cyan-bright);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.btn-outline:hover { background: rgba(112,232,248,0.12); }
.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: 16px; margin-bottom: 18px; }
.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; letter-spacing: 0.03em;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem); line-height: 1.05;
  color: var(--blue-brand); }
.t-card blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.55;
  color: #333; }
.t-card strong { color: #1f1f1f; }
/* collapsed by JS to the pull-quote; without JS the full story shows */
.t-pull { margin: 0; font-weight: 700; font-size: var(--fs-body); line-height: 1.5;
  color: #1f1f1f; }
.t-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--blue-brand); font: inherit; font-weight: 600; font-size: var(--fs-caption);
  text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .t-card { flex: 1 1 46%; } }

/* video block lives inside the padded hero: full-bleed on phones, a
   centered card on wider screens. Class names are load-bearing (queried
   by app.js and the focus rule below) — do not rename. */
.video-band { margin-block-start: var(--stack-m); background: #101014; }
@media (max-width: 767px) {
  .video-band {
    margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left)))
                   calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
    margin-block-end: calc(-1 * var(--section-pad)); /* run straight into the form */
  }
}
.video-label { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 0; padding: 12px max(var(--gutter), env(safe-area-inset-left));
  font-weight: 600; font-size: 0.9375rem; color: #fff; text-align: left; }
.video-label-cta { color: var(--cyan-bright); font-size: var(--fs-caption); white-space: nowrap; }
.video-band.is-playing .video-label { display: none; }
@media (min-width: 768px) {
  .video-band { max-width: 960px; margin-inline: auto;
    border-radius: var(--radius-card); overflow: hidden; }
}
.video-stage { position: relative; }
/* 16:9 everywhere so the stage height never changes when the full message
   swaps in; cover absorbs sources that aren't exactly 16:9 */
.video-stage img { width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; }
.video-teaser { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.teaser-live .video-teaser { opacity: 1; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; }
/* ring drawn inset so it sits on the dark video, not the hero gradient */
.video-play:focus-visible { outline-offset: -6px; }
.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(16,16,20,0.55);
  border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; }
.video-play:hover .play-badge { background: rgba(16,16,20,0.78); }
.video-play.no-video { cursor: default; }
.video-play.no-video .play-badge { display: none; }
/* pause/resume toggle (WCAG 2.2.2) — above the .video-play overlay */
.video-pause { position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(16,16,20,0.55); cursor: pointer; }
.video-pause:hover { background: rgba(16,16,20,0.78); }
.video-pause .ic-play { display: none; }
.video-pause.is-paused .ic-pause { display: none; }
.video-pause.is-paused .ic-play { display: block; }
/* the full message (tap result): same 16:9 as the stage — no size jump */
.video-full { display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; background: #000; }
/* cyan focus ring on the dark video (cyan is allowed on dark only) */
.video-band :focus-visible { outline-color: var(--cyan-bright); }

/* ---- conversion quick wins (QUICK-WINS.md) ---- */

/* C5: readable placeholder on the light field fill */
#prayer-form ::placeholder { color: #616161; opacity: 1; }

/* C8: closing ask after the testimonies */
.closing { background: #fff; text-align: center; }
.closing p { margin: 0 auto; max-width: 40ch; font-weight: 700;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.closing .btn { margin-top: var(--stack-m); }

/* C11: one-time emphasis on the form heading after the video-end scroll
   (the global reduced-motion rule already disables the animation) */
@keyframes notice {
  0% { text-shadow: 0 0 0 rgba(112,232,248,0); }
  35% { text-shadow: 0 0 26px rgba(112,232,248,0.9); }
  100% { text-shadow: 0 0 0 rgba(112,232,248,0); }
}
.is-noticed { animation: notice 1.4s ease-out 1; }

/* Web-to-Lead: submit failure notice (sits on the dark panel) */
.form-error { margin: var(--stack-m) auto 0; max-width: 420px; }
.form-error p { margin: 0; font-size: var(--fs-caption); line-height: 1.5;
  color: #FFD9D9; }

/* standalone thank-you pages (thanks.html / gracias.html) */
.panel.standalone { margin-top: 0; border-radius: 0;
  min-height: 100vh; min-height: 100svh; }
.panel.standalone .btn { margin-top: var(--stack-l); }

/* C13: tighter hero top on phones so the video clears the fold (ES h1 wraps
   to 4 lines). Only whitespace/logo shrink — never type or tap targets. */
@media (max-width: 539px) {
  .hero { padding-block-start: 1rem; }
  .hero-top { margin-inline: -4px; }
}

/* sticky quick actions on phones: shown by JS once the hero scrolls away,
   hidden while the form or the closing ask is on screen */
.quick-bar { display: none; }
@media (max-width: 767px) {
  .quick-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; gap: 10px; align-items: center;
    padding: 12px max(16px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
    transform: translateY(110%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s; }
  .quick-bar.is-shown { transform: none; visibility: visible;
    transition: transform 0.25s ease, visibility 0s; }
  .quick-bar .btn { flex: 1; gap: 8px; min-height: 52px; text-transform: none;
    letter-spacing: 0.01em; font-weight: 700; }
  .quick-call { display: inline-flex; align-items: center; gap: 6px; min-height: 52px;
    padding: 0 18px; border-radius: var(--radius-pill); border: 2px solid var(--blue-brand);
    color: var(--blue-brand); font-weight: 700; text-decoration: none; }
}

/* C14: landscape phones — cap the video so stage + controls fit on screen.
   MUST remain the last .video-band rule in the file (overrides the
   full-bleed negative margins below 768px and the 960px cap above). */
@media (orientation: landscape) and (max-height: 540px) {
  .video-band { max-width: calc(70vh * 16 / 9); margin-inline: auto;
    border-radius: var(--radius-card); overflow: hidden; }
}