@charset "utf-8";

/*
Theme Name: Sanctum - Places Of Worship HTML5 Template Suite
Author: Metropolitanthemes
Version: 1.1.0

%%%%%%% Table Of CSS %%%%%%%

1. General
2. Light And Dark Themes
3. Header And Navigation
4. Mega Menu
5. Language And Theme Controls
6. Mobile Menu
7. Hero And Colonnade
8. Marquee And Brands
9. Template Cards
10. Sacred Clocks
11. Giving And Ministries
12. Home Pages
13. Kit And Standards
14. Footer
15. WebGL Layers
16. Motion
*/

/*======================
1. General
========================*/
:root {
  /* fixed colours: the same in both themes */
  --sc-night: #14110E;
  --sc-night-rgb: 20, 17, 14;
  --sc-paper: #F6F2EA;
  --sc-white: #FFFFFF;
  --sc-ink: #1A1612;
  --sc-lamp: #E3A548;
  --sc-lamp-rgb: 227, 165, 72;
  --sc-spectrum: linear-gradient(90deg, #4C7BE0 0%, #F0922B 17%, #D4558A 33%, #2DB3A6 50%, #D9A93F 67%, #9466D0 83%, #E2643C 100%);
  --sc-ff-display: "Gloock", serif;
  --sc-ff-body: "Golos Text", sans-serif;
  --sc-radius: 8px;
  --sc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* each template brings its own colour (t), a deep tone for grounds and its light in the suite's spectrum */
.t-sangat { --t: #13366F; --t-deep: #0C2450; --t-light: #4C7BE0; }
.t-mandira { --t: #0F5C5E; --t-deep: #0B2B2C; --t-light: #F0922B; }
.t-shalomi { --t: #7B1F3A; --t-deep: #1C0F15; --t-light: #D4558A; }
.t-qiblah { --t: #0C7B77; --t-deep: #071B1F; --t-light: #2DB3A6; }
.t-bodhira { --t: #6F1D2A; --t-deep: #1B0F11; --t-light: #D9A93F; }
.t-altara { --t: #4E2A6A; --t-deep: #150F1D; --t-light: #9466D0; }
.t-fidelis { --t: #B4502C; --t-deep: #1A1311; --t-light: #E2643C; }
/* the template colour as text: its own tone on a light ground, its light on a dark one */
[class^="t-"],
[class*=" t-"] {
  --t-text: var(--t);
}
[data-theme="dark"] [class^="t-"],
[data-theme="dark"] [class*=" t-"],
.sc-night [class^="t-"],
.sc-night [class*=" t-"] {
  --t-text: var(--t-light);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sc-tonal-2) transparent;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--sc-ff-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--sc-text);
  background: var(--sc-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s var(--sc-ease), color 0.4s var(--sc-ease);
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--sc-ff-display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--sc-heading);
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--sc-ease);
}
img {
  max-width: 100%;
}
.sc-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--sc-radius);
  background: var(--sc-lamp);
  color: var(--sc-ink);
  font-weight: 600;
}
.skip-link:focus {
  top: 16px;
}
:focus-visible {
  outline: 2px solid var(--sc-lamp);
  outline-offset: 3px;
}
.sc-pt {
  padding-top: 140px;
}
.sc-pb {
  padding-bottom: 140px;
}
@media (min-width: 1400px) {
  .container {
    max-width: 1300px;
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }
  .header-count {
    display: inline-flex;
  }
  .container {
    max-width: 1440px;
  }
}
@media (min-width: 1960px) {
  html {
    font-size: 18px;
  }
  .container {
    max-width: 1560px;
  }
}
/* the spectrum: seven lights, one for each template */
.spectrum {
  display: inline-block;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--sc-spectrum);
}
.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sc-accent-text);
}
.sc-title {
  font-size: clamp(38px, 4vw, 64px);
}
/* a section title breaks before its accent, so the second line never holds a lone word */
.sc-title em {
  display: block;
}
.sc-title em,
.hero-title em {
  font-style: normal;
  color: var(--sc-accent-text);
}
.sc-lead {
  font-size: 18px;
}
.sc-head {
  margin-bottom: 64px;
}
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 28px;
  border: 0;
  border-radius: 54px;
  background: var(--sc-lamp);
  color: var(--sc-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}
.sc-btn i {
  font-size: 13px;
  transition: transform 0.3s var(--sc-ease);
}
.sc-btn:hover {
  background: var(--sc-heading);
  color: var(--sc-bg);
  transform: translateY(-2px);
}
.sc-btn:hover i {
  transform: translateX(4px);
}
/* the secondary button: a tonal face, never a hairline outline */
.sc-btn.is-ghost {
  background: var(--sc-tonal);
  color: var(--sc-heading);
}
.sc-btn.is-ghost i {
  color: var(--sc-accent-text);
}
.sc-btn.is-ghost:hover {
  background: var(--sc-heading);
  color: var(--sc-bg);
}
.sc-btn.is-ghost:hover i {
  color: inherit;
}
.sc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-heading);
}
.sc-link i {
  font-size: 12px;
  color: var(--sc-accent-text);
  transition: transform 0.3s var(--sc-ease);
}
.sc-link:hover {
  color: var(--sc-accent-text);
}
.sc-link:hover i {
  transform: translateX(4px);
}
/* a browser bar over every page shot: dark in both themes */
.frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #1E1915;
}
.frame-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.frame-bar i:first-child {
  background: var(--t-light, var(--sc-lamp));
}
.frame-bar em {
  margin-left: 10px;
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
/* each template's faith mark on its own deep tone */
.faith-tile {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--t-deep);
  color: var(--t-light);
  font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/*======================
2. Light And Dark Themes
========================*/
/* one attribute on <html>; the head script applies the saved choice before the first paint */
:root,
[data-theme="light"] {
  color-scheme: light;
  --sc-bg: #F6F2EA;
  --sc-bg-rgb: 246, 242, 234;
  --sc-bg-2: #EEE7DC;
  --sc-surface: #FFFFFF;
  --sc-surface-2: #FAF7F1;
  --sc-heading: #1A1612;
  --sc-text: #5E574F;
  --sc-muted: #7A7167;
  --sc-line: #E2D9CC;
  --sc-tonal: rgba(26, 22, 18, 0.055);
  --sc-tonal-2: rgba(26, 22, 18, 0.1);
  --sc-accent-text: #8F5C14;
  --sc-stroke: rgba(26, 22, 18, 0.42);
  --sc-shadow: 0 30px 70px rgba(26, 22, 18, 0.12);
  --sc-shadow-lg: 0 40px 100px rgba(26, 22, 18, 0.2);
  --sc-glow: 0.14;
  /* the WebGL layers read these, so a theme switch repaints them */
  --sc-gl-amt: 0.5;
  --sc-gl-mote: 0.55;
}
[data-theme="dark"] {
  color-scheme: dark;
  --sc-bg: #14110E;
  --sc-bg-rgb: 20, 17, 14;
  --sc-bg-2: #1A1612;
  --sc-surface: #1E1915;
  --sc-surface-2: #241E19;
  --sc-heading: #FFFFFF;
  --sc-text: rgba(246, 242, 234, 0.72);
  --sc-muted: rgba(246, 242, 234, 0.5);
  --sc-line: rgba(255, 255, 255, 0.1);
  --sc-tonal: rgba(255, 255, 255, 0.07);
  --sc-tonal-2: rgba(255, 255, 255, 0.13);
  --sc-accent-text: #E3A548;
  --sc-stroke: rgba(246, 242, 234, 0.55);
  --sc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  --sc-shadow-lg: 0 40px 100px rgba(0, 0, 0, 0.55);
  --sc-glow: 0.2;
  --sc-gl-amt: 1;
  --sc-gl-mote: 0.95;
}
/* bands that stay dark in both themes: the sacred clocks, the summary card and the footer */
.sc-night {
  --sc-bg: #14110E;
  --sc-bg-rgb: 20, 17, 14;
  --sc-bg-2: #1E1915;
  --sc-surface: #1E1915;
  --sc-surface-2: #29231E;
  --sc-heading: #FFFFFF;
  --sc-text: rgba(246, 242, 234, 0.72);
  --sc-muted: rgba(246, 242, 234, 0.5);
  --sc-line: rgba(255, 255, 255, 0.1);
  --sc-tonal: rgba(255, 255, 255, 0.07);
  --sc-tonal-2: rgba(255, 255, 255, 0.13);
  --sc-accent-text: #E3A548;
  --sc-stroke: rgba(246, 242, 234, 0.55);
  --sc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  --sc-gl-amt: 1;
  --sc-gl-mote: 0.95;
  background-color: var(--sc-bg);
  color: var(--sc-text);
}
/* in the dark theme the dark bands sit one step deeper than the page */
[data-theme="dark"] .sc-night {
  --sc-bg: #0E0C0A;
  --sc-bg-rgb: 14, 12, 10;
  --sc-bg-2: #171310;
  --sc-surface: #1A1612;
  --sc-surface-2: #221C17;
}
.sc-ground-2 {
  background-color: var(--sc-bg-2);
}
/* the logo in the theme's own ink */
.logo-on-dark {
  display: none;
}
[data-theme="dark"] .logo-on-light {
  display: none;
}
[data-theme="dark"] .logo-on-dark {
  display: block;
}

/*======================
3. Header And Navigation
========================*/
.sc-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  padding: 22px 0;
  transition: background-color 0.35s var(--sc-ease), padding 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}
