/* ==========================================================================
   Manila World Mission Christian Church Inc. — Stylesheet
   Vibe: Editorial Luxury (warm cream ground, espresso ink, warm gold accent)
   --------------------------------------------------------------------------
   TO CHANGE THE ACCENT COLOUR: edit --accent (and --accent-deep) below.
   Everything else derives from it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Accent: warm gold. Swap these two for a deep blue if preferred, e.g.
         --accent: #2C4A6E;  --accent-deep: #1D3149;  --- */
  --accent: #B08243;
  --accent-deep: #8C6531;
  /* Soft accent tint, used behind the icon tiles on the Connect page. */
  --accent-wash: rgba(176, 130, 67, 0.13);

  /* Ground & ink */
  --ground: #FDFBF7;
  --ground-2: #F7F2E9;
  --ground-3: #EFE8DB;
  --ink: #2A2320;
  --ink-soft: #6B5F57;
  --ink-faint: #9A8F86;
  --sage: #8A9A85;

  /* Hairlines & shells (no generic grey borders) */
  --hairline: rgba(42, 35, 32, 0.09);
  --hairline-strong: rgba(42, 35, 32, 0.16);
  --shell: rgba(42, 35, 32, 0.035);
  --shell-warm: rgba(176, 130, 67, 0.07);

  /* Diffused ambient shadows — never harsh */
  --lift-sm: 0 1px 2px rgba(42, 35, 32, 0.04), 0 4px 14px -6px rgba(42, 35, 32, 0.08);
  --lift-md: 0 2px 4px rgba(42, 35, 32, 0.03), 0 14px 40px -18px rgba(42, 35, 32, 0.16);
  --lift-lg: 0 4px 10px rgba(42, 35, 32, 0.03), 0 30px 70px -32px rgba(42, 35, 32, 0.24);
  --inner-lip: inset 0 1px 1px rgba(255, 255, 255, 0.6);

  /* Radii — exaggerated squircles, concentric */
  --r-shell: 2rem;
  --r-core: 1.625rem; /* calc(2rem - 0.375rem) */
  --r-pill: 999px;

  /* Motion — spring-weighted, never linear/ease-in-out */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 700ms;

  /* Layering discipline.
     The nav deliberately sits ABOVE the menu overlay so the floating pill stays
     visible while the menu is open and its burger can morph into the close (X)
     control. Without this the overlay hides the only way to close the menu. */
  --z-grain: 90;
  --z-overlay: 200;
  --z-nav: 210;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  /* Applied top AND bottom, so the space between two sections is double this.
     At 11rem that produced 352px of dead space between sections on wide
     screens, which read as the page being broken apart. */
  --section-y: clamp(4rem, 6.5vw, 6.5rem);
  --measure: 62ch;

  /* How far the info strip rides up over the hero, and the clear space kept
     between the hero's buttons and the strip. The hero reserves
     (--strip-overlap + --hero-foot) as bottom padding, so these can be retuned
     without the strip ever colliding with the CTAs. */
  --strip-overlap: clamp(2.5rem, 5vw, 4.5rem);
  --hero-foot: clamp(3rem, 7vh, 4.5rem);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is only `display:none` at low specificity, so any
   author rule that sets display (.nav__mark--fallback uses grid, .menu uses
   grid) silently defeats the hidden attribute. This restores it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* Visible, on-brand focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: calc(var(--z-overlay) + 10);
  background: var(--ink);
  color: var(--ground);
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  transition: transform 400ms var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. FILM GRAIN — fixed, pointer-events-none (never on scrolling containers)
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: min(1200px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.wrap--narrow { width: min(880px, 100% - (var(--gutter) * 2)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--ground-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  background: var(--shell-warm);
  box-shadow: inset 0 0 0 1px rgba(176, 130, 67, 0.16);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.section-head { max-width: 46ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-head h2 { font-size: clamp(2.1rem, 1.4rem + 3.1vw, 3.9rem); }
.section-head p {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  max-width: var(--measure);
}

.lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   5. DOUBLE-BEZEL (nested shell + core)
   -------------------------------------------------------------------------- */
.bezel {
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-radius: var(--r-shell);
  padding: 0.5rem;
}
.bezel__core {
  background: var(--ground);
  border-radius: var(--r-core);
  box-shadow: var(--inner-lip), var(--lift-sm);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  height: 100%;
}
.bezel--warm { background: var(--shell-warm); box-shadow: inset 0 0 0 1px rgba(176, 130, 67, 0.18); }
.bezel--flush .bezel__core { padding: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   6. BUTTONS — pill + nested "button-in-button" trailing icon
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  padding: 0.6rem 0.6rem 0.6rem 1.5rem;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(0.98); }

.btn__ico {
  width: 2rem; height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn__ico svg { width: 14px; height: 14px; }

.btn:hover .btn__ico { transform: translate(4px, -1px) scale(1.05); }

.btn--primary {
  background: var(--ink);
  color: var(--ground);
  box-shadow: var(--lift-md);
}
.btn--primary .btn__ico { background: rgba(255, 255, 255, 0.14); }
.btn--primary:hover { background: #1E1815; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.btn--ghost .btn__ico { background: var(--shell); }
.btn--ghost:hover { background: var(--shell); }

.btn--ondark {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.5);
}
.btn--ondark .btn__ico { background: var(--shell); }
.btn--ondark:hover { background: #fff; }

/* Outlined button sitting on top of the hero footage */
.btn--ghost-ondark {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.btn--ghost-ondark .btn__ico { background: rgba(255, 255, 255, 0.14); }
.btn--ghost-ondark:hover { background: rgba(255, 255, 255, 0.12); }

.btn--wide { padding-inline: 1.75rem 0.6rem; }

/* Plain text link with animated rule */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent-deep);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tlink:hover { background-size: 40% 1px; }

/* --------------------------------------------------------------------------
   7. NAV — floating glass pill, detached from top
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: max-content;
  max-width: calc(100% - 1.5rem);
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(253, 251, 247, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), var(--lift-md);
  transition: transform 800ms var(--ease), box-shadow 800ms var(--ease);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}
/* 40px rather than 34: the real seal carries a ring of lettering and needs a
   little more room to read as a mark. border-radius is belt-and-braces — the
   PNG is already circularly masked. */
.nav__mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 40px;
}
/* Typographic fallback shown when logo.png is absent */
.nav__mark--fallback {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--ground);
  font-family: "Fraunces", serif;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.nav__name {
  font-family: "Fraunces", serif;
  font-size: 0.9375rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.nav__name span { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }

.nav__links { display: none; align-items: center; gap: 1.75rem; }
.nav__links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 400ms var(--ease);
}
.nav__links a:hover { color: var(--ink); }

.nav__cta { display: none; white-space: nowrap; }

/* Hamburger — morphs to a true X */
.burger {
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--shell);
  cursor: pointer;
  position: relative;
  flex: 0 0 42px;
  transition: background-color 400ms var(--ease);
}
.burger:hover { background: var(--hairline); }
.burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 600ms var(--ease), opacity 300ms var(--ease);
}
.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%, 4px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* Full-screen menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(253, 251, 247, 0.86);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);
  backdrop-filter: blur(36px) saturate(1.4);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  /* The exit gets its own, more even curve. --ease front-loads ~97% of its
     change into the first 50ms: perfect for the entrance, but on the way out
     it makes the overlay vanish instantly and then crawl through the last 3%,
     which reads as a snap rather than a fade. */
  transition: opacity 400ms cubic-bezier(0.33, 0, 0.2, 1), visibility 0s linear 400ms;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease), visibility 0s; }

