/* ChurchBright church websites — the Horizon skin (premium template "Horizon", body.ws-skin-horizon).
   Bright and hopeful: white and sky-mist surfaces, sky blue #0e5bd8 and sunrise coral #ff6b4a, deep ink #0b1b33,
   Manrope 800 headings over Inter, soft sunrise mesh gradients, floating 20–28px cards with layered shadows, pill buttons,
   rounded inset bands and a floating header. Loaded after blocks.css only when the skin is active (layout.php).

   Tones in this skin: light = white · slate = sky mist (a light tone: ink text) · dark = deep sky navy with a sunrise glow ·
   red (brand colour) = a rounded sky panel. The home hero and page headers are light: ink words on a sunrise mesh, the
   photo in a floating rounded frame beside them (heroSlides keeps its photo behind the words).

   Contrast (WCAG 2.x, checked): ink #0b1b33 on white 17.2 · ink-2 #34425a on white 10.1, on mist #eef5ff 9.2 ·
   muted #56647e on white 6.0, on mist 5.4 · sky #0e5bd8 on white 6.0, on mist 5.5, white on sky 6.0 ·
   coral text #b83a1c on white 5.8, on #fff1ec 5.2 · coral #ff8a6e on navy 7.5 · white on navy 17.2 ·
   input borders #7d8aa3 on white 3.5 · focus ring sky on white 6.0, coral #ff8a6e on navy 7.5.

   Contents: tokens · base & focus · placeholders · header & menu · buttons · labels, headings & text · heroes ·
   page headers · sections & bands · cards · inner-page elements · interactive · feeds & forms · events, calendar &
   countdowns · classic sections & feature pages · footer · phones & tablets · motion, print & forced colours. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.ws-skin-horizon {
  --hz-sky: #0e5bd8; --hz-sky-600: #0b4fc0; --hz-sky-700: #0a45a8; --hz-sky-300: #7aa7f2; --hz-sky-100: #dbe8ff;
  --hz-coral: #ff6b4a; --hz-coral-soft: #ff9a7c; --hz-coral-ink: #b83a1c; --hz-coral-hl: #d23f1e; --hz-coral-on-dark: #ff8a6e; --hz-coral-tint: #fff1ec;
  --hz-ink: #0b1b33; --hz-ink-2: #34425a; --hz-muted: #56647e; --hz-border: #7d8aa3;
  --hz-mist: #eef5ff; --hz-mist-2: #e4efff; --hz-mist-3: #f6f9ff; --hz-navy: #0b1b33; --hz-navy-2: #12284a; --hz-navy-3: #1a3663;
  --hz-line: rgba(11, 27, 51, .08); --hz-line-2: rgba(11, 27, 51, .13);
  --hz-r-card: 22px; --hz-r-panel: 28px; --hz-r-band: clamp(24px, 3vw, 40px); --hz-inset: clamp(.5rem, 1.4vw, 1.25rem);
  --hz-shadow: 0 1px 2px rgba(11, 27, 51, .05), 0 10px 24px -14px rgba(11, 27, 51, .2), 0 28px 56px -36px rgba(14, 91, 216, .28);
  --hz-shadow-hover: 0 2px 4px rgba(11, 27, 51, .05), 0 18px 36px -16px rgba(11, 27, 51, .24), 0 40px 70px -40px rgba(14, 91, 216, .38);
  --hz-shadow-float: 0 2px 6px rgba(11, 27, 51, .06), 0 24px 48px -20px rgba(11, 27, 51, .28), 0 60px 90px -50px rgba(14, 91, 216, .4);
  --hz-glow-sky: rgba(14, 91, 216, .16); --hz-glow-coral: rgba(255, 107, 74, .2);
  --hz-mesh: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #fff 100%),
    radial-gradient(55% 70% at 92% 6%, rgba(14, 91, 216, .15), transparent 62%),
    radial-gradient(48% 55% at 80% 82%, rgba(255, 107, 74, .17), transparent 64%),
    radial-gradient(40% 55% at 4% 18%, rgba(122, 167, 242, .22), transparent 66%),
    linear-gradient(180deg, #f2f7ff 0%, #ffffff 100%);
  --hz-ease: cubic-bezier(.2, .8, .2, 1);

  --ws-bg: #ffffff; --ws-surface: #ffffff; --ws-surface-2: #f4f8ff; --ws-surface-3: #eef5ff;
  --ws-ink: #0b1b33; --ws-ink-2: #34425a; --ws-muted: #56647e; --ws-faint: #5f6d88; --ws-dark: #0b1b33;
  --ws-line: rgba(11, 27, 51, .08); --ws-line-strong: rgba(11, 27, 51, .14); --ws-input-border: #7d8aa3;
  --ws-radius: 20px; --ws-radius-lg: 28px; --ws-btn-radius: 999px; --ws-input-radius: 14px; --ws-img-radius: 22px;
  --ws-h-weight: 800; --ws-h-track: -.035em; --ws-h-lh: 1.05;
  --ws-shadow: var(--hz-shadow); --ws-shadow-hover: var(--hz-shadow-hover); --ws-shadow-lg: var(--hz-shadow-float);
  --ws-header-h: 76px; --ws-maxw: 1240px; --hz-head-gap: 12px; --hz-head: calc(var(--ws-header-h) + var(--hz-head-gap));
  --ws-ring: 0 0 0 3px rgba(14, 91, 216, .28);

  --wb-slate: #16325f; --wb-slate-2: #1e3f75; --wb-light: #eef5ff; --wb-paper: #f6f9ff;
  --wb-text: #34425a; --wb-text-soft: #34425a; --wb-faint: #56647e; --wb-muted: #5f6d88;
  --wb-h-weight: 800; --wb-h-lh: 1.05; --wb-h-track: -.035em; --wb-h-case: none; --wb-h-stretch: normal;
  --wb-t-weight: 800; --wb-label-weight: 700;
  --wb-radius: 22px; --wb-img-radius: 22px; --wb-grid-gap: 20px;
  --wb-btn-radius: 999px; --wb-btn-size: 15.5px; --wb-btn-weight: 700; --wb-btn-case: none; --wb-btn-track: -.005em; --wb-btn-pad: .95rem 1.6rem; --wb-btn-border: 1.5px;
  --wb-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --wb-container: 1200px; --wb-section-pad: clamp(4rem, 8vw, 7rem); --wb-h2-size: clamp(2.05rem, 4.2vw, 3.35rem); --wb-h2-gap: 1.1rem;
  --wb-kicker-size: .74rem; --wb-kicker-gap: 1.2rem; --wb-intro-size: 1.14rem; --wb-intro-width: 58ch; --wb-banner-gap: 2.6rem;
  --wb-hero-h1: clamp(2.75rem, 6.1vw, 5.4rem); --wb-page-h1: clamp(2.4rem, 5vw, 4.25rem);
  background: #ffffff; color: var(--hz-ink); font-size: 17px; line-height: 1.65;
}
.ws-skin-horizon:not(.ws-home) { --wb-section-pad: clamp(3.5rem, 7vw, 6rem); --wb-h2-size: clamp(1.9rem, 3.8vw, 3rem); --wb-intro-size: 1.1rem; }

/* ── Base & focus ───────────────────────────────────────────────────────── */
.ws-skin-horizon :is(h1, h2, h3, h4) { color: inherit; font-family: var(--ws-font-h); font-weight: 800; letter-spacing: -.03em; }
.ws-skin-horizon ::selection { background: rgba(255, 107, 74, .24); }
/* A two-tone ring: sky on light surfaces, coral on dark ones (--wb-ring per tone inside builder blocks). The ring follows
   each control's own shape (pills stay pills); only bare text links and summaries, which have no shape, get soft corners. */
.ws-skin-horizon :focus-visible { outline: 3px solid var(--wb-ring, var(--hz-sky)); outline-offset: 3px; box-shadow: none; }
.ws-skin-horizon :is(a:not([class]), .text-link, .faq__q, summary):focus-visible { border-radius: 8px; }
.ws-skin-horizon .wb .btn:focus-visible, .ws-skin-horizon .ws-btn:focus-visible, .ws-skin-horizon .btn:focus-visible { border-radius: 999px; }
/* site.css and blocks.css square every focused control off (4px / 0); the skin's pills, chips and cards keep their shape. */
.ws-skin-horizon .wb :is(.calendar__filter, .calendar__view, .calendar__today, .calendar__more, .chip, .pager__link, .share a, .share__copy, .add-cal a, .map-block__btn, .social-links a, .tabs__tab, .slider__arrow):focus-visible,
.ws.ws-skin-horizon .ws-social:focus-visible { border-radius: 999px; }
.ws-skin-horizon .wb .calendar__event:not(.is-span-start, .is-span-mid, .is-span-end):focus-visible { border-radius: var(--hz-chip-r, 999px); }
.ws-skin-horizon .wb :is(.ministry, .channel, .path, .step-tile, .media-card, .group-card, .event):focus-visible { border-radius: var(--hz-r-card); }
.ws-skin-horizon .wb .location-card:focus-visible { border-radius: var(--hz-r-panel); }
.ws.ws-skin-horizon .ws-sub a:focus-visible { border-radius: 12px; }
/* In-page jumps (#team, #weekly, calendar month links) and focus scrolling land below the floating header (88px on wide
   screens, 76px up to 1100px, 72px on phones, plus the 48px bar of a template preview). */