.sc-header.is-sticky {
  position: fixed;
  padding: 12px 0;
  background: rgba(var(--sc-bg-rgb), 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--sc-line), 0 20px 40px -30px rgba(0, 0, 0, 0.3);
  animation: sc-drop 0.45s var(--sc-ease);
}
@keyframes sc-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sc-logo img {
  width: auto;
  height: 46px;
}
.sc-header .sc-logo {
  flex: 0 0 auto;
}
/* the menu sits in one tonal capsule; hover and the section in view show by colour only (no backdrop
   filter here: it would make the capsule the mega panel's containing block) */
.sc-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 50px;
  background: var(--sc-tonal);
}
.sc-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sc-heading);
  white-space: nowrap;
}
.sc-nav > ul > li > a i {
  font-size: 10px;
  color: var(--sc-accent-text);
  transition: transform 0.3s var(--sc-ease);
}
.sc-nav > ul > li > a:hover,
.sc-nav > ul > li > a.is-current,
.sc-nav > ul > li.has-mega:hover > a,
.sc-nav > ul > li.has-mega:focus-within > a {
  color: var(--sc-accent-text);
}
.sc-nav > ul > li.has-mega:hover > a i,
.sc-nav > ul > li.has-mega:focus-within > a i {
  transform: rotate(180deg);
}
.header-end {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-count {
  display: none;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 40px;
  background: var(--sc-tonal);
  font-size: 13px;
  white-space: nowrap;
  color: var(--sc-text);
}
.header-count b {
  font-weight: 600;
  color: var(--sc-heading);
}
.header-count i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sc-lamp);
}
.round-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sc-tonal);
  color: var(--sc-heading);
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease);
}
.round-btn:hover {
  background: var(--sc-tonal-2);
  color: var(--sc-accent-text);
}
.sc-burger {
  display: none;
}

