/* BLMLSS Church — responsive layer.
   Pages are inline-styled, so these rules target the inline style strings
   directly and only take effect below the desktop breakpoints. */

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

/* Home hero: on phones and iPad mini the clouds crop sits lower in frame
   than the desktop position, so the horizon and light band stay in view. */
@media (max-width: 900px) {
  [style*="object-position: 50% 35%"] { object-position: 50% 58% !important; }
}
@media (max-width: 500px) {
  [style*="object-position: 50% 35%"] { object-position: 50% 78% !important; }
}

/* Safety net for anything still off-canvas at mobile sizes. Uses `clip`, not
   `hidden`: overflow:hidden on html/body turns the BODY into a scroll
   container, which breaks position:sticky pinning and viewport math on
   mobile Safari. `clip` crops without creating a scroller. */
html { overflow-x: clip; overflow-y: visible; scroll-padding-top: 84px; }
/* iOS Safari versions that shipped before `overflow: clip` existed (added in
   Safari 16) silently ignore the rule above and fall back to the default
   `visible` -- so whatever horizontal overflow this was meant to crop
   (hero sections, full-bleed photos) stays visible as a dark strip down the
   right edge, since it's the page's own background showing past the content.
   Give those browsers `hidden` instead; browsers that understand `clip`
   never see this rule at all. */
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

/* ---------- Tablet: 1024px and below ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.35fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 32px !important;
  }

  /* Copy columns stop pinning once stacked (header keeps its sticky) */
  [style*="position: sticky; top: 96px"],
  [data-sticky-copy] {
    position: static !important;
  }

  /* Pixel width/height left behind by a visual edit */
  [style*="width: 468px"] { width: auto !important; height: auto !important; }

  [style*="font-size: 116px"] { font-size: 76px !important; }
  [style*="font-size: 104px"] { font-size: 68px !important; }
  [style*="font-size: 96px"]  { font-size: 64px !important; }
  [style*="font-size: 72px"]  { font-size: 52px !important; }
  [style*="font-size: 60px"]  { font-size: 44px !important; }
  [style*="font-size: 56px"]  { font-size: 42px !important; }
  [style*="font-size: 52px"]  { font-size: 40px !important; }
  [style*="font-size: 44px"]  { font-size: 34px !important; }

  [style*="padding: 140px"] { padding-top: 96px !important; padding-bottom: 96px !important; }
  [style*="padding: 120px"] { padding-top: 88px !important; padding-bottom: 88px !important; }
  [style*="padding: 112px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding: 104px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding: 96px"]  { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* Hero: 100vh is far too tall once the viewport is portrait */
  [style*="min-height: 700px"] {
    height: 62vh !important;
    min-height: 460px !important;
    max-height: 680px !important;
  }
  [style*="padding-bottom: 40px"] { padding-bottom: 20px !important; }
}

/* The collage section collapses in step with the photo track below, so the
   copy sits above the pinned frame once there's no room beside it. */
