/* ============ Fellowship of the Rockies — redesign ============ */
@font-face {
  font-family: "Articulat CF Demi Bold";
  src: url("https://irp.cdn-website.com/23c7a45a/fonts/Articulat+CF+Demi+Bold-fc5e_400.ttf");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Articulat CF Normal";
  src: url("https://irp.cdn-website.com/23c7a45a/fonts/Articulat_CF_Normal-860f_400.otf");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --bg: #111111;
  --panel: #1c1c1c;
  --panel-2: #232323;
  --line: #2c2c2c;
  --text: #ffffff;
  --muted: #a3a3a3;
  --dim: #6b6b6b;
  --accent-blue: #5b9bdd;
  --brand-blue: #3d7fc4;
  --brand-purple: #7b2f9e;
  --brand-lime: #b0cc2a;
  --grad: linear-gradient(105deg, #4b8fd4 0%, #8a3bb0 48%, #b0cc2a 100%);
  --radius-lg: 26px;
  --radius-md: 14px;
  /* one rhythm for the whole page: every section boundary = --sec-gap total */
  --sec-gap: clamp(110px, 13vh, 170px);
  --sec-half: calc(var(--sec-gap) / 2);
  --head: "Articulat CF Demi Bold", "Helvetica Neue", Arial, sans-serif;
  --body: "Articulat CF Normal", "Helvetica Neue", Arial, sans-serif;
  --serif-i: "Articulat CF Demi Bold", "Helvetica Neue", Arial, sans-serif;

  /* themable component tokens */
  --btn-bg1: #262626; --btn-bg2: #1c1c1c;
  --btn-bg1-h: #2e2e2e; --btn-bg2-h: #222222;
  --btn-border: #3d3d3d; --btn-border-h: #5a5a5a; --btn-text: #ffffff;
  --nav-bg: rgba(22,22,22,.72); --nav-border: #3c3c3c;
  --nav-link: #d7d7d7; --nav-link-h: #ffffff; --nav-link-hbg: rgba(255,255,255,.07);
  --menu-line: #8f8f8f;
  --drawer-bg: rgba(255,255,255,.15); --drawer-border: rgba(255,255,255,.1);
  --drawer-text: #ffffff; --drawer-muted: rgba(255,255,255,.75);
  --drawer-icon: rgba(255,255,255,.85); --drawer-hover: rgba(255,255,255,.1);
  --card-bg1: #202020; --card-bg2: #191919;
  --card-border: #2c2c2c; --card-border-h: #3e3e3e;
  --fill-on: #ffffff; --fill-off: #4d4d4d;
  --flink: #6e6e6e;
  --img-shadow: rgba(0,0,0,.55);
  --card-shadow: rgba(0,0,0,.4);
  --footer-glow1: rgba(123,47,158,.28);
  --footer-glow2: rgba(61,127,196,.3);
}

html[data-theme="light"] {
  --bg: #f5f3ef;
  --panel: #ffffff;
  --panel-2: #f1efeb;
  --line: #e2ded7;
  --text: #171717;
  --muted: #5f5d58;
  --dim: #97928a;
  --accent-blue: #2f6fb4;

  --btn-bg1: #ffffff; --btn-bg2: #f0ede7;
  --btn-bg1-h: #ffffff; --btn-bg2-h: #f7f5f1;
  --btn-border: #d8d4cc; --btn-border-h: #b8b3a9; --btn-text: #171717;
  --nav-bg: rgba(255,255,255,.78); --nav-border: #dcd8d0;
  --nav-link: #4c4a45; --nav-link-h: #000000; --nav-link-hbg: rgba(0,0,0,.05);
  --menu-line: #6f6c66;
  --drawer-bg: rgba(255,255,255,.72); --drawer-border: rgba(0,0,0,.08);
  --drawer-text: #171717; --drawer-muted: rgba(23,23,23,.7);
  --drawer-icon: rgba(23,23,23,.78); --drawer-hover: rgba(0,0,0,.05);
  --card-bg1: #ffffff; --card-bg2: #faf8f4;
  --card-border: #e6e2da; --card-border-h: #d2ccc2;
  --fill-on: #171717; --fill-off: #c9c4bc;
  --flink: #8f8a80;
  --img-shadow: rgba(40,32,18,.22);
  --card-shadow: rgba(40,32,18,.12);
  --footer-glow1: rgba(176,204,42,.3);
  --footer-glow2: rgba(61,127,196,.24);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.08; }
h1, h2 { letter-spacing: -.015em; }

/* brand gradient accent text — the only place the full palette appears.
   Static CSS gradient by default; grainient.js upgrades each em to an
   animated shader canvas (adds .grain-live) when WebGL2 is available. */
.grad-text, .join-title em, .sec-title em {
  font-family: var(--head); font-style: normal;
  display: inline-block; position: relative; white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.join-title em.grain-live, .sec-title em.grain-live { background: none; }
.grain-live > .grainient-canvas { opacity: 1; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--head); font-size: 16px; color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
  border: 1px solid var(--btn-border); border-radius: 12px;
  padding: 12px 26px; cursor: pointer;
  box-shadow: 0 10px 24px var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--btn-border-h); background: linear-gradient(180deg, var(--btn-bg1-h), var(--btn-bg2-h)); }
