@charset "utf-8";

/*
Theme Name: Fidelis - Church & Ministry HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Tokens & Themes
   1.2 Typography
   1.3 Spacing & Grounds
   1.4 Buttons
   1.5 Section Title
   1.6 Shared Pieces
   1.7 Reveals
2. Preloader
3. Header
   3.1 Topbar
   3.2 Main Bar
   3.3 Actions
   3.4 Glass Bar
   3.5 Search
4. Offcanvas Menu
5. Forms & Select
   5.1 Fields
   5.2 Custom Select
6. Sub Header
7. Sermon Player
8. Cards
   8.1 Event Cards
   8.2 Cause Cards
   8.3 People
   8.4 Ministry Cards
9. Hero Slider
10. Intro Panel
   10.1 Intro With Photo
11. Welcome
12. Plan Your Visit
13. Urgent Causes
14. Events & Sermons
15. Live Broadcast
16. Members Say
17. News
18. Liturgical Year
19. About Tiles
20. Event Band
21. Ticket Plans
22. Mission Panels
23. Testimony Slider
24. Reading Plan
25. Orthodox Sections
   25.1 Video Banner
   25.2 Pascha
   25.3 Gallery Wall
   25.4 Faces
26. Ministry Sections
   26.1 Pillars
   26.2 Ministry Track
   26.3 Counters
   26.4 Ministry Finder
27. Inner Pages
   27.1 Layout & Sidebar
   27.2 Toolbar & Pagination
   27.3 Prose
   27.4 Comments
   27.5 Info Cards & Maps
   27.6 Products
   27.7 Sermon Rows
   27.8 Tables
28. Account Pages
   28.1 Login & Register
   28.2 My Account
   28.3 Tiles Tabs
29. Giving & Membership
   29.1 Giving Form
   29.2 Summary Card
   29.3 Household & Serving
   29.4 Causes Pages
30. Events Pages
   30.1 Event Details
   30.2 Events List & Calendar
   30.3 Conference
   30.4 Schedule Board
31. Community Pages
   31.1 Prayer Wall
   31.2 Locations
   31.3 Contact
   31.4 FAQ
   31.5 History
   31.6 Gallery
   31.7 Ministries
   31.8 Pastor Profile
32. Shop & Library
   32.1 Shop Toolbar
   32.2 Product Details
   32.3 Cart & Checkout
   32.4 Blog
   32.5 Sermon Library
33. Coming Soon & 404
   33.1 Coming Soon
   33.2 404
34. Footer
   34.1 Call Band
   34.2 Widgets
   34.3 Feed & Legal
35. Back To Top
36. Media Cursor
37. Sanctuary Light
*/

/*======================
1. General
========================*/
/*---- 1.1 Tokens & Themes ----*/
/* "Slate & Ember": limestone grounds, candle-ember actions and light, a slate-blue night.
   Every colour on the site is a role token; [data-theme="dark"] redefines them. */
:root {
  --fd-bg: #F7F5F2;
  --fd-bg-rgb: 247, 245, 242;
  --fd-surface: #FFFFFF;
  --fd-band: #EDE9E3;
  --fd-band-rgb: 237, 233, 227;
  --fd-ink: #17202A;
  --fd-text: #535B65;
  --fd-muted: #5F6670;
  --fd-line: #E3DFD8;
  --fd-line-strong: #D3CDC4;
  --fd-primary: #B4502C;
  --fd-primary-rgb: 180, 80, 44;
  --fd-primary-hover: #963E1F;
  --fd-on-primary: #FFFFFF;
  --fd-gold: #D88A55;
  --fd-gold-rgb: 216, 138, 85;
  --fd-gold-text: #A2472A;
  --fd-blush: #F6E6DC;
  --fd-night: #141B24;
  --fd-night-rgb: 20, 27, 36;
  --fd-night-2: #1C2531;
  --fd-on-night: #EFF1F3;
  --fd-text-night: #A8B1BB;
  --fd-line-night: rgba(255, 255, 255, 0.12);
  --fd-success: #2F7D4F;
  --fd-danger: #B3261E;
  --fd-shadow: 0 30px 70px -36px rgba(16, 24, 34, 0.38);
  --fd-shadow-soft: 0 18px 44px -28px rgba(16, 24, 34, 0.3);
  --fd-glass: rgba(247, 245, 242, 0.82);
  /* the two families */
  --fd-ff-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --fd-ff-body: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --fd-fs-h1: clamp(3rem, 1.3rem + 5vw, 6.2rem);
  --fd-fs-h2: clamp(2.2rem, 1.5rem + 2.1vw, 3.6rem);
  --fd-fs-h3: clamp(1.35rem, 1.15rem + 0.5vw, 1.7rem);
  --fd-fs-h4: 1.3rem;
  --fd-fs-h5: 1.12rem;
  --fd-fs-h6: 1rem;
  --fd-radius: 6px;
  --fd-arch: 999px 999px 6px 6px;
  --fd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fd-bg: #0E131A;
  --fd-bg-rgb: 14, 19, 26;
  --fd-surface: #161D26;
  --fd-band: #121820;
  --fd-band-rgb: 18, 24, 32;
  --fd-ink: #EFF1F3;
  --fd-text: #A8B1BB;
  --fd-muted: #7F8893;
  --fd-line: rgba(255, 255, 255, 0.09);
  --fd-line-strong: rgba(255, 255, 255, 0.16);
  --fd-primary: #CF6A40;
  --fd-primary-rgb: 207, 106, 64;
  --fd-primary-hover: #E07D53;
  --fd-gold: #E5A06C;
  --fd-gold-rgb: 229, 160, 108;
  --fd-gold-text: #E5A06C;
  --fd-blush: rgba(207, 106, 64, 0.16);
  --fd-night: #090D12;
  --fd-night-rgb: 9, 13, 18;
  --fd-night-2: #111821;
  --fd-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.8);
  --fd-shadow-soft: 0 18px 44px -28px rgba(0, 0, 0, 0.7);
  --fd-glass: rgba(14, 19, 26, 0.82);
  color-scheme: dark;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--fd-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--fd-text);
  background: var(--fd-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.oc-open,
body.search-open {
  overflow: hidden;
}

/*---- 1.2 Typography ----*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fd-ff-heading);
  font-weight: 500;
  color: var(--fd-ink);
  margin: 0 0 0.45em;
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--fd-fs-h1);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fd-fs-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fd-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--fd-fs-h4);
  line-height: 1.3;
}

h5 {
  font-size: var(--fd-fs-h5);
  line-height: 1.35;
}

h6 {
  font-size: var(--fd-fs-h6);
  line-height: 1.4;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--fd-primary);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--fd-gold);
  color: var(--fd-night);
}

:focus-visible {
  outline: 2px solid var(--fd-gold);
  outline-offset: 3px;
}

.fd-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

/* the accent word: italic serif in antique gold */
.fd-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--fd-gold-text);
}

.fd-night .fd-accent,
.fd-hero .fd-accent {
  color: var(--fd-gold);
}

.fd-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--fd-text);
}

.fd-num {
  font-family: var(--fd-ff-heading);
  font-variant-numeric: lining-nums tabular-nums;
}

/*---- 1.3 Spacing & Grounds ----*/
.sec-pt-120 {
  padding-top: 130px;
}

.sec-pb-120 {
  padding-bottom: 130px;
}

.sec-pt-90 {
  padding-top: 90px;
}

.sec-pb-90 {
  padding-bottom: 90px;
}

.sec-pb-60 {
  padding-bottom: 60px;
}

.container-wide {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 48px;
}

.fd-stone {
  background-color: var(--fd-band);
}
/* a photograph as a texture: the church under the page ground, with an ember glow from one corner and a gold
   glow from the other. Never on two sections in a row. */
.fd-tint {
  position: relative;
  isolation: isolate;
  --fd-tint-rgb: var(--fd-bg-rgb);
}
.fd-tint.fd-stone {
  --fd-tint-rgb: var(--fd-band-rgb);
}
.fd-tint > .fd-tint-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fd-tint-ground img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.08);
}
.fd-tint-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(var(--fd-primary-rgb), 0.26) 0%, rgba(var(--fd-primary-rgb), 0) 70%),
    radial-gradient(60% 80% at 100% 0%, rgba(var(--fd-gold-rgb), 0.26) 0%, rgba(var(--fd-gold-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--fd-tint-rgb), 0.9) 0%, rgba(var(--fd-tint-rgb), 0.84) 50%, rgba(var(--fd-tint-rgb), 0.9) 100%);
}

/* night bands: slate in light mode, near black in dark mode */
.fd-night {
  position: relative;
  background-color: var(--fd-night);
  color: var(--fd-text-night);
}

.fd-night h1, .fd-night h2, .fd-night h3, .fd-night h4, .fd-night h5, .fd-night h6 {
  color: var(--fd-on-night);
}

/* a photograph under the night veil (causes, countdown and testimony bands) */
.fd-photo-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.fd-photo-band > .band-bg {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.fd-photo-band > .band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fd-photo-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--fd-night-rgb), 0.78), rgba(var(--fd-night-rgb), 0.9));
}

/* a faint photograph as the ground of a plain section, fading at its edges */
.fd-tex {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.fd-tex::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.06;
  filter: grayscale(1) sepia(0.4);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
}

.fd-tex.tex-nave::before {
  background-image: url("../img/event/1.jpg");
}

.fd-tex.tex-church::before {
  background-image: url("../img/place/place-lg2.jpg");
}

[data-theme="dark"] .fd-tex::before {
  opacity: 0.09;
  filter: grayscale(1);
}






/*---- 1.4 Buttons ----*/
/* pill buttons in ember; the house double-arrow slide */
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid var(--fd-primary);
  border-radius: 100px;
  background: var(--fd-primary);
  color: var(--fd-on-primary);
  font-family: var(--fd-ff-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 16px 30px -18px rgba(var(--fd-primary-rgb), 0.95);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s var(--fd-ease), box-shadow 0.35s ease;
}

.fd-btn:hover,
.fd-btn:focus-visible {
  background: var(--fd-primary-hover);
  border-color: var(--fd-primary-hover);
  color: var(--fd-on-primary);
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -18px rgba(var(--fd-primary-rgb), 0.95);
}

.btn-ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: -10px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
}

.btn-ic i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.5em 0 0 -0.45em;
  line-height: 1;
  transition: transform 0.45s var(--fd-ease);
}

.btn-ic i + i {
  transform: translateX(-200%);
}

.fd-btn:hover .btn-ic i:first-child,
a:hover > .btn-ic i:first-child {
  transform: translateX(200%);
}

.fd-btn:hover .btn-ic i + i,
a:hover > .btn-ic i + i {
  transform: translateX(0);
}

.fd-btn.is-small {
  min-height: 46px;
  padding: 0 22px;
  font-size: 14px;
}

.fd-btn.is-small .btn-ic {
  width: 22px;
  height: 22px;
  margin-right: -6px;
}

/* the soft "See All" button */
.fd-btn.is-blush {
  background: var(--fd-blush);
  border-color: var(--fd-blush);
  color: var(--fd-primary);
  box-shadow: none;
}

.fd-btn.is-blush:hover {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-primary);
}

.fd-btn.is-gold {
  background: var(--fd-gold);
  border-color: var(--fd-gold);
  color: #141B24;
  box-shadow: 0 16px 30px -18px rgba(var(--fd-gold-rgb), 0.9);
}

.fd-btn.is-gold .btn-ic {
  background: rgba(20, 27, 36, 0.12);
}

.fd-btn.is-gold:hover {
  background: var(--fd-on-night);
  border-color: var(--fd-on-night);
  color: #141B24;
}

.fd-btn.is-outline {
  background: transparent;
  color: var(--fd-ink);
  border-color: var(--fd-line-strong);
  box-shadow: none;
}

.fd-btn.is-outline .btn-ic {
  background: var(--fd-band);
}

.fd-btn.is-outline:hover {
  background: var(--fd-ink);
  border-color: var(--fd-ink);
  color: var(--fd-bg);
}

.fd-btn.is-ghost-light {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fd-on-night);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fd-btn.is-ghost-light:hover {
  background: var(--fd-on-night);
  border-color: var(--fd-on-night);
  color: #141B24;
}

.fd-btn.is-bar {
  display: flex;
  width: 100%;
}

.fd-btn:disabled,
.fd-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* text link with a gold rule that draws on hover */
.fd-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fd-ink);
}

.fd-link i {
  font-size: 12px;
  color: var(--fd-gold-text);
  transition: transform 0.4s var(--fd-ease);
}

.fd-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--fd-gold);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.5s var(--fd-ease);
}

.fd-link:hover {
  color: var(--fd-ink);
}

.fd-link:hover::after {
  transform: scaleX(1);
}

.fd-link:hover i {
  transform: translateX(4px);
}

.fd-night .fd-link {
  color: var(--fd-on-night);
}

/* round slider arrows */
.fd-arrows {
  display: flex;
  gap: 10px;
}

.fd-arrow {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--fd-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--fd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.fd-arrow:hover {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-primary);
}

.fd-night .fd-arrow {
  border-color: var(--fd-line-night);
  color: var(--fd-on-night);
}

.fd-arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/*---- 1.5 Section Title ----*/
/* eyebrow -> h2.title -> lead. The eyebrow: gold caps after a small cross */
.fd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--fd-ff-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.fd-eyebrow::before {
  content: "";
  width: 10px;
  height: 14px;
  flex: 0 0 10px;
  background:
    linear-gradient(var(--fd-gold), var(--fd-gold)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--fd-gold), var(--fd-gold)) 0 4px / 100% 1.5px no-repeat;
}

.fd-night .fd-eyebrow,
.fd-eyebrow.is-light {
  color: var(--fd-gold);
}

.section-title {
  margin-bottom: 60px;
}

.section-title .title {
  margin-bottom: 0;
}

.section-title .title + .fd-lead,
.section-title .title + p {
  margin: 22px 0 0;
  max-width: 580px;
}

.section-title.is-centre {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-title.is-centre .fd-lead,
.section-title.is-centre p {
  margin-left: auto;
  margin-right: auto;
}

/* the underlined accent word, the base's signature, drawn in gold */
.fd-under {
  position: relative;
  display: inline-block;
}

.fd-under::after {
  content: "";
  position: absolute;
  left: 0.04em;
  right: 0.04em;
  bottom: 0.06em;
  height: 2px;
  background: var(--fd-gold);
  transform-origin: left;
  transform: scaleX(var(--fd-under, 1));
}

/* title left, action right (Latest Events / See All) */
.title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.title-row .section-title {
  margin-bottom: 0;
}

.title-row .title {
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem);
}




/*---- 1.6 Shared Pieces ----*/
/* the outlined cross watermark */
.fd-cross-mark {
  position: absolute;
  z-index: 0;
  font-size: 280px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--fd-gold-rgb), 0.22);
  pointer-events: none;
  user-select: none;
}

/* the date tile */
.fd-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 98px;
  flex: 0 0 92px;
  border-radius: var(--fd-arch);
  background: var(--fd-night);
  color: var(--fd-on-night);
  text-align: center;
}

.fd-date b {
  font-family: var(--fd-ff-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--fd-gold);
  margin-top: 6px;
}

.fd-date span {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fd-date.is-light {
  background: var(--fd-band);
  color: var(--fd-ink);
}

.fd-date.is-light b {
  color: var(--fd-primary);
}

.fd-date.is-bare {
  width: auto;
  height: auto;
  flex-basis: auto;
  min-width: 70px;
  padding-right: 26px;
  margin-right: 26px;
  border-radius: 0;
  background: none;
  color: var(--fd-ink);
  border-right: 1px solid var(--fd-line);
}

.fd-date.is-bare b {
  font-size: 46px;
  color: var(--fd-primary);
}

/* meta lines: gold glyph + text */
.fd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.6;
}

.fd-meta li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}

.fd-meta i {
  width: 14px;
  flex: 0 0 14px;
  color: var(--fd-gold-text);
  font-size: 13px;
  text-align: center;
}

.fd-meta a {
  color: var(--fd-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--fd-gold-rgb), 0.6);
  text-underline-offset: 3px;
}

.fd-meta.is-stack {
  flex-direction: column;
}

.fd-night .fd-meta a {
  color: var(--fd-on-night);
}

.fd-night .fd-meta i {
  color: var(--fd-gold);
}

/* round media buttons on sermons: listen, watch, notes, share */
.fd-media-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-media-btns a,
.fd-media-btns button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--fd-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--fd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--fd-ease);
}

.fd-media-btns a:hover,
.fd-media-btns button:hover,
.fd-media-btns .is-playing {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-primary);
  transform: translateY(-2px);
}

.fd-night .fd-media-btns a,
.fd-night .fd-media-btns button {
  border-color: var(--fd-line-night);
  color: var(--fd-on-night);
}

/* framed photographs; hover zoom */
.fd-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--fd-radius);
  background: var(--fd-band);
}

.fd-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--fd-ease);
}

a.fd-frame:hover > img,
.fd-zoom:hover .fd-frame > img {
  transform: scale(1.06);
}

/* the arched church-window frame */
.fd-frame.is-arch {
  border-radius: var(--fd-arch);
}

/* the round play disc on videos */
.fd-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fd-primary);
  font-size: 22px;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.18);
  transition: transform 0.4s var(--fd-ease), background 0.3s ease, color 0.3s ease;
}

.fd-play i {
  margin-left: 4px;
}

.fd-play.is-small {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  font-size: 15px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18);
}

a:hover > .fd-play,
a:hover > .fd-frame > .fd-play,
.fd-play:hover {
  transform: scale(1.08);
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

/* the gold rule along a card's foot - draws on hover (the brand's hover accent) */
.fd-bar {
  position: relative;
}

.fd-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fd-gold), var(--fd-primary));
  transform: scaleX(var(--fd-bar, 0));
  transform-origin: left;
  transition: transform 0.6s var(--fd-ease);
}

.fd-bar:hover::after,
.fd-bar.is-barred::after {
  transform: scaleX(1);
}

/* a progress bar (raised / goal) */
.fd-progress {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: var(--fd-line);
  overflow: hidden;
}

.fd-progress > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fd-pct, 0%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fd-gold), var(--fd-primary));
  transition: width 1.4s var(--fd-ease);
}

.fd-night .fd-progress {
  background: rgba(255, 255, 255, 0.12);
}

/* label / value rows divided by rules (no icon bullets) */
.fd-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--fd-line);
}

.fd-rows li:first-child {
  border-top: 1px solid var(--fd-line);
}

.fd-rows span {
  color: var(--fd-text);
}

.fd-rows b {
  font-family: var(--fd-ff-heading);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--fd-ink);
  text-align: right;
}

.fd-night .fd-rows li {
  border-color: var(--fd-line-night);
}

.fd-night .fd-rows span {
  color: var(--fd-text-night);
}

.fd-night .fd-rows b {
  color: var(--fd-on-night);
}

/* social discs */
.fd-social {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fd-line-strong);
  color: var(--fd-ink);
  font-size: 14px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--fd-ease);
}

.fd-social a:hover {
  background: var(--fd-gold);
  border-color: var(--fd-gold);
  color: #141B24;
  transform: translateY(-2px);
}