@media (max-width: 1240px) {
  [style*="grid-template-columns: 1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Oasis "Our vision" shares that inline column string with the collage, so it
   inherited the collage's 1240px collapse — leaving its sticky heading pinned
   over a single-column stack, which read as the two texts overlapping. Hold
   two columns down to 1024px, then stack AND unpin together. */
@media (max-width: 1240px) {
  #main.blmlss-oasis-page > section:has([data-sticky-copy]) {
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 80px !important;
  }
}
@media (max-width: 1024px) {
  #main.blmlss-oasis-page > section:has([data-sticky-copy]) {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  #main.blmlss-oasis-page [data-sticky-copy] { position: static !important; }
}

/* Photo track: a tall column with a pinned frame inside it, so the copy
   beside it holds still while the three photos crossfade. Shorter travel and
   a shorter frame on small screens; unpinned entirely for reduced motion,
   where the scroll-driven crossfade never runs. */
@media (max-width: 1240px) {
  [data-photo-track] { height: 180svh !important; }
  /* The copy scrolls normally above the frame, but the frame still pins —
     that pin is the whole effect, so it must survive the stacked layout. */
  [data-photo-track] > div {
    position: sticky !important;
    top: 88px !important;
    max-width: 620px !important;
  }
  /* Width is capped, so aspect-ratio — not the viewport height — decides the
     shape. Without the cap the stacked frame spans the full content width and
     max-height flattens it into a letterbox sliver on short windows. */
  [data-photo-track] > div > div:first-child {
    aspect-ratio: 5 / 4 !important;
    max-height: none !important;
  }
}
@media (max-width: 700px) {
  [data-photo-track] { height: 160svh !important; }
  [data-photo-track] > div { top: 76px !important; max-width: none !important; }
  [data-photo-track] > div > div:first-child {
    aspect-ratio: 4 / 5 !important;
    max-height: 60svh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-photo-track] { height: auto !important; }
  [data-photo-track] > div { position: static !important; }
  [data-photo-track] > div > div:first-child {
    height: auto !important;
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Mobile: 700px and below ---------- */
@media (max-width: 700px) {
  section, footer, header > div:not([data-nav="panel"]) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* #ways-to-connect gets its inset from width + auto margins, not
     padding (it had none to begin with), so the rule above was adding
     20px of padding on top of its own 32px margin instead of replacing
     it -- 52px total, versus the 20px every other section on this page
     ends up with. Zero the added padding and pull the width-based inset
     down to the same 20px so the "ways to connect" list lines up with
     the Contact and By email sections below it. */
  #ways-to-connect {
    width: min(100% - 40px, 1240px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Form field pairs, footer link columns, paired CTAs */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Numbered belief entries */
  [style*="grid-template-columns: 56px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  [style*="font-size: 116px"] { font-size: 52px !important; }
  [style*="font-size: 104px"] { font-size: 46px !important; }
  [style*="font-size: 96px"]  { font-size: 44px !important; }
  [style*="font-size: 72px"]  { font-size: 38px !important; }
  [style*="font-size: 60px"]  { font-size: 34px !important; }
  [style*="font-size: 56px"]  { font-size: 32px !important; }
  [style*="font-size: 52px"]  { font-size: 30px !important; }

  [style*="padding: 140px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding: 120px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 112px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding: 104px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding: 96px"]  { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Hero fills the actual screen on a phone -- its bottom is the bottom of
     the visible viewport, not a fraction of it. 100vh is the fallback for
     browsers without dvh support; 100dvh (the line after) overrides it
     where supported and tracks Safari's collapsing address bar, so the
     hero doesn't over/undershoot depending on toolbar state. */
  [style*="min-height: 700px"] {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 380px !important;
    max-height: none !important;
  }
  [style*="padding-bottom: 40px"] { padding-bottom: 4px !important; }

  /* Any hard-coded pixel width would force a horizontal scrollbar */
  [style*="width: 641px"],
  [style*="width: 640px"] {
    width: auto !important;
    height: auto !important;
  }

  /* Prose measures */
  [style*="max-width: 900px"],
  [style*="max-width: 760px"],
  [style*="max-width: 640px"],
  [style*="max-width: 620px"] {
    max-width: 100% !important;
  }

  /* Tap targets */
  a[style*="padding: 16px 28px"],
  button[style*="padding: 16px 28px"] {
    padding: 15px 22px !important;
  }
}

/* ---------- Header: mobile nav ---------- */
[data-nav="burger"] { display: none; }

@media (max-width: 860px) {
  [data-nav="desktop"] { display: none !important; }
  [data-nav="burger"] { display: flex !important; }
  html.blmlss-menu-open { overflow: hidden; }
}

@media (min-width: 861px) {
  [data-nav="panel"] { display: none !important; }
}


/* ---------- House Church page ---------- */
@media (max-width: 1024px) {
  /* Sticky copy columns stop pinning once stacked. Keyed to the attribute,
     not the inline style — the photo track's wrapper shares that style string
     and must keep its sticky, since the pin is the whole effect. */
  [data-sticky-copy] { position: static !important; }

  /* Four Flows rows: numeral / title / body stack */
  [style*="grid-template-columns: 90px 260px 1fr"] {
    grid-template-columns: 56px 1fr !important;
    gap: 8px 20px !important;
  }
  [style*="grid-template-columns: 90px 260px 1fr"] > p {
    grid-column: 2 !important;
    margin-top: 8px !important;
  }

  /* Fixed pixel sizes from visual edits would force horizontal scroll */
  [style*="width: 1027px"], [style*="width: 1056px"],
  [style*="width: 1065px"], [style*="width: 1046px"],
  [style*="width: 918px"], [style*="width: 570px"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Photo scroller cards */
  .hc-scroller > div {
    width: 62vw !important;
    height: 420px !important;
  }
}

@media (max-width: 700px) {
  /* Two-up detail grids (When / Where / Periodically / How many) stack */
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  [style*="grid-template-columns: 90px 260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns: 90px 260px 1fr"] > p { grid-column: 1 !important; }

  [style*="font-size: 46px"] { font-size: 30px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }

  .hc-scroller > div {
    width: 86vw !important;
    height: 340px !important;
  }

  /* The photo scroller stays full-bleed */
  section:has(> .hc-scroller) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Full-bleed color panels keep their vertical breathing room */
  [style*="padding: 120px 48px"], [style*="padding: 140px 48px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* House Church photo reel */
@media (max-width: 700px) {
  .hc-reel-track > div { width: 78vw !important; height: 400px !important; }
}


/* ---------- Serialization fix ----------
   Browsers rewrite inline `minmax(0, …)` to `minmax(0px, …)`, so the
   attribute selectors above never matched and these grids stayed two-column
   on phones (the mission square photo shrank to a thumbnail). Same rules,
   keyed to the normalized string. */
@media (max-width: 860px) {
  [style*="grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 32px !important;
  }

  /* Connect's "ways to connect" layout: sticky figure beside a per-row
     label/title/arrow list. Keyed to classes on the markup itself
     (connect/index.html: connect-row, connect-row-label, etc.) rather
     than to the serialized style attribute -- WebKit and Blink don't
     reliably normalize inline grid/position longhands (grid-column,
     grid-row, top) into the same reflected string, so a selector tuned
     by testing one engine's output can silently miss on the other,
     leaving the row's 3-column desktop layout in place on phones. */
  #ways-to-connect {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .connect-row {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
  }
  .connect-row-action {
    grid-column: 1 !important;
  }
  /* The arrow is authored with grid-column: 3 (plus grid-row: 1 / span 2)
     -- left in place, that explicit column 3 forces an implicit 3rd
     column back into existence regardless of the row's own
     grid-template-columns, squeezing the title/body column down to a
     sliver. */
  .connect-row-arrow {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
  /* The per-row eyebrow label (MINISTRY, General inquiry, ...) adds
     nothing at single-column width -- drop it and let the bold title
     lead each row on its own. */
  .connect-row-label {
    display: none !important;
  }
  /* The figure is authored position: sticky; top: 104px. Sticky can't
     pin once its column stacks above the scrolling list instead of
     beside it, so drop to relative -- not static, which would drop its
     containing-block role and let the absolutely-positioned gradient
     and caption escape to cover the whole section. relative still
     honors the inline top: 104px offset though (unlike static), so
     reset that too or the figure renders 104px into the row list below
     it. */
  .connect-figure {
    position: relative !important;
    top: 0 !important;
  }
}
@media (max-width: 700px) {
  [style*="grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr)"] {
    gap: 32px !important;
  }
  /* Footer link columns */
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}


/* House Church: the two sticky heading columns (top: 120px, no
   data-sticky-copy hook) kept pinning after the grid stacked, so the display
   heading slid over the copy below it. Unpin once stacked. The photo-track
   frame keeps its pin — its selector outranks this one. */
@media (max-width: 1024px) {
  [style*="position: sticky; top: 120px"] { position: static !important; }
  /* Prayer Team: each resource group's sticky title/meta column and its
     link-row list -- same unpin as House Church above, plus the group's
     own two-column split collapses to one (title above its rows). Its
     sticky column has no absolutely-positioned children, so static is
     safe here (no containing-block role to lose). */
  [style*="grid-template-columns: minmax(0px, 0.55fr) minmax(0px, 1.45fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}


/* Oasis: team photos are a plain equal two-up (repeat(2, minmax(0, 1fr)))
   -- stack once a phone can't hold two real columns without squeezing the
   photos or the copy measure. */
@media (max-width: 700px) {
  [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Oasis scripture close: photo beside the quote on desktop, photo above the
   quote once stacked. */
@media (max-width: 700px) {
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Oasis Program Outcomes: an explicit product decision to hold 3 columns
   through tablet widths rather than collapse like other
   repeat(3, minmax(0,1fr)) grids on the page (the approach gallery is meant
   to go 3 -> 2 -> 1; this one only goes 3 -> 1). Card padding and type step
   down at tablet widths so six cards keep reading as a grid; on a phone the
   6 cards read one at a time, in order, all at one common size. */
.oasis-outcomes-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  .oasis-outcomes-grid > div {
    padding: 22px !important;
  }
  .oasis-outcomes-grid > div > span:first-child {
    font-size: 20px !important;
  }
  .oasis-outcomes-grid > div > p {
    font-size: 14px !important;
  }
}
@media (max-width: 700px) {
  .oasis-outcomes-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .oasis-outcomes-grid > div {
    padding: 24px !important;
  }
  .oasis-outcomes-grid > div > span:first-child {
    font-size: 22px !important;
  }
  .oasis-outcomes-grid > div > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}


/* Modern baseline for the review copy: readable, touch-friendly, and motion-aware. */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video { height: auto; }
:where(a, button, input, select, textarea) { font: inherit; }
:where(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #C8B8E4; outline-offset: 4px; }
:where(a, button, input, select, textarea):focus-visible { scroll-margin-top: 96px; }
:where(button, [role="button"]) { min-height: 44px; }
:where(input, select, textarea) { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-parallax], [data-reveal] { transform: none !important; opacity: 1 !important; }
}


/* Existing-site refinement pass: preserve the design language, improve polish. */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(main, section, article, header, footer) { min-width: 0; }
:where(img, video, svg) { max-width: 100%; }
:where(input, select, textarea) { min-height: 46px; }
:where(a, button) { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease; }
:where(a, button):hover { transform: translateY(-1px); }
:where(a, button):active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  :where(a, button) { transition: none !important; }
  :where(a, button):hover, :where(a, button):active { transform: none !important; }
}


/* Quiet-cinematic reading progress: a subtle orientation cue, not decoration. */
[data-blmlss-scroll-progress] { position: fixed; z-index: 1001; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; transform: scaleX(0); transform-origin: left center; background: var(--ink); opacity: .82; will-change: transform; }
@media (prefers-reduced-motion: reduce) { [data-blmlss-scroll-progress] { display: none !important; } }


/* Header settlement and accessible menu state.
   Transparent headers remain dark enough for their white artwork and links. */
header.blmlss-nav-scrolled {
  box-shadow: 0 10px 30px rgba(30,27,22,.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
header[style*="background: rgba(30,27,22,.22)"].blmlss-nav-scrolled {
  position: fixed !important;
  background: rgba(30,27,22,.88) !important;
}
[data-nav="panel"][aria-hidden="true"] { visibility: hidden; }
[data-nav="panel"][aria-hidden="false"] { visibility: visible; }


/* Visible editorial layer: cinematic heroes and a clearer narrative cadence. */
#main > section.blmlss-page-hero {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(247,243,237,.08);
}

#main > section:first-of-type::after,
#main > section.blmlss-page-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,15,.14) 0%, rgba(30,27,22,.04) 42%, rgba(20,18,15,.72) 100%);
}

/* Home hero carries the centred lockup on open sky — no darkening gradient. */
#main[data-page="home"] > section:first-of-type::after,
#main[data-page="home"] > section.blmlss-page-hero::after {
  background: none;
}

/* The Home cue sits at the page gutter, where the pulsing line would run
   straight through the label. The label carries its own arrow, so drop it. */
#main[data-page="home"] > section.blmlss-page-hero::before {
  display: none;
}

#main > section.blmlss-page-hero::before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 28px;
  width: 1px;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247,243,237,.9), rgba(247,243,237,0));
  transform-origin: top center;
  animation: blmlss-scroll-cue 2.4s ease-in-out infinite;
}

#main > section.blmlss-page-hero > div {
  position: relative;
  z-index: 3;
}

#main > section.blmlss-page-hero .blmlss-hero-content {
  z-index: 4;
}

#main > section:first-of-type > img[data-parallax],
#main > section.blmlss-page-hero > img[data-parallax] {
  /* Apply the final overscan before motion.js adds .blmlss-page-hero.
     This prevents a visible crop-in during hydration. */
  top: -4% !important;
  left: -4% !important;
  right: auto !important;
  bottom: auto !important;
  width: 108% !important;
  height: 108% !important;
  max-width: none;
  filter: saturate(.82) contrast(1.08) brightness(.94);
  transition: filter 800ms ease;
}

#main > section.blmlss-editorial-section {
  position: relative;
  scroll-margin-top: 96px;
}

#main > section.blmlss-editorial-section:not(.blmlss-page-hero)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: max(20px, calc((100% - 1240px) / 2));
  right: max(20px, calc((100% - 1240px) / 2));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(30,27,22,.16) 18%, rgba(30,27,22,.16) 82%, transparent);
}

#main > section.blmlss-pillar-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 34%) !important;
}

