@charset "utf-8";

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

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

1. General
   1.1 Design Tokens
   1.2 Base And Typography
   1.3 Content Defaults
   1.4 Section Rhythm And Grounds
   1.5 Section Heads And Eyebrows
   1.6 Buttons
   1.7 Icon Tiles
   1.8 Photo Frames And Dots
   1.9 Outline Numerals
   1.10 Word Spans And Reveal Helpers
   1.11 Social Links And Pagination
   1.12 Slider Controls
   1.13 Date Badges, Tags And Status
   1.14 Play Ring
   1.15 Theme Toggle
2. Preloader
3. Candle Glow
4. Topbar And Header
   4.1 Topbar
   4.2 Main Bar
   4.3 Navigation
   4.4 Mega Menu
   4.5 Header Actions
5. Offcanvas Menu
6. Forms And Custom Select
   6.1 Fields
   6.2 Custom Select
7. Subheader
8. Sermon Player
9. Hero One
10. Service Times Bar
11. About Split
   11.1 Collage
   11.2 Copy
12. Community Work And Partners
   12.1 Process Band
   12.2 Partner Strip
13. Events
   13.1 Featured Event
   13.2 Event Rows
14. Ministry Cards
15. Counters Band
16. Team Cards
17. Appeal And Candle Row
   17.1 Progress Bars And Cause Figures
   17.2 The Appeal
   17.3 Candles
18. Testimonials
19. Sermon Rows And Latest Sermon
   19.1 Sermon Rows
   19.2 Latest Sermon
20. Post Cards
21. Hero Two
22. Live Band And Glass Daybreak
23. Gallery Mosaic
24. Partner Plans
25. Message Band
26. Sermon Cards And About Two
   26.1 Sermon Cards
   26.2 About Two Media
27. Sidebar Widgets
28. About And FAQ Components
   28.1 Goals
   28.2 Accordion
   28.3 Quote Cards
29. History, Team And Filters
   29.1 Filter Tabs
   29.2 Static Film Band
   29.3 Timeline
   29.4 Join Band
30. Ministry Pages
   30.1 Solo Photo And Points
   30.2 Ministry Finder
   30.3 Detail Page
31. Sermon Pages
   31.1 Current Series
   31.2 Library
   31.3 Sermon Details
32. Event Pages
   32.1 Next Event Banner
   32.2 Calendar
   32.3 Event Cards
   32.4 Event Details
   32.5 Tickets
   32.6 Map
33. Visit Planner And Prayer Wall
   33.1 Visit Steps
   33.2 Confirmation
   33.3 Live Summary
   33.4 Prayer Wall
34. Giving And FAQ Pages
   34.1 Featured Appeal
   34.2 Cause Cards
   34.3 Donation Details
   34.4 Give Form
   34.5 FAQ Page
35. Church Shop
   35.1 Product Cards
   35.2 Toolbar And Filters
   35.3 Product Details
   35.4 Cart, Checkout And Wishlist
36. Blog Pages
   36.1 Blog List
   36.2 Blog Details
37. Contact, Account And Utility Pages
   37.1 Contact
   37.2 Account
   37.3 Coming Soon And 404
38. Footer
   38.1 Invitation Band
   38.2 Main Footer
   38.3 The Name And Copyright
39. Back To Top
*/

/*======================
1. General
========================*/
/*---- 1.1 Design Tokens ----*/
/* Light is the default; html[data-theme="dark"] swaps every surface, text and line
   token. Sections marked .al-night stay night in both themes. */
:root {
  --al-primary: #4E2A6A;
  --al-primary-rgb: 78, 42, 106;
  --al-primary-hover: #3B1F51;
  --al-on-primary: #FFFFFF;
  --al-gold: #C99F55;
  --al-gold-rgb: 201, 159, 85;
  --al-gold-soft: #E8D3A8;
  --al-on-gold: #1B1522;
  --al-accent-text: #4E2A6A;
  --al-gold-text: #86662B;
  --al-bg: #FFFFFF;
  --al-bg-rgb: 255, 255, 255;
  --al-bg-soft: #F8F4EE;
  --al-bg-soft-rgb: 248, 244, 238;
  --al-bg-tint: #F1E9DF;
  --al-surface: #FFFFFF;
  --al-surface-2: #FBF8F4;
  --al-heading: #1B1522;
  --al-heading-rgb: 27, 21, 34;
  --al-text: #5B5464;
  --al-muted: #746C7D;
  --al-line: #EAE1D7;
  --al-line-strong: #D9CCBE;
  --al-night: #150F1D;
  --al-night-rgb: 21, 15, 29;
  --al-night-2: #1F1829;
  --al-on-night: rgba(250, 242, 234, 0.74);
  --al-line-night: rgba(255, 255, 255, 0.12);
  --al-tonal: rgba(27, 21, 34, 0.05);
  --al-tonal-2: rgba(27, 21, 34, 0.09);
  --al-photo-opacity: 0.07;
  --al-ff-heading: "EB Garamond", serif;
  --al-ff-body: "Instrument Sans", sans-serif;
  --al-fs-display: clamp(50px, 7.2vw, 124px);
  --al-fs-h1: clamp(44px, 5vw, 80px);
  --al-fs-h2: clamp(36px, 3.7vw, 60px);
  --al-fs-h3: clamp(25px, 2.1vw, 32px);
  --al-fs-h4: 25px;
  --al-fs-h5: 21px;
  --al-fs-h6: 18px;
  --al-radius: 2px;
  --al-radius-lg: 4px;
  --al-shadow: 0 18px 50px rgba(27, 21, 34, 0.08);
  --al-shadow-lg: 0 34px 80px rgba(27, 21, 34, 0.15);
  --al-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --al-primary: #7D52A3;
  --al-primary-rgb: 125, 82, 163;
  --al-primary-hover: #9063B6;
  --al-accent-text: #D4B373;
  --al-gold-text: #D4B373;
  --al-bg: #0E0B13;
  --al-bg-rgb: 14, 11, 19;
  --al-bg-soft: #16121D;
  --al-bg-soft-rgb: 22, 18, 29;
  --al-bg-tint: #1F1928;
  --al-surface: #19141F;
  --al-surface-2: #1F1928;
  --al-heading: #F5F0F7;
  --al-heading-rgb: 245, 240, 247;
  --al-text: #BDB6C5;
  --al-muted: #A79FB0;
  --al-line: rgba(255, 255, 255, 0.09);
  --al-line-strong: rgba(255, 255, 255, 0.16);
  --al-night: #1B1524;
  --al-night-rgb: 27, 21, 36;
  --al-night-2: #251D30;
  --al-tonal: rgba(255, 255, 255, 0.06);
  --al-tonal-2: rgba(255, 255, 255, 0.1);
  --al-photo-opacity: 0.1;
  --al-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --al-shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/*---- 1.2 Base And Typography ----*/
body {
  margin: 0;
  font-family: var(--al-ff-body);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--al-text);
  background-color: var(--al-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.4s var(--al-ease), color 0.4s var(--al-ease);
}
body.oc-open {
  overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--al-ff-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--al-heading);
  margin: 0 0 18px;
}
h1 { font-size: var(--al-fs-h1); }
h2 { font-size: var(--al-fs-h2); }
h3 { font-size: var(--al-fs-h3); font-weight: 600; }
h4 { font-size: var(--al-fs-h4); font-weight: 600; }
h5 { font-size: var(--al-fs-h5); font-weight: 600; }
h6 { font-size: var(--al-fs-h6); font-weight: 600; letter-spacing: 0; }
/* an italic word inside a heading carries the brand's voice */
h1 em, h2 em, h3 em, .al-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--al-accent-text);
}
.al-night h1 em, .al-night h2 em, .al-night h3 em, .on-photo h1 em, .on-photo h2 em {
  color: var(--al-gold);
}
p {
  margin: 0 0 18px;
}
a {
  color: var(--al-heading);
  text-decoration: none;
  transition: color 0.3s var(--al-ease);
}
a:hover {
  color: var(--al-accent-text);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  font-family: inherit;
}
strong, b {
  font-weight: 600;
}
hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--al-line);
  opacity: 1;
}
:focus-visible {
  outline: 2px solid var(--al-gold);
  outline-offset: 3px;
}
::selection {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-weight: 600;
}
.skip-link:focus {
  top: 16px;
}
[hidden] {
  display: none !important;
}
.is-filtered-out {
  display: none !important;
}
.container {
  --bs-gutter-x: 32px;
}
/* one measure for every section: 1240px of content on laptops, wider on the
   big screens so a 2K display never reads as a scaled-down page */
@media (min-width: 1400px) {
  .container {
    max-width: 1272px;
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }
  .container {
    max-width: 1440px;
  }
}
@media (min-width: 1960px) {
  html {
    font-size: 18px;
  }
  .container {
    max-width: 1560px;
  }
}

/*---- 1.3 Content Defaults ----*/
/* long-form text: posts, sermon notes, ministry and event pages */
.al-content > * + * {
  margin-top: 0;
}
.al-content h2 { font-size: clamp(30px, 2.8vw, 42px); margin-top: 42px; }
.al-content h3 { font-size: clamp(24px, 2vw, 30px); margin-top: 34px; }
.al-content ul,
.al-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.al-content li + li {
  margin-top: 8px;
}
.al-content ul li::marker {
  color: var(--al-gold);
}
.al-content a:not(.al-btn) {
  color: var(--al-accent-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.al-quote,
.al-content blockquote {
  position: relative;
  margin: 36px 0;
  padding: 34px 40px 32px 92px;
  background: var(--al-bg-soft);
  border-left: 3px solid var(--al-gold);
}
.al-quote::before,
.al-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 30px;
  top: 6px;
  font-family: var(--al-ff-heading);
  font-size: 96px;
  line-height: 1;
  color: var(--al-gold);
}
.al-quote p,
.al-content blockquote p {
  margin: 0;
  font-family: var(--al-ff-heading);
  font-size: 25px;
  font-style: italic;
  line-height: 1.5;
  color: var(--al-heading);
}
.al-quote cite,
.al-content blockquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.al-table {
  width: 100%;
  border-collapse: collapse;
}
.al-table th,
.al-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--al-line);
  text-align: left;
  vertical-align: middle;
}
.al-table th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-heading);
  background: var(--al-bg-soft);
}

/*---- 1.4 Section Rhythm And Grounds ----*/
.al-pt-120 { padding-top: 130px; }
.al-pb-120 { padding-bottom: 130px; }
.al-pt-90 { padding-top: 96px; }
.al-pb-90 { padding-bottom: 96px; }
.al-pt-60 { padding-top: 64px; }
.al-pb-60 { padding-bottom: 64px; }
.al-bg-soft {
  background-color: var(--al-bg-soft);
}
.al-bg-tint {
  background-color: var(--al-bg-tint);
}
.al-bg-base {
  background-color: var(--al-bg);
}
/* night bands: wine-black in both themes */
.al-night {
  background-color: var(--al-night);
  color: var(--al-on-night);
}
.al-night h1, .al-night h2, .al-night h3, .al-night h4, .al-night h5, .al-night h6 {
  color: #FFF8F0;
}
.al-night a:not(.al-btn) {
  color: #FFF8F0;
}
.al-night a:not(.al-btn):hover {
  color: var(--al-gold);
}
/* low-opacity photographs that behave as a texture (never two sections in a row) */
.al-photo-ground {
  position: relative;
  isolation: isolate;
}
.al-photo-ground > .ground-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.al-photo-ground > .ground-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--al-photo-opacity);
  filter: grayscale(1) contrast(1.1);
}
.al-night.al-photo-ground > .ground-img img {
  opacity: 0.12;
  filter: grayscale(0.6) sepia(0.25);
}
/* violet panels that carry gold text keep the deep violet in the dark theme, where the lighter violet would
   leave the gold at 2.4:1 */
[data-theme="dark"] .goals-year,
[data-theme="dark"] .event-bar,
[data-theme="dark"] .visit-steps li.is-active,
[data-theme="dark"] .faq-cats button.is-active,
[data-theme="dark"] .faq-cats button:hover {
  background: #4E2A6A;
}
/* a photograph as a texture with colour: the church under the page ground, a gold glow from one corner and a
   violet glow from the other. Never on two sections in a row. */
.al-tint {
  position: relative;
  isolation: isolate;
  --al-tint-rgb: var(--al-bg-rgb);
}
.al-tint.al-bg-soft {
  --al-tint-rgb: var(--al-bg-soft-rgb);
}
.al-tint > .al-tint-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.al-tint-ground img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) contrast(1.08);
}
.al-tint-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(var(--al-gold-rgb), 0.3) 0%, rgba(var(--al-gold-rgb), 0) 70%),
    radial-gradient(60% 80% at 100% 0%, rgba(var(--al-primary-rgb), 0.24) 0%, rgba(var(--al-primary-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--al-tint-rgb), 0.9) 0%, rgba(var(--al-tint-rgb), 0.84) 50%, rgba(var(--al-tint-rgb), 0.9) 100%);
}
.al-photo-ground > .ground-img::after {
  /* soft fade at both edges so the texture never ends in a hard line */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--al-ground-fade, transparent) 0%, transparent 18%, transparent 82%, var(--al-ground-fade, transparent) 100%);
}
/* the base's architectural line drawing on night bands */
.al-lines-texture {
  position: relative;
  isolation: isolate;
}
.al-lines-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/shapes/texture-building.png") center / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}
/* the big church and cross silhouette behind light sections */
.al-silhouette {
  position: relative;
  isolation: isolate;
}
.al-silhouette::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1100px, 92%);
  aspect-ratio: 1502 / 944;
  transform: translateX(-50%);
  background: url("../img/shapes/church-silhouette.png") center bottom / contain no-repeat;
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}
html[data-theme="dark"] .al-silhouette::before {
  opacity: 0.08;
  filter: invert(1);
}

/*---- 1.5 Section Heads And Eyebrows ----*/
/* The eyebrow, in gold: a short rule over a long one, either side of the label */
.al-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 20px;
  font-family: var(--al-ff-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--al-accent-text);
}
.al-eyebrow .rule {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 9px;
}
.al-eyebrow .rule::before,
.al-eyebrow .rule::after {
  content: "";
  position: absolute;
  height: 1.5px;
  background: var(--al-gold);
}
.al-eyebrow .rule::before {
  top: 0;
  right: 0;
  width: 20px;
}
.al-eyebrow .rule::after {
  bottom: 0;
  left: 0;
  width: 40px;
}
.al-eyebrow .rule.is-after::before {
  left: 0;
  right: auto;
}
.al-eyebrow.is-light,
.al-night .al-eyebrow,
.on-photo .al-eyebrow {
  color: var(--al-gold);
}
.al-section-head {
  margin-bottom: 64px;
  max-width: 780px;
}
.al-section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.al-section-head .al-title {
  margin-bottom: 0;
}
.al-section-head .al-lead {
  margin: 22px 0 0;
}
.al-section-head.is-split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.al-section-head.is-split > div:first-child {
  max-width: 680px;
}
.al-title {
  font-size: var(--al-fs-h2);
  font-weight: 500;
}
.al-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--al-text);
}
.al-night .al-lead {
  color: var(--al-on-night);
}
.al-meta {
  font-size: 14px;
  color: var(--al-muted);
}
/* a thin gold ornament: rule, cross, rule */
.al-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--al-gold);
  font-size: 13px;
}
.al-ornament::before,
.al-ornament::after {
  content: "";
  width: 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/*---- 1.6 Buttons ----*/
.al-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 32px;
  border: 0;
  border-radius: var(--al-radius);
  background: var(--al-primary);
  color: var(--al-on-primary);
  font-family: var(--al-ff-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--al-ease), background-color 0.4s var(--al-ease), box-shadow 0.4s var(--al-ease), transform 0.4s var(--al-ease);
}
.al-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--al-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--al-ease);
}
.al-btn:hover {
  color: var(--al-on-gold);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(var(--al-primary-rgb), 0.28);
}
.al-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
/* the house double arrow: one slides out as its twin slides in */
.al-btn .btn-ic {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  font-size: 13px;
  line-height: 14px;
}
.al-btn .btn-ic i {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.45s var(--al-ease);
}
.al-btn .btn-ic i + i {
  transform: translateX(-130%);
}
.al-btn:hover .btn-ic i:first-child {
  transform: translateX(130%);
}
.al-btn:hover .btn-ic i + i {
  transform: translateX(0);
}
.al-btn.is-gold {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-btn.is-gold::before {
  background: #FFF8F0;
}
/* tonal: the quiet second button (no outline) */
.al-btn.is-tonal {
  background: var(--al-tonal-2);
  color: var(--al-heading);
}
.al-btn.is-tonal::before {
  background: var(--al-heading);
}
.al-btn.is-tonal:hover {
  color: var(--al-bg);
  box-shadow: none;
}
/* glass: the second button over photographs and night bands */
.al-btn.is-glass {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.al-btn.is-glass::before {
  background: #FFFFFF;
}
.al-btn.is-glass:hover {
  color: var(--al-on-gold);
}
.al-btn.is-small {
  min-height: 46px;
  padding: 10px 22px;
  font-size: 12px;
}
.al-btn.is-block {
  width: 100%;
}
.al-btn:disabled,
.al-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
/* a text link with an arrow (Read More, Continue Reading) */
.al-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--al-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-heading);
  cursor: pointer;
}
.al-link i {
  font-size: 12px;
  color: var(--al-gold);
  transition: transform 0.35s var(--al-ease);
}
.al-link:hover {
  color: var(--al-accent-text);
}
.al-link:hover i {
  transform: translateX(5px);
}
.al-night .al-link,
.on-photo .al-link {
  color: #FFF8F0;
}

