/* ============================================================
   ALIVE CHURCH — HOMEPAGE VISUAL REDESIGN (homepage-only layer)
   ============================================================
   Loaded AFTER style.css, only on "/". Everything in this file is
   scoped under body.home-redesign so it can never leak onto the
   other ~40 pages that share style.css. Content, logo, nav and
   every data-cms-* attribute in index.php are untouched — this
   file only restyles the existing homepage section markup.
   ============================================================ */

body.home-redesign {
  /* ---- Local design tokens (namespaced, do not touch :root) ----
     Brand colours stay fixed (the site already keeps brand accents
     vivid in both themes — see --color-magenta dark override in
     style.css). Surface/text tokens instead alias the site's
     existing theme-aware custom properties so the redesign still
     responds correctly to the light/dark toggle. */
  --hr-pink:        var(--color-magenta, #eb008b);
  --hr-pink-deep:   #c40074;
  --hr-pink-soft:   #ff4db3;
  --hr-purple:      var(--color-secondary, #4b2679);
  --hr-purple-deep: #35195a;
  --hr-blue:        #125b9a;
  --hr-ink:         var(--color-text, #1e1a2b);
  --hr-bg:          var(--color-bg, #f6f6f8);
  --hr-surface:     var(--color-card-bg, #ffffff);

  --hr-tint-pink:   var(--color-magenta-glow, #fceef6);
  --hr-tint-purple: var(--color-purple-glow, #f2eef8);
  --hr-line:        var(--color-border, rgba(30, 26, 43, .09));
  --hr-muted:       var(--color-text-muted, #5c5570);
  --hr-muted-dark:  rgba(255, 255, 255, .72);

  /* Literal brand colours for elements that keep white text / white
     surfaces in BOTH themes (gradient bands, icon tiles, glass cards).
     The theme-aware --hr-pink/--hr-purple go pastel in dark mode and
     would wash these out. */
  --hr-ink-lit:    #1e1a2b;
  --hr-pink-lit:   #eb008b;
  --hr-purple-lit: #4b2679;
  --hr-grad-brand: linear-gradient(112deg, #eb008b 0%, #b0157f 48%, #4b2679 100%);
  --hr-grad-dark:  linear-gradient(160deg, #241c3a 0%, #1e1a2b 55%, #191428 100%);

  --hr-fs-display: clamp(2.6rem, 1.9rem + 3.6vw, 4.4rem);
  --hr-fs-h2:      clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
  --hr-fs-lead:    clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --hr-track-tight: -0.03em;
  --hr-track-wide:  0.16em;

  --hr-space-section: clamp(4rem, 2.8rem + 5vw, 7rem);
  --hr-r-sm: 12px; --hr-r-md: 20px; --hr-r-lg: 28px; --hr-r-pill: 999px;

  --hr-shadow-sm: 0 1px 2px rgba(30,26,43,.06), 0 4px 12px rgba(30,26,43,.06);
  --hr-shadow-md: 0 2px 4px rgba(30,26,43,.05), 0 12px 28px -6px rgba(30,26,43,.14);
  --hr-shadow-lg: 0 4px 8px rgba(30,26,43,.05), 0 28px 60px -12px rgba(75,38,121,.28);
  --hr-shadow-pink: 0 10px 30px -8px rgba(235,0,139,.45);

  --hr-ease-out: cubic-bezier(.22,.9,.28,1);
  --hr-t-fast: .22s; --hr-t-med: .45s; --hr-t-slow: .8s;

  --hr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  /* High-contrast grayscale grain for photo surfaces: saturate 0 +
     crushed midtones so the speckle reads as film, not fog */
  --hr-grain-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  background: var(--hr-bg);
}

body.home-redesign main#content {
  overflow-x: clip;
}

/* ---------- Shared type / link helpers, scoped to homepage sections ---------- */
body.home-redesign .hero,
body.home-redesign .new-here-cta,
body.home-redesign .sermon-feature,
body.home-redesign .weekend-preview,
body.home-redesign .about,
body.home-redesign .ministries,
body.home-redesign .watch,
body.home-redesign .events,
body.home-redesign .next-steps,
body.home-redesign .photo-gallery {
  font-family: 'Montserrat', system-ui, sans-serif;
}

body.home-redesign .eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: var(--hr-track-wide); text-transform: uppercase;
  color: var(--hr-pink); margin-bottom: 1rem;
}
body.home-redesign .eyebrow::before {
  content: ""; width: 2rem; height: 2px; background: var(--hr-pink); border-radius: 2px;
}
body.home-redesign .eyebrow.light {
  color: var(--hr-pink-soft) !important;
}
body.home-redesign .eyebrow.light::before {
  background: var(--hr-pink-soft);
}

body.home-redesign .section-heading {
  max-width: 44rem;
  margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
}
body.home-redesign .section-heading h2 {
  font-size: var(--hr-fs-h2); font-weight: 900; line-height: 1.1;
  letter-spacing: var(--hr-track-tight); color: var(--hr-ink);
}
body.home-redesign .watch .section-heading h2 {
  color: #fff;
}
body.home-redesign .section-heading p {
  margin-top: .75rem; color: var(--hr-muted);
}
body.home-redesign .watch .section-heading p {
  color: var(--hr-muted-dark);
}

/* Animated-underline text links (.text-link / .text-link-light already exist in markup) */
body.home-redesign .text-link,
body.home-redesign .text-link-light {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .875rem;
  position: relative; padding-bottom: 2px;
  text-decoration: none !important;
  transition: gap var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .text-link { color: var(--hr-pink); }
body.home-redesign .text-link-light { color: #fff; }
body.home-redesign .text-link::after,
body.home-redesign .text-link-light::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .text-link:hover::after,
body.home-redesign .text-link-light:hover::after,
body.home-redesign .text-link:focus-visible::after,
body.home-redesign .text-link-light:focus-visible::after {
  transform: scaleX(1);
}
body.home-redesign .text-link:hover,
body.home-redesign .text-link-light:hover {
  gap: .55rem;
}

/* ---------- Buttons ---------- */
body.home-redesign .btn {
  border-radius: var(--hr-r-pill);
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: .95rem 1.9rem;
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              box-shadow var(--hr-t-fast) var(--hr-ease-out),
              background-color var(--hr-t-fast) var(--hr-ease-out),
              color var(--hr-t-fast) var(--hr-ease-out),
              border-color var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .btn:hover {
  transform: translateY(-2px);
}
body.home-redesign .btn:active {
  transform: translateY(1px) scale(.99);
}
/* Grainy gradient pills (kept in sync with design-system.css) */
body.home-redesign .btn-primary {
  background-color: var(--hr-pink-lit);
  background-image: var(--hr-grain), linear-gradient(112deg, #ff2d9c 0%, #eb008b 55%, #c40074 100%);
  background-size: 56px 56px, auto; /* much finer than the 180px band grain — screen-print, not paper */
  background-blend-mode: overlay, normal;
  color: #fff; box-shadow: var(--hr-shadow-pink);
}
body.home-redesign .btn-primary:hover {
  background-image: var(--hr-grain), linear-gradient(112deg, #eb008b 0%, #c40074 60%, #a3005f 100%);
  box-shadow: 0 14px 34px -8px rgba(235,0,139,.55);
}
body.home-redesign .btn-secondary {
  background-color: var(--hr-purple-lit);
  background-image: var(--hr-grain), linear-gradient(112deg, #6d3ab1 0%, #4b2679 55%, #35195a 100%);
  background-size: 56px 56px, auto; /* much finer than the 180px band grain — screen-print, not paper */
  background-blend-mode: overlay, normal;
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(75,38,121,.5);
}
body.home-redesign .btn-secondary:hover {
  background-image: var(--hr-grain), linear-gradient(112deg, #5a2f95 0%, #3d1f63 60%, #2c1449 100%);
}
body.home-redesign .btn-outline {
  background: transparent; color: var(--hr-ink);
  border: 2px solid rgba(30,26,43,.25);
}
body.home-redesign .btn-outline:hover {
  border-color: var(--hr-pink); color: var(--hr-pink);
}
html[data-theme="dark"] body.home-redesign .btn-outline {
  border-color: rgba(255, 255, 255, .35);
}
body.home-redesign .watch .btn-outline,
body.home-redesign .watch .btn-secondary {
  color: #fff; border-color: rgba(255,255,255,.45); background: transparent;
}
body.home-redesign .watch .btn-outline:hover {
  border-color: #fff; color: #fff; background: rgba(255,255,255,.1);
}

/* ---------- Reveal-on-scroll (progressive enhancement) ---------- */
/* Reveal transforms compose the scatter tilt (--hr-tilt) so tilted
   cards animate in and land on their tilt instead of snapping flat */
body.home-redesign [data-hr-reveal] {
  opacity: 0; transform: translateY(26px) rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
  transition: opacity var(--hr-t-slow) var(--hr-ease-out), transform var(--hr-t-slow) var(--hr-ease-out);
  transition-delay: var(--hr-d, 0s);
}
body.home-redesign [data-hr-reveal].hr-in-view,
body.home-redesign.hr-no-js [data-hr-reveal] {
  opacity: 1; transform: rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
  body.home-redesign [data-hr-reveal] {
    opacity: 1; transform: rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1)); transition: none;
  }
}

/* ============================================================
   1 · HERO
   ============================================================ */
body.home-redesign .hero {
  position: relative;
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 8vw, 9rem) 0 clamp(6rem, 9vw, 9rem);
  /* Literal ink: this band is always dark; --hr-ink aliases the theme
     TEXT colour and goes light in dark mode */
  background: var(--hr-ink-lit, #1e1a2b);
  overflow: hidden;
  isolation: isolate;
}
body.home-redesign .hero::after {
  /* replace the flat magenta gradient wash with the mockup's layered look,
     while still respecting the real --hero-bg-image CMS variable */
  content: "";
  position: absolute; inset: 0; z-index: -3;
  opacity: 1;
  background:
    radial-gradient(56rem 34rem at 12% 110%, rgba(235,0,139,.42), transparent 62%),
    radial-gradient(48rem 30rem at 92% -8%, rgba(18,91,154,.38), transparent 60%),
    linear-gradient(102deg, rgba(30,26,43,.94) 6%, rgba(53,25,90,.8) 44%, rgba(30,26,43,.4) 100%),
    var(--hero-bg-image, url('/assets/imgs/gallery/alive-church-worship-neon-cross.jpg')) center bottom / cover no-repeat;
  transform: scale(1.05);
}
body.home-redesign .hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--hr-grain-heavy);
  background-size: 180px 180px;
  opacity: .42; mix-blend-mode: overlay; pointer-events: none;
}
body.home-redesign .hero-content {
  position: relative; z-index: 1;
}
body.home-redesign .hero .hero-tag {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .8125rem; font-weight: 700; letter-spacing: var(--hr-track-wide);
  text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .5rem 1.1rem; border-radius: var(--hr-r-pill);
  margin: 0 0 1.5rem;
  line-height: 1.4;
}
body.home-redesign .hero .hero-tag::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--hr-pink); box-shadow: 0 0 0 4px rgba(235,0,139,.28);
  flex: none;
}
body.home-redesign .hero h1 {
  font-size: var(--hr-fs-display); font-weight: 900; line-height: 1.04;
  letter-spacing: var(--hr-track-tight);
  margin: 0 0 1.3rem; color: #fff; max-width: 22ch;
}
body.home-redesign .hero h1 .accent {
  font-family: var(--hr-script-font, 'Yellowtail', cursive);
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-2deg);
  background: linear-gradient(100deg, #ff4db3, var(--hr-pink-lit));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-redesign .hero-content > p:not(.hero-tag):not(.hero-dead-church) {
  font-size: var(--hr-fs-lead); font-weight: 500; line-height: 1.65;
  color: rgba(255,255,255,.85); max-width: 36rem; margin: 0 0 1.6rem;
}
body.home-redesign .hero .hero-dead-church {
  margin-bottom: 1.6rem;
}
body.home-redesign .hero .hero-dead-church a {
  color: rgba(255,255,255,.65);
}
body.home-redesign .hero .hero-dead-church a:hover {
  color: #fff;
}
body.home-redesign .hero-ctas {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin: 0 0 clamp(2.6rem, 5vw, 3.6rem);
}

/* Info cards -> mockup's frosted floating cards */
body.home-redesign .hero-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.15rem;
  margin-top: 0;
  max-width: 46rem;
}
body.home-redesign .hero-info-card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--hr-r-md);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--hr-shadow-lg);
  gap: 1.1rem;
  transition: transform var(--hr-t-fast) var(--hr-ease-out), box-shadow var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .hero-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px -14px rgba(75,38,121,.4);
}
body.home-redesign .hero-info-card .info-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--hr-grad-brand);
  box-shadow: var(--hr-shadow-pink);
  font-size: 1.3rem;
}
/* Dark mode: the glass cards go dark with theme-aware text */
html[data-theme="dark"] body.home-redesign .hero-info-card {
  background: rgba(35, 35, 41, .92);
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] body.home-redesign .hero-info-card strong {
  color: var(--hr-purple);
}
html[data-theme="dark"] body.home-redesign .hero-info-card p,
html[data-theme="dark"] body.home-redesign .hero-info-card p small {
  color: var(--hr-ink);
}
html[data-theme="dark"] body.home-redesign .hero-info-card .text-link-light {
  color: var(--hr-pink);
}
html[data-theme="dark"] body.home-redesign .hero-info-card .text-link-light::after {
  background: var(--hr-pink);
}

/* Card is white glass in light mode, so text uses literal colours */
body.home-redesign .hero-info-card strong {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--hr-purple-lit); margin-bottom: .3rem; display: block;
}
body.home-redesign .hero-info-card p {
  font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--hr-ink-lit);
  margin: 0 0 .55rem;
}
body.home-redesign .hero-info-card p small {
  color: var(--hr-ink-lit);
}
body.home-redesign .hero-info-card .text-link-light {
  color: var(--hr-pink-lit);
}
body.home-redesign .hero-info-card .text-link-light::after {
  background: var(--hr-pink-lit);
}

/* Desktop: mockup's 7/5 hero split — copy left, glass cards stacked right */
@media (min-width: 961px) {
  body.home-redesign .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    justify-items: start;
  }
  body.home-redesign .hero-content > .hero-info-cards { justify-self: stretch; }
  body.home-redesign .hero-content > * { grid-column: 1; }
  body.home-redesign .hero-content > .hero-info-cards {
    grid-column: 2; grid-row: 1 / span 6;
    grid-template-columns: 1fr;
    align-self: center;
    max-width: none;
  }
  body.home-redesign .hero-content .hero-ctas { margin-bottom: 0; }
  body.home-redesign .hero-info-cards .hero-info-card:nth-child(2) {
    transform: translateX(2.6rem) rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
  }
  body.home-redesign .hero-info-cards .hero-info-card:nth-child(2):hover {
    transform: translateX(2.6rem) translateY(-4px);
  }
}