/*======================
4. Mega Menu
========================*/
/* every template on the left, the pointed one's home pages on the right: each preview swaps to its
   right-to-left twin while the pointer rests on the RTL link */
.has-mega {
  position: static;
}
.sc-mega {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  width: min(1400px, calc(100vw - 48px));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition: opacity 0.3s var(--sc-ease), transform 0.3s var(--sc-ease), visibility 0.3s;
}
.sc-header.is-sticky .sc-mega {
  top: calc(100% + 6px);
}
/* a bridge keeps the panel open while the pointer crosses the gap */
.sc-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
}
.has-mega:hover .sc-mega,
.has-mega:focus-within .sc-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-inner {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  max-height: calc(100vh - 130px);
  overflow: hidden;
  border-radius: 18px;
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow-lg), 0 0 0 1px var(--sc-line);
}
.mega-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  overflow-y: auto;
  background: var(--sc-surface-2);
  box-shadow: inset -1px 0 0 var(--sc-line);
}
.mega-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background-color 0.3s var(--sc-ease);
}
.mega-item .faith-tile {
  width: 42px;
  height: 42px;
  font-size: 16px;
}
.mi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.mi-name {
  font-family: var(--sc-ff-display);
  font-size: 20px;
  color: var(--sc-heading);
}
.mi-place {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-text);
}
.mega-item > i {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-text);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}
.mega-item:hover,
.mega-item.is-active {
  background: var(--sc-tonal);
}
.mega-item.is-active > i {
  opacity: 1;
  transform: translateX(0);
}
.mega-panes {
  padding: 28px 30px 26px;
  overflow-y: auto;
}
.mega-pane[hidden] {
  display: none;
}
.pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.pane-title {
  font-family: var(--sc-ff-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--sc-heading);
}
.pane-title em {
  font-style: normal;
  color: var(--t-text);
}
.pane-count {
  font-size: 13px;
  color: var(--sc-muted);
}
.mega-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 18px;
}
.mega-shot {
  position: relative;
  min-width: 0;
}
.shot-main {
  display: block;
}
.shot-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--t-deep);
  box-shadow: 0 0 0 1px var(--sc-line);
  transition: transform 0.45s var(--sc-ease), box-shadow 0.45s var(--sc-ease);
}
.shot-frame .frame-bar {
  height: 24px;
  padding: 0 10px;
  gap: 5px;
}
.shot-frame .frame-bar i {
  width: 7px;
  height: 7px;
}
.shot-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
}
.shot-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: opacity 0.35s var(--sc-ease);
}
.shot-main:hover .shot-frame {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--t-light), 0 18px 36px -12px rgba(0, 0, 0, 0.35);
}
.shot-name {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sc-heading);
  transition: color 0.3s var(--sc-ease);
}
.shot-main:hover .shot-name {
  color: var(--t-text);
}
.shot-note {
  font-size: 12px;
  color: var(--sc-muted);
}
.mega-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sc-line);
}
.mega-plate {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--sc-radius);
  background: var(--t-deep);
}
.mega-plate img {
  display: block;
  width: auto;
  height: 26px;
}
.mega-foot p {
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sc-text);
}
.mega-foot p b {
  display: block;
  font-weight: 500;
  color: var(--sc-heading);
}
.mega-foot .sc-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/*======================
5. Language And Theme Controls
========================*/
.sc-lang {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 15px 0 13px;
  border: 0;
  border-radius: 40px;
  background: var(--sc-tonal);
  color: var(--sc-heading);
  font-family: var(--sc-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease);
}
.flag {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lang-btn > i {
  font-size: 10px;
  color: var(--sc-accent-text);
  transition: transform 0.3s var(--sc-ease);
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
  background: var(--sc-tonal-2);
}
.lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  z-index: 60;
  width: 270px;
  padding: 10px;
  border-radius: 18px;
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow-lg), 0 0 0 1px var(--sc-line);
  animation: sc-pop 0.3s var(--sc-ease);
}
.lang-menu[hidden] {
  display: none;
}
@keyframes sc-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.lang-group {
  margin: 8px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.lang-group + ul {
  margin-bottom: 4px;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--sc-heading);
}
.lang-menu a small {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sc-muted);
}
.lang-menu a > i {
  display: none;
  font-size: 12px;
  color: var(--sc-accent-text);
}
.lang-menu a:hover {
  background: var(--sc-tonal);
}
.lang-menu a[aria-current="true"] {
  background: var(--sc-tonal);
}
.lang-menu a[aria-current="true"] small {
  display: none;
}
.lang-menu a[aria-current="true"] > i {
  display: block;
  margin-left: auto;
}
.lang-note {
  margin: 6px 12px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--sc-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--sc-muted);
}
/* the theme switch: a moon in the light theme, a sun in the dark one */
[data-theme-toggle] .sci-sun {
  display: none;
}
[data-theme="dark"] [data-theme-toggle] .sci-moon {
  display: none;
}
[data-theme="dark"] [data-theme-toggle] .sci-sun {
  display: inline-block;
}
.theme-btn {
  font-size: 19px;
}
.theme-btn i {
  transition: transform 0.5s var(--sc-ease);
}
.theme-btn:hover i {
  transform: rotate(-18deg);
}
/* the on/off track used where the switch carries a label (mobile menu, footer) */
.switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 22px;
  background: var(--sc-tonal-2);
  transition: background-color 0.3s var(--sc-ease);
}
.switch i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sc-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s var(--sc-ease);
}
[aria-pressed="true"] > .switch {
  background: var(--sc-lamp);
}
[aria-pressed="true"] > .switch i {
  transform: translateX(18px);
}

