/* ==========================================================================
   Impact Culture Network — site styles
   Urban editorial: heavy grotesk + light italics, logo-colour accents,
   rounded photo cards, ink + warm paper sections.
   ========================================================================== */

:root {
  /* neutrals */
  --ink: #0B0B0A;
  --ink-2: #151513;
  --ink-3: #1F1F1C;
  --paper: #F3EFE0;
  --paper-2: #E8E2CF;
  --white: #FFFFFF;
  --smoke: #A7A399;
  --smoke-dark: #6B675E;
  --line-dark: rgba(245, 242, 235, 0.12);
  --line-light: rgba(11, 11, 10, 0.12);

  /* logo colours — bright (on dark) */
  --gold: #FCB31D;
  --red: #C8231A;
  --blue: #3A6BC9;
  --green: #4C8A1E;
  --silver: #D6D1C2;

  /* logo colours — deep (on light / fills) */
  --gold-d: var(--gold);
  --red-d: var(--red);
  --blue-d: var(--blue);
  --green-d: var(--green);
  --crimson: #800A02;
  --navy: #0F2953;
  --forest: #113300;

  /* type */
  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;

  /* layout */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  --radius-xl: clamp(22px, 3vw, 40px);
  --radius-lg: clamp(16px, 2vw, 28px);
  --radius-md: 16px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
address { font-style: normal; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 999; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: calc(900px + var(--gutter) * 2); }

/* ---------- type ---------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.display em, h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.04em;
}
.xl { font-size: clamp(3.4rem, 10.5vw, 10.5rem); }
.lg { font-size: clamp(2.8rem, 7vw, 6.4rem); }
.md { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.sm { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; }
.upper { text-transform: uppercase; letter-spacing: -0.02em; }

/* italic accent colours — the Refuge-style coloured word */
.c-gold { color: var(--gold); }
.c-red { color: var(--red); }
.c-blue { color: var(--blue); }
.c-green { color: var(--green); }
.light .c-gold { color: var(--gold-d); }
.light .c-red { color: var(--red-d); }
.light .c-blue { color: var(--blue-d); }
.light .c-green { color: var(--green-d); }

.eyebrow {
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
}
.light .eyebrow { color: var(--smoke-dark); }
.mono { font-family: var(--f-mono); font-size: 0.86em; letter-spacing: 0.02em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: rgba(245, 242, 235, 0.78); max-width: 60ch; }
.light .lead { color: rgba(11, 11, 10, 0.72); }
.lead strong { color: var(--paper); font-weight: 600; }
.light .lead strong { color: var(--ink); }
.muted { color: var(--smoke); }
.light .muted { color: var(--smoke-dark); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 12px; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #FFC43F; }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--ink-3); }
.btn-ghost { border: 1px solid rgba(245, 242, 235, 0.35); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(245, 242, 235, 0.06); }
.light .btn-ghost { border-color: rgba(11, 11, 10, 0.3); color: var(--ink); }
.light .btn-ghost:hover { border-color: var(--ink); background: rgba(11, 11, 10, 0.04); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold);
}
.light .link-arrow { color: var(--blue-d); }
.link-arrow::before {
  content: ""; width: 0; height: 0;
  border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .3s var(--ease);
}
.link-arrow:hover::before { transform: translateX(3px); }

/* dots & squares (the four logo colours) */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-gold { background: var(--gold); } .dot-red { background: var(--red); }
.dot-blue { background: var(--blue); } .dot-green { background: var(--green); }
.sq { display: inline-block; width: 0.42em; height: 0.42em; border-radius: 0.1em; flex: none; }
.sq-gold { background: var(--gold); } .sq-red { background: var(--red); }
.sq-blue { background: var(--blue); } .sq-green { background: var(--green); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 14px var(--gutter);
  pointer-events: none;
}
.site-header .bar {
  pointer-events: auto;
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: rgba(11, 11, 10, 0.0);
  border: 1px solid transparent;
  transition: background-color .4s, border-color .4s, backdrop-filter .4s, padding .4s;
}
.site-header.scrolled .bar,
body[data-header="light"] .site-header .bar {
  background: rgba(11, 11, 10, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(245, 242, 235, 0.08);
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-icon { width: 34px; height: 34px; }
.brand-word { width: 200px; height: auto; opacity: .95; }
.nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav a {
  position: relative;
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245, 242, 235, 0.82);
  padding: 6px 0;
  transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.bar-cta { display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(245, 242, 235, 0.1); position: relative; }
.menu-lines, .menu-lines::before, .menu-lines::after {
  position: absolute; left: 13px; width: 18px; height: 1.6px; background: var(--paper);
  transition: transform .35s var(--ease), top .35s var(--ease), opacity .2s;
}
.menu-lines { top: 21px; }
.menu-lines::before { content: ""; left: 0; top: -6px; }
.menu-lines::after { content: ""; left: 0; top: 6px; }
.menu-open .menu-lines { background: transparent; }
.menu-open .menu-lines::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-lines::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1120px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 560px) {
  .brand-word { display: none; }
  .bar-cta .btn-ghost { display: none; }
}

/* ---------- mobile / overlay menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink);
  background-image: radial-gradient(1200px 600px at 110% -10%, rgba(15, 41, 83, .5), transparent 60%),
                    radial-gradient(900px 500px at -10% 110%, rgba(240, 180, 41, .14), transparent 60%);
  overflow-y: auto;
  opacity: 0; transition: opacity .35s var(--ease);
}
.menu.open { opacity: 1; }
.menu-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 120px var(--gutter) 40px; max-width: var(--maxw); margin: 0 auto; }
.menu-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.menu-links { margin-top: 16px; }
.menu-links a {
  display: block; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.05; transition: color .2s, transform .3s var(--ease);
}
.menu-links a em { font-style: italic; font-weight: 300; color: var(--gold); }
.menu-links a:hover { color: var(--gold); transform: translateX(6px); }
.menu-links-sm a { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; border-top: 1px solid var(--line-dark); padding-top: 24px; color: var(--smoke); }
@media (max-width: 720px) { .menu-grid { grid-template-columns: 1fr; } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.section-tight { padding: clamp(56px, 7vw, 96px) 0; }
.light { background: var(--paper); color: var(--ink); }
.light-2 { background: var(--paper-2); color: var(--ink); }
.dark-2 { background: var(--ink-2); }
.head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); }
.head-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }

/* ---------- hero card (home + inner pages) ---------- */
.hero-shell { padding: 10px; background: var(--ink); }
.hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-xl);
  min-height: min(100svh - 20px, 980px);
  display: flex; align-items: flex-end;
  background: var(--ink-2);
}
.hero-card > img.bg, .hero-card > .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards;
}
.hero-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,11,10,.55) 0%, rgba(11,11,10,.15) 35%, rgba(11,11,10,.55) 70%, rgba(11,11,10,.92) 100%),
    linear-gradient(90deg, rgba(11,11,10,.55), rgba(11,11,10,0) 60%);
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-inner { width: 100%; padding: clamp(120px, 16vh, 180px) clamp(20px, 5vw, 72px) clamp(28px, 5vw, 64px); }
.hero-title { font-size: clamp(3.6rem, 11.5vw, 11.8rem); line-height: 0.86; text-transform: uppercase; letter-spacing: -0.045em; }
.hero-title .row { display: block; }
.hero-title .indent { padding-left: clamp(0px, 9vw, 180px); }
.hero-title em { text-transform: none; font-weight: 300; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
.hero-when .big { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.4rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; }
.hero-when .small { font-size: 14px; color: rgba(245,242,235,.72); margin-top: 6px; letter-spacing: .04em; }
.hero-kicker { position: absolute; top: clamp(96px, 13vh, 130px); left: clamp(20px, 5vw, 72px); }

/* inner page hero — shorter */
.page-hero .hero-card { min-height: clamp(520px, 72svh, 760px); }
.page-hero .hero-title { font-size: clamp(3.2rem, 9vw, 8.6rem); }
.page-hero .lead { margin-top: 22px; }

/* type-only page hero (for pages without a photo) */
.plain-hero { padding: clamp(150px, 20vh, 220px) 0 clamp(60px, 8vw, 110px); position: relative; overflow: hidden; }
.plain-hero .hero-title { font-size: clamp(3.2rem, 9vw, 8.6rem); }

/* entrance animation for hero words */
.rise { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: rise 1s var(--ease) forwards; }
.rise.d1 { animation-delay: .1s; } .rise.d2 { animation-delay: .22s; } .rise.d3 { animation-delay: .34s; }
.rise.d4 { animation-delay: .46s; } .rise.d5 { animation-delay: .6s; } .rise.d6 { animation-delay: .75s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- rotating circular badge ---------- */
.spin-badge { position: relative; width: 132px; height: 132px; flex: none; display: grid; place-items: center; }
.spin-badge svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.spin-badge svg.ring text { font-family: var(--f-body); font-size: 10.4px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; fill: currentColor; }
.spin-badge .core {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  transition: transform .4s var(--ease);
}
.spin-badge.blue .core { background: var(--blue-d); color: var(--white); }
.spin-badge:hover .core { transform: scale(1.1); }
.spin-badge .core svg { width: 22px; height: 22px; margin-left: 3px; }
.spin-badge .live-dot { position: absolute; top: 18px; right: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(200,35,26,.6); animation: pulse 2s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,35,26,.6); } 70% { box-shadow: 0 0 0 12px rgba(200,35,26,0); } 100% { box-shadow: 0 0 0 0 rgba(200,35,26,0); } }