.fd-social.is-round a {
  border-color: var(--fd-line-night);
  color: var(--fd-on-night);
}

/* form status line */
.form-status {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status.is-success {
  color: var(--fd-success);
}

.form-status.is-error {
  color: var(--fd-danger);
}

.fd-night .form-status.is-success {
  color: #7FD3A0;
}

.fd-night .form-status.is-error {
  color: #FF9C93;
}

.is-hidden,
.is-filtered-out {
  display: none !important;
}

[hidden] {
  display: none !important;
}



/*---- 1.7 Reveals ----*/
/* Nothing is hidden by CSS: the reveal engine hides an element only when it
   arms its reveal, so every skip path leaves the page as authored. */
.fd-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* padded on every side so italics, descenders and overhangs are never cut;
     the negative margin keeps the layout unchanged */
  padding: 0.08em 0.22em 0.24em 0.1em;
  margin: -0.08em -0.22em -0.24em -0.1em;
}

.fd-word {
  display: inline-block;
}

/* the accent word in a title keeps its colour and stands upright (no italic), wherever the title is styled */
html body :is(h1, h2, h3, h4, h5, h6, [class*="title"], [class*="display"]) :is(em, .accent, .fd-accent, .accent-serif) {
  font-style: normal;
}

/* Avatar group: overlapping round portraits of the community, a count and a short line. As wide as its content;
   is-centered sits it in the middle of a centred column, has-space-below keeps a button under it at a distance. */
.fd-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 30px;
}
.fd-avatars.is-centered {
  margin-inline: auto;
}
.fd-avatars.has-space-below {
  margin-bottom: 32px;
}
.fd-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fd-avatar-stack li {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 3px solid var(--fd-surface);
  border-radius: 50%;
  background: var(--fd-surface);
  transition: transform 0.35s ease;
}
.fd-avatar-stack li + li {
  margin-inline-start: -14px;
}
.fd-avatar-stack li:hover {
  z-index: 2;
  transform: translateY(-4px);
}
.fd-avatar-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-avatar-stack .is-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fd-primary);
  color: var(--fd-on-primary);
  font-family: var(--fd-ff-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.fd-avatars .avatars-copy {
  font-family: var(--fd-ff-body);
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
}
.fd-avatars .avatars-copy b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--fd-ink);
}
.fd-avatars .avatars-copy span {
  display: block;
  color: var(--fd-text);
}
/* on a photograph or a dark band: white rings and light words */
.fd-avatars.is-on-dark .fd-avatar-stack li {
  border-color: rgba(255, 255, 255, 0.92);
}
.fd-avatars.is-on-dark .avatars-copy b {
  color: #FFFFFF;
}
.fd-avatars.is-on-dark .avatars-copy span {
  color: rgba(255, 255, 255, 0.82);
}

/* a byline's round portrait, in place of the generic user icon */
.fd-byline-avatar {
  display: inline-block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 0 0 2px var(--fd-surface);
}

/*======================
2. Preloader
========================*/
/* Candle Lit: a cream candle on the night ground. The wick catches, the flame
   steadies, its halo grows until the glow floods the screen in the page's own
   ground colour. Hidden at once on every skip path (see the JS block). */
.fd-preloader {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 58%, #25303E 0%, #141B24 62%);
}

html.no-js .fd-preloader {
  display: none;
}

.pre-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54px;
}

.pre-logo {
  width: 230px;
  height: auto;
  opacity: 0;
}

.pre-candle {
  position: relative;
  width: 44px;
  height: 150px;
}

/* the wax: a cream pillar with a soft melted lip */
.pre-wax {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112px;
  border-radius: 6px 6px 3px 3px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 223, 170, 0.75) 0%, rgba(255, 223, 170, 0) 70%) top / 100% 30px no-repeat,
    linear-gradient(90deg, #E6D8CB 0%, #FBF3EC 38%, #F1E6DC 62%, #D6C2B2 100%);
  box-shadow: inset 0 -10px 18px -10px rgba(0, 0, 0, 0.25);
}

.pre-wax::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 3px;
  right: 3px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FBF1E8, #E7D6C8);
}

.pre-wick {
  position: absolute;
  left: 50%;
  bottom: 110px;
  width: 3px;
  height: 13px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2B1D12, #5C4330);
}

/* the flame: a teardrop with a hot white core, coral at its edge */
.pre-flame {
  position: absolute;
  left: 50%;
  bottom: 118px;
  width: 22px;
  height: 46px;
  margin-left: -11px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%, #FFFFFF 0%, #FFF3C4 22%, #FFC163 46%, #E8873F 78%, rgba(232, 135, 63, 0) 100%);
  filter: blur(0.6px);
  transform-origin: 50% 100%;
  transform: scale(0);
}

.pre-flame .flame-core {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 8px;
  height: 14px;
  margin-left: -4px;
  border-radius: 50%;
  background: rgba(70, 120, 255, 0.55);
  filter: blur(2px);
}

/* the halo: warm light around the flame */
.pre-halo {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  margin-bottom: -88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 110, 0.55) 0%, rgba(255, 150, 90, 0.22) 34%, rgba(255, 150, 90, 0) 68%);
  opacity: 0;
}

/* the bloom: the page's own ground colour, grown from the flame */
.pre-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fd-bg) 0%, var(--fd-bg) 48%, rgba(var(--fd-gold-rgb), 0.35) 62%, rgba(var(--fd-gold-rgb), 0) 72%);
  transform: scale(0);
  pointer-events: none;
}

/*======================
3. Header
========================*/
/* A hairline topbar and the main bar float over the hero or page banner;
   once the page scrolls the bar becomes a frosted glass strip. */
.fd-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/*---- 3.1 Topbar ----*/
.fd-topbar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(239, 241, 243, 0.78);
  font-size: 13.5px;
  font-weight: 500;
}

.fd-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 46px;
}

.top-next {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}

.top-next b {
  color: #EFF1F3;
  font-weight: 600;
}

.top-next [data-ns-when] {
  color: #E5A06C;
  font-variant-numeric: tabular-nums;
}

.next-dot {
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: #E5A06C;
  box-shadow: 0 0 0 4px rgba(229, 160, 108, 0.2);
}

.fd-topbar .top-right {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

/* "Live": the dot pulses only while a stream is on */
.top-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(239, 241, 243, 0.78);
}

.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(239, 241, 243, 0.45);
}

.top-live.is-live {
  color: #EFF1F3;
}

.top-live.is-live .live-dot,
.is-live .live-dot {
  background: #FF4D3F;
}

.top-live.is-live .live-dot::after,
.is-live .live-pill .live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 77, 63, 0.6);
  animation: fd-live 1.6s ease-out infinite;
}

@keyframes fd-live {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

.top-live:hover {
  color: #E5A06C;
}

/* theme and direction switches */
.top-toggles {
  display: flex;
  gap: 6px;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.top-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: #EFF1F3;
  font-family: var(--fd-ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.top-toggle i {
  font-size: 11px;
  color: #E5A06C;
}

.top-toggle:hover {
  background: #E5A06C;
  border-color: #E5A06C;
  color: #141B24;
}

.top-toggle:hover i {
  color: #141B24;
}

/* the light / dark switch: a moon in the light theme, a sun in the dark one (Theme Icons) */
html .ti-sun {
  display: none;
}
html[data-theme="dark"] .ti-sun {
  display: inline-block;
}
html[data-theme="dark"] .ti-moon {
  display: none;
}

/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.fd-lang {
  position: relative;
  flex-shrink: 0;
}
.fd-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: #EFF1F3;
  font-family: var(--fd-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fd-lang .lang-btn:hover,
.fd-lang .lang-btn[aria-expanded="true"] {
  background: #E5A06C;
  color: #141B24;
}
.fd-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.fd-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.fd-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.fd-lang.is-icon .lang-btn {
  height: 44px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.08);
  color: #EFF1F3;
}
.fd-lang.is-icon .lang-btn:hover,
.fd-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: #E5A06C;
  color: #141B24;
}
.fd-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 14px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
  font-family: var(--fd-ff-body);
  text-align: start;
  white-space: normal;
}
.fd-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.fd-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.fd-lang .lang-menu[hidden] {
  display: none;
}
.fd-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-muted);
}
.fd-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fd-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--fd-line);
}
.fd-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fd-ink);
  font-family: var(--fd-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.fd-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fd-muted);
}
.fd-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--fd-primary);
  opacity: 0;
}
.fd-lang .lang-item:hover,
.fd-lang .lang-item[aria-pressed="true"] {
  background: rgba(var(--fd-primary-rgb), 0.07);
}
.fd-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.fd-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.fd-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--fd-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fd-muted);
}

.fd-social.is-mini {
  gap: 2px;
}

.fd-social.is-mini a {
  width: 30px;
  height: 30px;
  border: 0;
  color: rgba(239, 241, 243, 0.78);
  font-size: 13px;
}

.fd-social.is-mini a:hover {
  background: transparent;
  color: #E5A06C;
  transform: none;
}

/*---- 3.2 Main Bar ----*/
.fd-header .header-main {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.fd-header .header-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 96px;
  transition: height 0.4s var(--fd-ease);
}

.fd-logo {
  display: inline-flex;
  flex: 0 0 auto;
}

.fd-logo img {
  display: block;
  width: auto;
  height: 58px;
  transition: height 0.4s var(--fd-ease);
}

.fd-logo .logo-main {
  display: none;
}

/* main navigation: three levels, two mega panels */
.fd-nav {
  margin: 0 auto;
}

.fd-nav > ul {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fd-nav li {
  position: relative;
}

.fd-nav > ul > li.has-mega {
  position: static;
}

.fd-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 37px 14px;
  font-family: var(--fd-ff-body);
  font-size: 15px;
  font-weight: 600;
  color: #EFF1F3;
  transition: color 0.3s ease, padding 0.4s var(--fd-ease);
}

.fd-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.7;
  transition: transform 0.35s var(--fd-ease);
}

/* hover and the current page by colour only */
.fd-nav > ul > li:hover > a,
.fd-nav > ul > li.active > a {
  color: #E5A06C;
}

.fd-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}

/* dropdowns hang from the bar's lower edge; the li's own padding is the bridge */
.fd-nav .sub-menu,
.fd-nav .mega-panel {
  position: absolute;
  z-index: 5;
  top: 100%;
  margin: 0;
  list-style: none;
  background: var(--fd-surface);
  border: 1px solid var(--fd-line);
  border-radius: 10px;
  box-shadow: var(--fd-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--fd-ease), transform 0.3s var(--fd-ease), visibility 0.3s;
}

.fd-nav .sub-menu {
  left: -6px;
  min-width: 250px;
  padding: 12px;
}

.fd-nav li:hover > .sub-menu,
.fd-nav li:focus-within > .sub-menu,
.fd-nav li:hover > .mega-panel,
.fd-nav li:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fd-nav .sub-menu .sub-menu {
  top: -13px;
  left: calc(100% + 12px);
}

/* an invisible bridge across the gap to a flyout */
.fd-nav .sub-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 14px;
}

.fd-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fd-ink);
  transition: background 0.25s ease, color 0.25s ease, padding 0.35s var(--fd-ease);
}

.fd-nav .sub-menu a i {
  font-size: 9px;
  color: var(--fd-gold-text);
}

.fd-nav .sub-menu li:hover > a,
.fd-nav .sub-menu li.active > a {
  background: var(--fd-band);
  color: var(--fd-primary);
  padding-left: 20px;
}

/* the Home mega panel: the five homes as cards */
.fd-nav .mega-panel {
  left: 50%;
  margin-left: -560px;
  width: 1120px;
  padding: 22px;
}

.mega-homes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.mega-homes a {
  display: block;
  padding: 8px 8px 14px;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.mega-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--fd-band);
}

.mega-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--fd-ease);
}

.mega-homes b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.mega-homes small {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--fd-muted);
}

.mega-homes a:hover,
.mega-homes a.is-current {
  background: var(--fd-band);
}

.mega-homes a:hover img {
  transform: scale(1.06);
}

.mega-homes a.is-current b {
  color: var(--fd-primary);
}

/* the Pages mega panel: three columns and a feature card */
.fd-nav .mega-panel.is-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 10px 26px;
  width: 980px;
  margin-left: -490px;
  padding: 30px;
}

.mega-label {
  display: block;
  margin: 0 0 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.mega-col a {
  display: block;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fd-ink);
  transition: background 0.25s ease, color 0.25s ease, padding 0.35s var(--fd-ease);
}

.mega-col li:hover > a,
.mega-col li.active > a {
  background: var(--fd-band);
  color: var(--fd-primary);
  padding-left: 20px;
}

.mega-feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.mega-feature .mega-thumb {
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.mega-feature-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(20, 27, 36, 0.88));
}

.mega-feature-copy small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E5A06C;
}

.mega-feature-copy b {
  font-family: var(--fd-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: #EFF1F3;
}

.mega-feature:hover img {
  transform: scale(1.06);
}

/*---- 3.3 Actions ----*/
.fd-header .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.head-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: transparent;
  color: #EFF1F3;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.head-icon:hover {
  background: #E5A06C;
  border-color: #E5A06C;
  color: #141B24;
}

.head-bag .bag-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--fd-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.head-cta.fd-btn {
  margin-left: 8px;
}

/* burger (shown once the nav folds away) */
.fd-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #E5A06C;
  cursor: pointer;
}

.fd-menu-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  background: #141B24;
  transition: width 0.35s var(--fd-ease);
}

.fd-menu-toggle span:nth-child(2) {
  width: 12px;
  margin-left: 6px;
}

.fd-menu-toggle:hover span {
  width: 18px;
  margin-left: 0;
}

/*---- 3.4 Glass Bar ----*/
/* fixed on scroll: frosted glass in the page's own ground colour */
.fd-header.is-scrolled {
  position: fixed;
  animation: fd-head-in 0.6s var(--fd-ease);
}

.fd-header.is-scrolled .fd-topbar {
  display: none;
}

.fd-header.is-scrolled .header-main {
  background: var(--fd-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--fd-line), 0 18px 40px -30px rgba(20, 27, 36, 0.5);
}

.fd-header.is-scrolled .header-inner {
  height: 78px;
}

.fd-header.is-scrolled .fd-logo img {
  height: 50px;
}

:root:not([data-theme="dark"]) .fd-header.is-scrolled .fd-logo .logo-main {
  display: block;
}

:root:not([data-theme="dark"]) .fd-header.is-scrolled .fd-logo .logo-light {
  display: none;
}

.fd-header.is-scrolled .fd-nav > ul > li > a {
  padding: 28px 14px;
  color: var(--fd-ink);
}

.fd-header.is-scrolled .fd-nav > ul > li:hover > a,
.fd-header.is-scrolled .fd-nav > ul > li.active > a {
  color: var(--fd-primary);
}

.fd-header.is-scrolled .head-icon {
  border-color: var(--fd-line-strong);
  color: var(--fd-ink);
}

.fd-header.is-scrolled .head-icon:hover {
  background: var(--fd-ink);
  border-color: var(--fd-ink);
  color: var(--fd-bg);
}

@keyframes fd-head-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/*---- 3.5 Search ----*/
.fd-search {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: 120px 24px 40px;
  overflow-y: auto;
  background: rgba(10, 14, 19, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.search-inner {
  position: relative;
  width: 100%;
  max-width: 820px;
}

.search-close {
  position: absolute;
  top: -76px;
  right: 0;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: transparent;
  color: #EFF1F3;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.search-close:hover {
  background: #E5A06C;
  color: #141B24;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(229, 160, 108, 0.6);
}

.search-form i {
  font-size: 22px;
  color: #E5A06C;
}

.search-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--fd-ff-heading);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
  color: #EFF1F3;
}

.search-form input::placeholder {
  color: rgba(239, 241, 243, 0.45);
}

.search-form input:focus {
  outline: none;
}

.search-hint {
  margin: 16px 0 26px;
  font-size: 14.5px;
  color: rgba(239, 241, 243, 0.6);
}

.search-results li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.search-results a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 6px;
  color: #EFF1F3;
  transition: padding 0.35s var(--fd-ease);
}

.search-results a:hover {
  padding-left: 14px;
  color: #E5A06C;
}

.search-results .res-kind {
  flex: 0 0 92px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E5A06C;
}

.search-results .res-title {
  font-family: var(--fd-ff-heading);
  font-size: 1.25rem;
}

.search-results .res-note {
  margin-left: auto;
  font-size: 13.5px;
  color: rgba(239, 241, 243, 0.55);
  white-space: nowrap;
}

.search-results mark {
  padding: 0;
  background: none;
  color: #E5A06C;
}

/*======================
4. Offcanvas Menu
========================*/
/* a slate panel from the burger's side: toggles, every page, contact */
.fd-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 440px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 30px 38px 40px;
  background: #141B24;
  color: #A8B1BB;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 0.6s var(--fd-ease), visibility 0.6s;
}

.fd-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
}

.fd-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(10, 14, 19, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.fd-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.fd-offcanvas .offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.fd-offcanvas .offcanvas-head img {
  width: 170px;
}

.offcanvas-close {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 0;
  border-radius: 50%;
  background: #E5A06C;
  color: #141B24;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.offcanvas-close:hover {
  background: #EFF1F3;
}

.oc-toggles {
  display: flex;
  gap: 8px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.oc-group + .oc-group {
  margin-top: 22px;
}

.oc-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E5A06C;
}

.oc-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.oc-group a {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--fd-ff-heading);
  font-size: 1.12rem;
  color: #EFF1F3;
  transition: color 0.3s ease, transform 0.35s var(--fd-ease);
}

.oc-group a:hover,
.oc-group a.is-current {
  color: #E5A06C;
  transform: translateX(4px);
}

.offcanvas-foot {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-foot .fd-btn {
  margin-bottom: 28px;
}

.offcanvas-foot p {
  margin: 0 0 6px;
  font-size: 15px;
}

.oc-contact {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  color: #EFF1F3;
}

.offcanvas-foot .fd-social {
  margin-top: 22px;
}

/*======================
5. Forms & Select
========================*/
/*---- 5.1 Fields ----*/
/* the base's boxed fields: a bold label above, a coral glyph, the value */
.fd-field {
  margin-bottom: 22px;
}

.fd-field > label,
.field-label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--fd-ff-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-ink);
}

.fd-field > label .req {
  color: var(--fd-primary);
}

.field-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--fd-line);
  background: var(--fd-surface);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.field-control.is-area {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 12px;
}

.field-control > i {
  flex: 0 0 auto;
  width: 16px;
  font-size: 15px;
  text-align: center;
  color: var(--fd-primary);
}

.field-control.is-area > i {
  margin-top: 5px;
}

.field-control .fd-select {
  flex: 1 1 auto;
  min-width: 0;
}

.field-control input,
.field-control textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--fd-ff-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--fd-ink);
  resize: vertical;
}

.field-control input::placeholder,
.field-control textarea::placeholder {
  color: #8C939B;
  font-weight: 400;
}

.field-control input:focus,
.field-control textarea:focus {
  outline: none;
}

.field-control:focus-within {
  border-color: var(--fd-primary);
  box-shadow: 0 0 0 3px rgba(var(--fd-primary-rgb), 0.12);
}

.fd-stone .field-control {
  border-color: #E3DFD8;
}