.menu__inner { text-align: center; padding: var(--gutter); }

/* The staggered reveal applies to every item in the overlay, CTA included. */
.menu__inner a {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), color 300ms var(--ease);
}

/* Navigation links only — the CTA is excluded so it keeps .btn's own sizing.
   Sized well below the previous clamp(1.9rem, 8vw, 3rem): at that size six
   links plus the button overflowed short screens, pushing "Media" and the CTA
   off the bottom of the overlay entirely. */
.menu__inner a:not(.menu__cta) {
  display: block;
  font-family: "Fraunces", serif;
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  padding: 0.3em 0;
}
.menu.is-open .menu__inner a { opacity: 1; transform: translateY(0); }
.menu__inner a:nth-child(1) { transition-delay: 100ms; }
.menu__inner a:nth-child(2) { transition-delay: 150ms; }
.menu__inner a:nth-child(3) { transition-delay: 200ms; }
.menu__inner a:nth-child(4) { transition-delay: 250ms; }
.menu__inner a:nth-child(5) { transition-delay: 300ms; }
.menu__inner a:nth-child(6) { transition-delay: 350ms; }
.menu__inner a:nth-child(7) { transition-delay: 400ms; }
.menu__inner a:not(.menu__cta):hover { color: var(--accent-deep); }

/* Mirrors the header CTA, which is hidden below 1000px — without this the
   button simply disappears on the very screens that use this menu. */
.menu__cta {
  display: flex;
  justify-content: center;
  width: min(300px, 100%);
  margin: 1.9rem auto 0;
  padding-inline: 1.5rem 0.6rem;
}

/* 1000px, not 900: with six links and the longer "Connect with Us" label the
   pill runs out of room around 905px and the CTA wraps onto two lines, which
   distorts the whole bar. Below this the burger menu takes over instead. */