/* Animated scroll cue at the hero's foot */
body.home-redesign .hero-scrollcue {
  position: absolute; left: 50%; bottom: clamp(3.2rem, 6vw, 5rem);
  transform: translateX(-50%);
  color: rgba(255,255,255,.65);
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  z-index: 1; pointer-events: none;
}
body.home-redesign .hero-scrollcue::after {
  content: ""; width: 1.5px; height: 2.4rem;
  background: linear-gradient(to bottom, var(--hr-pink), transparent);
  animation: hr-cue-drop 2.2s var(--hr-ease-out) infinite;
}
@keyframes hr-cue-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 960px) {
  body.home-redesign .hero-scrollcue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-redesign .hero-scrollcue::after { animation: none; }
}

/* Hero divider: a single "(" arc (one clean sweep, apex centred
   under the first-time card) — the old S-wave crossed the card's
   torn top twice and read as a collision */
body.home-redesign .hero-curve {
  position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2;
  pointer-events: none;
}
body.home-redesign .hero-curve svg {
  /* short enough that the whole arc sits below the first-time card's
     top edge (card overlaps the hero by ~4.5rem) — the sweep hides
     behind the card instead of arching above it */
  width: 100%; height: clamp(1.8rem, 4.5vw, 3.2rem); display: block;
}
body.home-redesign .hero-curve svg .tear-main {
  fill: var(--hr-bg);
}