/*======================
6. Mobile Menu
========================*/
.sc-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(var(--sc-night-rgb), 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--sc-ease), visibility 0.35s;
}
.sc-menu.is-open {
  opacity: 1;
  visibility: visible;
}
.menu-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(400px, 100%);
  padding: 24px 26px 40px;
  overflow-y: auto;
  background: var(--sc-bg);
  color: var(--sc-text);
  transform: translateX(100%);
  transition: transform 0.4s var(--sc-ease);
}
.sc-menu.is-open .menu-panel {
  transform: translateX(0);
}
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.menu-head img {
  height: 38px;
  width: auto;
}
.menu-label {
  margin: 26px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-accent-text);
}
.menu-templates a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sc-line);
}
.menu-templates .faith-tile {
  width: 38px;
  height: 38px;
  font-size: 14px;
}
.menu-templates b {
  font-family: var(--sc-ff-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--sc-heading);
}
.menu-templates small {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-text);
}
.menu-links a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--sc-line);
  font-size: 16px;
  font-weight: 500;
  color: var(--sc-heading);
}
.menu-links a:hover,
.menu-templates a:hover b {
  color: var(--sc-accent-text);
}
.menu-langs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.menu-langs a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sc-tonal);
  font-size: 14px;
  color: var(--sc-heading);
}
.menu-langs a[aria-current="true"] {
  background: var(--sc-heading);
  color: var(--sc-bg);
}
.menu-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 16px 14px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--sc-tonal);
  color: var(--sc-heading);
  font-family: var(--sc-ff-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.menu-theme > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.menu-theme > span:first-child i {
  font-size: 17px;
  color: var(--sc-accent-text);
}

/*======================
7. Hero And Colonnade
========================*/
.sc-hero {
  position: relative;
  padding: 190px 0 70px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sc-bg);
}
/* lamp light falling from above */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 72% -10%, rgba(var(--sc-lamp-rgb), var(--sc-glow)), transparent 70%),
    radial-gradient(700px 500px at 8% 0%, rgba(148, 102, 208, calc(var(--sc-glow) * 0.7)), transparent 70%),
    radial-gradient(900px 500px at 50% 110%, rgba(45, 179, 166, calc(var(--sc-glow) * 0.6)), transparent 70%);
}
.hero-title {
  font-size: clamp(52px, 6.6vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-lead {
  margin-bottom: 30px;
  font-size: 17px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* seven arched windows, rising and falling like the seven lights of the mark */
.sc-colonnade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
  margin-top: 80px;
}
.arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.arch:nth-child(1),
.arch:nth-child(7) {
  margin-top: 66px;
}
.arch:nth-child(2),
.arch:nth-child(6) {
  margin-top: 36px;
}
.arch:nth-child(3),
.arch:nth-child(5) {
  margin-top: 12px;
}
.arch-window {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  border-radius: 999px 999px 10px 10px;
  background: var(--t-deep);
  box-shadow: 0 30px 60px -24px var(--t-light), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.5s var(--sc-ease), box-shadow 0.5s var(--sc-ease);
}
.arch-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s var(--sc-ease);
}
.arch-window::after {
  /* the glass catches the template's own light */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--sc-night-rgb), 0) 50%, rgba(var(--sc-night-rgb), 0.55) 100%);
  box-shadow: inset 0 0 0 2px var(--t-light);
  opacity: 0.85;
}
.arch:hover .arch-window {
  transform: translateY(-8px);
  box-shadow: 0 40px 70px -20px var(--t-light), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.arch:hover .arch-window img {
  transform: scale(1.06);
}
.arch-name {
  margin-top: 18px;
  font-family: var(--sc-ff-display);
  font-size: 23px;
  line-height: 1.1;
  color: var(--sc-heading);
}
.arch-place {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-text);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 70px;
  border-top: 1px solid var(--sc-line);
}
.hero-stats li {
  padding: 28px 0 0;
}
.hero-stats li + li {
  padding-left: 28px;
  border-left: 1px solid var(--sc-line);
}
.hero-stats b {
  display: block;
  font-family: var(--sc-ff-display);
  font-size: clamp(40px, 3.6vw, 58px);
  font-weight: 400;
  line-height: 1;
  color: var(--sc-heading);
  font-variant-numeric: tabular-nums;
}
.hero-stats span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-text);
}