html:has(> body.ws-skin-horizon) { --hz-scroll-pad: 104px; scroll-padding-top: calc(var(--hz-scroll-pad) + var(--hz-scroll-extra, 0px)); }
html:has(> body.ws-skin-horizon.ws-tpl-preview) { --hz-scroll-extra: 48px; }
@media (max-width: 1100px) { html:has(> body.ws-skin-horizon) { --hz-scroll-pad: 92px; } }
@media (max-width: 640px) { html:has(> body.ws-skin-horizon) { --hz-scroll-pad: 86px; } }
.ws-skin-horizon .wb .calendar { scroll-margin-top: 0; }
.ws-skin-horizon .skip-link { background: var(--hz-ink); color: #fff; border-radius: 999px; font-weight: 700; }
.ws-skin-horizon .skip-link:focus-visible { outline-color: var(--hz-coral); }
.ws-skin-horizon .ws-announce { background: linear-gradient(90deg, var(--hz-sky-700), var(--hz-sky) 60%, #3a6fe0); font-weight: 600; font-size: 14.5px; }
.ws-skin-horizon .ws-announce a::after { content: none; }

/* Tones: the hero, page headers and the "slate" band are light in this skin (ink words); dark stays dark with coral. */
.ws-skin-horizon .wb:is(.hero:not(.hero--slides), .page-hero, .section--slate) {
  --wb-fg: var(--hz-ink); --wb-fg-inv: #fff; --wb-fg-2: var(--hz-ink-2); --wb-fg-3: var(--hz-muted);
  --wb-kicker: var(--hz-sky); --wb-hl: var(--hz-sky); --wb-ring: var(--hz-sky);
  --wb-line: rgba(11, 27, 51, .1); --wb-grid-bg: rgba(11, 27, 51, .08);
  color: var(--wb-fg);
}
.ws-skin-horizon .wb { --wb-kicker: var(--hz-sky); --wb-hl: var(--hz-sky); --wb-ring: var(--hz-sky); --wb-line: var(--hz-line-2); }
.ws-skin-horizon .wb:is(.section--dark), .ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark, .location-card),
.ws-skin-horizon .wb.hero--slides, .ws-skin-horizon .wb .slider :where(.slider__slide) {
  --wb-fg: #fff; --wb-fg-2: rgba(255, 255, 255, .84); --wb-fg-3: rgba(255, 255, 255, .7);
  --wb-kicker: var(--hz-coral-on-dark); --wb-hl: var(--hz-coral-on-dark); --wb-ring: var(--hz-coral-on-dark); --wb-line: rgba(255, 255, 255, .16);
}
.ws-skin-horizon .wb :is(.box--bg-slate, .el--bg-slate) { --wb-kicker: var(--hz-coral-on-dark); --wb-hl: var(--hz-coral-on-dark); --wb-ring: var(--hz-coral-on-dark); }
/* Cards that paint their own white (sign-up, forms, callouts, question cards, white boxes, the light countdown, the event
   popover): blocks.css gives them the accent ring; here they keep the sky ring of every light surface (6:1 on white). */
.ws-skin-horizon .wb :is(.signup, .campaign, .note, .audio-block, .form-panel__body, .embed__body, .faq--cards .faq__item, .tabs--boxed .tabs__panel, .box--on-light, .el--on-light),
.ws-skin-horizon .wb .evc.evc--light, .ws-skin-horizon .wb .calendar__pop { --wb-ring: var(--hz-sky); }
.ws-skin-horizon .wb .evc.evc--dark { --wb-ring: var(--hz-coral-on-dark); }

/* ── Placeholders: six sunrise skies in the Horizon palette ──────────────── */
.ws-skin-horizon .wb-ph {
  --ph-a: #0e5bd8; --ph-b: #ff6b4a; --ph-c: #0b1b33;
  background-color: #cfe0ff;
  background-image:
    radial-gradient(38% 30% at 50% 92%, rgba(255, 245, 235, .95), transparent 70%),
    radial-gradient(90% 55% at 50% 108%, rgba(255, 138, 110, .85), transparent 72%),
    linear-gradient(180deg, #3f7de6 0%, #8db5f7 48%, #ffd2c2 88%, #ffe8dd 100%);
}
.ws-skin-horizon .wb-ph::before {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(255, 255, 255, .5) 74.4%, transparent 75.6%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .14) 48%, transparent 60%);
}
.ws-skin-horizon .wb-ph::after { opacity: .1; mix-blend-mode: soft-light; }
/* 2 · clear morning */
.ws-skin-horizon .wb-ph--2 {
  background-color: #5d93ee;
  background-image:
    radial-gradient(30% 36% at 78% 26%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(70% 60% at 10% 100%, rgba(255, 255, 255, .35), transparent 70%),
    linear-gradient(200deg, #1f63d8 0%, #5d93ee 45%, #bcd5ff 100%);
}
/* 3 · golden hour */
.ws-skin-horizon .wb-ph--3 {
  background-color: #ffc2ae;
  background-image:
    radial-gradient(34% 40% at 30% 70%, rgba(255, 250, 240, .9), transparent 70%),
    radial-gradient(80% 70% at 100% 0%, rgba(14, 91, 216, .45), transparent 65%),
    linear-gradient(170deg, #7aa7f2 0%, #ffb49b 58%, #ffe1d4 100%);
}
/* 4 · deep sky with a coral horizon */
.ws-skin-horizon .wb-ph--4 {
  background-color: #0e3f9c;
  background-image:
    radial-gradient(60% 34% at 50% 100%, rgba(255, 138, 110, .9), transparent 72%),
    radial-gradient(90% 60% at 80% 0%, rgba(90, 150, 255, .5), transparent 65%),
    linear-gradient(180deg, #0b2a66 0%, #0e5bd8 70%, #5b8ff0 100%);
}
/* 5 · morning haze: a bright sky washing into peach, with a sky light high up and a coral one low down (coloured enough
   that it never reads as an empty white frame on a white page). */
.ws-skin-horizon .wb-ph--5, .ws-skin-horizon .wb :is(.section--dark, .section--slate, .section--red) .wb-ph--5,
.ws-skin-horizon .wb:is(.section--dark, .section--slate, .section--red) .wb-ph--5, .ws-skin-horizon .wb :is(.hero__media, .location-card, .slider__slide, .media-card__art) > .wb-ph--5,
.ws-skin-horizon .wb.page-hero > .wb-ph--5 {
  background-color: #b9d1fb;
  background-image:
    radial-gradient(50% 55% at 80% 16%, rgba(14, 91, 216, .5), transparent 70%),
    radial-gradient(55% 50% at 18% 92%, rgba(255, 107, 74, .55), transparent 72%),
    radial-gradient(30% 22% at 30% 70%, rgba(255, 250, 243, .7), transparent 70%),
    linear-gradient(165deg, #8fb4f5 0%, #c9dbfc 46%, #ffc8b4 100%);
}
.ws-skin-horizon .wb-ph--5::before, .ws-skin-horizon .wb :is(.section--dark, .section--slate, .section--red) .wb-ph--5::before,
.ws-skin-horizon .wb:is(.section--dark, .section--slate, .section--red) .wb-ph--5::before, .ws-skin-horizon .wb :is(.hero__media, .location-card, .slider__slide, .media-card__art) > .wb-ph--5::before,
.ws-skin-horizon .wb.page-hero > .wb-ph--5::before {
  background: linear-gradient(180deg, transparent 0 70%, rgba(255, 255, 255, .45) 70.4%, transparent 71.6%), linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .35) 48%, transparent 60%);
}
/* On the night band the mist mood turns to golden hour, so it never reads as an empty white card. */
.ws-skin-horizon .wb.section--dark .wb-ph--5, .ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .wb-ph--5 {
  background-color: #ffc2ae;
  background-image: radial-gradient(34% 40% at 30% 70%, rgba(255, 250, 240, .9), transparent 70%), radial-gradient(80% 70% at 100% 0%, rgba(14, 91, 216, .45), transparent 65%), linear-gradient(170deg, #7aa7f2 0%, #ffb49b 58%, #ffe1d4 100%);
}
/* 6 · twilight */
.ws-skin-horizon .wb-ph--6 {
  background-color: #0b1b33;
  background-image:
    radial-gradient(70% 30% at 50% 100%, rgba(255, 107, 74, .75), transparent 70%),
    radial-gradient(12% 16% at 72% 30%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(180deg, #16326a 0%, #2456b8 58%, #6f9cf0 100%);
}
.ws-skin-horizon .wb :is(.hero__media, .page-hero) > .wb-ph, .ws-skin-horizon .wb.page-hero > .wb-ph { filter: none; }

/* ── Header: a floating white bar with a sunrise mark ──────────────────── */
.ws-skin-horizon .ws-header, .ws-skin-horizon.ws-overlay .ws-header {
  position: sticky; top: 0; z-index: 50; padding: 12px var(--hz-inset) 0; background: transparent !important; border: 0;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none;
}
.ws-skin-horizon.ws-tpl-preview .ws-header { top: 48px; }
.ws-skin-horizon .ws-header-inner {
  max-width: 1320px; min-height: var(--ws-header-h); gap: 1.4rem; padding: 0 12px 0 22px; pointer-events: auto;
  background: rgba(255, 255, 255, .96); border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .06), 0 10px 30px -14px rgba(11, 27, 51, .22), 0 2px 6px -2px rgba(11, 27, 51, .06);
}
/* Frosted, but white enough to stay the white bar of the identity over the night band and the footer (no saturate()). */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .ws-skin-horizon .ws-header-inner { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.ws-skin-horizon .ws-brand { gap: 11px; color: var(--hz-ink) !important; font: 800 19px/1.1 var(--ws-font-h); letter-spacing: -.03em; }
/* The sunrise mark beside the name while the church has no logo: a sky tile with a rising sun on the horizon. */
.ws-skin-horizon .ws-header .ws-brand:not(:has(.ws-logo))::before, .ws-skin-horizon .ws-brand-foot:not(:has(.ws-logo))::before {
  content: ""; flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px;
  background:
    radial-gradient(circle at 50% 76%, #fff 0 21%, rgba(255, 255, 255, .45) 22% 30%, transparent 31%),
    linear-gradient(180deg, transparent 0 75%, rgba(255, 255, 255, .95) 75% 79%, rgba(255, 255, 255, .0) 79%),
    linear-gradient(165deg, #0e5bd8 0%, #3f7de6 46%, #ff8a6e 100%);
  box-shadow: 0 6px 14px -6px rgba(14, 91, 216, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ws-skin-horizon .ws-brand-name { max-width: 18ch; }
.ws-skin-horizon .ws-logo { border-radius: 12px; }
.ws-skin-horizon .ws-nav { gap: 1rem; }
.ws-skin-horizon .ws-menu { gap: 2px; }
.ws.ws-skin-horizon .ws-menu a { padding: 9px 13px; border-radius: 999px; color: var(--hz-ink-2); font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.ws.ws-skin-horizon .ws-menu > li > a:hover { background: var(--hz-mist); color: var(--hz-ink); }
.ws.ws-skin-horizon .ws-menu a[aria-current="page"], .ws.ws-skin-horizon .ws-menu .ws-active > a { color: var(--hz-sky); }
.ws.ws-skin-horizon .ws-menu > li > a[aria-current="page"]::after, .ws.ws-skin-horizon .ws-menu > .ws-active > a::after {
  left: 50%; right: auto; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--hz-coral);
}
.ws-skin-horizon .ws-caret { opacity: .55; }
.ws-skin-horizon .ws-sub { top: calc(100% + 10px); min-width: 230px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 51, .06), var(--hz-shadow-float); }
.ws.ws-skin-horizon .ws-sub a { padding: 10px 12px; border-radius: 12px; color: var(--hz-ink-2); font-size: 14.5px; }
.ws.ws-skin-horizon .ws-sub a:hover, .ws.ws-skin-horizon .ws-sub a[aria-current="page"] { background: var(--hz-mist); color: var(--hz-sky); }
.ws-skin-horizon .ws-header-cta { gap: 8px; }
.ws.ws-skin-horizon .ws-header-cta .ws-btn { min-height: 46px; padding: 0 20px; font-size: 14.5px; font-weight: 700; }
.ws.ws-skin-horizon .ws-header-cta .ws-btn-secondary { background: var(--hz-mist); border-color: transparent; color: var(--hz-sky-700); box-shadow: none; }
.ws.ws-skin-horizon .ws-header-cta .ws-btn-secondary:hover { background: var(--hz-mist-2); color: var(--hz-sky-700); }
.ws.ws-skin-horizon .ws-header-cta .ws-btn-primary { padding-left: 16px; }

/* ── Buttons: pills with a soft sky glow ───────────────────────────────── */
.ws-skin-horizon .wb .btn:where(:not(.wb-ext *)) { gap: .55rem; font-family: var(--ws-font-b); transition: background-color .2s var(--hz-ease), color .2s var(--hz-ease), border-color .2s var(--hz-ease), box-shadow .25s var(--hz-ease), transform .25s var(--hz-ease); }
.ws-skin-horizon .wb .btn:hover:where(:not(.wb-ext *)) { transform: translateY(-1px); }
.ws-skin-horizon .wb .btn--primary { background: linear-gradient(180deg, #1966e4, #0e5bd8); color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(11, 27, 51, .18), 0 10px 22px -10px rgba(14, 91, 216, .7); }
.ws-skin-horizon .wb .btn--primary:hover { background: linear-gradient(180deg, #0e5bd8, #0b4fc0); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(11, 27, 51, .18), 0 16px 30px -12px rgba(14, 91, 216, .75); }
.ws-skin-horizon .wb .btn--dark { background: var(--hz-navy); color: #fff; box-shadow: 0 10px 22px -12px rgba(11, 27, 51, .6); }
.ws-skin-horizon .wb .btn--dark:hover { background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb .btn--light { background: #fff; color: var(--hz-ink); border-color: transparent; box-shadow: 0 1px 2px rgba(11, 27, 51, .12), 0 12px 26px -14px rgba(11, 27, 51, .5); }
.ws-skin-horizon .wb .btn--light:hover { background: #fff; color: var(--hz-sky-700); box-shadow: 0 1px 2px rgba(11, 27, 51, .12), 0 18px 32px -14px rgba(11, 27, 51, .55); }
.ws-skin-horizon .wb .btn--outline { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--wb-fg) 55%, transparent); color: var(--wb-fg); }
.ws-skin-horizon .wb .btn--outline:hover { background: var(--wb-fg); border-color: var(--wb-fg); color: var(--wb-fg-inv); }
.ws-skin-horizon .wb .btn--ghost { background: #fff; border-color: var(--hz-line-2); color: var(--hz-ink); box-shadow: 0 1px 2px rgba(11, 27, 51, .06), 0 8px 18px -12px rgba(11, 27, 51, .3); }
.ws-skin-horizon .wb .btn--ghost:hover { background: #fff; border-color: var(--hz-sky); color: var(--hz-sky-700); }
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark) .btn--ghost, .ws-skin-horizon .wb.section--dark .btn--ghost, .ws-skin-horizon .wb.hero--slides .btn--ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #fff; box-shadow: none; }
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark) .btn--ghost:hover, .ws-skin-horizon .wb.section--dark .btn--ghost:hover, .ws-skin-horizon .wb.hero--slides .btn--ghost:hover { background: #fff; color: var(--hz-ink); }
.ws-skin-horizon .wb .btn--sm { padding: .65rem 1.1rem; }
.ws-skin-horizon .wb .btn-row { gap: .75rem; margin-top: 2rem; }
.ws-skin-horizon .wb .text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--wb-kicker); font-weight: 700; text-decoration: none; }
.ws-skin-horizon .wb .text-link:hover { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .text-link, .ws-skin-horizon .wb.section--dark .text-link { color: var(--hz-coral-on-dark); }

/* ── Labels, headings & text ────────────────────────────────────────────── */
/* The label is a soft pill with a coral dot. */
.ws-skin-horizon .wb .kicker {
  display: flex; align-items: center; gap: .55rem; width: fit-content; max-width: 100%; margin: 0 0 var(--wb-kicker-gap); padding: .42rem .9rem .42rem .75rem;
  border-radius: 999px; background: var(--hz-kicker-bg, #eaf2ff); color: var(--hz-kicker-fg, var(--hz-sky)); box-shadow: inset 0 0 0 1px rgba(14, 91, 216, .1);
  font: 700 var(--wb-kicker-size)/1.3 var(--ws-font-b); letter-spacing: .11em; text-transform: uppercase;
}
.ws-skin-horizon .wb .kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hz-coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .18); }
.ws-skin-horizon .wb :is(.text-center, .u-center) .kicker, .ws-skin-horizon .wb .u-center.kicker { margin-left: auto; margin-right: auto; }
.ws-skin-horizon .wb.section--slate { --hz-kicker-bg: #fff; }
.ws-skin-horizon .wb:is(.section--dark, .hero--slides), .ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark, .box--bg-slate, .box--bg-dark) { --hz-kicker-bg: rgba(255, 255, 255, .1); --hz-kicker-fg: #fff; }
.ws-skin-horizon .wb:is(.section--dark, .hero--slides) .kicker, .ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark) .kicker { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ws-skin-horizon .wb.section--red, .ws-skin-horizon .wb :is(.section--red, .box--bg-red) { --hz-kicker-bg: rgba(255, 255, 255, .16); --hz-kicker-fg: #fff; }
.ws-skin-horizon .wb.section--red .kicker { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.ws-skin-horizon .wb.section--red .kicker::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.ws-skin-horizon .wb .hb .kicker { margin-bottom: .7rem; padding: 0; background: none; box-shadow: none; }
.ws-skin-horizon .wb .hb .kicker::before { width: 6px; height: 6px; box-shadow: none; }
.ws-skin-horizon .wb .hb .kicker { color: var(--wb-kicker); }

.ws-skin-horizon .wb.section h2:where(:not(.wb-ext *)), .ws-skin-horizon .wb .section h2:where(:not(.wb-ext *)) { max-width: 19ch; letter-spacing: -.04em; }
.ws-skin-horizon .wb .text-center h2:where(:not(.wb-ext *)) { max-width: 22ch; }
.ws-skin-horizon .wb .intro { color: var(--wb-fg-2); line-height: 1.65; text-wrap: pretty; }
.ws-skin-horizon .wb .prose p, .ws-skin-horizon .wb .prose li { color: var(--wb-fg-2); font-size: 1.05rem; line-height: 1.7; }
/* *Highlighted words*: a sky-to-coral gradient on light grounds (both ends at 3:1 or more as large text), coral on dark. */
.ws-skin-horizon .wb .hl { color: var(--hz-sky); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ws-skin-horizon .wb :is(h1, h2, .wb-h1, .hb__title, .signup__title, .countdown__heading) .hl {
    background: linear-gradient(100deg, var(--hz-sky) 0%, #3a64d6 40%, var(--hz-coral-hl) 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .06em;
  }
  .ws-skin-horizon .wb:is(.section--dark, .hero--slides) :is(h1, h2, .wb-h1, .hb__title) .hl, .ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark, .box--bg-slate, .box--bg-dark) :is(h1, h2, .hb__title) .hl {
    background: linear-gradient(100deg, #ffb39f, var(--hz-coral-on-dark)); -webkit-background-clip: text; background-clip: text;
  }
  .ws-skin-horizon .wb.section--red :is(h1, h2, .hb__title) .hl, .ws-skin-horizon .wb :is(.box--bg-red) :is(h2, .hb__title) .hl { background: none; -webkit-text-fill-color: currentColor; color: #fff; }
}
.ws-skin-horizon .wb :is(.prose-h, .prose h2, .prose h3) { letter-spacing: -.025em; }
.ws-skin-horizon .wb .prose blockquote { border-left: 0; padding: .2em 0 .2em 1.3em; position: relative; }
.ws-skin-horizon .wb .prose blockquote::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--hz-sky), var(--hz-coral)); }
.ws-skin-horizon .wb :is(.prose, .intro, .note, .faq__a, .two-col, .timeline__body, .tabs__text, .story__quote, .campaign__text, .embed__fallback, .page-hero__content, .leader) a:not(.btn):not(.text-link) {
  color: var(--wb-kicker); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-decoration-thickness: 1.5px; font-weight: 600;
}

/* ── Heroes ─────────────────────────────────────────────────────────────── */
/* Bold hero: ink words on a sunrise mesh, the photo in a floating frame beside them, a faint horizon arc below. */
.ws-skin-horizon .wb.hero:not(.hero--slides) {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  min-height: 0; padding: clamp(3rem, 6vw, 5.5rem) max(var(--wb-gutter), calc((100% - var(--wb-container)) / 2)) clamp(5rem, 9vw, 7.5rem);
  background: var(--hz-mesh); isolation: isolate;
}
.ws-skin-horizon .wb.hero:not(.hero--slides)::before {
  content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; top: 90%; height: 120%; border-radius: 50%;
  border-top: 1px solid rgba(14, 91, 216, .16); background: radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%); pointer-events: none;
}
.ws-skin-horizon .wb.hero:not(.hero--slides)::after {
  content: ""; position: absolute; z-index: -1; right: 2%; bottom: 18%; width: clamp(160px, 22vw, 320px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 124, .55), rgba(255, 154, 124, 0) 68%); filter: blur(6px); pointer-events: none;
}
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__overlay { display: none; }
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__content { grid-column: 1; grid-row: 1; max-width: 640px; margin: 0; color: var(--hz-ink); }
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__media {
  position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 1 / 1.08; max-height: 600px; overflow: hidden;
  border-radius: 36px; background: #cfe0ff; box-shadow: var(--hz-shadow-float), 0 0 0 10px rgba(255, 255, 255, .55);
}
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__media > :is(img, video, .wb-ph) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Until the church adds a photo, the frame holds the Horizon sunrise: sky, sun, sea and its reflection. */
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__media > .wb-ph {
  background-color: #7fa9f5;
  background-image:
    radial-gradient(9% 7.5% at 50% 70%, #fffaf3 0 55%, transparent 100%),
    radial-gradient(34% 26% at 50% 70%, rgba(255, 214, 190, .95), rgba(255, 160, 130, .5) 45%, transparent 75%),
    linear-gradient(180deg, transparent 0 70%, rgba(255, 196, 170, .9) 70%, rgba(92, 140, 230, .85) 78%, #1f4fae 100%),
    radial-gradient(60% 40% at 50% 70%, rgba(255, 138, 110, .7), transparent 70%),
    linear-gradient(180deg, #1f5fd6 0%, #5d93ee 34%, #a9c6fb 56%, #ffc9b5 70%);
}
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__media > .wb-ph::before {
  background:
    linear-gradient(90deg, transparent 38%, rgba(255, 250, 243, .75) 47%, rgba(255, 250, 243, .75) 53%, transparent 62%) 0 76% / 100% 1.2% no-repeat,
    linear-gradient(90deg, transparent 42%, rgba(255, 250, 243, .55) 48%, rgba(255, 250, 243, .55) 52%, transparent 58%) 0 83% / 100% 1% no-repeat,
    linear-gradient(90deg, transparent 45%, rgba(255, 250, 243, .4) 49%, rgba(255, 250, 243, .4) 51%, transparent 55%) 0 90% / 100% .9% no-repeat,
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .2), transparent 60%);
}
.ws-skin-horizon .wb.hero:not(.hero--slides) .hero__media > .wb-ph::after { opacity: .08; }
.ws-skin-horizon .wb.hero :is(h1, .wb-h1) { max-width: 13ch; margin: 0 0 1.6rem; color: inherit; font-size: var(--wb-hero-h1); line-height: 1.01; letter-spacing: -.05em; }
.ws-skin-horizon .wb.hero:not(.hero--slides) :is(h1, .wb-h1) .hl { display: inline; }
.ws-skin-horizon .wb.hero .hero__pillars { gap: .5rem; margin: 0 0 2.1rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ws-skin-horizon .wb.hero .hero__pillars i { display: none; }
.ws-skin-horizon .wb.hero .hero__pillars span {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--hz-ink-2);
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .07), 0 6px 16px -10px rgba(11, 27, 51, .35); font-size: .92rem;
}
.ws-skin-horizon .wb.hero .hero__pillars span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hz-sky); box-shadow: 0 0 0 3px rgba(14, 91, 216, .15); }
.ws-skin-horizon .wb.hero .hero__pillars span:nth-of-type(2n)::before { background: var(--hz-coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .18); }
.ws-skin-horizon .wb.hero .hero__actions { gap: .75rem; }
/* The hero with photos keeps them behind the words, framed as a rounded panel. */
.ws-skin-horizon .wb.hero--slides { margin: 0 var(--hz-inset); border-radius: 0 0 var(--hz-r-band) var(--hz-r-band); }
.ws-skin-horizon .wb.hero--slides .hero__overlay {
  background: linear-gradient(90deg, rgba(11, 27, 51, .5) 0%, rgba(11, 27, 51, .22) 55%, rgba(11, 27, 51, 0) 100%),
    linear-gradient(180deg, rgba(11, 27, 51, .55) 0%, rgba(11, 27, 51, .36) 45%, rgba(11, 27, 51, .85) 100%);
}
.ws-skin-horizon .wb.hero--slides.hero--o-strong .hero__overlay { background: linear-gradient(180deg, rgba(11, 27, 51, .72) 0%, rgba(11, 27, 51, .55) 45%, rgba(11, 27, 51, .92) 100%); }
.ws-skin-horizon .wb.hero--slides.hero--o-none .hero__overlay { background: linear-gradient(180deg, rgba(11, 27, 51, .3) 0%, rgba(11, 27, 51, 0) 45%, rgba(11, 27, 51, .55) 100%); }
.ws-skin-horizon .wb.hero--slides .hero__pillars span { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ws-skin-horizon .wb .hero__dot::before { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .5); }
.ws-skin-horizon .wb .hero__dot[aria-current="true"]::before { background: var(--hz-coral); }

/* The first hero or page header slides up under the floating header, so its mesh shows around the bar. */
.ws-skin-horizon #main > .wb.hero:not(.hero--slides):first-child { margin-top: calc(-1 * var(--hz-head)); padding-top: calc(var(--hz-head) + clamp(3rem, 6vw, 5.5rem)); }
.ws-skin-horizon #main > .wb.hero--slides:first-child { margin-top: calc(-1 * var(--hz-head)); padding-top: calc(var(--hz-head) + clamp(3.5rem, 9vw, 5rem)); }
.ws-skin-horizon #main > .wb.page-hero:first-child { margin-top: calc(-1 * var(--hz-head)); padding-top: calc(var(--hz-head) + clamp(3rem, 6vw, 5rem)); }

/* ── Page headers (inner pages): the same mesh, the photo as a floating card on the right ── */
.ws-skin-horizon .wb.page-hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3rem, 6vw, 5rem) max(var(--wb-gutter), calc((100% - 1200px) / 2)) clamp(3.5rem, 6.5vw, 5.5rem);
  background: var(--hz-mesh); color: var(--hz-ink); isolation: isolate;
}
.ws-skin-horizon .wb.page-hero::after {
  content: ""; position: absolute; z-index: -1; left: -15%; right: -15%; top: 78%; height: 120%; border-radius: 50%;
  border-top: 1px solid rgba(14, 91, 216, .14); pointer-events: none;
}
.ws-skin-horizon .wb.page-hero .page-hero__overlay { display: none; }
/* A photo look on a page header only touches the photo: its wash would otherwise tint the whole sunrise mesh behind the words. */
.ws-skin-horizon .wb.page-hero.wb-f::before { content: none; }
.ws-skin-horizon .wb.page-hero > :is(img, .wb-ph) {
  position: relative; inset: auto; z-index: 1; grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float), 0 0 0 8px rgba(255, 255, 255, .55); transform: rotate(1.2deg);
}
.ws-skin-horizon .wb.page-hero .page-hero__content { grid-column: 1; grid-row: 1; max-width: 680px; margin: 0; }
.ws-skin-horizon .wb.page-hero :is(h1, .wb-h1) { max-width: 15ch; margin: 0 0 1.2rem; font-size: var(--wb-page-h1); line-height: 1.03; letter-spacing: -.045em; }
.ws-skin-horizon .wb.page-hero p { max-width: 54ch; color: var(--hz-ink-2); font-size: 1.12rem; line-height: 1.65; }
.ws-skin-horizon .wb.page-hero .page-hero__crumb {
  display: flex; align-items: center; gap: .55rem; width: fit-content; margin: 0 0 1.2rem; padding: .42rem .9rem .42rem .75rem; border-radius: 999px;
  background: #fff; color: var(--hz-sky); box-shadow: 0 0 0 1px rgba(14, 91, 216, .12), 0 6px 16px -10px rgba(11, 27, 51, .3);
  font: 700 .74rem/1.3 var(--ws-font-b); letter-spacing: .11em; text-transform: uppercase;
}
.ws-skin-horizon .wb.page-hero .page-hero__crumb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hz-coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .18); }
.ws-skin-horizon .wb.page-hero .page-hero__crumb a:hover { color: var(--hz-sky-700); }
.ws-skin-horizon .wb.page-hero .btn-row { margin-top: 2rem; }
.ws-skin-horizon .wb.page-hero--message { min-height: 0; }

/* ── Sections & bands ───────────────────────────────────────────────────── */
/* Mist, dark and brand bands are rounded panels inset from the page edge, so the page reads as floating layers. */
.ws-skin-horizon .wb:is(.section--slate, .section--dark, .section--red) { margin: var(--hz-inset) var(--hz-inset); border-radius: var(--hz-r-band); }
.ws-skin-horizon .wb.section--slate { background: linear-gradient(180deg, #edf4ff 0%, #f5f9ff 100%); box-shadow: inset 0 0 0 1px rgba(14, 91, 216, .06); }
.ws-skin-horizon .wb.section--dark {
  background-color: var(--hz-navy);
  background-image: radial-gradient(70% 90% at 100% 0%, rgba(14, 91, 216, .55), transparent 60%), radial-gradient(55% 70% at 0% 100%, rgba(255, 110, 120, .13), transparent 62%);
}
.ws-skin-horizon .wb.section--red {
  --wb-fg: #fff; --wb-fg-2: rgba(255, 255, 255, .92); --wb-fg-3: rgba(255, 255, 255, .85); --wb-ring: #fff; --wb-kicker: #fff;
  background-color: var(--hz-sky);
  background-image: radial-gradient(60% 80% at 100% 100%, rgba(255, 107, 74, .42), transparent 62%), radial-gradient(60% 90% at 0% 0%, rgba(122, 167, 242, .45), transparent 60%),
    linear-gradient(135deg, #0e5bd8, #0a45a8);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.ws-skin-horizon .wb.section--red :is(h2, .intro, p) { color: #fff; }
.ws-skin-horizon .wb.section--red .intro { color: rgba(255, 255, 255, .92); }
/* Two light sections share their gap; a band after a band keeps a little air. */
.ws-skin-horizon .wb.section:not(.section--dark):not(.section--slate):not(.section--red) + .wb.section:not(.section--dark):not(.section--slate):not(.section--red) { padding-top: calc(var(--wb-section-pad) * .25); }
.ws-skin-horizon #main > .wb:last-child:is(.section--slate, .section--dark, .section--red) { margin-bottom: 0; }
.ws-skin-horizon .wb:is(.section--slate, .section--dark, .section--red, .next-steps) + .wb.section:not(.section--dark):not(.section--slate):not(.section--red) { padding-top: calc(var(--wb-section-pad) * .8); }
/* Wide content stops at the floating header's inner edge (its 1320px bar less the gutters), so nothing sticks out past it. */
.ws-skin-horizon .wb .container--wide { max-width: calc(1320px - 2 * var(--hz-inset)); }
/* Decorations (tilted frames, glows) never widen the page on a phone. */
.ws-skin-horizon #main > .wb.section { overflow-x: clip; }
/* The countdown right after the home hero floats up over the hero's lower edge, under a compact label and heading of its
   own (so the page outline runs h1 → h2 → the event's h3). */
.ws-skin-horizon #main > .wb.hero + .wb.section:not(.section--dark):not(.section--slate):not(.section--red):has(> .container > :is(.evc, .el):last-child) {
  position: relative; z-index: 2; margin-top: calc(-1 * clamp(3.5rem, 7vw, 5rem)); padding-top: 0; padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* With a light countdown, the label, heading and countdown share one floating white card: the heading is the card's header
   line, the event title stays the biggest words in it. */
.ws-skin-horizon #main > .wb.hero + .wb.section:has(> .container > .evc--light:last-child) > .container {
  position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.3rem, 3.6vw, 2.75rem) 0; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .05), 0 40px 80px -40px rgba(11, 27, 51, .45), 0 12px 30px -18px rgba(14, 91, 216, .4);
}
.ws-skin-horizon #main > .wb.hero + .wb.section:has(> .container > .evc--light:last-child) > .container > .kicker { margin-bottom: .6rem; }
.ws-skin-horizon #main > .wb.hero + .wb.section:has(> .container > .evc--light:last-child) > .container > h2 {
  max-width: none; margin: 0; color: var(--hz-ink-2); font-size: clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing: -.025em; line-height: 1.25;
}
.ws-skin-horizon #main > .wb.hero + .wb.section > .container > h2 + .evc--light:last-child {
  margin: 1.2rem 0 0; padding-inline: 0; border: 0; border-top: 1px solid var(--hz-line); border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.ws-skin-horizon #main > .wb.hero + .wb.section > .container > h2 + .evc--light:last-child::before { right: -12%; bottom: -60%; }

/* Next-step tiles become floating cards in the page width. */
.ws-skin-horizon .wb.next-steps { gap: 20px; max-width: calc(var(--wb-container) + 2 * var(--wb-gutter)); margin: 0 auto; padding: 0 var(--wb-gutter) var(--wb-section-pad); background: transparent; }
.ws-skin-horizon .wb.section--tight-bottom + .wb.next-steps { margin-top: 0; }
.ws-skin-horizon .wb .step-tile { border-radius: var(--hz-r-card); box-shadow: var(--hz-shadow); transition: transform .3s var(--hz-ease), box-shadow .3s var(--hz-ease); }
.ws-skin-horizon .wb .step-tile:hover { filter: none; transform: translateY(-4px); box-shadow: var(--hz-shadow-hover); }
.ws-skin-horizon .wb .step-tile--red { background: linear-gradient(145deg, #1966e4, #0a45a8); }
.ws-skin-horizon .wb .step-tile--flame { background: linear-gradient(145deg, #ff8a6e, #ff6b4a); color: var(--hz-ink); }
.ws-skin-horizon .wb .step-tile--white { background: #fff; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .step-tile--white .step-tile__link { color: var(--hz-sky); }
.ws-skin-horizon .wb .step-tile--dark { background: var(--hz-navy); }
.ws-skin-horizon .wb .step-tile--dark .step-tile__link { color: var(--hz-coral-on-dark); }
.ws-skin-horizon .wb :is(.step-tile__link, .ministry__link, .channel span, .location-card__cta, .media-card__more, .group-card__more) { letter-spacing: .02em; text-transform: none; font-size: .95rem; font-weight: 700; }

/* ── Cards: every grid becomes floating cards with air between them ─────── */
.ws-skin-horizon .wb :is(.service-grid, .ministries, .channels, .facts, .values, .photo-pair, .photo-grid, .schedule, .events, .paths, .step-cards) { gap: clamp(14px, 1.8vw, 22px); overflow: visible; border-radius: 0; }
.ws-skin-horizon .wb :is(.service-grid, .ministries, .channels, .facts, .values, .photo-pair, .photo-grid, .schedule, .events, .paths, .step-cards) > * { box-shadow: var(--hz-shadow); border-radius: var(--hz-r-card); }
.ws-skin-horizon .wb :is(.ministry, .channel, .path, .step-tile):focus-visible { outline-offset: 4px; outline-color: var(--wb-ring); }

/* Service times: white cards with the time in a coral pill. */
.ws-skin-horizon .wb .service-grid { margin-top: 2.4rem; }
.ws-skin-horizon .wb .service-card { position: relative; padding: 1.9rem 1.8rem 1.7rem; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); overflow: hidden; }
.ws-skin-horizon .wb .service-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--hz-sky), var(--hz-coral)); }
.ws-skin-horizon .wb .service-card h3 { margin-bottom: .6rem; font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -.03em; }
.ws-skin-horizon .wb .service-card p { color: var(--hz-ink-2); font-size: 1rem; }
.ws-skin-horizon .wb .service-card .service-card__time {
  align-self: flex-start; margin-top: auto; padding: .45rem .9rem; border-radius: 12px; background: var(--hz-coral-tint); color: var(--hz-coral-ink);
  font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .service-card, .ws-skin-horizon .wb.section--dark .service-card { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ws-skin-horizon .wb.section--dark .service-card p { color: rgba(255, 255, 255, .8); }

/* Ministry cards: a sky card and a night card, each with a sunrise glow. */
.ws-skin-horizon .wb .ministries { margin-top: 2.4rem; }
.ws-skin-horizon .wb .ministry { position: relative; overflow: hidden; min-height: clamp(280px, 28vw, 340px); padding: clamp(2rem, 3.5vw, 2.8rem); isolation: isolate; transition: transform .3s var(--hz-ease), box-shadow .3s var(--hz-ease); }
.ws-skin-horizon .wb .ministry:hover { filter: none; transform: translateY(-4px); box-shadow: var(--hz-shadow-hover); }
.ws-skin-horizon .wb .ministry::after { content: ""; position: absolute; z-index: -1; right: -14%; bottom: -38%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 150, .5), rgba(255, 138, 110, .18) 40%, transparent 66%); }
.ws-skin-horizon .wb .ministry--dark::after { background: radial-gradient(circle, rgba(58, 120, 234, .55), rgba(58, 120, 234, .15) 42%, transparent 66%); }
.ws-skin-horizon .wb .ministry--red { background: linear-gradient(150deg, #1a68e6 0%, #0e5bd8 45%, #0a3f9c 100%); color: #fff; }
.ws-skin-horizon .wb .ministry--dark { background: linear-gradient(150deg, #173a73 0%, #0b1b33 70%); color: #fff; }
.ws-skin-horizon .wb .ministry h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.ws-skin-horizon .wb .ministry p { color: rgba(255, 255, 255, .88); font-size: 1.02rem; }
.ws-skin-horizon .wb .ministry .ministry__tagline { color: #fff; font-weight: 700; font-size: 1.08rem; }
.ws-skin-horizon .wb :is(.ministry--red, .path--red) p { color: #fff; }
.ws-skin-horizon .wb .ministry__link { display: inline-flex; align-items: center; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; }
.ws-skin-horizon .wb .ministry:hover .ministry__link { background: #fff; color: var(--hz-ink); }

/* Link cards on the dark band: frosted glass. */
.ws-skin-horizon .wb .channels { margin-top: 2.4rem; }
.ws-skin-horizon .wb .channel { padding: 1.9rem 1.8rem; background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s var(--hz-ease), transform .3s var(--hz-ease); }
.ws-skin-horizon .wb .channel:hover { background: rgba(255, 255, 255, .13); transform: translateY(-4px); }
.ws-skin-horizon .wb .channel h3 { font-size: 1.45rem; letter-spacing: -.03em; }
.ws-skin-horizon .wb .channel p { color: rgba(255, 255, 255, .78); font-size: 1rem; }
.ws-skin-horizon .wb .channel span { margin-top: auto; padding-top: 1rem; color: var(--hz-coral-on-dark); }
.ws-skin-horizon .wb:not(.section--dark) :is(.container, .box__inner) > .channels .channel { background: var(--hz-navy); }
.ws-skin-horizon .wb .photo--banner:has(+ .channels) { margin-bottom: 20px; border-radius: var(--hz-r-panel); }
.ws-skin-horizon .wb .photo--banner + .channels { border-radius: 0; }

/* Location card (Text and photo → location): a floating photo card with a frosted address panel. */
.ws-skin-horizon .wb .location-card { border: 0; border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .location-card__overlay { background: linear-gradient(180deg, rgba(11, 27, 51, 0) 45%, rgba(14, 50, 120, .35) 100%); }
.ws-skin-horizon .wb .location-card__body {
  left: 1rem; right: 1rem; bottom: 1rem; gap: .25rem; padding: 1.2rem 1.35rem; border-radius: 18px; background: rgba(255, 255, 255, .92); color: var(--hz-ink);
  box-shadow: 0 12px 30px -14px rgba(11, 27, 51, .5);
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .ws-skin-horizon .wb .location-card__body { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
.ws-skin-horizon .wb .location-card__body strong { color: var(--hz-ink); font-size: 1.2rem; letter-spacing: -.02em; }
.ws-skin-horizon .wb .location-card__body span { color: var(--hz-ink-2); }
.ws-skin-horizon .wb .location-card__body .location-card__cta { color: var(--hz-sky); }
.ws-skin-horizon .wb .location-card:focus-visible { outline-color: var(--hz-sky); outline-offset: 4px; }
.ws-skin-horizon .wb .visit-info { gap: .5rem; padding: 1.2rem 1.35rem; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .visit-info__time { color: var(--hz-sky); font-size: 1.02rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.ws-skin-horizon .wb .visit-info__address { color: var(--hz-ink-2); }
.ws-skin-horizon .wb .visit-info + .btn-row { margin-top: 1.6rem; }

/* Photos: rounded frames with a soft lift. */
.ws-skin-horizon .wb .photo { border-radius: var(--hz-r-panel); background: var(--hz-mist); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .split .photo { box-shadow: var(--hz-shadow-float), 0 0 0 8px #fff; }
.ws-skin-horizon .wb.section--slate .split .photo { box-shadow: var(--hz-shadow-float), 0 0 0 8px rgba(255, 255, 255, .7); }
.ws-skin-horizon .wb.section--dark .split .photo { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 0 0 8px rgba(255, 255, 255, .06); }
.ws-skin-horizon .wb .photo--banner { border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow); }
.ws-skin-horizon .wb .split { gap: clamp(2.5rem, 6vw, 5.5rem); }
.ws-skin-horizon .wb :is(.photo-pair, .photo-grid) > * { overflow: hidden; }
.ws-skin-horizon .wb :is(.photo-pair, .photo-grid) img { border-radius: var(--hz-r-card); }

/* ── Inner-page elements ────────────────────────────────────────────────── */
/* Facts: the label small and sky, the answer large. */
.ws-skin-horizon .wb .facts { margin-top: 2.4rem; }
.ws-skin-horizon .wb .fact { padding: 1.8rem 1.7rem; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow) !important; }
.ws-skin-horizon .wb .fact h3 { margin: 0 0 .7rem; color: var(--hz-sky); font: 700 .78rem/1.3 var(--ws-font-b); letter-spacing: .12em; text-transform: uppercase; }
.ws-skin-horizon .wb .fact p { color: var(--hz-ink); font: 700 1.18rem/1.45 var(--ws-font-h); letter-spacing: -.02em; }
.ws-skin-horizon .wb .facts--dark .fact, .ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .facts:not(.facts--light) .fact, .ws-skin-horizon .wb.section--dark .facts:not(.facts--light) .fact {
  background: var(--hz-navy); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--hz-shadow) !important; }
.ws-skin-horizon .wb.section--dark .facts:not(.facts--light) .fact { background: rgba(255, 255, 255, .07); }
.ws-skin-horizon .wb .facts--dark .fact h3, .ws-skin-horizon .wb.section--dark .facts:not(.facts--light) .fact h3 { color: var(--hz-coral-on-dark); }
.ws-skin-horizon .wb .facts--dark .fact p, .ws-skin-horizon .wb.section--dark .facts:not(.facts--light) .fact p { color: #fff; }

/* Callout: a soft sky note with a sun badge. */
.ws-skin-horizon .wb .note { position: relative; margin-top: 2rem; padding: 1.6rem 1.8rem 1.6rem 4.6rem; border: 0; border-radius: var(--hz-r-card); background: #f4f8ff; box-shadow: inset 0 0 0 1px rgba(14, 91, 216, .12); color: var(--hz-ink); }
.ws-skin-horizon .wb .note::before {
  content: ""; position: absolute; left: 1.5rem; top: 1.6rem; width: 2.1rem; height: 2.1rem; border-radius: 12px;
  background: radial-gradient(circle at 50% 70%, #fff 0 22%, transparent 23%), linear-gradient(180deg, transparent 69%, rgba(255, 255, 255, .95) 69% 74%, transparent 74%), linear-gradient(165deg, var(--hz-sky), var(--hz-coral-soft));
}
.ws-skin-horizon .wb.section--slate .note { background: #fff; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .note h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.ws-skin-horizon .wb .note .note__lead { font-weight: 700; }
.ws-skin-horizon .wb .note p { color: var(--hz-ink-2); }

/* Labelled rows: a vertical path with sky pills and a thin rail. */
.ws-skin-horizon .wb .timeline { border-top: 0; margin-top: 2.2rem; }
.ws-skin-horizon .wb .timeline__row { position: relative; padding: 1.5rem 0 1.5rem; border-bottom: 1px solid var(--wb-line); }
.ws-skin-horizon .wb .timeline__row:last-child { border-bottom: 0; }
.ws-skin-horizon .wb .timeline__label {
  display: inline-flex; align-self: start; width: fit-content; padding: .42rem .95rem; border-radius: 999px; background: #fff; color: var(--hz-sky);
  box-shadow: 0 0 0 1px rgba(14, 91, 216, .14), 0 6px 14px -10px rgba(11, 27, 51, .35); font-size: .8rem; font-weight: 700; letter-spacing: .06em;
}
.ws-skin-horizon .wb .timeline__body h3 { font-size: 1.3rem; letter-spacing: -.025em; }
@media (min-width: 720px) {
  .ws-skin-horizon .wb .timeline__row { grid-template-columns: 10rem 1fr; gap: 2rem; }
  .ws-skin-horizon .wb .timeline__label { padding-right: .95rem; border-right: 0; }
}
.ws-skin-horizon .wb.section--dark .timeline__label { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

/* Value cards: numbered, with a coral numeral. */
.ws-skin-horizon .wb .values { counter-reset: hz-value; margin-top: 2.4rem; }
.ws-skin-horizon .wb .value { counter-increment: hz-value; padding: 1.9rem 1.7rem; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow) !important; }
.ws-skin-horizon .wb .value::before { content: counter(hz-value, decimal-leading-zero); display: block; margin-bottom: 1.1rem; color: var(--hz-coral-ink); font: 800 .95rem/1 var(--ws-font-h); letter-spacing: .02em; }
.ws.ws-skin-horizon .wb .value h3 { margin-bottom: .55rem; color: var(--hz-ink); font-size: 1.3rem; letter-spacing: -.03em; }
.ws-skin-horizon .wb .value p { color: var(--hz-ink-2); font-size: 1rem; }
.ws-skin-horizon .wb.section--dark .value { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }
.ws.ws-skin-horizon .wb.section--dark .value h3 { color: #fff; }
.ws-skin-horizon .wb.section--dark .value p { color: rgba(255, 255, 255, .82); }
.ws-skin-horizon .wb.section--dark .value::before { color: var(--hz-coral-on-dark); }

/* Weekly schedule: white cards with a clock dot. */
.ws-skin-horizon .wb .schedule { margin-top: 2.2rem; }
.ws-skin-horizon .wb .schedule__item { position: relative; padding: 1.6rem 1.6rem 1.6rem 3.4rem; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow) !important; }
.ws-skin-horizon .wb .schedule__item::before { content: ""; position: absolute; left: 1.5rem; top: 1.95rem; width: 10px; height: 10px; border-radius: 50%; background: var(--hz-sky); box-shadow: 0 0 0 4px rgba(14, 91, 216, .14); }
.ws-skin-horizon .wb .schedule__item:nth-child(3n + 2)::before { background: var(--hz-coral); box-shadow: 0 0 0 4px rgba(255, 107, 74, .18); }
.ws-skin-horizon .wb .schedule__item h3 { margin-bottom: .35rem; color: var(--hz-ink); font-size: 1.12rem; letter-spacing: -.02em; }
.ws-skin-horizon .wb .schedule__item p { color: var(--hz-ink-2); }
.ws-skin-horizon .wb.section--dark .schedule__item { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }
.ws-skin-horizon .wb.section--dark .schedule__item h3 { color: #fff; }
.ws-skin-horizon .wb.section--dark .schedule__item p { color: rgba(255, 255, 255, .82); }

/* Text columns */
.ws-skin-horizon .wb .two-col__title { font-size: 1.3rem; letter-spacing: -.025em; }

/* Person profile: the portrait in a tilted frame over a sunrise card. */
.ws-skin-horizon .wb .leader { gap: clamp(2.4rem, 6vw, 5rem); align-items: center; }
.ws-skin-horizon .wb .leader__photo { position: relative; overflow: visible; background: none; border-radius: var(--hz-r-panel); isolation: isolate; }
.ws-skin-horizon .wb .leader__photo::before { content: ""; position: absolute; z-index: -1; inset: 8% -14px -14px 8%; border-radius: var(--hz-r-panel); background: linear-gradient(160deg, #cfe0ff, #ffd6c8); transform: rotate(3deg); }
.ws-skin-horizon .wb .leader__photo > :is(img, .wb-ph) { border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); overflow: hidden; }
.ws-skin-horizon .wb .leader__role { display: inline-flex; padding: .42rem .9rem; border-radius: 999px; background: #eaf2ff; color: var(--hz-sky); font-size: .74rem; font-weight: 700; letter-spacing: .11em; }
.ws-skin-horizon .wb .leader h2 { font-size: clamp(2rem, 4vw, 3rem); }

/* Numbered steps: white cards with a big gradient numeral. */
.ws-skin-horizon .wb .step-cards { counter-reset: hz-step; margin-top: 2.4rem; }
.ws-skin-horizon .wb .step-card { position: relative; padding: 2rem 1.8rem 1.9rem; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow) !important; counter-increment: hz-step; }
.ws-skin-horizon .wb .step-card::before {
  content: counter(hz-step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.2rem; border-radius: 14px;
  background: linear-gradient(150deg, #1966e4, #0a45a8); color: #fff; font: 800 1.1rem/1 var(--ws-font-h); box-shadow: 0 10px 20px -10px rgba(14, 91, 216, .8);
}
.ws-skin-horizon .wb .step-card:nth-child(2)::before { background: linear-gradient(150deg, #ff9a7c, #ff6b4a); color: var(--hz-ink); box-shadow: 0 10px 20px -10px rgba(255, 107, 74, .8); }
.ws-skin-horizon .wb .step-card:nth-child(3)::before { background: linear-gradient(150deg, #173a73, #0b1b33); }
.ws-skin-horizon .wb .step-card .step-card__num { margin-bottom: .5rem; color: var(--hz-ink); font: 800 1.2rem/1.25 var(--ws-font-h); letter-spacing: -.02em; text-transform: none; }
.ws-skin-horizon .wb .step-card p { color: var(--hz-ink-2); font-size: 1rem; }

/* Choice cards */
.ws-skin-horizon .wb .paths { margin-top: 2rem; }
.ws-skin-horizon .wb .path { position: relative; overflow: hidden; min-height: 300px; isolation: isolate; transition: transform .3s var(--hz-ease), box-shadow .3s var(--hz-ease); }
.ws-skin-horizon .wb .path:hover { filter: none; transform: translateY(-4px); box-shadow: var(--hz-shadow-hover); }
.ws-skin-horizon .wb .path::after { content: "→"; position: absolute; right: 1.6rem; bottom: 1.4rem; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; font-size: 1.3rem; transition: background-color .25s, color .25s, transform .3s var(--hz-ease); }
.ws-skin-horizon .wb .path:hover::after { background: #fff; color: var(--hz-ink); transform: translateX(3px); }
.ws-skin-horizon .wb .path--red { background: linear-gradient(150deg, #1a68e6 0%, #0e5bd8 45%, #0a3f9c 100%); color: #fff; }
.ws-skin-horizon .wb .path--dark { background: linear-gradient(150deg, #173a73 0%, #0b1b33 70%); color: #fff; }
.ws-skin-horizon .wb .path .path__kicker { display: inline-flex; padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .74rem; font-weight: 700; letter-spacing: .1em; }
.ws-skin-horizon .wb .path h2 { letter-spacing: -.04em; }
.ws-skin-horizon .wb .path p { color: rgba(255, 255, 255, .88); padding-right: 3rem; }

/* ── Interactive ────────────────────────────────────────────────────────── */
/* Questions: rounded cards, the sign in a sky disc. */
.ws-skin-horizon .wb .faq { max-width: 860px; }
.ws-skin-horizon .wb .faq__q { padding: 1.25rem 0; font: 700 1.1rem/1.35 var(--ws-font-h); letter-spacing: -.02em; }
.ws-skin-horizon .wb .faq__q:hover { color: var(--hz-sky); }
.ws-skin-horizon .wb .faq__icon { width: 32px; height: 32px; border-radius: 50%; background: #eaf2ff; color: var(--hz-sky); transition: background-color .2s, color .2s; }
.ws-skin-horizon .wb .faq__icon::before, .ws-skin-horizon .wb .faq__icon::after { top: 15px; left: 10px; width: 12px; height: 2px; border-radius: 2px; }
.ws-skin-horizon .wb details[open] > .faq__q .faq__icon { background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb .faq--lines .faq__item:first-child { border-top: 1px solid var(--wb-line); }
.ws-skin-horizon .wb .faq--cards .faq__item { margin-bottom: .75rem; padding: 0 1.5rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hz-line), 0 8px 20px -16px rgba(11, 27, 51, .4); transition: box-shadow .25s var(--hz-ease); }
.ws-skin-horizon .wb .faq--cards .faq__item[open] { box-shadow: 0 0 0 1px rgba(14, 91, 216, .18), var(--hz-shadow); }
.ws-skin-horizon .wb .faq__a p { color: var(--hz-ink-2); }

/* Tabs */
.ws-skin-horizon .wb .tabs__tab { font: 700 .95rem/1.2 var(--ws-font-b); letter-spacing: 0; text-transform: none; }
.ws-skin-horizon .wb .tabs--underline .tabs__tab[aria-selected="true"]::after { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--hz-sky), var(--hz-coral)); }
.ws-skin-horizon .wb .tabs--pills .tabs__list { gap: .5rem; padding: .35rem; width: fit-content; max-width: 100%; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hz-line), 0 10px 24px -18px rgba(11, 27, 51, .45); }
.ws-skin-horizon .wb .tabs--pills .tabs__tab { padding: .7rem 1.3rem; border: 0; color: var(--hz-ink-2); }
.ws-skin-horizon .wb .tabs--pills .tabs__tab:hover { background: var(--hz-mist); color: var(--hz-ink); }
.ws-skin-horizon .wb .tabs--pills .tabs__tab[aria-selected="true"] { background: linear-gradient(180deg, #1966e4, #0e5bd8); color: #fff; box-shadow: 0 8px 16px -10px rgba(14, 91, 216, .8); }
.ws-skin-horizon .wb .tabs--boxed .tabs__panel, .ws-skin-horizon .wb .tabs--boxed .tabs__tab { border-radius: 16px; }
.ws-skin-horizon .wb .tabs__panel--photo { gap: clamp(1.6rem, 4vw, 3.5rem); }
.ws-skin-horizon .wb .tabs__photo { border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .tabs__heading { letter-spacing: -.04em; }
.ws-skin-horizon .wb .tabs--pills .tabs__panel { padding: clamp(1.5rem, 3.2vw, 2.4rem); border-radius: var(--hz-r-panel); background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .tabs--pills .tabs__panel:not(.tabs__panel--photo) { max-width: 820px; }
.ws-skin-horizon .wb.section--dark .tabs--pills .tabs__panel { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* Slideshow, stories */
.ws-skin-horizon .wb .slider { border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .slider .slider__slide::after { background: linear-gradient(180deg, rgba(11, 27, 51, 0) 30%, rgba(11, 27, 51, .8)); }
.ws-skin-horizon .wb .slider__arrow:hover { background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb .stories { gap: clamp(14px, 1.8vw, 22px); }
.ws-skin-horizon .wb .story { position: relative; padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--hz-r-card); background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb.section--slate .stories--auto .story { background: #fff; color: var(--hz-ink); }
.ws-skin-horizon .wb .story__quote p { color: var(--hz-ink); font-size: 1.1rem; font-weight: 500; line-height: 1.6; }
.ws-skin-horizon .wb .story__quote p::before {
  content: "“"; height: .5em; margin-bottom: .5rem; font: 700 4.6rem/1 Georgia, 'Times New Roman', serif;
  background: linear-gradient(120deg, var(--hz-sky), var(--hz-coral)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--hz-sky);
}
.ws-skin-horizon .wb .story__who { padding-top: 1.1rem; border-top: 1px solid var(--hz-line); }
.ws-skin-horizon .wb .story__who strong { font-family: var(--ws-font-h); font-weight: 800; letter-spacing: -.01em; }
.ws-skin-horizon .wb .story__role { color: var(--hz-muted); }
.ws-skin-horizon .wb .story__who:not(:has(.story__photo))::before {
  content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(150deg, #cfe0ff, #ffd6c8); box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .06);
}
.ws-skin-horizon .wb :is(.stories--dark, .stories--slate) .story, .ws-skin-horizon .wb.section--dark .stories--auto .story { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ws-skin-horizon .wb :is(.stories--dark, .stories--slate) .story__quote p, .ws-skin-horizon .wb.section--dark .stories--auto .story__quote p { color: #fff; }
.ws-skin-horizon .wb :is(.stories--dark, .stories--slate) .story__who, .ws-skin-horizon .wb.section--dark .stories--auto .story__who { border-top-color: rgba(255, 255, 255, .14); }
.ws-skin-horizon .wb .stories--slider .story { border-radius: 0; box-shadow: none; }
.ws-skin-horizon .wb .stories--slider { border-radius: var(--hz-r-card); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }

/* Countdown (the date element) and numbers */
.ws-skin-horizon .wb .countdown__clock { gap: .75rem; }
.ws-skin-horizon .wb .countdown--boxes .countdown__unit { min-width: 5.6rem; padding: 1.1rem 1rem .9rem; border-radius: 18px; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb.section--dark .countdown--boxes .countdown__unit, .ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .countdown--boxes .countdown__unit { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ws-skin-horizon .wb .countdown__unit strong { font-weight: 800; letter-spacing: -.04em; }
.ws-skin-horizon .wb .countdown__unit span { font-weight: 700; letter-spacing: .12em; opacity: 1; color: var(--wb-fg-3); }
.ws-skin-horizon .wb .countdown__done { text-transform: none; letter-spacing: -.02em; }
.ws-skin-horizon .wb .stat__value { font-weight: 800; letter-spacing: -.05em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ws-skin-horizon .wb .stats--c-red .stat__value { background: linear-gradient(110deg, var(--hz-sky), #3a64d6 55%, var(--hz-coral-hl)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .ws-skin-horizon .wb.section--dark .stats--c-red .stat__value { background: linear-gradient(110deg, #9cc0ff, var(--hz-coral-on-dark)); -webkit-background-clip: text; background-clip: text; }
}
.ws-skin-horizon .wb .stat__label { color: var(--wb-fg-3); font-weight: 700; letter-spacing: .1em; }

/* Quotes */
.ws-skin-horizon .wb .quote-block blockquote p { font-weight: 700; letter-spacing: -.02em; }
.ws-skin-horizon .wb .quote-block--large blockquote p { font-family: var(--ws-font-h); font-size: clamp(1.7rem, 3.6vw, 2.75rem); font-weight: 800; line-height: 1.18; letter-spacing: -.04em; text-wrap: balance; }
.ws-skin-horizon .wb .quote-block--large blockquote p::before {
  content: "“"; height: .5em; font: 700 2.6em/1 Georgia, 'Times New Roman', serif; background: linear-gradient(120deg, var(--hz-sky), var(--hz-coral)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--hz-sky);
}
.ws-skin-horizon .wb .quote-block figcaption { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem; padding: .42rem .9rem; border-radius: 999px; background: #eaf2ff; color: var(--hz-sky); font-size: .74rem; font-weight: 700; letter-spacing: .11em; opacity: 1; }
.ws-skin-horizon .wb .quote-block figcaption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hz-coral); }
.ws-skin-horizon .wb .quote-block--line { padding-left: 1.5rem; border-left: 0; position: relative; }
.ws-skin-horizon .wb .quote-block--line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--hz-sky), var(--hz-coral)); }
.ws-skin-horizon .wb .quote-block--card { border-radius: var(--hz-r-panel); background: linear-gradient(150deg, #173a73, #0b1b33); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .quote-block--card figcaption { background: rgba(255, 255, 255, .1); color: #fff; }

/* Icons, dividers, images, boxes */
.ws-skin-horizon .wb :is(.icon-block--circle, .icon-block--square) .icon-block__glyph { background: #eaf2ff; color: var(--hz-sky); }
.ws-skin-horizon .wb .icon-block--square .icon-block__glyph { border-radius: 16px; }
.ws-skin-horizon .wb .icon-block--c-flame .icon-block__glyph { color: var(--hz-coral-ink); }
.ws-skin-horizon .wb .icon-block--c-flame:is(.icon-block--circle, .icon-block--square) .icon-block__glyph { background: var(--hz-coral-tint); }
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark) :is(.icon-block--circle, .icon-block--square) .icon-block__glyph { background: rgba(255, 255, 255, .1); color: #fff; }
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .icon-block--c-flame .icon-block__glyph { color: var(--hz-coral-on-dark); }
.ws-skin-horizon .wb .divider--short { height: 4px; border: 0; border-radius: 4px; background: linear-gradient(90deg, var(--hz-sky), var(--hz-coral)); }
.ws-skin-horizon .wb .img-block--radius-md .img-block__frame { border-radius: 16px; }
.ws-skin-horizon .wb .img-block--radius-lg .img-block__frame { border-radius: var(--hz-r-panel); }
.ws-skin-horizon .wb .box--radius-md { border-radius: 16px; }
.ws-skin-horizon .wb .box--radius-lg { border-radius: 26px; }
.ws-skin-horizon .wb .box--shadow-sm { box-shadow: 0 0 0 1px var(--hz-line), 0 8px 20px -14px rgba(11, 27, 51, .35); }
.ws-skin-horizon .wb .box--shadow-md { box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .box--shadow-lg { box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow-float); }
.ws-skin-horizon .wb .box--hover-lift { transition: transform .35s var(--hz-ease), box-shadow .35s var(--hz-ease); }
.ws-skin-horizon .wb .box--hover-lift:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(14, 91, 216, .14), var(--hz-shadow-hover); }
.ws-skin-horizon .wb .box--bg-light { background: var(--hz-mist); }
.ws-skin-horizon .wb .box--bg-dark { background: var(--hz-navy); }
.ws-skin-horizon .wb .box--bg-red { background: linear-gradient(150deg, #1966e4, #0a45a8); }
.ws-skin-horizon .wb .box--bg-flame { background: linear-gradient(150deg, #ff9a7c, #ff6b4a); }
.ws-skin-horizon .wb .box--border-accent-top { border-top: 4px solid var(--hz-sky); }
.ws-skin-horizon .wb .box--border-accent-left { border-left: 4px solid var(--hz-sky); }
.ws-skin-horizon .wb .boxes { --gap: clamp(14px, 1.8vw, 22px); margin-top: 2.6rem; }
.ws-skin-horizon .wb .boxes--gap-lg { --gap: 2.5rem; }
.ws-skin-horizon .wb .boxes--gap-sm { --gap: .75rem; }
.ws-skin-horizon .wb .boxes--gap-none { --gap: 0px; }
.ws-skin-horizon .wb .box .hb .hb__title { letter-spacing: -.03em; }
.ws-skin-horizon .wb .box .img-block { margin-top: 0; }
.ws-skin-horizon .wb .box .img-block + .hb { margin-top: 1.4rem; }
.ws-skin-horizon .wb .box > .box__inner > .buttons-block:last-child { margin-top: auto; padding-top: 1.1rem; }
.ws-skin-horizon .wb .box > .box__inner > .icon-block:first-child + .hb { margin-top: 1.3rem; }
.ws-skin-horizon .wb .box--va-spread > .box__inner { justify-content: flex-start; }
.ws-skin-horizon .wb .box .prose p { font-size: 1rem; }
.ws-skin-horizon .wb .box--pad-lg { --hz-pad: clamp(1.5rem, 2.4vw, 2.1rem); }
.ws-skin-horizon .wb .box--pad-lg > .box__inner { padding: var(--hz-pad); }
.ws-skin-horizon .wb .img-block:not(.u-center):not(.u-right) { margin-left: 0; margin-right: 0; }
.ws-skin-horizon .wb .img-block.u-center, .ws-skin-horizon .wb .u-center > .img-block:not(.u-left):not(.u-right) { margin-left: auto; margin-right: auto; }
.ws-skin-horizon .wb .img-block.u-right { margin-right: 0; }
/* In a rounded white card, a photo placed first runs edge to edge across the top (campus cards). */
.ws-skin-horizon .wb .box--bg-white.box--pad-lg > .box__inner > .img-block:first-child { margin: calc(-1 * var(--hz-pad)) calc(-1 * var(--hz-pad)) 0; width: auto; }
.ws-skin-horizon .wb .box--bg-white.box--pad-lg > .box__inner > .img-block:first-child .img-block__frame { border-radius: 26px 26px 0 0; }
.ws-skin-horizon .wb .box--bg-white.box--pad-lg > .box__inner > .img-block:first-child + * { margin-top: 1.5rem; }
/* Until the church adds photos, each campus card shows its own sky: sunrise over the main campus, a glowing screen at dusk
   for the online campus, a warm evening over the rooftops for home groups (or the next campus). */
.ws-skin-horizon .wb .boxes > .box--bg-white.box--pad-lg > .box__inner > .img-block:first-child .wb-ph { filter: none; }
.ws-skin-horizon .wb .boxes > .box--bg-white.box--pad-lg:nth-child(3n + 1) > .box__inner > .img-block:first-child .wb-ph {
  background-color: #7fa9f5;
  background-image:
    radial-gradient(7% 12.5% at 50% 74%, #fffaf3 0 60%, transparent 100%),
    radial-gradient(38% 42% at 50% 74%, rgba(255, 214, 190, .95), rgba(255, 160, 130, .45) 45%, transparent 75%),
    linear-gradient(180deg, transparent 0 74%, rgba(255, 196, 170, .9) 74%, rgba(92, 140, 230, .85) 87%, #2a5fc4 100%),
    linear-gradient(180deg, #2a69dc 0%, #6d9ff0 38%, #b5cffb 58%, #ffcbb7 74%);
}
.ws-skin-horizon .wb .boxes > .box--bg-white.box--pad-lg:nth-child(3n + 2) > .box__inner > .img-block:first-child .wb-ph {
  background-color: #12284a;
  background-image:
    radial-gradient(48% 60% at 50% 48%, rgba(122, 167, 242, .5), transparent 70%),
    radial-gradient(60% 40% at 50% 112%, rgba(255, 107, 74, .45), transparent 70%),
    linear-gradient(180deg, #0b1b33 0%, #16326a 70%, #1f4a9a 100%);
}
.ws-skin-horizon .wb .boxes > .box--bg-white.box--pad-lg:nth-child(3n + 2) > .box__inner > .img-block:first-child .wb-ph::before {
  inset: 22% 29% 28%; border-radius: 12px;
  background:
    radial-gradient(12% 20% at 50% 66%, #fffaf3 0 55%, transparent 100%),
    linear-gradient(180deg, transparent 0 66%, rgba(255, 250, 243, .7) 66% 68%, rgba(92, 140, 230, .8) 68%),
    linear-gradient(175deg, #3f7de6 0%, #8db5f7 45%, #ffc2ae 66%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 0 60px 6px rgba(122, 167, 242, .6);
}
.ws-skin-horizon .wb .boxes > .box--bg-white.box--pad-lg:nth-child(3n) > .box__inner > .img-block:first-child .wb-ph {
  background-color: #f2a78f;
  background-image:
    radial-gradient(10% 17% at 70% 50%, #fff4e3 0 55%, transparent 100%),
    radial-gradient(34% 44% at 70% 50%, rgba(255, 214, 170, .85), transparent 72%),
    linear-gradient(180deg, #4c6fd0 0%, #a996cf 34%, #f5a28a 62%, #ffd2b0 100%);
}
.ws-skin-horizon .wb .boxes > .box--bg-white.box--pad-lg:nth-child(3n) > .box__inner > .img-block:first-child .wb-ph::before {
  background:
    radial-gradient(1% 1.8% at 17% 91%, #ffe2a8 0 70%, transparent 100%), radial-gradient(1% 1.8% at 24% 87%, #ffe2a8 0 70%, transparent 100%),
    radial-gradient(1% 1.8% at 31% 93%, #ffe2a8 0 70%, transparent 100%), radial-gradient(1% 1.8% at 75% 94%, #ffe2a8 0 70%, transparent 100%),
    radial-gradient(1% 1.8% at 84% 91%, #ffe2a8 0 70%, transparent 100%),
    radial-gradient(70% 34% at 24% 100%, #2c2a5c 0 64%, transparent 65%),
    radial-gradient(60% 30% at 80% 102%, #3b3470 0 64%, transparent 65%);
}

/* Social icons, video, map, player, audio */
.ws-skin-horizon .wb .social-links a { background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), 0 8px 18px -12px rgba(11, 27, 51, .4); }
.ws-skin-horizon .wb .social-links a:hover { background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb.section--dark .social-links a { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ws-skin-horizon .wb .video-block, .ws-skin-horizon .wb .player { border: 0; border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .player__placeholder { background: radial-gradient(70% 90% at 100% 0%, rgba(14, 91, 216, .5), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(255, 107, 74, .25), transparent 62%), var(--hz-navy); }
.ws-skin-horizon .wb .player__play { background: #fff; color: var(--hz-sky); box-shadow: 0 0 0 10px rgba(255, 255, 255, .12); }
.ws-skin-horizon .wb .player__placeholder strong { text-transform: none; letter-spacing: -.02em; font-family: var(--ws-font-h); }
.ws-skin-horizon .wb .map-block { border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .wb .map-block__btn { border-radius: 999px; }
.ws-skin-horizon .wb .audio-block { border-radius: 18px; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .embed { border: 0; border-radius: var(--hz-r-panel); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow-float); }
.ws-skin-horizon .wb .embed__head { background: linear-gradient(120deg, #eef5ff, #fff4ef); color: var(--hz-ink); }
.ws-skin-horizon .wb .embed__head strong { letter-spacing: -.02em; }
.ws-skin-horizon .wb .embed__head span { color: var(--hz-muted); }

/* ── Feeds & forms ──────────────────────────────────────────────────────── */
.ws-skin-horizon .wb .card-grid { gap: clamp(16px, 2vw, 24px); }
.ws-skin-horizon .wb .media-card { border-radius: var(--hz-r-card); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .media-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(14, 91, 216, .14), var(--hz-shadow-hover); }
.ws-skin-horizon .wb .media-card__art { border-radius: 16px; margin: .6rem .6rem 0; }
.ws-skin-horizon .wb .media-card__blank { background: linear-gradient(160deg, #1966e4, #0b1b33); text-transform: none; }
.ws-skin-horizon .wb .media-card__play { background: #fff; color: var(--hz-sky); }
.ws-skin-horizon .wb .media-card__kicker { color: var(--hz-sky); letter-spacing: .1em; }
.ws-skin-horizon .wb .media-card__title { font-weight: 800; letter-spacing: -.02em; }
.ws-skin-horizon .wb .media-card__more { color: var(--hz-sky); }
.ws-skin-horizon .wb .group-card { border-top: 0; border-radius: var(--hz-r-card); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); position: relative; overflow: hidden; }
.ws-skin-horizon .wb .group-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--hz-sky), var(--hz-coral)); }
.ws-skin-horizon .wb .group-card__type, .ws-skin-horizon .wb .group-card__more { color: var(--hz-sky); }
.ws-skin-horizon .wb .filters { border-radius: var(--hz-r-card); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .filters__field span { color: var(--hz-ink-2); font-weight: 700; letter-spacing: .08em; }
.ws-skin-horizon .wb .filters :is(input[type="search"], select) { border: 1.5px solid var(--hz-border); border-radius: 12px; }
.ws-skin-horizon .wb .filters :is(input, select):focus { border-color: var(--hz-sky); box-shadow: 0 0 0 4px rgba(14, 91, 216, .18); }
.ws-skin-horizon .wb .chip { border: 1.5px solid var(--hz-line-2); background: #fff; color: var(--hz-ink-2); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: .9rem; }
.ws-skin-horizon .wb .chip:hover { border-color: var(--hz-sky); color: var(--hz-sky); }
.ws-skin-horizon .wb .chip.is-active { border-color: var(--hz-sky); background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb .pager__link { border: 1.5px solid var(--hz-line-2); border-radius: 999px; }
.ws-skin-horizon .wb .pager__link.is-current { border-color: var(--hz-sky); background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb .share a, .ws-skin-horizon .wb .share__copy, .ws-skin-horizon .wb .add-cal a { border: 1.5px solid var(--hz-line-2); border-radius: 999px; background: #fff; color: var(--hz-ink); }
.ws-skin-horizon .wb :is(.share a, .share__copy, .add-cal a):hover { border-color: var(--hz-sky); color: var(--hz-sky); }

/* Forms: a floating white panel with a sunrise head. */
.ws-skin-horizon .wb .form-panel { max-width: 780px; border: 0; border-radius: var(--hz-r-panel); background: #fff; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow-float); }
.ws-skin-horizon .wb .container > .form-panel:first-child { margin-top: 0; }
.ws-skin-horizon .wb .form-panel__head {
  padding: 1.5rem clamp(1.5rem, 4vw, 2.4rem); background: linear-gradient(120deg, #eaf2ff 0%, #f6f9ff 55%, #fff1ec 100%); color: var(--hz-ink);
  border-bottom: 1px solid var(--hz-line);
}
.ws-skin-horizon .wb .form-panel__head strong { font: 800 1.3rem/1.2 var(--ws-font-h); letter-spacing: -.03em; text-transform: none; }
.ws-skin-horizon .wb .form-panel__head span { color: var(--hz-muted); font-size: .92rem; }
.ws-skin-horizon .wb .form-panel .field > label, .ws-skin-horizon .wb .form-panel .field__label { color: var(--hz-ink); font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ws-skin-horizon .wb .field__optional { color: var(--hz-muted); font-weight: 500; letter-spacing: 0; }
.ws-skin-horizon .wb .form-panel .field :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea),
.ws-skin-horizon .wb .signup__form :is(input[type="text"], input[type="email"]), .ws-skin-horizon .wb :is(.give__other input, .give .field input[type="number"]) {
  padding: .9rem 1rem; border: 1.5px solid var(--hz-border); border-radius: 14px; background: #fff; color: var(--hz-ink); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.ws-skin-horizon .wb .form-panel .field :is(input, select, textarea):hover, .ws-skin-horizon .wb .signup__form input:hover { border-color: #5f6e8a; }
.ws-skin-horizon .wb .form-panel .field :is(input, select, textarea):focus, .ws-skin-horizon .wb .signup__form :is(input[type="text"], input[type="email"]):focus {
  outline: none; border-color: var(--hz-sky); box-shadow: 0 0 0 4px rgba(14, 91, 216, .2);
}
.ws-skin-horizon .wb .form-panel .field .is-invalid, .ws-skin-horizon .wb .signup__form .is-invalid { border-color: #c2261b; background: #fff7f5; }
.ws-skin-horizon .wb .form-panel .field__error { color: #b42318; }
.ws-skin-horizon .wb .choice { border: 1.5px solid var(--hz-line-2); border-radius: 14px; }
.ws-skin-horizon .wb .choice:has(input:checked) { border-color: var(--hz-sky); background: #f2f7ff; }
.ws-skin-horizon .wb :is(.choice, .consent, .filters__check) input { accent-color: var(--hz-sky); }
.ws-skin-horizon .wb .form-alert { border: 0; border-radius: 16px; background: #fff4f2; box-shadow: inset 0 0 0 1.5px rgba(194, 38, 27, .35); }
.ws-skin-horizon .wb .form-alert__title { color: #b42318; text-transform: none; }
.ws-skin-horizon .wb .form-note { color: var(--hz-muted); }
/* The privacy link in a form's note reads as a link (sky, underlined), not as more of the sentence. */
.ws-skin-horizon .wb :is(.form-note, .signup__note) a { color: var(--hz-sky); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ws-skin-horizon .wb :is(.form-note, .signup__note) a:hover { color: var(--hz-sky-700); }
/* Under a left-aligned heading and intro, the form panel starts on the same left edge as the words above it. */
.ws-skin-horizon .wb .container--narrow:not(.text-center):not(.u-center) > .form-panel { max-width: 100%; margin-left: 0; margin-right: 0; }
.ws-skin-horizon .wb .form-success { border-radius: 0; background: radial-gradient(70% 90% at 100% 0%, rgba(14, 91, 216, .5), transparent 60%), var(--hz-navy); }
.ws-skin-horizon .wb .form-success .form-success__title { color: #fff; letter-spacing: -.03em; }
.ws-skin-horizon .wb .form-panel .btn--lg { width: 100%; margin-top: .4rem; }

/* Newsletter sign-up: a floating card with a sunrise corner. */
.ws-skin-horizon .wb .signup { position: relative; overflow: hidden; padding: clamp(1.8rem, 4.5vw, 3rem); border-radius: var(--hz-r-panel); background: #fff; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow-float); isolation: isolate; }
.ws-skin-horizon .wb .signup::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -45%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 154, 124, .35), rgba(122, 167, 242, .18) 45%, transparent 70%); }
.ws-skin-horizon .wb .signup__title { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.04em; }
.ws-skin-horizon .wb .signup__text p { color: var(--hz-ink-2); }
.ws-skin-horizon .wb .signup__form .btn { padding-block: .9rem; }
.ws-skin-horizon .wb .signup__note { color: var(--hz-muted); }
.ws-skin-horizon .wb .signup .form-success { border-radius: 18px; }

/* Giving */
.ws-skin-horizon .wb .give__toggle span, .ws-skin-horizon .wb .give__amount span { border: 1.5px solid var(--hz-line-2); border-radius: 14px; }
.ws-skin-horizon .wb .give__toggle input:checked + span { border-color: var(--hz-sky); background: #f2f7ff; color: var(--hz-sky-700); }
.ws-skin-horizon .wb .give__amount input:checked + span { border-color: var(--hz-sky); background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb :is(.give__toggle, .give__amount) input:focus-visible + span { outline: 3px solid var(--hz-sky); outline-offset: 2px; }
.ws-skin-horizon .wb .campaign { border: 0; border-radius: var(--hz-r-panel); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .campaign--plain { box-shadow: none; }
.ws-skin-horizon .wb .campaign__figures strong { font-family: var(--ws-font-h); font-weight: 800; letter-spacing: -.04em; }
.ws-skin-horizon .wb .campaign__bar { height: .85rem; background: #e4edfb; }
.ws-skin-horizon .wb .campaign__fill { border-radius: 999px; background: linear-gradient(90deg, var(--hz-sky), #5b8ff0 60%, var(--hz-coral)); }
.ws-skin-horizon .wb .alt-give { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon .wb .alt-give__lead { color: var(--hz-ink-2); letter-spacing: .06em; }

/* ── Events, calendar & countdowns (docs/CALENDAR.md) ───────────────────── */
/* Tokens: the light set wherever this skin is light (the hero, page headers and the mist band too), the night set on dark. */
.ws-skin-horizon .wb :is(.calendar, .evc, .evc-chip, .events),
.ws-skin-horizon .wb:is(.section--slate, .hero, .page-hero) :is(.calendar, .evc-chip, .events),
.ws-skin-horizon .wb :is(.section--slate, .box--on-light, .el--on-light) :is(.calendar, .evc-chip, .events) {
  --cal-surface: #fff; --cal-surface-2: #f4f8ff; --cal-ink: #0b1b33; --cal-ink-2: #34425a; --cal-muted: #56647e;
  --cal-line: rgba(11, 27, 51, .085); --cal-accent: #0e5bd8; --cal-on-accent: #fff; --cal-accent-ink: #0e5bd8;
  --cal-radius: 24px; --cal-chip-radius: 999px; --cal-font-h: var(--ws-font-h);
  --cal-shadow: 0 0 0 1px rgba(11, 27, 51, .04), 0 2px 6px rgba(11, 27, 51, .05), 0 30px 60px -34px rgba(14, 91, 216, .35);
  --cal-blue: #0e5bd8; --cal-purple: #7c3aed; --cal-pink: #db2777; --cal-amber: #c2620a; --cal-green: #15803d; --cal-teal: #0f766e; --cal-gray: #56647e;
  /* "Happening now" and "Starts in …" chips: 5.4:1 and 5.7:1 on their own tints over white, 5.1:1 and 5.4:1 over mist. */
  --cal-live: #b42318; --cal-soon: #92400e;
}
.ws-skin-horizon .wb.section--dark :is(.calendar, .evc-chip, .events), .ws-skin-horizon .wb.hero--slides :is(.calendar, .evc-chip, .events),
.ws-skin-horizon .wb :is(.section--dark, .box--on-dark, .el--on-dark) :is(.calendar, .evc-chip, .events), .ws-skin-horizon .wb :is(.event--featured, .evc--dark) .evc-chip {
  --cal-surface: rgba(255, 255, 255, .05); --cal-surface-2: rgba(255, 255, 255, .08); --cal-ink: #fff; --cal-ink-2: rgba(255, 255, 255, .84); --cal-muted: rgba(255, 255, 255, .68);
  --cal-line: rgba(255, 255, 255, .15); --cal-accent: var(--hz-coral-on-dark); --cal-on-accent: var(--hz-ink); --cal-accent-ink: var(--hz-coral-on-dark); --cal-shadow: none;
  --cal-blue: #8ab4ff; --cal-purple: #c4a8ff; --cal-pink: #f9a8d4; --cal-amber: #fcd34d; --cal-green: #86efac; --cal-teal: #5eead4; --cal-gray: #cbd5e1;
  --cal-live: #ffb4a3; --cal-soon: #fcd34d;
}
/* The calendar's head: a big month in Manrope, pill controls floating on white. */
.ws-skin-horizon .wb .calendar__bar { margin-bottom: 1.3rem; }
.ws-skin-horizon .wb .calendar__kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; color: var(--cal-accent-ink); font: 700 .74rem/1.3 var(--ws-font-b); letter-spacing: .12em; }
.ws-skin-horizon .wb .calendar__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hz-coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .18); }
.ws-skin-horizon .wb .calendar__title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.045em; }
.ws-skin-horizon .wb .calendar__year { color: var(--cal-muted); font-weight: 600; }
.ws-skin-horizon .wb .calendar__pager { padding: 3px; border: 0; background: var(--cal-surface); box-shadow: 0 0 0 1px var(--cal-line), 0 10px 24px -16px rgba(11, 27, 51, .45); }
.ws-skin-horizon .wb .calendar__nav { width: 42px; height: 42px; border-radius: 50%; }
.ws-skin-horizon .wb a.calendar__nav:hover, .ws-skin-horizon .wb .calendar__today:hover { background: var(--cal-surface-2); color: var(--cal-accent-ink); }
.ws-skin-horizon .wb .calendar__today { border: 0; border-radius: 999px; font-size: .9rem; }
.ws-skin-horizon .wb .calendar__views { padding: 3px; border: 0; background: color-mix(in srgb, var(--cal-ink) 6%, transparent); }
.ws-skin-horizon .wb .calendar__view { height: 38px; padding: 0 1rem; font-weight: 700; }
.ws-skin-horizon .wb .calendar__view.is-active { background: #fff; color: var(--hz-ink); box-shadow: 0 1px 2px rgba(11, 27, 51, .1), 0 6px 14px -8px rgba(11, 27, 51, .35); }
.ws-skin-horizon .wb .calendar__filter { border-width: 1.5px; font-weight: 700; }
.ws-skin-horizon .wb .calendar__filter.is-active:not([data-tone]) { border-color: var(--cal-accent); background: var(--cal-accent); color: var(--cal-on-accent); }
/* The grid: a floating panel; weekday row in mist; today in a glowing sky disc; events as pills. */
.ws-skin-horizon .wb .calendar__grid { border: 0; box-shadow: var(--cal-shadow); }
.ws-skin-horizon .wb.section--dark .calendar__grid, .ws-skin-horizon .wb :is(.section--dark, .box--on-dark) .calendar__grid { box-shadow: inset 0 0 0 1px var(--cal-line); }
.ws-skin-horizon .wb .calendar__dow { padding: 1rem .9rem .85rem; letter-spacing: .13em; }
.ws-skin-horizon .wb .calendar__day { height: 128px; padding: .55rem .55rem .6rem; }
.ws-skin-horizon .wb .calendar__num { font-family: var(--ws-font-h); font-weight: 700; }
.ws-skin-horizon .wb .calendar__day.is-today { background: linear-gradient(180deg, color-mix(in srgb, var(--cal-accent) 7%, transparent), transparent 70%); }
.ws-skin-horizon .wb .calendar__day.is-today .calendar__num { background: linear-gradient(160deg, #3a78ea, var(--cal-accent)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cal-accent) 85%, transparent), 0 0 0 4px color-mix(in srgb, var(--cal-accent) 14%, transparent); }
.ws-skin-horizon .wb .calendar__event { padding: .32rem .6rem .32rem .65rem; box-shadow: none; }
.ws-skin-horizon .wb .calendar__event::before { content: ""; flex: none; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--cal-tone); }
.ws-skin-horizon .wb .calendar__event:is(.is-span-mid, .is-span-end)::before { display: none; }
.ws-skin-horizon .wb .calendar__event.is-span-start { box-shadow: none; }
/* Narrower grids (laptops, tablets, a box under 1000px): the dot and the extra padding go so the event name keeps its room;
   below 1100px blocks.css stacks each chip's time above its name, and a two-line chip is a rounded card rather than a pill. */
@media (max-width: 1320px) {
  .ws-skin-horizon .wb .calendar__day { padding: .5rem .4rem .55rem; }
  .ws-skin-horizon .wb .calendar__event { padding: .3rem .5rem; }
  .ws-skin-horizon .wb .calendar__event::before { display: none; }
}
@media (max-width: 1099px) {
  .ws-skin-horizon .wb .calendar { --hz-chip-r: 12px; }
  .ws-skin-horizon .wb .calendar__event:not(.is-span-start, .is-span-mid, .is-span-end, .is-multi, .is-allday) { border-radius: 12px; }
}
@container (min-width: 700px) and (max-width: 999px) {
  .ws-skin-horizon .wb .calendar { --hz-chip-r: 12px; }
  .ws-skin-horizon .wb .calendar__event::before { display: none; }
  .ws-skin-horizon .wb .calendar__event:not(.is-span-start, .is-span-mid, .is-span-end, .is-multi, .is-allday) { border-radius: 12px; }
}
/* Agenda */
.ws-skin-horizon .wb .calendar__agenda { border: 0; }
.ws-skin-horizon .wb .calendar__agenda-num { font-weight: 800; letter-spacing: -.04em; }
.ws-skin-horizon .wb .calendar__agenda-day.is-today .calendar__agenda-num { background: linear-gradient(160deg, #3a78ea, var(--cal-accent)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cal-accent) 85%, transparent); }
.ws-skin-horizon .wb .calendar__item { border-radius: 16px; box-shadow: inset 3px 0 0 var(--cal-tone); }
.ws-skin-horizon .wb .calendar__item-title { font-family: var(--ws-font-h); font-weight: 800; letter-spacing: -.02em; }
.ws-skin-horizon .wb .calendar__empty { border-radius: 20px; border-color: rgba(14, 91, 216, .25); background: rgba(255, 255, 255, .6); }
.ws-skin-horizon .wb .calendar__subscribe svg { color: var(--cal-accent-ink); }
/* Popover */
.ws-skin-horizon .wb .calendar__pop { --cal-radius: 26px; --cal-accent-ink: var(--hz-sky); --wb-kicker: var(--hz-sky); --wb-ring: var(--hz-sky); border: 0; box-shadow: 0 40px 90px -30px rgba(11, 27, 51, .55), 0 0 0 1px rgba(11, 27, 51, .06); }
.ws-skin-horizon .wb .calendar__pop::backdrop { background: rgba(11, 27, 51, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ws-skin-horizon .wb .calendar__pop-media { background: radial-gradient(38% 60% at 50% 110%, rgba(255, 245, 235, .9), transparent 70%), radial-gradient(90% 70% at 50% 120%, rgba(255, 138, 110, .85), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--cal-tone) 70%, #0b1b33) 0%, color-mix(in srgb, var(--cal-tone) 45%, #8db5f7) 70%); }
.ws-skin-horizon .wb .calendar__pop-media::after { background: linear-gradient(180deg, transparent 0 78%, rgba(255, 255, 255, .45) 78.4%, transparent 79.4%); }
.ws-skin-horizon .wb .calendar__pop-title { font-weight: 800; letter-spacing: -.035em; }

/* The next-event countdown: a floating card with its digits on mist tiles and a sunrise glow. */
.ws-skin-horizon .wb .evc { --cal-radius: 28px; border: 0; }
@media (min-width: 521px) { .ws-skin-horizon .wb .evc:not(.evc--banner):not(.evc--large) { --evc-unit-w: 5.1rem; } }
.ws-skin-horizon .wb .evc--light {
  --evc-tile: #f2f7ff; --evc-line: rgba(14, 91, 216, .1); --evc-label: var(--hz-sky); --evc-fg-2: var(--hz-ink-2); --evc-glow: rgba(255, 154, 124, .42);
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .05), var(--hz-shadow-float);
}
.ws-skin-horizon .wb .evc--light::before { right: -8%; bottom: -80%; }
.ws-skin-horizon .wb .evc--dark {
  --evc-bg: var(--hz-navy); --evc-label: var(--hz-coral-on-dark); --evc-glow: rgba(14, 91, 216, .75); --evc-line: rgba(255, 255, 255, .12);
  background-image: radial-gradient(60% 120% at 0% 100%, rgba(255, 110, 120, .16), transparent 62%);
}
/* "Accent" is a sunrise: coral into peach with ink words (6:1 and more). */
.ws-skin-horizon .wb .evc--accent {
  --evc-bg: linear-gradient(115deg, #ff6b4a 0%, #ff8a6e 42%, #ffb49b 100%); --evc-fg: var(--hz-ink); --evc-fg-2: #1f2b44; --evc-line: rgba(255, 255, 255, .55); --evc-tile: rgba(255, 255, 255, .45);
  --evc-label: var(--hz-ink); --evc-glow: rgba(255, 244, 236, .9); --cal-live: var(--hz-ink); --cal-soon: var(--hz-ink); --cal-accent-ink: var(--hz-ink);
  box-shadow: 0 30px 60px -32px rgba(255, 107, 74, .85);
}
.ws-skin-horizon .wb .evc.evc--accent { --wb-fg: var(--hz-ink); --wb-fg-inv: #fff; --wb-fg-2: #1f2b44; --wb-ring: var(--hz-ink); --wb-kicker: var(--hz-ink); }
.ws-skin-horizon .wb .evc--accent .evc__pulse { background: var(--hz-ink); }
.ws-skin-horizon .wb .evc--glass { --evc-label: var(--hz-sky); --evc-tile: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), var(--hz-shadow-float); }
/* Glass on the night band (or a dark box, a photo hero): frosted navy, a light-sky label (8.9:1) and faint tiles so the
   white digits and unit labels keep 12:1 and more. On the sky panel the label turns white. */
.ws-skin-horizon .wb:is(.section--dark, .section--red, .hero--slides) .evc--glass,
.ws-skin-horizon .wb :is(.section--dark, .section--red, .box--on-dark, .el--on-dark, .box--bg-dark, .box--bg-red, .box--bg-slate) .evc--glass {
  --evc-label: #9cc3ff; --evc-tile: rgba(255, 255, 255, .08); --evc-line: rgba(255, 255, 255, .16); --evc-glow: rgba(58, 120, 234, .45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -34px rgba(0, 0, 0, .55);
}
.ws-skin-horizon .wb.section--red .evc--glass, .ws-skin-horizon .wb :is(.section--red, .box--bg-red) .evc--glass { --evc-label: #fff; --evc-tile: rgba(255, 255, 255, .12); --evc-glow: rgba(255, 138, 110, .45); }
.ws-skin-horizon .wb .evc__label { font-weight: 700; letter-spacing: .13em; }
.ws-skin-horizon .wb .evc__title { font-weight: 800; letter-spacing: -.045em; }
.ws-skin-horizon .wb .evc__unit { border-radius: 18px; }
.ws-skin-horizon .wb .evc__num { font-weight: 800; letter-spacing: -.05em; }
.ws-skin-horizon .wb .evc__unit-label { letter-spacing: .13em; }
.ws-skin-horizon .wb .evc__live { border-radius: 999px; text-transform: none; letter-spacing: -.01em; }
/* The calendar's "Next up" banner: a night strip with a sunrise glow above the white grid. */
.ws-skin-horizon .wb .evc--banner { --cal-radius: 24px; box-shadow: 0 24px 50px -30px rgba(11, 27, 51, .7); }
.ws-skin-horizon .wb .evc--banner.evc--dark { background-image: radial-gradient(40% 160% at 30% 120%, rgba(255, 110, 120, .22), transparent 62%), radial-gradient(50% 180% at 100% 0%, rgba(58, 120, 234, .55), transparent 60%); }
/* The home countdown floats over the hero: on phones it sits in the page with the same card. */
.ws-skin-horizon #main > .wb.hero + .wb.section .evc--light { box-shadow: 0 0 0 1px rgba(11, 27, 51, .05), 0 40px 80px -40px rgba(11, 27, 51, .45), 0 12px 30px -18px rgba(14, 91, 216, .4); }

/* Countdown chips */
.ws-skin-horizon .wb .evc-chip { padding: .36rem .8rem .36rem .65rem; }
/* Upcoming events: floating cards in rows of three; the date in a sky pill; buttons in soft sky. */
@media (min-width: 900px) { .ws-skin-horizon .wb .events:not(.events--list) { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } }
.ws-skin-horizon .wb .event { padding: 1.9rem 1.8rem; background: #fff; color: var(--hz-ink); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow) !important; border-radius: var(--hz-r-card); border: 0; transition: transform .3s var(--hz-ease), box-shadow .3s var(--hz-ease); }
.ws-skin-horizon .wb .event:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(14, 91, 216, .14), var(--hz-shadow-hover) !important; }
.ws-skin-horizon .wb .event h3 { font-size: clamp(1.35rem, 2.3vw, 1.65rem); letter-spacing: -.035em; }
.ws-skin-horizon .wb .event h3 a:hover { color: var(--hz-sky); }
.ws-skin-horizon .wb .event:not(.event--row) .event__date { display: inline-flex; padding: .4rem .85rem; border-radius: 999px; background: #eaf2ff; color: var(--hz-sky); font-weight: 700; letter-spacing: .06em; }
.ws-skin-horizon .wb .event__countdown { margin: 0 0 .9rem; }
.ws-skin-horizon .wb .event__badge { border-radius: 999px; }
.ws-skin-horizon .wb .event__text { color: var(--hz-ink-2); }
.ws-skin-horizon .wb .event__place { color: var(--hz-muted); }
.ws-skin-horizon .wb .event:not(.event--row) > .btn, .ws-skin-horizon .wb .event__content > .btn { margin-top: auto; }
.ws-skin-horizon .wb .event:not(.event--featured) .btn--dark { background: #eaf2ff; color: var(--hz-sky-700); box-shadow: none; }
.ws-skin-horizon .wb .event:not(.event--featured) .btn--dark:hover { background: var(--hz-sky); color: #fff; }
.ws-skin-horizon .wb .event--featured { padding: 0; background: linear-gradient(150deg, #173a73, #0b1b33); color: #fff; overflow: hidden; }
.ws-skin-horizon .wb .event--featured .event__date { background: rgba(255, 255, 255, .12); color: #fff; }
.ws-skin-horizon .wb .event--featured h3 a:hover { color: var(--hz-coral-on-dark); }
.ws-skin-horizon .wb .event--row { padding: 1.1rem 1.3rem; }
.ws-skin-horizon .wb .event__datebox { border-radius: 18px; background: linear-gradient(160deg, #1966e4, #0a45a8); box-shadow: 0 10px 20px -12px rgba(14, 91, 216, .8); }
.ws-skin-horizon .wb .event__datebox :is(.event__dow, .event__mon) { color: rgba(255, 255, 255, .85); }
.ws-skin-horizon .wb .event__datebox .event__day { color: #fff; font-weight: 800; letter-spacing: -.04em; }
.ws-skin-horizon .wb .events__empty { border-radius: var(--hz-r-card); }

/* ── Classic sections and other features' pages (events, giving, sermons, prayer…) ── */
.ws-skin-horizon .ws-eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .9rem .42rem .75rem; border-radius: 999px; background: #eaf2ff; color: var(--hz-sky); font: 700 .74rem/1.3 var(--ws-font-b); letter-spacing: .11em; }
.ws-skin-horizon .ws-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hz-coral); }
.ws-skin-horizon .ws-tone-dark .ws-eyebrow, .ws-skin-horizon .ws-tone-brand .ws-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; opacity: 1; }
.ws-skin-horizon .ws-h2 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.04em; }
.ws-skin-horizon .ws-lead { color: var(--hz-ink-2); }
.ws-skin-horizon .ws-tone-soft { background: linear-gradient(180deg, #edf4ff, #f5f9ff); }
.ws-skin-horizon .ws-tone-dark { background-color: var(--hz-navy); background-image: radial-gradient(70% 90% at 100% 0%, rgba(14, 91, 216, .5), transparent 60%); }
.ws-skin-horizon .ws-tone-brand { background: linear-gradient(135deg, #0e5bd8, #0a45a8); }
.ws-skin-horizon :is(.ws-tone-soft, .ws-tone-dark, .ws-tone-brand).ws-sec { margin-inline: var(--hz-inset); border-radius: var(--hz-r-band); }
.ws-skin-horizon .ws-card, .ws-skin-horizon .ws-service, .ws-skin-horizon .ws-quote { border-radius: var(--hz-r-card); border-color: var(--hz-line); box-shadow: var(--hz-shadow); }
.ws-skin-horizon .ws-form-card { border: 0; border-radius: var(--hz-r-panel); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow-float); }
.ws-skin-horizon .ws-input, .ws.ws-skin-horizon .input { border: 1.5px solid var(--hz-border); border-radius: 14px; box-shadow: none; }
.ws-skin-horizon .ws-input:focus, .ws.ws-skin-horizon .input:focus { border-color: var(--hz-sky); box-shadow: 0 0 0 4px rgba(14, 91, 216, .2); }
.ws-skin-horizon .ws-field label, .ws.ws-skin-horizon .field > label { color: var(--hz-ink); font-weight: 600; }
.ws-skin-horizon .ws-service-day { color: var(--hz-sky); }
.ws-skin-horizon .ws-map { border: 0; border-radius: var(--hz-r-panel); box-shadow: var(--hz-shadow-float); }
.ws-skin-horizon .ws-details-icon { border-radius: 14px; background: #eaf2ff; color: var(--hz-sky); }
.ws-skin-horizon .ws-faq-item summary { font-family: var(--ws-font-h); font-weight: 700; letter-spacing: -.015em; }
.ws.ws-skin-horizon .ws-btn { font-weight: 700; }
.ws.ws-skin-horizon .ws-btn-primary, .ws.ws-skin-horizon .btn-primary { background: linear-gradient(180deg, #1966e4, #0e5bd8); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -10px rgba(14, 91, 216, .7); }
.ws.ws-skin-horizon .ws-btn-primary:hover, .ws.ws-skin-horizon .btn-primary:hover { background: linear-gradient(180deg, #0e5bd8, #0b4fc0); }
.ws.ws-skin-horizon .ws-btn-secondary { border-color: var(--hz-line-2); color: var(--hz-ink); box-shadow: 0 8px 18px -14px rgba(11, 27, 51, .4); }
.ws.ws-skin-horizon .ws-btn-secondary:hover { border-color: var(--hz-sky); color: var(--hz-sky-700); background: #fff; }
.ws.ws-skin-horizon .btn { border-radius: 999px; font-weight: 700; }
.ws.ws-skin-horizon .card { border-radius: var(--hz-r-card); border-color: var(--hz-line); box-shadow: var(--hz-shadow); }
.ws.ws-skin-horizon .alert { border-radius: 16px; }
/* The automatic header of feature pages: the Horizon page header without the photo. */
.ws-skin-horizon .ws-pagehead { position: relative; overflow: hidden; margin-top: calc(-1 * var(--hz-head)); padding: calc(var(--hz-head) + clamp(3rem, 6vw, 4.5rem)) 0 clamp(3rem, 6vw, 4.5rem); border: 0; background: var(--hz-mesh); color: var(--hz-ink); isolation: isolate; }
.ws-skin-horizon .ws-pagehead::after { content: ""; position: absolute; z-index: -1; left: -15%; right: -15%; top: 80%; height: 120%; border-radius: 50%; border-top: 1px solid rgba(14, 91, 216, .14); }
.ws-skin-horizon .ws-pagehead .ws-wrap { max-width: calc(1200px + 2 * var(--wb-gutter)); padding-inline: var(--wb-gutter); }
.ws-skin-horizon .ws-pagehead h1 { max-width: 18ch; margin: 1rem 0 0; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -.045em; }
.ws.ws-skin-horizon .ws-pagehead .ws-crumbs, .ws.ws-skin-horizon .ws-pagehead .ws-crumbs a { color: var(--hz-muted); font-size: .9rem; font-weight: 600; }
.ws.ws-skin-horizon .ws-pagehead .ws-crumbs a:hover { color: var(--hz-sky); }
.ws-skin-horizon .ws-pagehead-lead { color: var(--hz-ink-2); }
/* Other features' own pages (events, sermons, giving, prayer…): the sunrise mesh rises behind the floating header and title. */
.ws-skin-horizon.ws-module #main { margin-top: calc(-1 * var(--hz-head)); padding-top: var(--hz-head); background-image: var(--hz-mesh); background-size: 100% min(560px, 70vh); background-repeat: no-repeat; }
.ws-skin-horizon .ws-module-page h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); letter-spacing: -.045em; }
.ws-skin-horizon .ws-module-page h2 { letter-spacing: -.03em; }
.ws-skin-horizon :is(.ws-module-page, .ws-ext) .evp-card { border: 0; border-radius: var(--hz-r-card); box-shadow: 0 0 0 1px var(--hz-line), var(--hz-shadow); }
.ws-skin-horizon :is(.ws-module-page, .ws-ext) .evp-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(14, 91, 216, .14), var(--hz-shadow-hover); }
.ws-skin-horizon :is(.ws-module-page, .ws-ext) .evp-card-img { background: radial-gradient(40% 50% at 70% 100%, rgba(255, 214, 190, .9), transparent 70%), linear-gradient(170deg, #1f5fd6 0%, #5d93ee 55%, #ffc9b5 100%); }
.ws-skin-horizon :is(.ws-module-page, .ws-ext) .ev-datebox { border-radius: 12px; }
.ws-skin-horizon .ws-ext .mx-thumb { border-radius: var(--hz-r-card); }

/* ── Footer: a rounded night panel with a sunrise on its horizon ───────── */
.ws-skin-horizon .ws-footer {
  --ws-footer-bg: var(--hz-navy); position: relative; overflow: hidden; margin: var(--hz-inset); margin-top: clamp(1rem, 3vw, 2rem); padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.8rem;
  border-radius: var(--hz-r-band); background-color: var(--hz-navy); color: rgba(255, 255, 255, .8); font-size: .98rem; isolation: isolate;
  background-image: radial-gradient(80% 55% at 50% 0%, rgba(14, 91, 216, .5), transparent 62%), radial-gradient(40% 32% at 50% 0%, rgba(255, 107, 74, .32), transparent 70%);
}
.ws-skin-horizon .ws-footer::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: clamp(1.4rem, 2.6vw, 2rem); height: 440px; border-radius: 50%; border-top: 1px solid rgba(255, 170, 150, .5); box-shadow: 0 -24px 48px -24px rgba(255, 138, 110, .45); pointer-events: none; }
.ws-skin-horizon .ws-footer { --wb-ring: var(--hz-coral-on-dark); }
.ws-skin-horizon .ws-footer > .ws-wrap { max-width: calc(1200px + 2 * var(--wb-gutter)); padding-inline: var(--wb-gutter); }
.ws.ws-skin-horizon .ws-brand-foot { color: #fff !important; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.04em; }
.ws-skin-horizon .ws-brand-foot:not(:has(.ws-logo))::before { width: 42px; height: 42px; border-radius: 14px; }
.ws-skin-horizon .ws-foot-brand p { color: rgba(255, 255, 255, .78); }
.ws-skin-horizon .ws-foot-title { color: var(--hz-coral-on-dark); font: 700 .76rem/1.3 var(--ws-font-b); letter-spacing: .14em; }
.ws.ws-skin-horizon .ws-footer a:hover, .ws.ws-skin-horizon .ws-foot-links a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--hz-coral-on-dark); text-underline-offset: 4px; }
.ws-skin-horizon .ws-foot-times strong { font-weight: 700; }
.ws-skin-horizon .ws-social { width: 44px; height: 44px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); transition: background-color .2s, transform .25s var(--hz-ease); }
.ws.ws-skin-horizon .ws-social:hover { background: var(--hz-sky); border-color: var(--hz-sky); transform: translateY(-2px); }
.ws-skin-horizon .ws-foot-bottom { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.ws.ws-skin-horizon .ws-foot-bottom a { color: rgba(255, 255, 255, .82); }
.ws-skin-horizon .ws-lang-cur { color: #fff; }

/* ── Phones & tablets ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ws-skin-horizon { --ws-header-h: 64px; }
  .ws-skin-horizon .ws-header-inner { padding: 0 8px 0 16px; border-radius: 20px; }
  .ws-skin-horizon .ws-burger { min-height: 46px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--hz-mist); color: var(--hz-ink); box-shadow: none; font-weight: 700; }
  .ws-skin-horizon .ws-burger-lines, .ws-skin-horizon .ws-burger-lines::before, .ws-skin-horizon .ws-burger-lines::after { width: 18px; height: 2px; border-radius: 2px; }
  .ws-skin-horizon .ws-nav-toggle:focus-visible ~ .ws-burger { outline: 3px solid var(--hz-sky); outline-offset: 2px; box-shadow: none; }
  .ws-skin-horizon .ws-nav {
    top: calc(100% + 10px); height: auto; max-height: calc(100dvh - var(--ws-header-h) - 40px); padding: 10px 18px 20px; border: 0; border-radius: 24px;
    background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 51, .06), var(--hz-shadow-float);
  }
  .ws.ws-skin-horizon .ws-menu a { padding: 14px 6px; border-bottom: 1px solid var(--hz-line); border-radius: 0; color: var(--hz-ink); font: 700 1.15rem/1.3 var(--ws-font-h); letter-spacing: -.02em; }
  .ws.ws-skin-horizon .ws-menu > li > a:hover { background: transparent; color: var(--hz-sky); }
  .ws.ws-skin-horizon .ws-menu a[aria-current="page"] { color: var(--hz-sky); }
  .ws.ws-skin-horizon .ws-sub { padding: 0 0 4px 14px; border-radius: 0; background: transparent; box-shadow: none; }
  .ws.ws-skin-horizon .ws-sub a { padding: 11px 6px; color: var(--hz-ink-2); font: 600 1rem/1.3 var(--ws-font-b); letter-spacing: 0; }
  .ws.ws-skin-horizon .ws-sub a:hover, .ws.ws-skin-horizon .ws-sub a[aria-current="page"] { background: transparent; color: var(--hz-sky); }
  .ws.ws-skin-horizon .ws-header-cta { padding-top: 18px; gap: 10px; }
  .ws.ws-skin-horizon .ws-header-cta .ws-btn { min-height: 52px; font-size: 1rem; }
}
@media (min-width: 1101px) {
  html.ws-nav-compact .ws-skin-horizon .ws-header-inner { position: relative; }
  html.ws-nav-compact .ws-skin-horizon .ws-burger { min-height: 46px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--hz-mist); color: var(--hz-ink); box-shadow: none; font-weight: 700; }
  html.ws-nav-compact .ws-skin-horizon .ws-burger-lines, html.ws-nav-compact .ws-skin-horizon .ws-burger-lines::before, html.ws-nav-compact .ws-skin-horizon .ws-burger-lines::after { width: 18px; height: 2px; border-radius: 2px; }
  html.ws-nav-compact .ws-skin-horizon .ws-nav {
    top: calc(100% + 10px); left: auto; right: 0; width: min(420px, 100%); height: auto; max-height: calc(100dvh - var(--ws-header-h) - 40px); padding: 10px 18px 20px; border: 0; border-radius: 24px;
    background: #fff; box-shadow: 0 0 0 1px rgba(11, 27, 51, .06), var(--hz-shadow-float);
  }
  html.ws-nav-compact .ws.ws-skin-horizon .ws-menu a { padding: 14px 6px; border-bottom: 1px solid var(--hz-line); border-radius: 0; color: var(--hz-ink); font: 700 1.15rem/1.3 var(--ws-font-h); letter-spacing: -.02em; }
  html.ws-nav-compact .ws.ws-skin-horizon .ws-menu > li > a[aria-current="page"]::after { display: none; }
  html.ws-nav-compact .ws.ws-skin-horizon .ws-sub { padding: 0 0 4px 14px; border-radius: 0; background: transparent; box-shadow: none; }
  html.ws-nav-compact .ws.ws-skin-horizon .ws-sub a { padding: 11px 6px; color: var(--hz-ink-2); font: 600 1rem/1.3 var(--ws-font-b); }
  html.ws-nav-compact .ws.ws-skin-horizon .ws-header-cta { padding-top: 18px; gap: 10px; }
}
@media (max-width: 980px) {
  .ws-skin-horizon .wb.hero:not(.hero--slides) { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding-bottom: clamp(4.5rem, 12vw, 6rem); }
  .ws-skin-horizon .wb.hero:not(.hero--slides) .hero__content { grid-row: 1; max-width: 680px; }
  .ws-skin-horizon .wb.hero:not(.hero--slides) .hero__media { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 11; max-height: none; border-radius: 28px; }
  .ws-skin-horizon .wb.page-hero { grid-template-columns: minmax(0, 1fr); }
  /* On the taller stacked header the horizon arc stays a flat line in the bottom padding, clear of the buttons. */
  .ws-skin-horizon .wb.page-hero::after { left: -60%; right: -60%; top: calc(100% - 2.1rem); height: 200%; }
  .ws-skin-horizon .wb.page-hero > .wb-ph { display: none; }
  .ws-skin-horizon .wb.page-hero > :is(img, .wb-ph) { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 9; transform: none; }
}
@media (max-width: 640px) {
  .ws-skin-horizon { --hz-inset: .5rem; --wb-gutter: 1.15rem; --wb-section-pad: clamp(3.2rem, 12vw, 4.2rem); font-size: 16px; }
  .ws-skin-horizon { --hz-head-gap: 8px; }
  .ws-skin-horizon .ws-header { padding-top: 8px; }
  .ws-skin-horizon .ws-brand { font-size: 17px; }
  .ws-skin-horizon .ws-header .ws-brand:not(:has(.ws-logo))::before { width: 32px; height: 32px; border-radius: 10px; }
  .ws-skin-horizon .ws-brand-name { max-width: 46vw; }
  .ws-skin-horizon #main > .wb:is(.hero:not(.hero--slides), .page-hero):first-child, .ws-skin-horizon .ws-pagehead { padding-top: calc(var(--hz-head) + 2.4rem); }
  .ws-skin-horizon .wb.hero :is(h1, .wb-h1) { font-size: clamp(2.45rem, 11vw, 3.2rem); }
  .ws-skin-horizon .wb.hero .hero__actions .btn { flex: 1 1 100%; }
  .ws-skin-horizon .wb.hero .hero__pillars span { font-size: .86rem; padding: .42rem .85rem .42rem .7rem; }
  .ws-skin-horizon .wb.section h2:where(:not(.wb-ext *)) { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .ws-skin-horizon .wb .btn-row .btn { flex: 1 1 auto; }
  .ws-skin-horizon .wb .note { padding: 4.3rem 1.3rem 1.4rem; }
  .ws-skin-horizon .wb .note::before { left: 1.3rem; top: 1.3rem; }
  .ws-skin-horizon .wb .path p { padding-right: 0; padding-bottom: 3rem; }
  .ws-skin-horizon .wb .form-panel__head { padding: 1.2rem 1.3rem; }
  .ws-skin-horizon .ws-footer { padding-top: 3rem; }
  .ws-skin-horizon .wb .tabs--pills .tabs__list { border-radius: 22px; }
}

/* ── Motion, print & forced colours ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ws-skin-horizon .wb .btn:hover, .ws-skin-horizon .wb :is(.ministry, .path, .channel, .step-tile, .media-card, .box--hover-lift):hover { transform: none; }
}
@media (forced-colors: active) {
  .ws-skin-horizon .wb .hl, .ws-skin-horizon .wb .stat__value, .ws-skin-horizon .wb .story__quote p::before, .ws-skin-horizon .wb .quote-block--large blockquote p::before { -webkit-text-fill-color: currentColor; background: none; }
  .ws-skin-horizon .ws-header-inner, .ws-skin-horizon .wb :is(.service-card, .fact, .value, .schedule__item, .step-card, .story, .event, .form-panel, .signup) { border: 1px solid CanvasText; }
}
@media print {
  .ws-skin-horizon .ws-header { position: static; }
  .ws-skin-horizon .wb.hero, .ws-skin-horizon .wb.page-hero { margin-top: 0; padding-top: 2rem; background: none; }
  .ws-skin-horizon .ws-footer { margin: 0; border-radius: 0; }
}
/* The staff dialog over a template preview keeps the app's own look. */
.ws-skin-horizon .tpl-dialog :is(h1, h2, h3) { font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.ws-skin-horizon .tpl-dialog .btn { border-radius: 10px; font: 500 14px/1 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0; box-shadow: none; }
.ws-skin-horizon .tpl-dialog .btn:not(.btn-primary) { background: #fff; color: #0b1224; }
.ws-skin-horizon .tpl-dialog :focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 6px; }
.ws-skin-horizon .tpl-dialog .tpl-mode input:focus-visible { outline: 0; }