/* ---------- gatherings strip ---------- */
.times { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.time { padding: 30px 26px 34px 0; border-right: 1px solid var(--line-dark); display: grid; gap: 10px; align-content: start; }
.time + .time { padding-left: 26px; }
.time:last-child { border-right: 0; }
.time .day { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--smoke); }
.time .hour { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.04em; line-height: 1; }
.time .hour small { font-size: .45em; font-weight: 600; letter-spacing: 0; margin-left: 4px; }
.time .what { font-weight: 600; }
.time .note { font-size: 14px; color: var(--smoke); }
.tag {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--silver);
}
.tag.live { border-color: rgba(200,35,26,.55); color: var(--red); }
.tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.light .tag { border-color: var(--line-light); color: var(--smoke-dark); }
.light .tag.live { color: var(--red-d); border-color: rgba(128,10,2,.35); }
@media (max-width: 900px) {
  .times { grid-template-columns: 1fr 1fr; }
  .time:nth-child(2) { border-right: 0; }
  .time:nth-child(3) { padding-left: 0; }
  .time:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
}
@media (max-width: 520px) {
  .times { grid-template-columns: 1fr; }
  .time, .time + .time { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }
}

/* ---------- culture intro (centered) ---------- */
.culture-intro { text-align: center; display: grid; justify-items: center; gap: 26px; }
.culture-intro p.lead { max-width: 62ch; }

/* ---------- pillars (Healing, Transformation… style) ---------- */
.pillars { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.pillars-title { font-size: clamp(3rem, 7vw, 6.2rem); }
.pillars-title span { display: block; }
.pillar-list { display: grid; gap: 40px; padding-top: 12px; }
.pillar h3 { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; }
.pillar p { margin: 10px 0 12px; color: rgba(11,11,10,.66); }
.dark .pillar p, .pillar.on-dark p { color: rgba(245,242,235,.7); }
.pillar-photo { margin-top: clamp(40px, 6vw, 80px); border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 9; }
.pillar-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- full-bleed photo band ---------- */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 80vh, 820px);
  display: flex; align-items: center;
}
.band > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,10,.85) 0%, rgba(11,11,10,.55) 50%, rgba(11,11,10,.35) 100%); }
.band-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.band-links { display: grid; gap: 6px; justify-items: start; }
.band-links a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem); padding: 10px 0;
  border-bottom: 1px solid rgba(245,242,235,.2); width: 100%;
  transition: color .25s, padding .35s var(--ease);
}
.band-links a small { font-family: var(--f-mono); font-size: 12.5px; color: var(--smoke); letter-spacing: .05em; margin-left: auto; }
.band-links a:hover { color: var(--gold); padding-left: 10px; }
@media (max-width: 860px) { .band-grid { grid-template-columns: 1fr; } .band::after { background: rgba(11,11,10,.68); } }

/* ---------- events feature (date stepper + cross) ---------- */
.events-feature { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-2); }
.events-feature > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .5; filter: grayscale(.3) contrast(1.05); }
.events-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,21,19,.92), rgba(21,21,19,.55) 45%, rgba(21,21,19,.92)); }
.ev-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 40px; align-items: center; }
.ev-title { text-align: center; }
.stepper { display: grid; gap: 22px; max-width: 280px; }
.stepper-date { display: grid; justify-items: center; gap: 4px; }
.stepper-date .mon { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.stepper-row { display: flex; align-items: center; gap: 20px; }
.stepper-row .num { font-family: var(--f-display); font-weight: 700; font-size: 5.2rem; letter-spacing: -0.05em; line-height: 1; min-width: 2ch; text-align: center; }
.stepper-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--gold); border-radius: 50%; transition: background .2s; }
.stepper-btn:hover { background: rgba(252,179,29,.12); }
.stepper-btn svg { width: 14px; height: 14px; }
.stepper-list li { padding: 14px 0; border-top: 1px solid rgba(245,242,235,.18); }
.stepper-list li:first-child { border-top: 0; }
.stepper-list .t { font-family: var(--f-mono); font-size: 12.5px; color: var(--smoke); }
.stepper-list .n { font-weight: 600; }
.stepper-list .n .tag { margin-left: 6px; vertical-align: 1px; padding: 2px 8px; font-size: 11px; }
.cross { position: relative; width: clamp(160px, 18vw, 250px); aspect-ratio: 250 / 360; margin: 30px auto 0; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--paper); }
.cross::before { left: 38%; width: 24%; top: 0; bottom: 0; }
.cross::after { top: 22%; height: 17%; left: 0; right: 0; }
.cross.glyph::before { background: linear-gradient(180deg, var(--paper), var(--silver)); }
.ev-verse { display: grid; gap: 22px; }
.ev-verse blockquote { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; letter-spacing: -0.02em; }
.ev-verse cite { font-style: normal; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }
@media (max-width: 980px) {
  .ev-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ev-title { order: -1; }
  .stepper { margin-inline: auto; }
  .stepper-list { text-align: left; }
  .ev-verse { justify-items: center; }
}

/* ---------- subsplash embed card ---------- */
.embed-card {
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(8px, 1.5vw, 18px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.45);
  position: relative;
}
.embed-card iframe { width: 100% !important; border: 0; }
.embed-card.clip { max-height: 640px; }
.embed-card.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 80%); pointer-events: none; }
.embed-loading { display: grid; place-items: center; min-height: 260px; color: var(--smoke-dark); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.embed-card iframe + .embed-loading, .embed-card.loaded .embed-loading { display: none; }
.embed-foot { display: flex; justify-content: center; margin-top: -30px; position: relative; z-index: 2; }

/* ---------- split (pastor etc.) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.split.flip > :first-child { order: 2; }
.photo-rounded { border-radius: var(--radius-xl); overflow: hidden; position: relative; }
.photo-rounded img { width: 100%; height: 100%; object-fit: cover; }
.photo-tall { aspect-ratio: 4 / 5; }
.photo-wide { aspect-ratio: 16 / 10; }
.photo-tag { position: absolute; left: 18px; bottom: 18px; background: rgba(11,11,10,.75); color: var(--paper); backdrop-filter: blur(10px); padding: 10px 16px; border-radius: 999px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.quote { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.25; letter-spacing: -0.02em; border-left: 3px solid var(--gold); padding-left: 22px; }
.light .quote { border-color: var(--gold-d); }
.stack > * + * { margin-top: 22px; }
.stack-sm > * + * { margin-top: 12px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 38px);
  background: var(--ink-2); border: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .45s var(--ease), border-color .3s, background-color .3s;
}
.light .card { background: var(--white); border-color: var(--line-light); }
a.card:hover { transform: translateY(-6px); border-color: rgba(252,179,29,.5); }
.light a.card:hover { border-color: rgba(11,11,10,.3); }
.card .num { font-family: var(--f-mono); font-size: 12.5px; color: var(--smoke); }
.card h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1; }
.card p { color: rgba(245,242,235,.7); }
.light .card p { color: rgba(11,11,10,.66); }
.card .link-arrow { margin-top: auto; padding-top: 10px; }
.card .bar-top { position: absolute; top: 0; left: clamp(26px, 3vw, 38px); width: 44px; height: 4px; border-radius: 0 0 4px 4px; }
.card-photo { padding: 0; overflow: hidden; min-height: 460px; justify-content: flex-end; isolation: isolate; border: 0; }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.card-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,10,0) 30%, rgba(11,11,10,.9)); }
.card-photo:hover img { transform: scale(1.05); }
.card-photo .card-body { padding: clamp(24px, 3vw, 34px); display: grid; gap: 10px; color: var(--paper); }
.light .card-photo p { color: rgba(245,242,235,.78); }
@media (max-width: 1000px) { .cards, .cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards, .cards-2, .cards-4 { grid-template-columns: 1fr; } }

/* ---------- give / app promo ---------- */
.promo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.promo { border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 64px); position: relative; overflow: hidden; isolation: isolate; min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.promo-give { background: var(--navy); }
.promo-give > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .45; mix-blend-mode: luminosity; }
.promo-give::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(15,41,83,.6), rgba(11,11,10,.92)); }
.promo-app { background: var(--gold); color: var(--ink); }
.promo-app .eyebrow { color: rgba(11,11,10,.6); }
.promo-app .glyph-bg { position: absolute; right: -80px; bottom: -80px; width: 380px; opacity: .16; z-index: -1; filter: grayscale(1) brightness(0); }
.give-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.give-way { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(245,242,235,.2); }
.give-way b { font-weight: 600; }
.give-way span { font-size: 14px; color: rgba(245,242,235,.72); }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } .promo { min-height: 0; } }

/* app store buttons */
.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px 0 14px; border-radius: 14px;
  background: var(--ink); color: var(--paper); border: 1px solid rgba(245,242,235,.2);
  font-weight: 600; font-size: 16px; line-height: 1.05;
  transition: transform .3s var(--ease), border-color .3s;
}
.store:hover { transform: translateY(-2px); border-color: var(--paper); }
.store svg { width: 24px; height: 24px; }
.store svg .fill, .social svg .fill { fill: currentColor; stroke: none; }
.store small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; opacity: .75; }
.menu .store { height: 44px; font-size: 14px; }

