*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-v16-latin-400.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/caveat-v23-latin-600.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/caveat-v23-latin-700.ttf') format('truetype');
  }
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/dm-sans-v17-latin-300.ttf') format('truetype');
  }
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-v17-latin-400.ttf') format('truetype');
  }
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-v17-latin-500.ttf') format('truetype');
  }
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/dm-sans-v17-latin-600.ttf') format('truetype');
  }

  :root {
    --dark-blue:  #252945;
    --light-blue: #25609f;
    --gold:       #f1b224;
    --yellow:     #ffdd75;
    --cream:      #FAF7F0;
    --cream-dark: #F0EBE1;
    --white:      #FFFFFF;
    --muted:      #6b7a99;
    --text-dark:  #1a1d30;
  }

  html { scroll-behavior: smooth; }

  /* The fixed nav is wider than a phone viewport; clip (not hidden) so it
     never creates a sideways scroll, while keeping position: sticky working. */
  html, body { overflow-x: clip; }

  /* Added by main.js (to <html>, not <body> — the overflow-x: clip above
     already gives html its own explicit overflow, which blocks the usual
     body-to-viewport overflow propagation, so locking body alone wouldn't
     do anything here) while the mobile menu is open, so the page behind it
     can't scroll at all — otherwise a drag inside the open menu can end up
     scrolling the page underneath instead of the menu's own ministry list. */
  html.nav-open { overflow-y: hidden; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--text-dark);
    line-height: 1.6;
  }

  /* ─── NAV ─────────────────────────────────────────── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 48px;
    height: 90px;
    background: var(--white);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  }

  .nav-logo-img {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-center {
    display: flex;
    gap: 4px;
    list-style: none;
    align-items: center;
  }

  .nav-center > li { position: relative; }

  .nav-center a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .nav-center a:hover { background: #eef1f8; color: var(--dark-blue); }

  .nav-center .chevron { font-size: 0.6rem; opacity: 0.45; }

  /* > rather than a bare descendant combinator, so this only reveals a
     dropdown's own direct li, not a nested flyout two levels down (see
     .dropdown-sub below) whenever the mouse is anywhere over the parent li. */
  .nav-center > li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }

  .dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* Keep the menu visible for a moment after the cursor leaves so it can be
       moved into and clicked (hide is delayed ~0.45s). */
    transition: opacity 0.2s ease 0.25s, transform 0.2s ease 0.25s, visibility 0s linear 0.45s;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(37,41,69,0.13);
    min-width: 170px;
    /* top padding doubles as an invisible bridge over the old gap */
    padding: 10px 0 6px;
    z-index: 200;
  }

  .dropdown a {
    display: block;
    padding: 9px 18px;
    border-radius: 0;
    font-size: 0.97rem;
    color: var(--text-dark);
  }

  .dropdown a:hover { background: #eef1f8; color: var(--dark-blue); }

  /* "Our Ministries" flyout nested inside the After Sunday dropdown — same
     hover-reveal idea as the dropdowns above, but it opens out to the side
     since it's already one level in. .dropdown-flyout shares the base
     .dropdown look (background, border, shadow, padding) and only overrides
     position and the slide direction. */
  .dropdown-sub { position: relative; }

  .dropdown-sub-toggle { justify-content: space-between; }

  .chevron--sub { font-size: 0.55rem; opacity: 0.45; }

  .dropdown-sub:hover > .dropdown-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }

  .dropdown-flyout {
    top: -10px;
    left: 100%;
    transform: translateX(-6px);
  }

  .nav-cta {
    background: var(--dark-blue) !important;
    color: var(--white) !important;
    padding: 14px 28px !important;
    border-radius: 4px;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.1em !important;
  }

  .nav-cta:hover { background: var(--light-blue) !important; }

  /* Mobile menu toggle (hamburger). Hidden above the 900px nav
     breakpoint; shown and wired up there below. */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark-blue);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ─── HERO ────────────────────────────────────────── */
  .hero {
    min-height: 100vh;
    background: var(--dark-blue);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 90px;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center 30%;
    filter: grayscale(100%);
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(37,41,69,0.87) 36%, rgba(37,41,69,0.32) 100%);
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 80px 72px;
  }

  .hero-script {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
    margin-bottom: -4px;
    display: block;
  }

  .hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 0.92;
    color: var(--white);
    letter-spacing: 0.02em;
    margin-bottom: 28px;
  }

  .hero-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255,255,255,0.72);
    margin-bottom: 42px;
    line-height: 1.75;
    max-width: 390px;
  }

  .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

  .btn-primary {
    background: var(--gold);
    color: var(--dark-blue);
    padding: 14px 34px;
    border: none;
    border-radius: 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: inline-block;
  }

  .btn-primary:hover { background: var(--yellow); transform: translateY(-1px); }

  .btn-outline {
    background: transparent;
    color: var(--white);
    padding: 13px 34px;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: inline-block;
  }

  .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

  /* ─── PAGE HEADER (Visit / Sermons / Events) ─────────── */
  .page-header {
    position: relative;
    background: var(--dark-blue);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 210px 48px 80px;
    min-height: 460px;
    box-sizing: border-box;
  }

  .page-header-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center 25%;
    filter: grayscale(100%);
  }

  .page-header-bg--visit {
    background-image: url('../images/visit-header.jpg');
    background-position: center 60%;
  }

  .page-header-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(37,41,69,0.92) 45%, rgba(37,41,69,0.55) 100%);
  }

  .page-header-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }

  .page-header-text { max-width: 680px; }

  .page-header-script {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
    margin-bottom: -4px;
    display: block;
  }

  .page-header-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.4rem, 7.5vw, 6rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--white);
    margin-bottom: 20px;
  }

  .page-header-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.75;
    max-width: 500px;
  }

  .hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.3);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollpulse 2s ease-in-out infinite;
  }

  @keyframes scrollpulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
  }

  /* ─── SHARED SECTION TOKENS ───────────────────────── */
  section { scroll-margin-top: 90px; }

  .section-label {
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    display: block;
    margin-bottom: 8px;
    line-height: 1;
  }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
    margin-bottom: 20px;
  }

  .section-body {
    font-size: 1rem;
    line-height: 1.75;
    max-width: 580px;
  }

  /* ─── ABOUT ───────────────────────────────────────── */
  #about {
    padding: 100px 48px;
    background: var(--cream);
  }

  .about-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
  }

  /* Collage layout */
  .about-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }

  .collage-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .collage-right {
    margin-top: 72px;
  }

  .collage-photo {
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    background: #c8cfe0;
    position: relative;
  }

  .collage-left .collage-photo {
    height: 220px;
  }

  .collage-right .collage-photo {
    height: 514px;
  }

  .collage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .collage-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c8cfe0 0%, #a8b4cc 100%);
    color: rgba(37,41,69,0.35);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
  }

  #about .section-title { color: var(--dark-blue); font-size: clamp(2rem, 3.6vw, 2.9rem); }
  #about .section-body  { color: #5a6070; }

  .about-quote {
    font-family: 'Caveat', cursive;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--light-blue);
    margin-top: 28px;
    padding-left: 20px;
    border-left: 3px solid var(--gold);
    line-height: 1.5;
  }

  .values-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }

  .value-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(37,41,69,0.1);
  }

  .value-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .value-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--dark-blue);
    display: block;
  }

  .value-text { font-size: 0.95rem; color: #5a6070; line-height: 1.7; }

  /* ─── VISIT ───────────────────────────────────────── */
  #visit {
    padding: 100px 48px;
    background: var(--cream);
  }

  .visit-inner { max-width: 1100px; margin: 0 auto; }

  .visit-features {
    display: flex;
    flex-direction: column;
    gap: 96px;
  }

  .visit-feature {
    display: flex;
    align-items: center;
    gap: 64px;
  }

  .visit-feature:nth-child(even) { flex-direction: row-reverse; }

  .visit-feature-photo {
    flex: 1;
    min-width: 0;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: #c8cfe0;
  }

  .visit-feature-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .visit-feature-text { flex: 1; min-width: 0; }

  /* Location row: pull the text block toward the photo instead of stretching full-width */
  .visit-feature:nth-child(2) .visit-feature-text {
    flex: none;
    width: 440px;
    max-width: 100%;
    margin-left: auto;
  }

  .visit-feature-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
    color: var(--dark-blue);
    margin: 4px 0 18px;
  }

  .visit-feature-text p {
    font-size: 1rem;
    color: #5a6070;
    line-height: 1.8;
    max-width: 440px;
    margin-bottom: 22px;
  }

  .visit-feature-text strong { color: var(--dark-blue); font-weight: 600; }

  /* ─── MINISTRIES ──────────────────────────────────── */
  #ministries {
    padding: 100px 48px;
    background: var(--cream);
  }

  .ministries-inner { max-width: 1100px; margin: 0 auto; }

  #ministries .section-title { color: var(--dark-blue); }
  #ministries .section-body  { color: #5a6070; margin-bottom: 48px; }

  .ministry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .ministry-card {
    position: relative;
    height: 260px;
    border-radius: 6px;
    overflow: hidden;
    background: #c8cfe0;
    box-shadow: 0 2px 20px rgba(37,41,69,0.08);
  }

  .ministry-card-wide { grid-column: span 2; }

  .ministries-cta { margin-top: 36px; text-align: center; }

  /* Wide cards crop hard vertically (they're ~2.8:1 against a 1.5:1 photo), which
     can cut off faces. This biases the crop upward so heads stay in frame. */
  .ministry-card--focus-top img { object-position: center 12%; }

  .ministry-card-link { display: block; text-decoration: none; }
  .ministry-card-link:hover h3 { color: var(--gold); }
  .ministry-card-link h3 { transition: color 0.2s; }
  .ministry-card-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

  .ministry-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .ministry-card:hover img { transform: scale(1.04); }

  .ministry-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,29,48,0.78) 0%, rgba(26,29,48,0.25) 45%, rgba(26,29,48,0) 70%);
    pointer-events: none;
  }

  .ministry-card h3 {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    z-index: 2;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(26,29,48,0.45);
  }

  /* ─── EVENTS ──────────────────────────────────────── */
  #events {
    padding: 100px 48px;
    background: #eef1f8;
  }

  .events-inner { max-width: 1100px; margin: 0 auto; }

  .events-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 20px;
  }

  #events .section-title { color: var(--dark-blue); }

  .event-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .event-card {
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(37,41,69,0.08);
  }

  .event-date-bar {
    background: var(--dark-blue);
    padding: 14px 24px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .event-month {
    font-family: 'Caveat', cursive;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--gold);
  }

  .event-day {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    color: var(--white);
    line-height: 1;
    letter-spacing: 0.03em;
  }

  .event-card-body { padding: 24px; }

  .event-tag {
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    font-weight: 700;
    color: var(--light-blue);
    margin-bottom: 6px;
    display: block;
  }

  .event-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.45rem;
    letter-spacing: 0.04em;
    color: var(--dark-blue);
    margin-bottom: 10px;
  }

  .event-card p {
    font-size: 0.88rem;
    color: #5a6070;
    line-height: 1.65;
    margin-bottom: 18px;
  }

  .event-meta { font-size: 0.8rem; color: var(--muted); }
  .event-meta + .event-meta { margin-top: 5px; }

  /* Card title links + Register CTA (auto-synced events) */
  .event-card h3 a {
    color: inherit;
    text-decoration: none;
  }

  .event-card h3 a:hover { color: var(--light-blue); }

  .event-link {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--light-blue);
    text-decoration: none;
    transition: color 0.15s, transform 0.15s;
  }

  .event-link:hover { color: var(--dark-blue); transform: translateX(2px); }

  .events-loading {
    max-width: 1100px;
    margin: 0 auto 24px;
    color: var(--muted);
    font-size: 0.9rem;
  }

  .events-empty {
    max-width: 1100px;
    margin: 0 auto;
    color: #5a6070;
    font-size: 1rem;
    line-height: 1.7;
  }

  .events-empty a { color: var(--light-blue); text-decoration: none; font-weight: 600; }
  .events-empty a:hover { text-decoration: underline; }

  /* ─── SERMONS ─────────────────────────────────────── */
  #sermons {
    padding: 100px 48px;
    background: var(--cream);
  }

  .sermons-inner { max-width: 1100px; margin: 0 auto; }

  #sermons .section-title { color: var(--dark-blue); margin-bottom: 40px; }

  .featured-sermon {
    background: var(--dark-blue);
    border-radius: 6px;
    padding: 52px 56px;
    display: flex;
    align-items: center;
    gap: 52px;
    margin-bottom: 28px;
  }

  .play-btn {
    width: 72px; height: 72px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
    border: none;
  }

  .play-btn:hover { background: var(--yellow); transform: scale(1.06); }

  .play-icon {
    width: 0; height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid var(--dark-blue);
    margin-left: 5px;
  }

  .featured-sermon-text { flex: 1; }

  .featured-sermon-text h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 0.04em;
    color: var(--white);
    margin-bottom: 10px;
    margin-top: 6px;
    line-height: 1.1;
  }

  .featured-sermon-text .meta {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.48);
    margin-bottom: 24px;
  }

  .featured-sermon-text .btn-outline {
    font-size: 0.95rem;
    padding: 10px 26px;
  }

  .sermon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .sermon-item {
    background: var(--white);
    border-radius: 6px;
    padding: 22px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: 0 2px 12px rgba(37,41,69,0.07);
    cursor: pointer;
    transition: transform 0.15s;
    text-decoration: none;
  }

  .sermon-item:hover { transform: translateY(-2px); }

  .sermon-play-sm {
    width: 40px; height: 40px;
    background: #eef1f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .play-icon-sm {
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--gold);
    margin-left: 2px;
  }

  .sermon-info h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--dark-blue);
    margin-bottom: 4px;
  }

  .sermon-info p { font-size: 0.8rem; color: var(--muted); }

  /* ─── GIVE ────────────────────────────────────────── */
  #give {
    padding: 100px 48px;
    background: var(--gold);
  }

  .give-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }

  #give .section-label { color: var(--dark-blue); opacity: 0.75; }

  #give .section-title { color: var(--dark-blue); margin-bottom: 16px; }

  .give-body {
    font-size: 1rem;
    color: rgba(37,41,69,0.75);
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto 40px;
  }

  .give-btn {
    background: var(--dark-blue);
    color: var(--white);
    padding: 16px 52px;
    border: none;
    border-radius: 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
    display: inline-block;
  }

  .give-btn:hover { background: var(--light-blue); transform: translateY(-2px); }

  /* ─── CONNECT FORM ────────────────────────────────── */
  #connect {
    padding: 100px 48px;
    background: var(--dark-blue);
    text-align: center;
  }

  .connect-inner { max-width: 560px; margin: 0 auto; }

  #connect .section-title { color: var(--white); }
  #connect .section-body  { color: rgba(255,255,255,0.6); margin-left: auto; margin-right: auto; }

  .connect-form {
    margin-top: 32px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-row { display: flex; flex-direction: column; gap: 6px; }

  .form-row label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.02em;
  }

  .form-row input {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    padding: 14px 16px;
    border: 1.5px solid rgba(37,41,69,0.15);
    border-radius: 4px;
    background: var(--white);
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s;
  }

  .form-row input:focus { border-color: var(--gold); }

  .connect-submit { align-self: center; margin-top: 4px; border: none; }

  .connect-note { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 16px; }

  .connect-message {
    margin-top: 28px;
    padding: 18px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .connect-message-success {
    background: rgba(52,199,100,0.12);
    border: 1px solid rgba(52,199,100,0.4);
    color: #d9f9e2;
  }

  .connect-message-error {
    background: rgba(224,74,74,0.14);
    border: 1px solid rgba(224,74,74,0.45);
    color: #ffd9d9;
  }

  .hidden-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ─── FOOTER ──────────────────────────────────────── */
  footer {
    background: var(--dark-blue);
    padding: 64px 48px 36px;
  }

  .footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 44px;
    margin-bottom: 48px;
  }

  .footer-logo-img {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 8px;
  }

  .footer-logo-img svg {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
  }

  .footer-brand p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.42);
    line-height: 1.7;
    max-width: 280px;
  }

  .footer-tagline {
    font-size: 1rem !important;
    color: rgba(255,255,255,0.62) !important;
    line-height: 1.6;
    max-width: 300px;
    /* The "Faith Church" wordmark has a built-in left inset inside its
       square SVG frame, so the text itself starts a bit in from the
       frame's edge. Nudged over by the same amount so this line sits
       flush under the wordmark instead of flush under the frame. */
    margin-left: 14px;
    /* The wordmark's square SVG frame also has a lot of blank space below
       the actual letters (the frame is taller than the two-line wordmark
       inside it), so the shared margin-bottom on the logo link alone left
       a big gap here. Pulled up to close most of that built-in blank
       space, leaving just a small gap under "Church". */
    margin-top: -39px;
  }

  .footer-col h4 {
    font-family: 'Caveat', cursive;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 18px;
  }

  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 10px; }

  .footer-col ul li a {
    color: rgba(255,255,255,0.48);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s;
  }

  .footer-col ul li a:hover { color: var(--gold); }

  .footer-col ul li a br { line-height: 1.6; }

  .footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }

  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.55);
    transition: color 0.2s, border-color 0.2s;
  }

  .footer-social a:hover { color: var(--gold); border-color: var(--gold); }

  .footer-social svg { width: 16px; height: 16px; }

  .footer-soon {
    color: rgba(255,255,255,0.34);
    font-size: 0.88rem;
    cursor: default;
  }

  .footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.28); }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 900px) {
    nav { padding: 0 24px; }

    /* Nav center collapses into a hamburger-triggered dropdown panel.
       Dropdown submenus switch from hover to click/tap (see main.js). */
    .nav-toggle { display: flex; }

    .nav-center {
      position: fixed;
      top: 90px;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      max-height: calc(100vh - 90px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* Keeps a drag that reaches the top/bottom of this panel's own list
         from "spilling over" into scrolling the page behind it. */
      overscroll-behavior: contain;
      background: var(--white);
      box-shadow: 0 12px 28px rgba(37,41,69,0.15);
      padding: 8px 0 24px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .nav-center.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }

    .nav-center > li { width: 100%; }

    .nav-center a {
      width: 100%;
      padding: 14px 24px;
      border-radius: 0;
      font-size: 1.05rem;
    }

    .nav-center .chevron { margin-left: auto; transition: transform 0.2s ease; }

    .nav-center li.is-expanded > a .chevron { transform: rotate(180deg); }

    /* Hover no longer opens the dropdown on touch; only .is-expanded does.
       > combinators throughout this block so a top-level li's own state
       never reaches into the nested "Our Ministries" flyout (see
       .dropdown-sub rules below) two levels down. */
    .nav-center > li:hover > .dropdown {
      opacity: 0;
      visibility: hidden;
      transform: none;
      transition: none;
    }

    .dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: none;
      box-shadow: none;
      border: none;
      border-radius: 0;
      background: var(--cream-dark);
      min-width: 0;
      padding: 0;
      max-height: 0;
      overflow: hidden;
    }

    .nav-center > li.is-expanded > .dropdown,
    .nav-center > li.is-expanded:hover > .dropdown {
      opacity: 1;
      visibility: visible;
      /* No cap here (rather than a fixed px value) — the After Sunday
         dropdown now also has to fit the "Our Ministries" list nested
         inside it when that's expanded too, and a fixed height tall enough
         for that was clipping it partway through. #navCenter's own
         max-height + overflow-y: auto (above) is what actually keeps the
         whole panel on screen and scrollable; transition: none on .dropdown
         means there's no animation relying on this being a finite number. */
      max-height: none;
      padding: 6px 0;
    }

    .dropdown a { padding: 12px 40px; }

    /* "Our Ministries" opens a second, further-indented accordion nested
       inside the After Sunday one on mobile, so the ministry list scrolls
       right there in the nav instead of requiring a trip to the ministries
       page first. (Desktop keeps the click-through to that page — this tap
       behavior is mobile-only, see the JS.) */
    .chevron--sub { transition: transform 0.2s ease; }

    .dropdown-sub.is-expanded > a .chevron--sub { transform: rotate(90deg); }

    .dropdown-flyout {
      top: auto;
      left: auto;
      transform: none;
    }

    .dropdown-sub.is-expanded > .dropdown-flyout {
      opacity: 1;
      visibility: visible;
      max-height: none;
      padding: 6px 0;
    }

    .dropdown-flyout a { padding-left: 56px; }

    .nav-cta {
      margin: 10px 24px 0;
      justify-content: center;
      text-align: center;
    }

    .hero-content { padding: 60px 32px; }
    .hero-scroll { left: 32px; }
    #about { padding: 72px 24px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    #visit { padding: 72px 24px; }
    .visit-features { gap: 56px; }
    .visit-feature { flex-direction: column; align-items: flex-start; gap: 28px; }
    .visit-feature:nth-child(even) { flex-direction: column; }
    .visit-feature-photo { width: 100%; height: 280px; }
    .visit-feature-text p { max-width: none; }
    .visit-feature:nth-child(2) .visit-feature-text { width: 100%; margin-left: 0; }
    #events { padding: 72px 24px; }
    .event-cards { grid-template-columns: 1fr; }
    #sermons { padding: 72px 24px; }
    .featured-sermon { flex-direction: column; gap: 28px; padding: 36px 28px; }
    .sermon-grid { grid-template-columns: 1fr; }
    #give { padding: 72px 24px; }
    #connect { padding: 72px 24px; }
    #ministries { padding: 72px 24px; }
    .believe-card { width: 85vw; min-width: 85vw; padding: 32px 26px; }
    .ministry-grid { grid-template-columns: 1fr; }
    .ministry-card-wide { grid-column: auto; }
    .page-header { padding: 150px 24px 48px; align-items: flex-start; min-height: 380px; }
    .page-header-inner { align-items: flex-start; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }
  }

  @media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
  }

  /* ─── LIVESTREAM BANNER ───────────────────────────────── */
  .livestream-bar {
    background: var(--light-blue);
    padding: 14px 48px;
  }

  .livestream-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .live-dot {
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(241,178,36,0.3);
    animation: livepulse 1.8s ease-in-out infinite;
  }

  @keyframes livepulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(241,178,36,0.3); }
    50%       { box-shadow: 0 0 0 7px rgba(241,178,36,0.08); }
  }

  .livestream-inner p {
    font-size: 0.95rem;
    color: var(--white);
    flex: 1;
    min-width: 200px;
  }

  .livestream-inner strong { font-weight: 700; }

  .live-btn {
    background: var(--gold);
    color: var(--dark-blue);
    padding: 8px 24px;
    border-radius: 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
  }

  .live-btn:hover { background: var(--yellow); }


  /* ─── WHAT WE BELIEVE ─────────────────────────────────── */
  #beliefs {
    padding: 60px 0 40px;
    background: var(--dark-blue);
  }

  .believe-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
    margin-bottom: 24px;
    text-align: center;
  }

  /* "Our Foundation" is this section's real header, same oversized-script
     treatment as "Our Mission" above it. The intro paragraph gets the same
     centered-block treatment as .mission-statement (max-width + auto
     margins) so the whole blurb sits centered under it, not just its text. */
  #beliefs .section-label { font-size: clamp(2.4rem, 5vw, 3.3rem); margin-bottom: 14px; }
  #beliefs .section-title { color: var(--white); }
  #beliefs .section-body  { color: rgba(255,255,255,0.5); max-width: 560px; margin: 0 auto; }

  .believe-scroll-section {
    padding: 0 48px 56px;
  }

  .believe-track-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }

  .believe-track-wrapper::-webkit-scrollbar { display: none; }

  .believe-track-wrapper.grabbing { cursor: grabbing; }

  .believe-track {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: max-content;
    padding-bottom: 8px;
  }

  .believe-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 44px 40px;
    width: 460px;
    min-width: 460px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .believe-card-icon {
    display: block;
    margin-bottom: 20px;
    color: var(--gold);
    line-height: 0;
  }

  .believe-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1;
  }

  .believe-card p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
  }

  .believe-card.highlight {
    background: var(--gold);
    border-color: var(--gold);
  }

  .believe-card.highlight h3 { color: var(--dark-blue); }
  .believe-card.highlight p  { color: rgba(37,41,69,0.75); }
  .believe-card.highlight .believe-card-icon { color: var(--dark-blue); }



  /* ═══════════════════════════════════════════════════════
     ABOUT US PAGE
     ═══════════════════════════════════════════════════════ */

  /* Page-header background variant for the About page */
  .page-header-bg--about {
    background-image: url('../images/about-photo-3.jpg');
    background-position: center 40%;
  }

  /* ─── Jump bar ──────────────────────────────────────────
     Same sticky jump bar as Small Groups (.sg-jump, shared CSS and JS),
     reused here under the hero with this page's own four tabs. Anchor
     targets need extra scroll-margin-top to clear both the fixed nav and
     this bar parked just under it. */
  #lead-pastor, #lead-team, #staff, #elders, #mission, #our-story {
    scroll-margin-top: 148px;
  }

  /* ─── OUR STORY ───────────────────────────────────────── */
  #our-story {
    padding: 100px 48px;
    background: var(--cream);
  }

  .story-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 64px;
    align-items: stretch;
  }

  #our-story .section-title { color: var(--dark-blue); }

  .story-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: #5a6070;
    margin-bottom: 18px;
    max-width: 560px;
  }

  .story-text p:last-child { margin-bottom: 0; }

  .story-photo {
    border-radius: 18px;
    overflow: hidden;
    min-height: 520px;
    background: #c8cfe0;
    box-shadow: 0 20px 50px rgba(37,41,69,0.14);
  }

  .story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
  }

  /* ─── MISSION & VISION ────────────────────────────────── */
  #mission {
    padding: 96px 48px;
    background: var(--dark-blue);
    text-align: center;
  }

  .mission-inner { max-width: 900px; margin: 0 auto; }

  /* "Our Mission" reads as this section's real header, so it gets the same
     oversized-script treatment as the page-header's kicker instead of the
     small eyebrow size every other section uses. */
  #mission .section-label { color: var(--gold); font-size: clamp(2.4rem, 5vw, 3.3rem); margin-bottom: 14px; }
  #mission .section-title { color: var(--white); margin-bottom: 22px; }

  /* Same size/line-height as #beliefs .section-body, so the two intro
     paragraphs read as a matched pair. */
  .mission-statement {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.72);
    max-width: 680px;
    margin: 0 auto 44px;
  }

  .mission-words {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .mission-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: 0.14em;
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    padding: 26px 34px 20px;
    min-width: 190px;
    transition: border-color 0.2s, transform 0.2s;
  }

  .mission-word:hover {
    border-color: rgba(241,178,36,0.55);
    transform: translateY(-3px);
  }

  .mission-icon {
    width: 108px;
    height: 108px;
    object-fit: contain;
    display: block;
  }

  .mission-jesus {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4.5rem, 13vw, 8.5rem);
    letter-spacing: 0.03em;
    line-height: 0.9;
    color: var(--gold);
    margin-top: 4px;
  }

  /* ─── LEAD PASTOR FEATURE ─────────────────────────────── */
  #lead-pastor {
    padding: 100px 48px;
    background: var(--cream);
  }

  .pastor-inner { max-width: 1100px; margin: 0 auto; }

  .pastor-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }

  /* Overlapping two-photo collage for the pastor + wife */
  .pastor-photos {
    position: relative;
    height: 560px;
  }

  .pastor-photo-main,
  .pastor-photo-sub {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    background: #c8cfe0;
    box-shadow: 0 20px 50px rgba(37,41,69,0.18);
  }

  .pastor-photo-main {
    top: 0;
    left: 0;
    width: 68%;
    height: 78%;
  }

  .pastor-photo-sub {
    bottom: 0;
    right: 0;
    width: 52%;
    height: 60%;
    border: 6px solid var(--cream);
  }

  .pastor-photo-main img,
  .pastor-photo-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Frame Charlie's upper body in the portrait stage shot */
  .pastor-photo-main img {
    object-position: 50% 22%;
    transform: scale(1.18);
    transform-origin: 50% 26%;
  }

  /* Zoom in on Charlie & Liz */
  .pastor-photo-sub img {
    object-position: 48% 35%;
    transform: scale(1.5);
    transform-origin: 48% 40%;
  }

  #lead-pastor .section-title { color: var(--dark-blue); }

  .pastor-role {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    color: var(--light-blue);
    text-transform: uppercase;
    display: block;
    margin-bottom: 22px;
  }

  .pastor-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: #5a6070;
    margin-bottom: 18px;
    max-width: 520px;
  }

  .pastor-quote {
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--light-blue);
    margin-top: 26px;
    padding-left: 20px;
    border-left: 3px solid var(--gold);
    line-height: 1.5;
  }

  /* ─── TEAM (Lead Team + Staff) ────────────────────────── */
  .team-section { padding: 100px 48px; }
  #lead-team { background: #eef1f8; }
  #staff { background: var(--cream); }

  /* Staff and Elders sit back-to-back with no divider, so the stacked
     100px+100px padding read as one big empty gap — tighten just this seam. */
  #staff { padding-bottom: 50px; }
  #elders { padding-top: 50px; }

  .team-inner { max-width: 1100px; margin: 0 auto; }

  .team-inner .section-title { color: var(--dark-blue); }
  .team-inner .section-body  { color: #5a6070; margin-bottom: 52px; }

  /* Larger bio cards for the lead team */
  .leadteam-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .leadteam-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(37,41,69,0.09);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
  }

  .leadteam-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(37,41,69,0.16);
  }

  .team-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #c8cfe0 0%, #a8b4cc 100%);
    overflow: hidden;
  }

  .team-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Initials shown when a photo hasn't been added yet */
  .team-photo::before {
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    letter-spacing: 0.08em;
    color: rgba(37,41,69,0.35);
  }

  .leadteam-body { padding: 26px 26px 30px; }

  .leadteam-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    color: var(--dark-blue);
    line-height: 1;
    margin-bottom: 6px;
  }

  .team-role {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--light-blue);
    display: block;
    margin-bottom: 14px;
  }

  .leadteam-card p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #5a6070;
  }

  /* Tighter cards for the full staff grid */
  .staff-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }

  .staff-card { text-align: center; }

  .staff-card .team-photo {
    border-radius: 12px;
    margin-bottom: 14px;
    aspect-ratio: 1 / 1;
    box-shadow: 0 3px 16px rgba(37,41,69,0.08);
  }

  .staff-card .team-photo::before { font-size: 1.9rem; }

  .staff-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--dark-blue);
    line-height: 1.05;
    margin-bottom: 3px;
  }

  .staff-card .team-role {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin-bottom: 0;
  }

  /* ─── ABOUT PAGE RESPONSIVE ───────────────────────────── */
  @media (max-width: 900px) {
    #our-story { padding: 72px 24px; }
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
    .story-photo { min-height: 0; height: 320px; order: -1; }
    .story-text p { max-width: none; }
    #mission { padding: 72px 24px; }
    #lead-pastor { padding: 72px 24px; }
    .pastor-feature { grid-template-columns: 1fr; gap: 40px; }
    .pastor-photos { height: 440px; order: -1; }
    .pastor-text p { max-width: none; }
    .team-section { padding: 72px 24px; }
    #staff { padding-bottom: 36px; }
    #elders { padding-top: 36px; }
    .leadteam-grid { grid-template-columns: 1fr; }
    .staff-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    #lead-pastor, #lead-team, #staff, #elders, #mission, #our-story { scroll-margin-top: 140px; }
  }

  @media (min-width: 901px) and (max-width: 1100px) {
    .staff-grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* ══════════════════════════════════════════════════════
     SMALL GROUPS PAGE
     ══════════════════════════════════════════════════════ */

  .page-header-bg--groups {
    background-image: url('../images/groups-header-living-room.jpg');
    background-position: center 30%;
  }

  /* Lighter than the shared dark overlay every other page-header uses —
     that one was blacking out the group's faces. Same grayscale photo
     filter stays, just a weaker navy wash on top of it. */
  .page-header-bg--groups::after {
    background: linear-gradient(to right, rgba(37,41,69,0.55) 45%, rgba(37,41,69,0.32) 100%);
  }

  /* Taller hero box so the "cover" crop doesn't have to zoom in as far —
     same photo scale, just more of it kept in frame top-to-bottom. */
  .page-header:has(.page-header-bg--groups) {
    min-height: 620px;
  }

  /* Hero has no buttons on this page, so the title + blurb are centered
     instead of left-aligned against empty space. */
  .page-header-inner--center {
    justify-content: center;
    text-align: center;
  }

  .page-header-inner--center .page-header-subtitle {
    margin: 0 auto;
  }

  /* Match the big title size + tight title-to-blurb spacing used by the
     full-screen-photo ministry page heroes (Worship, Faith Kids, etc.)
     instead of the smaller, looser shared .page-header-title default. The
     text column also widens to match their 900px hero column — at this
     font size, "Small Groups" needs that room or it wraps into two
     oversized stacked lines inside the narrower 680px default. */
  .page-header-inner--center .page-header-text {
    max-width: 1100px;
  }

  .page-header-inner--center .page-header-title {
    font-size: clamp(4.2rem, 13vw, 9.5rem);
    margin-bottom: 6px;
  }

  /* ─── SCROLL REVEAL ───────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ─── STICKY JUMP BAR ─────────────────────────────────── */
  /* Parks itself directly under the fixed 90px nav and stays there
     for the rest of the page, so "Join a Group" is always on screen.
     z-index sits below the nav's 100 so it tucks under, not over. */
  .sg-jump {
    position: sticky;
    top: 90px;
    z-index: 60;
    background: rgba(37,41,69,0.97);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
  }

  /* Anchor targets clear both the nav and the parked jump bar */
  #sg-intro, #why, #night, #video, #signup, #sg-info {
    scroll-margin-top: 148px;
  }

  .sg-jump-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .sg-jump-list {
    display: flex;
    list-style: none;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sg-jump-list::-webkit-scrollbar { display: none; }

  .sg-jump-link {
    display: block;
    white-space: nowrap;
    padding: 18px 14px;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.74rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  .sg-jump-link:hover { color: var(--white); }
  .sg-jump-link.is-current { color: var(--gold); border-bottom-color: var(--gold); }

  .sg-jump-cta {
    flex-shrink: 0;
    background: var(--gold);
    color: var(--dark-blue);
    padding: 9px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    transition: background 0.2s;
  }
  .sg-jump-cta:hover { background: var(--yellow); }

  /* ─── INTRO ───────────────────────────────────────────── */
  /* Backgrounds alternate down the page so no two neighboring
     sections match: cream-dark → cream → cream-dark → dark blue → cream */
  #sg-intro { padding: 96px 48px; background: var(--cream-dark); }

  .sg-intro-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
  }

  #sg-intro .section-title { color: var(--dark-blue); }
  #sg-intro .section-body { color: #5a6070; margin-bottom: 18px; }
  #sg-intro .section-body strong { color: var(--dark-blue); font-weight: 600; }

  .sg-intro-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .sg-stat {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .sg-stat:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(37,41,69,0.16); }

  /* Photo cards — same treatment as the front of a "Why It Matters" card */
  .sg-stat--photo { background: var(--dark-blue); }

  .sg-stat--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
  }
  .sg-stat--photo:hover img { transform: scale(1.05); }

  .sg-stat--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,29,48,0.94) 18%, rgba(26,29,48,0.25) 68%, rgba(26,29,48,0.35) 100%);
  }

  .sg-stat-text {
    position: relative;
    z-index: 2;
    display: block;
    padding: 22px 22px 24px;
  }

  .sg-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 0.9;
    color: var(--gold);
    display: block;
    margin-bottom: 8px;
  }

  .sg-stat-script {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--gold);
    display: block;
    line-height: 1;
    margin-bottom: 10px;
  }

  .sg-stat-label {
    font-size: 0.86rem;
    line-height: 1.5;
    display: block;
    color: rgba(255,255,255,0.82);
  }

  /* "Join anytime" — the one solid card in the set */
  .sg-stat--note {
    background: var(--dark-blue);
    justify-content: center;
    padding: 26px 24px;
  }
  .sg-stat--note .sg-stat-label { color: rgba(255,255,255,0.66); }

  /* ─── SECTION HEADS ───────────────────────────────────── */
  .sg-section-head { max-width: 700px; margin-bottom: 52px; }
  .sg-section-head .section-title { color: var(--dark-blue); }
  .sg-section-head .section-body { color: #5a6070; }
  .sg-section-head--light .section-title { color: var(--white); }
  .sg-section-head--light .section-body { color: rgba(255,255,255,0.6); }

  /* ─── WHY / FLIP CARDS ────────────────────────────────── */
  #why { padding: 96px 48px; background: var(--cream); }
  .sg-why-inner { max-width: 1100px; margin: 0 auto; }

  .sg-flip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .sg-flip {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    perspective: 1400px;
    height: 430px;
    font-family: inherit;
    text-align: left;
  }
  .sg-flip:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

  .sg-flip-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.65s cubic-bezier(.3,.7,.3,1);
    transform-style: preserve-3d;
  }
  .sg-flip:hover .sg-flip-inner,
  .sg-flip.is-flipped .sg-flip-inner { transform: rotateY(180deg); }

  .sg-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .sg-flip-front { background: var(--dark-blue); justify-content: flex-end; }

  .sg-flip-front img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sg-flip-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,29,48,0.94) 15%, rgba(26,29,48,0.25) 65%, rgba(26,29,48,0.35) 100%);
  }

  .sg-flip-front-text {
    position: relative;
    z-index: 2;
    padding: 26px 24px 28px;
    display: block;
  }

  .sg-flip-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: var(--gold);
    display: block;
    margin-bottom: 6px;
  }

  .sg-flip-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.95rem;
    letter-spacing: 0.03em;
    color: var(--white);
    display: block;
    line-height: 1;
    margin-bottom: 8px;
  }

  .sg-flip-hint {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    display: block;
  }

  .sg-flip-back {
    background: var(--white);
    border: 1px solid var(--cream-dark);
    transform: rotateY(180deg);
    padding: 30px 26px;
    justify-content: flex-start;
  }
  .sg-flip-back .sg-flip-title { color: var(--dark-blue); margin-bottom: 14px; }
  .sg-flip-back .sg-flip-num { color: var(--gold); }

  .sg-flip-body {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #5a6070;
    display: block;
    margin-bottom: auto;
  }

  .sg-flip-verse {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--light-blue);
    display: block;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--cream-dark);
  }

  /* ─── A NIGHT IN A GROUP / STEPS ──────────────────────── */
  #night { padding: 96px 48px; background: var(--dark-blue); }
  .sg-night-inner { max-width: 1100px; margin: 0 auto; }

  .sg-steps-track { position: relative; }

  .sg-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .sg-step:not(.is-active) { display: none; }
  .sg-step.is-active { animation: sgFade 0.45s cubic-bezier(.2,.7,.3,1); }

  .sg-step-photo {
    border-radius: 10px;
    overflow: hidden;
    height: 400px;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .sg-step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .sg-step-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 18px;
  }

  .sg-step-text p { color: rgba(255,255,255,0.65); line-height: 1.8; margin-bottom: 14px; }
  .sg-step-text em { color: var(--yellow); font-style: italic; }

  .sg-step-note {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--yellow) !important;
    line-height: 1.4;
  }

  .sg-steps-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 44px;
  }

  .sg-step-arrow {
    appearance: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.28);
    background: transparent;
    color: var(--white);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sg-step-arrow:hover:not(:disabled) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--dark-blue);
    transform: translateY(-2px);
  }
  .sg-step-arrow:disabled { opacity: 0.25; cursor: default; }
  .sg-step-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .sg-step-dots { display: flex; gap: 10px; }

  .sg-step-dot {
    appearance: none;
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.4);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  .sg-step-dot:hover { border-color: var(--gold); }
  .sg-step-dot.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.25); }
  .sg-step-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .sg-steps-hint {
    text-align: center;
    margin-top: 18px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
  }

  /* ─── VIDEO ───────────────────────────────────────────── */
  #video { padding: 96px 48px; background: var(--cream-dark); }

  .sg-video-inner { max-width: 940px; margin: 0 auto; text-align: center; }

  .sg-video-caption { margin-bottom: 40px; }
  #video .section-title { color: var(--dark-blue); }
  #video .section-body { color: #5a6070; margin: 0 auto; }

  .sg-video-frame {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 28px 64px rgba(37,41,69,0.22);
    background: var(--dark-blue);
  }

  .sg-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  .sg-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ─── SIGN UP CTA ─────────────────────────────────────── */
  #signup {
    padding: 104px 48px;
    background: var(--dark-blue);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  #signup::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241,178,36,0.10) 0%, rgba(241,178,36,0) 62%);
    pointer-events: none;
  }

  .sg-signup-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
  #signup .section-title { color: var(--white); }
  #signup .section-body { color: rgba(255,255,255,0.62); max-width: 620px; margin: 0 auto 36px; }

  .sg-signup-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--gold);
    color: var(--dark-blue);
    padding: 20px 52px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.18s, box-shadow 0.25s;
    box-shadow: 0 14px 34px rgba(241,178,36,0.22);
  }
  .sg-signup-btn:hover {
    background: var(--yellow);
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(241,178,36,0.32);
  }

  .sg-signup-btn-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem;
    letter-spacing: 0.07em;
    line-height: 1;
  }
  .sg-signup-btn-sub {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.72;
  }

  .sg-signup-steps {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 44px;
    flex-wrap: wrap;
  }
  .sg-signup-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 100px;
    padding: 9px 20px 9px 9px;
  }
  .sg-signup-steps li span {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gold);
    color: var(--dark-blue);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── MORE INFO ───────────────────────────────────────── */
  #sg-info { padding: 80px 48px; background: var(--cream); }

  .sg-info-inner {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--cream-dark);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    padding: 36px 40px;
    display: flex;
    gap: 26px;
    align-items: flex-start;
    box-shadow: 0 12px 34px rgba(37,41,69,0.07);
  }

  .sg-info-icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sg-info-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.03em;
    color: var(--dark-blue);
    margin-bottom: 10px;
    line-height: 1;
  }

  .sg-info-text p { color: #5a6070; line-height: 1.75; margin-bottom: 16px; font-size: 0.95rem; }

  .sg-info-email {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--light-blue);
    text-decoration: none;
    border-bottom: 2px solid rgba(37,96,159,0.28);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
  .sg-info-email:hover { color: var(--gold); border-color: var(--gold); }

  /* ─── SMALL GROUPS RESPONSIVE ─────────────────────────── */
  @media (max-width: 900px) {
    .sg-jump-inner { padding: 0 16px; gap: 10px; }
    .sg-jump-link { padding: 15px 11px; font-size: 0.68rem; }
    /* Kept visible on phones too — the section links scroll
       horizontally beside it rather than pushing it off. */
    .sg-jump-cta { padding: 8px 14px; font-size: 0.82rem; }

    #sg-intro, #why, #night, #video, #signup, #sg-info {
      scroll-margin-top: 140px;
    }

    #sg-intro, #why, #night, #video, #signup { padding: 68px 24px; }
    #sg-info { padding: 56px 24px; }

    .sg-intro-inner { grid-template-columns: 1fr; gap: 40px; }
    .sg-stat-text { padding: 16px 16px 18px; }
    .sg-stat-num { font-size: 2.4rem; }
    .sg-stat-script { font-size: 1.7rem; }
    .sg-stat-label { font-size: 0.8rem; }
    .sg-stat--note { padding: 20px 16px; }
    #sg-intro .section-body { max-width: none; }

    .sg-section-head { margin-bottom: 36px; }

    .sg-flip-grid { grid-template-columns: 1fr; gap: 16px; }
    .sg-flip { height: 400px; }
    .sg-flip:hover .sg-flip-inner { transform: none; }
    .sg-flip.is-flipped .sg-flip-inner { transform: rotateY(180deg); }

    .sg-step { grid-template-columns: 1fr; gap: 26px; }
    .sg-step-photo { height: 240px; }
    .sg-steps-controls { margin-top: 32px; gap: 16px; }

    #video .section-body { max-width: none; }
    .sg-signup-btn { padding: 18px 34px; width: 100%; }
    .sg-signup-steps { flex-direction: column; align-items: stretch; }

    .sg-info-inner { flex-direction: column; padding: 28px 24px; gap: 18px; }
  }

  /* ══════════════════════════════════════════════════════
     OUR MINISTRIES PAGE
     ══════════════════════════════════════════════════════ */

  .page-header-bg--ministries {
    background-image: url('../images/ministries-header.jpg');
    background-position: center 40%;
  }

  #ministry-list { padding: 96px 48px; background: var(--cream); }
  .min-inner { max-width: 1100px; margin: 0 auto; }

  .min-head { max-width: 700px; margin-bottom: 52px; }
  .min-head .section-title { color: var(--dark-blue); }
  .min-head .section-body  { color: #5a6070; }

  .min-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }

  /* ─── Card shell ──────────────────────────────────────── */
  .min-card {
    position: relative;
    display: block;
    height: 520px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--dark-blue);
    text-decoration: none;
    box-shadow: 0 4px 22px rgba(37,41,69,0.09);
    transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s;
  }

  .min-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
  }

  .min-card--focus-top img { object-position: center 12%; }

  .min-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,29,48,0.93) 8%, rgba(26,29,48,0.55) 46%, rgba(26,29,48,0.12) 78%);
    transition: background 0.35s;
    pointer-events: none;
  }

  .min-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: block;
    padding: 34px 32px 32px;
  }

  .min-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.1rem, 3vw, 2.9rem);
    letter-spacing: 0.03em;
    line-height: 0.98;
    color: var(--white);
    display: block;
  }

  /* Descriptor + CTA stay collapsed until hover/focus on desktop */
  .min-card-desc,
  .min-card-cta {
    display: block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s, transform 0.35s;
  }

  .min-card-desc {
    font-size: 0.97rem;
    line-height: 1.65;
    max-width: 46ch;
    color: rgba(255,255,255,0.78);
    margin-top: 10px;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.35s, transform 0.35s, max-height 0.4s ease;
  }

  .min-card-cta {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-top: 12px;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.35s, transform 0.35s, max-height 0.4s ease;
  }
  .min-card-cta--soon { color: rgba(255,255,255,0.5); }

  .min-card--live:hover,
  .min-card--live:focus-visible,
  .min-card--soon:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(37,41,69,0.20);
  }
  .min-card--live:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

  .min-card:hover img,
  .min-card--live:focus-visible img { transform: scale(1.06); }

  .min-card:hover::after,
  .min-card--live:focus-visible::after {
    background: linear-gradient(to top, rgba(26,29,48,0.96) 20%, rgba(26,29,48,0.78) 62%, rgba(26,29,48,0.35) 100%);
  }

  .min-card:hover .min-card-desc,
  .min-card:hover .min-card-cta,
  .min-card--live:focus-visible .min-card-desc,
  .min-card--live:focus-visible .min-card-cta {
    opacity: 1;
    transform: none;
    max-height: 170px;
  }

  /* ─── "Coming Soon" tag ───────────────────────────────── */
  .min-card--soon { cursor: default; }

  .min-card-tag {
    position: absolute;
    top: 22px; right: 22px;
    z-index: 3;
    background: rgba(250,247,240,0.92);
    color: var(--dark-blue);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 15px;
    border-radius: 100px;
  }

  /* ─── Closing note ────────────────────────────────────── */
  .min-note {
    margin-top: 44px;
    text-align: center;
  }
  .min-note p { color: #5a6070; font-size: 0.97rem; }
  .min-note a {
    color: var(--light-blue);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(37,96,159,0.3);
    transition: color 0.2s, border-color 0.2s;
  }
  .min-note a:hover { color: var(--gold); border-color: var(--gold); }

  /* ─── Responsive ──────────────────────────────────────── */
  @media (max-width: 900px) {
    #ministry-list { padding: 68px 24px; }
    .min-head { margin-bottom: 34px; }
    .min-grid { grid-template-columns: 1fr; gap: 18px; }
    .min-card { height: 380px; border-radius: 14px; }
    .min-card--feature { height: 380px; }
    .min-card-body { padding: 24px 22px 22px; }
    .min-card-desc { max-width: none; }

    /* No hover on touch — show the descriptor and CTA up front */
    .min-card-desc, .min-card-cta { opacity: 1; transform: none; max-height: 170px; }
    .min-card::after {
      background: linear-gradient(to top, rgba(26,29,48,0.95) 22%, rgba(26,29,48,0.72) 64%, rgba(26,29,48,0.3) 100%);
    }
    .min-card--live:hover, .min-card--soon:hover { transform: none; }
  }

  /* ─── Feature card — the one live ministry leads the grid ─── */
  .min-card--feature {
    grid-column: 1 / -1;
    height: 460px;
  }

  .min-card--feature .min-card-title { font-size: clamp(2.6rem, 4.4vw, 4rem); }
  .min-card--feature .min-card-desc  { font-size: 1.05rem; max-width: 54ch; }
  .min-card--feature .min-card-body  { padding: 40px 40px 38px; }

  @media (min-width: 901px) and (max-width: 1100px) {
    .min-card { height: 460px; }
  }

  /* ══════════════════════════════════════════════════════
     CHURCH CENTER APP PAGE
     ══════════════════════════════════════════════════════ */

  .page-header-bg--app {
    background-image: url('../images/about-photo-3.jpg');
    background-position: center 40%;
  }

  #app { padding: 96px 48px; background: var(--cream); }
  .app-inner { max-width: 900px; margin: 0 auto; text-align: center; }

  .app-intro { margin-bottom: 52px; }
  #app .section-title { color: var(--dark-blue); }
  #app .section-body  { color: #5a6070; margin: 0 auto; }

  /* ─── Feature list ────────────────────────────────────── */
  .app-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    text-align: left;
    margin-bottom: 56px;
  }

  .app-features li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--cream-dark);
    border-radius: 10px;
    padding: 22px 22px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  }
  .app-features li:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(37,41,69,0.09);
    border-color: rgba(241,178,36,0.5);
  }

  .app-feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-feature-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5a6070;
  }
  .app-feature-text strong {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--dark-blue);
    margin-bottom: 3px;
  }

  /* ─── Download block ──────────────────────────────────── */
  .app-download {
    background: var(--dark-blue);
    border-radius: 14px;
    padding: 46px 40px 40px;
    position: relative;
    overflow: hidden;
  }
  .app-download::before {
    content: '';
    position: absolute;
    top: -60%; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241,178,36,0.12) 0%, rgba(241,178,36,0) 62%);
    pointer-events: none;
  }

  .app-download-label {
    position: relative; z-index: 2;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 26px;
  }

  .app-buttons {
    position: relative; z-index: 2;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .app-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    background: var(--white);
    color: var(--dark-blue);
    padding: 13px 26px 13px 22px;
    border-radius: 8px;
    text-decoration: none;
    min-width: 218px;
    transition: background 0.2s, transform 0.18s, box-shadow 0.25s;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  }
  .app-btn:hover {
    background: var(--yellow);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(241,178,36,0.28);
  }
  .app-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

  .app-btn-glyph { display: flex; align-items: center; }
  .app-btn-text  { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }

  .app-btn-small {
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.65;
  }
  .app-btn-big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
  }

  .app-download-note {
    position: relative; z-index: 2;
    margin-top: 28px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.6);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .app-download-note strong { color: rgba(255,255,255,0.85); font-weight: 600; }
  .app-download-note a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(241,178,36,0.4);
    transition: border-color 0.2s;
  }
  .app-download-note a:hover { border-color: var(--gold); }

  /* ─── Responsive ──────────────────────────────────────── */
  @media (max-width: 900px) {
    #app { padding: 68px 24px; }
    .app-intro { margin-bottom: 34px; }
    #app .section-body { max-width: none; }
    .app-features { grid-template-columns: 1fr; gap: 14px; margin-bottom: 38px; }
    .app-features li { padding: 18px; }
    .app-download { padding: 34px 22px 30px; }
    .app-buttons { flex-direction: column; align-items: stretch; }
    .app-btn { min-width: 0; justify-content: center; }
  }

  /* ─── STUDY GUIDES ────────────────────────────────────── */
  #study-guides {
    background: var(--cream);
    padding: 92px 48px 100px;
  }

  .sg-inner { max-width: 1200px; margin: 0 auto; }

  .sg-intro { max-width: 620px; margin-bottom: 40px; }
  #study-guides .section-title { color: var(--dark-blue); margin-bottom: 14px; }

  .sg-intro-copy {
    font-size: 1rem;
    color: #5a6070;
    line-height: 1.75;
  }

  /* ── Search + sort bar ── */
  .sg-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 34px;
    background: var(--white);
    border: 1px solid rgba(37,41,69,0.08);
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(37,41,69,0.05);
  }

  .sg-search {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
  }

  .sg-search-icon {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
    stroke-linecap: round;
  }

  .sg-search input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    color: var(--text-dark);
    background: var(--cream);
    border: 1.5px solid transparent;
    border-radius: 4px;
    transition: border-color 0.2s, background 0.2s;
  }

  .sg-search input::placeholder { color: var(--muted); }
  .sg-search input:focus {
    outline: none;
    background: var(--white);
    border-color: var(--gold);
  }
  .sg-search input::-webkit-search-cancel-button { cursor: pointer; }

  .sg-sort { display: flex; align-items: center; gap: 9px; }

  .sg-sort label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.09em;
    color: var(--muted);
  }

  .sg-sort select {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    color: var(--text-dark);
    padding: 9px 30px 9px 12px;
    background: var(--cream);
    border: 1.5px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a99' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px;
    transition: border-color 0.2s;
  }

  .sg-sort select:focus { outline: none; border-color: var(--gold); }

  .sg-count {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
  }

  /* ── Card grid ── */
  .sg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }

  .sg-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(37,41,69,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .sg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37,41,69,0.14);
  }

  /* Artwork */
  .sg-card-art {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--dark-blue);
    overflow: hidden;
  }

  .sg-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .sg-card:hover .sg-card-art img { transform: scale(1.04); }

  /* Typographic fallback when a series has no artwork (or the file 404s) */
  .sg-card-art--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
      linear-gradient(135deg, rgba(241,178,36,0.16), transparent 62%),
      var(--dark-blue);
  }

  .sg-card-art--fallback span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--white);
    text-wrap: balance;
  }

  .sg-card-art--fallback span::after {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    margin: 12px auto 0;
    background: var(--gold);
  }

  /* Body */
  .sg-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
  }

  .sg-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    color: var(--dark-blue);
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .sg-card-date {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }

  .sg-card-scripture {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    margin-bottom: 13px;
    border-left: 3px solid var(--gold);
    background: var(--cream);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--light-blue);
  }

  .sg-card p.sg-card-desc {
    font-size: 0.88rem;
    color: #5a6070;
    line-height: 1.65;
    margin-bottom: 20px;
  }

  /* Download button pinned to the bottom so cards line up */
  .sg-card-download {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    background: var(--dark-blue);
    color: var(--white);
    border-radius: 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.02rem;
    letter-spacing: 0.09em;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }

  .sg-card-download svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sg-card-download:hover { background: var(--gold); color: var(--dark-blue); }
  .sg-card-download:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

  .sg-card-meta {
    margin-top: 9px;
    text-align: center;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: var(--muted);
  }

  /* ── Status messages ── */
  .sg-status {
    padding: 44px 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
  }

  .sg-status--empty { color: #5a6070; }

  .sg-clear {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--light-blue);
    text-decoration: underline;
    cursor: pointer;
  }

  .sg-clear:hover { color: var(--gold); }

  /* ── Closing note ── */
  .sg-footnote {
    margin-top: 64px;
    padding: 44px 40px;
    border-radius: 6px;
    background: var(--dark-blue);
    text-align: center;
  }

  .sg-footnote h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 12px;
  }

  .sg-footnote p {
    max-width: 520px;
    margin: 0 auto 26px;
    font-size: 0.94rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
  }

  .sg-footnote-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ── Responsive ── */
  @media (max-width: 1000px) {
    .sg-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 900px) {
    #study-guides { padding: 68px 24px 76px; }
    .sg-intro { margin-bottom: 30px; }
    .sg-controls { padding: 14px; gap: 12px; }
    .sg-count { margin-left: 0; flex-basis: 100%; }
    .sg-footnote { margin-top: 46px; padding: 34px 22px; }
    .sg-footnote-actions { flex-direction: column; align-items: stretch; }
  }

  @media (max-width: 620px) {
    .sg-grid { grid-template-columns: 1fr; gap: 20px; }
    .sg-sort { flex: 1 1 100%; }
    .sg-sort select { flex: 1; }
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .sg-card,
    .sg-card-art img { transition: none; }
    .sg-card:hover { transform: none; }
    .sg-card:hover .sg-card-art img { transform: none; }
  }

  /* ══════════════════════════════════════════════════════
     MINISTRY PAGE — FAITH KIDS
     Reusable: every block below is prefixed .mk- so future
     ministry pages can drop in the same markup.
     ══════════════════════════════════════════════════════ */

  /* ─── Hero ─────────────────────────────────────────── */
  .mk-hero {
    position: relative;
    background: var(--dark-blue);
    padding: 170px 48px 0;
  }

  /* The cream half the photo overhangs into */
  .mk-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 190px;
    background: var(--cream);
  }

  .mk-hero-inner,
  .mk-hero-photo {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
  }

  .mk-hero-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 56px;
  }

  .mk-hero-text { max-width: 660px; }

  .mk-hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.4rem, 8vw, 6.2rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: var(--white);
    margin-bottom: 20px;
  }

  .mk-hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.75;
    max-width: 520px;
  }

  .mk-hero-cta {
    flex-shrink: 0;
    background: var(--white);
    color: var(--dark-blue);
    padding: 20px 42px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
  }

  .mk-hero-cta:hover {
    background: var(--gold);
    transform: translateY(-2px);
  }

  .mk-hero-photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 30px 70px rgba(26,29,48,0.28);
  }

  .mk-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ─── Details / facts bar ──────────────────────────── */
  #mk-details {
    background: var(--cream);
    padding: 54px 48px 90px;
  }

  .mk-details-inner { max-width: 1100px; margin: 0 auto; }

  .mk-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 48px;
  }

  /* Local Outreach dropped its "Ministry Leader" fact down to its own
     section at the bottom of the page (see #mk-leader-bottom) and its
     third ("Stay Connected") fact earlier, leaving just "Get Connected"
     here — single-column modifier for any ministry page down to one fact. */
  .mk-facts--1 { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }

  /* A grid item stretches to fill its whole column by default, which would
     center the "Get Connected" label against the full (wider) column
     instead of against the list itself. justify-self: center shrinks the
     fact down to its own natural width first and centers *that*, so the
     label stays sitting right above the list instead of drifting off to
     one side of it. */
  .mk-facts--1 .mk-fact { justify-self: center; }

  .mk-fact-label {
    display: block;
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 8px;
  }

  .mk-fact-value {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    color: var(--dark-blue);
    line-height: 1.25;
  }

  .mk-fact-value + .mk-fact-value { margin-top: 12px; }
  .mk-fact-value strong { color: var(--light-blue); font-weight: 400; }

  .mk-fact-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(37,96,159,0.3);
    transition: color 0.2s, border-color 0.2s;
  }

  .mk-fact-value a:hover {
    color: var(--light-blue);
    border-color: var(--light-blue);
  }

  .mk-ico {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--light-blue);
  }

  .mk-fact { min-width: 0; }

  .mk-fact-list { list-style: none; }

  .mk-fact-list li + li { margin-top: 10px; }

  .mk-fact-list a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    color: var(--dark-blue);
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.2s;
  }

  .mk-fact-list a::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .mk-fact-list a:hover { color: var(--light-blue); }
  .mk-fact-list a:hover::before { transform: scale(1.5); }

  .mk-fact--contact .mk-fact-value {
    font-size: 1.12rem;
    word-break: break-word;
  }

  .mk-leader { display: flex; align-items: center; gap: 14px; }

  .mk-leader img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--white);
    box-shadow: 0 3px 10px rgba(26,29,48,0.16);
  }

  /* Faith Kids, Faith Students, Adult Discipleship, Care Ministry and
     College & Young Adults — their top-of-page Ministry Leader photo reads
     a size up from the shared 52px default now that the "Ministry Leader"
     label above it is gone. */
  .mk-leader--lg img { width: 68px; height: 68px; }

  .mk-leader-name { margin-bottom: 2px; }

  .mk-leader-role {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0;
  }

  .mk-leader-email {
    display: block;
    font-size: 0.85rem;
    color: var(--light-blue);
    letter-spacing: 0;
    text-decoration: none;
    margin-top: 2px;
  }

  .mk-leader-email:hover { color: var(--gold); }

  /* Small circular headshot inside a tab panel's text column (e.g. the Tech
     Team panel's "led by" credit) — same treatment as .mk-leader img, just
     stacked instead of sitting beside the name since there's no room for a
     side-by-side row in that narrower column. Tight top margin (plus the
     line-height reset on the name below) keeps the name sitting right above
     the photo instead of floating with a gap, since Bebas Neue's tall
     natural line box otherwise pushes it away. */
  .mk-panel-leader-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 0 8px;
    border: 2px solid var(--white);
    box-shadow: 0 3px 10px rgba(26,29,48,0.16);
  }

  .mk-panel-text .mk-leader-name { line-height: 1; margin-bottom: 6px; }

  /* ─── Programs card with tabs ──────────────────────── */
  #mk-programs {
    background: var(--cream-dark);
    padding: 92px 48px;
  }

  .mk-programs-inner { max-width: 1100px; margin: 0 auto; }

  .mk-programs-head { max-width: 640px; margin-bottom: 44px; }
  .mk-programs-head .section-title { color: var(--dark-blue); }
  /* .section-body's shared max-width (580px) is narrower than this block's
     own wider width below, so without its own centering it sits flush left
     inside that extra space instead of centered under the title — same fix
     as .mission-statement/.section-body elsewhere. Widened a touch past the
     shared 580px so the last line's closing words ("at Faith.") wrap up
     with the line above instead of sitting alone on their own line. */
  .mk-programs-head .section-body { color: #5a6070; max-width: 640px; margin: 0 auto; }

  /* Frontliners — a button sits right after the paragraph here (the old
     closing-CTA button, moved up into this head block). .section-body has
     no built-in bottom margin, so give the button its own breathing room
     above it instead. */
  .mk-programs-head .btn-primary { margin-top: 24px; }

  /* Frontliners — this head block replaced the old closing CTA, which was
     centered (max-width 660px, margin 0 auto, text-align center). Centering
     it the same way here instead of leaving it pinned to the card's left
     edge, so it still reads as its own standalone intro rather than a
     caption glued to one side of the card below it. Widened past that
     original 660px — at 660 the paragraph's last line broke down to just
     "Faith." sitting alone; the extra width lets it wrap up onto the line
     above with "at" instead. */
  #mk-programs.mk-programs--fs .mk-programs-head {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Reordered layout (head block now below the card, see the background
     split override above) — give it the same breathing room above it that
     every other ministry page gets between its card and the closing CTA
     section that follows (#mk-programs's own 50px bottom padding plus
     #mk-cta's 50px top padding, measured on Faith Students). */
  #mk-programs.mk-programs--fs:has(.mk-card + .mk-programs-head) .mk-programs-head {
    margin-top: 100px;
  }

  .mk-card {
    background: var(--white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(26,29,48,0.10);
  }

  .mk-tablist {
    display: flex;
    gap: 4px;
    padding: 10px 10px 0;
    background: var(--dark-blue);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mk-tablist::-webkit-scrollbar { display: none; }

  .mk-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    background: transparent;
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 16px 22px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .mk-tab:hover { color: var(--white); background: rgba(255,255,255,0.07); }

  .mk-tab[aria-selected="true"] {
    background: var(--white);
    color: var(--dark-blue);
    font-weight: 600;
  }

  .mk-tab:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -3px;
  }

  .mk-panels { position: relative; }

  .mk-panel {
    display: grid;
    /* minmax(0, 1fr) rather than plain 1fr: a plain 1fr track's automatic
       minimum is its content's min-content size, so a photo (or, as on
       Global Missions' "Partner Organizations" list, a tall text column)
       can force its track wider than an even 50/50 split and crowd the
       other column. minmax(0, …) removes that content-based floor so both
       columns always split the row evenly regardless of what's inside. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .mk-panel[hidden] { display: none; }

  .mk-panel.is-active { animation: mkfade 0.35s ease; }

  @keyframes mkfade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  /* Photos are cropped square at source, so the media column is square too:
     every tab panel is then exactly the same height and the card never
     jumps as you switch between them. min-width: 0 stops a grid item from
     refusing to shrink below its content's intrinsic size — without it,
     aspect-ratio can still push this column wider than its 550px track
     (overlapping the text column) even once the track itself is pinned
     even via minmax(0, 1fr) above. */
  .mk-panel-media { width: 100%; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; align-self: start; }

  .mk-panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Christ Clinic photo is a wide shot with the doctor and patient off to
     the right of frame and empty counter/wall filling the left — the
     default center crop left too much of that empty space in and pushed
     both people toward the square crop's right edge. Shift the crop right
     so they sit centered instead. */
  #mk-panel-christclinic .mk-panel-media img { object-position: 68% 40%; }

  /* Partner Organizations photo (backpacking team) — the default center
     crop cut the last hiker on the right almost entirely out of frame.
     Shift the crop right so he reads as part of the group again, without
     pushing the first hiker out the other side. */
  #mk-panel-partners .mk-panel-media img { object-position: 80% 50%; }

  /* One-to-One Care photo is a tall portrait; shift the square crop down so the
     lobby TV at the top of the frame is cropped out and the hug stays centered. */
  #mk-panel-onetoone .mk-panel-media img { object-position: 50% 66%; }

  /* Visitation photo is a tall portrait; shift the square crop down a little so
     both people's heads and the hand on her back all stay in frame. */
  #mk-panel-visitation .mk-panel-media img { object-position: 50% 55%; }

  .mk-panel-text {
    /* min-width: 0 — same grid-blowout fix as .mk-panel-media above: without
       it this column's default auto min-width refuses to shrink below its
       content's single-line width, so a long heading (or, on Global
       Missions' "Partner Organizations" tab, the 3-up org row) pushes the
       column wider than the card instead of wrapping at narrow widths. */
    min-width: 0;
    padding: 48px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mk-panel-when {
    display: inline-block;
    align-self: flex-start;
    background: var(--cream-dark);
    color: var(--light-blue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
  }

  .mk-panel-text h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--dark-blue);
    margin-bottom: 16px;
  }

  .mk-panel-text p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #5a6070;
    margin-bottom: 24px;
  }

  /* Sub-sections inside a single tab panel (e.g. the two women's studies). */
  .mk-panel-text .mk-panel-sub {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--dark-blue);
    margin-bottom: 4px;
  }

  .mk-panel-subwhen {
    display: block;
    color: var(--light-blue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
  }

  /* Panels that stack several sub-sections run taller than the square photo,
     so let the panel grow and tighten the type to keep it close. The photo
     keeps its own natural proportions instead of stretching to match (a
     landscape shot force-cropped into a tall portrait would cut into
     people's heads or feet), and centers in the leftover vertical space
     rather than pinning to the top with a gap underneath. */
  .mk-panel--stack .mk-panel-media { aspect-ratio: auto; align-self: center; }
  .mk-panel--stack .mk-panel-text { padding-top: 40px; padding-bottom: 40px; }
  .mk-panel--stack .mk-panel-text h3 { margin-bottom: 22px; }
  .mk-panel--stack .mk-panel-text p {
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 22px;
  }

  /* Global Missions — "Engage With Missions": the trip name and dates read
     as one tight line (same size/color, not a title over a separate pill
     badge), and the whole card sits closer together than the default
     roomy panel spacing — it's meant to scan like a quick trip listing,
     not read like prose. */
  #mk-panel-engage .mk-panel-text h3 { margin-bottom: 10px; }
  #mk-panel-engage .mk-panel-sub { margin-bottom: 10px; }
  #mk-panel-engage .mk-panel-text p { margin-bottom: 14px; }
  #mk-panel-engage .mk-panel-more { margin-top: 2px; }


  /* Global Missions — "Partner Organizations" list: Josiah Venture, East-
     West and Refugee Oasis stacked as three short lines (name, one simplified
     sentence, link) rather than three narrow side-by-side columns — each
     line reads across in one horizontal sweep instead of wrapping heavily
     in a cramped column, and the stack stays well inside the square photo's
     height.

     A single line of name + sentence + link wraps less the more width it
     gets, so this page's card still runs wider than the shared 1100px cap
     every other ministry page uses (scoped via :has() to this page's
     unique panel ids, so nothing else changes). The photo column is pinned
     to a fixed 550px — the same square size every other tab's photo
     already is — rather than growing with the wider card, so ALL of the
     extra width goes to the text side and the card's height never changes
     switching between tabs. */
  .mk-programs-inner:has(#mk-panel-partners) { max-width: 1320px; }

  /* Desktop only — below 900px .mk-panel switches to a single stacked
     column (see the responsive section), and a fixed 550px photo column
     would just overflow a phone-width screen instead of stacking. */
  @media (min-width: 901px) {
    #mk-panel-partners.mk-panel,
    #mk-panel-missionaries.mk-panel,
    #mk-panel-engage.mk-panel {
      grid-template-columns: 550px minmax(0, 1fr);
    }
  }

  .mk-panel-text--orgs { padding-top: 42px; padding-bottom: 42px; }
  .mk-panel-text--orgs h3 { margin-bottom: 20px; }

  /* Three stacked lines, name + one simplified sentence + link, instead of
     the old heading-then-paragraph block per org. */
  .mk-org-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mk-org-line {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .mk-org-name {
    font-weight: 700;
    color: var(--dark-blue);
    text-decoration: none;
    transition: color 0.2s;
  }

  .mk-org-name:hover,
  .mk-org-name:focus-visible {
    color: var(--light-blue);
    text-decoration: underline;
  }

  .mk-panel-link {
    align-self: flex-start;
    color: var(--light-blue);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
  }

  .mk-panel-link:hover { color: var(--gold); }

  /* Wrapper for a panel with two CTAs side by side (e.g. Care Ministry's
     "Request a Care Minister" / "Become a Care Minister") instead of the
     usual single .mk-panel-link. Wraps to its own line on narrow screens
     rather than the two links crowding or overlapping. */
  .mk-panel-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
  }

  /* Non-clickable variant, for a program with no registration link yet */
  .mk-panel-link--soon {
    color: var(--muted);
    font-weight: 500;
    cursor: default;
  }

  /* Faith Kids — Midweek card simplified to match the Faith Students card:
     title, then a plain (non-pill) tagline, then a pill "More Info" button
     (.mk-panel-more, shared with Faith Students) instead of the long
     paragraph + arrow link. Scoped to #mk-panel-midweek specifically —
     Faith Kids' other three tabs (Sundays, Parent Equip, Child Dedication)
     keep the shared pill-badge .mk-panel-when and their own paragraphs. */
  #mk-panel-midweek .mk-panel-when {
    font-size: 1.3rem;
    background: none;
    padding: 0;
    border-radius: 0;
  }

  /* Generic no-photo hero variant: a flat color band instead of a hero
     photo, for any ministry page whose photo lives elsewhere on the page
     (e.g. a tabbed card below) instead of in the hero itself. Not currently
     used by a live page, but kept in place as a reusable option. */
  .mk-hero--no-photo::after { display: none; }
  /* Nav is a fixed 90px bar — padding-top must clear it or the title gets
     cut off behind it. 104px is the tightest safe value. */
  .mk-hero--no-photo { padding-top: 104px; padding-bottom: 6px; }
  .mk-hero--no-photo .mk-hero-head { padding-bottom: 6px; }
  .mk-hero--no-photo .mk-hero-title { margin-bottom: 12px; }
  .mk-hero--no-photo .mk-hero-sub { margin-bottom: 0; }

  /* Full-bleed photo hero (a single big photo behind the nav, with the
     title and blurb sitting on top of it, the way lifefellowship.tv's youth
     page does it) instead of the flat color band used elsewhere. Built for
     Faith Students, now shared by Frontliners too — any ministry page can
     opt into it instead of the flat band
     above. Nav is fixed with its own solid background, so the photo can run
     right up to the top of the viewport behind it — no top padding needed
     the way the flat band requires. min-height keeps it tall enough to feel
     like a full opening "poster" before the page scrolls into the programs
     card, without hard-coding a pixel height that would look wrong on
     unusual viewport heights. */
  .mk-hero--fs-photo {
    position: relative;
    min-height: 88vh;
    padding: 90px 48px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-blue);
    overflow: hidden;
    text-align: center;
  }

  .mk-hero--fs-photo::after { display: none; }

  .mk-hero-fs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .mk-hero-fs-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The tallest student's head sits almost at the very top edge of this
       photo, with almost no margin above her hair — even a small top-biased
       crop (previously 15%) was still enough to clip into her head on wide
       screens. Pinning to 0% shows the full top of the photo and takes all
       the cropping from the bottom (chairs/table), which is safe to lose. */
    object-position: 50% 0%;
    display: block;
  }

  /* Flat dark overlay so white text stays readable wherever it sits on the
     photo — the title and blurb are centered now rather than pinned to the
     bottom, so the whole frame needs even contrast instead of just the
     bottom edge. */
  .mk-hero-fs-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26,29,48,0.55);
  }

  .mk-hero-fs-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
  }

  /* Centered and considerably larger than the shared .mk-hero-title — this
     hero has nothing else sharing the frame with it, so the title can be
     the whole show the way it is on lifefellowship.tv's youth page. */
  .mk-hero--fs-photo .mk-hero-title {
    font-size: clamp(4.2rem, 13vw, 9.5rem);
    margin-bottom: 6px;
  }

  /* "Discipleship" is a single unbreakable word much wider than any other
     page's longest word ("Students", "Outreach", "Adults") — the shared
     4.2rem floor above is sized for those and is wide enough on its own
     to clip "Discipleship" off the edge of a phone screen before the line
     ever gets a chance to wrap after "Adult". Same scale and ceiling as
     the shared rule, just a lower floor so it keeps shrinking with the
     viewport a little further before wrapping kicks in. */
  .mk-hero--fs-photo .mk-hero-title--long {
    font-size: clamp(2.5rem, 13vw, 9.5rem);
  }

  /* "Missions" alone is shorter than "Discipleship" but still wide enough
     at the shared 4.2rem floor to clip off a narrow phone screen before
     wrapping after "Global". Same fix, smaller adjustment — a floor partway
     between the shared default and Adult Discipleship's. */
  .mk-hero--fs-photo .mk-hero-title--long-md {
    font-size: clamp(3.4rem, 13vw, 9.5rem);
  }

  /* Global Missions — "Global Missions" reads better as one line than two
     once there's room for it. Paired with --long-md above, which still
     handles the phone-width wrap safely; from tablet width up, this takes
     over instead, shrinking a bit faster than the shared 13vw rate and
     widening the hero's centered column (via :has, so no extra class is
     needed on the section) so the full phrase fits on a single line without
     ever reaching the shared 900px cap that the wrap-friendly pages rely on.
     white-space: nowrap is a belt-and-suspenders guard — the sizing alone
     already keeps it on one line at every width from 901px up. */
  @media (min-width: 901px) {
    .mk-hero--fs-photo:has(.mk-hero-title--oneline-lg) .mk-hero-fs-inner {
      max-width: 1300px;
    }

    .mk-hero--fs-photo .mk-hero-title--oneline-lg {
      font-size: clamp(6rem, 10.8vw, 9.5rem);
      white-space: nowrap;
    }
  }

  .mk-hero--fs-photo .mk-hero-sub {
    color: rgba(255,255,255,0.85);
    max-width: none;
    white-space: nowrap;
    margin: 0 auto;
  }

  /* Faith Kids &mdash; this subtitle runs noticeably longer than Faith
     Students' or Frontliners', so forcing it onto one line (the shared
     default above) would spill it past the screen edge on desktop instead
     of wrapping. Letting it wrap to two lines here instead of trimming the
     real copy down to fit. */
  .mk-hero--fs-photo-wrap .mk-hero-sub {
    white-space: normal;
    max-width: 640px;
  }

  /* Adult Discipleship — its subtitle was trimmed down short enough to read
     better as one line than wrapped, same treatment as the shared
     non-wrap pages get by default, just opted back in here with its own
     modifier since this page's hero otherwise wraps long subtitles. */
  .mk-hero--fs-photo-wrap .mk-hero-sub--oneline {
    white-space: nowrap;
    max-width: none;
  }

  /* Faith Students — the programs card now sits between the Details bar
     above it and the closing CTA below it (moved there so Get Connected /
     Stay Connected come first), so its background bridges the other way
     from before: cream-dark up top, matching the Details bar it follows,
     and --dark-blue on the bottom half, matching the CTA section right
     after it. Same "half-in/half-out" card effect as before, just flipped
     to match the new neighbors. Top and bottom padding both a plain 50px
     — the page's standard section gap — since there's no longer a hero's
     own spacing quirk to compensate for on one side. */
  #mk-programs.mk-programs--fs {
    padding-top: 50px;
    padding-bottom: 50px;
    background: linear-gradient(
      to bottom,
      var(--cream-dark) 0,
      var(--cream-dark) 50%,
      var(--dark-blue) 50%,
      var(--dark-blue) 100%
    );
  }

  /* Local Outreach & Global Missions — the navy lower half of the split
     above read as a stripe behind the card rather than an intentional
     block, so these two pages drop it in favor of one flat cream-dark
     background behind the whole card. */
  #mk-programs.mk-programs--fs.mk-programs--solid {
    background: var(--cream-dark);
  }

  /* Card was reading very long/tall with a lot of empty space in the text
     column, because the shared square (1:1) photo forced the text panel to
     match its height even though the text itself is short. Shortened the
     photo to the same 4:3 the card already switches to on mobile, which
     brings the whole card's height (and the empty space beside the text)
     down with it. */
  #mk-programs.mk-programs--fs .mk-panel-media { aspect-ratio: 4 / 3; }

  /* Frontliners — the "Get Involved" head block now sits below the card in
     this same section (moved there from above it). The split lands at the
     card's own vertical center, same "half-in cream, half-in navy" card
     effect every other mk-programs section uses, which conveniently also
     puts the whole head block on the navy lower portion. Its dark-on-cream
     text colors are overridden to light-on-navy just below. Separate value
     for the stacked mobile layout further down, where the card takes
     relatively more of the section's height. */
  #mk-programs.mk-programs--fs:has(.mk-card + .mk-programs-head) {
    background: linear-gradient(
      to bottom,
      var(--cream-dark) 0,
      var(--cream-dark) 31%,
      var(--dark-blue) 31%,
      var(--dark-blue) 100%
    );
  }

  #mk-programs.mk-programs--fs:has(.mk-card + .mk-programs-head) .mk-programs-head .section-title {
    color: var(--white);
  }

  #mk-programs.mk-programs--fs:has(.mk-card + .mk-programs-head) .mk-programs-head .section-body {
    color: rgba(255,255,255,0.65);
  }

  /* Panels that carry a full description paragraph have a text column tall
     again like the other ministry pages' tabs — the 4/3 photo above was
     tuned for short text and, once the row stretches to match a taller
     column, was skewing wider than its 1fr track instead of staying square,
     crowding the text column next to it. Back to the shared square crop for
     these panels (Faith Students' two tabs, and Frontliners' single card). */
  #mk-programs.mk-programs--fs #mk-panel-hs .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-ms .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-frontliners .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-sundays .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-parents .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-dedications .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-classes .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-men .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-women .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-primetime .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-horizons .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-serve68 .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-alpha .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-christclinic .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-table .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-youngadults .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-partners .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-missionaries .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-engage .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-refugeeoasis .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-onetoone .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-marriage .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-visitation .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-worshipteam .mk-panel-media,
  #mk-programs.mk-programs--fs #mk-panel-techteam .mk-panel-media { aspect-ratio: 1 / 1; }

  /* Tab bar — inverted from the shared navy-bar/white-active-tab scheme:
     here the bar itself is white and the active tab is the navy block, so
     it reads as "blue tab sitting on a white strip" instead of "white tab
     on a blue strip." Every piece needs its own override since the shared
     rules assume the opposite pairing. */
  #mk-programs.mk-programs--fs .mk-tablist { background: var(--white); }
  #mk-programs.mk-programs--fs .mk-tab { color: var(--dark-blue); font-weight: 600; }
  #mk-programs.mk-programs--fs .mk-tab:hover { color: var(--dark-blue); background: rgba(37,41,69,0.06); }
  #mk-programs.mk-programs--fs .mk-tab[aria-selected="true"] { background: var(--dark-blue); color: var(--white); }

  /* Faith Students — "Our Ministries" list was removed from the details bar,
     leaving Ministry Leader and Get Connected. This section now runs right
     after the photo hero (no flat-color band above it to share a padding
     boundary with), so it needs its own real top gap — 50px, the page's
     standard. Bottom padding is 0 rather than a second 50px: the section
     below (the programs card) opens with the same --cream-dark background,
     so the two read as one continuous block and its own top padding is what
     supplies the visible gap down to the card, the same trick this used to
     play with #mk-programs's bottom padding when the order ran the other
     way. Background matched to #mk-programs's top half for that reason. */
  #mk-details.mk-details--fs { padding-top: 50px; padding-bottom: 0; background: var(--cream-dark); }
  .mk-details--fs .mk-fact-label { margin-bottom: 5px; }

  /* Faith Students — pulled the "Get Involved" group up so it sits 50px
     below the top edge of the navy section instead of the shared 88px,
     matching the page's standard 50px section spacing. Bottom padding
     trimmed to 20px (note: the shared footer below adds its own 64px top
     padding on top of this, so the real visual gap down to "Quick Links" is
     closer to 84px — left the footer itself untouched since it's shared
     across every page). */
  #mk-cta.mk-cta--fs { padding-top: 50px; padding-bottom: 20px; }

  /* Bigger tagline under each tab's title ("Sunday Nights at Faith"), sized
     to still fit on one line down to phone widths (see mobile override
     below). Dropped the pill background/padding from the shared
     .mk-panel-when so the text sits flush-left under the title instead of
     looking like a clickable badge — the actual link moved to the
     "More Info" button below it. */
  #mk-programs.mk-programs--fs .mk-panel-when {
    font-size: 1.3rem;
    background: none;
    padding: 0;
    border-radius: 0;
  }

  /* Title was reading small next to the big square photo and the button —
     bumped up so the text block feels proportionate to the rest of the card,
     and again here since the text column still ran short of the photo's
     height and left too much empty space above and below it. */
  #mk-programs.mk-programs--fs .mk-panel-text h3 { font-size: 3.4rem; }

  /* Grade range under the title, above the meeting tagline. */
  .mk-panel-grades {
    display: block;
    color: var(--muted);
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 8px;
  }

  /* The Church Center link, now a real button under the tagline instead of
     living on the tagline text itself. Sized down from the shared
     .btn-primary — that padding is tuned for a hero/CTA button and read as
     way too long next to two words like "More Info". Rounded to a full pill
     (rather than the shared 4px corner) so it reads as a button and not a
     rectangular chip. */
  .mk-panel-more {
    align-self: flex-start;
    margin-top: 14px;
    padding: 12px 26px;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    border-radius: 999px;
  }

  /* ─── Closing CTA ──────────────────────────────────── */
  #mk-cta {
    background: var(--dark-blue);
    padding: 88px 48px;
    text-align: center;
  }

  .mk-cta-inner { max-width: 660px; margin: 0 auto; }
  .mk-cta-inner .section-title { color: var(--white); }

  .mk-cta-inner p {
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
    margin-bottom: 32px;
  }

  .mk-cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ─── Local Outreach — closing Ministry Leader block ──
     Replaces this page's closing CTA: the Ministry Leader card from the
     top details section, moved down to sit on its own, centered,
     underneath the ministry cards. Same cream background/padding scale
     as #mk-cta above so the page still reads as having an intentional
     closing section. inline-block + text-align: center centers the
     whole card as a unit (same trick as .mk-facts--1 .mk-fact above),
     so the "Ministry Leader" label stays sitting right over the photo
     instead of centering against the full width of the section. */
  #mk-leader-bottom {
    background: var(--cream-dark);
    padding: 70px 48px;
    text-align: center;
  }

  #mk-leader-bottom .mk-fact--leader {
    display: inline-block;
    text-align: left;
  }

  /* Standing alone as its own closing section (rather than one of two
     facts in a tight row up top), this card has the room to read much
     larger — bump up the photo and every line of text so it's easy to
     take in at a glance instead of looking like a small leftover detail. */
  #mk-leader-bottom .mk-leader { gap: 22px; }

  #mk-leader-bottom .mk-leader img {
    width: 120px;
    height: 120px;
    border-width: 4px;
  }

  #mk-leader-bottom .mk-leader-name { font-size: 2rem; margin-bottom: 6px; }
  #mk-leader-bottom .mk-leader-role { font-size: 1.05rem; }
  #mk-leader-bottom .mk-leader-email { font-size: 1.05rem; margin-top: 6px; }

  /* ─── Prayer page — resource lists ────────────────────
     Short lists of prayer-related links (events, the missionary prayer
     guide, sign-up forms) that don't fit the single-card Frontliners layout
     or the multi-tab ministry layout — just plain titled cards, alternating
     light/dark with the sections around them the same way the rest of the
     site's closing sections do. */
  .mk-prayer-section { padding: 88px 48px; background: var(--cream); }
  .mk-prayer-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
  .mk-prayer-head { max-width: 640px; margin: 0 auto 44px; }
  .mk-prayer-head .section-title { color: var(--dark-blue); }

  /* "Join In" kicker over Opportunities to Pray Together reads a size up
     from the sitewide section-label default. */
  #mk-opportunities .section-label { font-size: 2.1rem; }

  .mk-prayer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
  }
  .mk-prayer-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1020px; }

  .mk-prayer-card {
    background: var(--white);
    border-radius: 14px;
    padding: 32px 28px;
    text-align: left;
    box-shadow: 0 14px 36px rgba(26,29,48,0.08);
  }
  .mk-prayer-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    color: var(--dark-blue);
    margin-bottom: 10px;
  }
  .mk-prayer-card p { color: #5a6070; line-height: 1.7; }
  .mk-prayer-card p a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(37,96,159,0.3);
    transition: color 0.2s, border-color 0.2s;
  }
  .mk-prayer-card p a:hover { color: var(--light-blue); border-color: var(--light-blue); }

  /* Prayer page color blocking: alternate light / dark / light down the
     page. "Share a Request" flips the shared cream section to dark navy
     (title color following suit; the gold section-label and white cards
     already work on either background). The closing CTA right below it
     flips the opposite way, from its usual dark navy to light, so the two
     don't run together as one long dark block. */
  .mk-prayer-section--dark { background: var(--dark-blue); }
  .mk-prayer-section--dark .section-title { color: var(--white); }

  #mk-cta.mk-cta--light { background: var(--cream); }
  .mk-cta--light .section-title { color: var(--dark-blue); }
  .mk-cta--light .mk-cta-inner p { color: var(--muted); }

  /* ─── Responsive ───────────────────────────────────── */
  @media (max-width: 900px) {
    .mk-hero { padding: 130px 24px 0; }
    .mk-hero::after { height: 120px; }
    .mk-hero-head { padding-bottom: 40px; gap: 26px; }
    .mk-hero-cta { padding: 16px 32px; }
    .mk-hero-photo { border-radius: 16px; aspect-ratio: 4 / 3; }

    /* Faith Students' full-bleed hero overrides the generic .mk-hero mobile
       padding above — it doesn't need the 130px top clearance that trick
       reserves for a title sitting directly on a flat color band, since the
       photo already runs behind the nav. Shorter on a phone screen too;
       88vh of a short phone is a lot of scrolling before anyone sees the
       programs card. */
    .mk-hero--fs-photo { padding: 90px 24px 48px; min-height: 70vh; }
    /* The full sentence only fits on one line down to about tablet width —
       narrower than that there isn't room, so let it wrap back to normal
       rather than spilling past the edges of the photo. */
    .mk-hero--fs-photo .mk-hero-sub { white-space: normal; max-width: 480px; }

    #mk-details { padding: 40px 24px 70px; }
    .mk-facts { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    #mk-programs { padding: 70px 24px; }
    .mk-panel { grid-template-columns: 1fr; }
    .mk-panel-media { aspect-ratio: 4 / 3; }
    .mk-panel-text { padding: 34px 26px; }

    /* Global Missions — "Partner Organizations": the shared 3.4rem tab
       heading is sized for a short name like "Josiah Venture", and
       "Organizations" alone is too wide a word to fit a phone column at
       that size. Drop back to the smaller shared heading size. (The org
       list itself is already a single stacked column at every width.) */
    #mk-programs.mk-programs--fs .mk-panel-text--orgs h3 { font-size: 2.1rem; }

    /* Frontliners — the card takes up relatively more of the section's
       total height once everything stacks to one column, so the split
       needs a smaller shift than on desktop to keep landing at the card's
       center (see the desktop override above for the full explanation). */
    #mk-programs.mk-programs--fs:has(.mk-card + .mk-programs-head) {
      background: linear-gradient(
        to bottom,
        var(--cream-dark) 0,
        var(--cream-dark) 35%,
        var(--dark-blue) 35%,
        var(--dark-blue) 100%
      );
    }

    /* Smaller breathing-room value than desktop's 100px — stacked mobile
       layout is already taller edge-to-edge, so the full desktop gap reads
       as too much extra scroll. */
    #mk-programs.mk-programs--fs:has(.mk-card + .mk-programs-head) .mk-programs-head {
      margin-top: 64px;
    }

    #mk-programs.mk-programs--fs .mk-panel-when { font-size: 0.83rem; }
    #mk-panel-midweek .mk-panel-when { font-size: 0.83rem; }
    #mk-cta { padding: 70px 24px; }

    .mk-prayer-section { padding: 64px 24px; }
    .mk-prayer-grid, .mk-prayer-grid--3 { grid-template-columns: 1fr; max-width: 420px; }

    /* "Elizabeth Smith" at the full 2rem desktop size wraps to two lines
       next to the photo on a phone-width screen — scale the name down
       just enough to keep it on one line while staying noticeably larger
       than the old small-card size. */
    #mk-leader-bottom { padding: 54px 24px; }
    #mk-leader-bottom .mk-leader-name { font-size: 1.5rem; }
    #mk-leader-bottom .mk-leader img { width: 92px; height: 92px; }
  }

  /* Between 900px and the card's full width the text column gets narrow while
     the square photo fixes the panel height. Tighten the type a little so the
     longest panel still fits inside the square and every tab stays the same
     height. */
  @media (min-width: 901px) and (max-width: 1140px) {
    .mk-panel-text { padding: 34px 30px; }
    .mk-panel-text p { font-size: 0.92rem; line-height: 1.68; margin-bottom: 18px; }
    .mk-panel-when { margin-bottom: 14px; }
  }

  @media (max-width: 560px) {
    .mk-facts { grid-template-columns: 1fr; }
    .mk-tab { padding: 14px 16px; font-size: 0.85rem; }
    .mk-tablist { padding: 8px 8px 0; }
  }

  /* Worship hero photo: at phone widths this image is cropped horizontally
     (tall narrow frame vs. a wide photo), and the default center position
     pushes the crop past the keyboard player on the left, hiding the piano.
     Shifting left keeps the piano in frame; the guitarist on the right was
     already only partly visible at this width either way. */
  @media (max-width: 560px) {
    .mk-hero-fs-bg img.mk-hero-worship-img { object-position: 20% 0%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mk-panel.is-active { animation: none; }
    .mk-hero-cta:hover { transform: none; }
  }