/* ============================================================
   2 · FIRST TIME / NEW HERE CTA (pulls up over the hero curve)
   ============================================================ */
body.home-redesign .new-here-cta {
  position: relative; z-index: 5;
  margin-top: clamp(-4.5rem, -5vw, -2.5rem);
  padding: 0 0 var(--hr-space-section);
  background: transparent;
}
body.home-redesign .cta-card {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 0;
  background: var(--hr-surface);
  border-radius: var(--hr-r-lg);
  overflow: hidden;
  box-shadow: var(--hr-shadow-lg);
  padding: 0;
  color: var(--hr-ink);
}
body.home-redesign .cta-content {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
body.home-redesign .cta-content .eyebrow {
  margin-bottom: .9rem;
}
body.home-redesign .cta-content h2 {
  font-size: var(--hr-fs-h2); font-weight: 900; letter-spacing: var(--hr-track-tight);
  line-height: 1.1; margin: 0 0 1rem;
}
body.home-redesign .cta-content p {
  color: var(--hr-muted); max-width: 32rem; opacity: 1;
}
body.home-redesign .cta-content strong {
  color: var(--hr-ink);
}
body.home-redesign .cta-image {
  position: relative; min-height: 320px;
}
body.home-redesign .cta-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; box-shadow: none;
}
body.home-redesign .cta-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(75,38,121,.4));
}
@media (max-width: 820px) {
  body.home-redesign .cta-card { grid-template-columns: 1fr; }
  body.home-redesign .cta-image { min-height: 240px; order: -1; }
}

/* ============================================================
   3 · FEATURED SERMON
   ============================================================ */
body.home-redesign .sermon-feature {
  padding: var(--hr-space-section) 0;
  background: var(--hr-bg);
}
body.home-redesign .sermon-feature .section-heading {
  text-align: left; margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: none;
}
body.home-redesign .sermon-feature .container {
  max-width: 1200px;
}
body.home-redesign .video-player-wrapper {
  border-radius: var(--hr-r-md);
  box-shadow: var(--hr-shadow-lg);
  max-width: 900px;
  margin: 0 0 2rem; /* left-aligned with the heading, not centred */
}
/* Desktop: mockup's 7/5 sermon grid — video left, title/meta/CTAs right */
@media (min-width: 921px) {
  body.home-redesign .sermon-feature .container {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  body.home-redesign .sermon-feature .section-heading {
    grid-column: 1 / -1; grid-row: 1;
  }
  body.home-redesign .sermon-feature .video-player-wrapper {
    grid-column: 1; grid-row: 2 / span 2;
    margin: 0; max-width: none;
  }
  body.home-redesign .sermon-feature .sermon-info {
    grid-column: 2; grid-row: 2;
    align-self: end; margin: 0;
  }
  body.home-redesign .sermon-feature .hero-ctas {
    grid-column: 2; grid-row: 3;
    align-self: start;
  }
}
body.home-redesign .youtube-facade,
body.home-redesign .video-player-wrapper iframe {
  border-radius: var(--hr-r-md);
}
body.home-redesign .youtube-facade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,26,43,.05) 40%, rgba(30,26,43,.5));
  border-radius: inherit;
}
body.home-redesign .youtube-play-btn svg path[fill="red"] {
  fill: var(--hr-pink);
}
body.home-redesign .sermon-info {
  text-align: left; max-width: none; margin: 1.6rem 0 0;
}
body.home-redesign .sermon-info h3 {
  font-size: 1.25rem; font-weight: 700; color: var(--hr-purple); margin: 0 0 .5rem;
}
body.home-redesign .sermon-meta {
  font-size: .875rem; font-weight: 600; color: var(--hr-muted);
  text-transform: none; letter-spacing: normal;
}
body.home-redesign .sermon-feature .hero-ctas {
  justify-content: flex-start !important;
  margin-top: 1.6rem;
}