/* ---------- instagram grid ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig-grid a { position: relative; aspect-ratio: 9 / 14; border-radius: 18px; overflow: hidden; background: var(--ink-3); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; filter: saturate(.9); }
.ig-grid a:hover img { transform: scale(1.06); filter: saturate(1.1); }
.ig-grid a::after { content: "↗"; position: absolute; top: 10px; right: 12px; font-size: 16px; color: var(--paper); opacity: 0; transition: opacity .3s; }
.ig-grid a:hover::after { opacity: 1; }
@media (max-width: 980px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- closer: IT'S ALL ABOUT JESUS ---------- */
.closer { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); padding-top: clamp(120px, 16vw, 220px); }
.closer > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.closer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,10,.9), rgba(11,11,10,.35) 50%, rgba(11,11,10,.2)); }
.closer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.closer-top .eyebrow { color: var(--paper); font-size: clamp(14px, 1.6vw, 20px); letter-spacing: .18em; }
.closer-word {
  display: flex; align-items: flex-end; justify-content: center; gap: 0.02em;
  font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-size: clamp(6rem, 24vw, 25rem); letter-spacing: -0.06em; line-height: 0.76;
  margin-top: clamp(24px, 4vw, 48px); padding-right: .06em;
  background: linear-gradient(180deg, #FFFFFF 30%, #D9D5CB);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(0.1em);
}
.closer-squares { display: grid; gap: 0.12em; font-size: clamp(1.2rem, 2.8vw, 3rem); align-self: center; margin: 0 .12em; -webkit-text-fill-color: initial; }
.closer-squares .sq { width: .5em; height: .5em; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); border-top: 1px solid var(--line-dark); }
.marquee { overflow: hidden; border-bottom: 1px solid var(--line-dark); padding: 26px 0; }
.marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.035em; white-space: nowrap; line-height: 1; }
.marquee-track em { font-weight: 300; text-transform: none; color: var(--smoke); }
.marquee-track .sq { font-size: clamp(2rem, 4vw, 3.4rem); }
@keyframes marquee { to { transform: translateX(-50%); } }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.1fr 0.9fr 1fr; gap: 48px; padding-top: 80px; padding-bottom: 64px; }
.footer-brand img { width: 240px; margin-bottom: 22px; }
.footer-brand p { color: var(--smoke); font-size: 15px; max-width: 34ch; }
.social { display: flex; gap: 10px; margin-top: 24px; }
.social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: border-color .25s, background .25s; }
.social a:hover { border-color: var(--gold); background: rgba(252,179,29,.08); }
.social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.site-footer .eyebrow { margin-bottom: 16px; }
.footer-eyebrow-gap { margin-top: 32px; }
.footer-times li { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-dark); font-size: 14.5px; color: var(--smoke); }
.footer-times li:first-child { border-top: 0; padding-top: 0; }
.footer-times b { display: block; color: var(--paper); font-weight: 600; }
.footer-times .mono { color: var(--gold); white-space: nowrap; }
.footer-times .dot { transform: translateY(-1px); }
.site-footer address { color: var(--smoke); font-size: 15px; margin-bottom: 12px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 15px; color: var(--smoke); }
.footer-links a:hover { color: var(--paper); }
.footer-note { color: var(--smoke); font-size: 15px; margin-bottom: 18px; }
.footer-base { padding-bottom: 36px; }
.footer-word { width: 100%; opacity: .08; margin-bottom: 28px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--smoke-dark); border-top: 1px solid var(--line-dark); padding-top: 24px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- numbered values list ---------- */
.values { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-light); }
.dark .values, .values.on-dark { border-color: var(--line-dark); }
.value { padding: 34px 34px 38px 0; border-bottom: 1px solid var(--line-light); display: grid; grid-template-columns: 64px 1fr; gap: 10px 18px; }
.values.on-dark .value { border-color: var(--line-dark); }
.value:nth-child(odd) { border-right: 1px solid var(--line-light); }
.values.on-dark .value:nth-child(odd) { border-color: var(--line-dark); }
.value:nth-child(even) { padding-left: 34px; }
.value .n { font-family: var(--f-mono); font-size: 13px; color: var(--smoke-dark); padding-top: 6px; }
.values.on-dark .value .n { color: var(--smoke); }
.value h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.05; }
.value p { grid-column: 2; color: rgba(11,11,10,.68); }
.values.on-dark .value p { color: rgba(245,242,235,.7); }
.value .ref { grid-column: 2; font-family: var(--f-mono); font-size: 12.5px; color: var(--gold-d); }
.values.on-dark .value .ref { color: var(--gold); }
@media (max-width: 820px) {
  .values { grid-template-columns: 1fr; }
  .value, .value:nth-child(even) { padding: 28px 0; border-right: 0 !important; grid-template-columns: 48px 1fr; }
}

/* ---------- head/heart/hands trio ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio-card { border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 44px); min-height: 400px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; color: var(--paper); position: relative; overflow: hidden; }
.trio-card.gold { background: linear-gradient(160deg, #4A3304, #150F02); }
.trio-card.red { background: linear-gradient(160deg, #800A02, #260301); }
.trio-card.blue { background: linear-gradient(160deg, #0F2953, #060F20); }
.trio-card .big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -0.04em; line-height: .9; }
.trio-card .big em { font-weight: 300; font-style: italic; }
.trio-card p { color: rgba(245,242,235,.78); }
.trio-card .tagline { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.1rem; border-top: 1px solid rgba(245,242,235,.2); padding-top: 16px; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } .trio-card { min-height: 0; } }

/* ---------- steps / timeline ---------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line-light); }
.dark .steps, .steps.on-dark { border-color: var(--line-dark); }
.step { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 24px 40px; padding: 40px 0; border-bottom: 1px solid var(--line-light); }
.steps.on-dark .step { border-color: var(--line-dark); }
.step .n { font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; letter-spacing: -0.05em; line-height: .9; color: var(--gold-d); }
.steps.on-dark .step .n { color: var(--gold); }
.step h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; margin-bottom: 8px; }
.step .sub { font-family: var(--f-display); font-style: italic; color: var(--smoke-dark); font-size: 1.1rem; }
.steps.on-dark .step .sub { color: var(--smoke); }
.step p { color: rgba(11,11,10,.7); }
.steps.on-dark .step p { color: rgba(245,242,235,.72); }
.step ul { display: grid; gap: 6px; margin-top: 14px; }
.step li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.step li::before { content: ""; width: 6px; height: 6px; background: var(--gold-d); border-radius: 1px; transform: translateY(-2px); flex: none; }
.steps.on-dark .step li::before { background: var(--gold); }
.step .ref { font-family: var(--f-mono); font-size: 12.5px; color: var(--smoke-dark); margin-top: 14px; display: block; }
@media (max-width: 900px) { .step { grid-template-columns: 1fr; gap: 12px; } .step .n { font-size: 2.6rem; } }

/* ---------- details / FAQ ---------- */
.faq { border-top: 1px solid var(--line-light); }
.dark .faq, .faq.on-dark { border-color: var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq.on-dark details { border-color: var(--line-dark); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid currentColor; font-family: var(--f-body); font-weight: 300; font-size: 22px; transition: transform .35s var(--ease);
  opacity: .6;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 60px 28px 0; color: rgba(11,11,10,.7); max-width: 72ch; }
.faq.on-dark .answer { color: rgba(245,242,235,.72); }

/* ---------- info list (key/value) ---------- */
.kv { display: grid; border-top: 1px solid var(--line-light); }
.kv > div { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
.kv dt { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--smoke-dark); padding-top: 3px; }
.kv dd { font-weight: 500; }
.kv dd small { display: block; font-weight: 400; color: var(--smoke-dark); font-size: 14.5px; }
.kv.on-dark { border-color: var(--line-dark); }
.kv.on-dark > div { border-color: var(--line-dark); }
.kv.on-dark dt, .kv.on-dark dd small { color: var(--smoke); }
@media (max-width: 560px) { .kv > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label, .field .label { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke-dark); font-weight: 500; }
.dark .field label, .form.on-dark .field label, .form.on-dark .field .label { color: var(--smoke); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: inherit;
  background: var(--white); border: 1px solid var(--line-light); border-radius: 14px;
  padding: 15px 16px; transition: border-color .2s, box-shadow .2s;
}
.form.on-dark .field input, .form.on-dark .field textarea, .form.on-dark .field select { background: var(--ink-3); border-color: var(--line-dark); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-d); box-shadow: 0 0 0 4px rgba(252,179,29,.18); }
.field textarea { min-height: 150px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-light); font-size: 14px; cursor: pointer; transition: all .2s; background: var(--white); }
.form.on-dark .chip span { border-color: var(--line-dark); background: var(--ink-3); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.form.on-dark .chip input:checked + span { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.form-note { font-size: 13px; color: var(--smoke-dark); }
.form-success { display: none; padding: 28px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); }
.form.sent > :not(.form-success) { display: none; }
.form.sent .form-success { display: block; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- watch page ---------- */
.player { border-radius: var(--radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 9; position: relative; }
.player iframe { width: 100%; height: 100%; border: 0; }
.live-status { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(245,242,235,.08); border: 1px solid var(--line-dark); font-size: 14px; }
.live-status .dot { width: 10px; height: 10px; }
.live-status.is-live .dot { background: var(--red); animation: pulse 2s infinite; }
.countdown { display: flex; gap: clamp(12px, 3vw, 36px); }
.countdown div { display: grid; }
.countdown b { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--smoke); }

/* ---------- misc ---------- */
.rule { height: 1px; background: var(--line-dark); border: 0; }
.light .rule { background: var(--line-light); }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-list li { padding: 10px 16px; border: 1px solid var(--line-light); border-radius: 999px; font-size: 14.5px; background: var(--white); }
.dark .pill-list li, .pill-list.on-dark li { border-color: var(--line-dark); background: transparent; }
.gap-top { margin-top: clamp(40px, 6vw, 80px); }
.gap-top-sm { margin-top: 28px; }
.brand-texture { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; background-size: cover; background-position: center; }
.rel { position: relative; z-index: 1; }
.glyph-float { mix-blend-mode: lighten; position: absolute; width: clamp(280px, 38vw, 560px); right: -6vw; top: 50%; transform: translateY(-50%); opacity: .85; pointer-events: none; }
@media (max-width: 900px) { .glyph-float { opacity: .25; right: -30vw; } }

/* big verse block */
.verse { text-align: center; display: grid; gap: 26px; justify-items: center; }
.verse blockquote { font-family: var(--f-display); font-weight: 300; font-style: italic; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 24ch; }
.verse cite { font-style: normal; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--smoke); }
.light .verse cite { color: var(--smoke-dark); }

/* cta block */
.cta-block { border-radius: var(--radius-xl); padding: clamp(40px, 7vw, 100px); background: var(--ink); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; text-align: center; display: grid; justify-items: center; gap: 24px; }
.cta-block > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -1; }

/* scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; } [data-reveal-delay="2"] { transition-delay: .2s; } [data-reveal-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], .rise { opacity: 1; transform: none; }
}

/* practice list (culture) */
.practice { border-top: 1px solid var(--line-light); list-style: none; }
.practice li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line-light); }
.practice .n { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 1.6rem; color: var(--gold-d); }
.practice p { font-size: 1.12rem; }

/* small phones: keep single long words (STANDARD., PRESENCE.) inside the card */
@media (max-width: 600px) {
  .hero-title, .page-hero .hero-title, .plain-hero .hero-title { font-size: 12.4vw; }
  .hero-title .indent { padding-left: 5vw; }
  .hero-inner { padding-left: 18px; padding-right: 18px; }
  .spin-badge { width: 110px; height: 110px; }
  .hero-meta .btn-row .btn { flex: 1 1 auto; }
}
.chip { position: relative; }
.split > *, .form-row > *, .cards > * { min-width: 0; }
@media (max-width: 700px) { .hide-sm { display: none; } }

/* pasted livestream embeds */
.player > iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.player.custom { aspect-ratio: auto; background: transparent; }
.player.custom iframe { width: 100% !important; }

/* ---------- 3D tick-tock logo ---------- */
.tick { position: relative; width: 100%; height: clamp(360px, 52vw, 640px); }
.tick canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--ease); }
.tick.ready canvas { opacity: 1; }
.tick-fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .6s; }
.tick-fallback span { font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 16vw, 15rem); letter-spacing: -0.04em; line-height: 1; color: var(--paper); }
.tick-fallback img { position: absolute; width: clamp(140px, 18vw, 240px); opacity: .9; mix-blend-mode: lighten; }
.tick.ready .tick-fallback { opacity: 0; }

/* ==========================================================================
   LAYERING & DIMENSION
   ========================================================================== */

/* ---- layered hero: bg → giant words → cutout → meta ---- */
.hero-card.layered { align-items: stretch; }
.hero-card.layered::after { background: linear-gradient(180deg, rgba(11,11,10,.55) 0%, rgba(11,11,10,.15) 28%, rgba(11,11,10,.35) 55%, rgba(11,11,10,.88) 82%, #0B0B0A 100%), radial-gradient(120% 90% at 60% 40%, rgba(11,11,10,0), rgba(11,11,10,.55) 75%); }
.hero-card.layered > img.bg { filter: saturate(1.05) brightness(.7); object-position: center 30%; }
.hero-card.layered { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hero-shell:has(.layered) { padding-bottom: 0; }
.layer-words {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(100px, 13vh, 150px) clamp(20px, 4vw, 60px) clamp(140px, 20vh, 210px);
  pointer-events: none;
}
.layer-words .hero-title { font-size: clamp(3.4rem, 12.6vw, 13.5rem); line-height: .84; }
.layer-words .row.right { text-align: right; }
.layer-cutout {
  position: absolute; z-index: 2; bottom: 0; left: 50%;
  height: 104%; width: auto; max-width: none;
  transform: translateX(-18%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  pointer-events: none;
}
.layer-front { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(96px, 12vh, 130px) clamp(20px, 5vw, 72px) clamp(28px, 5vw, 60px); }
.layer-front .spin-badge { align-self: flex-end; }
.layer-glow { position: absolute; z-index: 1; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: 38%; top: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(252,179,29,.28), rgba(128,10,2,.15) 45%, transparent 70%); filter: blur(20px); pointer-events: none; }
@media (max-width: 760px) {
  .layer-cutout { height: 58%; left: auto; right: -14%; transform: none; opacity: .92; }
  .layer-words { justify-content: flex-start; padding-top: 130px; }
  .layer-front .spin-badge { display: none; }
  .layer-front .hero-when .small { max-width: 60%; }
}

/* ---- pop-out frame: photo clipped to a rounded frame, subject breaks out of the top ---- */
.popout { position: relative; aspect-ratio: 3 / 4; }
.popout img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.popout .frame { clip-path: inset(24% 0 0 0 round var(--radius-xl)); }
.popout .subject { z-index: 2; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.popout .behind { position: absolute; z-index: 1; left: -6%; right: -6%; top: 30%; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: -.05em; line-height: .85; text-transform: uppercase; color: var(--paper); mix-blend-mode: normal; }
.popout .behind em { font-weight: 300; text-transform: none; }

/* ---- portrait stack: disc → giant word → cutout → tag ---- */
.portrait-stack { position: relative; min-height: clamp(460px, 48vw, 680px); display: flex; align-items: flex-end; justify-content: center; }
.portrait-stack .disc { position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; bottom: 6%; left: 11%; background: radial-gradient(circle at 35% 30%, #FFD06A, var(--gold) 45%, #C98A0B); box-shadow: inset 0 -30px 60px rgba(128,10,2,.25); }
.portrait-stack .word { position: absolute; z-index: 1; top: 4%; left: -2%; right: 0; text-align: left; font-size: clamp(5.5rem, 16vw, 15rem) !important; font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(4rem, 11vw, 10rem); letter-spacing: -.05em; line-height: .8; color: var(--red-d); white-space: nowrap; }
.portrait-stack .word.outline { top: auto; bottom: 2%; font-style: normal; font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px rgba(11,11,10,.35); z-index: 3; }
.portrait-stack .cut { position: relative; z-index: 2; width: 100%; max-width: 640px; filter: drop-shadow(0 30px 50px rgba(11,11,10,.3)); }
.portrait-stack .photo-tag { z-index: 4; }

/* ---- floating photos around a headline (parallax) ---- */
.float-field { position: relative; }
.float-img { position: absolute; z-index: 0; width: clamp(90px, 11vw, 170px); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11,11,10,.45); will-change: transform; }
.float-img img { width: 100%; height: 100%; object-fit: cover; }
.float-img.round { border-radius: 50%; aspect-ratio: 1; width: clamp(70px, 8vw, 120px); }
.float-field > .culture-intro { position: relative; z-index: 1; }
@media (max-width: 760px) { .float-img { width: 70px; } .float-img.round { display: none; } }  /* phones: full-strength photos in the corners; the two round ones would sit on the paragraph */

/* ---- JESUS closer with subject in front ---- */
.closer-stage { position: relative; }
.closer-cutout { position: absolute; z-index: 2; bottom: 0; left: 66%; height: 128%; width: auto; max-width: none; transform: translateX(-42%); filter: drop-shadow(0 20px 50px rgba(0,0,0,.6)); pointer-events: none; }
.closer-word { position: relative; z-index: 1; }
.closer-circles { display: grid; gap: 0.12em; font-size: clamp(1.2rem, 2.8vw, 3rem); align-self: center; margin: 0 .12em; }
.closer-circles i { display: block; width: .5em; height: .5em; border-radius: 50%; }

/* ---- marquee: circular photo separators ---- */
.mq-img { width: clamp(2.2rem, 4.2vw, 3.6rem); height: clamp(2.2rem, 4.2vw, 3.6rem); border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(243,239,224,.2); }
.mq-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }

/* ---- video tiles ---- */
.video-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-2); aspect-ratio: 3 / 4; isolation: isolate; }
.video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.video-tile:hover video { transform: scale(1.04); }
.video-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,11,10,.75)); z-index: 1; }
.video-tile figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; color: var(--paper); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

/* leadership montage hero */
.montage { position: relative; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; aspect-ratio: 3 / 4; background: #000; }
.montage video { width: 100%; height: 100%; object-fit: cover; }
.montage .rec { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(11,11,10,.6); backdrop-filter: blur(8px); color: var(--paper); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.lead-hero-word { position: absolute; z-index: 3; left: 0; right: 0; bottom: -0.12em; font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 13vw, 13rem); letter-spacing: -.055em; line-height: .8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--ink); pointer-events: none; white-space: nowrap; }

/* parallax helper */
[data-speed] { will-change: transform; }
@media (prefers-reduced-motion: reduce) { [data-speed] { transform: none !important; } }

/* cutout standing in a type-only hero: words behind, subject, then UI in front */
.plain-hero .under { position: relative; z-index: 0; }
.plain-hero .over { position: relative; z-index: 2; }
.hero-cut { position: absolute; z-index: 1; bottom: 0; height: min(92%, 760px); width: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.hero-glow { position: absolute; z-index: 0; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; right: -10%; top: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(128,10,2,.35), rgba(252,179,29,.08) 45%, transparent 70%); filter: blur(30px); pointer-events: none; }
.hero-glow.blue { background: radial-gradient(circle, rgba(15,41,83,.7), rgba(58,107,201,.12) 45%, transparent 70%); }
@media (max-width: 760px) { .hero-cut { height: 60%; opacity: .55; left: auto !important; right: -10% !important; } }

/* buttons that also animate in keep their centred flex layout */
.btn.rise { display: inline-flex; }
.btn-row.rise { display: flex; }

/* Subsplash form embeds */
.form-slot { min-width: 0; }
.form-embed { background: var(--white); border-radius: var(--radius-lg); padding: clamp(8px, 1.5vw, 16px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); overflow: hidden; }
.form-embed iframe { width: 100% !important; border: 0; }

