/*
RCCG Christ Church Edmonton
Shared Site Stylesheet

This file is the visual source of truth for the direct-build website.
Reuse existing tokens/components across pages before introducing new ones.
*/

:root{
  /* Colorful Daybreak — parent-site palette */
  --navy:#3D348B;
  --navy-deep:#30286F;
  --violet:#7678ED;
  --white:#FFFFFF;
  --gold:#F7B801;
  --gold-light:#FFD94A;
  --daybreak-orange:#F18701;
  --daybreak-coral:#F35B04;
  --black:#1A1A1B;
  --slate:#636E72;
  --cyan:#00CEC9;
  /* Ministry-specific Genesis colors remain intact */
  --red:#E72F24;
  --orange:#F39221;
  --blue:#21A9E1;
  --paper:#F7F6FF;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'DM Sans', Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--sans);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit}
::selection{background:var(--gold);color:var(--black)}
.wrap{width:min(1440px,calc(100% - 56px));margin:auto}
.serif{font-family:var(--serif)}

/* =========================================================
   SITE FOUNDATION
   Global defaults for every Christ Church page.
   Page/component styles below may intentionally override these.
========================================================= */

/* Global type scale */
h1,h2,h3,h4,h5,h6{
  margin:0;
  color:inherit;
  font-family:var(--sans);
  font-weight:700;
  text-wrap:balance;
}

h1{
  font-size:clamp(3.4rem,7vw,7.4rem);
  line-height:.88;
  letter-spacing:-.065em;
}

h2{
  font-size:clamp(2.8rem,5vw,5.6rem);
  line-height:.92;
  letter-spacing:-.055em;
}

h3{
  font-size:clamp(2rem,3.3vw,3.75rem);
  line-height:.98;
  letter-spacing:-.045em;
}

h4{
  font-size:clamp(1.35rem,2vw,1.9rem);
  line-height:1.1;
  letter-spacing:-.025em;
}

h5{
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-.015em;
}

h6{
  font-size:.78rem;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}

p{
  margin:0 0 1.2em;
  line-height:1.7;
}

p:last-child{margin-bottom:0}

ul,ol{
  margin:0 0 1.5rem;
  padding-left:1.25rem;
}

li+li{margin-top:.45rem}

blockquote{
  margin:2rem 0;
  padding-left:1.5rem;
  border-left:3px solid var(--gold);
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.5vw,2.2rem);
  font-style:italic;
  line-height:1.3;
}

hr{
  border:0;
  border-top:1px solid rgba(61,52,139,.16);
  margin:3rem 0;
}

strong{font-weight:700}

/* Editorial typography helpers */
.display{
  font-size:clamp(4rem,9vw,10rem);
  line-height:.78;
  letter-spacing:-.075em;
  text-transform:uppercase;
}

.heading-serif{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  text-transform:none;
  letter-spacing:-.04em;
}

.eyebrow,
.kicker{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.3;
  text-transform:uppercase;
}

/* Page layout primitives */
.container,
.wrap{
  width:min(1440px,calc(100% - 56px));
  margin-inline:auto;
}

.container-narrow{
  width:min(880px,calc(100% - 56px));
  margin-inline:auto;
}

.container-reading{
  width:min(720px,calc(100% - 56px));
  margin-inline:auto;
}

.page-section{
  padding-block:clamp(72px,9vw,128px);
}

.page-section-sm{
  padding-block:clamp(48px,6vw,84px);
}

.page-section-lg{
  padding-block:clamp(96px,12vw,168px);
}

.section-header{
  display:grid;
  gap:1.25rem;
  margin-bottom:clamp(38px,5vw,72px);
}

.section-header.center{
  text-align:center;
  justify-items:center;
}

.section-intro{
  max-width:680px;
  color:var(--slate);
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.7;
}

/* General content rhythm */
.prose{
  max-width:720px;
}

.prose > *+*{
  margin-top:1.25em;
}

.prose h2,
.prose h3,
.prose h4{
  margin-top:1.5em;
}

.prose a:not(.btn){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}

/* Reusable grid primitives */
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px);
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,42px);
}

/* Reusable surfaces */
.surface-paper{
  background:var(--paper);
  color:var(--black);
}

.surface-white{
  background:var(--white);
  color:var(--black);
}

.surface-navy{
  background:var(--navy);
  color:var(--white);
}

.surface-navy-deep{
  background:var(--navy-deep);
  color:var(--white);
}

.surface-daybreak{
  background:linear-gradient(
    135deg,
    var(--daybreak-coral) 0%,
    var(--daybreak-orange) 35%,
    var(--gold) 100%
  );
  color:#171124;
}

/* Accessible interaction defaults */
a,button,input,textarea,select{
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:4px;
}

button,
.btn{
  cursor:pointer;
}

/* Media defaults */
figure{margin:0}

iframe{
  max-width:100%;
  border:0;
}

/* Screen-reader-only utility */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(max-width:760px){
  .container,
  .wrap,
  .container-narrow,
  .container-reading{
    width:min(100% - 28px,1440px);
  }

  h1{
    font-size:clamp(3rem,14vw,5.4rem);
  }

  h2{
    font-size:clamp(2.5rem,11vw,4.5rem);
  }

  h3{
    font-size:clamp(1.85rem,8vw,3rem);
  }

  .display{
    font-size:clamp(3.5rem,16vw,6rem);
  }

  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }
}

/* Legacy alias retained for existing homepage markup */
.kicker{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;padding:1rem 1.3rem;border:1px solid currentColor;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;transition:.35s ease}
.btn::after{content:'↗';font-size:1rem;transition:.35s ease}
.btn:hover::after{transform:translate(4px,-4px)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#111}
.btn-light{color:white;background:transparent;border-color:rgba(255,255,255,.45)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}

/* NAV */
.nav-shell{position:fixed;z-index:100;top:0;left:0;right:0;color:#fff;mix-blend-mode:normal}
.nav-shell::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(35,29,82,.78),transparent);z-index:-1;pointer-events:none}
.nav-inner{height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid rgba(255,255,255,.16)}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.06em}
.logo-mark{width:42px;height:42px;border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--gold);position:relative}
.logo-mark::after{content:'';position:absolute;width:14px;height:1px;background:var(--gold)}
.logo small{display:block;font-size:.56rem;letter-spacing:.18em;font-weight:600;opacity:.7;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:2rem;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.nav-links a{position:relative}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--gold);transition:.3s ease}
.nav-links a:hover::after{right:0}
.nav-cta{padding:.75rem 1rem;border:1px solid var(--gold);color:var(--gold)}
.menu-btn{display:none;background:none;border:0;color:white;font-size:1.4rem}