.field-note {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--fd-text);
}

/* square checkbox */
.fd-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fd-ink);
  cursor: pointer;
}

.fd-check input {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
}

.fd-check .check-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid #C9CDD2;
  background: var(--fd-surface);
  color: transparent;
  font-size: 11px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.fd-check input:checked + .check-box {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-night);
}

.fd-check input:focus-visible + .check-box {
  outline: 2px solid var(--fd-primary);
  outline-offset: 3px;
}

.fd-check small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--fd-text);
}

.fd-check a {
  color: var(--fd-primary);
  text-decoration: underline;
}

/* round radio */
.fd-check.is-radio .check-box {
  border-radius: 50%;
}

.fd-check.is-radio input:checked + .check-box {
  background: var(--fd-surface);
  box-shadow: inset 0 0 0 5px var(--fd-primary);
}

/* segmented choice (amounts, frequency, tickets) */
.fd-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fd-segment label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.fd-segment input {
  position: absolute;
  opacity: 0;
}

.fd-segment span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 96px;
  height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--fd-band);
  font-family: var(--fd-ff-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--fd-ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.fd-segment label:hover span {
  background: var(--fd-blush);
}

.fd-segment input:checked + span {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-night);
}

.fd-segment input:focus-visible + span {
  outline: 2px solid var(--fd-ink);
  outline-offset: 2px;
}

/* quantity stepper */
.fd-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 46px;
  border: 1px solid var(--fd-line);
  background: var(--fd-surface);
}

.fd-stepper button {
  width: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fd-ink);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.fd-stepper button:hover {
  background: var(--fd-primary);
  color: var(--fd-on-night);
}

.fd-stepper input {
  width: 46px;
  border: 0;
  border-left: 1px solid var(--fd-line);
  border-right: 1px solid var(--fd-line);
  background: transparent;
  font-family: var(--fd-ff-heading);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--fd-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.fd-stepper input::-webkit-outer-spin-button,
.fd-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}



/*---- 5.2 Custom Select ----*/
/* Native selects stay in the form (value, name, submit, no-JS). A button and a
   listbox are drawn beside them and kept in sync. */
.fd-select {
  position: relative;
}

.fd-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}

.fd-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--fd-ff-body);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--fd-ink);
  cursor: pointer;
}

.fd-select .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fd-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--fd-primary);
  transition: transform 0.35s var(--fd-ease);
}

.fd-select.is-open .select-button i {
  transform: rotate(180deg);
}

.fd-select .select-list {
  position: absolute;
  top: calc(100% + 14px);
  left: -52px;
  z-index: 40;
  min-width: calc(100% + 70px);
  max-height: 320px;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  list-style: none;
  background: var(--fd-surface);
  border-top: 3px solid var(--fd-primary);
  box-shadow: var(--fd-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--fd-ease), transform 0.3s var(--fd-ease), visibility 0.3s;
}

.fd-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 14px);
  border-top: 0;
  border-bottom: 3px solid var(--fd-primary);
  transform: translateY(-10px);
}

.fd-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fd-select .select-group {
  padding: 12px 22px 4px;
  font-family: var(--fd-ff-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-primary);
}

.fd-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fd-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.fd-select .select-option .option-meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fd-text);
}

.fd-select .select-option.is-focused,
.fd-select .select-option:hover {
  background: var(--fd-band);
}

.fd-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fd-select .select-option.is-selected {
  color: var(--fd-primary);
}

.fd-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--fd-primary);
}

/* a compact boxed select (sort bars, filters) */
.fd-select.is-boxed .select-button {
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--fd-line);
  background: var(--fd-surface);
  font-size: 14.5px;
}

.fd-select.is-boxed .select-list {
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
}

/*======================
6. Sub Header
========================*/
/* The page banner: a church photograph under the slate veil with light
   falling through it (WebGL), the outlined cross on the right, then the
   breadcrumb, the serif title and the lead. */
.fd-subheader {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 250px 0 120px;
  background: #141B24;
  color: #A8B1BB;
}

.fd-subheader .sub-bg {
  position: absolute;
  z-index: -3;
  inset: 0;
}

.fd-subheader .sub-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
}

.fd-subheader::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 27, 36, 0.95) 0%, rgba(20, 27, 36, 0.8) 55%, rgba(20, 27, 36, 0.6) 100%),
    linear-gradient(180deg, rgba(180, 80, 44, 0.25), transparent 60%);
}

.fd-subheader .sub-cross {
  position: absolute;
  z-index: -1;
  right: 9%;
  bottom: -70px;
  font-size: 360px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(229, 160, 108, 0.28);
}

.fd-subheader .sub-inner {
  max-width: 780px;
}

.fd-subheader .sub-title {
  margin: 0 0 16px;
  font-size: clamp(2.8rem, 1.6rem + 3.2vw, 5rem);
  color: #EFF1F3;
}

.fd-subheader .fd-lead {
  margin: 0;
  color: #A8B1BB;
}

.sub-crumbs {
  margin-bottom: 22px;
}

.sub-crumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  font-weight: 500;
}

.sub-crumbs li {
  display: inline-flex;
  align-items: center;
  color: #E5A06C;
}

.sub-crumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 12px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  border-right: 1.5px solid rgba(255, 255, 255, 0.45);
  transform: rotate(45deg);
}

.sub-crumbs a {
  color: #EFF1F3;
}

.sub-crumbs a:hover {
  color: #E5A06C;
}

/*======================
7. Sermon Player
========================*/
/* The base's player bar: a coral play tile, a blush track with the times and
   the volume, and two arrows that step through the sermons. Every play button
   on a page drives this one player. */
.fd-player {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 52px;
}

.player-play {
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: var(--fd-primary);
  color: var(--fd-on-night);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.player-play:hover {
  background: var(--fd-night);
}

.player-play i {
  margin-left: 2px;
}

.fd-player.is-playing .player-play i {
  margin-left: 0;
}

.player-track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 14px;
  background: var(--fd-blush);
}

.player-time {
  flex: 0 0 auto;
  min-width: 34px;
  font-family: var(--fd-ff-heading);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fd-primary);
  font-variant-numeric: tabular-nums;
}

/* the seek line: a thin track, the played part coral */
.player-seek {
  flex: 1 1 auto;
  min-width: 40px;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  --fd-seek: 0%;
}

.player-seek::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--fd-primary) var(--fd-seek), rgba(var(--fd-primary-rgb), 0.25) var(--fd-seek));
}

.player-seek::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, var(--fd-primary) var(--fd-seek), rgba(var(--fd-primary-rgb), 0.25) var(--fd-seek));
}

.player-seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--fd-primary);
  -webkit-appearance: none;
  appearance: none;
}

.player-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--fd-primary);
}

.player-mute {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fd-primary);
  font-size: 14px;
  cursor: pointer;
}

.player-skip {
  display: flex;
  gap: 1px;
}

.player-skip button {
  width: 40px;
  padding: 0;
  border: 0;
  background: var(--fd-blush);
  color: var(--fd-primary);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.player-skip button:hover {
  background: var(--fd-primary);
  color: var(--fd-on-night);
}

.fd-night .player-track,
.fd-night .player-skip button {
  background: rgba(255, 255, 255, 0.08);
}

.fd-night .player-time,
.fd-night .player-mute,
.fd-night .player-skip button {
  color: var(--fd-on-night);
}

/*======================
8. Cards
========================*/
/*---- 8.1 Event Cards ----*/
.event-card-list {
  display: grid;
  gap: 24px;
}

.event-card {
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
  transition: box-shadow 0.4s ease, transform 0.4s var(--fd-ease), border-color 0.4s ease;
}

.event-card:hover {
  border-color: transparent;
  box-shadow: var(--fd-shadow);
  transform: translateY(-4px);
}

.event-card-photo {
  height: 170px;
  border-radius: 0;
}

.event-card-body {
  display: flex;
  align-items: center;
  padding: 26px 28px 30px;
}

.event-card .fd-date.is-bare b {
  font-size: 50px;
}

/* Upcoming Events row: arched date | photo | copy */
.event-wide {
  display: grid;
  grid-template-columns: 110px 1fr 1.15fr;
  gap: 34px;
  align-items: center;
}

.event-wide + .event-wide {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--fd-line);
}

.event-wide .fd-date {
  width: 110px;
  height: 124px;
  align-self: start;
}

.event-wide .fd-date b {
  font-size: 48px;
}

.event-wide-photo {
  height: 280px;
  border-radius: 16px;
}

.event-wide-body h3 {
  margin: 0 0 12px;
  font-size: 2rem;
}

.event-wide-body h3 a:hover {
  color: var(--fd-primary);
}

.event-wide-body .fd-meta {
  margin: 18px 0 26px;
}




/*---- 8.2 Cause Cards ----*/
.cause-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
  transition: box-shadow 0.4s ease, transform 0.4s var(--fd-ease), border-color 0.4s ease;
}

.cause-card:hover {
  border-color: transparent;
  box-shadow: var(--fd-shadow);
  transform: translateY(-6px);
}

.cause-card-photo {
  height: 240px;
  border-radius: 0;
}

.cause-card .fd-progress {
  border-radius: 0;
}

.cause-card-body {
  padding: 26px 30px 30px;
}

.cause-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 20px;
  border-bottom: 1px solid var(--fd-line);
}

.cause-figures div {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  text-align: center;
}

.cause-figures div + div {
  border-left: 1px solid var(--fd-line);
}

.cause-figures > div > span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.cause-figures b {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--fd-ink);
}

.cause-card h3 {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.cause-card h3 a:hover {
  color: var(--fd-primary);
}

.cause-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--fd-line);
}

.cause-days {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fd-ink);
}

.cause-days i {
  color: var(--fd-gold-text);
}

/*---- 8.3 People ----*/
.pastor-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 999px 999px 16px 16px;
  background: var(--fd-surface);
  text-align: center;
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease;
}

.pastor-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--fd-shadow);
}

.pastor-photo {
  aspect-ratio: 1 / 1.08;
  margin: 12px 12px 0;
  border-radius: 999px 999px 10px 10px;
  background: var(--fd-band);
}

.pastor-photo img {
  object-position: center top;
  transform-origin: center top;
}

.pastor-body {
  padding: 22px 20px 28px;
}

.pastor-body h3,
.pastor-frame h3 {
  margin-bottom: 4px;
  font-size: 1.5rem;
}

.pastor-body h3 a:hover,
.pastor-frame h3 a:hover {
  color: var(--fd-primary);
}

.pastor-role {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.pastor-social {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.pastor-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fd-line-strong);
  border-radius: 50%;
  color: var(--fd-ink);
  font-size: 12.5px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pastor-social a:hover {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-primary);
}

/* Protestant pastors: an offset gold frame behind the portrait, a night tile */
.pastor-frame .frame-photo {
  position: relative;
  margin: 24px 24px 20px 0;
}

.pastor-frame .frame-back {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 50%;
  height: 50%;
  border: 1px solid var(--fd-gold);
  border-radius: 0 16px 0 0;
  transition: width 0.6s var(--fd-ease), height 0.6s var(--fd-ease);
}

.pastor-frame:hover .frame-back {
  width: 75%;
  height: 80%;
}

.pastor-frame .fd-frame {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: 16px;
  background: var(--fd-surface);
  box-shadow: 0 20px 44px -30px rgba(16, 24, 34, 0.45);
}

.pastor-frame .fd-frame img {
  object-position: center top;
  transform-origin: center top;
}

.frame-arrow {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -30px;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--fd-night);
  color: #ECAA78;
  font-size: 22px;
  transition: background 0.3s ease, color 0.3s ease;
}

.frame-arrow:hover {
  background: var(--fd-primary);
  color: #FFFFFF;
}

.frame-arrow i {
  transition: transform 0.4s var(--fd-ease);
}

.frame-arrow:hover i {
  transform: translateX(6px);
}

.pastor-frame h3 {
  margin-top: 0;
  padding-left: 108px;
}

.pastor-frame .pastor-role {
  padding-left: 108px;
}

/*---- 8.4 Ministry Cards ----*/
.ministry-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease;
}

.ministry-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fd-shadow);
}

.ministry-photo {
  height: 250px;
  border-radius: 0;
}

.ministry-body {
  position: relative;
  padding: 46px 30px 28px;
}

.ministry-icon {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fd-primary);
  color: #F0B88D;
  font-size: 30px;
  box-shadow: 0 0 0 6px var(--fd-surface);
  transition: background 0.4s ease, transform 0.5s var(--fd-ease);
}

.ministry-icon i::before {
  margin: 0;
}

.ministry-card:hover .ministry-icon {
  background: var(--fd-night);
  transform: rotate(-8deg) scale(1.05);
}

.ministry-body h3 {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.ministry-body h3 a:hover {
  color: var(--fd-primary);
}

.ministry-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--fd-line);
  font-size: 14.5px;
}

.ministry-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--fd-ink);
}

.ministry-foot i {
  color: var(--fd-gold-text);
}

/*======================
9. Hero Slider
========================*/
/* Full-screen church photographs that crossfade under light falling through
   high windows (WebGL). The copy sits left on a serif title with its italic
   gold line; a glass card on the right counts down to the next gathering;
   numbered tabs with a progress line and round arrows run along the foot. */
.fd-hero {
  position: relative;
  overflow: hidden;
  background: #141B24;
  color: rgba(239, 241, 243, 0.86);
}

.fd-hero-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(800px, 100vh, 1040px);
  padding: 200px 0 250px;
  overflow: hidden;
}

.fd-hero .hero-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.fd-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fd-hero .swiper-slide-active .hero-bg img {
  transform: scale(1);
}

.fd-hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 27, 36, 0.9) 0%, rgba(20, 27, 36, 0.62) 42%, rgba(20, 27, 36, 0.25) 75%, rgba(20, 27, 36, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 27, 36, 0.55) 0%, rgba(20, 27, 36, 0) 30%, rgba(20, 27, 36, 0) 62%, rgba(20, 27, 36, 0.9) 100%);
}

.fd-hero.is-centre .hero-bg::after {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(20, 27, 36, 0.35) 0%, rgba(20, 27, 36, 0.75) 75%),
    linear-gradient(180deg, rgba(20, 27, 36, 0.55) 0%, rgba(20, 27, 36, 0.2) 40%, rgba(20, 27, 36, 0.9) 100%);
}

.fd-hero .fd-gl {
  z-index: 2;
}

.fd-hero .container {
  position: relative;
  z-index: 3;
}

.hero-copy {
  max-width: 760px;
}

.fd-hero.is-centre .hero-copy {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.hero-eyebrow {
  margin-bottom: 26px;
}

.fd-hero.is-centre .hero-eyebrow {
  justify-content: center;
}

.hero-title {
  margin: 0 0 30px;
  font-size: clamp(3.1rem, 1.2rem + 5.4vw, 7rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: #EFF1F3;
}

/* each line is set where the design breaks it */
.hero-title .hl {
  display: block;
  white-space: nowrap;
}

.hero-title .fd-accent {
  color: #ECAA78;
}

.hero-lead {
  max-width: 600px;
  margin: 0 0 42px;
  font-size: 1.12rem;
  line-height: 1.7;
}

.fd-hero.is-centre .hero-lead {
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.fd-hero.is-centre .hero-actions {
  justify-content: center;
}

.hero-actions .fd-btn.is-ghost-light i {
  color: #ECAA78;
}

/* the next gathering on frosted glass, right of the copy */
.hero-side {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-38%);
  pointer-events: none;
}

.gather-card {
  width: 340px;
  margin-left: auto;
  padding: 28px 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(20, 27, 36, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.gather-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ECAA78;
}

.gather-name {
  margin: 12px 0 2px;
  font-size: 1.9rem;
  color: #EFF1F3;
}

.gather-when {
  margin: 0 0 20px;
  font-size: 15px;
}

.gather-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.gather-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gather-count b {
  font-family: var(--fd-ff-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.gather-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #EFF1F3;
}

.gather-link i {
  font-size: 12px;
  color: #ECAA78;
  transition: transform 0.4s var(--fd-ease);
}

.gather-link:hover {
  color: #ECAA78;
}

.gather-link:hover i {
  transform: translateX(4px);
}

/* numbered tabs with a progress line; round arrows */
.hero-foot {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 150px;
}

.hero-foot-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.hero-tabs {
  display: flex;
  gap: 28px;
}

.hero-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 150px;
  padding: 0 0 14px;
  border: 0;
  background: none;
  color: rgba(239, 241, 243, 0.6);
  font-family: var(--fd-ff-body);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}

.hero-tab .tab-num {
  font-family: var(--fd-ff-heading);
  font-size: 15px;
  color: #ECAA78;
}

.hero-tab::before,
.hero-tab .tab-bar {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.hero-tab .tab-bar {
  background: #ECAA78;
  transform: scaleX(0);
  transform-origin: left;
}

.hero-tab.is-active,
.hero-tab:hover {
  color: #EFF1F3;
}

.hero-arrows {
  display: flex;
  gap: 10px;
}

.hero-arrow {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #EFF1F3;
  font-size: 15px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hero-arrow:hover {
  background: #ECAA78;
  border-color: #ECAA78;
  color: #141B24;
}

/* the centred heroes keep a slim foot: dashes in the middle */
.hero-dashes {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 150px !important;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-dashes .swiper-pagination-bullet {
  width: 34px;
  height: 2px;
  margin: 0 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition: background 0.3s ease, width 0.4s var(--fd-ease);
}

.hero-dashes .swiper-pagination-bullet-active {
  width: 60px;
  background: #ECAA78;
}

.fd-hero.is-centre .hero-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  margin-top: -28px;
}

.fd-hero.is-centre .hero-arrow.is-prev {
  left: 40px;
}

.fd-hero.is-centre .hero-arrow.is-next {
  right: 40px;
}

.hero-zoom {
  position: relative;
  transform-origin: 50% 40%;
}

/*======================
10. Intro Panel
========================*/
/* One surface over the hero's foot, two cells: the next event (arched date,
   title, time and place, Join Now with a live countdown) and the latest
   sermon (title, preacher and the player). */
.fd-intro {
  position: relative;
  z-index: 5;
  margin-top: -100px;
}

.intro-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
}

.intro-cell {
  padding: 40px 46px 42px;
}

.intro-cell + .intro-cell {
  border-left: 1px solid var(--fd-line);
}

.intro-cell .fd-eyebrow {
  margin-bottom: 18px;
}

.intro-title {
  margin-bottom: 14px;
  font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.85rem);
  line-height: 1.15;
}

.intro-title a:hover {
  color: var(--fd-primary);
}

.intro-event {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 26px;
}

.intro-event .intro-title {
  margin-bottom: 8px;
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* a compact countdown beside the button */
.mini-count {
  display: flex;
  gap: 6px;
}

.mini-count span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: 7px 6px;
  border-radius: 8px;
  background: var(--fd-band);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.mini-count b {
  font-family: var(--fd-ff-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--fd-ink);
  font-variant-numeric: tabular-nums;
}

.intro-cell .fd-meta {
  margin-bottom: 24px;
}

.intro-cell .intro-event .fd-meta {
  margin-bottom: 0;
}

/*---- 10.1 Intro With Photo ----*/
.intro-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
}

.intro-photo {
  height: 230px;
  border-radius: 0;
}

.intro-pad {
  padding: 34px 40px 40px;
}

/*======================
11. Welcome
========================*/
/* Arched windows (a tall photograph and a small round one), a gold seal with
   the church's years, the outlined cross; beside them the welcome, three
   figures and the pastor's sign-off. The base's watercolour town floats along
   the section's foot. The centred variant keeps the base's composition. */
.fd-welcome,
.fd-about-intro {
  position: relative;
  overflow: hidden;
}

.welcome-collage {
  position: relative;
  max-width: 560px;
  padding: 0 80px 70px 0;
}

.collage-main {
  height: 600px;
  box-shadow: var(--fd-shadow);
}

.collage-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 250px;
  height: 250px;
  border: 10px solid var(--fd-bg);
  border-radius: 50%;
  box-shadow: var(--fd-shadow);
}

.years-seal {
  position: absolute;
  top: 60px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--fd-primary);
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  box-shadow: 0 0 0 8px rgba(var(--fd-gold-rgb), 0.25), 0 24px 50px -20px rgba(var(--fd-primary-rgb), 0.9);
}

.years-seal b {
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
}

.years-seal span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.welcome-collage .fd-cross-mark {
  left: -70px;
  bottom: -40px;
  z-index: -1;
}

.welcome-copy .title {
  margin-bottom: 28px;
}

.welcome-copy .fd-lead {
  margin-bottom: 14px;
}

.welcome-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 38px;
  border-top: 1px solid var(--fd-line);
  border-bottom: 1px solid var(--fd-line);
}