/* ---- stacked hero: photo → "the" → people → fade → headline ---- */
.hero-card.stacked > .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(1.05) brightness(.72); }
.hero-card.stacked > .hero-img:not(.people) { z-index: 0; }
.hero-card.stacked > .hero-img.people { z-index: 2; }
.hero-card.stacked > .layer-words.back { z-index: 1; }
.hero-card.stacked::after { z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(11,11,10,.5) 0%, rgba(11,11,10,.05) 30%, rgba(11,11,10,.2) 58%, rgba(11,11,10,.85) 84%, #0B0B0A 100%); }
.hero-card.stacked > .layer-words.front { z-index: 4; }
.hero-card.stacked > .layer-front { z-index: 5; }
/* back copy shows only the italic "the"; front copy shows everything else */
.layer-words.back .hero-title > .row > span { visibility: hidden; }
.layer-words.front .hero-title em { visibility: hidden; }
.layer-words .hero-title em { text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.layer-words.front .hero-title { text-shadow: 0 12px 50px rgba(0,0,0,.35); }
.hero-card.stacked .hero-title em { font-size: 1.32em; line-height: .6; margin-left: .06em; letter-spacing: -0.02em; }
.hero-card.stacked .hero-title .row.spread { display: flex; align-items: baseline; }
.hero-card.stacked .hero-title .row.spread em { margin-left: auto; margin-right: 8%; }

/* ---------- marquee along an SVG path ---------- */
.path-marquee { position: relative; width: 100%; height: clamp(340px, 36vw, 560px); overflow: hidden; pointer-events: none; }
.path-marquee svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.path-marquee path { fill: none; stroke: rgba(11,11,10,.08); stroke-width: 1.5; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; }
.dark .path-marquee path, .path-marquee.on-dark path { stroke: rgba(243,239,224,.12); }
.pm-tile { position: absolute; left: 0; top: 0; width: clamp(60px, 6.6vw, 104px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -10px rgba(11,11,10,.45); will-change: transform; }
/* full-bleed band that text can sit on top of */
.pm-band { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; }
.pm-band .path-marquee { position: absolute; inset: 0; height: 100%; }
.pm-band > .pm-over { position: relative; z-index: 2; }

/* path marquee sitting in the Aligned / Formed / Released column */
.pm-col { margin-top: clamp(10px, 2vw, 24px); margin-left: calc(-1 * var(--gutter)); }
.pm-col .path-marquee { height: clamp(340px, 34vw, 520px); }
/* "You belong" with a dotted line of brand circles beneath it */
.belong { display: inline-grid; gap: 12px; justify-items: stretch; }
.belong-dots { display: flex; justify-content: space-between; gap: 10px; }
.belong-dots i { width: clamp(9px, 1vw, 13px); height: clamp(9px, 1vw, 13px); border-radius: 50%; }
/* Dr. G behind the headshot: bigger, bold, italic */
.portrait-stack .word { font-weight: 800 !important; font-style: italic !important; font-size: clamp(6.5rem, 19vw, 17rem) !important; letter-spacing: -.045em !important; }
.ev-verse blockquote { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3; }

/* About: marquee runs under the title and behind the story, edge to edge */
.story-band { position: relative; overflow: hidden; }
.story-marquee { position: absolute; left: 0; right: 0; top: clamp(170px, 16vw, 250px); bottom: 0; z-index: 0; }
.story-marquee .path-marquee { height: 100%; }
.story-band .rel { z-index: 2; }
.story-glass { background: rgba(243,239,224,.74); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); box-shadow: 0 20px 60px -30px rgba(11,11,10,.3); }
@media (max-width: 900px) { .story-marquee { top: 140px; } }
a.video-tile { display: block; }
.video-tile .play-chip { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(243,239,224,.92); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.video-tile .play-chip svg { width: 12px; height: 12px; }
.video-tile:hover .play-chip, .video-tile:focus-visible .play-chip { opacity: 1; transform: none; }

/* hero → "When we gather": long fade, solid before the edge, plus a soft spill below */
.hero-card.stacked::after { background: linear-gradient(180deg, rgba(11,11,10,.5) 0%, rgba(11,11,10,.05) 26%, rgba(11,11,10,.12) 48%, rgba(11,11,10,.55) 66%, rgba(11,11,10,.88) 80%, #0B0B0A 92%, #0B0B0A 100%); }
.hero-shell:has(.stacked) { position: relative; background: var(--ink); }
.hero-shell:has(.stacked)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -90px; height: 90px; background: linear-gradient(180deg, #0B0B0A, rgba(11,11,10,0)); z-index: 1; pointer-events: none; }
.hero-card.stacked { border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--ink); }

/* Dr. G cutout melts into the section below */
.portrait-stack .cut, .portrait-stack .disc {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 80%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 80%, transparent 97%);
}
.portrait-stack .photo-tag { bottom: 16%; }

/* hero: fade the photo into the dark on the left and right edges too, so no vertical seams */
.hero-card.stacked::after {
  background:
    linear-gradient(90deg, #0B0B0A 0%, rgba(11,11,10,.6) 3.5%, rgba(11,11,10,0) 9%, rgba(11,11,10,0) 91%, rgba(11,11,10,.6) 96.5%, #0B0B0A 100%),
    linear-gradient(180deg, rgba(11,11,10,.5) 0%, rgba(11,11,10,.05) 26%, rgba(11,11,10,.12) 48%, rgba(11,11,10,.55) 66%, rgba(11,11,10,.88) 80%, #0B0B0A 92%, #0B0B0A 100%);
}
/* Dr. G cutout: soft on the sides as well as the bottom */
.portrait-stack .cut {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 80%, transparent 97%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 80%, transparent 97%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-composite: intersect;
}

/* header tucked away over the home hero; fades in once you scroll past it */
.site-header { transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
body[data-page="index"] .site-header:not(.shown) { opacity: 0; transform: translateY(-18px); visibility: hidden; pointer-events: none; }

/* Dr. G: no box-clipped drop shadow (it left a hard rectangle); a soft glow sits behind instead,
   and the mask fades her into the section on every side */
.portrait-stack .cut { filter: none; }
.portrait-stack::after { content: ""; position: absolute; z-index: 1; left: 18%; right: 18%; bottom: 4%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,11,10,.16), transparent); filter: blur(20px); pointer-events: none; }
.portrait-stack .cut {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 64%, rgba(0,0,0,.55) 81%, transparent 97%), linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 64%, rgba(0,0,0,.55) 81%, transparent 97%), linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/* "Dr." in type + gold signature for Gaylena Lawrence */
.sig-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .12em .22em; }
.sig-heading .sig { height: 1.25em; width: auto; max-width: 100%; transform: translateY(.06em); }
@media (max-width: 480px) { .sig-heading .sig { height: 1em; } }
/* no halo or glow around the Dr. G cutout */
.portrait-stack::after { content: none; }

/* "What's coming up" (paper) melts into the Dr. G section (paper-2) */
.blend-top { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 42%, var(--paper-2) 100%); }

/* phones: first "the" stays behind the people, second "the" comes in front */
@media (max-width: 760px) {
  .hero-card.stacked .layer-words.back .row.spread em { visibility: hidden; }
  .hero-card.stacked .layer-words.front .row.spread em { visibility: visible; }
}

/* menu footer: socials, then Find Us */
.menu-foot { flex-direction: column; align-items: flex-start; gap: 26px; }
.menu-foot .social { margin-top: 0; }
.menu-find { display: grid; gap: 6px; }
.menu-find .eyebrow { margin-bottom: 6px; }
.menu-place { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--paper); letter-spacing: -.02em; }
.menu-find address { color: var(--smoke); font-size: 15px; }
.menu-find .link-arrow { margin-top: 8px; }

/* ---- 2026-09-25 updates ---- */
/* footer marquee: duration doubled because the track now holds two copies (same speed, no jump at the loop) */
.marquee-track[data-dup] { animation-duration: 80s; padding-right: 40px; } /* padding = gap, so exactly half the track is one copy */
.mq-img { backface-visibility: hidden; }

/* path marquee photos: smooth opacity changes */
.pm-tile { transition: opacity .25s linear; backface-visibility: hidden; }

/* Give in person: one service time per line, no separator */
.give-times { display: grid; gap: 2px; }
.give-times span { white-space: nowrap; }

/* Leadership clips: centred play button, always visible on touch screens */
.video-tile .play-center { position: absolute; z-index: 2; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,239,224,.9); color: var(--ink); box-shadow: 0 10px 30px -8px rgba(11,11,10,.55); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s var(--ease); }
.video-tile .play-center svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.video-tile:hover .play-center, .video-tile:focus-visible .play-center { opacity: 1; transform: none; }
@media (hover: none), (max-width: 900px) {
  .video-tile .play-center, .video-tile .play-chip { opacity: 1; transform: none; }
}

/* About "Why we exist" card on phones: fade the glass in gently.
   Safari can't draw a backdrop blur while its element is fading, so the blur used to snap on at the end.
   On small screens the card uses a solid frosted fill and its text rises in after the card. */
@media (max-width: 900px) {
  .story-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(243,239,224,.9); }
  .story-glass[data-reveal] { transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s var(--ease); }
  .story-glass[data-reveal] > * { opacity: 0; transition: opacity 1.1s ease .35s; }
  .story-glass[data-reveal].in > * { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .story-glass[data-reveal] > * { opacity: 1; } }

/* Subsplash forms (Visit, Connect, Growth Track, Prayer): framed as a site card.
   The form itself is Subsplash's, so fields inside it follow Subsplash's own styling. */
.form-embed { position: relative; background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(10px, 2vw, 22px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.45); min-height: 360px; overflow: hidden; }
.form-embed iframe { display: block; width: 100% !important; border: 0; }
.form-embed::before { content: "Loading form…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--smoke-dark); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.form-embed:has(iframe)::before { content: none; }

/* Prayer hero: singer sits further right so the headline and intro stay clear */
@media (min-width: 761px) and (max-width: 1100px) { .hero-cut.cut-prayer { left: 64% !important; } }
@media (max-width: 760px) { .hero-cut.cut-prayer { right: -22% !important; } }

/* Subsplash messaging: keep the chat bubble out of the way of the open mobile menu */
body.menu-open [id^="subsplash-messaging"]:not(script), body.menu-open [class*="subsplash-messaging"], body.menu-open [id*="subsplash-web-messaging"] { visibility: hidden !important; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* events: calendar section over a photo */
.cal-photo { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.cal-photo > img.bg { position: absolute; left: 0; right: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: center 25%; z-index: -2; }
.cal-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,10,.82), rgba(11,11,10,.55) 45%, rgba(11,11,10,.85)); }
/* calendar trimmed to a set number of events (height set in site.js) */
.embed-card[data-limit] [data-subsplash] { overflow: hidden; }