/*======================
8. Marquee And Brands
========================*/
.sc-marquee {
  overflow: hidden;
  padding: 26px 0;
  background: var(--sc-bg-2);
  border-top: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: sc-marquee 46s linear infinite;
}
.marquee-track span {
  font-family: var(--sc-ff-display);
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--sc-stroke);
}
.marquee-track span:nth-of-type(odd) {
  color: var(--sc-heading);
  -webkit-text-stroke: 0;
}
.marquee-track i {
  font-size: 18px;
  color: var(--sc-lamp);
}
@keyframes sc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.sc-brands {
  padding: 56px 0 0;
}
.brand-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
}
/* each logo on its template's own deep tone, so the row reads in both themes */
.brand-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  padding: 26px 14px 20px;
  border-radius: 12px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}
.brand-row img {
  width: auto;
  max-width: 100%;
  height: 34px;
  object-fit: contain;
  opacity: 0.86;
  transition: opacity 0.35s var(--sc-ease);
}
.brand-row span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--t-light);
}
.brand-row a:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--t-light), 0 20px 40px -18px var(--t-light);
}
.brand-row a:hover img {
  opacity: 1;
}

/*======================
9. Template Cards
========================*/
.suite-col {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.suite-col.is-offset {
  padding-top: 160px;
}
.tpl-card {
  overflow: hidden;
  border-radius: 14px;
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow), 0 0 0 1px var(--sc-line);
  transition: transform 0.4s var(--sc-ease), box-shadow 0.4s var(--sc-ease), background-color 0.4s var(--sc-ease);
}
.tpl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sc-shadow-lg), 0 0 0 1px var(--sc-line);
}
.tpl-shot {
  display: block;
  overflow: hidden;
  background: var(--t-deep);
}
.tpl-shot .frame-bar b {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s var(--sc-ease);
}
.tpl-shot:hover .frame-bar b {
  color: var(--t-light);
}
/* the whole home page sits in the frame; while it is pointed at (or focused) it scrolls to the foot of the page
   at an even reading pace, and comes back up when the pointer leaves */