.welcome-stats li {
  padding: 22px 0 20px;
}

.welcome-stats li + li {
  padding-left: 26px;
  border-left: 1px solid var(--fd-line);
}

.welcome-stats b {
  display: block;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--fd-ink);
}

.welcome-stats span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-muted);
}

.welcome-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 34px;
}

.welcome-sign {
  display: flex;
  align-items: center;
  gap: 14px;
}

.welcome-sign img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 3px var(--fd-bg), 0 0 0 4px var(--fd-gold);
}

.welcome-sign span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--fd-muted);
}

.welcome-sign b {
  font-family: var(--fd-ff-heading);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: var(--fd-ink);
}

/* the centred welcome (Orthodox home) */
.about-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.about-intro-inner .fd-cross-mark {
  top: 50%;
  left: 50%;
  margin: -160px 0 0 -105px;
  z-index: -1;
}

.about-intro-inner .title {
  margin-bottom: 30px;
}

.about-intro-inner p {
  font-size: 1.08rem;
}

/* floating cut-outs: outer layer takes cursor depth, inner the entrance,
   the image its own two sine loops (see the Floating Cut-outs block) */
.fd-float {
  position: absolute;
  z-index: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.55;
}

[data-theme="dark"] .fd-float {
  opacity: 0.22;
}

.fd-float img {
  display: block;
  width: 100%;
  height: auto;
}

.fd-float.is-left {
  left: -60px;
  width: min(420px, 26vw);
}

.fd-float.is-right {
  right: 1.5vw;
  width: min(120px, 8vw);
}

.fd-welcome .container {
  position: relative;
  z-index: 1;
}

/*======================
12. Plan Your Visit
========================*/
/* Home 1's scroll moment: the order of worship as cards that stack (CSS
   sticky, each a step lower; the card underneath sinks and dims as the next
   arrives, scrubbed). The next gathering and the service times stay beside
   them. No ScrollTrigger pin. */
.plan-aside {
  position: sticky;
  top: 120px;
}

.next-gathering {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  padding: 30px 32px;
  border-radius: 14px;
  background: var(--fd-night);
  color: var(--fd-text-night);
}

/* a soft gold glow in the card's corner, like a lamp */
.next-gathering::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fd-gold-rgb), 0.28), rgba(var(--fd-gold-rgb), 0) 68%);
  pointer-events: none;
}

.ng-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.ng-name {
  margin: 0 0 2px;
  font-size: 1.85rem;
  color: var(--fd-on-night);
}

.ng-when {
  margin: 0 0 22px;
  font-weight: 500;
}

.next-gathering.is-now .ng-when {
  color: var(--fd-gold);
}

.ng-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ng-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px 10px;
  border: 1px solid var(--fd-line-night);
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ng-count b {
  font-family: var(--fd-ff-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fd-on-night);
  font-variant-numeric: tabular-nums;
}

/* the service rows mark the next gathering */
.service-rows li {
  position: relative;
  transition: padding 0.4s var(--fd-ease);
}

.service-rows li.is-next {
  padding-left: 20px;
}

.service-rows li.is-next::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--fd-primary);
  box-shadow: 0 0 0 4px rgba(var(--fd-primary-rgb), 0.18);
}

.service-rows li.is-next span {
  color: var(--fd-ink);
  font-weight: 600;
}

/* the stack */
.worship-stack {
  position: relative;
}

.stack-card {
  position: sticky;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 330px;
  margin-bottom: 40px;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
  box-shadow: 0 30px 60px -36px rgba(16, 24, 34, 0.45);
  transform-origin: 50% 0;
}

.stack-card:nth-child(1) { top: 130px; }
.stack-card:nth-child(2) { top: 150px; }
.stack-card:nth-child(3) { top: 170px; }
.stack-card:nth-child(4) { top: 190px; }
.stack-card:nth-child(5) { top: 210px; margin-bottom: 0; }

.stack-photo {
  min-height: 100%;
  border-radius: 0;
}

/* the step's numeral, set large in the serif's italic over the photo */
.stack-num {
  position: absolute;
  left: 24px;
  bottom: 14px;
  font-family: var(--fd-ff-heading);
  font-size: 84px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.stack-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 40px;
}

.stack-time {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--fd-band);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fd-ink);
}

.stack-time i {
  color: var(--fd-gold-text);
}

.stack-body h3 {
  margin-bottom: 12px;
  font-size: 1.85rem;
}

.stack-body p {
  margin: 0;
}

/*======================
13. Urgent Causes
========================*/
/* A night band lit through stained glass (WebGL). On the left the featured
   cause - title, story, the funded ring beside raised / goal / to go / days
   left, Donate - sliding between causes; on the right a picker with every
   cause's own progress. Every figure is worked out from raised and goal. */
.fd-causes-band {
  position: relative;
  overflow: hidden;
}

.fd-causes-band .fd-gl {
  z-index: 0;
}

.fd-causes-band .container {
  position: relative;
  z-index: 2;
}

.cause-slide {
  max-width: 640px;
}

.cause-title {
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 1.5rem + 2.2vw, 3.8rem);
}

.cause-slide > p {
  max-width: 560px;
  margin: 0 0 40px;
  font-size: 1.08rem;
}

.cause-chart {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}

/* the ring: a conic arc from candle light into ember to the funded share */
.cause-ring {
  position: relative;
  width: 176px;
  height: 176px;
  flex: 0 0 176px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--fd-gold) 0, var(--fd-primary) calc(var(--fd-ring, 0) * 1%), rgba(255, 255, 255, 0.1) calc(var(--fd-ring, 0) * 1%));
}

.cause-ring .ring-fill {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--fd-night);
}

.cause-ring .ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cause-ring .ring-num b {
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  color: var(--fd-on-night);
}

.cause-ring .ring-num small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.cause-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 34px;
}

.cause-figs span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-text-night);
}

.cause-figs b {
  font-family: var(--fd-ff-heading);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--fd-on-night);
}

.cause-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}

.cause-donors {
  font-size: 15px;
}

.cause-donors b {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--fd-gold);
}

/* the picker */
.cause-list {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cause-list-label {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.cause-pick {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--fd-text-night);
  font-family: var(--fd-ff-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.cause-pick:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cause-pick.is-active {
  border-color: rgba(var(--fd-gold-rgb), 0.45);
  background: rgba(var(--fd-gold-rgb), 0.08);
}

.pick-thumb {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  overflow: hidden;
  border-radius: 999px 999px 8px 8px;
}

.pick-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pick-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pick-body b {
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--fd-on-night);
}

.pick-body small {
  font-size: 13px;
}

.cause-list .fd-link {
  margin-top: 10px;
}

.cause-dots {
  display: flex;
  gap: 8px;
}

.cause-dots .swiper-pagination-bullet,
.quote-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition: background 0.3s ease, width 0.4s var(--fd-ease);
}

.cause-dots .swiper-pagination-bullet-active,
.quote-dots .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background: var(--fd-gold);
}

/*======================
14. Events & Sermons
========================*/
/* Two columns under one title: the events as rows with a large serif day,
   and the sermons as a numbered accordion whose open item shows its photo,
   preacher, date, scripture and media. */
.col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--fd-ink);
}

.col-head h3 {
  margin: 0;
  font-size: 1.9rem;
}

.event-list li + li {
  border-top: 1px solid var(--fd-line);
}

.event-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 6px;
  transition: background 0.4s ease, padding 0.4s var(--fd-ease);
}

.event-row:hover {
  padding-left: 16px;
  padding-right: 16px;
  background: var(--fd-surface);
}

.event-day {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 136px;
}

.event-day b {
  font-family: var(--fd-ff-heading);
  font-size: 58px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--fd-primary);
  font-variant-numeric: lining-nums;
}

.event-day > span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fd-muted);
}

.event-day > span span:first-child {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-ink);
}

.event-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.event-row-title {
  margin-bottom: 8px;
  font-size: 1.3rem;
}

.event-row-title a:hover {
  color: var(--fd-primary);
}

.event-row .fd-meta {
  gap: 4px 18px;
  font-size: 14px;
}

.event-go {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fd-line-strong);
  border-radius: 50%;
  color: var(--fd-ink);
  font-size: 13px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s var(--fd-ease);
}

.event-row:hover .event-go {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: var(--fd-on-primary);
  transform: rotate(-45deg);
}

/* accordion */
.sermon-acc {
  border-bottom: 1px solid var(--fd-line);
}

.sermon-acc summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
}

.sermon-acc summary::-webkit-details-marker {
  display: none;
}

.acc-num {
  flex: 0 0 34px;
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--fd-gold-text);
}

.acc-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.3rem;
  transition: color 0.3s ease;
}

.acc-dur {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fd-muted);
  white-space: nowrap;
}

.sermon-acc summary:hover .acc-title,
.sermon-acc[open] .acc-title {
  color: var(--fd-primary);
}

/* a plus that turns into a minus, in a ring */
.acc-icon {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--fd-line-strong);
  border-radius: 50%;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--fd-ink);
  transition: transform 0.4s var(--fd-ease), background 0.3s ease;
}

.acc-icon::after {
  transform: rotate(90deg);
}

.sermon-acc[open] .acc-icon {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
}

.sermon-acc[open] .acc-icon::after {
  transform: rotate(0deg);
}

.sermon-acc[open] .acc-icon::before,
.sermon-acc[open] .acc-icon::after {
  background: var(--fd-on-primary);
}

.acc-body {
  padding: 0 0 30px 52px;
}

.acc-body .fd-meta {
  margin-bottom: 20px;
}

.acc-photo {
  height: 210px;
  margin-bottom: 20px;
  border-radius: 12px;
}

.acc-series {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(20, 27, 36, 0.72);
  color: #EFF1F3;
  font-size: 13px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/*======================
15. Live Broadcast
========================*/
/* A cinematic video with its live status written on it, beside the coming
   streams worked out from the schedule, then four recent broadcasts. */
.title-aside {
  max-width: 420px;
  margin: 0;
}

.broadcast-main {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.broadcast-video {
  min-height: 460px;
  border-radius: 16px;
}

.broadcast-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 27, 36, 0) 40%, rgba(20, 27, 36, 0.85) 100%);
  pointer-events: none;
}

.video-info {
  position: absolute;
  z-index: 2;
  left: 30px;
  right: 30px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: rgba(239, 241, 243, 0.85);
}

.video-info b {
  font-family: var(--fd-ff-heading);
  font-size: 2rem;
  font-weight: 400;
  color: #EFF1F3;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #EFF1F3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.live-pill .live-dot {
  background: #ECAA78;
}

.is-live .live-pill {
  background: #FF4D3F;
  color: #FFFFFF;
}

.is-live .live-pill .live-dot {
  background: #FFFFFF;
}

.broadcast-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 40px;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.broadcast-card h3 {
  margin-bottom: 14px;
  font-size: 2.1rem;
}

.broadcast-when {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.broadcast-card .fd-btn {
  align-self: flex-start;
  margin-top: 10px;
}

.stream-card {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.stream-card h3 {
  margin-bottom: 18px;
  font-size: 1.6rem;
}

.stream-list {
  flex: 1 1 auto;
  margin-bottom: 24px;
}

.stream-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--fd-line);
}

.stream-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 58px;
  padding: 6px 0;
  border-radius: 999px 999px 8px 8px;
  background: var(--fd-band);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.stream-day b {
  font-family: var(--fd-ff-heading);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fd-primary);
}

.stream-name {
  display: flex;
  flex-direction: column;
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  color: var(--fd-ink);
}

.stream-name small {
  font-family: var(--fd-ff-body);
  font-size: 13.5px;
  color: var(--fd-muted);
}

.stream-list li.is-live-row .stream-day {
  background: #FF4D3F;
  color: #FFFFFF;
}

.stream-list li.is-live-row .stream-day b {
  color: #FFFFFF;
}

.thumb-card {
  display: block;
}

.thumb-card .fd-frame {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
}

.thumb-name {
  display: block;
  margin-top: 16px;
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  color: var(--fd-ink);
  transition: color 0.3s ease;
}

.thumb-meta {
  display: block;
  font-size: 14px;
  color: var(--fd-muted);
}

.thumb-card:hover .thumb-name {
  color: var(--fd-primary);
}

.thumb-card:hover img {
  transform: scale(1.06);
}

/*======================
16. Members Say
========================*/
/* Copy and arrows on the left; on the right a night panel lit through glass
   with three arched windows standing above its edge (the middle one taller)
   and the members' words in large serif. */
.member-panel {
  position: relative;
  margin-top: 150px;
  padding: 170px 56px 46px;
  border-radius: 18px;
}

.member-panel .fd-gl {
  z-index: 0;
  border-radius: 18px;
  opacity: 0.8;
}

.member-photos {
  position: absolute;
  z-index: 2;
  top: -120px;
  left: 56px;
  right: 56px;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: end;
  gap: 18px;
}

.member-photos .fd-frame {
  height: 210px;
  border: 6px solid var(--fd-night);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.member-photos .fd-frame.is-mid {
  height: 270px;
}

.fd-quote-slider {
  position: relative;
  z-index: 2;
}

.member-quote {
  margin: 0;
}

.member-quote p {
  margin-bottom: 28px;
  font-family: var(--fd-ff-heading);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--fd-on-night);
}

.member-quote p::before {
  content: "\201C";
  display: block;
  height: 46px;
  font-size: 90px;
  line-height: 1;
  color: var(--fd-gold);
}

.member-quote footer {
  display: flex;
  align-items: center;
  gap: 14px;
}

.member-quote footer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--fd-gold);
}

.member-quote footer span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.member-quote cite {
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--fd-on-night);
}

.quote-dots {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.member-arrows {
  margin-top: 6px;
}

/*======================
17. News
========================*/
/* A magazine spread: the lead story (photograph with the card overlapping
   its foot) beside three compact rows; and the standard three-up card. */
.news-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}

.post-overlap {
  position: relative;
}

.post-overlap .post-photo {
  height: 440px;
  border-radius: 16px;
}

.post-cat {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(247, 245, 242, 0.92);
  color: #17202A;
  font-size: 12.5px;
  font-weight: 600;
}

.post-overlap .post-card {
  position: relative;
  z-index: 2;
  margin: -120px 34px 0;
  padding: 34px 38px 36px;
  border-radius: 14px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
}

.post-date {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.post-overlap h3 {
  margin-bottom: 12px;
  font-size: 1.9rem;
}

.post-overlap h3 a:hover,
.post-card-std h3 a:hover,
.post-row h3 a:hover {
  color: var(--fd-primary);
}

.news-side {
  display: grid;
  gap: 0;
}

.post-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--fd-line-strong);
}

.post-row:first-child {
  padding-top: 0;
}

.post-row-photo {
  height: 130px;
  border-radius: 999px 999px 10px 10px;
}