/*---- 1.7 Icon Tiles ----*/
/* the base's round icon, now a gold-ringed disc that fills on hover */
.al-icon-disc {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--al-surface);
  color: var(--al-accent-text);
  font-size: 34px;
  box-shadow: inset 0 0 0 1px rgba(var(--al-gold-rgb), 0.55), 0 0 0 7px var(--al-surface), 0 14px 30px rgba(var(--al-heading-rgb), 0.12);
  transition: background-color 0.5s var(--al-ease), color 0.5s var(--al-ease), transform 0.5s var(--al-ease);
}
.al-icon-disc i {
  line-height: 1;
}
/* square tiles (the base's feature icons) */
.al-icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: var(--al-radius);
  background: rgba(var(--al-primary-rgb), 0.08);
  color: var(--al-accent-text);
  font-size: 28px;
  transition: background-color 0.4s var(--al-ease), color 0.4s var(--al-ease);
}
html[data-theme="dark"] .al-icon-square {
  background: rgba(var(--al-gold-rgb), 0.12);
}

/*---- 1.8 Photo Frames And Dots ----*/
/* A gold frame offset behind a photograph; drawn on, steps out on hover */
.al-frame {
  position: relative;
  isolation: isolate;
  display: block;
}
.al-frame .frame-line {
  position: absolute;
  inset: -22px 22px 22px -22px;
  z-index: -1;
  pointer-events: none;
  transition: inset 0.7s var(--al-ease);
}
.al-frame.is-right .frame-line {
  inset: -22px -22px 22px 22px;
}
.al-frame .frame-line i {
  position: absolute;
  background: var(--al-gold);
}
.al-frame .frame-line i:nth-child(1) { left: 0; top: 0; width: 100%; height: 2px; transform-origin: left; }
.al-frame .frame-line i:nth-child(2) { right: 0; top: 0; width: 2px; height: 100%; transform-origin: top; }
.al-frame .frame-line i:nth-child(3) { right: 0; bottom: 0; width: 100%; height: 2px; transform-origin: right; }
.al-frame .frame-line i:nth-child(4) { left: 0; bottom: 0; width: 2px; height: 100%; transform-origin: bottom; }
.al-frame .frame-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
}
.al-frame .frame-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--al-ease);
}
.al-frame:hover .frame-line {
  inset: -30px 30px 30px -30px;
}
.al-frame.is-right:hover .frame-line {
  inset: -30px -30px 30px 30px;
}
.al-frame:hover .frame-photo img {
  transform: scale(1.05);
}
/* the dotted grid set behind photographs */
.al-dots {
  position: absolute;
  z-index: -1;
  width: 46%;
  height: 62%;
  background-image: radial-gradient(rgba(var(--al-gold-rgb), 0.6) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  pointer-events: none;
}
.al-dots.is-tl { left: -44px; top: -44px; }
.al-dots.is-tr { right: -44px; top: -44px; }
.al-dots.is-bl { left: -44px; bottom: -44px; }
.al-dots.is-br { right: -44px; bottom: -44px; }
/* a photograph cut to a circle with a ring (the base's round photos) */
.al-circle-photo {
  position: relative;
  border-radius: 50%;
  padding: 14px;
  background: var(--al-surface);
  box-shadow: var(--al-shadow), inset 0 0 0 1px rgba(var(--al-gold-rgb), 0.5);
}
.al-circle-photo img {
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* image hover zoom (house physics) */
.al-zoom {
  display: block;
  overflow: hidden;
}
.al-zoom img {
  transition: transform 1.1s var(--al-ease);
}
.al-zoom:hover img,
a:hover > .al-zoom img {
  transform: scale(1.06);
}

/*---- 1.9 Outline Numerals ----*/
.al-numeral {
  position: relative;
  display: inline-block;
  font-family: var(--al-ff-heading);
  font-size: 76px;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--al-gold);
  isolation: isolate;
}
.al-numeral::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--al-primary-rgb), 0.35);
  z-index: -1;
}

/*---- 1.10 Word Spans And Reveal Helpers ----*/
/* Heading words settle where they stand (Gilt Words): no masks, so italic
   overhangs and descenders are never clipped. */
.al-lines .w {
  display: inline-block;
}
.al-lines .wi {
  display: inline-block;
}
.al-line {
  display: block;
  white-space: nowrap;
}

/*---- 1.11 Social Links And Pagination ----*/
.al-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.al-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 14px;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease), transform 0.35s var(--al-ease);
}
.al-social a:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: translateY(-3px);
}
.al-night .al-social a,
.al-social.is-dark a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFF8F0;
}
.al-night .al-social a:hover,
.al-social.is-dark a:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-pagination ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.al-pagination a,
.al-pagination button,
.al-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  padding: 0 6px;
  border: 0;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-family: var(--al-ff-heading);
  font-size: 20px;
  font-weight: 500;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.al-pagination a:hover,
.al-pagination button:hover,
.al-pagination [aria-current="page"] {
  background: var(--al-primary);
  color: var(--al-on-primary);
}
.al-pagination button:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/*---- 1.12 Slider Controls ----*/
.al-arrows {
  display: flex;
  gap: 10px;
}
.al-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease), transform 0.35s var(--al-ease);
}
.al-arrow:hover {
  background: var(--al-primary);
  color: var(--al-on-primary);
  transform: translateY(-2px);
}
.al-night .al-arrow,
.on-photo .al-arrow {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.al-arrow.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.al-dotsnav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.al-dotsnav .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--al-line-strong);
  opacity: 1;
  transition: background-color 0.3s var(--al-ease), transform 0.3s var(--al-ease);
}
.al-dotsnav .swiper-pagination-bullet-active {
  background: var(--al-gold);
  transform: scale(1.35);
}

/*---- 1.13 Date Badges, Tags And Status ----*/
.al-date {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 12px 12px 10px;
  background: var(--al-primary);
  color: var(--al-on-primary);
  line-height: 1;
  text-align: center;
}
.al-date b {
  font-family: var(--al-ff-heading);
  font-size: 32px;
  font-weight: 500;
}
.al-date span {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.al-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.al-night .al-tag,
.on-photo .al-tag {
  color: var(--al-gold);
}
.al-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(var(--al-gold-rgb), 0.16);
  color: var(--al-gold-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.al-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.al-status.is-live {
  background: var(--al-primary);
  color: var(--al-on-primary);
}
.al-status.is-live::before {
  animation: al-pulse 1.4s ease-in-out infinite;
}
@keyframes al-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/*---- 1.14 Play Ring ----*/
.al-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  font-size: 20px;
  transition: transform 0.45s var(--al-ease), background-color 0.45s var(--al-ease), color 0.45s var(--al-ease);
}
.al-play i {
  margin-left: 4px;
}
.al-play::before,
.al-play::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(var(--al-gold-rgb), 0.6);
  animation: al-ring 2.8s ease-out infinite;
}
.al-play::after {
  animation-delay: 1.4s;
}
.al-play:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: scale(1.06);
}
@keyframes al-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/*---- 1.15 Theme Toggle ----*/
.al-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.al-theme-toggle i {
  position: absolute;
  transition: transform 0.6s var(--al-ease), opacity 0.4s var(--al-ease);
}
.al-theme-toggle .ti-sun {
  transform: translateY(140%) rotate(90deg);
  opacity: 0;
}
html[data-theme="dark"] .al-theme-toggle .ti-moon {
  transform: translateY(-140%) rotate(-90deg);
  opacity: 0;
}
html[data-theme="dark"] .al-theme-toggle .ti-sun {
  transform: none;
  opacity: 1;
}
.al-theme-toggle:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
}






/* 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. */
.al-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 30px;
}
.al-avatars.is-centered {
  margin-inline: auto;
}
.al-avatars.has-space-below {
  margin-bottom: 32px;
}
.al-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.al-avatar-stack li {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 3px solid var(--al-surface);
  border-radius: 50%;
  background: var(--al-surface);
  transition: transform 0.35s ease;
}
.al-avatar-stack li + li {
  margin-inline-start: -14px;
}
.al-avatar-stack li:hover {
  z-index: 2;
  transform: translateY(-4px);
}
.al-avatar-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.al-avatar-stack .is-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-family: var(--al-ff-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.al-avatars .avatars-copy {
  font-family: var(--al-ff-body);
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
}
.al-avatars .avatars-copy b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--al-heading);
}
.al-avatars .avatars-copy span {
  display: block;
  color: var(--al-text);
}
/* on a photograph or a dark band: white rings and light words */
.al-avatars.is-on-dark .al-avatar-stack li {
  border-color: rgba(255, 255, 255, 0.92);
}
.al-avatars.is-on-dark .avatars-copy b {
  color: #FFFFFF;
}
.al-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 */
.al-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(--al-surface);
}
.post-meta .al-byline-avatar {
  margin-inline-end: 8px;
}

/*======================
2. Preloader
========================*/
/* P6 Window Of Light: a round-arched church window draws itself in gold, its
   cross mullion forms, light pours through the glass, then the window empties
   and opens past the edges of the screen onto the page. The window's own
   200vmax shadow is the night ground, so the arch is the only opening. */
.no-js .al-preloader {
  display: none;
}
.al-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}
.al-preloader.is-done {
  display: none;
}
.pre-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 290px;
  transform: translate(-50%, -58%);
  border: 1.5px solid rgba(var(--al-gold-rgb), 0);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background-color: var(--al-night);
  box-shadow: 0 0 0 200vmax var(--al-night);
  overflow: hidden;
}
.pre-light {
  /* the light behind the glass */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 244, 222, 0.95) 0%, rgba(var(--al-gold-rgb), 0.55) 45%, rgba(var(--al-gold-rgb), 0.12) 80%),
    linear-gradient(180deg, rgba(var(--al-gold-rgb), 0.35) 0%, rgba(var(--al-night-rgb), 0) 100%);
  opacity: 0;
}
.pre-mullion {
  position: absolute;
  z-index: 1;
  background: var(--al-gold);
}
.pre-mullion.is-v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.pre-mullion.is-h {
  left: 0;
  right: 0;
  top: 38%;
  height: 3px;
  transform: scaleX(0);
}
.pre-sill {
  position: absolute;
  left: 50%;
  top: calc(50% + 122px);
  width: 250px;
  height: 1.5px;
  margin-left: -125px;
  background: var(--al-gold);
  transform: scaleX(0);
}
.pre-logo {
  position: absolute;
  left: 50%;
  top: calc(50% + 152px);
  width: 150px;
  height: auto;
  margin-left: -75px;
  opacity: 0;
}

/*======================
3. Candle Glow
========================*/
/* C5: the native pointer stays everywhere. Inside one night band per home a
   warm pool of candlelight follows it a beat behind, as if carried, and
   flickers softly. Pointer-fine devices only; off when motion is reduced. */
[data-glow] {
  position: relative;
}
.al-glow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 200, 0.2) 0%, rgba(var(--al-gold-rgb), 0.12) 28%, rgba(var(--al-gold-rgb), 0.04) 52%, rgba(var(--al-gold-rgb), 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--al-ease);
}
.al-glow.is-on {
  opacity: 1;
}
.al-glow::after {
  /* the flame's own small bright heart */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 222, 0.22) 0%, rgba(255, 244, 222, 0) 70%);
  animation: al-glow-flicker 2.6s ease-in-out infinite alternate;
}
@keyframes al-glow-flicker {
  0% { transform: scale(1); opacity: 0.8; }
  40% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0.85; }
}
[data-glow] > .container {
  position: relative;
  z-index: 1;
}

/*======================
4. Topbar And Header
========================*/
/*---- 4.1 Topbar ----*/
.al-topbar {
  position: relative;
  z-index: 101;
  background: var(--al-night);
  color: var(--al-on-night);
  font-size: 13.5px;
  line-height: 1.3;
  border-bottom: 1px solid var(--al-line-night);
}
.al-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 0 48px;
}
/* the service clock: the next service, live */
.top-service {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.top-service .al-status {
  padding: 4px 11px;
  background: rgba(var(--al-gold-rgb), 0.16);
  color: var(--al-gold);
  font-size: 11px;
}
.top-service .al-status.is-live {
  background: var(--al-primary);
  color: #FFFFFF;
}
.top-service b {
  color: #FFF8F0;
  font-weight: 600;
}
.top-service .sc-until {
  color: var(--al-gold);
}
.al-topbar .top-contact {
  display: flex;
  align-items: center;
  gap: 28px;
}
.al-topbar .top-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--al-on-night);
}
.al-topbar .top-contact i {
  color: var(--al-gold);
  font-size: 12px;
}
.al-topbar .top-contact a:hover {
  color: #FFFFFF;
}
/* 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. */
.al-lang {
  position: relative;
  flex-shrink: 0;
}
.al-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: var(--al-on-night);
  font-family: var(--al-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;
}
.al-lang .lang-btn:hover,
.al-lang .lang-btn[aria-expanded="true"] {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.al-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.al-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);
}
.al-lang.is-icon .lang-btn {
  height: 44px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--al-on-night);
}
.al-lang.is-icon .lang-btn:hover,
.al-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-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(--al-surface);
  box-shadow: var(--al-shadow-lg);
  font-family: var(--al-ff-body);
  text-align: start;
  white-space: normal;
}
.al-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.al-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.al-lang .lang-menu[hidden] {
  display: none;
}
.al-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--al-muted);
}
.al-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.al-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--al-line);
}
.al-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--al-heading);
  font-family: var(--al-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;
}
.al-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--al-muted);
}
.al-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--al-primary);
  opacity: 0;
}
.al-lang .lang-item:hover,
.al-lang .lang-item[aria-pressed="true"] {
  background: var(--al-tonal);
}
.al-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.al-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.al-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--al-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--al-muted);
}

/*---- 4.2 Main Bar ----*/
.al-header {
  position: relative;
  z-index: 100;
}
.al-header .header-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 92px;
  background: var(--al-surface);
  box-shadow: 0 1px 0 var(--al-line);
  transition: background-color 0.45s var(--al-ease), box-shadow 0.45s var(--al-ease);
}
.al-header.is-scrolled {
  padding-bottom: 92px;
}
/* over a home hero the bar is clear until the page moves */
.al-header.is-over {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.al-header.is-over.is-scrolled {
  padding-bottom: 0;
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .header-bar {
  background: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}
.al-header.is-scrolled .header-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 80px;
  background: rgba(var(--al-bg-rgb), 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
  animation: al-dock 0.55s var(--al-ease);
}
@keyframes al-dock {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}
.al-header .header-inner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 40px 0 48px;
}
.al-logo {
  position: relative;
  flex: 0 0 auto;
  display: block;
}
.al-logo img {
  height: 52px;
  width: auto;
  transition: height 0.4s var(--al-ease), opacity 0.4s var(--al-ease);
}
.al-logo .logo-light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .logo-dark,
html[data-theme="dark"] .al-logo .logo-dark {
  opacity: 0;
}
.al-header.is-over.is-light:not(.is-scrolled) .header-bar {
  background: transparent;
  box-shadow: 0 1px 0 var(--al-line);
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .logo-light,
html[data-theme="dark"] .al-logo .logo-light {
  opacity: 1;
}
.al-header.is-scrolled .al-logo img {
  height: 46px;
}
/* the base's night menu block at the far edge */
.al-menu-toggle {
  flex: 0 0 92px;
  width: 92px;
  border: 0;
  background: var(--al-night);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease);
}
.al-menu-toggle span {
  display: block;
  width: 28px;
  height: 1.5px;
  background: #FFF8F0;
  transition: width 0.4s var(--al-ease), margin 0.4s var(--al-ease);
}
.al-menu-toggle span:nth-child(2) {
  width: 18px;
  margin-left: 10px;
  background: var(--al-gold);
}
.al-menu-toggle span:nth-child(3) {
  width: 22px;
  margin-left: 6px;
}
.al-menu-toggle:hover {
  background: var(--al-primary);
}
.al-menu-toggle:hover span {
  width: 28px;
  margin-left: 0;
}

/*---- 4.3 Navigation ----*/
.al-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.al-nav > ul {
  display: flex;
  align-items: center;
  gap: 38px;
}
.al-nav li {
  position: relative;
}
.al-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 92px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--al-heading);
  white-space: nowrap;
  transition: color 0.3s var(--al-ease), height 0.4s var(--al-ease);
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .al-nav > ul > li > a {
  color: #FFF8F0;
}
.al-header.is-scrolled .al-nav > ul > li > a {
  height: 80px;
}
.al-nav > ul > li > a i {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.35s var(--al-ease);
}
/* hover and the current page show in colour only (no underline) */
.al-nav > ul > li:hover > a,
.al-nav > ul > li.active > a {
  color: var(--al-accent-text);
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .al-nav > ul > li:hover > a,
.al-header.is-over:not(.is-light):not(.is-scrolled) .al-nav > ul > li.active > a {
  color: var(--al-gold);
}
.al-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.al-nav .sub-menu {
  position: absolute;
  left: -22px;
  /* the panel hangs 18px below the header bar (12px once the bar is sticky), never on the tabs */
  top: calc(100% + 18px);
  z-index: 20;
  min-width: 250px;
  padding: 14px;
  margin: 0;
  list-style: none;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s var(--al-ease), transform 0.35s var(--al-ease), visibility 0.35s;
}
.al-nav .sub-menu::after {
  /* a gold hairline along the top of the panel */
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--al-gold), rgba(var(--al-gold-rgb), 0));
}
/* an invisible bridge keeps the menu open while the pointer crosses the gap */
.al-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  height: 26px;
}
.al-header.is-scrolled .al-nav > ul > li > .sub-menu {
  top: calc(100% + 12px);
}
.al-nav .sub-menu .sub-menu {
  left: 100%;
  top: -14px;
  margin-left: 10px;
  transform: translateX(12px);
}
.al-nav .sub-menu .sub-menu::before {
  left: -14px;
  top: 0;
  bottom: 0;
  width: 14px;
  height: auto;
}
.al-nav li:hover > .sub-menu,
.al-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
.al-nav .sub-menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-radius: var(--al-radius);
  font-size: 15px;
  color: var(--al-heading);
  white-space: nowrap;
  transition: color 0.3s var(--al-ease), background-color 0.3s var(--al-ease), padding 0.3s var(--al-ease);
}
.al-nav .sub-menu a i {
  font-size: 9px;
  color: var(--al-muted);
}
.al-nav .sub-menu li:hover > a,
.al-nav .sub-menu li.active > a {
  color: var(--al-accent-text);
  background: var(--al-tonal);
  padding-left: 22px;
}
.al-nav .sub-menu li.active > a::before,
.al-nav .sub-menu li:hover > a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--al-gold);
}