.tpl-scroll {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tpl-scroll img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform var(--sc-scroll-time, 1.2s) cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.tpl-shot.is-scrolling .tpl-scroll img {
  transform: translateY(var(--sc-scroll-to, 0));
}
.tpl-body {
  padding: 34px 36px 38px;
  border-top: 4px solid var(--t);
}
.tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.tpl-plate {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: var(--sc-radius);
  background: var(--t-deep);
}
.tpl-plate img {
  display: block;
  width: auto;
  height: 30px;
}
.tpl-num {
  font-family: var(--sc-ff-display);
  font-size: 46px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--t-text);
}
.tpl-faith {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-text);
}
.tpl-title {
  margin-bottom: 14px;
  font-size: clamp(28px, 2.3vw, 36px);
}
.tpl-intro {
  margin-bottom: 24px;
  font-size: 16px;
}
.tpl-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 26px;
  border-top: 1px solid var(--sc-line);
}
.tpl-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--sc-line);
}
.tpl-facts > div:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--sc-line);
}
.tpl-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.tpl-facts dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--sc-heading);
}
.tpl-homes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.tpl-homes a {
  display: block;
}
.tpl-homes img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--sc-line);
  transition: box-shadow 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}
.tpl-homes span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-muted);
}
.tpl-homes a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--t-text);
}
.tpl-homes a:hover span {
  color: var(--t-text);
}
.tpl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.tpl-actions .sc-btn {
  background: var(--t);
  color: var(--sc-white);
}
.tpl-actions .sc-btn:hover {
  background: var(--sc-heading);
  color: var(--sc-bg);
}
[data-theme="dark"] .tpl-actions .sc-btn {
  background: var(--t-light);
  color: var(--sc-ink);
}
[data-theme="dark"] .tpl-actions .sc-btn:hover {
  background: var(--sc-white);
}
/* the summary that closes the shorter column */
.suite-note {
  position: relative;
  overflow: hidden;
  padding: 42px 40px 44px;
  border-radius: 14px;
  background-image: radial-gradient(500px 300px at 100% 0%, rgba(var(--sc-lamp-rgb), 0.16), transparent 70%);
  box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-line);
}
.note-title {
  margin-bottom: 16px;
  font-size: clamp(30px, 2.6vw, 42px);
}
.note-title em {
  font-style: normal;
  color: var(--sc-lamp);
}
.note-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 26px 0 30px;
  border-top: 1px solid var(--sc-line);
}
.note-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--sc-line);
}
.note-facts > div:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--sc-line);
}
.note-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-text);
}
.note-facts dd {
  margin: 4px 0 0;
  font-family: var(--sc-ff-display);
  font-size: 34px;
  line-height: 1;
  color: var(--sc-heading);
}

/*======================
10. Sacred Clocks
========================*/
.sc-clocks {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.clock-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 40px;
}
.clock-tab {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--sc-radius);
  background: transparent;
  text-align: left;
  color: var(--sc-text);
  cursor: pointer;
  transition: background-color 0.3s var(--sc-ease);
}
.clock-tab .dot {
  grid-row: span 2;
}
.clock-tab b {
  font-family: var(--sc-ff-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--sc-heading);
}
.clock-tab small {
  font-size: 12px;
  letter-spacing: 0.06em;
}
.clock-tab:hover {
  background: rgba(255, 255, 255, 0.04);
}
.clock-tab.is-active {
  background: var(--t-deep);
  box-shadow: inset 3px 0 0 var(--t-light), inset 0 0 0 1px var(--sc-line);
}
.dot {
  display: inline-block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--t-light, var(--sc-lamp));
}
.clock-stage {
  position: relative;
  height: 100%;
  min-height: 600px;
}
.clock-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 600px;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--sc-line);
}
.clock-panel[hidden] {
  display: none;
}
.clock-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) saturate(0.9);
  transform: scale(1.04);
}
.clock-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--sc-bg-rgb), 0.62) 0%, rgba(var(--sc-bg-rgb), 0.9) 45%, var(--sc-bg) 100%);
}
.clock-inner {
  padding: 48px 50px 50px;
}
.clock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--t-light);
  color: var(--sc-night);
  font-size: 24px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06);
}
.clock-tag {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-light);
}
.clock-title {
  margin-bottom: 16px;
  font-size: clamp(40px, 3.8vw, 60px);
}
.clock-text {
  max-width: 560px;
  margin-bottom: 26px;
  font-size: 17px;
  color: rgba(246, 242, 234, 0.82);
}
.clock-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 560px;
  margin: 0 0 30px;
  border-top: 1px solid var(--sc-line);
}
.clock-facts > div {
  padding: 14px 0;
}
.clock-facts > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--sc-line);
}
.clock-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-text);
}
.clock-facts dd {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--sc-heading);
}