/* ============================================================
   4 · THIS WEEKEND (tinted band)
   ============================================================ */
body.home-redesign .weekend-preview {
  background: linear-gradient(180deg, var(--hr-tint-purple), var(--hr-bg) 90%);
  padding: var(--hr-space-section) 0;
}
body.home-redesign .weekend-grid {
  gap: 1.4rem;
}
body.home-redesign .weekend-card {
  background: var(--hr-surface); border-radius: var(--hr-r-md);
  padding: 1.8rem; box-shadow: var(--hr-shadow-sm);
  border: 1px solid transparent;
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              box-shadow var(--hr-t-fast) var(--hr-ease-out),
              border-color var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .weekend-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hr-shadow-md);
  border-color: rgba(235,0,139,.25);
}
body.home-redesign .weekend-card .event-time {
  background: var(--hr-tint-pink); color: var(--hr-pink);
  font-weight: 700; letter-spacing: .04em;
}
body.home-redesign .weekend-card h3 {
  font-size: 1.12rem; font-weight: 700;
}
body.home-redesign .weekend-card p {
  color: var(--hr-muted);
}
body.home-redesign .center-link {
  margin-top: clamp(2.2rem, 4vw, 3rem);
}

/* ============================================================
   5 · ABOUT + STATS + SIDE CARD
   ============================================================ */
body.home-redesign .about {
  padding: var(--hr-space-section) 0;
  background: var(--hr-bg);
}
body.home-redesign .about .split {
  grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
body.home-redesign .about h2 {
  font-size: var(--hr-fs-h2); font-weight: 900; letter-spacing: var(--hr-track-tight);
  line-height: 1.1; margin: 0 0 1.1rem; color: var(--hr-ink);
}
body.home-redesign .about .split > div:first-child > div[data-cms-editable="about_text"] p {
  font-size: var(--hr-fs-lead); color: var(--hr-muted); font-weight: 500;
  max-width: 36rem; line-height: 1.6;
}
body.home-redesign .stats-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin: 2rem 0 2.2rem;
}
body.home-redesign .stats-grid > div {
  background: var(--hr-surface); border-radius: var(--hr-r-md);
  padding: 1.5rem 1.2rem; box-shadow: var(--hr-shadow-sm);
  position: relative; overflow: hidden;
  transition: transform var(--hr-t-fast) var(--hr-ease-out), box-shadow var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .stats-grid > div:hover {
  transform: translateY(-4px); box-shadow: var(--hr-shadow-md);
}
body.home-redesign .stats-grid > div::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--hr-grad-brand);
}
body.home-redesign .stat {
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 900;
  letter-spacing: var(--hr-track-tight); line-height: 1.05;
  background: var(--hr-grad-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--hr-pink);
}
body.home-redesign .stat-label {
  font-size: .8rem; font-weight: 600; color: var(--hr-muted);
  letter-spacing: .04em; margin-top: .3rem;
}
body.home-redesign .content-image {
  border-radius: var(--hr-r-md); overflow: hidden; box-shadow: var(--hr-shadow-md);
  aspect-ratio: 16 / 9; width: 100%; object-fit: cover;
  transition: transform var(--hr-t-slow) var(--hr-ease-out);
}
body.home-redesign .about .content-image:hover {
  transform: scale(1.02);
}
body.home-redesign .about .card {
  position: sticky; top: 110px;
  background: var(--hr-grad-dark); color: #fff;
  border-radius: var(--hr-r-lg); padding: clamp(2rem, 3vw, 2.6rem);
  overflow: hidden; isolation: isolate;
  box-shadow: var(--hr-shadow-lg);
}
body.home-redesign .about .card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(28rem 20rem at 110% -10%, rgba(235,0,139,.35), transparent 60%),
              radial-gradient(22rem 16rem at -10% 110%, rgba(18,91,154,.3), transparent 60%);
}
body.home-redesign .about .card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain); opacity: .06; mix-blend-mode: overlay;
}
body.home-redesign .about .card .eyebrow.light {
  color: var(--hr-pink-soft) !important;
}
body.home-redesign .about .card .eyebrow.light::before {
  background: var(--hr-pink-soft);
}
body.home-redesign .about .card h3 {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
  margin: 0 0 .9rem;
}
body.home-redesign .about .card p {
  color: var(--hr-muted-dark); font-size: .95rem; margin: 0 0 1.7rem;
}
@media (max-width: 920px) {
  body.home-redesign .about .split { grid-template-columns: 1fr; }
  body.home-redesign .about .card { position: static; }
  body.home-redesign .stats-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* ============================================================
   6 · MINISTRIES — swap the flat blue/purple gradient band for
   the mockup's light card-grid treatment with an angled top edge
   ============================================================ */
body.home-redesign .ministries {
  background: var(--hr-surface); color: var(--hr-ink);
  position: relative;
  padding: var(--hr-space-section) 0;
}
body.home-redesign .ministries::before {
  content: "";
  position: absolute; top: calc(-1 * clamp(2rem, 5vw, 3.5rem)); left: 0; right: 0;
  height: clamp(2rem, 5vw, 3.5rem);
  background: var(--hr-surface);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}
body.home-redesign .ministries .section-heading h2,
body.home-redesign .ministries .section-heading p {
  color: var(--hr-ink);
}
body.home-redesign .ministries .eyebrow {
  color: var(--hr-pink);
}
body.home-redesign .ministries .eyebrow::before {
  background: var(--hr-pink);
}
body.home-redesign .ministries .card-grid {
  gap: 1.4rem;
}
body.home-redesign .ministries .ministry-card {
  position: relative;
  background: var(--hr-bg); color: var(--hr-ink);
  border: none; border-radius: var(--hr-r-md);
  padding: 1.9rem 1.8rem; overflow: hidden;
  box-shadow: none;
  transition: transform var(--hr-t-fast) var(--hr-ease-out), box-shadow var(--hr-t-fast) var(--hr-ease-out), background-color var(--hr-t-fast);
}
body.home-redesign .ministries .ministry-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--hr-grad-brand); transform: scaleY(0); transform-origin: top;
  transition: transform var(--hr-t-med) var(--hr-ease-out);
}
body.home-redesign .ministries .ministry-card:hover {
  transform: translateY(-6px); box-shadow: var(--hr-shadow-md); background: var(--hr-surface);
}
body.home-redesign .ministries .ministry-card:hover::before {
  transform: scaleY(1);
}
body.home-redesign .ministries .ministry-card h3 {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem;
}
body.home-redesign .ministries .ministry-card p {
  font-size: .9rem; color: var(--hr-muted); margin: 0;
}