/*---- 4.4 Mega Menu ----*/
.al-nav li.has-mega {
  position: static;
}
.al-nav .mega-menu {
  position: absolute;
  left: 50%;
  top: calc(100% - 6px);
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  width: min(1080px, calc(100vw - 80px));
  padding: 30px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.35s var(--al-ease), transform 0.35s var(--al-ease), visibility 0.35s;
}
.al-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}
.al-nav li.has-mega:hover > .mega-menu,
.al-nav li.has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.mega-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--al-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.mega-title i {
  font-size: 13px;
  color: var(--al-gold);
}
.mega-col a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  color: var(--al-heading);
  transition: color 0.3s var(--al-ease), transform 0.3s var(--al-ease);
}
.mega-col a:hover,
.mega-col li.active a {
  color: var(--al-accent-text);
  transform: translateX(5px);
}
.mega-promo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 250px;
  overflow: hidden;
  border-radius: var(--al-radius);
  isolation: isolate;
}
.mega-promo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--al-ease);
}
.mega-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--al-night-rgb), 0.1) 0%, rgba(var(--al-night-rgb), 0.9) 100%);
}
.mega-promo:hover img {
  transform: scale(1.06);
}
.promo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px;
  color: var(--al-on-night);
  font-size: 14px;
}
.promo-body .al-status {
  background: rgba(var(--al-gold-rgb), 0.2);
  color: var(--al-gold);
}
.promo-body b {
  font-family: var(--al-ff-heading);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFF8F0;
}
.promo-body .al-link {
  margin-top: 8px;
}

/*---- 4.5 Header Actions ----*/
.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.head-round {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease), transform 0.35s var(--al-ease);
}
.head-round:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .head-round {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.al-header.is-over:not(.is-light):not(.is-scrolled) .head-round:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.head-count {
  position: absolute;
  right: -3px;
  top: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.head-count.is-bump {
  animation: al-bump 0.5s var(--al-ease);
}
@keyframes al-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.head-donate {
  margin-left: 8px;
}

/*======================
5. Offcanvas Menu
========================*/
.al-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--al-night);
  color: var(--al-on-night);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.6s var(--al-ease), visibility 0.6s;
}
.al-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
}
.al-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--al-night-rgb), 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--al-ease), visibility 0.4s;
}
.al-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px;
  border-bottom: 1px solid var(--al-line-night);
}
.offcanvas-head img {
  height: 44px;
  width: auto;
}
.offcanvas-close {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.4s var(--al-ease);
}
.offcanvas-close:hover {
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 26px 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.oc-group + .oc-group {
  margin-top: 24px;
}
.oc-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.oc-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
.oc-group a {
  display: block;
  padding: 4px 0;
  font-family: var(--al-ff-heading);
  font-size: 19px;
  font-weight: 500;
  color: #FFF8F0;
}
.oc-group a:hover,
.oc-group a.is-current {
  color: var(--al-gold);
}
.offcanvas-foot {
  padding: 24px 34px 30px;
  border-top: 1px solid var(--al-line-night);
}
.offcanvas-foot p {
  margin: 0 0 8px;
  font-size: 14px;
}
.oc-contact {
  display: block;
  color: #FFF8F0;
  font-size: 15px;
}
.offcanvas-foot .al-social {
  margin-top: 16px;
}

/*======================
6. Forms And Custom Select
========================*/
/*---- 6.1 Fields ----*/
.al-field {
  position: relative;
  margin-bottom: 0;
}
.al-field > label,
.al-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--al-ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--al-heading);
}
.al-field .req {
  color: var(--al-accent-text);
}
.al-input {
  position: relative;
}
.al-input input,
.al-input textarea,
.al-field input[type="text"],
.al-field input[type="email"],
.al-field input[type="tel"],
.al-field input[type="password"],
.al-field input[type="number"],
.al-field input[type="date"],
.al-field textarea {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 14px 52px 14px 20px;
  border: 1px solid var(--al-line);
  border-radius: 0;
  background: var(--al-surface);
  color: var(--al-heading);
  font-family: var(--al-ff-body);
  font-size: 15px;
  transition: border-color 0.3s var(--al-ease), box-shadow 0.3s var(--al-ease);
}
.al-field textarea,
.al-input textarea {
  min-height: 150px;
  resize: vertical;
}
.al-input input:focus,
.al-input textarea:focus,
.al-field input:focus,
.al-field textarea:focus {
  outline: none;
  border-color: var(--al-gold);
  box-shadow: 0 0 0 3px rgba(var(--al-gold-rgb), 0.15);
}
::placeholder {
  color: #9C948C;
  opacity: 1;
}
/* the base's icon inside the right end of every field */
.al-input > i {
  position: absolute;
  right: 20px;
  top: 21px;
  color: var(--al-accent-text);
  font-size: 15px;
  pointer-events: none;
}
.al-field.is-invalid input,
.al-field.is-invalid textarea,
.al-field.is-invalid .select-button {
  border-color: #C0392B;
}
.al-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  color: var(--al-text);
}
.al-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--al-accent-text);
}
.al-check b {
  color: var(--al-heading);
  font-weight: 500;
}
.form-status {
  margin: 14px 0 0;
  font-size: 15px;
}
.form-status:empty {
  display: none;
}
.form-status.is-success {
  color: #2E7D4F;
}
.form-status.is-error {
  color: #B23A2B;
}
/* minus / plus around a number */
.al-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 50px;
  border: 1px solid var(--al-line);
  background: var(--al-surface);
}
.al-stepper button {
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--al-heading);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.al-stepper button:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.al-stepper button:disabled {
  opacity: 0.3;
  pointer-events: none;
}
.al-stepper input {
  width: 54px;
  border: 0;
  border-left: 1px solid var(--al-line);
  border-right: 1px solid var(--al-line);
  background: transparent;
  text-align: center;
  font-family: var(--al-ff-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--al-heading);
  -moz-appearance: textfield;
}
.al-stepper input::-webkit-outer-spin-button,
.al-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* option cards (radio / checkbox wrapped in a label) */
.al-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.al-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.al-choice .choice-face {
  display: block;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--al-line);
  background: var(--al-surface);
  transition: border-color 0.3s var(--al-ease), background-color 0.3s var(--al-ease), box-shadow 0.3s var(--al-ease);
}
.al-choice:hover .choice-face {
  border-color: rgba(var(--al-gold-rgb), 0.6);
}
.al-choice input:checked + .choice-face {
  border-color: var(--al-gold);
  background: rgba(var(--al-gold-rgb), 0.07);
  box-shadow: inset 4px 0 0 var(--al-gold);
}
.al-choice input:focus-visible + .choice-face {
  outline: 2px solid var(--al-gold);
  outline-offset: 2px;
}
.al-choice b {
  display: block;
  font-family: var(--al-ff-heading);
  font-weight: 600;
  color: var(--al-heading);
}
.al-choice small {
  display: block;
  font-size: 14px;
  color: var(--al-text);
}

/*---- 6.2 Custom Select ----*/
/* The native <select> stays in the form; JS draws the button + listbox beside it */
.al-select {
  position: relative;
}
.al-select > select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.al-select .select-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 20px;
  border: 1px solid var(--al-line);
  border-radius: 0;
  background: var(--al-surface);
  color: var(--al-heading);
  font-family: var(--al-ff-body);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--al-ease);
}
.al-select.is-compact .select-button {
  min-height: 48px;
  background: var(--al-bg-soft);
  border-color: transparent;
}
.al-select .select-button i {
  color: var(--al-accent-text);
  font-size: 11px;
  transition: transform 0.3s var(--al-ease);
}
.al-select.is-open .select-button {
  border-color: var(--al-gold);
}
.al-select.is-open .select-button i {
  transform: rotate(180deg);
}
.al-select .select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al-select .select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 290px;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  list-style: none;
  border-top: 3px solid var(--al-gold);
  background: var(--al-surface);
  box-shadow: 0 24px 50px rgba(var(--al-night-rgb), 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--al-ease), transform 0.3s var(--al-ease), visibility 0.3s;
  scrollbar-width: thin;
}
.al-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 6px);
}
.al-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.al-select .select-list:focus {
  outline: none;
}
.al-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 20px;
  color: var(--al-heading);
  font-size: 15px;
  cursor: pointer;
}
.al-select .select-option.is-focused {
  background: var(--al-bg-soft);
}
.al-select .select-option.is-selected {
  color: var(--al-accent-text);
  font-weight: 500;
}
.al-select .select-option.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.al-select .option-meta {
  color: var(--al-text);
  font-size: 12px;
  white-space: nowrap;
}

/* checkboxes: a rounded box in the template's colours, filled and ticked when checked */
.al-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--al-muted);
  border-radius: 6px;
  background: var(--al-surface) no-repeat center / 13px 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.al-check input[type="checkbox"]:hover {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 4px rgba(var(--al-primary-rgb), 0.16);
}
.al-check input[type="checkbox"]:checked {
  border-color: var(--al-primary);
  background-color: var(--al-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.6' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.al-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 2px;
}

/*======================
7. Subheader
========================*/
/* the base's watercolour city behind the page title, now set on ivory with a
   gold cross ornament; in dark mode the city is washed down into the night */
.al-subheader {
  position: relative;
  isolation: isolate;
  padding: 130px 0 140px;
  background: var(--al-bg-soft);
  overflow: hidden;
}
.al-subheader .sub-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.al-subheader .sub-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.9;
}
.al-subheader .sub-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--al-bg-soft-rgb), 0.97) 0%, rgba(var(--al-bg-soft-rgb), 0.72) 46%, rgba(var(--al-bg-soft-rgb), 0.15) 80%);
}
html[data-theme="dark"] .al-subheader .sub-bg img {
  opacity: 0.12;
  filter: invert(1) sepia(0.4);
}
.al-subheader .sub-inner {
  max-width: 760px;
}
.al-subheader .sub-title {
  margin: 0 0 16px;
  font-size: var(--al-fs-h1);
  font-weight: 500;
}
.al-subheader .sub-lead {
  max-width: 580px;
  margin: 0;
  font-size: 19px;
  color: var(--al-text);
}
.sub-crumbs {
  margin-bottom: 22px;
}
.sub-crumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 8px 18px;
  border-radius: 30px;
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.sub-crumbs li {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-accent-text);
}
.sub-crumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 12px;
  border-radius: 50%;
  background: var(--al-gold);
}
.sub-crumbs a {
  color: var(--al-heading);
}
.sub-crumbs a:hover {
  color: var(--al-accent-text);
}
/* a large gold cross outline at the right (the logo's budded cross, as a line) */
.sub-cross {
  position: absolute;
  right: 9%;
  top: 50%;
  width: 150px;
  height: 210px;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}
.sub-cross::before,
.sub-cross::after {
  content: "";
  position: absolute;
  border: 1px solid var(--al-gold);
}
.sub-cross::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 26px;
  margin-left: -13px;
}
.sub-cross::after {
  left: 0;
  right: 0;
  top: 54px;
  height: 26px;
}

/*======================
8. Sermon Player
========================*/
/* one player bar for every page that plays a sermon */
.al-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--al-night);
  color: var(--al-on-night);
  box-shadow: 0 -14px 40px rgba(var(--al-night-rgb), 0.25);
  transform: translateY(0);
  transition: transform 0.5s var(--al-ease);
}
.al-player.is-hiding {
  transform: translateY(110%);
}
.al-player .player-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 86px;
}
.player-toggle {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.3s var(--al-ease);
}
.player-toggle:hover {
  transform: scale(1.06);
}
.player-toggle .fa-play {
  margin-left: 3px;
}
.player-now {
  flex: 0 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.player-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.player-now b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--al-ff-heading);
  font-weight: 600;
  color: #FFF8F0;
}
.player-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.player-track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.player-time {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.player-seek {
  flex: 1 1 auto;
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, var(--al-gold) var(--al-fill, 0%), rgba(255, 255, 255, 0.18) var(--al-fill, 0%));
  border-radius: 4px;
  cursor: pointer;
}
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFF8F0;
  border: 3px solid var(--al-gold);
}
.player-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFF8F0;
  border: 3px solid var(--al-gold);
}
.player-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.player-tools button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #FFF8F0;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.player-tools button small {
  position: absolute;
  font-size: 8px;
  font-weight: 600;
}
.player-tools .player-speed {
  min-width: 52px;
  border-radius: 22px;
  font-family: var(--al-ff-heading);
  font-size: 13px;
  font-weight: 600;
}
.player-tools button:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
body.has-player {
  padding-bottom: 86px;
}
body.has-player .al-back-to-top {
  bottom: 110px;
}
/* a sermon that is playing marks its own play button */
[data-play-sermon].is-playing .fa-play::before {
  content: "\f04c";
}

/*======================
9. Hero One
========================*/
.al-hero {
  position: relative;
  height: max(800px, 100vh);
  max-height: 1100px;
  background: var(--al-night);
  overflow: hidden;
  isolation: isolate;
}
.al-hero .hero-slider {
  height: 100%;
}
.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 136px;
  padding-bottom: 230px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 9s linear;
}
.swiper-slide-active .hero-bg img {
  transform: scale(1);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--al-night-rgb), 0.86) 0%, rgba(var(--al-night-rgb), 0.55) 48%, rgba(var(--al-night-rgb), 0.2) 100%),
    linear-gradient(180deg, rgba(var(--al-night-rgb), 0.55) 0%, rgba(var(--al-night-rgb), 0) 30%, rgba(var(--al-night-rgb), 0) 62%, rgba(var(--al-night-rgb), 0.9) 100%);
}
/* the hero keeps the page's own grid; only the slide tabs step in where the
   92px rail would reach them (worked out per container width) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .tabs-inner {
    padding-right: max(0px, calc(670px - 50vw));
  }
}
@media (min-width: 1400px) and (max-width: 1599px) {
  .tabs-inner {
    padding-right: max(0px, calc(728px - 50vw));
  }
}
@media (min-width: 1600px) and (max-width: 1959px) {
  .tabs-inner {
    padding-right: max(0px, calc(812px - 50vw));
  }
}
.hero-copy {
  max-width: 820px;
  color: var(--al-on-night);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.hero-kicker::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--al-gold);
}
.hero-title {
  margin: 0 0 26px;
  font-size: var(--al-fs-display);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: #FFF8F0;
}
.hero-title em {
  color: var(--al-gold);
}
.hero-lead {
  max-width: 520px;
  margin: 0 0 40px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 248, 240, 0.82);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* WebGL light over the photograph */
.al-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* the base's side rail: quick links up the right edge, in night glass */
.hero-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 150px 0 40px;
  background: rgba(var(--al-night-rgb), 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
/* in a vertical writing mode the inline axis runs down the rail, so a "row" is a column here */
.rail-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  writing-mode: vertical-rl;
}
.rail-links a {
  padding: 18px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 248, 240, 0.75);
}
.rail-links a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.rail-links a:hover {
  color: var(--al-gold);
}
.rail-social {
  flex-direction: column;
}
.rail-social a {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
/* slide tabs along the foot: each fills while its slide shows */
/* the tabs sit above the part of the hero the service card covers */
.hero-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.tabs-inner {
  display: flex;
  align-items: stretch;
}
.hero-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 30px 24px 32px 0;
  border: 0;
  background: none;
  color: rgba(255, 248, 240, 0.55);
  text-align: left;
  cursor: pointer;
  transition: color 0.4s var(--al-ease);
}
.hero-tab b {
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--al-gold);
}
.hero-tab span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hero-tab:hover,
.hero-tab.is-active {
  color: #FFF8F0;
}
.hero-tab .tab-line {
  position: absolute;
  left: 0;
  right: 24px;
  top: -1px;
  height: 2px;
  background: transparent;
}
.hero-tab .tab-line i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--al-gold);
}
.hero-tab.is-active .tab-line i {
  width: 100%;
}
.hero-arrows {
  align-self: center;
  margin-left: auto;
}

/*======================
10. Service Times Bar
========================*/
.al-service-bar {
  position: relative;
  z-index: 5;
  margin-top: -64px;
}
.service-bar-inner {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 330px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
  overflow: hidden;
}
/* the live service clock on night */
.sb-next {
  position: relative;
  padding: 36px 38px 34px;
  overflow: hidden;
}
.sb-next::after {
  /* a warm glow in the corner, like a lamp left on */
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--al-gold-rgb), 0.25) 0%, rgba(var(--al-gold-rgb), 0) 70%);
  pointer-events: none;
}
.sb-next .al-status {
  background: rgba(var(--al-gold-rgb), 0.16);
  color: var(--al-gold);
}
.sb-name {
  margin: 18px 0 4px;
  font-size: 34px;
  font-weight: 500;
}
.sb-when {
  margin: 0 0 22px;
  font-size: 15px;
}
.sb-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sb-count span,
.ef-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 9px;
  border-radius: var(--al-radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sb-count b,
.ef-count b {
  font-family: var(--al-ff-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--al-gold);
  font-variant-numeric: tabular-nums;
}
/* the week, day by day */
.sb-week {
  padding: 34px 38px;
}
.sb-label {
  display: block;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.sb-days {
  display: flex;
  gap: 22px;
}
.st-day {
  flex: 1 1 0;
  padding-left: 22px;
  border-left: 1px solid var(--al-line);
}
.st-dayname {
  display: block;
  margin-bottom: 12px;
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--al-heading);
}
.st-day li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  line-height: 1.35;
}
.st-day li + li {
  margin-top: 12px;
}
.st-day li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--al-line-strong);
}
.st-day li b {
  font-size: 16px;
  font-weight: 600;
  color: var(--al-heading);
}
.st-day li span {
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--al-muted);
}
.st-day li.is-next::before,
.st-day li.is-live::before {
  background: var(--al-gold);
  box-shadow: 0 0 0 4px rgba(var(--al-gold-rgb), 0.22);
}
.st-day li.is-live::before {
  animation: al-pulse 1.4s ease-in-out infinite;
}
.st-day li.is-next b,
.st-day li.is-live b {
  color: var(--al-accent-text);
}
/* first-visit call to action */
.sb-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 34px 38px;
  background: var(--al-primary);
  color: rgba(255, 255, 255, 0.82);
  transition: background-color 0.45s var(--al-ease);
}
.sb-cta > i {
  font-size: 40px;
  line-height: 1;
  color: var(--al-gold);
}
.sb-cta .cta-text {
  font-size: 15px;
  line-height: 1.6;
}
.sb-cta .cta-text b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--al-ff-heading);
  font-size: 25px;
  font-weight: 500;
  color: #FFFFFF;
}
.sb-cta .cta-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  transition: transform 0.45s var(--al-ease), background-color 0.45s var(--al-ease), color 0.45s var(--al-ease);
}
.sb-cta:hover {
  background: var(--al-primary-hover);
  color: rgba(255, 255, 255, 0.9);
}
.sb-cta:hover .cta-go {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: translateX(6px);
}