/* ---------- Subsplash messaging bubble ---------- */
.messaging-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 0 !important; }
.messaging-button svg { display: block !important; margin: 0 !important; position: static !important; transform: none !important; }
/* keep the chat panel inside the visible screen so its bottom (log in) is always reachable */
.modal-wrapper iframe { max-height: calc(100dvh - 110px) !important; }

/* photo bands: image is taller than the band so parallax never reveals an edge */
.band { padding-block: clamp(90px, 12vw, 150px); }
.band > img.bg { top: -14%; height: 128%; }

/* ---------- phones: Wonder Walkers becomes a photo band like True North ---------- */
@media (max-width: 760px) {
  .ww-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--paper); padding-block: 110px 96px; }
  .ww-band .photo-rounded { position: absolute; left: 0; right: 0; top: -6%; height: 112%; width: auto; aspect-ratio: auto; border-radius: 0; z-index: -2; transform: none !important; opacity: 1 !important; }
  .ww-band .photo-rounded img { object-position: 35% 18% !important; }
  .ww-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,10,.55) 0%, rgba(11,11,10,.72) 35%, rgba(11,11,10,.88) 100%); }
  .ww-band .eyebrow { color: var(--paper); }
  .ww-band .lead { color: rgba(243,239,224,.84); }
  .ww-band .lead strong { color: var(--paper); }
  .ww-band .kv { border-color: var(--line-dark); }
  .ww-band .kv > div { border-color: var(--line-dark); }
  .ww-band .kv dt, .ww-band .kv dd small { color: var(--smoke); }
  .ww-band .card { background: rgba(11,11,10,.5); border-color: rgba(243,239,224,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .ww-band .card h3 { color: var(--paper); }
  .ww-band .card p { color: rgba(243,239,224,.78); }
  .ww-band .card .num { color: var(--gold); }
  #true-north.band { padding-block: 110px 96px; }
}

/* calendar photo section fades into the dark "Get reminders" section below */
.cal-photo::after { background: linear-gradient(180deg, rgba(11,11,10,.85) 0%, rgba(11,11,10,.55) 30%, rgba(11,11,10,.62) 58%, rgba(11,11,10,.92) 84%, #0B0B0A 100%); }
.cal-photo + .section { background: var(--ink); }

/* ---------- praise reports & testimonies marquee (prayer page) ---------- */
.tm { position: relative; z-index: 1; display: grid; gap: 14px; margin-top: clamp(40px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.tm-row { overflow: hidden; }
.tm-track { display: flex; gap: 14px; width: max-content; animation: tm-scroll 60s linear infinite; }
.tm-row.rev .tm-track { animation-direction: reverse; animation-duration: 66s; }
.tm-row:hover .tm-track, .tm-row:focus-within .tm-track { animation-play-state: paused; }
.tm-dup { display: flex; gap: 14px; }
@keyframes tm-scroll { to { transform: translateX(calc(-50% - 7px)); } }
.tm-card { width: clamp(260px, 26vw, 340px); flex: none; display: grid; gap: 12px; align-content: start; padding: 18px 20px; border-radius: 18px;
  background: rgba(243,239,224,.05); border: 1px solid rgba(243,239,224,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tm-who { display: flex; align-items: center; gap: 10px; }
.tm-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink); flex: none; }
.tm-gold { background: var(--gold); } .tm-red { background: var(--red); color: var(--paper); } .tm-blue { background: var(--blue); color: var(--paper); } .tm-green { background: var(--green); color: var(--paper); }
.tm-who b { display: block; font-size: 14.5px; font-weight: 600; color: var(--paper); line-height: 1.2; }
.tm-who small { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.tm-card blockquote { font-size: 15px; line-height: 1.5; color: rgba(243,239,224,.86);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tm-foot { margin-top: 18px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .tm-track { animation: none; } .tm-row { overflow-x: auto; } .tm-dup { display: none; }
}
.share-check { padding: 14px 16px; border-radius: 14px; background: rgba(252,179,29,.14); border: 1px solid rgba(252,179,29,.45); }
.share-check b { font-weight: 600; }

/* ---------- iPhone Duo & other short, wide screens (e.g. the inner display, ~910 × 678 beside the side controls) ---------- */
@media (min-width: 761px) and (max-height: 720px) {
  .layer-words .hero-title { font-size: min(12.6vw, 14svh) !important; }
  .layer-words { padding-top: 88px; padding-bottom: 150px; }
  .page-hero .hero-card { min-height: 560px; }
  /* second "the" sits in front here, as on phones; behind the people only its tail showed */
  .hero-card.stacked .layer-words.back .row.spread em { visibility: hidden; }
  .hero-card.stacked .layer-words.front .row.spread em { visibility: visible; }
}

/* unfolding / folding: a short blur-and-settle, like the system transition between displays */
@keyframes duo-morph {
  0%   { filter: blur(16px) saturate(1.1); opacity: .55; transform: scale(.985); }
  60%  { filter: blur(3px);  opacity: .95; }
  100% { filter: none; opacity: 1; transform: none; }
}
html.duo-morph main, html.duo-morph .site-footer { animation: duo-morph .6s cubic-bezier(.2,.7,.1,1) both; }
@media (prefers-reduced-motion: reduce) { html.duo-morph main, html.duo-morph .site-footer { animation: none; } }
/* screenshot mode (?still): everything shown at rest */
html.still .rise, html.still [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- The Culture Wire (culture page): tagline, headline, page strip ---------- */
.cw { position: relative; overflow: hidden; padding-block: clamp(80px, 9vw, 130px) clamp(70px, 8vw, 110px); color: var(--paper);
  background: radial-gradient(80% 45% at 50% 32%, rgba(15,41,83,.8), rgba(15,41,83,0) 72%), var(--ink); }
.cw-head { text-align: center; display: grid; justify-items: center; gap: 22px; position: relative; z-index: 2; }
.cw-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(252,179,29,.4); background: rgba(252,179,29,.08); font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); backdrop-filter: blur(8px); }
@media (max-width: 520px) { .cw-pill { font-size: 10.5px; letter-spacing: .1em; padding: 8px 14px; } }
.cw-pill b { font-weight: 700; color: var(--gold); }
.cw-title { max-width: 16ch; text-wrap: balance; }
.cw-title .w { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * 80ms + 150ms); }
.cw-title.in .w, html.still .cw-title .w { opacity: 1; transform: none; }
.cw-title[data-reveal] { transform: none; }
.cw-lead { max-width: 62ch; }
.cw-lead b { color: var(--paper); font-weight: 600; }
.cw-lead i { font-style: italic; }
.cw-actions { justify-content: center; margin-top: 6px; }

.cw-strip { position: relative; margin-top: clamp(50px, 6vw, 80px); padding-block: 26px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.cw-track { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2vw, 26px); width: max-content; animation: cw-roll var(--cw-dur, 110s) linear infinite; }
.cw-strip:hover .cw-track, .cw-strip:focus-within .cw-track { animation-play-state: paused; }
@keyframes cw-roll { from { transform: translateX(0); } to { transform: translateX(var(--cw-shift, -50%)); } }
.cw-track li { flex: none; display: grid; gap: 12px; justify-items: center; rotate: -2deg; transition: rotate .5s var(--ease), translate .5s var(--ease); }
.cw-track li:nth-child(even) { rotate: 3.5deg; translate: 0 14px; }
.cw-track li:hover { rotate: 0deg; translate: 0 -6px; }
.cw-track button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; }
.cw-track button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.cw-track img { display: block; height: clamp(250px, 27vw, 360px); width: auto; aspect-ratio: 3091 / 4000; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(245,242,235,.08); }
.cw-track span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); }

.cw-toc { margin-top: clamp(50px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.cw-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 28px; }
.cw-toc li { display: grid; gap: 4px; align-content: start; font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25; }
.cw-toc li span { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .14em; color: var(--gold); }
@media (max-width: 960px) { .cw-toc { grid-template-columns: 1fr; } .cw-toc ol { grid-template-columns: repeat(2, 1fr); } }

.cw-viewer { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 10px; padding: 24px 16px; background: rgba(11,11,10,.92); backdrop-filter: blur(10px); }
.cw-viewer[hidden] { display: none; }
.cw-viewer figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 12px; justify-items: center; min-height: 0; }
.cw-viewer img { max-height: calc(100dvh - 110px); max-width: 100%; width: auto; height: auto; border-radius: 10px; align-self: center; }
.cw-viewer figcaption { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); text-align: center; }
.cw-nav, .cw-x { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(245,242,235,.3); background: rgba(245,242,235,.06); color: var(--paper); font-size: 20px; cursor: pointer; }
.cw-nav:hover, .cw-x:hover { border-color: var(--gold); color: var(--gold); }
.cw-x { position: absolute; top: 18px; right: 18px; }
@media (max-width: 700px) {
  .cw-viewer { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
  .cw-viewer figure { grid-column: 1 / -1; grid-row: 1; }
  .cw-nav.prev { grid-row: 2; justify-self: end; } .cw-nav.next { grid-row: 2; justify-self: start; }
  .cw-viewer img { max-height: calc(100dvh - 170px); }
}
@media (prefers-reduced-motion: reduce) {
  .cw-track { animation: none; }
  .cw-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .cw-track li[aria-hidden] { display: none; }
}

/* subscribe page: the current cover beside the form */
.cw-cover { position: relative; justify-self: center; width: min(100%, 420px); }
.cw-cover img { width: 100%; height: auto; border-radius: 16px; rotate: -3deg; box-shadow: 0 40px 70px -35px rgba(0,0,0,.85); }
.cw-cover .spin-note { position: absolute; right: -14px; bottom: 28px; rotate: 4deg; background: var(--gold); color: var(--ink); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; }
.sub-check { padding: 14px 16px; border-radius: 14px; background: rgba(252,179,29,.14); border: 1px solid rgba(252,179,29,.45); }
.sub-check b { font-weight: 600; }

/* Aligned / Formed / Released photo path: soft edges instead of hard cut lines,
   so photos (and their shadows) melt in and out rather than being clipped */
.pm-col .path-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.pm-col .pm-tile { box-shadow: 0 12px 26px -12px rgba(11,11,10,.38); }
/* phones: the path runs edge to edge (both sides), fading only top and bottom */
@media (max-width: 900px) {
  .pm-col { margin-inline: calc(-1 * var(--gutter)); }
  .pm-col .path-marquee {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
  }
}

/* ---------- Subscribe: this month's pages sliding by, beside the headline ---------- */
.cw-side { min-width: 0; align-self: center; }
.cw-side-in, .cw-side-in.rise { display: block; }
.cw-side .cw-strip { margin: 0 calc(-1 * var(--gutter)) 0 0; padding-block: 30px 18px; }
.cw-side .cw-track img { height: clamp(230px, 25vw, 340px); }
@media (max-width: 900px) { .cw-side { margin-top: 36px; } .cw-side .cw-strip { margin-inline: calc(-1 * var(--gutter)); } }

.cw-now, .cw-now.rise { display: block; position: relative; z-index: 2; text-align: center; margin-top: clamp(36px, 5vw, 64px); }
.cw-now b { font-weight: 800; }

.story-cta { margin-top: 10px; padding: 22px 24px; border-radius: var(--radius-lg, 20px); background: var(--white); border: 1px solid var(--line-light); display: grid; gap: 16px; justify-items: start; }
.story-cta p { margin: 0; color: rgba(11,11,10,.72); line-height: 1.55; }
.story-cta b { color: var(--ink); }
.story-kinds { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.story-kinds li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(245,242,235,.25); font-size: 13.5px; color: rgba(245,242,235,.85); }

/* ---------- uniform rhythm between sections ----------
   Two light sections in a row read as one surface, so they share one
   standard gap instead of two full paddings stacked (and overlap by 1px so
   no hairline of the page background shows through the seam). */
.section.light:has(+ .section.light) { padding-bottom: clamp(44px, 5.5vw, 80px); z-index: 1; }  /* its card shadows fall softly onto the next section instead of being cut off */
.section.light + .section.light { padding-top: clamp(44px, 5.5vw, 80px); margin-top: -1px; }
/* Culture: Daily practice runs straight into The Culture Wire */
.section:has(+ .cw) { padding-bottom: clamp(44px, 5.5vw, 80px); }
.form-error { margin: 4px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(200,35,26,.1); border: 1px solid rgba(200,35,26,.35); color: var(--red-d); font-size: 14.5px; }
.form.on-dark .form-error { color: #ffb4ad; }

/* Plan a Visit: a photo faded into the right-hand side of the banner (like the faded logo on other pages) */
.photo-float { position: absolute; top: 0; right: 0; bottom: 0; width: min(52%, 760px); height: 100%; object-fit: cover; object-position: center 30%; opacity: .6; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 32%, #000 70%), linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 32%, #000 70%), linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
  mask-composite: intersect; }
@media (max-width: 900px) { .photo-float { width: 85%; opacity: .32; } }
a.cw-pill { text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--ease); }
a.cw-pill:hover { background: rgba(252,179,29,.16); border-color: var(--gold); }

/* ---------- livestream player: instant poster, real player fades in when ready ---------- */
.lp { isolation: isolate; }
.lp > iframe { z-index: 0; }
.lp-poster { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--ink-2); transition: opacity .6s ease, visibility 0s linear .6s; }
.lp.ready .lp-poster { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) brightness(.55); transform: scale(1.04); animation: lp-drift 14s ease-in-out infinite alternate; }
@keyframes lp-drift { to { transform: scale(1.1) translateX(-1.5%); } }
.lp-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,10,.15) 0%, rgba(11,11,10,.35) 45%, rgba(11,11,10,.9) 100%); }
.lp-info { position: absolute; left: clamp(18px, 3.5vw, 44px); right: clamp(18px, 3.5vw, 44px); bottom: clamp(18px, 3.5vw, 40px); z-index: 1; display: grid; gap: 6px; color: var(--paper); }
.lp-tag { display: inline-flex; align-items: center; gap: 9px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: rgba(11,11,10,.55); border: 1px solid rgba(245,242,235,.2); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.lp-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(200,35,26,.25); }
.lp.is-live .lp-tag i { animation: lp-pulse 1.4s ease-in-out infinite; }
@keyframes lp-pulse { 50% { box-shadow: 0 0 0 8px rgba(200,35,26,0); } }
.lp-info strong { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.8rem); letter-spacing: -.03em; line-height: 1.02; }
.lp-when { font-size: clamp(.9rem, 1.3vw, 1.05rem); color: rgba(245,242,235,.8); }
.lp-count { font-family: var(--f-mono); font-size: clamp(.95rem, 1.6vw, 1.25rem); letter-spacing: .08em; color: var(--gold); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.lp-loading { position: absolute; top: clamp(14px, 2.5vw, 24px); right: clamp(14px, 2.5vw, 24px); z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: rgba(11,11,10,.5); font-size: 12.5px; color: rgba(245,242,235,.75); }
.lp-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(245,242,235,.25); border-top-color: var(--gold); animation: lp-spin .8s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .lp-loading { display: none; } .lp-info { gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .lp-poster img, .lp-spin, .lp.is-live .lp-tag i { animation: none; } }

/* Culture: We will / We won't as expandable panels */
.card.commit { padding: 0; display: block; }
.card.commit > summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; gap: 18px; padding: clamp(22px, 2.6vw, 32px); border-radius: inherit; }
.card.commit > summary::-webkit-details-marker { display: none; }
.card.commit > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.commit-head { display: grid; gap: 6px; flex: 1; }
.commit-head h3 { margin: 0; }
.commit-sub { font-size: 15px; color: var(--smoke); }
.commit-toggle { flex: none; position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-dark); transition: transform .35s var(--ease), border-color .25s; }
.commit-toggle::before, .commit-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--paper); border-radius: 2px; transition: transform .35s var(--ease); }
.commit-toggle::after { transform: rotate(90deg); }
.card.commit[open] .commit-toggle { border-color: var(--gold); }
.card.commit[open] .commit-toggle::after { transform: rotate(0deg); }
.card.commit > summary:hover .commit-toggle { border-color: var(--paper); }
.card.commit > .kv { margin: 0 clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px); animation: commit-in .45s var(--ease); }
@keyframes commit-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cards-2:has(.commit) { align-items: start; }
/* Home › Our Culture: keep the paragraph clear of the floating photos */
.culture-intro p.lead { max-width: 44ch; margin-inline: auto; text-wrap: balance; }