/*======================
11. Giving And Ministries
========================*/
/* one row per template: who, the tradition's own way of giving, what the pages do, and the two pages */
.give-list {
  border-top: 1px solid var(--sc-line);
}
.give-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 440px;
  align-items: center;
  gap: 40px;
  padding: 30px 26px;
  border-bottom: 1px solid var(--sc-line);
  border-radius: 16px;
  transition: background-color 0.35s var(--sc-ease);
}
.give-row:hover {
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow);
}
.give-who {
  display: flex;
  align-items: center;
  gap: 16px;
}
.give-who .faith-tile {
  width: 54px;
  height: 54px;
  font-size: 20px;
}
.give-name {
  font-size: 30px;
  line-height: 1.1;
}
.give-place {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text);
}
.give-term {
  margin-bottom: 14px;
  font-family: var(--sc-ff-display);
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.15;
  color: var(--t-text);
}
.give-facts {
  margin: 0;
}
.give-facts > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 8px 0;
}
.give-facts > div + div {
  border-top: 1px solid var(--sc-line);
}
.give-facts dt {
  padding-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.give-facts dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--sc-text);
}
.give-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.give-page {
  display: block;
}
.give-shot {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--t-deep);
  box-shadow: 0 0 0 1px var(--sc-line);
  transition: transform 0.4s var(--sc-ease), box-shadow 0.4s var(--sc-ease);
}
.give-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s var(--sc-ease);
}
.give-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-heading);
  transition: color 0.3s var(--sc-ease);
}
.give-cap i {
  font-size: 11px;
  color: var(--t-text);
  transition: transform 0.3s var(--sc-ease);
}
.give-page:hover .give-shot {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--t-text), 0 18px 36px -14px rgba(0, 0, 0, 0.35);
}
.give-page:hover .give-shot img {
  transform: scale(1.05);
}
.give-page:hover .give-cap {
  color: var(--t-text);
}
.give-page:hover .give-cap i {
  transform: translateX(4px);
}

/*======================
12. Home Pages
========================*/
.sc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}
.sc-filter button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 0;
  border-radius: 40px;
  background: var(--sc-tonal);
  color: var(--sc-heading);
  font-family: var(--sc-ff-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease);
}
.sc-filter button span {
  font-size: 12px;
  color: var(--sc-accent-text);
}
.sc-filter button:hover {
  background: var(--sc-tonal-2);
}
.sc-filter button.is-active {
  background: var(--sc-heading);
  color: var(--sc-bg);
}
.sc-filter button.is-active span {
  color: var(--sc-lamp);
}
.home-grid > [hidden] {
  display: none;
}
.home-card {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--sc-surface);
  box-shadow: 0 20px 50px rgba(26, 22, 18, 0.08), 0 0 0 1px var(--sc-line);
  transition: transform 0.4s var(--sc-ease), box-shadow 0.4s var(--sc-ease);
}
.home-shot {
  display: block;
  overflow: hidden;
}
.home-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s var(--sc-ease);
}
.home-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 20px;
  border-top: 3px solid var(--t);
}
.home-meta b {
  font-family: var(--sc-ff-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--sc-heading);
}
.home-meta small {
  font-size: 13px;
  color: var(--sc-muted);
}
.home-meta i {
  margin-left: auto;
  font-size: 13px;
  color: var(--t-text);
  transition: transform 0.3s var(--sc-ease);
}
.home-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sc-shadow-lg), 0 0 0 1px var(--sc-line);
}
.home-card:hover .home-shot img {
  transform: scale(1.04);
}
.home-card:hover .home-meta i {
  transform: translateX(4px);
}

/*======================
13. Kit And Standards
========================*/
.kit-col {
  height: 100%;
  padding: 32px 30px 26px;
  border-radius: 12px;
  background: var(--sc-surface);
  box-shadow: 0 0 0 1px var(--sc-line);
}
.kit-title {
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 18px;
  font-size: 26px;
}
.kit-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--sc-spectrum);
}
.kit-list {
  margin: 0;
}
.kit-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sc-line);
}
.kit-list > div:last-child {
  border-bottom: 0;
}
.kit-list dt {
  font-size: 15px;
  font-weight: 400;
  color: var(--sc-text);
}
.kit-list dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  color: var(--sc-heading);
}
/* "in all seven templates": a check, not a count */
.kit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--sc-lamp-rgb), 0.18);
  color: var(--sc-accent-text);
  font-size: 11px;
  vertical-align: middle;
}
.std-tile {
  height: 100%;
  padding: 36px 34px 34px;
  border-radius: 12px;
  background: var(--sc-surface);
  box-shadow: 0 0 0 1px var(--sc-line);
  transition: box-shadow 0.35s var(--sc-ease), transform 0.35s var(--sc-ease), background-color 0.35s var(--sc-ease);
}
.std-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sc-shadow), 0 0 0 1px var(--sc-line);
}
.std-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(var(--sc-lamp-rgb), 0.16);
  color: var(--sc-accent-text);
  font-size: 21px;
  transition: background-color 0.35s var(--sc-ease), color 0.35s var(--sc-ease);
}
.std-tile:hover .std-icon {
  background: var(--sc-lamp);
  color: var(--sc-ink);
}
.std-title {
  margin-bottom: 12px;
  font-size: 28px;
}
.std-tile p {
  font-size: 16px;
}