/*======================
11. About Split
========================*/
/*---- 11.1 Collage ----*/
.about-collage {
  position: relative;
  padding: 22px 120px 120px 22px;
}
.about-collage .al-frame .frame-photo {
  aspect-ratio: 775 / 660;
}
.collage-second {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 46%;
  padding: 10px;
  border-radius: var(--al-radius);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg);
}
.collage-second img {
  width: 100%;
  aspect-ratio: 570 / 620;
  object-fit: cover;
  border-radius: var(--al-radius);
}
/* the rotating seal: text on a circle round a gold cross */
.al-seal {
  position: absolute;
  left: 46%;
  bottom: 30px;
  z-index: 3;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--al-night);
  color: var(--al-gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.al-seal svg {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  animation: al-spin 28s linear infinite;
}
.al-seal text {
  fill: #FFF8F0;
  font-family: var(--al-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.4px;
  text-transform: uppercase;
}
.al-seal i {
  font-size: 30px;
}
@keyframes al-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .al-seal svg { animation: none; }
}
/*---- 11.2 Copy ----*/
.about-copy {
  padding-left: 40px;
}
.about-copy .al-title {
  margin-bottom: 22px;
}
.about-copy .al-lead {
  margin-bottom: 14px;
}
/* the base's big number, now one of three facts on hairlines */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 30px 0 34px;
  border-top: 1px solid var(--al-line);
  border-bottom: 1px solid var(--al-line);
}
.about-stats > div {
  padding: 18px 0 16px;
}
.about-stats > div + div {
  padding-left: 26px;
  border-left: 1px solid var(--al-line);
}
.about-stats dt {
  order: 2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-muted);
}
.about-stats dd {
  margin: 0 0 4px;
  font-family: var(--al-ff-heading);
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-accent-text);
}
.about-stats > div {
  display: flex;
  flex-direction: column-reverse;
}
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.about-features .feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.feature-title {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 600;
}
.about-features p {
  margin: 0;
  font-size: 15px;
}
.feature:hover .al-icon-square {
  background: var(--al-primary);
  color: #FFFFFF;
}
.about-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--al-line);
}
.about-sign img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 3px var(--al-surface), 0 0 0 4px var(--al-gold);
}
.about-sign span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--al-muted);
  line-height: 1.35;
}
.about-sign b {
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: var(--al-heading);
}
.about-sign .al-btn {
  margin-left: auto;
}

/*======================
12. Community Work And Partners
========================*/
/*---- 12.1 Process Band ----*/
.head-note {
  max-width: 400px;
  margin: 0;
  font-size: 17px;
}
.al-night .head-note {
  color: var(--al-on-night);
}
.process {
  position: relative;
}
/* the gold line the four steps stand on */
.process-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--al-gold-rgb), 0) 0%, var(--al-gold) 8%, var(--al-gold) 92%, rgba(var(--al-gold-rgb), 0) 100%);
}
.step-card {
  position: relative;
  display: block;
  height: 100%;
  padding: 44px 26px 0 0;
}
.process > .row {
  --bs-gutter-y: 0;
}
.step-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--al-night);
  box-shadow: inset 0 0 0 2px var(--al-gold);
  transition: background-color 0.4s var(--al-ease), transform 0.4s var(--al-ease);
}
.step-card .al-numeral {
  margin-bottom: 18px;
}
.step-title {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 500;
  transition: color 0.4s var(--al-ease);
}
.step-card p {
  margin: 0 0 20px;
  color: var(--al-on-night);
}
.step-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-gold);
  opacity: 0.75;
  transition: opacity 0.4s var(--al-ease), gap 0.4s var(--al-ease);
}
.step-card:hover .step-dot {
  background: var(--al-gold);
  transform: scale(1.3);
}
.step-card:hover .step-title {
  color: var(--al-gold);
}
.step-card:hover .step-go {
  opacity: 1;
  gap: 16px;
}
/* the light version (Home 02, About) over the big church silhouette */
.al-community.is-light .step-card p {
  color: var(--al-text);
}
.al-community.is-light .step-dot {
  background: var(--al-bg-soft);
}
.al-community.is-light .step-go {
  color: var(--al-gold-text);
}
.al-community.is-light .step-card:hover .step-title {
  color: var(--al-accent-text);
}

/*---- 12.2 Partner Strip ----*/
.al-partners-strip {
  padding: 46px 0;
  border-bottom: 1px solid var(--al-line);
}
.partners-inner {
  display: flex;
  align-items: center;
  gap: 50px;
}
.partners-label {
  flex: 0 0 auto;
  max-width: 130px;
  font-family: var(--al-ff-heading);
  font-size: 20px;
  font-style: italic;
  line-height: 1.25;
  color: var(--al-heading);
}
.al-partners {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 34px;
}
.al-partners li {
  display: flex;
  justify-content: center;
}
.al-partners img {
  width: auto;
  max-width: 100%;
  max-height: 46px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.4s var(--al-ease), filter 0.4s var(--al-ease);
}
html[data-theme="dark"] .al-partners img {
  filter: grayscale(1) invert(1);
}
.al-partners img:hover {
  opacity: 1;
  filter: grayscale(0);
}
html[data-theme="dark"] .al-partners img:hover {
  filter: grayscale(1) invert(1);
}

/*======================
13. Events
========================*/
.head-side {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
/*---- 13.1 Featured Event ----*/
.event-feature {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ef-media {
  aspect-ratio: 16 / 9.5;
  border-radius: var(--al-radius-lg);
}
.ef-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ef-body {
  position: relative;
  z-index: 2;
  margin: -110px 40px 0;
  padding: 34px 36px 32px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg);
}
.ef-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.ef-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid var(--al-line);
}
.ef-date b {
  font-family: var(--al-ff-heading);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-accent-text);
}
.ef-date > span {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--al-muted);
}
.ef-title {
  margin-bottom: 20px;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 500;
}
.ef-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0;
  margin: 0 0 24px;
}
.ef-facts > div {
  padding-right: 24px;
}
.ef-facts > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--al-line);
}
.ef-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.ef-facts dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--al-heading);
}
.ef-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 440px;
  margin-bottom: 26px;
}
.ef-count span {
  background: var(--al-bg-soft);
  box-shadow: inset 0 0 0 1px var(--al-line);
  color: var(--al-muted);
}
.ef-count b {
  color: var(--al-accent-text);
}
.ef-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
}
/*---- 13.2 Event Rows ----*/
.event-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top: 1px solid var(--al-line);
}
.event-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--al-line);
  transition: padding 0.45s var(--al-ease);
}
.event-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--al-gold);
  transition: width 0.6s var(--al-ease);
}
.er-date {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 10px;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
  line-height: 1;
  transition: background-color 0.45s var(--al-ease), color 0.45s var(--al-ease);
}
.er-date b {
  font-family: var(--al-ff-heading);
  font-size: 34px;
  font-weight: 500;
  color: var(--al-heading);
}
.er-date span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-muted);
}
.er-body {
  flex: 1 1 auto;
  min-width: 0;
}
.er-title {
  margin: 4px 0 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.er-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  font-size: 14px;
  color: var(--al-muted);
}
.er-meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 12px 3px 0;
  border-radius: 50%;
  background: var(--al-gold);
  vertical-align: middle;
}
.er-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  transition: background-color 0.4s var(--al-ease), color 0.4s var(--al-ease), transform 0.4s var(--al-ease);
}
.event-row:hover {
  padding-left: 14px;
}
.event-row:hover::before {
  width: 100%;
}
.event-row:hover .er-date {
  background: var(--al-primary);
}
.event-row:hover .er-date b,
.event-row:hover .er-date span {
  color: #FFFFFF;
}
.event-row:hover .er-go {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: rotate(-45deg);
}

/*======================
14. Ministry Cards
========================*/
.ministry-grid {
  --bs-gutter-y: 80px;
  padding-top: 42px;
}
.ministry-card {
  position: relative;
  height: 100%;
  padding: 0 38px 40px;
  text-align: center;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  isolation: isolate;
  overflow: visible;
  transition: transform 0.55s var(--al-ease), box-shadow 0.55s var(--al-ease), color 0.55s var(--al-ease);
}
/* the wine wash that rises through the card on hover */
.ministry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--al-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--al-ease);
}
/* the disc half over the top edge (the base's Home 01 cards) */
.ministry-card.is-top .al-icon-disc {
  margin-top: -42px;
  margin-bottom: 26px;
}
/* the disc inside the card, top left (the base's Home 02 cards) */
.ministry-card.is-inside {
  padding-top: 44px;
  text-align: left;
}
.ministry-card.is-inside .al-icon-disc {
  margin-bottom: 28px;
}
.ministry-card .card-title {
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 500;
}
.ministry-card p {
  font-size: 15.5px;
  transition: color 0.55s var(--al-ease);
}
.card-meets {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 4px auto 24px !important;
  padding: 7px 16px;
  border-radius: 30px;
  background: var(--al-bg-soft);
  font-size: 14px !important;
  font-weight: 500;
  color: var(--al-heading);
  transition: background-color 0.55s var(--al-ease), color 0.55s var(--al-ease);
}
.card-meets span {
  font-weight: 600;
  color: var(--al-gold-text);
  transition: color 0.55s var(--al-ease);
}
.ministry-card.is-inside .card-meets {
  margin-left: 0 !important;
}
.ministry-card .card-title a,
.ministry-card .al-link {
  transition: color 0.55s var(--al-ease);
}
.ministry-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--al-shadow-lg);
}
.ministry-card:hover::before {
  transform: scaleY(1);
}
.ministry-card:hover .card-title a,
.ministry-card:hover .al-link {
  color: #FFFFFF;
}
.ministry-card:hover p {
  color: rgba(255, 255, 255, 0.78);
}
.ministry-card:hover .card-meets {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.ministry-card:hover .card-meets span {
  color: var(--al-gold);
}
.ministry-card:hover .al-icon-disc {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: rotate(-10deg) scale(1.04);
}

/*======================
15. Counters Band
========================*/
.al-counters {
  padding: 110px 0;
}
.counters-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.counter {
  padding: 6px 30px;
  text-align: center;
}
.counter + .counter {
  border-left: 1px solid var(--al-line-night);
}
.counter b {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--al-ff-heading);
  font-size: clamp(56px, 5.4vw, 86px);
  font-weight: 500;
  line-height: 1;
  color: #FFF8F0;
  isolation: isolate;
}
/* the base's dotted block under the lower half of every number */
.counter b::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -4px;
  height: 44%;
  z-index: -1;
  background-image: radial-gradient(rgba(var(--al-gold-rgb), 0.45) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
}
.counter b i {
  font-style: normal;
  color: var(--al-gold);
}
.counter > span {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-on-night);
}

/*======================
16. Team Cards
========================*/
/* the base's portrait with a name plate set over its foot */
.team-card {
  position: relative;
  height: 100%;
}
.team-photo {
  position: relative;
  display: block;
  aspect-ratio: 320 / 380;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--al-night-rgb), 0) 55%, rgba(var(--al-night-rgb), 0.55) 100%);
  opacity: 0;
  transition: opacity 0.6s var(--al-ease);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
}
.team-card:hover .team-photo::after {
  opacity: 1;
}
.team-plate {
  position: relative;
  z-index: 2;
  margin: -64px 28px 0;
  padding: 24px 22px 22px;
  text-align: center;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow);
  transition: transform 0.5s var(--al-ease), box-shadow 0.5s var(--al-ease);
}
.team-plate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 44px;
  height: 2px;
  margin-left: -22px;
  background: var(--al-gold);
}
.team-name {
  margin-bottom: 2px;
  font-size: 28px;
  font-weight: 500;
}
.team-role {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.team-plate .al-social {
  justify-content: center;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--al-ease), opacity 0.5s var(--al-ease), margin 0.5s var(--al-ease);
}
.team-plate .al-social a {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
.team-card:hover .team-plate {
  transform: translateY(-12px);
  box-shadow: var(--al-shadow-lg);
}
.team-card:hover .team-plate .al-social,
.team-card:focus-within .team-plate .al-social {
  max-height: 60px;
  margin-top: 14px;
  opacity: 1;
}
/* Home 02: the plate under the photograph */
.al-team.is-under .team-plate {
  margin: 0;
  border-radius: 0 0 var(--al-radius-lg) var(--al-radius-lg);
  box-shadow: 0 0 0 1px var(--al-line);
}
.al-team.is-under .team-photo {
  border-radius: var(--al-radius-lg) var(--al-radius-lg) 0 0;
  overflow: hidden;
}
.al-team.is-under .team-card:hover .team-plate {
  transform: none;
}

/*======================
17. Appeal And Candle Row
========================*/
/*---- 17.1 Progress Bars And Cause Figures ----*/
.al-progress {
  position: relative;
  height: 6px;
  margin: 34px 0 0;
  border-radius: 6px;
  background: var(--al-line);
}
.al-night .al-progress {
  background: rgba(255, 255, 255, 0.12);
}
.al-progress .bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--al-pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--al-primary), var(--al-gold));
  transition: width 1.8s var(--al-ease);
}
.al-progress .bar-fill::after {
  /* a small gold bead at the end of the bar */
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--al-gold);
  box-shadow: 0 0 0 4px rgba(var(--al-gold-rgb), 0.25);
}
.al-progress .bar-pct {
  position: absolute;
  right: 0;
  bottom: 16px;
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--al-heading);
}
.al-night .al-progress .bar-pct {
  color: var(--al-gold);
}
.al-progress.is-thin {
  height: 4px;
  margin: 0;
  border-radius: 0;
}
.al-progress.is-thin .bar-fill::after {
  display: none;
}
.cause-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 0;
  border-top: 1px solid var(--al-line);
  border-bottom: 1px solid var(--al-line);
}
.al-night .cause-stats,
.al-night .cause-stats > div + div {
  border-color: var(--al-line-night);
}
.cause-stats > div {
  padding: 18px 0;
}
.cause-stats > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--al-line);
}
.cause-stats dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.al-night .cause-stats dt {
  color: var(--al-gold);
}
.cause-stats dd {
  margin: 4px 0 0;
  font-family: var(--al-ff-heading);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--al-heading);
}
.al-night .cause-stats dd {
  color: #FFF8F0;
}

/*---- 17.2 The Appeal ----*/
.al-appeal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.al-appeal::before {
  /* the warm pool of light the candles stand in */
  content: "";
  position: absolute;
  right: -10%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: -1;
  background: radial-gradient(circle, rgba(var(--al-gold-rgb), calc(0.2 * var(--al-glow, 1))) 0%, rgba(var(--al-gold-rgb), 0) 62%);
}
.appeal-copy .al-lead {
  margin: 20px 0 0;
}
.appeal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 40px;
}

/*---- 17.3 Candles ----*/
.appeal-candles {
  padding-left: 40px;
}
.candle-row {
  position: relative;
}
.candle-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 330px;
  padding: 0 26px;
}
.candle-shelf::after {
  /* the brass ledge the candles stand on */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #B08A4A 0%, #6E5230 100%);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
}
.candle {
  position: relative;
  flex: 0 0 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.candle-wax {
  display: block;
  width: 38px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #D9CDBE 0%, #FBF6EF 42%, #CDBFAE 100%);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.4);
}
.candle.h-86 .candle-wax { height: 86px; }
.candle.h-94 .candle-wax { height: 94px; }
.candle.h-98 .candle-wax { height: 98px; }
.candle.h-108 .candle-wax { height: 108px; }
.candle.h-116 .candle-wax { height: 116px; }
.candle.h-120 .candle-wax { height: 120px; }
.candle.h-124 .candle-wax { height: 124px; }
.candle.h-132 .candle-wax { height: 132px; }
.candle.h-138 .candle-wax { height: 138px; }
.candle.h-150 .candle-wax { height: 150px; }
.candle-wick {
  display: block;
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: #2C2622;
}
.candle-flame {
  position: relative;
  display: block;
  width: 18px;
  height: 38px;
  margin-bottom: -3px;
  transform-origin: 50% 92%;
  transform: scale(var(--al-lit, 0));
}
.candle.is-lit .candle-flame {
  --al-lit: 1;
}
.candle.is-part .candle-flame {
  --al-lit: 0.55;
}
.candle-flame span {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 80%, #FFFFFF 0%, #FFF3C4 24%, var(--al-gold) 55%, rgba(var(--al-primary-rgb), 0.85) 82%, rgba(var(--al-primary-rgb), 0) 100%);
  animation: al-flicker 0.26s ease-in-out infinite alternate;
}
.candle-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--al-gold-rgb), 0.32) 0%, rgba(var(--al-gold-rgb), 0) 68%);
}
.candle-note {
  margin: 42px 0 0;
  text-align: center;
  color: var(--al-on-night);
}
.candle-note b {
  font-family: var(--al-ff-heading);
  font-size: 24px;
  font-weight: 500;
  color: var(--al-gold);
}