/* ---------- Give: what you can give online (card · bank · crypto · stock) ---------- */
.give-methods { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.give-methods li { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; border: 1px solid var(--line-light); background: var(--paper); font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.gm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--gm) 14%, transparent); color: var(--gm); flex: none; }
.gm-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gm-gold { --gm: #B77E06; } .gm-red { --gm: var(--red-d); } .gm-blue { --gm: var(--blue-d); } .gm-green { --gm: var(--green-d); }
.give-other { margin: clamp(26px, 3vw, 40px) auto 0; max-width: 62ch; text-align: center; font-size: 1.02rem; line-height: 1.6; color: rgba(11,11,10,.72); }
.give-other a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-d); text-underline-offset: 4px; }

/* ---------- Names are set in title case, not capitals ---------- */
.hero-title.name { text-transform: none; letter-spacing: -0.04em; line-height: .92; }
.name-title { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: .98; }
.name-title .nt-line { display: block; white-space: nowrap; }

/* ---------- Clean outline words (outer stroke only, no fill) ---------- */
/* red reads clearly over both the dark video and the cream page */
.lead-hero-word[data-outline] { color: var(--red); -webkit-text-stroke: 0; }
[data-outline]:not(.svg-ready) { opacity: 0; }
.lead-hero-word[data-outline].svg-ready { line-height: 0; }
.outline-svg { display: block; max-width: none; overflow: visible; }

/* ---------- Hover slideshow (Apostle Stanford) ---------- */
.hover-show { position: relative; margin: 0; width: min(100%, 520px); justify-self: center; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--ink-2); cursor: pointer; box-shadow: 0 40px 70px -40px rgba(11,11,10,.55); }
.hover-show:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 4px; }
.hover-show img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 2.4s ease-out; }
.hover-show img.on { opacity: 1; transform: none; }
.hover-hint { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 9px 14px; border-radius: 999px; background: rgba(11,11,10,.72); color: var(--paper); backdrop-filter: blur(10px); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; transition: opacity .35s ease; }
.hover-show.playing .hover-hint { opacity: 0; }
.hh-touch { display: none; }
@media (hover: none) { .hh-mouse { display: none; } .hh-touch { display: inline; } }
.hover-dots { position: absolute; right: 16px; bottom: 20px; z-index: 2; display: flex; gap: 6px; opacity: 0; transition: opacity .35s ease; }
.hover-show.playing .hover-dots { opacity: 1; }
.hover-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243,239,224,.4); transition: background .3s, transform .3s; }
.hover-dots i.on { background: var(--gold); transform: scale(1.25); }

/* ---------- forced line breaks in headings and leads ---------- */
.ln { display: block; }
h2 .ln { white-space: nowrap; }
@media (min-width: 760px) { p .ln { white-space: nowrap; } }
.hero-title.name .row { white-space: nowrap; }