.post-row-meta {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.post-row h3 {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

/* the standard card */
.post-card-std {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 14px;
  background: var(--fd-surface);
  transition: box-shadow 0.4s ease, transform 0.4s var(--fd-ease), border-color 0.4s ease;
}

.post-card-std:hover {
  border-color: transparent;
  box-shadow: var(--fd-shadow);
  transform: translateY(-6px);
}

.post-card-std .post-photo {
  height: 250px;
  border-radius: 0;
}

.post-card-std .post-body {
  padding: 26px 30px 30px;
}

.post-card-std h3 {
  margin-bottom: 12px;
  font-size: 1.45rem;
}

.post-card-std p {
  margin-bottom: 20px;
}

/*======================
18. Liturgical Year
========================*/
/* Home 2's scroll moment and its logic: the band's ground eases from night
   into today's liturgical colour as it scrolls in (scrubbed), and its
   stained-glass light takes the same colour. On it: today's season, week,
   colour and reading cycles; a wheel of this year's seasons at their real
   lengths with today's needle; the coming feasts and the days to go. */
.fd-liturgy {
  position: relative;
  overflow: hidden;
  background-color: var(--fd-lit-ground, #141B24);
  color: rgba(239, 241, 243, 0.82);
}

.fd-liturgy .fd-gl {
  z-index: 0;
  opacity: 0.9;
}

.fd-liturgy .container {
  position: relative;
  z-index: 2;
}

.fd-liturgy .title,
.fd-liturgy h3 {
  color: #EFF1F3;
}

.fd-liturgy .title [data-lit="season"] {
  font-style: normal;
  color: #F0B88D;
}

.fd-liturgy .fd-lead {
  color: rgba(239, 241, 243, 0.8);
}

.liturgy-rows li,
.liturgy-rows li:first-child {
  border-color: rgba(255, 255, 255, 0.16);
}

.liturgy-rows span {
  color: rgba(239, 241, 243, 0.72);
}

.liturgy-rows b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #EFF1F3;
}

.lit-swatch,
.lit-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fd-lit-colour, #2E7D4F);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.liturgy-panel {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas: "wheel key" "title title" "feasts feasts";
  gap: 26px 40px;
  align-items: center;
  padding: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(10, 14, 19, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* the wheel: segments painted by JS as a conic gradient from Advent I */
.season-wheel {
  grid-area: wheel;
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: conic-gradient(#6B3FA0 0 7%, #E8C66A 7% 12%, #2E7D4F 12% 25%, #6B3FA0 25% 37%, #E8C66A 37% 51%, #2E7D4F 51% 100%);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
}

.season-wheel::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--fd-lit-ground, #141B24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.wheel-needle {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 3px;
  height: 52%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #EFF1F3;
  transform-origin: 50% calc(100% - 9px);
  transform: rotate(var(--fd-needle, 300deg));
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}

.wheel-needle::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #EFF1F3;
}

.wheel-core {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.wheel-core b {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: #EFF1F3;
}

.wheel-core span {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wheel-key {
  grid-area: key;
  display: grid;
  gap: 12px;
}

.wheel-key li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  color: #EFF1F3;
}

.wheel-key i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.wheel-key .is-violet { background: #6B3FA0; }
.wheel-key .is-gold { background: #E8C66A; }
.wheel-key .is-green { background: #2E7D4F; }
.wheel-key .is-red { background: #C0392B; }

.wheel-key li.is-now::after {
  content: "Now";
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  background: #EFF1F3;
  color: #141B24;
  font-family: var(--fd-ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feasts-title {
  grid-area: title;
  margin: 6px 0 -8px;
  font-size: 1.5rem;
}

.feast-list {
  grid-area: feasts;
}

.feast-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.feast-name {
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  color: #EFF1F3;
}

.feast-date {
  font-size: 14.5px;
}

.feast-in {
  min-width: 96px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: #F0B88D;
}

/* the chip under a centred hero (today in the Church year / days to Pascha) */
.hero-note {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 196px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  background: rgba(20, 27, 36, 0.45);
  color: #EFF1F3;
  font-size: 14px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  transition: background 0.3s ease;
}

.hero-chip:hover {
  background: rgba(20, 27, 36, 0.7);
  color: #EFF1F3;
}

.hero-chip b {
  color: #F0B88D;
}

.hero-chip .lit-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.chip-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
}

/*======================
19. About Tiles
========================*/
/* The base's mosaic of icon tiles in three staggered columns - surface,
   night and ember, beside the About
   copy and the Mass times. */
.tile-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.tile-col {
  display: grid;
  gap: 22px;
}

.tile-col.is-low {
  margin-top: 64px;
}

.tile-col.is-lower {
  margin-top: 150px;
}

.icon-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1.08;
  padding: 26px 24px 24px;
  border: 1px solid var(--fd-line);
  border-radius: 999px 999px 18px 18px;
  background: var(--fd-surface);
  color: var(--fd-ink);
  box-shadow: 0 22px 46px -30px rgba(16, 24, 34, 0.4);
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease, background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.icon-tile i {
  align-self: center;
  margin-top: 26px;
  font-size: 48px;
  line-height: 1;
  color: var(--fd-gold-text);
  transition: color 0.4s ease, transform 0.5s var(--fd-ease);
}

.icon-tile i::before {
  margin: 0;
}

.icon-tile b {
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}

.icon-tile.is-navy {
  border-color: transparent;
  background: var(--fd-night);
  color: var(--fd-on-night);
}

.icon-tile.is-coral {
  border-color: transparent;
  background: var(--fd-primary);
  color: #FFFFFF;
}

.icon-tile.is-navy i,
.icon-tile.is-coral i {
  color: #ECAA78;
}

/* hover: lift, the house icon inversion into ember */
.icon-tile:hover {
  transform: translateY(-8px);
  border-color: transparent;
  background: var(--fd-primary);
  color: #FFFFFF;
  box-shadow: 0 30px 50px -24px rgba(var(--fd-primary-rgb), 0.7);
}

.icon-tile.is-coral:hover {
  background: var(--fd-night);
  box-shadow: 0 30px 50px -24px rgba(20, 27, 36, 0.7);
}

.icon-tile:hover i {
  color: #ECAA78;
  transform: scale(1.1) rotate(-4deg);
}

.mass-rows {
  margin: 8px 0 34px;
}

/*======================
20. Event Band
========================*/
/* The base's countdown band: a photograph under the night veil, the date
   and the event's serif title centred, and a glass strip along its foot -
   the cause on the left, the registration countdown on the right. */
.fd-event-band {
  padding-top: 140px;
}

.event-band-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto 120px;
  text-align: center;
}

.band-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #F0B88D;
}

.band-title {
  margin-bottom: 20px;
  font-size: clamp(3rem, 1.4rem + 4.6vw, 6rem);
  font-weight: 400;
  line-height: 1;
}

.event-band-strip {
  position: relative;
  z-index: 2;
  padding: 44px 0;
  background: rgba(10, 14, 19, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.strip-title {
  margin-bottom: 10px;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
}

.event-band-strip p {
  margin: 0;
}

.strip-label {
  margin-bottom: 16px;
  font-size: 1.25rem;
}

.band-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.band-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.band-count b {
  font-family: var(--fd-ff-heading);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

/*======================
21. Ticket Plans
========================*/
/* Three ticket cards with punched notches. Each takes a quantity; the
   summary counts the seats, totals the order and shows what the packages save
   against personal tickets. */
.ticket-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 48px 40px 36px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  text-align: center;
  box-shadow: 0 24px 50px -34px rgba(16, 24, 34, 0.35);
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease, border-color 0.4s ease;
}

/* the ticket's punched notches and its tear line */
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  top: 56%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: var(--fd-band);
  box-shadow: inset 0 0 0 1px var(--fd-line);
}

.ticket-card::before {
  left: -17px;
  clip-path: inset(0 0 0 50%);
}

.ticket-card::after {
  right: -17px;
  clip-path: inset(0 50% 0 0);
}

.ticket-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--fd-shadow);
}

.ticket-card.is-featured {
  border-color: rgba(var(--fd-gold-rgb), 0.6);
}

.ticket-flag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--fd-blush);
  color: var(--fd-primary);
  font-size: 12px;
  font-weight: 600;
}

.ticket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 86px;
  margin-bottom: 18px;
  border-radius: 999px 999px 10px 10px;
  background: var(--fd-band);
  font-size: 40px;
  line-height: 1;
  color: var(--fd-gold-text);
}

.ticket-icon::before {
  margin: 0;
}

.ticket-card h3 {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.ticket-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  color: var(--fd-primary);
  font-family: var(--fd-ff-heading);
}

.ticket-price sup {
  top: 0;
  margin-top: 12px;
  font-size: 22px;
}

.ticket-price b {
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.ticket-price span {
  flex-basis: 100%;
  margin-top: 6px;
  font-family: var(--fd-ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-muted);
}

.ticket-list {
  margin-bottom: 28px;
  border-top: 1px dashed var(--fd-line-strong);
}

.ticket-list li {
  padding: 11px 0;
  border-bottom: 1px dashed var(--fd-line-strong);
  font-size: 15px;
}

.ticket-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.qty-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-ink);
}

.fd-stepper {
  border-radius: 30px;
  overflow: hidden;
}

.ticket-card.is-chosen {
  border-color: var(--fd-primary);
  box-shadow: 0 0 0 1px var(--fd-primary), 0 24px 50px -34px rgba(16, 24, 34, 0.35);
}

.ticket-summary {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr auto;
  align-items: center;
  gap: 18px 44px;
  margin-top: 40px;
  padding: 28px 36px;
  border-radius: 18px;
  background: var(--fd-night);
  color: var(--fd-text-night);
}

.sum-cell {
  display: flex;
  flex-direction: column;
}

.sum-cell span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sum-cell b {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--fd-on-night);
}

.sum-note {
  margin: 0;
  font-size: 14.5px;
}

/*======================
22. Mission Panels
========================*/
/* The base's full-width strip of four colour panels: ember in two tones with
   candle-light glyphs, an arch of light rising behind the glyph on hover. */
.panel-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.colour-panel {
  position: relative;
  overflow: hidden;
  padding: 70px 40px 64px;
  background: #B4502C;
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  transition: background 0.5s ease;
}

.colour-panel.is-light {
  background: #9A4224;
}

[data-theme="dark"] .colour-panel {
  background: #7A341C;
}

[data-theme="dark"] .colour-panel.is-light {
  background: #5E2816;
}

.colour-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: 66%;
  height: 120%;
  border: 1px solid rgba(240, 184, 141, 0.3);
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%) translateY(30%);
  opacity: 0;
  transition: transform 0.9s var(--fd-ease), opacity 0.6s ease;
}

.colour-panel:hover {
  background: #141B24;
}

.colour-panel:hover::after {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.colour-panel i {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 22px;
  font-size: 56px;
  line-height: 1;
  color: #F0B88D;
  transition: transform 0.6s var(--fd-ease);
}

.colour-panel i::before {
  margin: 0;
}

.colour-panel:hover i {
  transform: translateY(-6px) scale(1.06);
}

.colour-panel h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  font-size: 2rem;
  font-weight: 400;
  color: #FFFFFF;
}

.colour-panel p {
  position: relative;
  z-index: 1;
  max-width: 250px;
  margin: 0 auto 28px;
}

.colour-panel .fd-btn {
  position: relative;
  z-index: 1;
}

/*======================
23. Testimony Slider
========================*/
/* The base's centred testimony on a photograph under the night veil: a round
   portrait, a serif title, the words in italic, the sermon's media, arrows
   top right and a gold rule drawing under the slider. */
.fd-living .container {
  position: relative;
  z-index: 2;
}

.fd-living .fd-gl {
  z-index: -1;
}

.living-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 60px;
}

.living-head .section-title {
  margin-bottom: 0;
}

.living-slide {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.living-face {
  width: 112px;
  height: 112px;
  margin-bottom: 22px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px rgba(var(--fd-night-rgb), 1), 0 0 0 5px var(--fd-gold);
}

.living-slide h3 {
  margin-bottom: 16px;
  font-size: 2.1rem;
  font-weight: 400;
}

.living-slide p {
  margin-bottom: 20px;
  font-family: var(--fd-ff-heading);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(239, 241, 243, 0.86);
}

.living-name {
  display: block;
  margin-bottom: 26px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fd-gold);
}

.living-slide .fd-media-btns {
  justify-content: center;
}

.living-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 60px;
  background: linear-gradient(90deg, transparent, var(--fd-gold), transparent);
}

.living-rule.is-short {
  width: 220px;
  margin: 40px auto 0;
}

/*======================
24. Reading Plan
========================*/
/* Bible In A Year (Home 3): the 1,189 chapters shared over the year;
   today's passage, the progress through the Bible and the next three days.
   The hero carries the same reading on glass. */
.reading-photo {
  position: relative;
  margin-right: 50px;
}

.reading-photo .fd-frame {
  height: 560px;
  border-radius: var(--fd-arch);
  box-shadow: var(--fd-shadow);
}

.reading-day {
  position: absolute;
  right: -50px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--fd-primary);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 8px rgba(var(--fd-gold-rgb), 0.25), 0 24px 50px -24px rgba(var(--fd-primary-rgb), 0.9);
}

.reading-day b {
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
}

.reading-day > span {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reading-today {
  margin-bottom: 28px;
  padding: 28px 32px;
  border: 1px solid var(--fd-line);
  border-left: 3px solid var(--fd-gold);
  border-radius: 0 14px 14px 0;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow-soft);
}

.today-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.today-passage {
  margin: 0;
  font-family: var(--fd-ff-heading);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--fd-ink);
}

.reading-progress {
  margin-bottom: 30px;
}

.reading-progress .fd-progress {
  height: 8px;
}

.progress-figures {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 14.5px;
}

.progress-figures b {
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--fd-ink);
}

/* the hero's reading card */
.reading-card .gather-name {
  font-size: 2.2rem;
}

.reading-card .fd-progress {
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.reading-pct {
  margin: 0 0 18px;
  font-size: 13.5px;
}

.reading-pct b {
  color: #EFF1F3;
}

/*======================
25. Orthodox Sections
========================*/
/*---- 25.1 Video Banner ----*/
/* the centred welcome closes on a wide film of the painted dome */
.video-banner {
  height: 420px;
  margin-top: 70px;
  border-radius: 20px;
  box-shadow: var(--fd-shadow);
}

.video-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 27, 36, 0.1), rgba(20, 27, 36, 0.7));
  pointer-events: none;
}

.video-caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 30px;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 30px;
  background: rgba(20, 27, 36, 0.4);
  color: #EFF1F3;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/*---- 25.2 Pascha ----*/
/* the feast of feasts: the date, the Western comparison, the countdown to
   the Paschal midnight and the road of the moveable feasts */
.fd-pascha {
  overflow: hidden;
}

.fd-pascha .container {
  position: relative;
  z-index: 2;
}

.pascha-date {
  margin-bottom: 30px;
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--fd-gold);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, 0.04);
}

.pd-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.pd-day {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--fd-ff-heading);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--fd-on-night);
}

.pd-note {
  font-size: 14.5px;
}

.pascha-road {
  position: relative;
  padding: 10px 0 10px 4px;
}

.pascha-road::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 14px;
  width: 1px;
  background: linear-gradient(180deg, rgba(var(--fd-gold-rgb), 0.1), var(--fd-gold), rgba(var(--fd-gold-rgb), 0.1));
}

.pascha-road li {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 14px 18px 14px 0;
  border-radius: 12px;
}

.road-dot {
  width: 21px;
  height: 21px;
  border: 1px solid var(--fd-gold);
  border-radius: 50%;
  background: var(--fd-night);
}

.pascha-road b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--fd-on-night);
}

.pascha-road div span {
  font-size: 14px;
}

.pascha-road time {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-gold);
}

.pascha-road li.is-pascha {
  background: rgba(var(--fd-gold-rgb), 0.1);
}

.pascha-road li.is-pascha .road-dot {
  background: var(--fd-gold);
  box-shadow: 0 0 0 6px rgba(var(--fd-gold-rgb), 0.2), 0 0 24px rgba(var(--fd-gold-rgb), 0.8);
}

.pascha-road li.is-pascha b {
  color: #F0B88D;
}

.pascha-road li.is-past {
  opacity: 0.45;
}

/*---- 25.3 Gallery Wall ----*/
/* Home 4's scroll moment: five columns of icons and light drifting against
   each other at three speeds (scrubbed, no pin) */
.fd-gallery-wall {
  overflow: hidden;
  padding-bottom: 60px;
}

.wall-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 0 16px 80px;
}

.wall-col {
  display: grid;
  gap: 16px;
  align-content: start;
}

.wall-tile {
  position: relative;
  display: block;
  height: 300px;
  overflow: hidden;
  border-radius: 14px;
}

.wall-tile.is-tall {
  height: 616px;
  border-radius: 999px 999px 14px 14px;
}

.wall-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--fd-ease), filter 0.6s ease;
}

.wall-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20, 27, 36, 0.55));
  opacity: 0;
  transition: opacity 0.5s ease;
}

.wall-tile:hover img {
  transform: scale(1.07);
}

.wall-tile:hover::after {
  opacity: 1;
}

/*---- 25.4 Faces ----*/
.faces-wrap {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.fd-faces-slider {
  margin-bottom: 36px;
  padding: 16px 0;
}

.fd-faces-slider .swiper-slide {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.fd-faces-slider img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.55;
  transform: scale(0.82);
  transition: transform 0.5s var(--fd-ease), filter 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
}

.fd-faces-slider .swiper-slide-active img {
  filter: none;
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px var(--fd-bg), 0 0 0 5px var(--fd-gold);
}

.fd-faces-text {
  margin-bottom: 26px;
}

.fd-faces-text h3 {
  margin-bottom: 14px;
  font-size: 2rem;
  font-weight: 400;
}

.fd-faces-text p {
  margin: 0 auto 14px;
  max-width: 760px;
  font-family: var(--fd-ff-heading);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--fd-ink);
}

.faces-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.faces-wrap .fd-media-btns {
  justify-content: center;
}

.pastors-bar {
  margin-top: 40px;
}

/*======================
26. Ministry Sections
========================*/
/*---- 26.1 Pillars ----*/
/* the base's three columns: an arched glyph, the heading, a gold rule */
.pillar {
  height: 100%;
  padding: 40px 34px 36px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease;
}

.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--fd-shadow);
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 84px;
  margin-bottom: 26px;
  border-radius: 999px 999px 10px 10px;
  background: var(--fd-band);
  color: var(--fd-gold-text);
  font-size: 40px;
  transition: background 0.4s ease, color 0.4s ease;
}

.pillar-icon i::before {
  margin: 0;
}

.pillar:hover .pillar-icon {
  background: var(--fd-primary);
  color: #F0B88D;
}

.pillar h3 {
  margin-bottom: 14px;
  font-size: 1.8rem;
}

.pillar-rule {
  display: block;
  width: 46px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--fd-gold);
}

.pillar p {
  margin: 0;
}

.pillars-bar {
  margin-top: 40px;
}

/*---- 26.2 Ministry Track ----*/
/* Home 5's scroll moment: every ministry on one rail that glides sideways as
   the section passes (scrubbed by its own travel, no pin); on touch screens
   it is a swipeable row. */
.fd-ministry-track {
  overflow: hidden;
}

.track-viewport {
  padding: 10px 0 30px;
}

.track-rail {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 0 max(24px, calc((100vw - 1320px) / 2 + 12px));
}

.track-rail .ministry-card {
  width: 390px;
  flex: 0 0 390px;
}

.track-progress {
  position: relative;
  height: 2px;
  margin-top: 30px;
  background: var(--fd-line-strong);
}

.track-progress span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--fd-gold);
  transform: scaleX(var(--fd-track, 0));
  transform-origin: left;
}

/*---- 26.3 Counters ----*/
.fd-counters {
  overflow: hidden;
}

.fd-counters .container {
  position: relative;
  z-index: 2;
}

.counter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.counter-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  text-align: center;
}

.counter-row li + li {
  border-left: 1px solid var(--fd-line-night);
}

.counter-row i {
  margin-bottom: 18px;
  font-size: 46px;
  line-height: 1;
  color: var(--fd-gold);
}

.counter-row i::before {
  margin: 0;
}

.counter-row b {
  font-size: clamp(3rem, 2rem + 2.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--fd-on-night);
}

.counter-row span {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*---- 26.4 Ministry Finder ----*/
.fd-finder .container {
  position: relative;
  z-index: 2;
}

.finder-card {
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: var(--fd-surface);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.finder-card .fd-field > label {
  color: var(--fd-ink);
}

.finder-result {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 10px;
  padding: 24px;
  border-radius: 16px;
  background: var(--fd-night);
  color: var(--fd-text-night);
}

.result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 78px;
  flex: 0 0 70px;
  border-radius: 999px 999px 10px 10px;
  background: var(--fd-primary);
  color: #F0B88D;
  font-size: 36px;
}

.result-icon i::before {
  margin: 0;
}

.result-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.result-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.result-copy b {
  font-family: var(--fd-ff-heading);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--fd-on-night);
}

.result-copy span:last-child {
  font-size: 14.5px;
}

/* the hero's sermon card */
.audio-card .gather-when {
  font-size: 14.5px;
}

.audio-card .fd-player {
  height: 46px;
}

.audio-card .player-play {
  flex-basis: 46px;
}

.audio-card .player-skip {
  display: none;
}

/*======================
27. Inner Pages
========================*/
/*---- 27.1 Layout & Sidebar ----*/
.fd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 60px;
  align-items: start;
}

.fd-layout.is-left {
  grid-template-columns: 340px minmax(0, 1fr);
}

.layout-side {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 26px;
}

.side-widget {
  padding: 30px;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.side-title {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 14px;
  font-size: 1.45rem;
  border-bottom: 1px solid var(--fd-line);
}

.side-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: var(--fd-gold);
}

.side-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--fd-line-strong);
  border-radius: 40px;
  overflow: hidden;
  background: var(--fd-bg);
}

.side-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  font-family: var(--fd-ff-body);
  font-size: 15px;
  color: var(--fd-ink);
}

.side-search input:focus {
  outline: none;
}