/*======================
18. Testimonials
========================*/
.testi-copy {
  padding-left: 30px;
}
.testi-copy .al-title {
  margin-bottom: 34px;
}
.testi-slider {
  overflow: hidden;
}
.testi-quote {
  position: relative;
  margin: 0;
  padding-left: 0;
}
.testi-quote p {
  margin: 0 0 26px;
  font-family: var(--al-ff-heading);
  font-size: clamp(24px, 2vw, 31px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--al-heading);
}
.testi-quote footer {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--al-muted);
}
.testi-quote footer b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-accent-text);
}
.testi-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--al-line);
}
/* the people speaking, as the slider's own tabs */
.testi-faces {
  display: flex;
  gap: 12px;
}
.testi-faces button {
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  box-shadow: 0 0 0 3px var(--al-bg-soft), 0 0 0 4px transparent;
  transition: opacity 0.4s var(--al-ease), box-shadow 0.4s var(--al-ease), transform 0.4s var(--al-ease);
}
.testi-faces img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.testi-faces button:hover {
  opacity: 0.85;
}
.testi-faces button.is-active {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--al-bg-soft), 0 0 0 5px var(--al-gold);
  transform: scale(1.06);
}
.testi-media {
  position: relative;
  max-width: 520px;
  isolation: isolate;
}
.testi-badge {
  position: absolute;
  right: 6%;
  bottom: 10%;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--al-primary);
  color: var(--al-gold);
  font-size: 30px;
  box-shadow: 0 0 0 8px var(--al-bg-soft), var(--al-shadow);
}

/*======================
19. Sermon Rows And Latest Sermon
========================*/
/*---- 19.1 Sermon Rows ----*/
.sermon-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  height: 100%;
  padding: 22px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: box-shadow 0.45s var(--al-ease), transform 0.45s var(--al-ease);
}
.sermon-row:hover {
  transform: translateY(-6px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.sermon-thumb {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: var(--al-radius);
}
.sermon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sermon-body {
  flex: 1 1 auto;
  min-width: 0;
}
.sermon-series {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.sermon-title {
  margin: 4px 0 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.sermon-by {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--al-muted);
}
.sermon-by b {
  font-weight: 600;
  color: var(--al-heading);
}
.sermon-when {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--al-muted);
}
.sermon-when span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: var(--al-gold);
  vertical-align: middle;
}
.sermon-tools {
  display: flex;
  gap: 8px;
}
.sermon-tools a,
.sermon-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.sermon-tools button {
  background: var(--al-primary);
  color: #FFFFFF;
}
.sermon-tools a:hover,
.sermon-tools button:hover,
.sermon-tools .is-playing {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
/*---- 19.2 Latest Sermon ----*/
.sermon-feature {
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.sf-media {
  position: relative;
  height: 100%;
  min-height: 420px;
  isolation: isolate;
}
.sf-media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--al-night-rgb), 0.05) 40%, rgba(var(--al-night-rgb), 0.55) 100%);
}
.sf-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 26px;
  cursor: pointer;
  transition: transform 0.45s var(--al-ease), background-color 0.45s var(--al-ease), color 0.45s var(--al-ease);
}
.sf-play i {
  margin-left: 5px;
}
.sf-play:hover,
.sf-play.is-playing {
  transform: scale(1.08);
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.sf-tag {
  position: absolute;
  left: 26px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--al-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sf-copy {
  padding: 56px 56px 52px;
}
.sf-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 26px 0 24px;
  border-top: 1px solid var(--al-line);
}
.sf-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--al-line);
}
.sf-facts > div:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--al-line);
}
.sf-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.sf-facts dd {
  margin: 2px 0 0;
  font-family: var(--al-ff-heading);
  font-size: 21px;
  font-weight: 500;
  color: var(--al-heading);
}
.sf-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 30px;
}
.ls-recent {
  margin-top: 40px;
}

/*======================
20. Post Cards
========================*/
.post-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: box-shadow 0.45s var(--al-ease), transform 0.45s var(--al-ease);
}
.post-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.post-photo {
  position: relative;
}
.post-photo .al-zoom {
  aspect-ratio: 16 / 10;
}
.post-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 32px 32px;
}
.post-title {
  margin: 10px 0 14px;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.22;
}
.post-card.is-large .post-title {
  font-size: clamp(30px, 2.4vw, 38px);
}
.post-body .al-link {
  margin-top: auto;
}
.post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--al-line);
}
.post-foot .al-link {
  margin-top: 0;
}
.post-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--al-heading);
}
.post-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
/* the magazine stack: two posts side by side with their photograph */
.mag-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}
.post-row {
  flex: 1 1 0;
  display: flex;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: box-shadow 0.45s var(--al-ease), transform 0.45s var(--al-ease);
}
.post-row:hover {
  transform: translateY(-6px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.post-thumb {
  flex: 0 0 44%;
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-row .post-body {
  justify-content: center;
  padding: 30px;
}
.post-row .post-title {
  font-size: 25px;
}
.post-row .post-body .al-link {
  margin-top: 6px;
}

/*======================
21. Hero Two
========================*/
/* Home 02: an ivory hero; the photographs stand in an arched church window */
.al-hero-two {
  position: relative;
  padding-top: 136px;
  background: var(--al-bg-soft);
  overflow: hidden;
  isolation: isolate;
}
.h2-watermark {
  position: absolute;
  left: -2vw;
  bottom: 70px;
  z-index: -1;
  font-family: var(--al-ff-heading);
  font-size: clamp(160px, 22vw, 380px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--al-gold-rgb), 0.35);
  pointer-events: none;
  user-select: none;
}
.al-hero-two .hero-slide {
  padding: 70px 0 120px;
  background: var(--al-bg-soft);
}
.al-hero-two .hero-copy {
  max-width: 560px;
}
.al-hero-two .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--al-accent-text);
}
.al-hero-two .hero-kicker::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--al-gold);
}
.al-hero-two .hero-title {
  margin: 0 0 26px;
  font-size: clamp(64px, 8vw, 138px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--al-heading);
}
.al-hero-two .hero-title em {
  color: var(--al-accent-text);
}
.al-hero-two .hero-lead {
  max-width: 470px;
  margin: 0 0 38px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--al-text);
}
.al-hero-two .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* the photograph cut to a church window: a round arch over a tall rectangle */
.arch-photo {
  position: relative;
  width: 82%;
  margin-left: auto;
  aspect-ratio: 5 / 6.2;
  border-radius: 999px 999px var(--al-radius-lg) var(--al-radius-lg);
  overflow: hidden;
  box-shadow: var(--al-shadow-lg);
}
.arch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}
.swiper-slide-active .arch-photo img {
  transform: scale(1);
}
/* the layer above the slides: the gold arch line, its light and the controls */
.arch-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 136px;
  z-index: 3;
  padding-top: 70px;
  pointer-events: none;
}
.arch-frame {
  position: relative;
  width: 82%;
  margin-left: auto;
  aspect-ratio: 5 / 6.2;
}
.arch-line {
  position: absolute;
  inset: -20px -20px 26px 26px;
  border: 1px solid var(--al-gold);
  border-radius: 999px 999px var(--al-radius-lg) var(--al-radius-lg);
}
.arch-frame .al-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px 999px var(--al-radius-lg) var(--al-radius-lg);
  mix-blend-mode: screen;
}
.hero-two-nav {
  position: absolute;
  left: -40px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 60px;
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg);
  pointer-events: auto;
}
.hero-two-nav .hero-count {
  min-width: 64px;
  font-family: var(--al-ff-heading);
  font-size: 17px;
  text-align: center;
  color: var(--al-muted);
}
.hero-two-nav .hero-count b {
  font-size: 24px;
  font-weight: 500;
  color: var(--al-heading);
}
.hero-two-nav .al-arrow {
  width: 50px;
  height: 50px;
}
/* the week, in one line under the hero */
.h2-week {
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--al-line);
  background: var(--al-surface);
}
.h2-week ul {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.h2-week li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 26px 28px;
  font-size: 14px;
}
.h2-week li + li {
  border-left: 1px solid var(--al-line);
}
.h2-week li:first-child {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-left: 0;
}
.h2-week li span:not(.al-status) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.h2-week li:first-child span:not(.al-status) {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--al-muted);
}
.h2-week b {
  font-family: var(--al-ff-heading);
  font-size: 21px;
  font-weight: 500;
  color: var(--al-heading);
}

/*======================
22. Live Band And Glass Daybreak
========================*/
.al-live-band {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--al-night);
  text-align: center;
}
.live-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.live-glass img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
}
/* dusk: the same window drained of colour; it fades as the band scrolls in */
.glass-dusk {
  filter: grayscale(1) brightness(0.5) contrast(1.1);
  opacity: var(--al-dusk, 0);
}
.glass-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--al-night-rgb), 0.55) 0%, rgba(var(--al-night-rgb), 0.82) 100%);
  opacity: var(--al-veil, 1);
}
/* two shafts of light that sweep across with the scroll */
.glass-shaft {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 24%;
  background: linear-gradient(90deg, rgba(255, 236, 200, 0) 0%, rgba(255, 236, 200, 0.16) 50%, rgba(255, 236, 200, 0) 100%);
  transform: translateX(var(--al-shaft, 0%)) skewX(-18deg);
  mix-blend-mode: screen;
  pointer-events: none;
}
.glass-shaft.is-one {
  left: 10%;
}
.glass-shaft.is-two {
  left: 52%;
  width: 14%;
  opacity: 0.7;
}
.live-inner {
  max-width: 900px;
  margin: 0 auto;
}
.live-inner .al-title {
  margin-bottom: 44px;
  color: #FFF8F0;
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 54px;
  padding: 10px 24px 10px 10px;
  border-radius: 40px;
  background: rgba(var(--al-night-rgb), 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  text-align: left;
}
.live-status .al-status {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.live-status p {
  margin: 0;
  font-size: 15px;
  color: var(--al-on-night);
}
.live-status b {
  color: #FFF8F0;
}
.live-status .sc-until {
  color: var(--al-gold);
}

/*======================
23. Gallery Mosaic
========================*/
/* the base's full-bleed mosaic: two small left, one tall centre, two small right */
.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  grid-template-rows: 340px 340px;
  gap: 6px;
}
.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.gallery-tile.is-a { grid-column: 1; grid-row: 1; }
.gallery-tile.is-b { grid-column: 1; grid-row: 2; }
.gallery-tile.is-c { grid-column: 2; grid-row: 1 / span 2; }
.gallery-tile.is-d { grid-column: 3; grid-row: 1; }
.gallery-tile.is-e { grid-column: 3; grid-row: 2; }
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--al-ease);
}
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--al-night-rgb), 0) 45%, rgba(var(--al-night-rgb), 0.85) 100%);
  opacity: 0;
  transition: opacity 0.6s var(--al-ease);
}
.tile-cap {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--al-ease), transform 0.6s var(--al-ease);
}
.tile-cap b {
  font-family: var(--al-ff-heading);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #FFF8F0;
}
.gallery-tile:hover img {
  transform: scale(1.07);
}
.gallery-tile:hover::after,
.gallery-tile:hover .tile-cap {
  opacity: 1;
}
.gallery-tile:hover .tile-cap {
  transform: none;
}

/*======================
24. Partner Plans
========================*/
.plans-toggle {
  display: flex;
  justify-content: center;
  width: max-content;
  margin: -24px auto 90px;
  padding: 6px;
  border-radius: 40px;
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.plans-toggle button {
  padding: 11px 26px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--al-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.plans-toggle button.is-active {
  background: var(--al-primary);
  color: #FFFFFF;
}
.plans-grid {
  --bs-gutter-y: 90px;
}
/* the base's coral price circle, now wine with a gold ring, over the card's top */
.plan-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px 42px;
  text-align: center;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: transform 0.5s var(--al-ease), box-shadow 0.5s var(--al-ease);
}
.plan-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  margin: -70px 0 26px;
  border-radius: 50%;
  background: var(--al-primary);
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 8px var(--al-surface), 0 0 0 9px rgba(var(--al-gold-rgb), 0.6), var(--al-shadow);
  font-size: 13px;
  line-height: 1.2;
}
.plan-price b {
  font-family: var(--al-ff-heading);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
}
.plan-name {
  margin-bottom: 4px;
  font-size: 34px;
  font-weight: 500;
}
.plan-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
/* what the gift does: label / value rows on hairlines (no tick lists) */
.plan-rows {
  width: 100%;
  margin: 26px 0 8px;
  border-top: 1px solid var(--al-line);
}
.plan-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--al-line);
  text-align: left;
}
.plan-rows dt {
  font-size: 15px;
  font-weight: 400;
}
.plan-rows dd {
  margin: 0;
  font-family: var(--al-ff-heading);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-heading);
}
.plan-note {
  margin: 0 0 26px;
  font-size: 13px;
  color: var(--al-muted);
}
.plan-card .al-btn {
  margin-top: auto;
}
.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
/* the middle plan, on night */
.plan-card.is-featured {
  background: var(--al-night);
  color: var(--al-on-night);
  box-shadow: var(--al-shadow-lg);
}
.plan-card.is-featured .plan-price {
  background: var(--al-gold);
  color: rgba(27, 21, 34, 0.75);
  box-shadow: 0 0 0 8px var(--al-night), 0 0 0 9px rgba(var(--al-gold-rgb), 0.6), var(--al-shadow);
}
.plan-card.is-featured .plan-price b {
  color: var(--al-on-gold);
}
.plan-card.is-featured .plan-name,
.plan-card.is-featured .plan-rows dd {
  color: #FFF8F0;
}
.plan-card.is-featured .plan-tag {
  color: var(--al-gold);
}
.plan-card.is-featured .plan-rows,
.plan-card.is-featured .plan-rows > div {
  border-color: var(--al-line-night);
}
.plan-card.is-featured .plan-note {
  color: var(--al-on-night);
}

/*======================
25. Message Band
========================*/
.al-message {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.message-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.message-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.message-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--al-night-rgb), 0.96) 0%, rgba(var(--al-night-rgb), 0.82) 55%, rgba(var(--al-night-rgb), 0.6) 100%);
}
.message-copy .al-lead {
  margin: 20px 0 34px;
}
.message-facts li {
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  border-top: 1px solid var(--al-line-night);
}
.message-facts li:last-child {
  border-bottom: 1px solid var(--al-line-night);
}
.message-facts span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.message-facts b {
  font-weight: 500;
  color: #FFF8F0;
}
/* the form in night glass */
.message-form {
  padding: 46px;
  border-radius: var(--al-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.al-night .al-field > label {
  color: #FFF8F0;
}
.al-night .al-input input,
.al-night .al-input textarea {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #FFF8F0;
}
.al-night .al-input input::placeholder,
.al-night .al-input textarea::placeholder {
  color: rgba(255, 248, 240, 0.5);
}
.al-night .al-input > i {
  color: var(--al-gold);
}
.al-night .form-status.is-error {
  color: #F2A49B;
}
.al-night .form-status.is-success {
  color: #9FD8B0;
}

/*======================
26. Sermon Cards And About Two
========================*/
/*---- 26.1 Sermon Cards ----*/
.sermon-card {
  height: 100%;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: transform 0.5s var(--al-ease), box-shadow 0.5s var(--al-ease);
}
.sermon-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.sc-photo {
  position: relative;
}
.sc-photo .al-zoom {
  aspect-ratio: 16 / 9.6;
}
.sc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-play {
  position: absolute;
  right: 26px;
  bottom: -32px;
  z-index: 3;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 18px;
  box-shadow: 0 0 0 6px var(--al-surface);
  cursor: pointer;
  transition: transform 0.4s var(--al-ease), background-color 0.4s var(--al-ease), color 0.4s var(--al-ease);
}
.sc-play i {
  margin-left: 3px;
}
.sc-play:hover,
.sc-play.is-playing {
  background: var(--al-primary);
  color: #FFFFFF;
  transform: scale(1.08);
}
.sc-body {
  padding: 36px 36px 32px;
}
.sc-title {
  margin: 10px 0 14px;
  font-size: clamp(27px, 2.2vw, 34px);
  font-weight: 500;
}
.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--al-line);
  font-size: 14px;
  color: var(--al-muted);
}
/*---- 26.2 About Two Media ----*/
.al-about.is-two .about-media {
  position: relative;
  padding: 22px 22px 60px 0;
}
.al-about.is-two .about-media .frame-photo {
  aspect-ratio: 775 / 680;
}
.media-quote {
  position: absolute;
  left: -40px;
  bottom: 0;
  z-index: 3;
  max-width: 290px;
  padding: 26px 28px;
  border-radius: var(--al-radius-lg);
  background: var(--al-primary);
  color: #FFFFFF;
  box-shadow: var(--al-shadow-lg);
}
.media-quote i {
  font-size: 22px;
  color: var(--al-gold);
}
.media-quote p {
  margin: 10px 0 0;
  font-family: var(--al-ff-heading);
  font-size: 25px;
  font-style: italic;
  line-height: 1.3;
}
.about-copy.is-left {
  padding-left: 0;
  padding-right: 40px;
}



/* the speaker's round portrait before the name */
.sc-by,
.sermon-by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sc-by .al-byline-avatar,
.sermon-by .al-byline-avatar {
  width: 34px;
  height: 34px;
}