/* ---------- About hero: the full photo, hands in worship ---------- */
.plain-hero.hero-figure { min-height: clamp(520px, 52vw, 720px); display: flex; align-items: center; }
.plain-hero.hero-figure > .wrap { width: 100%; }
.photo-float.figure { top: auto; bottom: 0; right: clamp(0px, 2vw, 40px); width: auto; height: 100%; aspect-ratio: 3 / 4; max-width: 46%; object-fit: contain; object-position: 50% 100%; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 100%); }
@media (max-width: 900px) {
  .plain-hero.hero-figure { min-height: 0; display: block; padding-bottom: min(112vw, 560px); }
  .photo-float.figure { right: 0; left: 0; margin: 0 auto; height: min(118vw, 590px); max-width: 100%; opacity: .92;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%); -webkit-mask-composite: source-over; mask-composite: add; }
}

/* ---------- Apostolic covering band: a quiet navy-to-ink wash with a gold glow ---------- */
.apostle-band { position: relative; isolation: isolate; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(11,11,10,0) 52%, rgba(11,11,10,.55) 78%, #0B0B0A 100%),
    radial-gradient(55% 75% at 76% 42%, rgba(20,82,214,.42), transparent 72%),
    radial-gradient(70% 90% at 6% 100%, rgba(58,107,201,.18), transparent 72%),
    radial-gradient(40% 50% at 96% 8%, rgba(252,179,29,.07), transparent 70%),
    linear-gradient(160deg, #0B0B0A 0%, #091633 44%, #0B2A78 100%); }
.apostle-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(252,179,29,.45) 30%, rgba(252,179,29,.45) 70%, transparent); }
.hover-show img { transform: scale(1.03); transition: opacity 1.8s cubic-bezier(.45,0,.25,1), transform 6s cubic-bezier(.3,0,.3,1); }
.hover-show img.on { transform: none; }
.give-times strong { color: var(--ink); font-weight: 700; }

/* ---------- give: placeholder button until a link exists ---------- */
.btn.is-soon { cursor: default; border-style: dashed; opacity: .7; }
.btn.is-soon:hover { background: none; border-color: rgba(11, 11, 10, 0.3); transform: none; }

/* give online: plain icon + label, no chips, so the button leads */
.give-methods { gap: 8px 22px; }
.give-methods li { padding: 0; border: 0; border-radius: 0; background: none; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.gm-icon { width: auto; height: auto; background: none; border-radius: 0; }
.gm-icon svg { width: 17px; height: 17px; }

/* Leadership hero word: page off-white, spanning and centred on the video frame */
.lead-hero-word[data-outline] { color: var(--paper); left: 0; right: 0; transform: none !important; }
.lead-hero-word[data-outline] .outline-svg { margin: 0 auto; }

/* Culture › Daily Practice: the photo runs exactly the height of the list beside it */
.daily-split { align-items: start; }
.daily-photo { aspect-ratio: 1 / 1; }
@media (min-width: 901px) {
  .daily-split { align-items: stretch; gap: clamp(40px, 5vw, 80px); grid-template-columns: .82fr 1fr; }
  .daily-split > .stack { display: flex; flex-direction: column; }
  .daily-photo { flex: 1; min-height: 0; aspect-ratio: auto; }
  .daily-photo img { position: absolute; inset: 0; }
}

/* Culture › We Will / We Won't: same deep colour cards as Head · Heart · Hands on About */
.card.commit[class*="tone-"] { border: 0; border-radius: var(--radius-lg); color: var(--paper); overflow: hidden; }
.card.commit.tone-green { background: linear-gradient(160deg, #24540C, #0A1A03); }
.card.commit.tone-red { background: linear-gradient(160deg, #800A02, #260301); }
.card.commit[class*="tone-"] > summary { padding: clamp(28px, 3.5vw, 44px); }
.card.commit[class*="tone-"] h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -0.04em; line-height: .9; color: var(--paper); }
.card.commit[class*="tone-"] h3 em { font-weight: 300; font-style: italic; color: inherit; }
.card.commit[class*="tone-"] .commit-sub { color: rgba(245,242,235,.78); margin-top: 8px; }
.card.commit[class*="tone-"] .commit-toggle { border-color: rgba(245,242,235,.3); }
.card.commit[class*="tone-"][open] .commit-toggle, .card.commit[class*="tone-"] > summary:hover .commit-toggle { border-color: var(--paper); }
.card.commit[class*="tone-"] > .kv { margin: 0 clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px); border-color: rgba(245,242,235,.2); }
.card.commit[class*="tone-"] > .kv > div { border-color: rgba(245,242,235,.2); }
.card.commit[class*="tone-"] > .kv dt { color: rgba(245,242,235,.7); }
.card.commit[class*="tone-"] > .kv dd { color: var(--paper); }

a.tag.tag-link { text-decoration: none; transition: border-color .25s, color .25s; }
a.tag.tag-link:hover, a.tag.tag-link:focus-visible { border-color: var(--gold); color: var(--gold); }

/* Next Gen › Wonder Walkers age groups: same deep colour cards as Head · Heart · Hands on About */
.card.tone-card { border: 0; border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 34px); min-height: 260px; display: flex; flex-direction: column; gap: 14px; color: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.tone-card.tone-gold { background: linear-gradient(160deg, #4A3304, #150F02); --tone: var(--gold); }
.card.tone-card.tone-red { background: linear-gradient(160deg, #800A02, #260301); --tone: #FF8A7F; }
.card.tone-card.tone-blue { background: linear-gradient(160deg, #0F2953, #060F20); --tone: #8FB2F5; }
.card.tone-card.tone-green { background: linear-gradient(160deg, #24540C, #0A1A03); --tone: #A5D67C; }
.card.tone-card .num { color: var(--tone); }
.card.tone-card h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 2.5vw, 2.5rem); letter-spacing: -0.04em; line-height: .92; color: var(--paper); }
.card.tone-card h3 em { display: block; font-weight: 300; font-style: italic; color: inherit; }
.card.tone-card p { color: rgba(245,242,235,.78); margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(245,242,235,.2); }
@media (max-width: 760px) { .card.tone-card { min-height: 0; } }

/* ---------- home pop-up (content and on/off come from the Staff Portal) ---------- */
.pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(11,11,10,0); transition: background .35s ease; }
.pop.in { background: rgba(11,11,10,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pop-card { position: relative; width: min(880px, 100%); max-height: calc(100dvh - 40px); display: grid; grid-template-columns: .82fr 1fr; background: var(--paper); color: var(--ink); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8); opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .35s ease, transform .5s var(--ease); }
.pop.in .pop-card { opacity: 1; transform: none; }
.pop-card.no-photo { grid-template-columns: 1fr; width: min(520px, 100%); }
.pop-photo { position: relative; background: var(--ink); min-height: 420px; }
.pop-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.pop-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,10,0) 55%, rgba(11,11,10,.55)); }
.pop-body { padding: clamp(26px, 4vw, 46px); overflow-y: auto; }
.pop-ask, .pop-done { display: grid; gap: 14px; align-content: center; min-height: 100%; }
.pop-body .eyebrow { color: var(--gold-d); }
.pop-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.pop-body p { color: rgba(11,11,10,.72); }
.pop-form { display: grid; gap: 10px; margin-top: 6px; }
.pop-form label { display: grid; gap: 5px; }
.pop-form label span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke-dark); }
.pop-form input { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(11,11,10,.2); background: #fff; color: var(--ink); font: inherit; }
.pop-form input:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; }
.pop-form .btn { justify-self: start; margin-top: 6px; }
.pop-err { color: var(--red-d) !important; font-size: 14px; }
.pop-fine { font-size: 12.5px; color: var(--smoke-dark) !important; }
.pop-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(11,11,10,.18); background: rgba(243,239,224,.92); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.pop-x:hover, .pop-x:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
@media (max-width: 700px) {      /* phones: centred on screen, with a margin all round, never a full-screen takeover */
  .pop { place-items: center; padding: 16px; }
  .pop-card { grid-template-columns: 1fr; width: 100%; max-height: calc(100dvh - 32px); border-radius: 24px; }
  .pop-photo { min-height: 0; height: 150px; }
  .pop-body { padding: 22px 20px 24px; }
  .pop-form .btn { justify-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pop, .pop-card { transition: none; } }
.pop [hidden] { display: none !important; }

/* pop-up as an announcement: button link instead of a form, or one graphic filling the card */
.pop-card.is-graphic { display: block; width: auto; max-width: min(640px, 100%); background: var(--ink); }
.pop-card.is-graphic img { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 40px); margin: 0 auto; }
.pop-card.is-graphic .pop-go { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .pop-card.is-graphic img { max-height: calc(100dvh - 32px); width: 100%; } }

/* ---------- audit fixes: readable small text, comfortable tap targets ---------- */
.footer-legal { color: var(--smoke); }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tag.live { color: #F0554A; }                 /* small red text on black needs the lighter red; border and dot stay brand red */
.light .tag.live { color: var(--red); }
.light .link-arrow { color: #2F5CB4; }        /* small blue links on cream: a touch deeper so they pass contrast */
.light .card .num { color: var(--smoke-dark); }
.form-note { color: inherit; opacity: .72; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .link-arrow { padding-block: 11px; } }
/* privacy and other long-form reading pages */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.03em; margin: 44px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 1.06rem; line-height: 1.65; color: rgba(11,11,10,.8); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 12px 22px; display: grid; gap: 8px; }
.legal a { color: #2F5CB4; text-decoration: underline; text-underline-offset: 3px; }
.legal ul { list-style: disc; }
.legal > p:first-child { font-size: 1.15rem; }
.legal-note { margin-top: 14px; padding: 14px 18px; border-left: 3px solid var(--gold); background: rgba(252,179,29,.1); border-radius: 0 10px 10px 0; }
/* Next Gen age labels: same label style and brand colours as "Vision · Head" on the About cards */
.card.tone-card .num { font-family: var(--f-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.card.tone-card.tone-gold { --tone: var(--gold); }
.card.tone-card.tone-red { --tone: var(--red); }
.card.tone-card.tone-blue { --tone: var(--blue); }
.card.tone-card.tone-green { --tone: var(--green); }
.ww-band .card.tone-card .num { color: var(--tone); }