#main > section.blmlss-pillar-section > div {
  position: relative;
  z-index: 1;
}

#main > section.blmlss-pillar-section > div > div:first-child {
  position: relative;
}

#main > section.blmlss-pillar-section > div > div:first-child::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 4px;
  background: var(--ink);
  opacity: .72;
}

#main section[data-cinematic-sequence] img:not([data-parallax]) {
  filter: saturate(.9) contrast(1.035);
  transition: transform 1400ms cubic-bezier(.16,.84,.44,1), filter 900ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #main section[data-cinematic-sequence]:hover img:not([data-parallax]) {
    transform: scale(1.025);
    filter: saturate(.96) contrast(1.02);
  }
}

@keyframes blmlss-scroll-cue {
  0%, 100% { opacity: .45; transform: scaleY(.78); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  #main > section.blmlss-page-hero::before { animation: none; }
  #main > section.blmlss-page-hero > img[data-parallax] { transition: none; }
  #main section[data-cinematic-sequence] img:not([data-parallax]) { transition: none; }
}


/* Ordered content gets one restrained motion cue: only its authored numeric
   labels animate, never whole sections or decorative replacement numbers. */
[data-blmlss-ordered-number] {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 760ms cubic-bezier(.16,.84,.44,1) var(--blmlss-order-delay, 0ms),
    transform 760ms cubic-bezier(.16,.84,.44,1) var(--blmlss-order-delay, 0ms);
}
[data-blmlss-ordered-number][data-blmlss-ordered-visible] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* Final phone safety pass shared by every routed page. Authored desktop grids
   become a readable stream, fixed text boxes release their heights, and long
   content cannot force the viewport wider than the device. */
* { box-sizing: border-box; }
@media (max-width: 700px) {
  body { overflow-wrap: anywhere; }
  #main [style*="display: grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
  #main [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }
  #main :where(h1, h2, h3, h4, p)[style*="height:"] {
    height: auto !important;
  }
  #main [style*="width:"] {
    max-width: 100% !important;
  }
  #main :where(p, li) {
    max-width: 100% !important;
  }
  :where(input, select, textarea) {
    width: 100%;
    font-size: 16px !important;
  }
  #main > section.blmlss-page-hero .blmlss-hero-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #main > section.blmlss-page-hero .blmlss-hero-content img[alt="Blameless Church"] {
    width: auto !important;
    max-width: min(82vw, 340px) !important;
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-blmlss-ordered-number] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ---------- Shared navigation: one calm primary path ---------- */
/* One header size on every page: a fixed nav gap and fixed link type, so the
   bar never rescales with viewport width and pages can't drift apart. */