/*======================
27. Sidebar Widgets
========================*/
.al-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.al-sidebar.is-sticky {
  position: sticky;
  top: 110px;
}
.widget {
  padding: 32px 30px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.widget.is-soft {
  background: var(--al-bg-soft);
  box-shadow: none;
}
.widget-title {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 14px;
  font-size: 26px;
  font-weight: 500;
}
.widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--al-gold);
}
/* search */
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 58px 0 20px;
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  background: var(--al-surface);
  color: var(--al-heading);
  font-family: var(--al-ff-body);
  font-size: 15px;
}
.widget-search input:focus {
  outline: none;
  border-color: var(--al-gold);
}
.widget-search button {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--al-radius);
  background: var(--al-primary);
  color: #FFFFFF;
  cursor: pointer;
}
/* a list of links with a count (categories, ministries, series) */
.widget-list li + li {
  margin-top: 8px;
}
.widget-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
  color: var(--al-heading);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease), padding 0.35s var(--al-ease);
}
.widget-list a span,
.widget-list a i {
  font-size: 13px;
  color: var(--al-gold-text);
}
.widget-list a:hover,
.widget-list a.is-active,
.widget-list a[aria-current="page"] {
  padding-left: 22px;
  background: var(--al-primary);
  color: #FFFFFF;
}
.widget-list a:hover span,
.widget-list a.is-active span,
.widget-list a[aria-current="page"] span,
.widget-list a:hover i,
.widget-list a[aria-current="page"] i {
  color: var(--al-gold);
}
/* recent posts / sermons */
.widget-recent li + li {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--al-line);
}
.widget-recent a {
  display: flex;
  align-items: center;
  gap: 16px;
}
.widget-recent img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--al-radius);
  object-fit: cover;
}
.widget-recent a > span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--al-muted);
}
.widget-recent b {
  margin-top: 3px;
  font-family: var(--al-ff-heading);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--al-heading);
  transition: color 0.3s var(--al-ease);
}
.widget-recent a:hover b {
  color: var(--al-accent-text);
}
/* tags */
.widget-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.widget-tags a {
  padding: 7px 15px;
  border-radius: 30px;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 14px;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.widget-tags a:hover {
  background: var(--al-primary);
  color: #FFFFFF;
}
/* a person (pastor, leader, author) */
.widget-person {
  text-align: center;
}
.widget-person img {
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 4px var(--al-surface), 0 0 0 5px var(--al-gold);
}
.widget-person h4 {
  margin-bottom: 2px;
  font-size: 26px;
  font-weight: 500;
}
.widget-person > span {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.widget-person .al-social {
  justify-content: center;
}
/* a night call-to-action card */
.widget-cta {
  position: relative;
  overflow: hidden;
  padding: 40px 32px;
  border-radius: var(--al-radius-lg);
  background: var(--al-night);
  color: var(--al-on-night);
  isolation: isolate;
}
.widget-cta img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.widget-cta h4 {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #FFF8F0;
}
.widget-cta p {
  font-size: 15px;
}
/* label / value rows (meeting times, facts) */
.al-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--al-line);
}
.al-facts > div:first-child {
  padding-top: 0;
}
.al-facts dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.al-facts dd {
  margin: 0;
  font-weight: 500;
  color: var(--al-heading);
  text-align: right;
}

/*======================
28. About And FAQ Components
========================*/
/*---- 28.1 Goals ----*/
.goals-media {
  position: relative;
  max-width: 480px;
  isolation: isolate;
}
.goals-year {
  position: absolute;
  left: 0;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--al-primary);
  color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 8px var(--al-bg-soft), var(--al-shadow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.goals-year b {
  font-family: var(--al-ff-heading);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--al-gold);
}
.goals-copy .al-lead {
  margin: 20px 0 10px;
}
.goal {
  padding-top: 30px;
}
.goal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: -18px;
}
.goal-head b {
  font-family: var(--al-ff-heading);
  font-size: 23px;
  font-weight: 500;
  color: var(--al-heading);
}
.goal-head span {
  margin-right: 70px;
  font-size: 14px;
  color: var(--al-muted);
}
.goal-head em {
  font-style: normal;
  font-weight: 600;
  color: var(--al-heading);
}
/*---- 28.2 Accordion ----*/
.al-accordion {
  margin-top: 34px;
  border-top: 1px solid var(--al-line);
}
.faq-item {
  border-bottom: 1px solid var(--al-line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-num {
  flex: 0 0 auto;
  font-family: var(--al-ff-heading);
  font-size: 19px;
  font-style: italic;
  color: var(--al-gold-text);
}
.faq-q {
  flex: 1 1 auto;
  font-family: var(--al-ff-heading);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--al-heading);
  transition: color 0.3s var(--al-ease);
}
.faq-icon {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--al-tonal);
  transition: background-color 0.35s var(--al-ease), transform 0.45s var(--al-ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  margin: -0.75px 0 0 -6.5px;
  background: var(--al-heading);
  transition: transform 0.45s var(--al-ease), background-color 0.35s var(--al-ease);
}
.faq-icon::after {
  transform: rotate(90deg);
}
.faq-item details[open] .faq-icon {
  background: var(--al-primary);
  transform: rotate(180deg);
}
.faq-item details[open] .faq-icon::before,
.faq-item details[open] .faq-icon::after {
  background: #FFFFFF;
}
.faq-item details[open] .faq-icon::after {
  transform: rotate(0deg);
}
.faq-item details[open] .faq-q,
.faq-item summary:hover .faq-q {
  color: var(--al-accent-text);
}
.faq-a {
  padding: 0 58px 22px 38px;
}
.faq-a p {
  margin: 0;
}
/*---- 28.3 Quote Cards ----*/
.al-rail {
  overflow: hidden;
}
.al-rail .swiper-slide {
  height: auto;
}
.quote-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 38px 36px 34px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: box-shadow 0.45s var(--al-ease);
}
.quote-card:hover {
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.quote-card > i {
  font-size: 26px;
  color: var(--al-gold);
}
.quote-card blockquote {
  margin: 18px 0 26px;
}
.quote-card blockquote p {
  margin: 0;
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: var(--al-heading);
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--al-line);
}
.quote-card figcaption img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.quote-card figcaption span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--al-muted);
}
.quote-card figcaption b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-accent-text);
}
.faq-media {
  padding: 22px 22px 22px 22px;
}
.faq-media .frame-photo {
  aspect-ratio: 775 / 700;
}

/*======================
29. History, Team And Filters
========================*/
/*---- 29.1 Filter Tabs ----*/
.al-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.al-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 30px;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.al-filter button span {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 12px;
  background: var(--al-surface);
  color: var(--al-muted);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.al-filter button:hover {
  color: var(--al-accent-text);
}
.al-filter button.is-active {
  background: var(--al-primary);
  color: #FFFFFF;
}
.al-filter button.is-active span {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.al-filter button.is-empty {
  opacity: 0.45;
}
/*---- 29.2 Static Film Band ----*/
.al-live-band.is-static .glass-veil {
  opacity: 1;
}
/*---- 29.3 Timeline ----*/
.timeline {
  position: relative;
  padding: 20px 0;
}
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(var(--al-gold-rgb), 0) 0%, var(--al-gold) 6%, var(--al-gold) 94%, rgba(var(--al-gold-rgb), 0) 100%);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0 110px;
  padding: 30px 0;
}
.tl-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19px;
  height: 19px;
  margin: -9.5px 0 0 -9.5px;
  border-radius: 50%;
  background: var(--al-bg);
  box-shadow: inset 0 0 0 2px var(--al-gold), 0 0 0 6px var(--al-bg);
  transition: background-color 0.4s var(--al-ease);
}
.tl-item:hover .tl-dot {
  background: var(--al-gold);
}
.tl-item.is-left .tl-when {
  order: 2;
}
.tl-item.is-left .tl-card {
  order: 1;
}
.tl-item.is-right .tl-when {
  text-align: right;
}
.tl-when b {
  display: block;
  font-family: var(--al-ff-heading);
  font-size: clamp(56px, 6vw, 96px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--al-gold);
}
.tl-when span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.tl-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: box-shadow 0.45s var(--al-ease), transform 0.45s var(--al-ease);
}
.tl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.tl-card img {
  flex: 0 0 132px;
  width: 132px;
  height: 132px;
  border-radius: var(--al-radius);
  object-fit: cover;
}
.tl-title {
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 500;
}
.tl-body p {
  margin: 0;
  font-size: 15px;
}
/*---- 29.4 Join Band ----*/
.al-join {
  padding: 110px 0;
}
.join-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}
.join-inner > div:first-child {
  max-width: 640px;
}
.join-inner .al-lead {
  margin: 16px 0 0;
}
.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/*======================
30. Ministry Pages
========================*/
/*---- 30.1 Solo Photo And Points ----*/
.about-media.is-solo {
  position: relative;
  padding: 22px;
}
.about-media.is-solo .frame-photo {
  aspect-ratio: 775 / 680;
}
.why-points {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 30px;
}
.why-points .feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.why-points p {
  margin: 0;
}
/*---- 30.2 Ministry Finder ----*/
.finder-form {
  position: sticky;
  top: 110px;
  padding: 40px 36px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.finder-title {
  margin-bottom: 28px;
  font-size: clamp(32px, 2.8vw, 44px);
}
.finder-form .al-field + .finder-loves,
.finder-loves + .al-field {
  margin-top: 26px;
}
.finder-loves {
  margin: 0;
  padding: 0;
  border: 0;
}
.love-chip {
  display: inline-block;
  margin: 0 6px 8px 0;
  cursor: pointer;
}
.love-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.love-chip span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 30px;
  background: var(--al-surface);
  color: var(--al-heading);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--al-line);
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease), box-shadow 0.3s var(--al-ease);
}
.love-chip i {
  font-size: 12px;
  color: var(--al-gold-text);
  transition: color 0.3s var(--al-ease);
}
.love-chip input:checked + span {
  background: var(--al-primary);
  color: #FFFFFF;
  box-shadow: none;
}
.love-chip input:checked + span i {
  color: var(--al-gold);
}
.love-chip input:focus-visible + span {
  outline: 2px solid var(--al-gold);
  outline-offset: 2px;
}
.finder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.finder-count {
  margin: 0;
  font-size: 15px;
  color: var(--al-muted);
}
.finder-count b {
  font-family: var(--al-ff-heading);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-accent-text);
}
.finder-list {
  border-top: 1px solid var(--al-line);
}
.finder-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 6px;
  border-bottom: 1px solid var(--al-line);
  transition: opacity 0.4s var(--al-ease), padding 0.4s var(--al-ease);
}
.finder-row .al-icon-disc {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  font-size: 26px;
  box-shadow: inset 0 0 0 1px rgba(var(--al-gold-rgb), 0.55);
}
.fr-body {
  flex: 1 1 auto;
  min-width: 0;
}
.fr-title {
  margin: 0 0 4px;
  font-size: 25px;
  font-weight: 500;
}
.fr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  font-size: 14px;
  color: var(--al-muted);
}
.fr-meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 12px 3px 0;
  border-radius: 50%;
  background: var(--al-gold);
  vertical-align: middle;
}
.fr-match {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(var(--al-gold-rgb), 0.16);
  color: var(--al-gold-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.finder-row.is-best .fr-match {
  background: var(--al-primary);
  color: #FFFFFF;
}
.finder-row:hover {
  padding-left: 14px;
}
.finder-row:hover .er-go {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: rotate(-45deg);
}
.finder-empty {
  padding: 30px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
/*---- 30.3 Detail Page ----*/
.detail-hero {
  position: relative;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
}
.detail-hero img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.detail-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 30px;
  background: var(--al-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.detail-badge i {
  color: var(--al-gold);
}
.detail-main > h2:first-of-type {
  margin-top: 0;
}
.detail-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 26px 0 30px;
}
.detail-step {
  padding: 30px 26px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.detail-step .al-numeral {
  font-size: 58px;
  margin-bottom: 12px;
}
.detail-step h4 {
  margin-bottom: 6px;
  font-size: 23px;
  font-weight: 500;
}
.detail-step p {
  margin: 0;
  font-size: 15px;
}
.detail-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 10px 0 40px;
}
.detail-gallery a {
  border-radius: var(--al-radius-lg);
}
.detail-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.detail-join {
  padding: 40px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow), 0 0 0 1px var(--al-line);
}
.detail-join h3 {
  margin-top: 0;
}
.cta-files {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/*======================
31. Sermon Pages
========================*/
/*---- 31.1 Current Series ----*/
.series-card {
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-shadow-lg);
}
.series-media {
  position: relative;
  height: 100%;
  min-height: 420px;
  isolation: isolate;
}
.series-media img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.series-copy {
  padding: 56px 54px 48px;
}
.series-copy .al-title {
  margin-bottom: 16px;
  font-size: clamp(34px, 3vw, 48px);
}
.series-parts {
  margin-top: 28px;
  border-top: 1px solid var(--al-line-night);
}
.series-parts li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--al-line-night);
}
.part-num {
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-style: italic;
  color: var(--al-gold);
}
.part-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--al-on-night);
}
.part-body b {
  font-family: var(--al-ff-heading);
  font-size: 21px;
  font-weight: 500;
  color: #FFF8F0;
}
.part-play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.part-play:hover,
.part-play.is-playing {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
/*---- 31.2 Library ----*/
.library-count {
  margin: 0;
  color: var(--al-muted);
}
.library-count b {
  font-family: var(--al-ff-heading);
  font-size: 30px;
  font-weight: 500;
  color: var(--al-accent-text);
}
.library-bar {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 40px;
  padding: 14px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.lib-empty {
  padding: 30px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
[data-lib-pager] {
  margin-top: 50px;
}
/*---- 31.3 Sermon Details ----*/
.sermon-media {
  position: relative;
  margin-bottom: 36px;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  isolation: isolate;
}
.sermon-media img {
  width: 100%;
  aspect-ratio: 16 / 9.8;
  object-fit: cover;
}
.sermon-media .sf-play {
  margin-top: -90px;
}
.media-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(var(--al-night-rgb), 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.media-tools a,
.media-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  border: 0;
  border-left: 1px solid var(--al-line-night);
  background: transparent;
  color: #FFF8F0 !important;
  background-image: none !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.media-tools > :first-child {
  border-left: 0;
}
.media-tools i {
  color: var(--al-gold);
}
.media-tools a:hover,
.media-tools button:hover {
  background: var(--al-primary);
}
.sermon-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 6px 0 30px;
  border-top: 1px solid var(--al-line);
  border-bottom: 1px solid var(--al-line);
}
.sermon-meta > div {
  padding: 16px 0;
}
.sermon-meta > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--al-line);
}
.sermon-meta dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.sermon-meta dd {
  margin: 2px 0 0;
  font-family: var(--al-ff-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--al-heading);
}
.copy-note:empty {
  display: none;
}
.scripture-card {
  position: relative;
  margin: 36px 0;
  padding: 40px 44px;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-night);
  color: var(--al-on-night);
}
.scripture-card::after {
  content: "\f51d";
  position: absolute;
  right: 26px;
  bottom: -20px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 130px;
  color: rgba(var(--al-gold-rgb), 0.1);
}
.sc-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.scripture-card blockquote {
  margin: 14px 0 12px;
  padding: 0;
  background: none;
  border: 0;
}
.scripture-card blockquote::before {
  display: none;
}
.scripture-card blockquote p {
  font-size: 28px;
  color: #FFF8F0;
}
.scripture-card figcaption {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.content-img {
  width: 100%;
  margin: 30px 0;
  border-radius: var(--al-radius-lg);
}
/* previous / next */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 46px;
}
.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
  background-image: none !important;
  color: var(--al-heading) !important;
  transition: background-color 0.4s var(--al-ease), color 0.4s var(--al-ease);
}
.post-nav .pn-next {
  text-align: right;
}
.post-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.post-nav .pn-next span {
  justify-content: flex-end;
}
.post-nav b {
  font-family: var(--al-ff-heading);
  font-size: 24px;
  font-weight: 500;
}
.post-nav a:hover {
  background: var(--al-primary);
  color: #FFFFFF !important;
}
.post-nav a:hover span {
  color: var(--al-gold);
}