.btn-solid { padding: 13px 30px; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: 16px; color: var(--text);
  padding: 13px 6px; transition: gap .25s ease, color .25s ease;
}
.btn-ghost:hover { gap: 13px; color: var(--accent-blue); }

/* ============ Header ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center;
  padding: 20px 34px; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.menu-btn {
  width: 44px; height: 40px; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.menu-btn span {
  height: 2.5px; border-radius: 2px; background: var(--menu-line);
  transition: background .25s ease, width .25s ease;
}
.menu-btn span:nth-child(1) { width: 30px; }
.menu-btn span:nth-child(2) { width: 22px; }
.menu-btn span:nth-child(3) { width: 26px; }
.menu-btn:hover span { background: var(--text); width: 30px; }
.logo { margin-left: 26px; display: flex; align-items: center; }
/* horizontal lockup is ~5:1, so it needs far less height than the stacked mark */
.logo img { height: 40px; width: auto; opacity: .95; transition: opacity .2s ease; }
.logo:hover img { opacity: 1; }
html[data-theme="light"] .logo img { filter: invert(1); opacity: .88; }
.pill-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--nav-border); border-radius: 18px;
  padding: 10px 16px;
  box-shadow: 0 14px 34px var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.pill-nav a {
  font-family: var(--head); font-size: 15.5px; color: var(--nav-link);
  padding: 6px 12px; border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
.pill-nav a:hover { color: var(--nav-link-h); background: var(--nav-link-hbg); }

.theme-btn {
  margin-left: 12px; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nav-bg); color: var(--nav-link);
  border: 1px solid var(--nav-border); cursor: pointer;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px var(--card-shadow);
  transition: color .25s ease, transform .35s ease, background .25s ease;
}
.theme-btn:hover { color: var(--nav-link-h); transform: rotate(20deg); }
.theme-btn .moon { display: none; }
html[data-theme="light"] .theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .moon { display: block; }

/* ============ Drawer ============ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
/* Glass panel, matching the Cornerstone Athens drawer:
   320px wide, flush to the top-left, 20px radius, translucent + blur. */