.side-search button {
  width: 50px;
  height: 50px;
  border: 0;
  background: var(--fd-primary);
  color: #FFFFFF;
  cursor: pointer;
}

.side-recent li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
}

.side-recent li + li {
  margin-top: 18px;
}

.recent-thumb {
  height: 76px;
  border-radius: 999px 999px 8px 8px;
}

.side-recent time {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.side-recent div a {
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--fd-ink);
}

.side-recent div a:hover,
.side-cats a:hover,
.side-tags a:hover {
  color: var(--fd-primary);
}

.side-cats li + li {
  border-top: 1px solid var(--fd-line);
}

.side-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 15.5px;
  color: var(--fd-text);
  transition: color 0.3s ease, padding 0.35s var(--fd-ease);
}

.side-cats a:hover {
  padding-left: 6px;
}

.side-cats b {
  font-family: var(--fd-ff-heading);
  font-weight: 500;
  color: var(--fd-muted);
}

/* tags read as words, separated by slender rules */
.side-tags,
.tags-row .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.side-tags a,
.tags-row .tags a {
  position: relative;
  padding: 2px 12px 2px 0;
  margin-right: 12px;
  font-family: var(--fd-ff-heading);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--fd-text);
}

.side-tags a::after,
.tags-row .tags a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  margin-top: -7px;
  background: var(--fd-line-strong);
}

.side-tags a:last-child::after,
.tags-row .tags a:last-child::after {
  display: none;
}

.side-give {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--fd-night);
  color: var(--fd-text-night);
}

.side-give h3 {
  margin: 0 0 12px;
  font-size: 1.8rem;
  color: var(--fd-on-night);
}

.side-give::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fd-gold-rgb), 0.3), rgba(var(--fd-gold-rgb), 0) 70%);
  pointer-events: none;
}

/*---- 27.2 Toolbar & Pagination ----*/
.fd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  margin-bottom: 40px;
  padding: 16px 18px 16px 24px;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.toolbar-count {
  font-size: 15px;
  color: var(--fd-muted);
}

.toolbar-count b {
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.toolbar-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.toolbar-tools .fd-select.is-boxed {
  min-width: 190px;
}

.toolbar-tools .fd-select.is-boxed .select-button {
  height: 48px;
  border-radius: 30px;
  padding: 0 18px;
}

.tool-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--fd-line);
  border-radius: 30px;
  background: var(--fd-bg);
}

.tool-search i {
  color: var(--fd-gold-text);
}

.tool-search input {
  width: 180px;
  border: 0;
  background: transparent;
  font-family: var(--fd-ff-body);
  font-size: 15px;
  color: var(--fd-ink);
}

.tool-search input:focus {
  outline: none;
}

/* filter tabs: words with their counts, a gold line under the chosen one */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}

.filter-tabs button {
  position: relative;
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  color: var(--fd-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.filter-tabs button sup {
  margin-left: 3px;
  font-family: var(--fd-ff-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.filter-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--fd-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--fd-ease);
}

.filter-tabs button:hover,
.filter-tabs button.is-active {
  color: var(--fd-ink);
}

.filter-tabs button.is-active::after {
  transform: scaleX(1);
}

.filter-tabs button.is-empty {
  opacity: 0.4;
}

.fd-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
}

.fd-pagination a {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fd-line-strong);
  border-radius: 50%;
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  color: var(--fd-ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.fd-pagination a:hover,
.fd-pagination a.is-current {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: #FFFFFF;
}

.fd-pagination a.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.empty-state {
  padding: 50px 30px;
  border: 1px dashed var(--fd-line-strong);
  border-radius: 16px;
  text-align: center;
  color: var(--fd-muted);
}

.empty-state b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--fd-ff-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--fd-ink);
}

/*---- 27.3 Prose ----*/
/* articles: sermons, posts, ministries, events */
.block-title {
  margin-bottom: 24px;
  font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.2rem);
}

.prose {
  font-size: 1.06rem;
}

.prose h2 {
  margin: 40px 0 16px;
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem);
}

.prose h3 {
  margin: 32px 0 12px;
  font-size: 1.7rem;
}

.prose ul:not([class]) {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
  counter-reset: fd-li;
}

.prose ul:not([class]) li {
  display: flex;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fd-line);
  counter-increment: fd-li;
}

.prose ul:not([class]) li::before {
  content: counter(fd-li, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--fd-ff-heading);
  font-size: 0.95rem;
  color: var(--fd-gold-text);
}

.fd-callout {
  position: relative;
  margin: 34px 0;
  padding: 34px 40px 34px 44px;
  border-radius: 16px;
  background: var(--fd-band);
}

.fd-callout::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 16px;
  font-family: var(--fd-ff-heading);
  font-size: 90px;
  line-height: 1;
  color: var(--fd-gold);
}

.fd-callout p {
  margin: 0 0 10px;
  font-family: var(--fd-ff-heading);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--fd-ink);
}

.fd-callout cite {
  font-size: 14.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--fd-gold-text);
}

.article-photo {
  height: 460px;
  margin-bottom: 34px;
  border-radius: 18px;
}

.article-meta {
  margin-bottom: 20px;
}

.tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 40px 0;
  padding: 22px 0;
  border-top: 1px solid var(--fd-line);
  border-bottom: 1px solid var(--fd-line);
}

.tags-row > span {
  margin-right: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.tags-row .tags {
  display: inline-flex;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-box {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 40px;
  padding: 30px;
  border-radius: 18px;
  background: var(--fd-band);
}

.author-box img {
  width: 120px;
  height: 140px;
  border-radius: 999px 999px 12px 12px;
  object-fit: cover;
  object-position: center top;
}

.author-box h3 {
  margin-bottom: 4px;
  font-size: 1.6rem;
}

.author-box p {
  margin: 8px 0 14px;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 50px;
}

.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 26px;
  border: 1px solid var(--fd-line);
  border-radius: 14px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.post-nav a:hover {
  border-color: var(--fd-gold);
  background: var(--fd-surface);
}

.post-nav a > span {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.post-nav b {
  font-family: var(--fd-ff-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--fd-ink);
}

.post-nav a + a {
  text-align: right;
}

.post-nav a + a > span {
  align-self: flex-end;
}

/*---- 27.4 Comments ----*/
.comment-list > li + li {
  margin-top: 24px;
}

.comment-main {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--fd-line);
}

.comment-face {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 8px;
}

.comment-head b {
  font-family: var(--fd-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.comment-head span {
  font-size: 13.5px;
  color: var(--fd-muted);
}

.comment-body p {
  margin-bottom: 10px;
}

.comment-replies {
  padding-left: 84px;
}

.comment-form {
  margin-top: 50px;
}

/*---- 27.5 Info Cards & Maps ----*/
.info-card {
  height: 100%;
  padding: 36px 32px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease;
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fd-shadow);
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 999px 999px 10px 10px;
  background: var(--fd-band);
  color: var(--fd-gold-text);
  font-size: 24px;
  transition: background 0.4s ease, color 0.4s ease;
}

.info-card:hover .info-icon {
  background: var(--fd-primary);
  color: #F0B88D;
}

.info-card h3 {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.info-card p,
.info-card a {
  display: block;
  margin: 0;
  font-size: 15.5px;
}

.info-card a {
  color: var(--fd-ink);
  font-weight: 600;
}

.map-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-band);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
}

[data-theme="dark"] .map-frame iframe {
  filter: grayscale(0.5) invert(0.9) hue-rotate(180deg) contrast(0.9);
}

/*---- 27.6 Products ----*/
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  overflow: hidden;
  transition: transform 0.45s var(--fd-ease), box-shadow 0.45s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fd-shadow);
}

.product-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 270px;
  margin: 14px 14px 0;
  padding: 26px 20px 22px;
  border-radius: 999px 999px 12px 12px;
  background: radial-gradient(ellipse at 50% 85%, rgba(var(--fd-gold-rgb), 0.22), transparent 62%), var(--fd-band);
}

.product-photo img {
  height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(16, 24, 34, 0.25));
  transition: transform 0.7s var(--fd-ease);
}

.product-card:hover .product-photo img {
  transform: translateY(-6px) scale(1.04);
}

.product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--fd-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}

.product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 24px 22px;
}

.product-cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.product-body h3 {
  margin: 4px 0 16px;
  font-size: 1.4rem;
}

.product-body h3 a:hover {
  color: var(--fd-primary);
}

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.product-price b {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.product-price s {
  margin-left: 6px;
  font-size: 1rem;
  color: var(--fd-muted);
}

.product-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--fd-line-strong);
  border-radius: 30px;
  background: transparent;
  font-family: var(--fd-ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.product-add i {
  color: var(--fd-gold-text);
  transition: color 0.3s ease;
}

.product-add:hover,
.product-add.is-added {
  background: var(--fd-primary);
  border-color: var(--fd-primary);
  color: #FFFFFF;
}

.product-add:hover i,
.product-add.is-added i {
  color: #FFFFFF;
}

/*---- 27.7 Sermon Rows ----*/
.sermon-list {
  display: grid;
  gap: 18px;
}

.sermon-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: 26px;
  align-items: center;
  padding: 18px 24px 18px 18px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  transition: box-shadow 0.4s ease, transform 0.4s var(--fd-ease);
}

.sermon-row:hover {
  box-shadow: var(--fd-shadow);
  transform: translateY(-3px);
}

.sermon-thumb {
  height: 120px;
  border-radius: 999px 999px 10px 10px;
}

.sermon-series {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.sermon-row h3 {
  margin: 4px 0 10px;
  font-size: 1.55rem;
}

.sermon-row h3 a:hover {
  color: var(--fd-primary);
}

.sermon-len {
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  color: var(--fd-muted);
  white-space: nowrap;
}

.sermon-actions {
  display: flex;
  gap: 10px;
}

.sermon-play,
.sermon-watch {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--fd-primary);
  color: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.35s var(--fd-ease);
}

.sermon-watch {
  background: var(--fd-band);
  color: var(--fd-ink);
}

.sermon-play:hover,
.sermon-watch:hover {
  background: var(--fd-night);
  color: #FFFFFF;
  transform: scale(1.06);
}

.sermon-play.is-playing {
  background: var(--fd-gold);
  color: #141B24;
}

/*---- 27.8 Tables ----*/
.fd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.fd-table th {
  padding: 16px 22px;
  background: var(--fd-band);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.fd-table td {
  padding: 16px 22px;
  border-top: 1px solid var(--fd-line);
  color: var(--fd-text);
}

.fd-table td b {
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.table-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-person img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(47, 125, 79, 0.12);
  color: var(--fd-success);
  font-size: 12.5px;
  font-weight: 600;
}

/*======================
28. Account Pages
========================*/
/*---- 28.1 Login & Register ----*/
/* a two-part card: a warm photograph under the light rays with a verse and
   the next gathering, beside the form */
.auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 660px;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 20px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
}

.auth-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 46px;
  background: var(--fd-night);
  color: var(--fd-on-night);
}

.auth-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.auth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--fd-night-rgb), 0.66) 0%, rgba(var(--fd-night-rgb), 0.1) 36%, rgba(var(--fd-night-rgb), 0.92) 100%);
}

.auth-art .fd-gl {
  z-index: -1;
}

.auth-logo img {
  width: auto;
  height: 46px;
}

.auth-verse {
  max-width: 430px;
  margin: auto 0 0;
}

.auth-verse p {
  margin: 0 0 16px;
  font-family: var(--fd-ff-heading);
  font-size: clamp(1.55rem, 1.15rem + 1vw, 2.15rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--fd-on-night);
}

.auth-verse p::before {
  content: "\201C";
  display: block;
  height: 34px;
  font-size: 76px;
  font-style: normal;
  line-height: 1;
  color: var(--fd-gold);
}

.auth-verse cite {
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.auth-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--fd-line-night);
  font-size: 14px;
  color: var(--fd-text-night);
}

.auth-next b {
  font-weight: 600;
  color: var(--fd-on-night);
}

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 66px 56px;
}

.auth-card .title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 1.5rem + 1.3vw, 2.75rem);
}

.auth-lead {
  margin: 0 0 32px;
}

.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--fd-blush);
  color: var(--fd-primary);
  font-size: 22px;
}

.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px 0 28px;
}

.auth-card .fd-check {
  margin-bottom: 26px;
}

.auth-row .fd-check {
  margin: 0;
}

.auth-switch {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--fd-line);
  font-size: 15px;
  text-align: center;
}

.auth-switch a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  color: var(--fd-primary);
}

.auth-switch a:hover {
  color: var(--fd-primary-hover);
}

/* show / hide password and the strength meter */
.password-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fd-muted);
  transition: background 0.3s ease, color 0.3s ease;
}

.password-toggle:hover,
.password-toggle[aria-pressed="true"] {
  background: var(--fd-blush);
  color: var(--fd-primary);
}

.strength {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.strength > span {
  flex: 1 1 0;
  height: 4px;
  border-radius: 4px;
  background: var(--fd-line);
  transition: background 0.3s ease;
}

.strength b {
  flex: 0 0 150px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--fd-muted);
}

.strength[data-level="1"] > span:nth-child(-n+1) {
  background: var(--fd-danger);
}

.strength[data-level="2"] > span:nth-child(-n+2) {
  background: var(--fd-gold);
}

.strength[data-level="3"] > span:nth-child(-n+3),
.strength[data-level="4"] > span {
  background: var(--fd-success);
}

.match-note {
  min-height: 1em;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.match-note.is-ok {
  color: var(--fd-success);
}

.match-note.is-bad {
  color: var(--fd-danger);
}







/*---- 28.2 My Account ----*/
.account-card {
  text-align: center;
}

.account-card img {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--fd-surface), 0 0 0 5px var(--fd-gold);
}

.account-card b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.account-card span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.account-nav {
  padding: 10px;
}

.account-nav button,
.account-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-weight: 600;
  text-align: left;
  color: var(--fd-ink);
  transition: background 0.3s ease, color 0.3s ease;
}

.account-nav i {
  width: 18px;
  text-align: center;
  color: var(--fd-primary);
  transition: color 0.3s ease;
}

.account-nav button:hover,
.account-nav a:hover {
  background: var(--fd-band);
}

.account-nav button.is-active {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

.account-nav button.is-active i {
  color: #F0B88D;
}

.account-nav a {
  margin-top: 6px;
  color: var(--fd-muted);
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.account-stats > div {
  padding: 26px 26px 24px;
  border-radius: 16px;
  background: var(--fd-band);
}

.account-stats span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.account-stats b {
  font-family: var(--fd-ff-heading);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--fd-primary);
}

.form-card {
  padding: 40px;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.form-card + .form-card {
  margin-top: 28px;
}



/*---- 28.3 Tiles Tabs ----*/
/* conference days, product information: a row of tonal tiles, the chosen
   one in ember */
.day-tab-list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  margin-bottom: 36px;
}

.day-tab-list button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--fd-band);
  font-weight: 600;
  text-align: left;
  color: var(--fd-ink);
  transition: background 0.3s ease, color 0.3s ease;
}

.day-tab-list button b {
  font-family: var(--fd-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--fd-ink);
  transition: color 0.3s ease;
}

.day-tab-list button span {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fd-text);
  transition: color 0.3s ease;
}

.day-tab-list button:hover {
  background: var(--fd-blush);
}

.day-tab-list button.is-active {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

.day-tab-list button.is-active b {
  color: #FFFFFF;
}

.day-tab-list button.is-active span {
  color: rgba(255, 255, 255, 0.82);
}

/*======================
29. Giving & Membership
========================*/
/*---- 29.1 Giving Form ----*/
/* numbered steps on the left, the summary on a night card that stays in view */
.giving {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 56px;
  align-items: start;
}

.giving-main > .title {
  margin: 0 0 14px;
}

.giving-main > p {
  margin-bottom: 38px;
}

.giving-step {
  min-width: 0;
  margin: 0 0 24px;
  padding: 34px 38px 30px;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-surface);
}

.giving-step legend {
  float: left;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--fd-ff-heading);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fd-ink);
}

.giving-step legend + * {
  clear: both;
}

.giving-step legend span {
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fd-blush);
  font-family: var(--fd-ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fd-primary);
}

.giving-amounts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.giving-amounts span {
  width: 100%;
  min-width: 0;
  height: 66px;
  font-size: 1.4rem;
  font-weight: 500;
}

.giving-custom {
  margin: 18px 0 0;
}

.giving-freq {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.giving-freq span,
.giving-pay span {
  width: 100%;
}

.giving-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.giving-step .fd-check.is-boxed {
  margin: 0;
}

.giving-step .fd-segment + .fd-field {
  margin-top: 24px;
}

.step-note {
  margin: -6px 0 22px;
  font-size: 15px;
}

/*---- 29.2 Summary Card ----*/
.giving-summary {
  position: sticky;
  top: 110px;
}

.summary-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 36px 32px;
  border-radius: 20px;
  background: var(--fd-night);
  color: var(--fd-text-night);
  box-shadow: var(--fd-shadow);
}

.summary-card .fd-gl {
  z-index: -1;
}

.summary-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fd-gold-rgb), 0.28), rgba(var(--fd-gold-rgb), 0) 70%);
  pointer-events: none;
}

.sum-amount {
  display: block;
  margin: 16px 0 6px;
  font-size: clamp(3rem, 2.3rem + 1.8vw, 4.3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--fd-on-night);
}

.sum-freq {
  display: block;
  margin-bottom: 26px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.sum-rows li {
  border-color: var(--fd-line-night);
}

.sum-rows span {
  color: var(--fd-text-night);
}

.sum-rows b {
  color: var(--fd-on-night);
}

.sum-impact {
  margin: 22px 0 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--fd-gold);
  background: rgba(var(--fd-gold-rgb), 0.12);
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--fd-on-night);
}

.summary-card .sum-rows + .fd-btn {
  margin-top: 26px;
}

.summary-card .form-status {
  color: var(--fd-on-night);
}

.sum-safe {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--fd-text-night);
}

.sum-safe i {
  color: var(--fd-gold);
}

/* the household list on the membership summary */
.ms-people {
  margin: 0 0 22px;
}

.ms-people li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--fd-line-night);
  font-size: 14.5px;
}

.ms-people span {
  font-weight: 600;
  color: var(--fd-on-night);
}

.ms-people b {
  font-weight: 500;
  text-align: right;
  color: var(--fd-gold);
}







/*---- 29.3 Household & Serving ----*/
.household {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.hh-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
  padding: 22px 60px 4px 22px;
  border-radius: 14px;
  background: var(--fd-band);
}

.hh-row .fd-field {
  margin-bottom: 14px;
}

.hh-group {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fd-primary);
}

.hh-remove {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--fd-surface);
  color: var(--fd-muted);
  transition: background 0.3s ease, color 0.3s ease;
}

.hh-remove:hover {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.serve-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.serve-option input {
  position: absolute;
  opacity: 0;
}

.serve-option > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 22px 20px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--fd-band);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.serve-option > span::after {
  content: "\f00c";
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fd-primary);
  font-family: "Font Awesome 6 Free";
  font-size: 11px;
  font-weight: 900;
  color: var(--fd-on-primary);
  transform: scale(0);
  transition: transform 0.35s var(--fd-ease);
}