/* HERO */
.hero{min-height:100svh;background:var(--navy);color:white;position:relative;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:-4%;z-index:-4;overflow:hidden;background:var(--navy-deep);transform:scale(1.02)}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center 44%;display:block;filter:saturate(1) brightness(1.05) contrast(1.02)}
.hero-video-toggle{position:absolute;right:34px;bottom:78px;z-index:8;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,8,35,.38);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:1rem;transition:.3s ease}
.hero-video-toggle:hover{background:var(--gold);border-color:var(--gold);color:#111;transform:scale(1.05)}
.hero::before{content:'';position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(61,52,139,.62) 0%,rgba(61,52,139,.42) 42%,rgba(61,52,139,.18) 70%,rgba(61,52,139,.08) 100%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(to top,rgba(48,40,111,.34),transparent 46%)}

.hero-content{min-height:100svh;padding-top:112px;padding-bottom:48px;display:flex;align-items:flex-end;justify-content:center}
.hero-main{width:100%;max-width:1120px}
.hero-title{margin:0;font-size:clamp(1.05rem,2.2vw,2.8rem);line-height:.9;letter-spacing:-.05em;font-weight:700;text-transform:uppercase}
.hero-title .line{display:block}
.hero-title .glory{font-family:inherit;font-style:normal;text-transform:uppercase;color:var(--gold-light);font-weight:700;letter-spacing:inherit;margin-left:.28em}
.hero-title .person{font-family:inherit;font-style:normal;text-transform:uppercase;color:#fff;-webkit-text-stroke:0;margin-left:.24em;font-weight:700;letter-spacing:inherit}
.scroll-note{position:absolute;right:20px;top:50%;transform:rotate(90deg) translateX(50%);transform-origin:right top;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero-split{display:grid;grid-template-columns:auto clamp(84px,8vw,118px) auto;gap:clamp(12px,1.6vw,22px);align-items:center;justify-content:center;width:100%}
.hero-copy{max-width:480px}
.hero-copy.left{text-align:right;justify-self:end}
.hero-copy.left{text-align:right;justify-self:end;max-width:none}
.hero-copy.left .hero-title .line:first-child{white-space:nowrap}
.hero-copy.right{text-align:left;justify-self:start;max-width:none}
.hero-divider{
  position:relative;
  width:clamp(84px,8vw,118px);
  height:clamp(84px,8vw,118px);
  justify-self:center;
  align-self:center;
}
.hero-divider::before,
.hero-divider::after{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20120%20180%27%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%0A%20%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FFD94A%27/%3E%0A%20%20%20%20%3Cstop%20offset%3D%270.55%27%20stop-color%3D%27%23F7B801%27/%3E%0A%20%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23F18701%27/%3E%0A%20%20%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Cpath%20d%3D%27M58%208c11%2017%2015%2035%2018%2055%204%2024%209%2047%2021%2068%204%207%208%2015%208%2024-12-5-20-16-28-28-12-17-19-36-24-56C48%2053%2040%2036%2028%2020c10%200%2021-1%2030-12Z%27%20fill%3D%27url%28%23g%29%27/%3E%0A%3C/svg%3E") center/contain no-repeat;
  transform-origin:center;
}
.hero-divider::before{
  transform:rotate(0deg) scaleY(-1) scale(1.02);
}
.hero-divider::after{
  transform:translateY(-12px) rotate(90deg) scale(.98);
  opacity:.96;
}

.hero-copy.right .hero-title .line:first-child{white-space:nowrap}

/* MARQUEE */
.marquee{overflow:hidden;background:linear-gradient(90deg,var(--gold) 0%,var(--daybreak-orange) 62%,var(--daybreak-coral) 100%);color:#111;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite;padding:18px 0}
.marquee-track span{font-size:1rem;text-transform:uppercase;letter-spacing:.15em;font-weight:700;white-space:nowrap}
.marquee-track span::after{content:'✦';padding:0 34px;color:var(--navy)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* SUNDAY / INFO */
.sunday{background:var(--paper);padding:0}
.sunday-grid{display:grid;grid-template-columns:1.1fr .8fr .8fr 1fr;border-left:1px solid rgba(61,52,139,.14)}
.sunday-card{padding:46px 34px;min-height:220px;border-right:1px solid rgba(61,52,139,.14);display:flex;flex-direction:column;justify-content:space-between;transition:.35s ease}
.sunday-card:hover{background:#fff;box-shadow:inset 0 4px 0 var(--violet)}
.sunday-card:first-child{background:var(--navy);color:white}
.sunday-card .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--gold)}
.sunday-card .big{font-family:var(--serif);font-size:clamp(2rem,3vw,3.7rem);line-height:.98;letter-spacing:-.035em}
.sunday-card .small{font-size:.8rem;line-height:1.5;color:var(--slate)}
.sunday-card:first-child .small{color:rgba(255,255,255,.65)}

/* THIS IS CHURCH — white-noise scrollytelling */
.story{
  position:relative;
  overflow:clip;
  background:#f7f6f1;
  color:#17171c;
  padding:116px 0 138px;
  isolation:isolate;
}
.story::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 14% 8%,rgba(247,184,1,.13),transparent 28%),
    radial-gradient(circle at 86% 44%,rgba(118,120,237,.12),transparent 34%),
    #f7f6f1;
}
.story::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%20viewBox%3D%270%200%20180%20180%27%3E%0A%3Cfilter%20id%3D%27n%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.8%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%0A%3C/filter%3E%0A%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.38%27/%3E%0A%3C/svg%3E");
  mix-blend-mode:multiply;
}
.story-ghost{
  position:absolute;
  left:0;
  right:0;
  top:8%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  white-space:nowrap;
  font-size:clamp(9rem,22vw,25rem);
  line-height:.7;
  font-weight:800;
  letter-spacing:-.085em;
  text-transform:uppercase;
  color:rgba(61,52,139,.045);
}
.story-ghost span{
  display:inline-block;
  transform:translate3d(var(--story-ghost-x,0px),0,0);
  will-change:transform;
}
.story-intro{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns: 1.2fr 1.08fr;
  gap:clamp(44px,7vw,110px);
  align-items:end;
  margin-bottom:105px;
}
.story-intro h2{
  margin:0;
  white-space:nowrap;
  font-size:clamp(3.8rem,4.8vw,7.6rem);
  line-height:.80;
  letter-spacing:-.065em;
  text-transform:uppercase;
  color:var(--navy);
}
.story-intro h2 span{
  display:inline;
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  text-transform:none;
  letter-spacing:-.045em;
  color:var(--gold);
  font-size:1em;
}
.story-intro-copy{
  max-width:610px;
  justify-self:end;
  padding-bottom:12px;
}
.story-intro-copy .kicker{
  color:var(--navy);
  margin-bottom:18px;
}
.story-intro-copy p{
  margin:0;
  font-size:clamp(1.08rem,1.48vw,1.32rem);
  line-height:1.72;
  color:#5d5c63;
}
.story-scrolly{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(380px,.78fr);
  gap:clamp(48px,7vw,104px);
  align-items:start;
}
.story-stage{
  position:sticky;
  top:clamp(92px,10vh,122px);
  height:min(76vh,760px);
  min-height:560px;
  overflow:hidden;
  border-radius:28px;
  background:#e9e6df;
  box-shadow:0 30px 80px rgba(48,40,111,.12);
  isolation:isolate;
}
.story-stage::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(15,12,34,.48),transparent 44%),
    linear-gradient(135deg,rgba(61,52,139,.16),transparent 48%);
}
.story-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  overflow:hidden;
  transform:scale(1.09) translate3d(0,30px,0);
  transition:
    opacity .78s cubic-bezier(.2,.8,.2,1),
    transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.story-frame.active{
  opacity:1;
  transform:scale(1) translate3d(0,0,0);
}
.story-frame.is-leaving{
  opacity:0;
  transform:scale(1.035) translate3d(-24px,-12px,0);
}
.story-frame img{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  transform:translate3d(0,var(--story-image-y,0px),0) scale(1.035);
  transition:filter .7s ease;
  filter:saturate(.88) contrast(1.04);
  will-change:transform;
}
.story-frame.active img{filter:saturate(1.02) contrast(1.03)}
.story-frame-base{background:#d9d5cc}
.story-stage .story-frame:first-of-type{z-index:1}
.story-stage .story-frame:nth-of-type(2){z-index:2}
.story-stage .story-frame:nth-of-type(3){z-index:3}

.story-stage-meta{
  position:absolute;
  left:26px;
  right:26px;
  bottom:24px;
  z-index:8;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  color:#fff;
}
.story-stage-meta strong{
  max-width:480px;
  font-size:clamp(1.5rem,2.55vw,2.9rem);
  line-height:.95;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.story-stage-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.76;
}
.story-stage-meta span::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
}
.story-progress{
  position:absolute;
  left:22px;
  top:22px;
  bottom:22px;
  z-index:9;
  width:2px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.story-progress::after{
  content:'';
  display:block;
  width:100%;
  height:calc(var(--story-progress,0) * 100%);
  background:linear-gradient(to bottom,var(--gold),var(--daybreak-orange));
  transition:height .12s linear;
}
.story-orbit{
  position:absolute;
  right:-74px;
  top:-74px;
  z-index:7;
  width:190px;
  height:190px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.26);
  transform:rotate(var(--story-orbit-rotate,0deg));
  will-change:transform;
}
.story-orbit::before,
.story-orbit::after{
  content:'';
  position:absolute;
  border-radius:50%;
}
.story-orbit::before{
  width:16px;
  height:16px;
  left:14px;
  top:50%;
  background:var(--gold);
}
.story-orbit::after{
  inset:28px;
  border:1px solid rgba(255,255,255,.18);
}
.story-steps{
  position:relative;
}
.story-step{
  min-height:82vh;
  display:flex;
  align-items:center;
  position:relative;
  opacity:.28;
  transform:translate3d(0,44px,0);
  transition:opacity .55s ease,transform .75s cubic-bezier(.2,.8,.2,1);
}
.story-step.active{
  opacity:1;
  transform:none;
}
.story-step-inner{
  width:100%;
  padding:44px 0;
  border-top:1px solid rgba(61,52,139,.16);
}
.story-step:first-child .story-step-inner{border-top:0}
.story-number{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--navy);
}
.story-number::after{
  content:'';
  width:44px;
  height:2px;
  background:var(--gold);
  transform:scaleX(.35);
  transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.story-step.active .story-number::after{transform:scaleX(1)}
.story-step h3{
  margin:0 0 24px;
  font-size:clamp(3.3rem,5.6vw,6.6rem);
  line-height:.83;
  letter-spacing:-.065em;
  text-transform:uppercase;
  color:#24232b;
}
.story-step h3 .accent{
  color:var(--daybreak-orange);
}
.story-step p{
  max-width:560px;
  margin:0;
  color:#65636a;
  font-size:1.02rem;
  line-height:1.72;
}
.story-step-pulse{
  position:absolute;
  right:-14px;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  transform:translateY(-50%) scale(.3);
  box-shadow:0 0 0 0 rgba(247,184,1,.24);
  transition:opacity .35s ease,transform .35s ease;
}
.story-step.active .story-step-pulse{
  opacity:1;
  transform:translateY(-50%) scale(1);
  animation:storyPulse 2.4s ease-out infinite;
}
@keyframes storyPulse{
  0%{box-shadow:0 0 0 0 rgba(247,184,1,.25)}
  70%{box-shadow:0 0 0 22px rgba(247,184,1,0)}
  100%{box-shadow:0 0 0 0 rgba(247,184,1,0)}
}
.story-mobile-media{display:none}
.story-closing{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:54px;
  align-items:end;
  margin-top:42px;
  padding-top:76px;
  border-top:1px solid rgba(61,52,139,.16);
}
.story-closing strong{
  display:block;
  max-width:900px;
  font-size:clamp(2.8rem,5.1vw,5.9rem);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:var(--navy);
}
.story-closing strong span{color:var(--daybreak-orange)}
.story-closing p{
  max-width:470px;
  justify-self:end;
  margin:0;
  color:#68666d;
  line-height:1.72;
}


/* EXPRESSIONS — restored modular mosaic on Christ Church purple stage */
.ministry-section{
  background:
    radial-gradient(circle at 12% 18%,rgba(118,120,237,.34),transparent 28%),
    radial-gradient(circle at 88% 74%,rgba(247,184,1,.12),transparent 22%),
    linear-gradient(135deg,#261f68 0%,var(--navy) 48%,#473db0 100%);
  color:#fff;
  padding:95px 0 120px;
  overflow:hidden;
}
.expression-heading{display:grid;grid-template-columns:minmax(170px,.85fr) auto minmax(290px,1.25fr);align-items:center;margin-bottom:108px}
.expression-heading-side{height:52px;background:#252526;color:#fff;display:flex;align-items:center;font-size:1.0rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.expression-heading-side.left{justify-content:flex-end;padding-right:28px}
.expression-heading-side.right{justify-content:flex-start;padding-left:28px}
.expression-heading-title{font-size:clamp(5.2rem,9.1vw,10.4rem);font-weight:800;line-height:.7;letter-spacing:-.075em;text-transform:uppercase;color:#fff;padding:0 30px;white-space:nowrap}
.expression-mosaic-shell{width:100%;overflow:hidden;padding:0 0 12px}
.expression-mosaic{display:flex;width:max-content;will-change:transform;animation:expressionDrift 48s linear infinite}
.expression-group{display:flex;gap:12px;flex:0 0 auto;padding-right:12px}
@keyframes expressionDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.expression-cluster{display:grid;grid-template-columns:340px 340px;grid-template-rows:200px 200px;gap:10px;flex:0 0 auto}
.expression-cluster .expression-tile.photo{grid-row:1 / 3}
.expression-cluster.photo-right .expression-tile.photo{grid-column:2}
.expression-cluster.photo-left .expression-tile.photo{grid-column:1}
.expression-cluster.photo-right .expression-tile.name,.expression-cluster.photo-right .expression-tile.copy{grid-column:1}
.expression-cluster.photo-left .expression-tile.name,.expression-cluster.photo-left .expression-tile.copy{grid-column:2}
.expression-cluster .expression-tile.name{grid-row:1}
.expression-cluster .expression-tile.copy{grid-row:2}
.expression-tile{position:relative;border-radius:20px;overflow:hidden;background:#e7edfb;color:#26262a;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,color .4s ease,background .45s ease}
.expression-tile:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(24,23,45,.12)}
.expression-tile.name:hover{transform:none;box-shadow:none}
.expression-tile.copy{padding:25px 24px;display:flex;flex-direction:column;justify-content:flex-start}
.expression-tile.copy .tile-label{font-size:.72rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase;margin-bottom:13px}
.expression-tile.copy p{font-size:.92rem;line-height:1.48;margin:0;max-width:295px;color:#555762;transition:color .35s ease}
.expression-tile.copy .hover-arrow{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:4;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.45rem;
  line-height:1;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  opacity:0;
  transform:translate(14px,14px) rotate(-14deg) scale(.72);
  transition:opacity .28s ease,transform .45s cubic-bezier(.2,.8,.2,1),background .3s ease;
  pointer-events:none;
}
.expression-tile.copy:hover .hover-arrow{
  opacity:1;
  transform:translate(0,0) rotate(0) scale(1);
}
.expression-tile.name{display:grid;place-items:center;padding:22px;text-align:center}
.expression-tile.name strong{font-size:clamp(2rem,3vw,3.15rem);font-weight:500;letter-spacing:-.045em;line-height:.92;text-transform:uppercase}
.expression-tile.name.lighthouse strong{font-family:var(--serif);text-transform:none;font-weight:700;color:#fff}
.expression-tile.name.dc strong{font-weight:800;font-size:clamp(1.75rem,2.55vw,2.85rem);color:#fff}
.expression-tile.name.genesis strong{font-family:var(--serif);font-style:italic;text-transform:none;font-weight:800;color:#fff}
.expression-tile.photo{background:#e7edfb}
.expression-tile.photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.05);transition:transform .65s ease,filter .45s ease}
.expression-tile.photo:hover img{transform:scale(1.045);filter:grayscale(.15) saturate(1.02) contrast(1.03)}
.expression-tile.photo .photo-kicker{position:absolute;left:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:rgba(20,20,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.expression-tile.photo .photo-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.expression-tile.photo.lighthouse .photo-kicker{color:#D4AF37}
.expression-tile.photo.dc .photo-kicker{color:#00CEC9}
.expression-tile.photo.genesis .photo-kicker{color:#fff;background:linear-gradient(90deg,rgba(231,47,36,.9),rgba(243,146,33,.9) 52%,rgba(33,169,225,.9))}
.expression-tile::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s ease}
.expression-tile.lighthouse::after{background:linear-gradient(135deg,#1A1A1B 0%,#5a4917 58%,#D4AF37 100%)}
.expression-tile.dc::after{background:linear-gradient(135deg,#1A1A1B 0%,#636E72 55%,#00CEC9 100%)}
.expression-tile.genesis::after{background:linear-gradient(135deg,#E72F24 0%,#F39221 52%,#21A9E1 100%)}
/* Keep one branded title tile per expression permanently in its hover state */
.expression-tile.name::after{opacity:1}
.expression-tile.name{color:#fff}
.expression-tile:not(.photo):hover::after{opacity:1}
.expression-tile.copy:hover,.expression-tile.name:hover{color:#fff}
.expression-tile.copy:hover p{color:rgba(255,255,255,.88)}
.expression-tile.name:hover strong{color:#fff}

/* EVENT */
.event{background:linear-gradient(180deg,var(--paper),#fff 82%);padding:120px 0}
.event-top{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:38px}
.event-top h2{font-family:var(--serif);font-size:clamp(4rem,7vw,7rem);line-height:.9;margin:0;color:var(--navy);letter-spacing:-.05em}
.event-feature{display:grid;grid-template-columns:1.35fr .65fr;min-height:620px;background:#111;color:#fff;overflow:hidden}
.event-image{position:relative;min-height:620px;overflow:hidden}
.event-image img{transition:transform 1s ease}
.event-feature:hover .event-image img{transform:scale(1.04)}
.event-image::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%)}
.event-badge{position:absolute;left:28px;top:28px;z-index:2;background:var(--gold);color:#111;padding:12px 14px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.event-copy{padding:50px 44px;display:flex;flex-direction:column;justify-content:space-between;background:var(--navy)}
.event-date{font-family:var(--serif);font-size:1.45rem;color:var(--gold)}
.event-copy h3{font-family:var(--serif);font-size:clamp(3rem,5vw,5.6rem);line-height:.87;letter-spacing:-.045em;margin:18px 0}
.event-copy p{color:rgba(255,255,255,.72);line-height:1.65}

/* MESSAGE */
.message{background:#080809;color:white;padding:120px 0;position:relative;overflow:hidden}
.message::before{content:'WORD';position:absolute;right:-.06em;bottom:-.22em;font-size:clamp(15rem,32vw,36rem);font-weight:700;color:rgba(255,255,255,.025);letter-spacing:-.09em}
.message-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center;position:relative}
.message-copy h2{font-size:clamp(4.5rem,8vw,9.4rem);line-height:.78;letter-spacing:-.07em;text-transform:uppercase;margin:14px 0 30px}
.message-copy h2 span{display:block;font-family:var(--serif);font-style:italic;text-transform:none;color:var(--gold);font-size:.62em;letter-spacing:-.045em}
.message-copy p{max-width:560px;color:rgba(255,255,255,.7);line-height:1.7}
.video{aspect-ratio:4/5;position:relative;overflow:hidden;max-height:720px}
.video::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 60%)}
.play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:102px;height:102px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 0 0 12px rgba(247,184,1,.16);transition:.35s ease}
.video:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.video-meta{position:absolute;left:28px;right:28px;bottom:26px;z-index:4;display:flex;justify-content:space-between;gap:30px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* VISIT */
.visit{
  background:linear-gradient(
    135deg,
    var(--daybreak-coral) 0%,
    var(--daybreak-orange) 28%,
    var(--gold) 100%
  );color:#171124;padding:0;overflow:hidden}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;min-height:720px; margin-bottom:50px;}
.visit-copy{padding:100px 6vw 90px max(28px,calc((100vw - 1440px)/2));display:flex;flex-direction:column;justify-content:space-between}
.visit-heading-lockup{width:max-content;max-width:100%}
.visit-copy h2{font-size:clamp(3.5rem,6vw,7.4rem);line-height:.75;letter-spacing:-.075em;text-transform:uppercase;margin:12px 0 32px}
.visit-copy h2 .visit-come{display:block;font-family:var(--sans);font-style:normal;font-size:1em;font-weight:700;text-transform:uppercase;white-space:nowrap}
.visit-copy h2 .visit-welcome{font-family:var(--serif);font-style:italic;text-transform:none;font-size:.54em;display:block;word-spacing:.1em}
.visit-first-sunday{
  margin:0 0 16px;
  padding:0;
  color:inherit;
  font-size:clamp(1.15rem,1.7vw,1.75rem);
  line-height:1;
  font-weight:800;
  letter-spacing:.055em;
  word-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.visit-first-sunday span{display:inline}
.visit-copy p{max-width:520px;line-height:1.65;font-size:1.05rem}
.visit-links{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.32);margin-top:40px}
.visit-links a{padding:20px 4px;border-bottom:1px solid rgba(0,0,0,.32);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:center}
.visit-links a span:last-child{display:inline-block;font-size:1rem;transition:transform .3s ease}
.visit-links a:hover span:last-child{transform:translate(4px,-4px)}
.visit-links a:nth-child(odd){padding-right:22px;border-right:1px solid rgba(0,0,0,.32)}
.visit-links a:nth-child(even){padding-left:22px}
.visit-plan-btn{
  margin-top:20px;
}
.visit-card-grid{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:720px;
  padding:10px 10px 10px 0;
  overflow:hidden;
}
.visit-image-card{
  position:relative;
  flex:0 0 54%;
  min-height:0;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.visit-image-card:first-child{
  z-index:2;
  border-radius:20px 0 0 20px;
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
}
.visit-image-card:last-child{
  z-index:1;
  margin-left:-8%;
  border-radius:0 20px 20px 0;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
}
.visit-image-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.visit-image-card:hover img{
  transform:scale(1.045);
  filter:saturate(1.05);
}
.visit-card-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to top,rgba(14,10,34,.72) 0%,rgba(14,10,34,.18) 58%,rgba(14,10,34,.05) 100%);
}
.visit-card-content{
  position:absolute;
  z-index:2;
  left:30px;
  right:30px;
  bottom:28px;
}
.visit-image-card:first-child .visit-card-content{
  right:20%;
}
.visit-image-card:last-child .visit-card-content{
  left:20%;
}
.visit-card-kicker{
  display:block;
  margin-bottom:12px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-light);
}
.visit-card-content h3{
  margin:0 0 22px;
  font-size:clamp(2.25rem,3.7vw,4.6rem);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.visit-card-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 15px;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.visit-card-btn b{
  font-size:1rem;
  transition:transform .3s ease;
}
.visit-image-card:hover .visit-card-btn{
  background:var(--gold);
  border-color:var(--gold);
  color:#171124;
}
.visit-image-card:hover .visit-card-btn b{
  transform:translate(3px,-3px);
}

/* FOOTER */
footer{background:var(--navy-deep);color:white;padding:0px 0 28px}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(3,.6fr);gap:54px}
.footer-brand h3{font-family:var(--serif);font-size:2.2rem;margin:18px 0 8px}
.footer-brand p{color:rgba(255,255,255,.58);line-height:1.7}
footer h4{color:var(--gold);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px}
footer a{display:block;color:rgba(255,255,255,.72);padding:5px 0;font-size:.9rem}
footer a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:58px;padding-top:20px;display:flex;justify-content:space-between;gap:30px;color:rgba(255,255,255,.42);font-size:.73rem;text-transform:uppercase;letter-spacing:.08em}

/* reveals */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1050px){
  .nav-links{gap:1rem}
  .sunday-grid{grid-template-columns:1fr 1fr}.sunday-card{min-height:190px}
  .story-intro,.story-closing,.message-grid{grid-template-columns:1fr}
  .story-intro-copy{justify-self:start}.story-scrolly{grid-template-columns:minmax(0,.95fr) minmax(340px,.78fr)}.story-closing p{justify-self:start}
  .expression-heading{grid-template-columns:150px auto 1fr}.expression-heading-title{font-size:clamp(4.7rem,9vw,8rem)}.expression-heading-side.right{font-size:.55rem}.expression-cluster{grid-template-columns:315px 315px}
  .event-feature{grid-template-columns:1fr}.event-copy{min-height:450px}
  .video{max-width:620px;aspect-ratio:16/10}.visit-grid{grid-template-columns:1fr}.visit-card-grid{min-height:620px;padding:10px}
  .footer-top{grid-template-columns:1.2fr 1fr 1fr 1fr}
}
@media(max-width:760px){
  .wrap{width:min(100% - 28px,1440px)}.nav-inner{height:76px}.nav-links{display:none}.menu-btn{display:block}
  .hero-content{padding-top:96px;padding-bottom:28px;min-height:93svh;align-items:flex-end}.hero-main{display:block}.hero-split{grid-template-columns:1fr;gap:12px;justify-content:stretch}.hero-divider{display:none}.hero-copy{max-width:none}.hero-copy.left,.hero-copy.right{text-align:left;justify-self:stretch}.hero-title{font-size:clamp(2rem,10vw,3.45rem);line-height:.92}.hero-title .glory,.hero-title .person{margin-left:0}.hero-copy.left .hero-title .line:first-child,.hero-copy.right .hero-title .line:first-child{white-space:normal}.scroll-note{display:none}
  .hero-video-toggle{right:16px;bottom:76px;width:46px;height:46px}.marquee-track{padding:14px 0}.marquee-track span{font-size:.76rem}
  .sunday-grid{grid-template-columns:1fr}.sunday-card{min-height:150px;padding:28px 22px}
  .story{padding:82px 0 96px}.story-intro{gap:30px;margin-bottom:62px}.story-intro h2{font-size:clamp(3.2rem,5vw,5.8rem)}
  .story-scrolly{display:block}.story-stage{display:none}.story-step{min-height:0;opacity:1;transform:none;padding:0 0 58px}.story-step-inner{padding:0;border-top:0}.story-step h3{font-size:clamp(2.9rem,13vw,4.6rem)}.story-step-pulse{display:none}.story-mobile-media{display:block;height:330px;margin-top:28px;border-radius:22px;overflow:hidden}.story-mobile-media img{width:100%;height:100%;object-fit:cover}.story-closing{grid-template-columns:1fr;gap:24px;padding-top:46px}.story-closing p{justify-self:start}.story-ghost{font-size:28vw;top:3%}
  .ministry-section{padding:70px 0 85px}.expression-heading{display:block;margin-bottom:58px}.expression-heading-side{height:38px}.expression-heading-side.left{width:105px;justify-content:center;padding:0}.expression-heading-title{font-size:clamp(3.7rem,16vw,6rem);line-height:.8;padding:.12em 14px}.expression-heading-side.right{width:100%;padding:0 14px;font-size:.61rem;overflow:hidden}.expression-group{gap:10px;padding-right:10px}.expression-cluster{grid-template-columns:285px;grid-template-rows:165px 200px 175px;gap:8px}.expression-cluster .expression-tile.photo,.expression-cluster.photo-right .expression-tile.photo,.expression-cluster.photo-left .expression-tile.photo{grid-column:1;grid-row:2}.expression-cluster.photo-right .expression-tile.name,.expression-cluster.photo-left .expression-tile.name{grid-column:1;grid-row:1}.expression-cluster.photo-right .expression-tile.copy,.expression-cluster.photo-left .expression-tile.copy{grid-column:1;grid-row:3}.expression-tile{border-radius:20px}.expression-tile.copy{padding:20px}.expression-tile.copy p{font-size:.84rem}.expression-tile.name strong{font-size:2.25rem}.expression-tile.photo .photo-kicker{left:14px;bottom:14px;font-size:.6rem;padding:7px 9px}.expression-tile.copy .hover-arrow{right:14px;bottom:14px;width:48px;height:48px;font-size:1.25rem}
  .event{padding:90px 0}.event-top{display:block}.event-top .btn{margin-top:25px}.event-image{min-height:400px}.event-copy{padding:34px 24px}
  .message{padding:90px 0}.message-grid{gap:45px}.message-copy h2{font-size:clamp(4rem,16vw,7rem)}.video{aspect-ratio:4/5}.play{width:82px;height:82px}
  .visit-copy{padding:80px 22px}.visit-copy h2{font-size:clamp(4rem,16vw,7rem)}.visit-plan-btn{margin-top:16px}
  .visit-heading-lockup{width:100%}.visit-first-sunday{font-size:clamp(1rem,4.6vw,1.35rem)}.visit-links{grid-template-columns:1fr}.visit-links a:nth-child(odd){border-right:0;padding-right:4px}.visit-links a:nth-child(even){padding-left:4px}.visit-card-grid{min-height:420px;padding:8px}.visit-image-card{flex-basis:55%}.visit-image-card:first-child{border-radius:16px 0 0 16px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}.visit-image-card:last-child{margin-left:-10%;border-radius:0 16px 16px 0;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}.visit-card-content{left:14px;right:14px;bottom:16px}.visit-image-card:first-child .visit-card-content{right:15%}.visit-image-card:last-child .visit-card-content{left:15%}.visit-card-btn{padding:10px 11px;font-size:.6rem;gap:7px}
  .footer-top{grid-template-columns:1fr 1fr;gap:38px 24px}
  .footer-brand{grid-column:1/-1}
  .footer-top>div{display:block}
  .footer-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero-video{display:none}.hero-media{background:url('https://images.unsplash.com/photo-1507692049790-de58290a4334?auto=format&fit=crop&w=2200&q=88') center 42%/cover no-repeat}.hero-video-toggle{display:none}}

/* =========================================================
   GLOBAL CHROME — logo sizing and the solid interior nav

   The nav and footer are injected by js/site.js on every
   page, and both use these classes. They must stay in the
   global stylesheet, not in any one page's block.
========================================================= */
.site-logo{
  display:inline-flex;
  align-items:center;
  width:auto;
  padding:0;
}

.site-logo-img{
  display:block;
  width:auto;
  height:50px;
  max-width:min(230px,36vw);
  object-fit:contain;
}

.footer-site-logo .site-logo-img{
  height:72px;
  max-width:min(300px,70vw);
}

.nav-solid,
.nav-solid.is-scrolled{
  color:var(--navy-deep);
  background:#fff;
  border-bottom:1px solid rgba(61,52,139,.10);
  box-shadow:0 8px 24px rgba(35,29,82,.06);
  transition:box-shadow .3s ease,border-color .3s ease;
}

.nav-solid::after{display:none}
.nav-solid .nav-inner{border-bottom:0}
.nav-solid .nav-links{color:var(--navy-deep)}
.nav-solid .menu-btn{color:var(--navy-deep)}
.nav-solid .nav-links a:not(.nav-cta)::after{background:var(--accent,var(--gold))}
.nav-solid .nav-links a.is-current::after{right:0}

.nav-solid .nav-cta{
  background:var(--gold);
  border-color:var(--gold);
  color:#171124;
}

.nav-solid .nav-cta:hover{
  background:var(--navy-deep);
  border-color:var(--navy-deep);
  color:#fff;
}

@media(max-width:760px){
  .site-logo-img{height:40px;max-width:190px}
  .footer-site-logo .site-logo-img{height:58px;max-width:230px}
}

/* The footer photo strip. js/site.js injects .footer-gallery into EVERY
   page, but these rules only existed in css/about.css — which no page
   loads. Unstyled, the five photographs render at natural size and stack
   into a ~5000px column above the footer on every page of the site. It
   only looked fine while those images were remote and failing to load. */
.footer-gallery{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  height:clamp(150px,16vw,245px);
  overflow:hidden;
  background:#171124;
  margin-bottom:40px !important;
}
.footer-gallery-item{position:relative;margin:0;min-width:0;overflow:hidden}
.footer-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:760px){
  .footer-gallery{display:flex;height:150px;overflow-x:auto;scrollbar-width:none}
  .footer-gallery::-webkit-scrollbar{display:none}
  .footer-gallery-item{flex:0 0 62vw;max-width:280px}
}

/* Expression pages (Genesis / Discovery Centre / Lighthouse) carry their own
   page-specific <style> blocks, the same way About, Ministries and Visit do.
   Nothing for them belongs here. */

/* =========================================================
   XRAIL — the drifting picture rail
   The homepage's Expressions mosaic, generalised so each
   expression page can run one filled with its own photos.
   Mechanic is shared; every colour is a variable, set by the
   page in its own <style> block.
========================================================= */
.xrail-section{
  --xr-bg:var(--navy-deep);
  --xr-tile:#e7edfb;
  --xr-tile-ink:#26262a;
  --xr-tile-mute:#555762;
  --xr-accent:var(--gold);
  --xr-accent-ink:#1a1a1b;
  --xr-bar:#252526;
  --xr-bar-ink:#fff;
  --xr-title-ink:#fff;
  --xr-radius:20px;
  --xr-photo:grayscale(1) contrast(1.05);
  --xr-photo-hover:grayscale(0) saturate(1.02) contrast(1.02);
  background:var(--xr-bg);
  padding:clamp(76px,9vw,124px) 0 clamp(56px,6vw,86px);
  overflow:hidden;
}

.xrail-head{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) auto minmax(260px,1.2fr);
  align-items:center;
  margin-bottom:clamp(46px,6vw,86px);
}
.xrail-head-side{
  height:52px;
  background:var(--xr-bar);
  color:var(--xr-bar-ink);
  display:flex;
  align-items:center;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.xrail-head-side.left{justify-content:flex-end;padding-right:28px}
.xrail-head-side.right{justify-content:flex-start;padding-left:28px;font-size:.8rem;letter-spacing:.1em}
.xrail-head-title{
  font-size:clamp(3.4rem,8.4vw,9.6rem);
  font-weight:800;
  line-height:.72;
  letter-spacing:-.075em;
  text-transform:uppercase;
  color:var(--xr-title-ink);
  padding:0 26px;
  white-space:nowrap;
}

/* --- the rail itself --- */
.xrail-shell{
  width:100%;
  overflow:hidden;
  padding-bottom:12px;
}
.xrail-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:xrailDrift 56s linear infinite;
}
.xrail-shell:hover .xrail-track{animation-play-state:paused}
@keyframes xrailDrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.xrail-group{display:flex;gap:12px;flex:0 0 auto;padding-right:12px}

.xrail-cluster{
  display:grid;
  grid-template-columns:340px 340px;
  grid-template-rows:200px 200px;
  gap:10px;
  flex:0 0 auto;
}
.xrail-cluster .xrail-tile.photo{grid-row:1 / 3}
.xrail-cluster.photo-right .xrail-tile.photo{grid-column:2}
.xrail-cluster.photo-left  .xrail-tile.photo{grid-column:1}
.xrail-cluster.photo-right .xrail-tile.name,
.xrail-cluster.photo-right .xrail-tile.copy{grid-column:1}
.xrail-cluster.photo-left  .xrail-tile.name,
.xrail-cluster.photo-left  .xrail-tile.copy{grid-column:2}
.xrail-cluster .xrail-tile.name{grid-row:1}
.xrail-cluster .xrail-tile.copy{grid-row:2}

.xrail-tile{
  position:relative;
  border-radius:var(--xr-radius);
  overflow:hidden;
  background:var(--xr-tile);
  color:var(--xr-tile-ink);
  isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.xrail-tile.photo{background:rgba(255,255,255,.05)}
.xrail-tile.photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:var(--xr-photo);
  transition:transform .65s ease,filter .45s ease;
}
.xrail-shell:hover .xrail-tile.photo img,
.xrail-tile.photo:hover img{filter:var(--xr-photo-hover)}
.xrail-tile.photo:hover img{transform:scale(1.045)}

.xrail-kicker{
  position:absolute;left:18px;bottom:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(14,14,20,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--xr-accent);
  font-size:.64rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.xrail-kicker::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.12);
}

.xrail-tile.name{
  display:grid;place-items:center;padding:22px;text-align:center;
  background:var(--xr-accent);color:var(--xr-accent-ink);
}
.xrail-tile.name strong{
  font-size:clamp(1.7rem,2.6vw,2.7rem);
  font-weight:800;line-height:.95;letter-spacing:-.035em;
}
.xrail-tile.name.serif strong{
  font-family:var(--serif);font-weight:700;font-style:italic;
  letter-spacing:-.02em;
}

.xrail-tile.copy{
  padding:26px 24px;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.xrail-tile.copy .xrail-label{
  font-size:.68rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:13px;color:var(--xr-accent);
}
.xrail-tile.copy p{
  font-size:.92rem;line-height:1.5;margin:0;max-width:290px;
  color:var(--xr-tile-mute);
}

.xrail-note{
  margin:clamp(38px,4.4vw,60px) auto 0;
  max-width:70ch;
  font-size:.86rem;line-height:1.62;
  color:rgba(255,255,255,.52);
}

@media(max-width:900px){
  .xrail-head{grid-template-columns:1fr;gap:12px;justify-items:start}
  .xrail-head-side{height:42px;padding:0 18px!important;justify-content:flex-start!important;font-size:.74rem;letter-spacing:.1em}
  .xrail-head-title{padding:0;font-size:clamp(3rem,15vw,5.6rem);line-height:.82}
}

@media(max-width:760px){
  /* Mobile motion is driven by scrollLeft in JS so a swipe and the
     marquee can share the same rail. */
  .xrail-shell{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:0 14px 16px;
    cursor:grab;
  }
  .xrail-shell::-webkit-scrollbar{display:none}
  .xrail-shell:active{cursor:grabbing}
  .xrail-track{animation:none!important;transform:none!important;will-change:auto}
  .xrail-group{gap:10px;padding-right:10px}
  .xrail-cluster{
    grid-template-columns:min(62vw,250px) min(62vw,250px);
    grid-template-rows:150px 150px;
    gap:8px;
  }
  .xrail-tile.copy{padding:18px 17px}
  .xrail-tile.copy p{font-size:.84rem;line-height:1.45}
  .xrail-tile.name strong{font-size:1.5rem}
}

@media(prefers-reduced-motion:reduce){
  .xrail-track{animation:none}
  .xrail-tile,.xrail-tile.photo img{transition:none}
}

/* =========================================================
   MOTION LAYER
   A small shared vocabulary the expression pages compose
   from.

   Everything that starts hidden is scoped to `.js` on <html>,
   set by a one-line inline script in the page head. If
   site.js fails to load, or scripting is off, nothing is ever
   hidden and the page reads normally — it just doesn't move.
   prefers-reduced-motion is handled in the block at the end.
========================================================= */

/* --- entrance: on-load, ordered by --d (seconds) --- */
.js [data-enter]{
  opacity:0;
  will-change:transform,opacity;
  animation-duration:.9s;
  animation-timing-function:cubic-bezier(.16,.84,.28,1);
  animation-fill-mode:both;
  animation-delay:var(--d,0s);
}
.is-ready [data-enter]{animation-name:enterUp}
.is-ready [data-enter="up"]{animation-name:enterUp}
.is-ready [data-enter="fade"]{animation-name:enterFade;animation-duration:1.2s}
.is-ready [data-enter="right"]{animation-name:enterRight}
.is-ready [data-enter="left"]{animation-name:enterLeft}
.is-ready [data-enter="scale"]{animation-name:enterScale}
.is-ready [data-enter="pop"]{animation-name:enterPop;animation-timing-function:cubic-bezier(.2,1.5,.4,1);animation-duration:.75s}
.is-ready [data-enter="rise"]{animation-name:enterRise;animation-duration:1.1s}

@keyframes enterUp   {from{opacity:0;transform:translate3d(0,26px,0)}   to{opacity:1;transform:none}}
@keyframes enterRise {from{opacity:0;transform:translate3d(0,54px,0)}   to{opacity:1;transform:none}}
@keyframes enterFade {from{opacity:0}                                   to{opacity:1}}
@keyframes enterRight{from{opacity:0;transform:translate3d(40px,0,0)}   to{opacity:1;transform:none}}
@keyframes enterLeft {from{opacity:0;transform:translate3d(-40px,0,0)}  to{opacity:1;transform:none}}
@keyframes enterScale{from{opacity:0;transform:scale(1.08)}             to{opacity:1;transform:none}}
@keyframes enterPop  {from{opacity:0;transform:scale(.82)}              to{opacity:1;transform:none}}

/* --- headline wipe: one word at a time --- */
.wipe{display:inline-block}
.wipe .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.js .wipe .w > span{
  display:inline-block;
  transform:translate3d(0,105%,0);
  will-change:transform;
}
.is-ready .wipe .w > span{
  animation:wipeWord .95s cubic-bezier(.16,.86,.26,1) both;
  animation-delay:calc(var(--base,0s) + var(--i,0) * .075s);
}
@keyframes wipeWord{to{transform:none}}

/* a scroll-triggered variant for headlines further down the page */
.js .wipe-in .w > span{transform:translate3d(0,105%,0)}
.wipe-in.in .w > span{
  animation:wipeWord .9s cubic-bezier(.16,.86,.26,1) both;
  animation-delay:calc(var(--i,0) * .07s);
}

/* --- parallax: JS writes --py, CSS applies it --- */
[data-parallax]{will-change:transform}
[data-parallax]{transform:translate3d(0,var(--py,0px),0)}
[data-parallax-scale]{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1))}

/* --- reveal stagger: children come in one after another --- */
.js .stagger > *{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.00s}
.stagger.in > *:nth-child(2){transition-delay:.08s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.24s}
.stagger.in > *:nth-child(5){transition-delay:.32s}
.stagger.in > *:nth-child(6){transition-delay:.40s}

/* --- numerals tick into place, character by character --- */
[data-count]{font-variant-numeric:tabular-nums}
[data-count] .tk{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:inherit}
.js [data-count] .tk > span{
  display:inline-block;
  transform:translate3d(0,105%,0);
  will-change:transform;
}
[data-count].is-ticked .tk > span{
  animation:tickUp .62s cubic-bezier(.16,.86,.26,1) both;
  animation-delay:calc(var(--i,0) * .055s);
}
@keyframes tickUp{to{transform:none}}

/* --- lift: the shared hover for anything card-shaped --- */
.lift{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.lift:hover{transform:translateY(-5px)}

@media(prefers-reduced-motion:reduce){
  [data-enter],
  .is-ready [data-enter]{opacity:1!important;animation:none!important;transform:none!important}
  .wipe .w > span,
  .wipe-in .w > span,
  .is-ready .wipe .w > span{transform:none!important;animation:none!important}
  [data-parallax],[data-parallax-scale]{transform:none!important}
  [data-count] .tk > span{transform:none!important;animation:none!important}
  .stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .lift{transition:none}
  .lift:hover{transform:none}
}

/* --- hover polish on the shared rail ------------------- */
.xrail-tile.photo,
.xrail-tile.copy,
.xrail-tile.name{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.xrail-tile.photo:hover,
.xrail-tile.copy:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.xrail-tile.name:hover{transform:translateY(-3px)}
.xrail-kicker{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.xrail-tile.photo:hover .xrail-kicker{transform:translateY(-3px)}

/* the head bars slide apart a touch as the section arrives */
.xrail-head.in .xrail-head-side.left{animation:barInLeft .9s cubic-bezier(.16,.84,.28,1) both}
.xrail-head.in .xrail-head-side.right{animation:barInRight .9s cubic-bezier(.16,.84,.28,1) .08s both}
.xrail-head.in .xrail-head-title{animation:enterScale .9s cubic-bezier(.16,.84,.28,1) .04s both}
@keyframes barInLeft {from{opacity:0;transform:translate3d(-28px,0,0)} to{opacity:1;transform:none}}
@keyframes barInRight{from{opacity:0;transform:translate3d(28px,0,0)}  to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .xrail-head.in .xrail-head-side.left,
  .xrail-head.in .xrail-head-side.right,
  .xrail-head.in .xrail-head-title{animation:none!important}
  .xrail-tile.photo,.xrail-tile.copy,.xrail-tile.name{transition:none}
  .xrail-tile.photo:hover,.xrail-tile.copy:hover,.xrail-tile.name:hover{transform:none;box-shadow:none}
}

/* =========================================================
   NAV — MOBILE PANEL + SUBMENUS

   The hamburger toggled `.is-menu-open` but nothing in the
   stylesheet ever listened for it, so the mobile menu did not
   open on any page of the site. These rules are that missing
   half, plus the Expressions dropdown.
========================================================= */

/* --- submenu, desktop ---------------------------------- */
.nav-group{position:relative}

.nav-group-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}

.nav-caret{
  width:6px;height:6px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s ease;
}
.nav-group.is-open .nav-caret{transform:translateY(1px) rotate(225deg)}

.nav-sub{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translate(-50%,8px);
  min-width:270px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(61,52,139,.12);
  box-shadow:0 26px 60px rgba(35,29,82,.16);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;
  z-index:60;
}

/* a hover bridge, so the pointer can travel from label to panel */
.nav-group::after{
  content:'';
  position:absolute;
  top:100%;left:0;right:0;height:20px;
}

.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub,
.nav-group.is-open .nav-sub{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.nav-sub a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  color:var(--navy-deep);
  text-transform:none;
  letter-spacing:-.01em;
  font-size:.95rem;
  font-weight:700;
  transition:background .25s ease,color .25s ease;
}
.nav-sub a:hover{background:var(--paper)}
.nav-sub a em{
  font-style:normal;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--violet);
}
.nav-sub a::after{display:none}

.nav-sub-all{
  border-bottom:1px solid rgba(61,52,139,.1);
  margin-bottom:4px;
  font-size:.66rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--violet)!important;
}

/* --- the mobile panel ---------------------------------- */
@media(max-width:760px){
  .nav-shell .nav-inner{position:relative}

  .nav-shell.is-menu-open .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    max-height:calc(100svh - 76px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 0 14px;
    background:#fff;
    border-top:1px solid rgba(61,52,139,.1);
    box-shadow:0 26px 50px rgba(35,29,82,.18);
    animation:navPanel .32s cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes navPanel{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:none}
  }

  .nav-shell.is-menu-open .nav-links > a,
  .nav-shell.is-menu-open .nav-group-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:15px 28px;
    color:var(--navy-deep);
    font-size:.95rem;
    letter-spacing:-.01em;
    text-transform:none;
    border-bottom:1px solid rgba(61,52,139,.07);
  }

  .nav-shell.is-menu-open .nav-links > a::after{display:none}

  .nav-shell.is-menu-open .nav-links > a.nav-cta{
    justify-content:center;
    margin:14px 28px 0;
    width:auto;
    padding:15px 22px;
    border-bottom:0;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.74rem;
  }

  /* the submenu becomes an accordion rather than a floating panel */
  .nav-shell.is-menu-open .nav-group{position:static}

  .nav-shell.is-menu-open .nav-sub{
    position:static;
    transform:none;
    min-width:0;
    padding:0;
    border:0;
    box-shadow:none;
    background:var(--paper);
    opacity:1;
    visibility:visible;
    display:none;
  }
  .nav-shell.is-menu-open .nav-group.is-open .nav-sub{display:block}
  /* hover must not open it on a touch screen */
  .nav-shell.is-menu-open .nav-group:hover .nav-sub{display:none}
  .nav-shell.is-menu-open .nav-group.is-open:hover .nav-sub{display:block}

  .nav-shell.is-menu-open .nav-sub a{
    padding:13px 28px 13px 40px;
    border-bottom:1px solid rgba(61,52,139,.07);
  }

  body.site-menu-open{overflow:hidden}
}

/* Dark-ground expression pages get a dark panel to match their nav. */
@media(max-width:760px){
  body.dc-page .nav-shell.is-menu-open .nav-links,
  body.lh-page .nav-shell.is-menu-open .nav-links{
    background:#0F1F22;
    border-top-color:rgba(255,255,255,.12);
  }
  body.lh-page .nav-shell.is-menu-open .nav-links{background:#141416}

  body.dc-page .nav-shell.is-menu-open .nav-links > a,
  body.dc-page .nav-shell.is-menu-open .nav-group-btn,
  body.lh-page .nav-shell.is-menu-open .nav-links > a,
  body.lh-page .nav-shell.is-menu-open .nav-group-btn{
    color:#fff;
    border-bottom-color:rgba(255,255,255,.1);
  }

  body.dc-page .nav-shell.is-menu-open .nav-sub,
  body.lh-page .nav-shell.is-menu-open .nav-sub{background:rgba(255,255,255,.05)}

  body.dc-page .nav-shell.is-menu-open .nav-sub a,
  body.lh-page .nav-shell.is-menu-open .nav-sub a{
    color:#fff;
    border-bottom-color:rgba(255,255,255,.08);
  }
  body.dc-page .nav-shell.is-menu-open .nav-sub a em,
  body.dc-page .nav-shell.is-menu-open .nav-sub-all{color:var(--dc,#00E5DE)!important}
  body.lh-page .nav-shell.is-menu-open .nav-sub a em,
  body.lh-page .nav-shell.is-menu-open .nav-sub-all{color:var(--lh-gold,#C9A227)!important}
  body.genesis-page .nav-shell.is-menu-open .nav-sub a em,
  body.genesis-page .nav-shell.is-menu-open .nav-sub-all{color:var(--daybreak-coral)!important}
}

@media(prefers-reduced-motion:reduce){
  .nav-sub{transition:none}
  .nav-caret{transition:none}
  .nav-shell.is-menu-open .nav-links{animation:none}
}