@media (min-width: 1000px) {
  .nav { padding-right: 0.5rem; }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;           /* never 100vh — avoids iOS Safari jump */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #1A1512;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Warm scrim — keeps text at AA contrast over moving footage */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 15, 12, 0.92) 0%, rgba(20, 15, 12, 0.62) 32%, rgba(20, 15, 12, 0.28) 62%, rgba(20, 15, 12, 0.45) 100%),
    radial-gradient(120% 80% at 20% 100%, rgba(120, 78, 30, 0.35) 0%, transparent 60%);
}

.hero__inner {
  position: relative;
  width: min(1200px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
  /* Bottom padding reserves the strip's overlap plus a clear gap, so the CTAs
     are never covered by the strip that rides up over the hero. */
  padding-block: clamp(7rem, 14vh, 10rem) calc(var(--strip-overlap) + var(--hero-foot));
  color: #fff;
}

.hero .eyebrow {
  color: #F4E3C6;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.hero .eyebrow::before { background: #E8C88A; }

.hero h1 {
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.5rem);
  max-width: 15ch;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: #F0D9AE;
}

.hero__sub {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.6;
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Video pause/play — accessibility control for motion */
.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--strip-overlap) + var(--hero-foot));
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition: background-color 400ms var(--ease), transform 400ms var(--ease);
}
.hero__toggle:hover { background: rgba(255, 255, 255, 0.22); }
.hero__toggle:active { transform: scale(0.94); }
.hero__toggle svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   9. INFO STRIP (visit-at-a-glance)
   -------------------------------------------------------------------------- */
.strip { margin-top: calc(var(--strip-overlap) * -1); position: relative; z-index: 2; }

/* The strip's shell straddles the dark hero and the cream page, so it must be
   OPAQUE. A translucent shell (the default .bezel) tints only the half sitting
   on the hero and disappears over the page, which reads as a broken frame. */
.strip .bezel {
  background: var(--ground-2);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--lift-lg);
}
.strip__grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}
.strip__cell {
  background: var(--ground);
  border-radius: var(--r-core);
  box-shadow: var(--inner-lip), var(--lift-sm);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.strip__cell h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}
.strip__cell p { font-size: 1rem; line-height: 1.5; }
.strip__cell a:hover { color: var(--accent-deep); }

@media (min-width: 780px) {
  .strip__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   11. EDITORIAL SPLIT
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--sticky > :first-child { position: sticky; top: 8rem; }
}

.stack { display: grid; gap: 1rem; }

/* Accordion-free disclosure cards for About */
.about-card h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-bottom: 0.75rem;
}
.about-card p { color: var(--ink-soft); font-size: 0.9688rem; }

/* --------------------------------------------------------------------------
   12. BENTO (ministries)
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento__feature { grid-column: span 7; }
  .bento__side { grid-column: span 5; }
  .bento__wide { grid-column: span 12; }
}

.feature-core { position: relative; overflow: hidden; }
.feature-core__body { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.feature-core h3 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  margin-bottom: 1rem;
}
.feature-core p { color: var(--ink-soft); max-width: 42ch; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.tag {
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Eight ministries read better in two columns than as one long list. */
.ministry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .ministry-list { grid-template-columns: 1fr 1fr; }
}
.ministry-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.875rem;
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.ministry-list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 5px;
}

/* --------------------------------------------------------------------------
   CONNECT PAGE (connect.html)
   -------------------------------------------------------------------------- */

/* Centred page header. Sits under the floating nav, so it needs extra top
   padding that the in-page sections do not. */
.page-head { padding-top: calc(var(--section-y) + 4.5rem); }
.page-head__inner { max-width: 40ch; margin-inline: auto; text-align: center; }
.page-head__inner h1 {
  font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0.9rem 0 0;
}
.page-head__inner p {
  margin-top: 1.15rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}

.connect-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .connect-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .connect-grid { grid-template-columns: repeat(4, 1fr); } }

/* Cards stretch to equal height and pin their button to the bottom, so a
   longer description on one card cannot leave its CTA floating mid-card. */