.serve-option i {
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 1;
  color: var(--fd-primary);
}

.serve-option b {
  font-family: var(--fd-ff-heading);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.serve-option small {
  font-size: 13px;
  color: var(--fd-muted);
}

.serve-option:hover > span {
  background: var(--fd-blush);
}

.serve-option input:checked + span {
  border-color: var(--fd-primary);
  background: var(--fd-blush);
}

.serve-option input:checked + span::after {
  transform: scale(1);
}

.serve-option input:focus-visible + span {
  outline: 2px solid var(--fd-gold);
  outline-offset: 2px;
}





/*---- 29.4 Causes Pages ----*/
.causes-totals .counter-row li + li {
  border-color: var(--fd-line-strong);
}

.causes-totals .counter-row b {
  font-size: clamp(2.4rem, 1.7rem + 1.7vw, 3.5rem);
  color: var(--fd-primary);
}

.causes-totals .counter-row span {
  color: var(--fd-text);
}



.title-row .cause-sort {
  min-width: 240px;
}

.cause-gallery {
  position: relative;
  margin-bottom: 40px;
}

.cause-gallery .swiper {
  width: 100%;
  margin: 0;
}

.cause-gallery .article-photo {
  margin: 0;
}

.gallery-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.rail-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.rail-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: var(--fd-line-strong);
  opacity: 1;
  transition: background 0.3s ease, width 0.4s var(--fd-ease);
}

.rail-dots .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 5px;
  background: var(--fd-primary);
}

.donors-table {
  margin-top: 6px;
}

.appeal-card {
  border-top: 3px solid var(--fd-primary);
}

.appeal-count {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 24px;
}

.appeal-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 4px 12px;
  border-radius: 12px;
  background: var(--fd-band);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.appeal-count b {
  font-family: var(--fd-ff-heading);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--fd-ink);
}

.appeal-figs {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 8px;
}

.appeal-figs > div + div {
  text-align: right;
}

.appeal-figs span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.appeal-figs b {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.appeal-pct {
  margin: 0 0 22px;
  font-size: 14px;
}

.appeal-pct b {
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  color: var(--fd-primary);
}

.appeal-card .fd-btn + .fd-btn {
  margin-top: 10px;
}

.side-causes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cause-pick.is-light {
  margin: 0;
  padding: 10px;
  color: var(--fd-muted);
}

.cause-pick.is-light .pick-thumb {
  flex-basis: 64px;
  width: 64px;
  height: 70px;
}

.cause-pick.is-light .pick-body b {
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--fd-ink);
  transition: color 0.3s ease;
}

.cause-pick.is-light:hover {
  background: var(--fd-band);
}

.cause-pick.is-light:hover .pick-body b {
  color: var(--fd-primary);
}

/*======================
30. Events Pages
========================*/
/*---- 30.1 Event Details ----*/
.event-hero {
  position: relative;
  margin-bottom: 40px;
}

.event-hero .article-photo {
  margin: 0;
}

.event-hero-count {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 10px;
  border-radius: 999px 999px 18px 18px;
  background: var(--fd-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--fd-shadow-soft);
}

.event-hero-count > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-text);
}

.event-hero-count > span b {
  font-family: var(--fd-ff-heading);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--fd-ink);
}

.prose .day-plan {
  margin: 0 0 34px;
}

.day-plan li {
  justify-content: flex-start;
  gap: 30px;
}

.day-plan span {
  flex: 0 0 96px;
  font-family: var(--fd-ff-heading);
  font-weight: 500;
  color: var(--fd-primary);
}

.day-plan b {
  text-align: left;
}

.speaker-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 40px;
}

.speaker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--fd-band);
}

.speaker img {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}

.speaker span {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fd-muted);
}

.speaker b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.event-map {
  margin: 0 0 50px;
}

.info-rows {
  margin-bottom: 24px;
}

.cal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.side-events li + li {
  border-top: 1px solid var(--fd-line);
}

.side-events a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.side-events li:first-child a {
  padding-top: 0;
}

.fd-date.is-mini {
  flex: 0 0 56px;
  width: 56px;
  height: 64px;
}

.fd-date.is-mini b {
  margin-top: 4px;
  font-size: 24px;
}

.fd-date.is-mini span {
  margin-top: 3px;
  font-size: 10px;
}

.side-event-body b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fd-ink);
  transition: color 0.3s ease;
}

.side-event-body small {
  font-size: 13px;
  color: var(--fd-muted);
}

.side-events a:hover b {
  color: var(--fd-primary);
}





/*---- 30.2 Events List & Calendar ----*/
.view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--fd-band);
}

.view-switch button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-text);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.view-switch button.is-active {
  background: var(--fd-surface);
  color: var(--fd-primary);
  box-shadow: var(--fd-shadow-soft);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.cal-title {
  margin: 0;
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.5rem);
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  background: var(--fd-line);
}

.cal-dow {
  padding: 13px 14px;
  background: var(--fd-band);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-muted);
}

.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  min-height: 122px;
  padding: 12px 12px 14px;
  border: 0;
  background: var(--fd-surface);
  text-align: left;
  color: var(--fd-ink);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.cal-cell.is-blank {
  background: var(--fd-bg);
}

.cal-cell b {
  font-family: var(--fd-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.cal-cell.is-past {
  color: var(--fd-muted);
}

button.cal-cell:hover {
  background: var(--fd-band);
}

.cal-cell.is-today b {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--fd-gold);
  color: #141B24;
}

.cal-cell.is-picked {
  background: var(--fd-blush);
  box-shadow: inset 0 0 0 2px var(--fd-primary);
}

.cal-tag {
  display: block;
  overflow: hidden;
  padding: 5px 8px;
  border-left: 2px solid var(--fd-primary);
  background: rgba(var(--fd-primary-rgb), 0.09);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fd-primary);
}

.cal-tag.is-prayer,
.cal-tag.is-family {
  border-color: var(--fd-gold);
  background: rgba(var(--fd-gold-rgb), 0.14);
  color: var(--fd-gold-text);
}

.cal-tag.is-outreach {
  border-color: var(--fd-success);
  background: rgba(47, 125, 79, 0.1);
  color: var(--fd-success);
}

.cal-cell.is-past .cal-tag {
  opacity: 0.55;
}

.cal-day {
  margin-top: 28px;
  padding: 30px 34px;
  border-radius: 16px;
  background: var(--fd-band);
}

.cal-day-title {
  margin: 0 0 16px;
  font-size: 1.5rem;
}

.cal-none {
  margin: 0;
  color: var(--fd-muted);
}

.cal-event {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--fd-line-strong);
  color: var(--fd-ink);
}

.cal-event-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-primary);
}

.cal-event b {
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.cal-event-place {
  font-size: 14px;
  color: var(--fd-text);
}

.cal-event-place i {
  margin-right: 8px;
  color: var(--fd-gold-text);
}

.cal-event:hover b {
  color: var(--fd-primary);
}





/*---- 30.3 Conference ----*/
.conf-photo {
  position: relative;
  padding-bottom: 46px;
}

.conf-photo .fd-frame {
  display: block;
  aspect-ratio: 5 / 6;
}

.conf-count {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fd-night);
  box-shadow: var(--fd-shadow);
  transform: translateX(-50%);
}

.conf-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 108px;
  padding: 20px 14px 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-text-night);
}

.conf-count span + span {
  border-left: 1px solid var(--fd-line-night);
}

.conf-count b {
  margin-bottom: 6px;
  font-family: var(--fd-ff-heading);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fd-gold);
}

.conf-topics-title {
  margin: 34px 0 10px;
  font-size: 1.4rem;
}

.topic-rows span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.speaker-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 26px;
}

.speaker-wall figure {
  margin: 0;
  text-align: center;
}

.speaker-wall .fd-frame {
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
}

.speaker-wall figcaption {
  font-size: 14px;
  color: var(--fd-muted);
}

.speaker-wall figcaption b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.day-theme {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 14px;
}

.day-theme span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.day-theme b {
  font-family: var(--fd-ff-heading);
  font-size: 1.7rem;
  font-weight: 400;
  font-style: italic;
  color: var(--fd-ink);
}

.session {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 250px;
  align-items: center;
  gap: 30px;
  padding: 28px 0;
  border-top: 1px solid var(--fd-line);
}

.session:last-child {
  border-bottom: 1px solid var(--fd-line);
}

.session-time {
  font-size: 14px;
  color: var(--fd-muted);
}

.session-time b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fd-primary);
}

.session-kind {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.session-body h3 {
  margin: 0 0 6px;
  font-size: 1.45rem;
}

.session-body p {
  margin: 0;
  font-size: 15px;
}

.session-speaker {
  display: flex;
  align-items: center;
  gap: 14px;
}

.session-speaker img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.session-speaker span {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fd-muted);
}

.session-speaker b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--fd-ink);
}







/*---- 30.4 Schedule Board ----*/
/* four days by the hour: a half-hour grid, each session spans its own times */
.schedule-board {
  overflow-x: auto;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
}

.schedule-board > * {
  min-width: 1100px;
}

.board-times {
  display: grid;
  grid-template-columns: 170px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--fd-line);
}

.board-times::before {
  content: "";
}

.board-times span {
  padding: 16px 12px;
  border-left: 1px solid var(--fd-line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fd-muted);
}

.board-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border-bottom: 1px solid var(--fd-line);
}

.board-row:last-child {
  border-bottom: 0;
}

.board-day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 22px;
  background: var(--fd-band);
}

.board-day b {
  font-family: var(--fd-ff-heading);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--fd-ink);
}

.board-day span {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-primary);
}

.board-day small {
  font-size: 13px;
  color: var(--fd-muted);
}

.board-track {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  padding: 14px 0;
  background-image: linear-gradient(90deg, var(--fd-line) 1px, transparent 1px);
  background-size: calc(100% / 7) 100%;
}

.board-slot {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0 5px;
  padding: 14px 14px 12px;
  border-left: 3px solid var(--fd-primary);
  border-radius: 4px 12px 12px 4px;
  background: var(--fd-blush);
  color: var(--fd-ink);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s var(--fd-ease);
}

.board-slot:hover {
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow-soft);
  transform: translateY(-2px);
}

.slot-time {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fd-primary);
}

.board-slot b {
  font-family: var(--fd-ff-heading);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.25;
}

.slot-who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--fd-text);
}

.slot-who img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.board-slot.is-from-1 { grid-column-start: 1; }
.board-slot.is-from-2 { grid-column-start: 2; }
.board-slot.is-from-3 { grid-column-start: 3; }
.board-slot.is-from-4 { grid-column-start: 4; }
.board-slot.is-from-5 { grid-column-start: 5; }
.board-slot.is-from-6 { grid-column-start: 6; }
.board-slot.is-from-7 { grid-column-start: 7; }
.board-slot.is-from-8 { grid-column-start: 8; }
.board-slot.is-from-9 { grid-column-start: 9; }
.board-slot.is-from-10 { grid-column-start: 10; }
.board-slot.is-from-11 { grid-column-start: 11; }
.board-slot.is-from-12 { grid-column-start: 12; }
.board-slot.is-from-13 { grid-column-start: 13; }
.board-slot.is-from-14 { grid-column-start: 14; }
.board-slot.is-to-2 { grid-column-end: 2; }
.board-slot.is-to-3 { grid-column-end: 3; }
.board-slot.is-to-4 { grid-column-end: 4; }
.board-slot.is-to-5 { grid-column-end: 5; }
.board-slot.is-to-6 { grid-column-end: 6; }
.board-slot.is-to-7 { grid-column-end: 7; }
.board-slot.is-to-8 { grid-column-end: 8; }
.board-slot.is-to-9 { grid-column-end: 9; }
.board-slot.is-to-10 { grid-column-end: 10; }
.board-slot.is-to-11 { grid-column-end: 11; }
.board-slot.is-to-12 { grid-column-end: 12; }
.board-slot.is-to-13 { grid-column-end: 13; }
.board-slot.is-to-14 { grid-column-end: 14; }
.board-slot.is-to-15 { grid-column-end: 15; }

/*======================
31. Community Pages
========================*/
/*---- 31.1 Prayer Wall ----*/
.prayer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.prayer-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 24px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  transition: box-shadow 0.4s ease, transform 0.45s var(--fd-ease), border-color 0.4s ease;
}

.prayer-card:hover {
  box-shadow: var(--fd-shadow-soft);
  transform: translateY(-4px);
}

.prayer-card.is-new {
  border-color: var(--fd-gold);
}

.prayer-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.prayer-face {
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fd-night);
  font-family: var(--fd-ff-heading);
  font-size: 1.05rem;
  color: var(--fd-gold);
}

.prayer-who {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--fd-muted);
}

.prayer-who b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fd-ink);
}

.prayer-cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.prayer-card p {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--fd-ff-heading);
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--fd-ink);
}

.pray-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--fd-band);
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-ink);
  transition: background 0.3s ease, color 0.3s ease;
}

.pray-btn i {
  color: var(--fd-primary);
  transition: color 0.3s ease;
}

.pray-btn b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--fd-surface);
  font-size: 13px;
  transition: background 0.3s ease;
}

.pray-btn:hover {
  background: var(--fd-blush);
}

.pray-btn.is-prayed {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

.pray-btn.is-prayed i {
  color: #F0B88D;
}

.pray-btn.is-prayed b {
  background: rgba(255, 255, 255, 0.18);
}

.prayer-form .fd-check {
  margin-bottom: 22px;
}

.prayer-form .field-note {
  text-align: right;
}



/*---- 31.2 Locations ----*/
.locations-grid {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.campus-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campus-card {
  position: relative;
}

.campus-pick {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 72px 14px 14px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  text-align: left;
  color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.campus-pick:hover {
  box-shadow: var(--fd-shadow-soft);
}

.campus-card.is-current .campus-pick {
  border-color: var(--fd-primary);
  box-shadow: var(--fd-shadow-soft);
}

.campus-photo {
  flex: 0 0 104px;
  width: 104px;
  height: 118px;
  border-radius: var(--fd-arch);
}

.campus-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.campus-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-gold-text);
}

.campus-name {
  font-family: var(--fd-ff-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.campus-addr {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fd-text);
}

.campus-call {
  position: absolute;
  top: 50%;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fd-band);
  color: var(--fd-primary);
  transform: translateY(-50%);
  transition: background 0.3s ease, color 0.3s ease;
}

.campus-call:hover {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

/* open / closed, worked out from the visitor's clock */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-muted);
}

.open-status::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fd-muted);
}

.open-status.is-open {
  color: var(--fd-success);
}

.open-status.is-open::before {
  background: var(--fd-success);
  box-shadow: 0 0 0 4px rgba(47, 125, 79, 0.16);
}

.open-status.is-closed {
  color: var(--fd-text);
}

.open-status.is-closed::before {
  background: var(--fd-danger);
}

.campus-map {
  position: sticky;
  top: 110px;
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 20px;
  background: var(--fd-surface);
}

.campus-map .map-frame {
  border: 0;
  border-radius: 0;
}

.campus-detail {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 30px;
  padding: 30px 32px;
}

.campus-detail h3 {
  margin: 8px 0 0;
  font-size: 1.7rem;
}

.campus-hours li {
  padding: 9px 0;
}

.campus-hours b {
  font-size: 1rem;
}

.campus-hours li.is-today span,
.campus-hours li.is-today b {
  font-weight: 600;
  color: var(--fd-primary);
}







/*---- 31.3 Contact ----*/
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.contact-cards .info-card p + p,
.contact-cards .info-card p + .fd-link {
  margin-top: 8px;
}

.contact-cards .info-card .fd-link {
  display: inline-flex;
  margin-top: 14px;
}

.contact-cards .info-card b {
  font-weight: 600;
  color: var(--fd-ink);
}

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--fd-line);
  border-radius: 22px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
}

.contact-form-card {
  padding: 56px 56px 50px;
}

.contact-form-card .title {
  margin: 0 0 30px;
  font-size: clamp(2rem, 1.5rem + 1.3vw, 2.8rem);
}

.contact-map {
  position: relative;
  display: flex;
  flex-direction: column;
}

.contact-map .map-frame {
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.contact-map .map-frame iframe {
  min-height: 520px;
}

.contact-social {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 10px;
  border-radius: 999px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow-soft);
}







/*---- 31.4 FAQ ----*/
.faq-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px 13px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-weight: 600;
  text-align: left;
  color: var(--fd-ink);
  transition: background 0.3s ease, color 0.3s ease;
}

.faq-cats b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  border-radius: 999px;
  background: var(--fd-band);
  font-size: 12.5px;
  color: var(--fd-text);
  transition: background 0.3s ease, color 0.3s ease;
}

.faq-cats button:hover {
  background: var(--fd-band);
}

.faq-cats button.is-active {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

.faq-cats button.is-active b {
  background: rgba(255, 255, 255, 0.18);
  color: var(--fd-on-primary);
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 30px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fd-band);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.faq-search i {
  color: var(--fd-primary);
}

.faq-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--fd-ink);
}

.faq-search:focus-within {
  border-color: var(--fd-primary);
  background: var(--fd-surface);
}

.faq-shown {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--fd-muted);
}

.faq-shown b {
  color: var(--fd-ink);
}

/* the "talk to us" strip */
.join-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 40px 44px;
  border-radius: 22px;
  background: var(--fd-surface);
  box-shadow: var(--fd-shadow-soft);
}

.join-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 92px;
  border-radius: var(--fd-arch);
  background: var(--fd-night);
  font-size: 34px;
  color: var(--fd-gold);
}

.join-strip h2 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.15rem);
}

.join-strip p {
  margin: 0;
}

.faq-ask {
  margin-top: 50px;
  background: var(--fd-band);
  box-shadow: none;
}





/*---- 31.5 History ----*/
.filter-tabs.is-centre {
  justify-content: center;
  margin: 0 auto 60px;
}

.timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 60px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, var(--fd-gold), var(--fd-line-strong));
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 36px;
}

.tl-year {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 104px;
  border: 1px solid rgba(var(--fd-gold-rgb), 0.6);
  border-radius: var(--fd-arch);
  background: var(--fd-bg);
  font-size: 1.55rem;
  color: var(--fd-primary);
}

.tl-card {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
  transition: box-shadow 0.4s ease, transform 0.45s var(--fd-ease);
}

.tl-item:nth-child(even) .tl-card {
  grid-column: 3;
}

.tl-card:hover {
  box-shadow: var(--fd-shadow-soft);
  transform: translateY(-4px);
}

.tl-photo {
  flex: 0 0 116px;
  width: 116px;
  height: 136px;
}

.tl-card h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.tl-card p {
  margin: 0;
  font-size: 15px;
}





/*---- 31.6 Gallery ----*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 260px;
  gap: 16px;
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fd-band);
}

.gallery-tile.is-tall {
  grid-row: span 2;
  border-radius: var(--fd-arch);
}

.gallery-tile.is-wide {
  grid-column: span 2;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--fd-ease);
}

.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--fd-night-rgb), 0) 50%, rgba(var(--fd-night-rgb), 0.78));
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-tile span {
  position: absolute;
  z-index: 1;
  left: 22px;
  bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s var(--fd-ease);
}

.gallery-tile:hover img {
  transform: scale(1.06);
}

.gallery-tile:hover::after,
.gallery-tile:hover span {
  opacity: 1;
}

.gallery-tile:hover span {
  transform: translateY(0);
}





/*---- 31.7 Ministries ----*/
.ministry-more {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
  min-height: 420px;
  padding: 40px 36px;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(circle at 85% 8%, rgba(var(--fd-gold-rgb), 0.3), rgba(var(--fd-gold-rgb), 0) 55%), var(--fd-night);
  color: var(--fd-text-night);
}