/* ============================================================
   7 · WATCH & LISTEN (dark cinema band)
   ============================================================ */
body.home-redesign .watch {
  background: var(--hr-grad-dark); color: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--hr-space-section) 0;
}
body.home-redesign .watch::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60rem 30rem at 85% 0%, rgba(235,0,139,.22), transparent 60%),
              radial-gradient(40rem 26rem at 0% 100%, rgba(18,91,154,.25), transparent 60%);
}
body.home-redesign .watch::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain); opacity: .05; mix-blend-mode: overlay;
}
body.home-redesign .sermon-grid-home {
  gap: 1.4rem;
}
/* Kill the base white card body — on the dark cinema band the thumb
   floats and the white text sits straight on the gradient */
body.home-redesign .sermon-card-netflix {
  display: block;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
body.home-redesign .sermon-card-netflix:hover {
  transform: none;
  box-shadow: none;
}
body.home-redesign .sermon-card-netflix .card-info {
  padding: 0;
  background: transparent;
}
body.home-redesign .sermon-card-netflix .card-thumb {
  border-radius: var(--hr-r-md); overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  transition: transform var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .sermon-card-netflix:hover .card-thumb img {
  transform: scale(1.06);
}
body.home-redesign .sermon-card-netflix .card-thumb img {
  transition: transform var(--hr-t-slow) var(--hr-ease-out);
}
body.home-redesign .sermon-card-netflix .card-info h3 {
  font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #fff;
  margin: .9rem 0 .3rem;
}
body.home-redesign .sermon-card-netflix .meta {
  font-size: .82rem; color: var(--hr-muted-dark); font-weight: 500;
}
body.home-redesign .sermon-card-netflix .series-tag {
  display: inline-block; margin-top: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hr-pink-soft); border: 1px solid rgba(235,0,139,.5);
  padding: .28rem .7rem; border-radius: var(--hr-r-pill);
}
body.home-redesign .watch .play-btn {
  background: rgba(235,0,139,.92);
}
body.home-redesign .watch .hero-ctas {
  justify-content: flex-start !important;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   8 · EVENTS
   ============================================================ */
body.home-redesign .events {
  padding: var(--hr-space-section) 0;
  background: var(--hr-bg);
}
body.home-redesign .events .card-grid {
  gap: 1.4rem;
}
body.home-redesign .events .event-card {
  background: var(--hr-surface); border: 1px solid transparent; border-radius: var(--hr-r-md);
  padding: 1.8rem; box-shadow: var(--hr-shadow-sm);
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              box-shadow var(--hr-t-fast) var(--hr-ease-out),
              border-color var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .events .event-card:hover {
  transform: translateY(-6px); box-shadow: var(--hr-shadow-md);
  border-color: rgba(235,0,139,.25);
}
body.home-redesign .events .event-date {
  display: inline-flex; align-self: flex-start;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hr-pink); background: var(--hr-tint-pink);
  padding: .35rem .85rem; border-radius: var(--hr-r-pill);
  margin: 0 0 .8rem;
}
body.home-redesign .events .event-card h3 {
  font-size: 1.12rem; font-weight: 700; margin: 0 0 .5rem;
}
body.home-redesign .events .event-card p {
  font-size: .92rem; color: var(--hr-muted);
}

/* ============================================================
   9 · NEXT STEPS
   ============================================================ */
body.home-redesign .next-steps {
  background: linear-gradient(180deg, var(--hr-bg), var(--hr-tint-pink) 130%);
  padding: var(--hr-space-section) 0;
}
body.home-redesign .next-steps .card-grid {
  gap: 1.4rem; counter-reset: hr-step;
}
body.home-redesign .next-steps .step-card {
  counter-increment: hr-step; position: relative;
  background: var(--hr-surface); border: none; border-radius: var(--hr-r-md);
  padding: 2.4rem 1.8rem 1.8rem; box-shadow: var(--hr-shadow-sm);
  overflow: hidden;
  transition: transform var(--hr-t-fast) var(--hr-ease-out), box-shadow var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .next-steps .step-card:hover {
  transform: translateY(-6px); box-shadow: var(--hr-shadow-md);
}
body.home-redesign .next-steps .step-card::before {
  content: "0" counter(hr-step);
  position: absolute; top: -.6rem; right: .6rem;
  font-size: 4.4rem; font-weight: 900; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(235,0,139,.22);
  transition: color var(--hr-t-med) var(--hr-ease-out);
  pointer-events: none;
}
body.home-redesign .next-steps .step-card:hover::before {
  color: rgba(235,0,139,.08);
}
body.home-redesign .next-steps .step-card h3 {
  font-size: 1.12rem; font-weight: 700; margin: 0 0 .4rem;
}
body.home-redesign .next-steps .step-card p {
  font-size: .9rem; color: var(--hr-muted);
}

/* ============================================================
   10 · PHOTO GALLERY
   ============================================================ */
body.home-redesign .photo-gallery {
  padding: var(--hr-space-section) 0;
  background: var(--hr-surface);
}
body.home-redesign .photo-gallery .section-heading {
  text-align: center;
}
body.home-redesign .photo-gallery .section-heading .eyebrow {
  justify-content: center;
}
body.home-redesign .gallery-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 16vw, 220px);
}
body.home-redesign .gallery-grid img.gallery-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--hr-r-sm);
  box-shadow: none;
  transition: transform var(--hr-t-slow) var(--hr-ease-out);
}
body.home-redesign .gallery-grid img.gallery-img:hover {
  transform: scale(1.06);
}
body.home-redesign .gallery-grid > img:nth-child(1) {
  grid-column: span 2; grid-row: span 2;
}
body.home-redesign .gallery-grid > img:nth-child(4) {
  grid-column: span 2;
}
@media (max-width: 680px) {
  body.home-redesign .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  body.home-redesign .gallery-grid > img:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  body.home-redesign .gallery-grid > img:nth-child(4) { grid-column: span 2; }
}