.drawer {
  position: fixed; z-index: 71; top: 0; bottom: 0; left: 0;
  width: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--drawer-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--drawer-border); border-radius: 20px;
  padding: 26px 22px 20px;
  transform: translateX(-100%);
  transition: transform .45s cubic-bezier(.32,.72,.24,1);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute; top: 20px; right: 18px;
  background: none; border: 0; color: var(--drawer-text); cursor: pointer; opacity: .85;
  transition: transform .3s ease, opacity .2s ease;
}
.drawer-close:hover { opacity: 1; transform: rotate(90deg); }
.drawer-group { margin-bottom: 30px; }
.drawer-group h4 {
  font-family: var(--body); font-weight: 400; font-size: 18px;
  color: var(--drawer-muted); margin-bottom: 14px;
}
.drawer-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 9px 8px; border-radius: 12px;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s ease, background .2s ease;
  transition-delay: var(--d, 0s);
}
.drawer.open .drawer-item { opacity: 1; transform: none; }
.drawer-item:hover { background: var(--drawer-hover); }
/* solid single-color icons (no gradient) */
.drawer-item .di-icon {
  flex: 0 0 auto; width: 29px; height: 29px; margin-top: 1px;
  color: var(--drawer-icon);
  transition: color .2s ease;
}
.drawer-item:hover .di-icon { color: var(--drawer-text); }
.drawer-item strong {
  display: block; font-family: var(--head); font-weight: 400;
  font-size: 20px; line-height: 1.2; color: var(--drawer-text);
}
.drawer-item small {
  display: block; font-family: var(--body); font-size: 14px;
  color: var(--drawer-muted); line-height: 1.35; margin-top: 2px;
}
.drawer-foot { border-top: 1px solid var(--drawer-border); padding-top: 16px; display: grid; gap: 9px; }
.drawer-foot > a { font-size: 14.5px; color: var(--drawer-muted); }
.drawer-foot > a:hover { color: var(--drawer-text); }
.drawer-social { display: flex; gap: 14px; padding: 4px 0; }
.drawer-social a { color: var(--drawer-muted); transition: color .2s ease, transform .2s ease; }
.drawer-social a:hover { color: var(--drawer-text); transform: translateY(-2px); }
.drawer-legal { display: flex; gap: 12px; }
.drawer-legal a { font-size: 12px; color: var(--drawer-muted); }
.drawer-legal a:hover { color: var(--drawer-text); }
.drawer-copy { font-size: 11.5px; color: var(--drawer-muted); opacity: .75; }

/* ============ Aurora (top-of-page background) ============ */
/* Sits behind everything at the very top; the hero card and sections (all
   positioned, later in the DOM) paint over it, so the aurora shows as an
   ambient glow behind the header and around the hero. Rendered by aurora.js;
   degrades to nothing (transparent) without WebGL2. */
/* Aurora now lives in the footer, glowing up from the bottom edge (replaces the
   old radial corner-glows). scaleY(-1) flips the shader so its curtains rise
   from the bottom; the mask then fades it out toward the top of the footer. */
.aurora-bottom {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 34%, transparent 90%);
}
.aurora-bottom canvas { position: absolute; inset: 0; display: block; }
/* Light theme uses brighter aurora colours (set in aurora.js) so they stay
   vivid on cream; a modest opacity keeps it from overpowering the page. */
html[data-theme="light"] .aurora-bottom { opacity: .7; }
/* keep footer content above the aurora */
.footer-inner, .footer-bar, .footer-copy { position: relative; z-index: 1; }

/* ============ Hero ============ */
/* Matches the Cornerstone Athens hero: near-full-bleed panel (20px gutters),
   40px radius, tall, with bare chevron arrows and pill pagination. */