/*======================
32. Event Pages
========================*/
/*---- 32.1 Next Event Banner ----*/
.next-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 50px 56px;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  isolation: isolate;
  box-shadow: var(--al-shadow-lg);
}
.next-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.next-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--al-night-rgb), 0.95) 0%, rgba(var(--al-night-rgb), 0.6) 100%);
}
.next-title {
  margin: 16px 0 6px;
  font-size: clamp(32px, 3.2vw, 50px);
}
.next-date {
  margin: 0;
  color: var(--al-gold);
}
.next-count {
  flex: 0 0 400px;
  margin: 0;
}
.al-night .ef-count span {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--al-on-night);
}
.al-night .ef-count b {
  color: var(--al-gold);
}
/*---- 32.2 Calendar ----*/
.cal-box,
.cal-day {
  height: 100%;
  padding: 34px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.cal-head .al-arrow {
  width: 46px;
  height: 46px;
}
.cal-month {
  margin: 0;
  font-size: 32px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-dow {
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--al-muted);
}
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1.15;
  padding: 0;
  border: 0;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
  color: var(--al-heading);
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.cal-cell b {
  font-family: var(--al-ff-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
.cal-dots {
  display: flex;
  gap: 4px;
  height: 6px;
}
.cal-dots i,
.cal-key .dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.is-service {
  --dot: var(--al-gold);
}
.is-event {
  --dot: var(--al-primary);
}
.cal-dots i,
.cal-key .dot {
  background: var(--dot, var(--al-line-strong));
}
.cal-cell.is-past {
  opacity: 0.45;
}
.cal-cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--al-gold);
}
.cal-cell:hover {
  background: var(--al-tonal-2);
}
.cal-cell.is-chosen {
  background: var(--al-primary);
  color: #FFFFFF;
  opacity: 1;
}
.cal-cell.is-chosen .cal-dots i {
  background: #FFFFFF;
}
.cal-key {
  display: flex;
  gap: 22px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--al-muted);
}
.cal-key li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-key .dot.is-today {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--al-gold);
  width: 12px;
  height: 12px;
}
.cal-day-title {
  margin: 8px 0 22px;
  font-size: 30px;
}
.cal-day-list li {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--al-line);
}
.cal-day-list li:last-child {
  border-bottom: 1px solid var(--al-line);
}
.cal-day-list b {
  flex: 0 0 80px;
  font-weight: 600;
  color: var(--al-heading);
}
.cal-day-list li.is-service b {
  color: var(--al-gold-text);
}
.cal-day-list li.is-event b {
  color: var(--al-accent-text);
}
.cal-day-list span {
  display: flex;
  flex-direction: column;
  font-family: var(--al-ff-heading);
  font-size: 21px;
  line-height: 1.25;
  color: var(--al-heading);
}
.cal-day-list small {
  font-family: var(--al-ff-body);
  font-size: 13px;
  color: var(--al-muted);
}
/*---- 32.3 Event Cards ----*/
.list-filter {
  margin: -24px 0 36px;
}
.event-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: transform 0.5s var(--al-ease), box-shadow 0.5s var(--al-ease);
}
.event-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.event-card .tile-media {
  aspect-ratio: 4 / 3.4;
}
.event-card .tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-card .al-date {
  top: 20px;
  left: 20px;
  bottom: auto;
  border-radius: var(--al-radius);
}
.event-card .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 26px 28px 24px;
}
.event-card .card-title {
  margin: 8px 0 16px;
  font-size: 26px;
  font-weight: 500;
}
.card-facts {
  margin: 0 0 18px;
}
.card-facts > div {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--al-line);
  font-size: 14px;
}
.card-facts dt {
  flex: 0 0 56px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.card-facts dd {
  margin: 0;
  color: var(--al-heading);
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--al-line);
}
.ev-seats {
  font-size: 13px;
  font-weight: 600;
  color: var(--al-muted);
}
.ev-seats.is-low {
  color: var(--al-accent-text);
}
.card-foot .al-link {
  font-size: 11px;
}
/*---- 32.4 Event Details ----*/
.event-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: -70px 26px 40px;
  position: relative;
  z-index: 2;
  border-radius: var(--al-radius-lg);
  background: var(--al-primary);
  color: rgba(255, 255, 255, 0.75);
  box-shadow: var(--al-shadow-lg);
}
.event-bar > div {
  padding: 22px 24px;
}
.event-bar > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.event-bar dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.event-bar dd {
  margin: 4px 0 0;
  font-family: var(--al-ff-heading);
  font-size: 21px;
  line-height: 1.25;
  color: #FFFFFF;
}
.detail-gallery.is-four {
  grid-template-columns: repeat(2, 1fr);
}
.widget .ef-count {
  margin-bottom: 18px;
}
/*---- 32.5 Tickets ----*/
.ticket-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 26px 30px;
  text-align: center;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: box-shadow 0.4s var(--al-ease), transform 0.4s var(--al-ease);
}
/* the base's ticket notches on both edges */
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  top: 58%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--al-bg-soft);
  box-shadow: inset 0 0 0 1px var(--al-line);
}
.ticket-card::before {
  left: -13px;
  clip-path: inset(0 0 0 50%);
}
.ticket-card::after {
  right: -13px;
  clip-path: inset(0 50% 0 0);
}
.ticket-card.is-chosen {
  box-shadow: 0 0 0 2px var(--al-gold), var(--al-shadow);
  transform: translateY(-6px);
}
.ticket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(var(--al-primary-rgb), 0.08);
  color: var(--al-accent-text);
  font-size: 20px;
}
.ticket-name {
  margin-bottom: 4px;
  font-size: 26px;
  font-weight: 500;
}
.ticket-price {
  font-family: var(--al-ff-heading);
  font-size: 56px;
  line-height: 1;
  color: var(--al-accent-text);
}
.ticket-price sup {
  font-size: 24px;
  top: -1.2em;
}
.ticket-note {
  margin: 10px 0 16px;
  font-size: 14px;
}
.ticket-rows {
  width: 100%;
  margin: 0 0 22px;
  border-top: 1px dashed var(--al-line-strong);
}
.ticket-rows > div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-line);
  font-size: 14px;
}
.ticket-rows dd {
  margin: 0;
  font-weight: 600;
  color: var(--al-heading);
}
.ticket-order {
  position: sticky;
  top: 110px;
  padding: 34px 32px;
  border-radius: var(--al-radius-lg);
  background: var(--al-night);
  color: var(--al-on-night);
  box-shadow: var(--al-shadow-lg);
}
.order-title {
  margin-bottom: 18px;
  font-size: 30px;
  color: #FFF8F0;
}
.order-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-line-night);
}
.order-lines b {
  color: #FFF8F0;
}
.order-none {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-line-night);
}
.order-sums {
  margin: 14px 0 22px;
}
.order-sums > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.order-sums dd {
  margin: 0;
}
.order-sums .is-total dt {
  font-weight: 600;
  color: #FFF8F0;
}
.order-sums .is-total dd {
  font-family: var(--al-ff-heading);
  font-size: 34px;
  line-height: 1;
  color: var(--al-gold);
}
.ticket-order .al-btn:disabled {
  opacity: 0.4;
}
.order-note {
  margin: 14px 0 0;
  font-size: 14px;
}
.order-note.is-done b {
  color: var(--al-gold);
}
/*---- 32.6 Map ----*/
.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  box-shadow: 0 0 0 1px var(--al-line);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(0.7) sepia(0.15);
}
html[data-theme="dark"] .map-frame iframe {
  filter: grayscale(1) invert(0.9) contrast(0.9);
}
.map-card {
  position: absolute;
  left: 30px;
  top: 30px;
  max-width: 300px;
  padding: 26px 28px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg);
}
.map-card p {
  margin: 8px 0 12px;
  font-family: var(--al-ff-heading);
  font-size: 21px;
  line-height: 1.3;
  color: var(--al-heading);
}

/*======================
33. Visit Planner And Prayer Wall
========================*/
/*---- 33.1 Visit Steps ----*/
.visit-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 40px;
}
.visit-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
  color: var(--al-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.visit-steps b {
  font-family: var(--al-ff-heading);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--al-gold-text);
}
.visit-steps li.is-done {
  color: var(--al-heading);
}
.visit-steps li.is-done::after {
  content: "\f00c";
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--al-gold-text);
}
.visit-steps li.is-active {
  background: var(--al-primary);
  color: #FFFFFF;
}
.visit-steps li.is-active b {
  color: var(--al-gold);
}
.visit-step {
  margin: 0;
  padding: 0;
  border: 0;
}
.step-legend {
  margin-bottom: 24px;
  font-family: var(--al-ff-heading);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--al-heading);
}
.step-date {
  max-width: 460px;
  margin-top: 26px;
}
.choice-kids {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--al-gold-text) !important;
  font-weight: 600;
}
.al-choice.is-check .choice-face {
  display: flex;
  align-items: center;
  gap: 14px;
}
.al-choice.is-check .choice-face i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--al-bg-soft);
  color: var(--al-accent-text);
}
.party-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.party-item .al-label {
  margin-bottom: 10px;
}
.kids-ages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin-top: 30px;
}
.kid-room {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-gold-text);
}
.kids-note {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
  font-size: 15px;
}
.kids-note.is-warn {
  box-shadow: inset 3px 0 0 var(--al-gold);
}
.visit-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--al-line);
}
.visit-nav [data-visit-next],
.visit-nav [data-visit-submit] {
  margin-left: auto;
}
/*---- 33.2 Confirmation ----*/
.visit-done {
  padding: 60px 50px;
  text-align: center;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.visit-done:focus {
  outline: none;
}
.done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--al-primary);
  color: var(--al-gold);
  font-size: 30px;
}
.done-ref b {
  font-family: var(--al-ff-heading);
  font-size: 24px;
  color: var(--al-accent-text);
}
.done-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
/*---- 33.3 Live Summary ----*/
.visit-summary {
  position: sticky;
  top: 110px;
  padding: 36px 32px;
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-shadow-lg);
}
.vs-title {
  margin: 8px 0 18px;
  font-size: 32px;
}
.vs-rows {
  margin: 0 0 24px;
  border-top: 1px solid var(--al-line-night);
}
.vs-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--al-line-night);
}
.vs-rows dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.vs-rows dd {
  margin: 0;
  color: #FFF8F0;
  text-align: right;
}
.vs-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.vs-kids,
.vs-needs {
  margin-bottom: 20px;
}
.vs-kids li,
.vs-needs li {
  padding: 3px 0 3px 16px;
  position: relative;
  font-size: 15px;
}
.vs-kids li::before,
.vs-needs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--al-gold);
}
.vs-help {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--al-line-night);
  font-size: 14px;
}
.vs-help img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.vs-help p {
  margin: 0;
}
.vs-help b {
  display: block;
  color: #FFF8F0;
}
/*---- 33.4 Prayer Wall ----*/
.prayer-form {
  position: sticky;
  top: 110px;
  padding: 40px 34px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.prayer-form .al-field + .al-field,
.prayer-form .al-check + .al-field,
.prayer-form .al-field + .al-check {
  margin-top: 18px;
}
.prayer-form .al-check {
  margin-top: 12px;
  font-size: 14px;
}
.prayer-form .al-btn {
  margin-top: 24px;
}
.pr-count {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--al-muted);
}
.prayer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.prayer-head .al-title {
  margin: 0;
}
.prayer-total {
  margin: 0;
  color: var(--al-muted);
}
.prayer-total b {
  font-family: var(--al-ff-heading);
  font-size: 36px;
  font-weight: 500;
  color: var(--al-accent-text);
}
.prayer-filter {
  margin-bottom: 30px;
  width: max-content;
  max-width: 100%;
}
.prayer-grid {
  columns: 2;
  column-gap: 22px;
}
.prayer-card {
  display: inline-block;
  width: 100%;
  margin-bottom: 22px;
  padding: 30px 30px 24px;
  break-inside: avoid;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.prayer-card.is-new {
  box-shadow: 0 0 0 2px var(--al-gold);
}
.prayer-text {
  margin: 12px 0 20px;
  font-family: var(--al-ff-heading);
  font-size: 22px;
  font-style: italic;
  line-height: 1.45;
  color: var(--al-heading);
}
.prayer-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--al-line);
}
.prayer-who {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--al-muted);
}
.prayer-who b {
  font-size: 15px;
  color: var(--al-heading);
}
.prayer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-radius: 30px;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.prayer-btn i {
  color: var(--al-gold-text);
}
.prayer-btn b {
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--al-surface);
  text-align: center;
}
.prayer-btn.is-on {
  background: var(--al-primary);
  color: #FFFFFF;
}
.prayer-btn.is-on i {
  color: var(--al-gold);
}
.prayer-btn.is-on b {
  background: rgba(255, 255, 255, 0.16);
}
/* the verse band under the wall */
.al-verse-band {
  padding: 110px 0;
  text-align: center;
}
.verse-big {
  max-width: 900px;
  margin: 0 auto;
}
.verse-big > i {
  font-size: 34px;
  color: var(--al-gold);
}
.verse-big blockquote {
  margin: 22px 0 16px;
}
.verse-big p {
  margin: 0;
  font-family: var(--al-ff-heading);
  font-size: clamp(30px, 3.4vw, 52px);
  font-style: italic;
  line-height: 1.25;
  color: var(--al-heading);
}
.verse-big figcaption {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}

/*======================
34. Giving And FAQ Pages
========================*/
/*---- 34.1 Featured Appeal ----*/
.appeal-card {
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-shadow-lg);
}
.appeal-photo {
  height: 100%;
  min-height: 420px;
}
.appeal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.appeal-body {
  padding: 56px 54px 50px;
}
.appeal-body .al-title {
  margin-bottom: 14px;
}
.appeal-givers {
  font-size: 14px;
  color: var(--al-on-night);
}
.appeal-givers b {
  font-family: var(--al-ff-heading);
  font-size: 24px;
  color: var(--al-gold);
}
/*---- 34.2 Cause Cards ----*/
.cause-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: transform 0.5s var(--al-ease), box-shadow 0.5s var(--al-ease);
}
.cause-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.cause-photo {
  aspect-ratio: 510 / 300;
}
.cause-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cause-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 30px 30px;
}
.cause-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--al-line);
}
.cause-split > div + div {
  padding-left: 18px;
  border-left: 1px solid var(--al-line);
}
.cause-split dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.cause-split dd {
  margin: 2px 0 0;
  font-family: var(--al-ff-heading);
  font-size: 26px;
  color: var(--al-heading);
}
.cause-title {
  margin-bottom: 10px;
  font-size: 27px;
  font-weight: 500;
}
.cause-body > p {
  font-size: 15px;
}
.cause-left {
  margin: -4px 0 20px;
  font-size: 14px;
  color: var(--al-muted);
}
.cause-left span {
  font-weight: 600;
  color: var(--al-accent-text);
}
.cause-body .al-btn {
  margin-top: auto;
}
.al-causes .al-pagination {
  margin-top: 56px;
}
/*---- 34.3 Donation Details ----*/
.detail-hero.is-wide img {
  aspect-ratio: 1170 / 520;
}
.give-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 6px;
}
.give-figures > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.give-figures p {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 13px;
  color: var(--al-muted);
}
.give-figures b {
  font-family: var(--al-ff-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--al-heading);
}
.give-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin: 10px 0 20px;
}
.give-pair img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--al-radius-lg);
}
.give-uses {
  margin: 18px 0 26px;
}
.give-uses dt {
  font-family: var(--al-ff-heading);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--al-accent-text);
}
.share-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--al-line);
}
.share-row > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold-text);
}
.share-row .al-social a {
  background-image: none !important;
}
/*---- 34.4 Give Form ----*/
.give-form {
  padding: 36px 32px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.give-title {
  margin-bottom: 22px;
  font-size: 36px;
}
.give-amounts,
.give-freq {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.amount-btn {
  min-height: 50px;
  border: 0;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
  color: var(--al-heading);
  font-family: var(--al-ff-heading);
  font-size: 21px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.amount-btn:hover {
  background: var(--al-tonal-2);
}
.amount-btn.is-active {
  background: var(--al-primary);
  color: #FFFFFF;
}
.give-custom {
  margin-top: 8px;
}
.give-custom input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 18px 0 38px;
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  background: var(--al-surface);
  color: var(--al-heading);
  font-family: var(--al-ff-heading);
  font-size: 21px;
}
.give-custom input:focus {
  outline: none;
  border-color: var(--al-gold);
}
.give-cur {
  position: absolute;
  left: 18px;
  top: 14px;
  font-family: var(--al-ff-heading);
  font-size: 21px;
  color: var(--al-muted);
}
.freq-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  border-radius: 30px;
  background: var(--al-bg-soft);
}
.freq-switch label {
  cursor: pointer;
}
.freq-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.freq-switch span {
  display: block;
  padding: 10px 6px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--al-heading);
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.freq-switch input:checked + span {
  background: var(--al-primary);
  color: #FFFFFF;
}
.freq-switch input:focus-visible + span {
  outline: 2px solid var(--al-gold);
}
.give-cover {
  margin-top: 18px;
  font-size: 14px;
}
.give-sum {
  margin: 20px 0 14px;
  border-top: 1px solid var(--al-line);
}
.give-sum > div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-line);
  font-size: 15px;
}
.give-sum dd {
  margin: 0;
  font-weight: 600;
  color: var(--al-heading);
}
.give-sum .is-total dt {
  font-weight: 600;
  color: var(--al-heading);
}
.give-sum .is-total dd {
  font-family: var(--al-ff-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-accent-text);
}
.give-impact {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--al-radius);
  background: rgba(var(--al-gold-rgb), 0.12);
  font-family: var(--al-ff-heading);
  font-size: 19px;
  font-style: italic;
  color: var(--al-heading);
}
/*---- 34.5 FAQ Page ----*/
.faq-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--al-radius);
  background: var(--al-bg-soft);
  color: var(--al-heading);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.35s var(--al-ease), color 0.35s var(--al-ease);
}
.faq-cats li + li {
  margin-top: 8px;
}
.faq-cats button span {
  font-size: 13px;
  color: var(--al-gold-text);
}
.faq-cats button.is-active,
.faq-cats button:hover {
  background: var(--al-primary);
  color: #FFFFFF;
}
.faq-cats button.is-active span,
.faq-cats button:hover span {
  color: var(--al-gold);
}
.al-faq-page .al-accordion {
  margin-top: 0;
}

/*======================
35. Church Shop
========================*/
/*---- 35.1 Product Cards ----*/
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
  transition: transform 0.5s var(--al-ease), box-shadow 0.5s var(--al-ease);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.product-thumb {
  position: relative;
  background: #FFFFFF;
}
.product-thumb .al-zoom {
  aspect-ratio: 1;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}