/* ============================================================
   11 · HEADER — transparent over hero, frosted glass on scroll.
   Applies in CMS edit mode too (offset below the 50px toolbar).
   .hr-scrolled is toggled by home-redesign.js.
   ============================================================ */
body.home-redesign .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
}
/* Logged-in editing: drop the fixed header below the 50px CMS toolbar */
body.home-redesign.cms-edit-mode .site-header {
  top: 50px;
}
body.home-redesign .site-header {
  transition: background-color var(--hr-t-med) var(--hr-ease-out),
              box-shadow var(--hr-t-med) var(--hr-ease-out),
              border-color var(--hr-t-med) var(--hr-ease-out);
}
/* Over the dark hero: white logo + white nav links */
body.home-redesign .site-header:not(.hr-scrolled) .logo-light { display: none; }
body.home-redesign .site-header:not(.hr-scrolled) .logo-dark { display: block; }
body.home-redesign .site-header:not(.hr-scrolled) .primary-nav a:not(.nav-link--cta),
body.home-redesign .site-header:not(.hr-scrolled) .nav-dropdown-trigger {
  color: #fff;
}
/* The white-links rule above must not bleed into the dropdown panel
   (white on white) — restore theme text colour there */
body.home-redesign .site-header:not(.hr-scrolled) .primary-nav .nav-dropdown-menu a {
  color: var(--color-text, #1e1a2b);
}
body.home-redesign .site-header:not(.hr-scrolled) .nav-link--ghost {
  border-color: rgba(255, 255, 255, .55); color: #fff;
}
body.home-redesign .site-header:not(.hr-scrolled) .nav-toggle-label {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
}
body.home-redesign .site-header:not(.hr-scrolled) .nav-toggle-label span,
body.home-redesign .site-header:not(.hr-scrolled) .nav-toggle-label span::before,
body.home-redesign .site-header:not(.hr-scrolled) .nav-toggle-label span::after {
  background: #fff;
}
/* Scrolled: white glass. Blur lives on ::before (backdrop-filter on
   the header itself would trap the fixed mobile nav in its box). */
body.home-redesign .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity var(--hr-t-med) var(--hr-ease-out);
  pointer-events: none;
}
body.home-redesign .site-header.hr-scrolled::before {
  opacity: 1;
}
body.home-redesign .site-header.hr-scrolled {
  box-shadow: 0 1px 0 var(--hr-line), 0 8px 24px -12px rgba(30, 26, 43, .12);
}
html[data-theme="dark"] body.home-redesign .site-header::before {
  background: rgba(22, 17, 34, .85);
}

/* ============================================================
   12 · SCRIPT ACCENTS (Yellowtail flourishes)
   ============================================================ */
body.home-redesign .script {
  font-family: var(--hr-script-font, 'Yellowtail', cursive); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  display: inline-block; transform: rotate(-2deg);
}
body.home-redesign .cta-content .script {
  display: block; align-self: flex-start;
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem);
  color: var(--hr-pink);
  margin-bottom: .3rem;
}
/* Side card: existing "New here?" eyebrow becomes a script flourish */
body.home-redesign .about .card .eyebrow.light {
  font-family: var(--hr-script-font, 'Yellowtail', cursive); font-weight: 400;
  font-size: 2.3rem; letter-spacing: 0; text-transform: none;
  transform: rotate(-2deg); margin-bottom: .6rem;
}
body.home-redesign .about .card .eyebrow.light::before { display: none; }

/* ============================================================
   13 · NEWSLETTER — brand-gradient band overlapping the footer
   ============================================================ */
body.home-redesign .newsletter-section {
  background: transparent; padding: 0;
  position: relative; z-index: 5;
  transform: translateY(clamp(2.5rem, 5vw, 4rem));
  margin-top: calc(-1 * clamp(1rem, 2vw, 2rem));
}
body.home-redesign .newsletter-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hr-grad-brand); color: #fff;
  border-radius: var(--hr-r-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--hr-shadow-lg);
}
body.home-redesign .newsletter-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(30rem 18rem at 90% 120%, rgba(255, 255, 255, .16), transparent 60%);
}
body.home-redesign .newsletter-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain); opacity: .07; mix-blend-mode: overlay;
}
body.home-redesign .newsletter-card h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.12;
  margin: .3rem 0 .6rem;
}
body.home-redesign .newsletter-card h3::before {
  content: "stay connected";
  display: block;
  font-family: var(--hr-script-font, 'Yellowtail', cursive); font-weight: 400;
  font-size: 2.2rem; letter-spacing: 0;
  transform: rotate(-2deg); transform-origin: left bottom;
  opacity: .95; margin-bottom: .2rem;
}
body.home-redesign .newsletter-card p {
  color: rgba(255, 255, 255, .85); font-size: .95rem;
}
body.home-redesign .newsletter-card .newsletter-message {
  grid-column: 1 / -1;
}
/* Email capture capsule (kept in sync with design-system.css) */
body.home-redesign .newsletter-form {
  background: #fff;
  border-radius: var(--hr-r-pill);
  position: relative;
  padding: .3rem 64px .3rem .3rem; /* right gutter = send circle */
  min-height: 60px;
  gap: .3rem;
  align-items: center;
  flex-wrap: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35);
  transition: box-shadow var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .newsletter-form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 14px 30px -12px rgba(0, 0, 0, .35);
}
body.home-redesign .newsletter-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  color: var(--hr-ink-lit); font-weight: 600;
  padding: 1.05rem 1.4rem;
}
body.home-redesign .newsletter-input::placeholder { color: rgba(30, 26, 43, .45); }
body.home-redesign .newsletter-input:focus,
body.home-redesign .newsletter-input:focus-visible {
  outline: none; border: none; background: transparent;
}
body.home-redesign .newsletter-form .btn-primary {
  position: absolute; top: 0; right: 0; bottom: 0;
  height: 100%; aspect-ratio: 1; width: auto;
  padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
body.home-redesign .newsletter-form .btn-primary:hover { transform: none; }
@media (max-width: 480px) {
  body.home-redesign .newsletter-form { border-radius: 22px; flex-wrap: wrap; padding: .3rem; }
  body.home-redesign .newsletter-form .btn-primary {
    position: static; aspect-ratio: auto;
    flex: 1 1 100%; width: 100%; height: 48px;
    border-radius: var(--hr-r-pill);
  }
}
@media (max-width: 820px) {
  body.home-redesign .newsletter-card { grid-template-columns: 1fr; }
}

/* ============================================================
   14 · FOOTER — dark gradient + glows; compensates for the
   newsletter band translated down over its top edge
   ============================================================ */
body.home-redesign .site-footer {
  background: var(--hr-grad-dark);
  position: relative; isolation: isolate; overflow: hidden;
}
body.home-redesign .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40rem 24rem at 100% 0%, rgba(75, 38, 121, .5), transparent 60%),
              radial-gradient(30rem 20rem at 0% 100%, rgba(235, 0, 139, .12), transparent 60%);
}
body.home-redesign .footer-main {
  padding-top: calc(4rem + clamp(2.5rem, 5vw, 4rem));
}
body.home-redesign .footer-heading {
  color: var(--hr-pink-soft);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
body.home-redesign .footer-links a {
  display: inline-block;
  transition: color var(--hr-t-fast), transform var(--hr-t-fast) var(--hr-ease-out);
}
body.home-redesign .footer-links a:hover {
  color: #fff; transform: translateX(4px);
}
body.home-redesign .social-icon {
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              background-color var(--hr-t-fast), color var(--hr-t-fast);
}
body.home-redesign .social-icon:hover {
  transform: translateY(-3px);
  background: var(--hr-pink); color: #fff;
}

/* ============================================================
   15 · GRUNGE PASS — heavy film grain + torn edges
   ============================================================ */
/* Full-page film grain (fixed overlay, above everything, non-interactive) */
body.home-redesign::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  background-image: var(--hr-grain);
  opacity: .14; mix-blend-mode: overlay; pointer-events: none;
}