.hero { position: relative; padding: 116px 20px 0; margin-bottom: var(--sec-half); }
.hero-track {
  position: relative; height: clamp(400px, 68vh, 560px);
  border-radius: 40px; overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 40px;
  opacity: 0; transform: scale(.985); pointer-events: none;
  transition: opacity .7s ease, transform .7s ease;
  background: #0c0c0c;
}
.hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hs-media, .hs-media video, .hs-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hs-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.18) 0%, rgba(10,10,10,.28) 45%, rgba(10,10,10,.82) 100%),
              linear-gradient(100deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 55%);
}
/* hero copy always sits over dark imagery — keep it light in both themes */
.hs-content {
  position: absolute; left: clamp(24px, 5vw, 70px); right: 24px; bottom: clamp(28px, 6vh, 64px);
  max-width: 680px; color: #fff;
}
.hs-content h1, .hs-content h2 { color: #fff; }
.hs-eyebrow {
  font-family: var(--head); font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: #cfcfcf; margin-bottom: 12px;
  opacity: 0; transform: translateY(18px);
}
.hs-content h1, .hs-content h2 {
  font-size: clamp(38px, 5vw, 64px); margin-bottom: 16px;
  opacity: 0; transform: translateY(24px);
}
.hs-text {
  color: #d9d9d9; font-size: 17px; max-width: 640px; margin-bottom: 22px;
  opacity: 0; transform: translateY(24px);
}
.hs-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; opacity: 0; transform: translateY(24px); }
.hs-actions .btn {
  background: linear-gradient(180deg, #262626, #1c1c1c);
  border-color: #3d3d3d; color: #fff;
}
.hs-actions .btn:hover { border-color: #5a5a5a; background: linear-gradient(180deg, #2e2e2e, #222); }
.hs-actions .btn-ghost { color: #fff; }
.hs-actions .btn-ghost:hover { color: var(--accent-blue); }
.hero-slide.is-active .hs-eyebrow { animation: rise .8s .15s cubic-bezier(.22,.7,.3,1) forwards; }
.hero-slide.is-active h1, .hero-slide.is-active h2 { animation: rise .8s .28s cubic-bezier(.22,.7,.3,1) forwards; }
.hero-slide.is-active .hs-text { animation: rise .8s .42s cubic-bezier(.22,.7,.3,1) forwards; }
.hero-slide.is-active .hs-actions { animation: rise .8s .55s cubic-bezier(.22,.7,.3,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* bare chevrons — no circular background, like Cornerstone */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: #fff; opacity: .8;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition: opacity .25s ease, transform .25s ease;
}
.hero-arrow:hover { opacity: 1; }
/* 30px inside the track (hero has 20px of its own padding) */
.hero-arrow.prev { left: 50px; }
.hero-arrow.next { right: 50px; }
.hero-arrow.prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-arrow.next:hover { transform: translateY(-50%) translateX(3px); }

.hero-dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 5; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: 4px; border: 0; cursor: pointer;
  background: #fff; opacity: .2;
  transition: width .35s ease, opacity .35s ease;
}
.hero-dots button:hover { opacity: .5; }
.hero-dots button.is-active { width: 22px; opacity: 1; }

/* ============ Mission ============ */
.mission {
  position: relative;
  padding: var(--sec-half) 24px;
  min-height: clamp(560px, 82vh, 780px);
  overflow: clip;
  display: flex; align-items: center; justify-content: center;
}
.fill-text {
  max-width: 880px; text-align: left;
  font-size: clamp(38px, 5.2vw, 72px); line-height: 1.14;
  color: var(--fill-off);
  position: relative; z-index: 2;
}
/* each word lights gray→white on its own as you scroll (--t set per word in JS) */
.fill-text .w {
  color: var(--fill-off);
  color: color-mix(in srgb, var(--fill-on) calc(var(--t, 0) * 100%), var(--fill-off));
  transition: color .12s linear;
}
.float-img {
  position: absolute; z-index: 1;
  border-radius: 18px; object-fit: cover;
  box-shadow: 0 24px 60px var(--img-shadow);
  will-change: transform;
}
/* balanced 2-left / 3-right composition hugging the edges, clear of the text */
.fl-1 { width: clamp(160px, 16vw, 280px); aspect-ratio: 3 / 2;    left: 2.5%;  top: 7%;  --rot: -6deg; }
.fl-2 { width: clamp(140px, 13vw, 220px); aspect-ratio: 4 / 5;    left: 5%;  top: 52%; --rot: 4.5deg; }
.fl-3 { width: clamp(170px, 17vw, 300px); aspect-ratio: 16 / 9;   right: 2.5%; top: 8%;  --rot: 5deg; }
.fl-4 { width: clamp(130px, 12vw, 200px); aspect-ratio: 1 / 1;    right: 3.5%; top: 40%; --rot: -4deg; }
.fl-5 { width: clamp(150px, 14vw, 230px); aspect-ratio: 5 / 4;    right: 10%; top: 66%; --rot: 3deg; }

/* ============ Join us sunday ============ */
.join { text-align: center; padding: var(--sec-half) 24px; }
.join-title { font-size: clamp(48px, 6.4vw, 84px); }
.join-title em { padding-left: 4px; }
.join-text { color: var(--muted); max-width: 610px; margin: 24px auto 28px; font-size: 17px; }
.join-times { display: flex; gap: 18px; justify-content: center; }

/* ============ Ministries ============ */
.ministries {
  max-width: 1120px; margin: 90px auto 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px;
  text-align: left;
}
.min-card { grid-column: span 2; }
.min-card.wide { grid-column: span 3; }
.min-card {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 22px;
  padding: 0 26px 28px;
  box-shadow: 0 24px 50px var(--card-shadow);
  transition: transform .35s ease, border-color .35s ease;
}
.min-card:hover { transform: translateY(-6px); border-color: var(--card-border-h); }
.mc-img {
  margin: -18px 0 22px; border-radius: 16px; overflow: hidden;
  transform: rotate(-3.2deg); transform-origin: center;
  box-shadow: 0 18px 40px var(--img-shadow);
  transition: transform .45s cubic-bezier(.22,.7,.3,1);
  aspect-ratio: 16 / 10;
}
.min-card:not(.wide) .mc-img { aspect-ratio: 1 / 1.02; }
.mc-img.tilt-r { transform: rotate(3.2deg); }
.min-card:hover .mc-img { transform: rotate(0deg) scale(1.02); }
.mc-img img { width: 100%; height: 100%; object-fit: cover; }
.min-card h3 { font-size: 27px; margin-bottom: 10px; }
.min-card p { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; min-height: 44px; }

/* ============ Fan section ============ */
/* Not pinned — a pinned version needs ~1.5 viewports of height, which left a lot
   of dead space. The section is now only as tall as its content; the cards spread
   as it travels through the viewport (progress computed in script.js). */
.fan-section {
  position: relative;
  margin-top: var(--sec-half);
  margin-bottom: var(--sec-half);
}
.fan-sticky {
  position: relative; overflow: hidden;
  padding: 10px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fan {
  position: relative; width: min(1140px, 92vw); height: 285px;
  margin-bottom: 0;
}
.fan-card {
  position: absolute; left: 50%; top: 50%;
  width: 235px; height: 235px; margin: -117px 0 0 -117px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px var(--img-shadow);
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0));
  z-index: var(--z, 1);
  transition: box-shadow .3s ease;
  will-change: transform;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fc-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 18px;
  background: rgba(59, 33, 92, .92);
  opacity: 0; transition: opacity .3s ease;
}
.fc-overlay strong { font-family: var(--head); font-weight: 400; font-size: 18px; color: #fff; }
.fc-overlay em { font-style: normal; font-size: 14.5px; color: #e6e6e6; }
.fan-card:hover .fc-overlay { opacity: 1; }

.coming-up { text-align: center; }
.coming-up h2 { font-size: clamp(44px, 5.8vw, 74px); margin-bottom: 12px; }
.coming-up p { color: var(--muted); margin-bottom: 20px; }

/* ============ Footer ============ */
.footer {
  position: relative; z-index: 1; padding: var(--sec-half) 34px 30px;
  background: var(--bg);
  overflow: hidden;
  transition: background .4s ease;
}
.footer-inner {
  max-width: 1260px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .9fr 1fr; gap: 40px;
  align-items: center; min-height: 480px;
}
.footer-links { display: flex; gap: 56px; position: relative; }
.footer-links a { white-space: nowrap; }
/* Grainient canvas (used by the headline accents only — the footer links are
   a flat solid colour, see .footer-links a below) */
.grainient-canvas {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease .15s;
}
.fl-col { display: grid; gap: 18px; align-content: start; }
.footer-links a {
  font-family: var(--head); font-size: clamp(28px, 2.8vw, 42px);
  letter-spacing: .02em; text-transform: uppercase; color: var(--flink);
  position: relative; width: fit-content;
  transition: color .3s ease;
}
.footer-links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px; background: var(--text);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.footer-links a:hover { color: var(--text); }
.footer-links a:hover::after { transform: scaleX(1); }

.footer-app { text-align: center; }
.footer-app h3 { font-size: clamp(33px, 3.2vw, 48px); margin-bottom: 18px; }
.footer-app p { font-family: var(--head); color: var(--muted); font-size: 20px; margin-bottom: 8px; }

.footer-phone { display: flex; justify-content: center; }
.footer-phone img {
  width: min(340px, 80%); aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 24px; transform: rotate(6deg);
  box-shadow: 0 40px 70px var(--img-shadow);
  animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(4.5deg) translateY(-12px); }
}

.footer-bar {
  max-width: 1260px; margin: 50px auto 0;
  padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.fb-left { display: grid; gap: 4px; }
.fb-left a { color: var(--muted); font-size: 15.5px; }
.fb-left a:hover { color: var(--text); }
.fb-social { display: flex; gap: 16px; }
.fb-social a { color: var(--muted); transition: color .2s ease, transform .2s ease; }
.fb-social a:hover { color: var(--text); transform: translateY(-3px); }
.fb-right { display: flex; gap: 20px; }
.fb-right a { color: var(--dim); font-size: 14.5px; }
.fb-right a:hover { color: var(--text); }
.footer-copy { text-align: center; color: var(--dim); font-size: 13.5px; margin-top: 26px; }
.footer-copy a { text-decoration: underline; }

/* ============ Shared section headings ============ */
.sec-eyebrow {
  font-family: var(--head); font-size: 14.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-blue); margin-bottom: 11px;
}
.sec-title { font-size: clamp(40px, 5vw, 68px); }

/* ============ Values strip ============ */
.values { text-align: center; padding: var(--sec-half) 24px; }
.values-row {
  max-width: 1180px; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.value-tile {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 20px;
  padding: 26px 20px 24px; text-align: left;
  box-shadow: 0 20px 44px var(--card-shadow);
  transition: transform .35s ease, border-color .35s ease;
}
.value-tile:hover { transform: translateY(-6px); border-color: var(--card-border-h); }
.value-tile span {
  font-family: var(--head); font-size: 13px; letter-spacing: .1em;
  color: var(--accent-blue);
}
.value-tile h3 { font-size: 21px; margin: 8px 0 8px; }
.value-tile p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ============ Service time cards ============ */
.times-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.time-card {
  display: grid; gap: 2px; justify-items: center;
  min-width: 180px; padding: 20px 30px 18px;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 18px;
  box-shadow: 0 20px 44px var(--card-shadow);
  transition: transform .3s ease, border-color .3s ease;
}
.time-card:hover { transform: translateY(-4px); border-color: var(--card-border-h); }
.time-card small { font-family: var(--head); font-size: 14.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.time-card strong { font-family: var(--head); font-weight: 400; font-size: 33px; color: var(--text); }
.time-card em { font-style: normal; font-size: 13.5px; color: var(--accent-blue); }
.join-address { margin-top: 26px; color: var(--muted); font-size: 15.5px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.join-address svg { color: var(--accent-blue); }
.join-address a { color: var(--text); }
.join-address a:hover { color: var(--accent-blue); }

/* ============ Ministries rail (Apple "get to know" style) ============ */
.rail-section { padding: var(--sec-half) 0; }
.rail-head {
  max-width: 1180px; margin: 0 auto 34px; padding: 0 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.rail-arrows { display: flex; gap: 10px; }
.rail-arrows button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
  border: 1px solid var(--btn-border); color: var(--btn-text);
  transition: transform .25s ease, border-color .25s ease;
}
.rail-arrows button:hover { transform: scale(1.08); border-color: var(--btn-border-h); }
.rail-arrows button:disabled { opacity: .35; transform: none; cursor: default; }
.rail {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px max(24px, calc((100vw - 1180px) / 2)) 26px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  position: relative; flex: 0 0 300px; height: 400px;
  border-radius: 24px; overflow: hidden; scroll-snap-align: start;
  box-shadow: 0 24px 50px var(--card-shadow);
  transition: transform .35s ease;
}
.rail-card:hover { transform: translateY(-6px); }
.rail-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.7,.3,1);
}
.rail-card:hover img { transform: scale(1.05); }
.rc-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,0) 35%, rgba(8,10,14,.78) 100%);
}
.rc-eyebrow {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--head); font-size: 13.5px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.88);
}
.rc-body { position: absolute; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 4px; }
.rc-body strong { font-family: var(--head); font-weight: 400; font-size: 26px; color: #fff; line-height: 1.1; }
.rc-body small { color: #d5d5d5; font-size: 14.5px; line-height: 1.45; }

/* ============ Events list rows ============ */
.events { max-width: 900px; margin: 0 auto; padding: var(--sec-half) 24px; text-align: center; }
.event-rows { margin: 44px 0 0; display: grid; gap: 14px; text-align: left; }
.event-row {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 18px 40px var(--card-shadow);
  transition: transform .3s ease, border-color .3s ease;
}
.event-row:hover { transform: translateX(6px); border-color: var(--card-border-h); }
.event-row > svg { margin-left: auto; color: var(--dim); flex: 0 0 auto; transition: transform .3s ease, color .3s ease; }
.event-row:hover > svg { transform: translateX(4px); color: var(--accent-blue); }
.ev-date {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--nav-link-hbg); border: 1px solid var(--card-border);
}
.ev-date strong { font-family: var(--head); font-weight: 400; font-size: 23px; color: var(--text); line-height: 1; }
.ev-date small { font-size: 11.5px; letter-spacing: .14em; color: var(--accent-blue); margin-top: 3px; }
.ev-info { display: grid; gap: 3px; }
.ev-info strong { font-family: var(--head); font-weight: 400; font-size: 20px; color: var(--text); }
.ev-info small { color: var(--muted); font-size: 14.5px; }

/* ============ Online + Give duo tiles ============ */
.duo { margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.duo-tile {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 24px;
  padding: 34px 32px 30px;
  box-shadow: 0 24px 50px var(--card-shadow);
}
.duo-tile h3 { font-size: clamp(24px, 2.4vw, 31px); margin-bottom: 12px; }
.duo-text { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; }
.duo-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.duo-note { margin-top: 16px; color: var(--dim); font-size: 13.5px; }
.live-dot {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: 13.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-blue); margin-bottom: 10px;
}
.live-dot span {
  width: 8px; height: 8px; border-radius: 50%; background: #e0524d;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ============ Events page ============ */
.page-hero {
  position: relative; padding: 116px 20px 0;
  margin-bottom: var(--sec-half);
}
.page-hero-banner {
  position: relative; height: clamp(300px, 44vh, 440px);
  border-radius: 40px; overflow: hidden;
}
.page-hero-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,14,.2) 0%, rgba(8,10,14,0) 40%, rgba(8,10,14,.8) 100%);
}
.page-hero-content {
  position: absolute; left: clamp(24px, 5vw, 56px); right: clamp(24px, 5vw, 56px);
  bottom: clamp(24px, 5vh, 44px); z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.page-hero-content .ph-eyebrow {
  font-family: var(--head); font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: #cfe0f5; margin-bottom: 8px;
}
.page-hero-content h1 { color: #fff; font-size: clamp(34px, 5vw, 60px); }

.events-page { max-width: 1180px; margin: 0 auto; padding: 0 24px var(--sec-half); }
.events-page .sec-eyebrow { text-align: left; }
.events-page > .sec-title { margin-bottom: 44px; }
.event-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.event-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 50px var(--card-shadow);
  transition: transform .35s ease, border-color .35s ease;
}
.event-card:hover { transform: translateY(-6px); border-color: var(--card-border-h); }
.ec-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0d12; }
.ec-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.7,.3,1); }
.event-card:hover .ec-art img { transform: scale(1.04); }
.ec-datechip {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: grid; justify-items: center; gap: 1px;
  min-width: 54px; padding: 8px 11px; border-radius: 13px;
  background: rgba(10,12,16,.72); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ec-datechip strong { font-family: var(--head); font-weight: 400; font-size: 21px; color: #fff; line-height: 1; }
.ec-datechip small { font-size: 10.5px; letter-spacing: .14em; color: #cfe0f5; margin-top: 3px; }
.ec-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.ec-meta { font-family: var(--head); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 8px; }
.ec-body h3 { font-size: 25px; margin-bottom: 12px; line-height: 1.12; }
.ec-desc {
  color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-signup {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--head); font-size: 15px; color: var(--text);
  transition: gap .25s ease, color .25s ease;
}
.event-card:hover .ec-signup { gap: 12px; color: var(--accent-blue); }
@media (max-width: 760px) {
  .event-cards { grid-template-columns: 1fr; }
  .page-hero { padding: 100px 14px 0; }
}

/* ============ Event detail modal ============ */
.ev-modal {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: flex-start; justify-content: center;
  padding: 6vh 18px 5vh; overflow-y: auto;
}
.ev-modal.open { display: flex; }
.ev-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 8, 12, .66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease;
}
.ev-modal.open .ev-modal-backdrop { opacity: 1; }
.ev-modal-card {
  position: relative; z-index: 1; margin: auto 0;
  width: min(920px, 100%);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: 26px; overflow: hidden;
  display: grid; grid-template-columns: 1.02fr 1fr;
  box-shadow: 0 44px 100px rgba(0,0,0,.55);
  transform: translateY(18px) scale(.985); opacity: 0;
  transition: transform .38s cubic-bezier(.22,.7,.3,1), opacity .38s ease;
}
.ev-modal.open .ev-modal-card { transform: none; opacity: 1; }
.ev-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,22,28,.6); color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .3s ease, background .2s ease;
}
.ev-modal-close:hover { background: rgba(40,44,54,.8); transform: rotate(90deg); }
.ev-modal-art { position: relative; min-height: 280px; background: #0b0d12; }
.ev-modal-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-modal-datechip {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: grid; justify-items: center; gap: 1px;
  min-width: 58px; padding: 9px 12px; border-radius: 14px;
  background: rgba(10,12,16,.72); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ev-modal-datechip strong { font-family: var(--head); font-weight: 400; font-size: 22px; color: #fff; line-height: 1; }
.ev-modal-datechip small { font-size: 11px; letter-spacing: .14em; color: #cfe0f5; margin-top: 3px; }
.ev-modal-body { padding: 36px 36px 32px; }
.ev-modal-eyebrow {
  font-family: var(--head); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-blue); margin-bottom: 9px;
}
.ev-modal-body h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; line-height: 1.1; }
.ev-modal-meta { display: grid; gap: 10px; margin-bottom: 20px; }
.evm-row { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: 15px; }
.evm-row svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent-blue); }
.ev-modal-desc { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.ev-modal-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ev-modal-actions .btn { background: linear-gradient(180deg, var(--btn-bg1-h), var(--btn-bg2)); }
.ev-modal-free { font-size: 13.5px; color: var(--dim); }
@media (max-width: 720px) {
  .ev-modal { padding: 0; }
  .ev-modal-card { grid-template-columns: 1fr; border-radius: 0; min-height: 100%; width: 100%; }
  .ev-modal-art { min-height: 220px; }
  .ev-modal-body { padding: 26px 22px 30px; }
}

/* ============ Reveal on scroll ============ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-link { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.22,.7,.3,1) var(--d, 0s); }
.reveal-link.in { opacity: 1; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 1680px) {
  .fill-text { max-width: 760px; font-size: clamp(36px, 4.7vw, 64px); }
}
@media (max-width: 1280px) {
  .fl-2, .fl-5 { display: none; }
  .fill-text { max-width: 660px; }
  .fl-1, .fl-3 { width: clamp(140px, 13vw, 210px); }
  .fl-4 { width: clamp(110px, 10vw, 160px); }
}
@media (max-width: 1024px) {
  .values-row { grid-template-columns: repeat(2, 1fr); }
  .value-tile:last-child { grid-column: span 2; }
  .duo { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; min-height: 0; gap: 56px; }
  .footer-links { justify-content: center; }
  .fl-col { justify-items: center; }
}
@media (max-width: 720px) {
  .hero { padding: 84px 14px 0; }
  .hero-track, .hero-slide { border-radius: 24px; }
  .pill-nav { display: none; }
  .theme-btn { margin-left: auto; }
  .logo img { height: 32px; }
  .hero-arrow.prev { left: 10px; } .hero-arrow.next { right: 10px; }
  .mission { padding: 90px 24px; }
  .float-img { opacity: .35; }
  .fl-1 { left: -30px; }
  .fl-3, .fl-4 { right: -40px; }
  .values-row { grid-template-columns: 1fr; }
  .value-tile:last-child { grid-column: span 1; }
  .rail-card { flex-basis: 240px; height: 330px; }
  .event-row { flex-wrap: wrap; }
  .fan-card { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
  .fan { height: 230px; }
  .join-times { flex-wrap: wrap; }
  .footer { padding: 90px 20px 24px; }
  .footer-bar { justify-content: center; text-align: center; }
  .fb-left { justify-items: center; }
}