html[data-theme="dark"] .product-thumb {
  background: #F4EEE7;
}
.product-badges {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
}
.badge-sale,
.badge-new {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-sale {
  background: var(--al-primary);
  color: #FFFFFF;
}
.badge-new {
  background: var(--al-gold);
  color: var(--al-on-gold);
}
.product-wish {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 21, 34, 0.06);
  color: #1B1522;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease), transform 0.3s var(--al-ease);
}
.product-wish:hover,
.product-wish.is-on {
  background: var(--al-primary);
  color: #FFFFFF;
  transform: scale(1.06);
}
.product-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
  border-top: 1px solid var(--al-line);
}
.product-title {
  margin: 6px 0 6px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
}
.product-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--al-gold);
}
.product-stars span {
  margin-left: 10px;
  font-size: 13px;
  color: var(--al-muted);
}
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.product-price b {
  font-family: var(--al-ff-heading);
  font-size: 28px;
  font-weight: 500;
  color: var(--al-accent-text);
}
.product-price del,
.pd-price del {
  font-size: 15px;
  color: var(--al-muted);
}
.product-add {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--al-primary);
  color: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease), transform 0.3s var(--al-ease);
}
.product-add:hover {
  background: var(--al-gold);
  color: var(--al-on-gold);
  transform: rotate(-10deg);
}
.product-add.is-added {
  width: auto;
  padding: 0 16px;
  border-radius: 30px;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 13px;
  font-weight: 600;
}
/*---- 35.2 Toolbar And Filters ----*/
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding: 12px 12px 12px 22px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.shop-count {
  margin: 0;
  font-size: 15px;
}
.shop-sort {
  flex: 0 0 240px;
}
.shop-cats .al-check {
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--al-line);
}
.shop-cats .al-check input {
  margin-top: 0;
}
.shop-cats .al-check span {
  flex: 1 1 auto;
  color: var(--al-heading);
}
.shop-cats em {
  font-style: normal;
  font-size: 13px;
  color: var(--al-gold-text);
}
.al-range {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--al-primary) var(--al-fill, 100%), var(--al-line) var(--al-fill, 100%));
  cursor: pointer;
}
.al-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--al-gold);
  border: 4px solid var(--al-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.al-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--al-gold);
  border: 4px solid var(--al-surface);
}
.price-read {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  color: var(--al-muted);
}
.price-read b {
  color: var(--al-heading);
}
[data-shop-pager] {
  margin-top: 50px;
}
/* the live mini cart */
.mini-lines li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-line);
}
.mini-product {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mini-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--al-radius);
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--al-line);
}
.mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.mini-product > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  color: var(--al-muted);
}
.mini-product b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--al-heading);
}
.mini-product em {
  font-style: normal;
}
.mini-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.mini-remove:hover {
  background: var(--al-primary);
  color: #FFFFFF;
}
.mini-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  font-weight: 600;
  color: var(--al-heading);
}
.mini-actions {
  display: flex;
  gap: 8px;
}
.mini-actions .al-btn {
  flex: 1 1 0;
  padding-left: 10px;
  padding-right: 10px;
}
/*---- 35.3 Product Details ----*/
.pd-gallery {
  position: relative;
}
.pd-main {
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--al-line);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 40px;
}
.pd-thumbs {
  margin-top: 14px;
  overflow: hidden;
}
.pd-thumbs .swiper-slide {
  overflow: hidden;
  border-radius: var(--al-radius);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--al-line);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s var(--al-ease), box-shadow 0.3s var(--al-ease);
}
.pd-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--al-gold);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
}
.pd-info {
  padding-left: 30px;
}
.pd-title {
  margin: 12px 0 10px;
  font-size: clamp(36px, 3.4vw, 54px);
}
.pd-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}
.pd-price b {
  font-family: var(--al-ff-heading);
  font-size: 42px;
  font-weight: 500;
  color: var(--al-accent-text);
}
.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 20px;
  padding: 14px 0;
  border-top: 1px solid var(--al-line);
  border-bottom: 1px solid var(--al-line);
}
.pd-meta > div {
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.pd-meta dt {
  font-weight: 600;
  color: var(--al-heading);
}
.pd-meta dd {
  margin: 0;
}
.pd-meta .in-stock {
  color: #2E7D4F;
  font-weight: 600;
}
.pd-option {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.finish-chip {
  display: inline-block;
  margin: 0 6px 6px 0;
  cursor: pointer;
}
.finish-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.finish-chip span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 30px;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.finish-chip input:checked + span {
  background: var(--al-primary);
  color: #FFFFFF;
}
.finish-chip input:focus-visible + span {
  outline: 2px solid var(--al-gold);
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pd-buy .al-stepper {
  height: 56px;
}
.pd-safe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 18px 20px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--al-heading);
}
.pd-tabs {
  margin-top: 80px;
}
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--al-line);
}
.tab-list button {
  padding: 11px 22px;
  border: 0;
  border-radius: 30px;
  background: var(--al-tonal);
  color: var(--al-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.tab-list button.is-active {
  background: var(--al-primary);
  color: #FFFFFF;
}
.tab-panel h3 {
  font-size: 32px;
}
.pd-reviews li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--al-line);
}
.pd-reviews img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.pd-reviews b {
  display: block;
  color: var(--al-heading);
}
.pd-reviews p {
  margin: 6px 0 0;
}
/*---- 35.4 Cart, Checkout And Wishlist ----*/
.table-card {
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  box-shadow: 0 0 0 1px var(--al-line);
}
.cart-table td,
.wish-table td {
  background: var(--al-surface);
}
.line-product {
  display: flex;
  align-items: center;
  gap: 16px;
}
.line-product > span:last-child {
  display: flex;
  flex-direction: column;
}
.line-product b {
  font-family: var(--al-ff-heading);
  font-size: 21px;
  font-weight: 500;
  color: var(--al-heading);
}
.line-product small {
  font-size: 13px;
  color: var(--al-muted);
}
.line-price,
.line-total {
  font-weight: 600;
  color: var(--al-heading);
}
.cart-table .al-stepper {
  height: 44px;
}
.cart-table .al-stepper button {
  width: 38px;
}
.cart-table .al-stepper input {
  width: 44px;
}
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}
.coupon-form {
  display: flex;
  gap: 10px;
}
.coupon-form .al-input input {
  min-height: 46px;
  width: 240px;
}
.coupon-form .al-input > i {
  top: 15px;
}
.coupon-status {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--al-muted);
}
.coupon-status.is-ok {
  color: #2E7D4F;
}
.coupon-status.is-bad {
  color: #B23A2B;
}
.cart-totals {
  padding: 32px 30px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.totals-title,
.box-title {
  margin-bottom: 20px;
  font-size: 32px;
}
.ship-meter p {
  margin: 0 0 8px;
  font-size: 14px;
}
.ship-meter .meter {
  display: block;
  height: 5px;
  border-radius: 5px;
  background: var(--al-line);
  overflow: hidden;
}
.ship-meter .meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--al-primary), var(--al-gold));
  transition: width 0.6s var(--al-ease);
}
.totals-lines {
  margin-top: 18px;
}
.totals-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--al-line);
}
.totals-lines small {
  margin-left: 6px;
  color: var(--al-muted);
}
.totals-lines b {
  color: var(--al-heading);
}
.totals-lines .is-ship {
  flex-direction: column;
}
.ship-options .al-check {
  align-items: center;
  padding: 4px 0;
}
.ship-options .al-check input {
  margin-top: 0;
}
.ship-options .al-check span {
  flex: 1 1 auto;
}
.totals-lines .is-total {
  border-bottom: 0;
}
.totals-lines .is-total span {
  font-weight: 600;
  color: var(--al-heading);
}
.totals-lines .is-total b {
  font-family: var(--al-ff-heading);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-accent-text);
}
.totals-cta {
  margin-top: 14px;
}
.cart-empty {
  padding: 70px 30px;
  text-align: center;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.checkout-box,
.checkout-order {
  padding: 36px 34px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.checkout-order {
  margin-bottom: 20px;
}
.order-items li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-line);
}
.order-items li > span:nth-child(2) {
  flex: 1 1 auto;
  font-size: 15px;
}
.order-items b {
  color: var(--al-heading);
}
.checkout-pay {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  border: 0;
}
.wish-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.stock-in {
  font-weight: 600;
  color: #2E7D4F;
}

/*======================
36. Blog Pages
========================*/
/*---- 36.1 Blog List ----*/
.post-filter-note {
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--al-muted);
}
.post-filter-note b {
  color: var(--al-heading);
}
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.blog-post {
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: 0 0 0 1px var(--al-line);
}
.post-media {
  position: relative;
}
.post-media .al-zoom,
.post-gallery .swiper-slide {
  aspect-ratio: 870 / 500;
}
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-media .al-date {
  left: 30px;
  bottom: 0;
  z-index: 3;
}
.post-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -48px 0 0 -48px;
  z-index: 2;
}
.post-gallery {
  overflow: hidden;
}
.post-gallery-nav {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 40px;
  background: rgba(var(--al-night-rgb), 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
}
.post-gallery-nav .al-arrow {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.post-gallery-count {
  font-family: var(--al-ff-heading);
  font-size: 15px;
}
.post-quote {
  position: relative;
  margin: 0;
  padding: 60px 56px;
  background: var(--al-night);
  color: var(--al-on-night);
  overflow: hidden;
}
.post-quote > i {
  font-size: 36px;
  color: var(--al-gold);
}
.post-quote blockquote {
  margin: 16px 0 12px;
}
.post-quote p {
  margin: 0;
  font-family: var(--al-ff-heading);
  font-size: clamp(26px, 2.6vw, 36px);
  font-style: italic;
  line-height: 1.35;
  color: #FFF8F0;
}
.post-quote figcaption {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.post-content {
  padding: 34px 40px 38px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--al-muted);
}
.post-meta i {
  margin-right: 8px;
  color: var(--al-gold-text);
}
.post-meta .al-tag a {
  color: var(--al-gold-text);
}
.post-heading {
  margin-bottom: 14px;
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 500;
}
.blog-page-gap {
  margin-top: 60px;
}
.al-blog-page .al-pagination {
  margin-top: 60px;
}
/*---- 36.2 Blog Details ----*/
.post-single-title {
  margin-bottom: 30px;
  font-size: clamp(36px, 3.6vw, 58px);
}
.post-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--al-line);
  border-bottom: 1px solid var(--al-line);
}
.share-row.is-inline {
  margin: 0;
  padding: 0;
  border: 0;
}
.share-row .al-social button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--al-tonal);
  color: var(--al-heading);
  cursor: pointer;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  padding: 34px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.author-box img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 4px var(--al-bg-soft), 0 0 0 5px var(--al-gold);
}
.author-name {
  margin: 4px 0 6px;
  font-size: 30px;
}
.author-box p {
  margin: 0;
}
.comments {
  margin-top: 60px;
}
.comments-title {
  margin-bottom: 24px;
  font-size: 34px;
}
.comment {
  margin-bottom: 20px;
}
.comment > img {
  float: left;
  width: 64px;
  height: 64px;
  margin-right: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.comment-body {
  overflow: hidden;
  padding: 22px 26px;
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-soft);
}
.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.comment-head b {
  font-family: var(--al-ff-heading);
  font-size: 21px;
  font-weight: 600;
  color: var(--al-heading);
}
.comment-head span {
  font-size: 13px;
  color: var(--al-muted);
}
.comment-head .al-link {
  margin-left: auto;
  font-size: 11px;
}
.comment-body p {
  margin: 0;
}
.comment-children {
  clear: both;
  margin: 20px 0 0 84px;
}
.comment-form {
  margin-top: 40px;
  padding: 40px;
  border-radius: var(--al-radius-lg);
  box-shadow: 0 0 0 1px var(--al-line);
}
.reply-note {
  font-size: 15px;
}

/*======================
37. Contact, Account And Utility Pages
========================*/
/*---- 37.1 Contact ----*/
.al-contact-cards {
  position: relative;
  z-index: 3;
  margin-top: -70px;
}
.contact-card {
  height: 100%;
  padding: 36px 34px 32px;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.contact-card .al-icon-square {
  margin-bottom: 20px;
}
.cc-title {
  margin-bottom: 10px;
  font-size: 30px;
}
.contact-card p {
  font-size: 16px;
}
.contact-card.is-live {
  background: var(--al-night);
  box-shadow: var(--al-shadow-lg);
}
.contact-card.is-live .cc-title {
  color: #FFF8F0;
}
.contact-card.is-live .al-icon-square {
  background: rgba(var(--al-gold-rgb), 0.16);
  color: var(--al-gold);
}
.contact-card.is-live b {
  font-family: var(--al-ff-heading);
  font-size: 23px;
  font-weight: 500;
  color: #FFF8F0;
}
.contact-copy .al-lead {
  margin: 20px 0 30px;
}
.map-frame.is-tall {
  height: 100%;
  min-height: 560px;
}
.map-frame.is-tall iframe {
  height: 100%;
  min-height: 560px;
}
/*---- 37.2 Account ----*/
.account-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  box-shadow: var(--al-shadow-lg), 0 0 0 1px var(--al-line);
}
.account-card.is-narrow {
  grid-template-columns: 1fr;
  max-width: 560px;
  text-align: center;
}
.account-side {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 44px;
  isolation: isolate;
}
.account-side > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--al-night-rgb), 0.2) 0%, rgba(var(--al-night-rgb), 0.92) 100%);
}
.side-logo {
  height: 50px;
  width: auto;
  margin-bottom: 26px;
}
.side-copy blockquote {
  margin: 0;
}
.side-copy p {
  margin: 0 0 8px;
  font-family: var(--al-ff-heading);
  font-size: 30px;
  font-style: italic;
  line-height: 1.3;
  color: #FFF8F0;
}
.side-copy cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.account-form {
  padding: 56px 54px;
}
.account-title {
  margin-bottom: 10px;
  font-size: clamp(32px, 2.8vw, 44px);
}
.account-form > p {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.account-row .al-link {
  font-size: 12px;
}
.account-switch {
  margin: 24px 0 0 !important;
  font-size: 15px;
}
.account-switch a {
  font-weight: 600;
  color: var(--al-accent-text);
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--al-gold-text);
  cursor: pointer;
}
.password-toggle:hover {
  background: var(--al-tonal);
}
.pass-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.pass-meter span {
  height: 4px;
  border-radius: 4px;
  background: var(--al-line);
  transition: background-color 0.3s var(--al-ease);
}
.pass-meter b {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--al-muted);
}
.pass-meter[data-level="1"] span:nth-child(-n+1),
.pass-meter[data-level="2"] span:nth-child(-n+2),
.pass-meter[data-level="3"] span:nth-child(-n+3),
.pass-meter[data-level="4"] span:nth-child(-n+4) {
  background: var(--al-gold);
}
.pass-meter[data-level="4"] span {
  background: #2E7D4F;
}
.match-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}
.match-note.is-ok {
  color: #2E7D4F;
}
.match-note.is-bad {
  color: #B23A2B;
}
.account-card.is-narrow .done-mark {
  margin-bottom: 18px;
}
/*---- 37.3 Coming Soon And 404 ----*/
.al-soon {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.soon-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.soon-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.al-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--al-night-rgb), 0.5) 0%, rgba(var(--al-night-rgb), 0.92) 75%);
}
.soon-inner {
  max-width: 780px;
  margin: 0 auto;
}
.soon-logo img {
  height: 60px;
  width: auto;
  margin: 0 auto 36px;
}
.al-soon .hero-kicker {
  justify-content: center;
}
.soon-title {
  margin: 0 0 20px;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1;
}
.soon-lead {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 19px;
}
.soon-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 16px;
}
.soon-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 0 16px;
  border-radius: var(--al-radius-lg);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.soon-count b {
  font-family: var(--al-ff-heading);
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-gold);
  font-variant-numeric: tabular-nums;
}
.soon-date {
  margin: 0 0 30px;
  font-size: 14px;
  color: var(--al-on-night);
}
.soon-form {
  max-width: 480px;
  margin: 0 auto 30px;
  text-align: left;
}
.al-soon .al-social {
  justify-content: center;
}
.error-code {
  display: block;
  margin: -10px 0 0;
  font-family: var(--al-ff-heading);
  font-size: clamp(130px, 18vw, 260px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--al-gold);
}
.error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

/*======================
38. Footer
========================*/
.al-footer {
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.al-footer a {
  color: var(--al-on-night);
}
.al-footer a:hover {
  color: var(--al-gold);
}
/*---- 38.1 Invitation Band ----*/
.footer-invite {
  padding: 90px 0 80px;
  border-bottom: 1px solid var(--al-line-night);
}
.invite-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
}
.invite-title {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.08;
}
.invite-times li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--al-line-night);
  font-size: 15px;
}
.invite-times li:first-child {
  border-top: 1px solid var(--al-line-night);
}
.invite-times span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.invite-times b {
  font-weight: 500;
  color: #FFF8F0;
}
/*---- 38.2 Main Footer ----*/
.footer-main {
  padding: 90px 0 70px;
}
.footer-logo img {
  height: 56px;
  width: auto;
  margin-bottom: 24px;
}
.footer-about > p {
  max-width: 380px;
  margin-bottom: 30px;
}
.footer-verse {
  max-width: 420px;
  margin: 0;
  padding: 24px 26px;
  border-radius: var(--al-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--al-line-night);
}
.footer-verse figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-gold);
}
.footer-verse blockquote {
  margin: 0;
}
.footer-verse blockquote p {
  margin: 0;
  font-family: var(--al-ff-heading);
  font-size: 21px;
  font-style: italic;
  line-height: 1.45;
  color: #FFF8F0;
}
.footer-verse cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--al-on-night);
}
.footer-widget .widget-title {
  margin-bottom: 26px;
  font-size: 26px;
  font-weight: 500;
  color: #FFF8F0;
}
.footer-links li + li {
  margin-top: 13px;
}
.footer-links a {
  position: relative;
  display: inline-block;
  transition: color 0.3s var(--al-ease), padding 0.35s var(--al-ease);
}
.footer-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--al-gold);
  transition: width 0.35s var(--al-ease);
}
.footer-links a:hover {
  padding-left: 22px;
}
.footer-links a:hover::before {
  width: 14px;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.footer-contact li + li {
  margin-top: 14px;
}
.footer-contact i {
  flex: 0 0 auto;
  width: 18px;
  margin-top: 6px;
  color: var(--al-gold);
  font-size: 14px;
}
.al-newsletter {
  position: relative;
  margin: 30px 0 26px;
}
.al-newsletter input {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 70px 0 22px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--al-line-night);
  color: #FFF8F0;
  font-family: var(--al-ff-body);
  font-size: 15px;
}
.al-newsletter input::placeholder {
  color: rgba(255, 248, 240, 0.55);
}
.al-newsletter input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--al-gold);
}
.news-send {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.35s var(--al-ease), background-color 0.35s var(--al-ease);
}
.news-send:hover {
  background: #FFF8F0;
  transform: rotate(-12deg);
}
.al-newsletter .form-status {
  margin-top: 10px;
  font-size: 14px;
}
/*---- 38.3 The Name And Copyright ----*/
/* the church's name, very large, as an engraved line along the foot */
.footer-mark {
  padding: 0 20px;
  font-family: var(--al-ff-heading);
  font-size: clamp(110px, 21vw, 360px);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--al-gold-rgb), 0.35);
  user-select: none;
  pointer-events: none;
  margin-bottom: -0.08em;
}
.footer-bottom {
  position: relative;
  border-top: 1px solid var(--al-line-night);
  background: rgba(0, 0, 0, 0.18);
}
.footer-bottom .bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
}
.footer-bottom p {
  margin: 0;
  font-size: 14px;
}
.footer-bottom p a {
  color: var(--al-gold);
}
.footer-legal {
  display: flex;
  gap: 28px;
  font-size: 14px;
}

/*======================
39. Back To Top
========================*/
.al-back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--al-gold);
  color: var(--al-on-gold);
  font-size: 16px;
  box-shadow: 0 12px 28px rgba(var(--al-night-rgb), 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s var(--al-ease), transform 0.4s var(--al-ease), visibility 0.4s, background-color 0.3s var(--al-ease), color 0.3s var(--al-ease);
}
.al-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.al-back-to-top:hover {
  background: var(--al-primary);
  color: #FFFFFF;
}