header.blmlss-flat-header [data-nav="desktop"] {
  gap: 28px !important;
}
header.blmlss-flat-header > div:first-child {
  min-height: 68px;
}
header.blmlss-flat-header.blmlss-header-transparent.blmlss-nav-scrolled {
  background: rgba(30,27,22,.22) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header.blmlss-flat-header.blmlss-header-transparent.blmlss-nav-scrolled [data-nav="desktop"] .blmlss-flat-nav-link {
  color: rgba(247,243,237,.78);
}
header.blmlss-flat-header.blmlss-header-transparent.blmlss-nav-scrolled [data-nav="desktop"] .blmlss-flat-nav-link--primary {
  border-color: #F7F3ED;
  background: #F7F3ED;
  color: #1E1B16;
}
header.blmlss-flat-header [data-nav="desktop"] .blmlss-flat-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(30,27,22,.68);
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, opacity 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
header.blmlss-flat-header [data-nav="desktop"] .blmlss-flat-nav-link:hover,
header.blmlss-flat-header [data-nav="desktop"] .blmlss-flat-nav-link:focus-visible {
  color: #1E1B16;
}
header.blmlss-flat-header [data-nav="desktop"] .blmlss-flat-nav-link--primary {
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid #1E1B16;
  border-radius: 999px;
  background: #1E1B16;
  color: #F7F3ED;
  box-shadow: 0 4px 18px rgba(30,27,22,.12);
}
header.blmlss-flat-header [data-nav="desktop"] .blmlss-flat-nav-link--primary:hover,
header.blmlss-flat-header [data-nav="desktop"] .blmlss-flat-nav-link--primary:focus-visible {
  background: #332E26;
  color: #F7F3ED;
}
header.blmlss-flat-header.blmlss-header-transparent {
  border-bottom: 1px solid rgba(247,243,237,.20);
  background: rgba(30,27,22,.22);
}
header.blmlss-flat-header.blmlss-header-transparent [data-nav="desktop"] .blmlss-flat-nav-link {
  color: rgba(247,243,237,.78);
}
header.blmlss-flat-header.blmlss-header-transparent [data-nav="desktop"] .blmlss-flat-nav-link:hover,
header.blmlss-flat-header.blmlss-header-transparent [data-nav="desktop"] .blmlss-flat-nav-link:focus-visible {
  color: #F7F3ED;
}
header.blmlss-flat-header.blmlss-header-transparent [data-nav="desktop"] .blmlss-flat-nav-link--primary {
  border-color: #F7F3ED;
  background: #F7F3ED;
  color: #1E1B16;
}
header.blmlss-flat-header.blmlss-header-transparent [data-nav="desktop"] .blmlss-flat-nav-link--primary:hover,
header.blmlss-flat-header.blmlss-header-transparent [data-nav="desktop"] .blmlss-flat-nav-link--primary:focus-visible {
  background: #FFFFFF;
  color: #1E1B16;
}
header.blmlss-flat-header.blmlss-header-transparent.blmlss-nav-scrolled {
  background: rgba(30,27,22,.88);
}
header.blmlss-flat-header.blmlss-header-transparent.blmlss-nav-scrolled [data-nav="desktop"] .blmlss-flat-nav-link--primary {
  border-color: #F7F3ED;
  background: #F7F3ED;
}

@media (max-width: 1060px) and (min-width: 861px) {
  header.blmlss-flat-header [data-nav="desktop"] {
    gap: 20px !important;
  }
}

@media (max-width: 860px) {
  header.blmlss-flat-header [data-nav="panel"] .blmlss-flat-nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ink-15);
    color: #1E1B16;
    font-size: 12px;
    letter-spacing: .2em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  header.blmlss-flat-header.blmlss-header-transparent [data-nav="panel"] .blmlss-flat-nav-link {
    border-bottom-color: rgba(247,243,237,.14);
    color: #F7F3ED;
  }
  header.blmlss-flat-header [data-nav="panel"] .blmlss-flat-nav-link--primary {
    justify-content: center;
    min-height: 46px;
    margin-top: 16px;
    padding: 0 18px;
    border: 1px solid #1E1B16;
    border-radius: 999px;
    background: #1E1B16;
    color: #F7F3ED;
  }
  header.blmlss-flat-header.blmlss-header-transparent [data-nav="panel"] .blmlss-flat-nav-link--primary {
    border-color: #F7F3ED;
    background: #F7F3ED;
    color: #1E1B16;
  }
}