/* ---- Torn card edges ----------------------------------------
   Same technique as the classic "ripped edge" CodePen (a tileable
   torn-paper strip repeated along the edge), but the strip is a
   generated SVG whose edge is roughed up by fractal-noise
   displacement — real fibre chaos, no hosted PNGs — and it's used
   as a MASK, so it works over any background and both themes.
   Cards masked this way swap box-shadow for drop-shadow filters,
   which follow the torn silhouette (box-shadow would be cut off). */
body.home-redesign {
  /* Full-card torn-paper masks: rect inset ~11px, all edges roughed
     by coarse + fine fractal-noise displacement, stretched per card
     (mask-size 100% 100%) so corners tear naturally. Five variants
     with different seeds/frequencies are dealt round-robin so no
     card's rip matches its neighbour's. */
  --hr-tear-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' seed='7' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='18' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' seed='3' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='11' y='11' width='578' height='378' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='13' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='17' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' seed='5' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='12' width='576' height='376' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='29' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='19' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' seed='11' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='580' height='380' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='47' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='16' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' seed='19' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='11' y='11' width='578' height='378' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0095' numOctaves='3' seed='61' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='18' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='23' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='11' width='576' height='378' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");

  /* "Physically placed" shadows. Real paper on a surface casts:
     (1) a sharp contact shadow hugging the torn edge, (2) a soft
     shadow offset diagonally (light from top-left), (3) faint wide
     ambient occlusion. All drop-shadow, so they trace the fibre
     silhouette exactly. */
  --hr-neo:
    drop-shadow(1px 2px 1.5px rgba(30, 26, 43, .25))
    drop-shadow(4px 7px 9px rgba(30, 26, 43, .16))
    drop-shadow(10px 16px 20px rgba(30, 26, 43, .09));
  --hr-neo-deep:
    drop-shadow(1px 2px 2px rgba(30, 26, 43, .28))
    drop-shadow(6px 10px 14px rgba(30, 26, 43, .2))
    drop-shadow(16px 26px 34px rgba(75, 38, 121, .22));
}
html[data-theme="dark"] body.home-redesign {
  --hr-neo:
    drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .65))
    drop-shadow(4px 7px 9px rgba(0, 0, 0, .45))
    drop-shadow(10px 16px 20px rgba(0, 0, 0, .3));
  --hr-neo-deep:
    drop-shadow(1px 2px 2px rgba(0, 0, 0, .7))
    drop-shadow(6px 10px 14px rgba(0, 0, 0, .5))
    drop-shadow(16px 26px 34px rgba(0, 0, 0, .35));
}

/* Torn edges on ALL four sides + neo shadows on the boxes and cards.
   Mask = solid centre block + four torn strips; each strip's alpha
   eats its card edge organically. Corners are eaten by both strips,
   which reads as natural corner fibre. Paper scraps aren't rounded,
   so radius comes off. */
body.home-redesign .cta-card,
body.home-redesign .hero-info-card,
body.home-redesign .weekend-card,
body.home-redesign .events .event-card,
body.home-redesign .next-steps .step-card,
body.home-redesign .ministries .ministry-card,
body.home-redesign .about .card,
body.home-redesign .newsletter-card {
  border-radius: 0;
  -webkit-mask-image: var(--hr-tear, var(--hr-tear-1));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--hr-tear, var(--hr-tear-1));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  box-shadow: none;
}
/* Clearance so text never kisses the fibre */
body.home-redesign .weekend-card,
body.home-redesign .events .event-card,
body.home-redesign .ministries .ministry-card {
  padding: calc(1.8rem + 8px);
}
body.home-redesign .next-steps .step-card {
  padding: calc(2.4rem + 6px) calc(1.8rem + 8px) calc(1.8rem + 8px);
}
body.home-redesign .hero-info-card {
  padding: calc(1.4rem + 9px) calc(1.5rem + 9px);
}

/* IMPORTANT: on the same element, filter runs BEFORE mask, so a
   masked card erases its own drop-shadow. The shadows therefore sit
   on the PARENT — its filter operates on the already-masked children
   and traces each torn silhouette. */
body.home-redesign .weekend-grid,
body.home-redesign .events .card-grid,
body.home-redesign .next-steps .card-grid,
body.home-redesign .ministries .card-grid {
  filter: var(--hr-neo);
}
body.home-redesign .hero-info-cards,
body.home-redesign .new-here-cta .container,
body.home-redesign .about .card-wrap,
body.home-redesign .newsletter-section .container {
  filter: var(--hr-neo-deep);
}
/* Hover: lift only — the drop-shadows ride along with the silhouette */
body.home-redesign .weekend-card:hover,
body.home-redesign .events .event-card:hover,
body.home-redesign .next-steps .step-card:hover,
body.home-redesign .ministries .ministry-card:hover,
body.home-redesign .hero-info-card:hover {
  box-shadow: none;
}