.ministry-more b {
  font-family: var(--fd-ff-heading);
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--fd-on-night);
}

.ministry-more b .fd-accent {
  color: var(--fd-gold);
}

.ministry-more > i {
  position: absolute;
  top: 36px;
  left: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--fd-gold);
  color: #141B24;
  transition: transform 0.45s var(--fd-ease);
}

.ministry-more:hover > i {
  transform: rotate(-45deg);
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 34px 0 40px;
}

.detail-gallery .fd-frame {
  display: block;
  aspect-ratio: 3 / 4;
}

.meet-card h3 .fd-accent {
  color: var(--fd-gold);
}

.meet-card .fd-rows {
  margin: 8px 0 26px;
}

.meet-card .fd-rows li {
  border-color: var(--fd-line-night);
}

.meet-card .fd-rows span {
  color: var(--fd-text-night);
}

.meet-card .fd-rows b {
  color: var(--fd-on-night);
}



/*---- 31.8 Pastor Profile ----*/
.profile-portrait {
  position: relative;
  max-width: 470px;
}

.profile-portrait .fd-frame {
  display: block;
  aspect-ratio: 4 / 5;
}

.profile-seal {
  position: absolute;
  right: -14px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: var(--fd-night);
  text-align: center;
  box-shadow: 0 0 0 8px var(--fd-bg), var(--fd-shadow);
}

.profile-seal b {
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--fd-gold);
}

.profile-seal small {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-on-night);
}

.profile-rows {
  margin: 28px 0 30px;
}

.profile-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.profile-foot .pastor-social {
  margin: 0;
}

/* previous pastors: portraits as tabs, the chosen story beside them */
.fd-previous {
  overflow: hidden;
  isolation: isolate;
}

.fd-previous .container {
  position: relative;
  z-index: 1;
}

.prev-tabs {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

.prev-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prev-list button {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--fd-line-night);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  color: var(--fd-text-night);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.prev-list img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.prev-list span {
  font-size: 13.5px;
}

.prev-list b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--fd-on-night);
}

.prev-list button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.prev-list button.is-active {
  border-color: var(--fd-gold);
  background: rgba(var(--fd-gold-rgb), 0.14);
}

.prev-panel {
  padding: 50px 54px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.prev-years {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold);
}

.prev-panel h3 {
  margin: 10px 0 16px;
  font-size: clamp(2rem, 1.6rem + 1vw, 2.7rem);
}

.prev-panel p {
  margin: 0;
  font-family: var(--fd-ff-heading);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--fd-on-night);
}

/*======================
32. Shop & Library
========================*/
/*---- 32.1 Shop Toolbar ----*/
.shop-toolbar {
  flex-wrap: wrap;
}

.price-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 20px;
  min-height: 50px;
  border-radius: 999px;
  background: var(--fd-band);
  font-size: 14px;
  color: var(--fd-text);
  cursor: pointer;
}

.price-cap b {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.price-cap input {
  width: 130px;
  accent-color: var(--fd-primary);
}

.product-grid.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-card.is-capped {
  display: none;
}

.head-bag.is-bump .bag-count {
  animation: fd-bump 0.5s var(--fd-ease);
}

.bag-count.is-empty {
  opacity: 0;
  transform: scale(0.6);
}

@keyframes fd-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* a quiet note when something lands in the bag */
.fd-toast {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 12px 12px 20px;
  border-radius: 999px;
  background: var(--fd-night);
  font-size: 14.5px;
  color: var(--fd-on-night);
  box-shadow: var(--fd-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s ease, transform 0.5s var(--fd-ease), visibility 0.4s;
}

.fd-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.fd-toast i {
  color: var(--fd-gold);
}

.fd-toast a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--fd-gold);
  font-size: 13px;
  font-weight: 700;
  color: #141B24;
}





/*---- 32.2 Product Details ----*/
.product-gallery {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
}

.pg-main {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  border-radius: 999px 999px 20px 20px;
  background: var(--fd-band);
}

.pg-main a {
  display: block;
  aspect-ratio: 1 / 1.1;
}

.pg-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
}

.pg-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-thumbs button {
  overflow: hidden;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--fd-band);
  transition: border-color 0.3s ease;
}

.pg-thumbs button.is-active,
.pg-thumbs button:hover {
  border-color: var(--fd-primary);
}

.pg-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.buy-box .product-cat {
  display: inline-block;
  margin-bottom: 10px;
}

.buy-box .title {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem);
}

.buy-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--fd-text);
}

.stars {
  display: inline-flex;
  gap: 3px;
  font-size: 13px;
  color: var(--fd-gold);
}

.buy-price {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 20px;
}

.buy-price b {
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--fd-primary);
}

.stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fd-success);
}

.stock i {
  font-size: 8px;
}

.buy-box .fd-rows {
  margin: 26px 0 30px;
}

.buy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.buy-total {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--fd-text);
}

.buy-total b {
  margin-left: 8px;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.product-tabs {
  margin: 80px 0 100px;
}

.product-tabs .day-tab-list {
  max-width: 640px;
}

.product-tabs .tab-panel {
  max-width: 860px;
}

.review {
  display: flex;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--fd-line);
}

.review img {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.review b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--fd-ink);
}

.review p {
  margin: 8px 0 0;
}

.related-head {
  margin-bottom: 40px;
}





/*---- 32.3 Cart & Checkout ----*/
.cart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.cart-head .title {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto 110px 40px;
  align-items: center;
  gap: 22px;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--fd-line);
  border-radius: 18px;
  background: var(--fd-surface);
}

.cart-photo {
  display: block;
  overflow: hidden;
  height: 100px;
  border-radius: 999px 999px 12px 12px;
  background: var(--fd-band);
}

.cart-photo img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
}

.cart-name b {
  display: block;
  font-family: var(--fd-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fd-ink);
}

.cart-name span {
  font-size: 13.5px;
  color: var(--fd-muted);
}

.cart-sum {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: right;
  color: var(--fd-ink);
}

.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--fd-band);
  color: var(--fd-muted);
  transition: background 0.3s ease, color 0.3s ease;
}

.cart-remove:hover {
  background: var(--fd-primary);
  color: var(--fd-on-primary);
}

.empty-actions {
  margin-top: 22px;
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--fd-band);
}

.coupon i {
  color: var(--fd-primary);
}

.coupon input {
  flex: 1 1 160px;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--fd-ink);
}

.coupon .form-status {
  flex: 1 1 100%;
  margin: 0 0 6px;
  padding-left: 30px;
}

.coupon .form-status:empty {
  display: none;
}

.order-card .fd-rows {
  margin-bottom: 22px;
}

.fd-rows li.is-total {
  padding-top: 18px;
}

.fd-rows li.is-total span {
  font-weight: 600;
  color: var(--fd-ink);
}

.fd-rows li.is-total b {
  font-size: 1.7rem;
  color: var(--fd-primary);
}

.free-ship {
  margin-bottom: 24px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--fd-band);
}

.free-ship p {
  margin: 10px 0 0;
  font-size: 13.5px;
}

.order-card .fd-btn.is-bar + .fd-link {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.order-lines {
  margin-bottom: 18px;
}

.order-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--fd-line-strong);
  font-size: 14.5px;
}

.order-lines li span {
  color: var(--fd-ink);
}

.order-lines small {
  color: var(--fd-muted);
}

.order-lines li.is-empty a {
  font-weight: 600;
  color: var(--fd-primary);
}

.order-card .fd-check {
  margin-bottom: 20px;
}



/*---- 32.4 Blog ----*/
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 44px;
}

.article-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 34px;
}

.article-pair .fd-frame {
  display: block;
  aspect-ratio: 4 / 3;
}



/*---- 32.5 Sermon Library ----*/
.now-playing {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 50px;
  margin-bottom: 50px;
  padding: 34px;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(circle at 88% 0%, rgba(var(--fd-gold-rgb), 0.24), rgba(var(--fd-gold-rgb), 0) 50%), var(--fd-night);
  color: var(--fd-text-night);
}

.np-art {
  display: block;
  aspect-ratio: 5 / 6;
}

.np-title {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 3rem);
  color: var(--fd-on-night);
}

.np-meta {
  margin: 0 0 24px;
  font-size: 15px;
}

.now-playing .fd-player {
  max-width: 640px;
}

.sermon-toolbar .toolbar-tools {
  flex-wrap: wrap;
}

.sermon-player-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 30px;
  margin: -10px 0 40px;
  padding: 26px 30px;
  border-radius: 18px;
  background: var(--fd-band);
}

.prose .sermon-player-card .fd-eyebrow {
  margin-bottom: 8px;
}

.series-list li + li {
  border-top: 1px solid var(--fd-line);
}

.series-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  font-weight: 600;
  color: var(--fd-ink);
  transition: color 0.3s ease;
}

.series-list span {
  font-family: var(--fd-ff-heading);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--fd-gold-text);
}

.series-list a:hover,
.series-list .is-current a {
  color: var(--fd-primary);
}

.sermon-row-body {
  min-width: 0;
}

/*======================
33. Coming Soon & 404
========================*/
/*---- 33.1 Coming Soon ----*/
.main-root.is-minimal {
  min-height: 100vh;
}

.soon,
.err-page {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 70px 16px;
  overflow: hidden;
  background: var(--fd-night);
  color: var(--fd-text-night);
  text-align: center;
}

.soon-bg {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.soon-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soon-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--fd-night-rgb), 0.55), rgba(var(--fd-night-rgb), 0.92) 75%);
}

.soon .fd-gl,
.err-page .fd-gl {
  z-index: -1;
}

.soon-inner,
.err-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 820px;
}

.soon-logo img,
.err-logo img {
  width: auto;
  height: 52px;
}

.soon-logo,
.err-logo {
  margin-bottom: 46px;
}

.soon-title,
.err-title {
  margin: 14px 0 18px;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem);
  line-height: 1.05;
  color: var(--fd-on-night);
}

.soon-title .fd-accent,
.err-title .fd-accent {
  color: var(--fd-gold);
}

.soon-lead,
.err-lead {
  max-width: 560px;
  margin: 0 0 40px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.soon-count {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 600px;
}

.soon-count > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 8px 20px;
  border: 1px solid rgba(var(--fd-gold-rgb), 0.3);
  border-radius: 999px 999px 18px 18px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.soon-count b {
  font-family: var(--fd-ff-heading);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--fd-gold);
}

.soon-count span {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-on-night);
}

.soon-date {
  margin: 22px 0 34px;
  font-size: 14px;
}

.soon-date b {
  font-weight: 600;
  color: var(--fd-on-night);
}

.soon-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  padding: 8px 8px 8px 24px;
  border: 1px solid var(--fd-line-night);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.soon-form i {
  color: var(--fd-gold);
}

.soon-form input {
  flex: 1 1 160px;
  min-width: 0;
  height: 50px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15.5px;
  color: var(--fd-on-night);
}

.soon-form input::placeholder {
  color: var(--fd-text-night);
}

.soon-form .form-status {
  flex: 1 1 100%;
  margin: 0 0 8px;
  color: var(--fd-on-night);
}

.soon-form .form-status:empty {
  display: none;
}

.soon-social {
  justify-content: center;
  margin-top: 40px;
}

.soon-social a {
  border-color: var(--fd-line-night);
  color: var(--fd-on-night);
}



/*---- 33.2 404 ----*/
.err-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  margin: 0;
  font-family: var(--fd-ff-heading);
  font-size: clamp(7rem, 4rem + 12vw, 15rem);
  font-weight: 400;
  line-height: 0.9;
  color: var(--fd-on-night);
}

.err-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.62em;
  height: 0.8em;
  border-radius: var(--fd-arch);
  background: linear-gradient(180deg, rgba(var(--fd-gold-rgb), 0.95), rgba(var(--fd-primary-rgb), 0.9));
  font-size: 1em;
  box-shadow: 0 0 80px rgba(var(--fd-gold-rgb), 0.35);
}

.err-zero i {
  font-size: 0.3em;
  color: #FFFFFF;
}

.err-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-bottom: 36px;
}

.err-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--fd-line-night);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  text-align: left;
  color: var(--fd-on-night);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s var(--fd-ease);
}

.err-links a span {
  flex: 1 1 auto;
}

.err-links a i:first-child {
  color: var(--fd-gold);
}

.err-links a i:last-child {
  font-size: 12px;
  color: var(--fd-text-night);
}

.err-links a:hover {
  border-color: rgba(var(--fd-gold-rgb), 0.6);
  background: rgba(var(--fd-gold-rgb), 0.1);
  transform: translateY(-3px);
}

/*======================
34. Footer
========================*/
/* A call band on the stained-glass light (the next gathering and two ways
   in), then the slate footer: about + contact, two link columns, live
   service times and the newsletter, an Instagram strip and the legal bar. */
.fd-footer {
  position: relative;
  background: #141B24;
  color: #A8B1BB;
}

[data-theme="dark"] .fd-footer {
  background: #080B0F;
}

/*---- 34.1 Call Band ----*/
.footer-call {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 0;
  background: linear-gradient(120deg, #7E351C 0%, #B4502C 48%, #5A2715 100%);
  color: #EFF1F3;
}

.footer-call .fd-gl {
  z-index: -1;
  opacity: 0.85;
}

.call-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr auto;
  align-items: center;
  gap: 40px 56px;
}

.call-title {
  margin: 0;
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3.4rem);
  line-height: 1.05;
  color: #EFF1F3;
}

.footer-call .fd-accent {
  color: #F0B88D;
}

.call-label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #EFF1F3;
}

.call-label [data-ns-when] {
  color: #F0B88D;
}

.call-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.call-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(239, 241, 243, 0.8);
}

.call-count b {
  font-family: var(--fd-ff-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.call-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*---- 34.2 Widgets ----*/
.footer-main {
  padding: 90px 0 70px;
}

.footer-logo img {
  width: 200px;
  margin-bottom: 22px;
}

.footer-about > p {
  max-width: 360px;
  margin-bottom: 24px;
}

.widget-title {
  margin-bottom: 22px;
  font-size: 1.45rem;
  color: #EFF1F3;
}

.footer-contact {
  margin-bottom: 26px;
}

.footer-contact li {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 15px;
}

.footer-contact i {
  width: 16px;
  margin-top: 6px;
  color: #E5A06C;
  font-size: 14px;
  text-align: center;
}

.footer-contact a:hover,
.footer-links a:hover {
  color: #E5A06C;
}

.footer-links a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 15.5px;
  transition: color 0.3s ease, transform 0.35s var(--fd-ease);
}

.footer-links a:hover {
  transform: translateX(5px);
}

.footer-times li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 15px;
}

.footer-times b {
  font-family: var(--fd-ff-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: #EFF1F3;
  white-space: nowrap;
}

/* the next gathering lights up in the list */
.footer-times li.is-next span,
.footer-times li.is-next b {
  color: #E5A06C;
}

.footer-times li.is-next span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: #E5A06C;
  vertical-align: 2px;
}

.footer-news {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 6px 6px 6px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.04);
}

.footer-news > i {
  color: #E5A06C;
}

.footer-news input {
  flex: 1 1 140px;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  font-family: var(--fd-ff-body);
  font-size: 15px;
  color: #EFF1F3;
}

.footer-news input::placeholder {
  color: rgba(239, 241, 243, 0.5);
}

.footer-news input:focus {
  outline: none;
}

.footer-news button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 0;
  border-radius: 50%;
  background: #E5A06C;
  color: #141B24;
  cursor: pointer;
  transition: background 0.3s ease;
}

.footer-news button:hover {
  background: #EFF1F3;
}

.footer-news .form-status {
  position: absolute;
  left: 22px;
  top: calc(100% + 8px);
  margin: 0;
  font-size: 13px;
}

/*---- 34.3 Feed & Legal ----*/
.footer-feed {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.feed-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.feed-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.8s var(--fd-ease), filter 0.5s ease;
}

.feed-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(180, 80, 44, 0.45);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feed-tile:hover img {
  transform: scale(1.1);
}

.feed-tile:hover::after {
  opacity: 1;
}

.feed-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 40px;
  background: #EFF1F3;
  color: #141B24;
  font-weight: 600;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  transition: background 0.3s ease, color 0.3s ease;
}

.feed-badge i {
  font-size: 18px;
  color: var(--fd-primary);
}

.feed-badge:hover {
  background: #E5A06C;
  color: #141B24;
}

.footer-bottom .bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 28px 0;
  font-size: 14.5px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom p a {
  color: #EFF1F3;
  font-weight: 600;
}

.bottom-links {
  display: flex;
  gap: 26px;
}

.bottom-links a:hover {
  color: #E5A06C;
}

/*======================
35. Back To Top
========================*/
/* a square coral button that surfaces on the way back up */
.fd-back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 70;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fd-primary);
  color: var(--fd-on-night);
  box-shadow: 0 14px 30px -14px rgba(var(--fd-primary-rgb), 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s var(--fd-ease), visibility 0.4s, background 0.3s ease;
}

.fd-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fd-back-to-top:hover {
  color: var(--fd-on-night);
  background: var(--fd-night);
}

/*======================
36. Media Cursor
========================*/
/* The native pointer everywhere. Over a video, a sermon's audio, a photograph
   or a rail, a coral disc reading Watch / Listen / View / Drag stands in for
   it. Pointer-fine devices only, off under reduced motion (see the JS). */
.fd-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

html.has-fd-cursor .fd-cursor {
  visibility: visible;
}

.cursor-disc {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--fd-primary);
  box-shadow: 0 14px 34px -12px rgba(var(--fd-primary-rgb), 0.85);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.45s var(--fd-ease);
}

.cursor-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fd-ff-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fd-on-night);
}

.fd-cursor.is-media .cursor-disc {
  transform: translate(-50%, -50%) scale(1);
}

.fd-cursor.is-down .cursor-disc {
  transform: translate(-50%, -50%) scale(0.88);
}

/* Drag: two chevrons either side of the word */
.fd-cursor.is-drag .cursor-label::before,
.fd-cursor.is-drag .cursor-label::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.fd-cursor.is-drag .cursor-label::after {
  transform: rotate(135deg);
}

/* over media the disc stands in for the pointer */
html.has-fd-cursor [data-cursor],
html.has-fd-cursor [data-cursor] * {
  cursor: none;
}

html.has-fd-cursor [data-cursor="Drag"] a,
html.has-fd-cursor [data-cursor="Drag"] button {
  cursor: pointer;
}

/*======================
37. Sanctuary Light
========================*/
/* The WebGL light texture: shafts and dust over photographs (screen blend),
   stained-glass light behind night bands. It fades in when it first draws. */
.fd-gl {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.fd-gl.is-live {
  opacity: 1;
}

.fd-gl[data-gl="rays"] {
  mix-blend-mode: screen;
}

.fd-subheader .fd-gl {
  z-index: -1;
}