/* The footer owns the fuller map now: Ministries, Church, Resources, Connect. */
footer.blmlss-foot > div:first-child > div.blmlss-footer-nav-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(22px, 3vw, 48px) !important;
}
footer.blmlss-foot .blmlss-footer-nav-grid > nav > div:first-child {
  color: rgba(247,243,237,.68);
}
footer.blmlss-foot .blmlss-footer-nav-grid > nav > a {
  transition: color 180ms ease, padding-left 180ms ease;
}
footer.blmlss-foot .blmlss-footer-nav-grid > nav > a:hover,
footer.blmlss-foot .blmlss-footer-nav-grid > nav > a:focus-visible {
  padding-left: 6px !important;
}
footer.blmlss-foot .blmlss-footer-connect-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Reserve the cue's band so short viewports can't collide the hero copy with it. */
#main > section.blmlss-page-hero {
  padding-bottom: 100px;
}
@media (max-width: 700px) {
  #main > section.blmlss-page-hero {
    padding-bottom: 84px;
  }
}

/* Every image hero gets the same small, legible downward cue. */
#main > section.blmlss-page-hero .blmlss-hero-down-cue {
  position: absolute;
  z-index: 6;
  left: 32px;
  right: auto;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 7px;
  color: #F7F3ED;
  font-family: 'General Sans', var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(247,243,237,.62);
  text-shadow: 0 1px 14px rgba(0,0,0,.25);
  pointer-events: auto;
}
#main > section.blmlss-page-hero .blmlss-hero-down-cue span:last-child {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  transition: transform 240ms ease;
}
#main > section.blmlss-page-hero .blmlss-hero-down-cue:hover span:last-child,
#main > section.blmlss-page-hero .blmlss-hero-down-cue:focus-visible span:last-child {
  transform: translateY(4px);
}

@media (max-width: 700px) {
  footer.blmlss-foot > div:first-child > div.blmlss-footer-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 36px 24px !important;
  }
  #main > section.blmlss-page-hero .blmlss-hero-down-cue {
    left: 20px;
    right: auto;
    bottom: 18px;
    font-size: 9px;
    letter-spacing: .16em;
  }
}

@media (max-width: 480px) {
  footer.blmlss-foot > div:first-child > div.blmlss-footer-nav-grid {
    grid-template-columns: 1fr !important;
  }
}

/* PayPal / Venmo / Cash App pills on the Giving page: trim them down
   a touch further on phones and let the fixed desktop width relax to
   full-width so they stack cleanly. */
@media (max-width: 700px) {
  #main a.blmlss-pay-pill {
    width: 100% !important;
    padding: 6px 12px !important;
    gap: 6px !important;
  }
  #main a.blmlss-pay-pill span[style*="font-size: 12px"] {
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main > section.blmlss-page-hero .blmlss-hero-down-cue span:last-child {
    transition: none;
  }
}