/*======================
14. Footer
========================*/
.sc-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}
.sc-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 3px;
  background: var(--sc-spectrum);
}
/* the closing call: the suite's own line and its two ways in */
.footer-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 110px 0 70px;
  border-bottom: 1px solid var(--sc-line);
}
.footer-cta .sc-eyebrow {
  margin-bottom: 18px;
}
.footer-cta-title {
  font-size: clamp(42px, 4.6vw, 76px);
  line-height: 1;
}
.footer-cta-title span {
  display: block;
  white-space: nowrap;
}
.footer-cta-title em {
  font-style: normal;
  color: var(--sc-lamp);
}
.footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
}
.footer-main {
  padding: 70px 0 64px;
}
.footer-brand .sc-logo img {
  height: 50px;
}
.footer-text {
  max-width: 400px;
  margin-top: 24px;
  font-size: 16px;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sc-tonal);
  color: var(--sc-heading);
  font-size: 15px;
  transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}
.footer-social a:hover {
  background: var(--sc-lamp);
  color: var(--sc-ink);
  transform: translateY(-3px);
}
.footer-title {
  position: relative;
  margin-bottom: 26px;
  padding-bottom: 16px;
  font-size: 24px;
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--sc-spectrum);
}
.footer-templates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.footer-templates a {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-templates .faith-tile {
  width: 42px;
  height: 42px;
  font-size: 15px;
  transition: background-color 0.3s var(--sc-ease), color 0.3s var(--sc-ease);
}
.footer-templates b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sc-heading);
  transition: color 0.3s var(--sc-ease);
}
.footer-templates small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--sc-muted);
}
.footer-templates a:hover .faith-tile {
  background: var(--t-light);
  color: var(--sc-ink);
}
.footer-templates a:hover b {
  color: var(--t-light);
}
.footer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--sc-text);
}
.footer-links a i {
  font-size: 10px;
  color: var(--sc-lamp);
  transition: transform 0.3s var(--sc-ease);
}
.footer-links a:hover {
  color: var(--sc-heading);
}
.footer-links a:hover i {
  transform: translateX(3px);
}
/* the suite in figures, label and value on one line */
.footer-facts {
  margin: 0;
}
.footer-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sc-line);
}
.footer-facts dt {
  font-size: 14px;
  font-weight: 400;
  color: var(--sc-text);
}
.footer-facts dd {
  margin: 0;
  font-family: var(--sc-ff-display);
  font-size: 22px;
  line-height: 1;
  color: var(--sc-heading);
}
.footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--sc-line);
  font-size: 14px;
}
.footer-bottom b {
  font-weight: 500;
  color: var(--sc-heading);
}
.footer-switches {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-switches a,
.footer-switches button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 40px;
  background: var(--sc-tonal);
  color: var(--sc-heading);
  font-family: var(--sc-ff-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s var(--sc-ease);
}
.footer-switches a:hover,
.footer-switches button:hover {
  background: var(--sc-tonal-2);
}
.footer-switches > * > i {
  color: var(--sc-lamp);
}
.footer-switches .switch {
  margin-left: 4px;
}
.to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sc-lamp);
  color: var(--sc-ink);
  transition: background-color 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}
.to-top:hover {
  background: var(--sc-white);
  transform: translateY(-3px);
}
/* the name, cut in outline across the foot of the page */
.footer-mark {
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  z-index: -1;
  transform: translateX(-50%);
  font-family: var(--sc-ff-display);
  font-size: clamp(120px, 19vw, 360px);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246, 242, 234, 0.08);
  pointer-events: none;
  user-select: none;
}

/*======================
15. WebGL Layers
========================*/
/* one shader runner paints these: the seven lights over the colonnade, a slow silk of lamp light in the dark
   bands. They read their colours from the theme's tokens and stand still under reduced motion. */
.sc-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* the silk is lamp gold folding into ember */
.sc-gl.is-texture {
  --sc-gl-a: 240, 186, 96;
  --sc-gl-b: 226, 100, 60;
}
.sc-hero .sc-gl {
  --sc-gl-c1: 76, 123, 224;
  --sc-gl-c2: 240, 146, 43;
  --sc-gl-c3: 212, 85, 138;
  --sc-gl-c4: 45, 179, 166;
  --sc-gl-c5: 217, 169, 63;
  --sc-gl-c6: 148, 102, 208;
  --sc-gl-c7: 226, 100, 60;
}

/*======================
16. Motion
========================*/
/* nothing is hidden by CSS: the script hides an element only when it arms its reveal */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee-track {
    animation: none;
  }
  .sc-header.is-sticky,
  .lang-menu {
    animation: none;
  }
}