/* Stats tiles: soft neo extrusion, no tear (variety) */
body.home-redesign .stats-grid > div {
  box-shadow: none;
  filter: var(--hr-neo);
}
body.home-redesign .stats-grid > div:hover { box-shadow: none; }

/* Newsletter band: shares the all-edge tear (shadow lives on its parent) */
body.home-redesign .newsletter-card {
  padding: calc(clamp(2.5rem, 5vw, 4.5rem) + 13px) calc(clamp(2.5rem, 5vw, 4.5rem) + 8px);
}

/* Heavy film grain on every gradient surface (hero has its own rule).
   Existing grain pseudos get the heavy tile; footer and the light
   tinted bands gain one. */
body.home-redesign .watch::after,
body.home-redesign .about .card::after,
body.home-redesign .newsletter-card::after {
  background-image: var(--hr-grain-heavy);
  background-size: 180px 180px;
  opacity: .55;
}
body.home-redesign .site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain-heavy);
  background-size: 180px 180px;
  opacity: .5; mix-blend-mode: overlay; pointer-events: none;
}
body.home-redesign .weekend-preview,
body.home-redesign .next-steps {
  position: relative; isolation: isolate;
}
body.home-redesign .weekend-preview::before,
body.home-redesign .next-steps::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain-heavy);
  background-size: 180px 180px;
  opacity: .32; mix-blend-mode: overlay; pointer-events: none;
}

/* Scatter system: every card gets a tear variant (5-cycle), a tiny
   tilt (7-cycle) and a tiny scale (5-cycle, offset). The cycle
   lengths are coprime, so neighbours never share a combination —
   pseudo-random without any JS. Hover transforms don't carry the
   tilt, so touching a card straightens it. */
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+2) { --hr-tear: var(--hr-tear-2); }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+3) { --hr-tear: var(--hr-tear-3); }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+4) { --hr-tear: var(--hr-tear-4); }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n)   { --hr-tear: var(--hr-tear-5); }

body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n+1) { --hr-tilt: -.9deg; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n+2) { --hr-tilt: .55deg; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n+3) { --hr-tilt: -.35deg; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n+4) { --hr-tilt: .8deg; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n+5) { --hr-tilt: -.6deg; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n+6) { --hr-tilt: .4deg; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(7n)   { --hr-tilt: -.75deg; }

body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+1) { --hr-scale: .988; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+2) { --hr-scale: 1.012; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+3) { --hr-scale: .995; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n+4) { --hr-scale: 1.006; }
body.home-redesign :is(.weekend-grid, .card-grid, .hero-info-cards, .stats-grid, .sermon-grid-home) > :nth-child(5n)   { --hr-scale: .982; }

/* Standalone cards: fixed values chosen to differ from neighbours */
body.home-redesign .cta-card        { --hr-tilt: -.4deg; --hr-tear: var(--hr-tear-2); --hr-scale: .997; }
body.home-redesign .about .card     { --hr-tilt: .8deg;  --hr-tear: var(--hr-tear-4); --hr-scale: .99; }
body.home-redesign .newsletter-card { --hr-tilt: -.5deg; --hr-tear: var(--hr-tear-5); --hr-scale: 1.004; }

/* Base scatter for elements the reveal script doesn't tag */
body.home-redesign .newsletter-card:not([data-hr-reveal]),
body.home-redesign .cta-card:not([data-hr-reveal]),
body.home-redesign .hero-info-card:not([data-hr-reveal]),
body.home-redesign .weekend-card:not([data-hr-reveal]),
body.home-redesign .events .event-card:not([data-hr-reveal]),
body.home-redesign .next-steps .step-card:not([data-hr-reveal]),
body.home-redesign .ministries .ministry-card:not([data-hr-reveal]),
body.home-redesign .about .card:not([data-hr-reveal]) {
  transform: rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
}

/* Gallery: loose scrapbook tilt, straightens on hover */
body.home-redesign .gallery-grid img.gallery-img {
  transition: transform var(--hr-t-med) var(--hr-ease-out);
}
body.home-redesign .gallery-grid > img:nth-child(odd)  { transform: rotate(-.7deg); }
body.home-redesign .gallery-grid > img:nth-child(even) { transform: rotate(.6deg); }
body.home-redesign .gallery-grid > img:nth-child(3n)   { transform: rotate(-1.1deg); }
body.home-redesign .gallery-grid img.gallery-img:hover { transform: rotate(0deg) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  body.home-redesign .gallery-grid img.gallery-img { transform: none; }
}

/* ============================================================
   Hero drift-in + responsive tune-ups
   ============================================================ */
@keyframes hr-hero-drift {
  from { transform: scale(1.12); }
  to   { transform: scale(1.05); }
}
body.home-redesign .hero::after {
  animation: hr-hero-drift 20s var(--hr-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  body.home-redesign .hero::after { animation: none; }
}
@media (max-width: 960px) {
  body.home-redesign .hero { padding-bottom: 7rem; }

  /* Mobile: the stacked info cards make the hero ~3x viewport height,
     so `cover` would show a savage centre-crop sliver of the portrait
     photo. Instead show the whole image as a top band at natural
     aspect (bottom edge included), fading into the section's ink that
     the rest of the content sits on. 112.6vw = the photo's aspect
     (1600/1421); a CMS image with a different aspect only shifts
     where the fade lands, over dark ink either way. */
  body.home-redesign .hero::after {
    background:
      radial-gradient(56rem 34rem at 12% 110%, rgba(235, 0, 139, .42), transparent 62%),
      radial-gradient(48rem 30rem at 92% -8%, rgba(18, 91, 154, .38), transparent 60%),
      linear-gradient(180deg, rgba(30, 26, 43, 0) 55%, #1e1a2b 97%) center top / 100% 113vw no-repeat,
      linear-gradient(102deg, rgba(30, 26, 43, .94) 6%, rgba(53, 25, 90, .8) 44%, rgba(30, 26, 43, .4) 100%) center top / 100% 113vw no-repeat,
      var(--hero-bg-image, url('/assets/imgs/gallery/alive-church-worship-neon-cross.jpg')) center top / 100% auto no-repeat;
    background-color: transparent;
    /* the drift zoom would push the image band out of register with
       the fade layer, so pin it on mobile */
    transform: none;
    animation: none;
  }
}