.connect-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.85rem 1.6rem 1.6rem;
  border-radius: 1.5rem;
  background: var(--ground-2);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--lift-sm);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease);
}
.connect-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--lift-lg);
}
.connect-card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 1rem;
  background: var(--accent-wash);
  color: var(--accent-deep);
  margin-bottom: 1.2rem;
}
.connect-card__icon svg { width: 24px; height: 24px; }
.connect-card h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
}
.connect-card p {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.connect-card__cta { margin-top: auto; }

.connect-foot {
  margin-top: 2.75rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* Service time — the single most-looked-for fact on a church site. */
.svc { display: grid; gap: 0.3rem; }
.svc__day {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.svc__time {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   13. MAP
   -------------------------------------------------------------------------- */
.map-frame { aspect-ratio: 16 / 11; width: 100%; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 5; } }

.note {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--shell-warm);
  box-shadow: inset 0 0 0 1px rgba(176, 130, 67, 0.18);
  font-size: 0.9063rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.note svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 3px; color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   14. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field .hint { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }

.field input,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--ground);
  border: 0;
  border-radius: 1rem;
  padding: 0.95rem 1.1rem;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--inner-lip);
  transition: box-shadow 400ms var(--ease), background-color 400ms var(--ease);
  width: 100%;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field input:focus,
.field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(176, 130, 67, 0.14);
}
.field textarea { min-height: 140px; line-height: 1.6; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.form__note { font-size: 0.8125rem; color: var(--ink-faint); max-width: 34ch; }

.form__status {
  border-radius: 0.875rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9063rem;
  line-height: 1.5;
  display: none;
}
.form__status.is-shown { display: block; }
.form__status[data-tone="ok"] {
  background: rgba(138, 154, 133, 0.14);
  box-shadow: inset 0 0 0 1px rgba(138, 154, 133, 0.4);
  color: #4A5A46;
}
.form__status[data-tone="err"] {
  background: rgba(168, 74, 51, 0.09);
  box-shadow: inset 0 0 0 1px rgba(168, 74, 51, 0.28);
  color: #8C3F2A;
}

/* --------------------------------------------------------------------------
   15. MEDIA / GALLERY
   -------------------------------------------------------------------------- */
.media-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .media-grid { grid-template-columns: 1.15fr 1fr; } }

.media-still { position: relative; }
.media-still img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(253, 251, 247, 0.72);
  padding-block: clamp(4rem, 8vw, 6rem) 2.5rem;
}
.footer a { color: rgba(253, 251, 247, 0.9); }
.footer a:hover { color: #F0D9AE; }

/* Four columns only once there is real room for them; two on tablets. */
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.75rem 2.5rem; } }
/* Four across only from 1180px. Below that the Visit column gets too narrow for
   "253 Lawin St., Barangay Rizal" and the address breaks mid-phrase; two wide
   columns read far better than four cramped ones. */
@media (min-width: 1180px) {
  .footer__grid { grid-template-columns: 1.3fr 1.25fr 0.95fr 1.15fr; gap: 2.75rem 2.25rem; }
}

/* Brand lockup — seal beside the name */
.footer__brand { display: flex; align-items: center; gap: 0.9rem; }
.footer__logo { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; object-fit: contain; }
.footer__blurb { margin-top: 1.15rem; max-width: 34ch; font-size: 0.9375rem; }

/* Social buttons — sized to the 44px minimum touch target */
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.social-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.07);
  box-shadow: inset 0 0 0 1px rgba(253, 251, 247, 0.14);
  color: rgba(253, 251, 247, 0.9);
  transition: background 320ms var(--ease), transform 320ms var(--ease), color 320ms var(--ease);
}
.social-btn svg { width: 19px; height: 19px; }
.social-btn:hover { background: rgba(253, 251, 247, 0.14); color: #F0D9AE; transform: translateY(-2px); }
.social-btn:active { transform: translateY(0) scale(0.97); }

/* Icon + text rows */
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; font-size: 0.9375rem; }
.footer__list li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.55; }
.ico { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 0.15rem; color: rgba(253, 251, 247, 0.5); }
.footer__svc { color: var(--ground); font-weight: 600; }
/* Aligns the trailing link with the text column above it, past the icon. */
.footer__cta { margin-top: 0.9rem; padding-left: 1.6rem; font-size: 0.9375rem; }

.footer h2, .footer h3 { color: var(--ground); }
.footer h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.45);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9375rem; }

.footer__mark { font-family: "Fraunces", serif; font-size: 1.375rem; line-height: 1.25; color: var(--ground); max-width: 20ch; }

.footer__base {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  box-shadow: inset 0 1px 0 rgba(253, 251, 247, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(253, 251, 247, 0.5);
}

.verify-footnote {
  border-radius: 0.75rem;
  padding: 0.8rem 1rem;
  background: rgba(240, 217, 174, 0.09);
  box-shadow: inset 0 0 0 1px rgba(240, 217, 174, 0.22);
  color: rgba(240, 217, 174, 0.9);
  font-size: 0.8125rem;
  margin-top: 2rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL (transform + opacity only)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(3rem);
  filter: blur(6px);
  transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft), filter 900ms var(--ease-soft);
}
.reveal.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .menu__inner a { opacity: 1; transform: none; }
}