/* ==========================================================================
   JCC Phase 2 — Design System
   Inspired by the Lovable prototype, built for production PHP delivery
   ========================================================================== */

/* --------- 1. Design tokens --------- */
:root {
	/* Brand */
	--cream:        #F8F1E5;          /* parchment background */
	--cream-2:      #FBF6EC;          /* slightly lighter card surface */
	--maroon:       #6B1A18;          /* primary brand */
	--maroon-deep:  #4A1110;          /* hover / active */
	--orange:       #E47A2B;          /* accent — decorative/graphic use on dark surfaces */
	--orange-soft:  #F0A058;          /* gradient stop / accent on maroon */
	--orange-deep:  #A85410;          /* accent for TEXT and focus on light surfaces (≥4.5:1 on cream) */
	--orange-deep-soft: #B45E14;      /* gradient partner for --orange-deep (white text still ≥4.5:1) */
	--gold:         #D9A857;          /* highlight */
	--ink:          #1A1612;          /* body text */
	--ink-soft:     #4A413A;          /* secondary text */
	--muted:        #6E6558;          /* tertiary (≥4.5:1 on cream/white) */
	--rule:         rgba(26, 22, 18, 0.10);

	/* Semantic */
	--success:      #177A47;          /* success surfaces (white text ≥4.5:1) */
	--error:        #B00020;
	--error-deep:   #8B0018;
	--route-teal:   #2F6E7A;          /* bus route 04 */

	/* Type */
	--font-serif:  'Fraunces', 'Cormorant Garamond', Georgia, serif;
	--font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Layout */
	--max:         1280px;
	--gutter:      24px;
	--radius:      14px;
	--radius-lg:   24px;

	/* Motion */
	--ease:        cubic-bezier(.2, .8, .2, 1);
}

/* --------- Accessibility helpers --------- */
.skip-link {
	position: absolute; top: -40px; left: 0;
	background: var(--maroon); color: #fff; padding: 10px 16px;
	font-weight: 600; text-decoration: none; z-index: 100;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { top: 0; color: #fff; }

/* Visible focus rings everywhere */
:focus-visible {
	outline: 2px solid var(--maroon);
	outline-offset: 2px;
	border-radius: 4px;
}
.btn:focus-visible,
.nav a:focus-visible,
.route-card:focus-visible,
.service-tabs button:focus-visible,
.news-tabs button:focus-visible {
	outline-offset: 3px;
}
/* On dark surfaces a maroon ring vanishes — use white there */
.hero :focus-visible,
.utility-nav :focus-visible,
.page-hero :focus-visible,
.pinned :focus-visible,
.bus-panel :focus-visible,
.partner-side :focus-visible,
.wlm-block :focus-visible,
.wlm-fuel :focus-visible,
.books-order :focus-visible,
.form-success :focus-visible,
.form-success-inline :focus-visible,
.site-footer :focus-visible {
	outline-color: #fff;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Visually hidden but available to screen readers */
.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;
}

/* --------- 2. Reset --------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
/* picture is layout-transparent so container selectors keep sizing the img */
picture { display: contents; }
button { font: inherit; cursor: pointer; }

/* --------- 3. Typography --------- */
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 0.4em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--orange-deep);
}
.lead { font-size: 18px; color: var(--ink-soft); max-width: 60ch; }
a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--orange-deep); }

/* --------- 4. Layout --------- */
.shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 120px) 0; }

/* --------- 5. Buttons --------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	border: 1px solid transparent;
	transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn-primary {
	background: linear-gradient(135deg, var(--orange-deep), var(--orange-deep-soft));
	color: #fff;
	box-shadow: 0 6px 20px rgba(168, 84, 16, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); color: #fff; }
.btn-ghost {
	background: rgba(255, 255, 255, 0.65);
	color: var(--ink);
	border: 1px solid var(--rule);
	backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: #fff; color: var(--maroon); }
.btn-dark {
	background: var(--maroon);
	color: #fff;
}
.btn-dark:hover { background: var(--maroon-deep); color: #fff; }

/* --------- 6. Utility nav (above main header) --------- */
.utility-nav {
	background: var(--maroon-deep);
	color: rgba(255,255,255,0.85);
	font-size: 13px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.utility-nav__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.utility-nav a {
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: color .2s var(--ease);
	/* ≥40px tap targets for the three highest-traffic mobile actions */
	display: inline-block;
	padding: 11px 8px;
}
.utility-nav a:hover { color: var(--orange-soft); }
.utility-nav a[aria-current="page"] { color: var(--orange-soft); }
@media (max-width: 540px) {
	.utility-nav__inner { justify-content: center; gap: 14px; }
}

/* --------- 6b. Header --------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(248, 241, 229, 0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px var(--gutter);
	max-width: var(--max);
	margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 42px; height: auto; }
.brand__title { font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 18px; line-height: 1.1; }
.brand__tag   { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
	padding: 10px 16px; border-radius: 999px;
	color: var(--ink); font-weight: 500; font-size: 15px;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: rgba(107, 26, 24, 0.06); color: var(--maroon); }
.nav a.is-active { background: var(--maroon); color: #fff; }

.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; }
.nav-toggle svg { width: 28px; height: 28px; stroke: var(--ink); }

@media (max-width: 1120px) {
	/* 9 links + the wide brand need ~1100px — collapse before they wrap */
	.nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.nav.is-open {
		display: flex; flex-direction: column;
		position: absolute; top: 70px; right: var(--gutter);
		background: var(--cream-2);
		border: 1px solid var(--rule);
		border-radius: var(--radius);
		padding: 8px; gap: 2px; min-width: 220px;
		box-shadow: 0 12px 40px rgba(0,0,0,0.08);
	}
	.nav.is-open a { width: 100%; }
}

/* --------- 7. Hero --------- */
.hero {
	position: relative;
	min-height: 88vh;
	display: flex; align-items: center;
	overflow: hidden;
	color: #fff;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(110deg, rgba(74, 17, 16, 0.85) 0%, rgba(107, 26, 24, 0.55) 45%, rgba(228, 122, 43, 0.20) 100%);
}
.hero__content { position: relative; z-index: 2; padding: 80px 0; }
.hero__pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 999px;
	background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
	color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	backdrop-filter: blur(8px);
}
.pill img { width: 22px; height: 22px; border-radius: 50%; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero h1 .accent { color: var(--orange-soft); display: block; }
.hero__sub { max-width: 50ch; color: rgba(255,255,255,0.92); font-size: 18px; margin: 16px 0 32px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------- 8. Quick links grid --------- */
.quicklinks {
	margin-top: -56px; position: relative; z-index: 5;
}
.quicklinks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	background: var(--cream-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: 0 14px 40px rgba(0,0,0,0.06);
}
.quicklink {
	display: block;
	padding: 22px 20px;
	border-radius: var(--radius);
	background: #fff;
	border: 1px solid var(--rule);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.quicklink:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); color: var(--ink); }
.quicklink h3 { margin: 6px 0 4px; font-size: 18px; }
.quicklink p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.quicklink .open { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--maroon); }

/* --------- 9. Pinned event card --------- */
.pinned {
	background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
	color: #fff; border-radius: var(--radius-lg);
	padding: 32px;
	display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 28px; align-items: center;
}
.pinned img { border-radius: var(--radius); width: 100%; height: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.pinned .tag {
	display: inline-block;
	background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 999px;
	font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
	margin-bottom: 12px;
}
.pinned h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 10px; }
.pinned p { color: rgba(255,255,255,0.85); margin: 0 0 18px; max-width: 60ch; }
.pinned .btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }
.pinned .btn-ghost:hover { background: #fff; color: var(--maroon); }
@media (max-width: 720px) {
	.pinned { grid-template-columns: 1fr; padding: 24px; }
}

/* --------- 10. Feature row (sermon + fasting sidebar) --------- */
.feature-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
@media (max-width: 920px) { .feature-row { grid-template-columns: 1fr; } }

.sermon-card {
	background: #fff; border-radius: var(--radius-lg); overflow: hidden;
	border: 1px solid var(--rule);
}
.sermon-card__media { aspect-ratio: 16/9; background: var(--ink); position: relative; overflow: hidden; }
.sermon-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sermon-card__media::after {
	content: "▶";
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--orange-deep); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; padding-left: 4px;
	box-shadow: 0 8px 24px rgba(168, 84, 16, 0.4);
}
.sermon-card__body { padding: 24px; }
.sermon-card__body p { color: var(--ink-soft); margin: 8px 0 16px; }

.fasting-card {
	background: linear-gradient(160deg, var(--cream-2) 0%, #fff 100%);
	border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px;
	display: flex; flex-direction: column;
}
.fasting-card .btn { align-self: flex-start; margin-top: auto; }
.fasting-card .badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--orange-deep); color: #fff;
	padding: 6px 14px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	margin-bottom: 14px;
}
.fasting-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.fasting-card .focus-box {
	background: var(--cream); border: 1px solid var(--rule); border-radius: var(--radius);
	padding: 14px 16px; margin: 16px 0;
}
.fasting-card .focus-box .label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fasting-card .focus-box .verse { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; margin: 4px 0; }
.fasting-card .focus-box .gloss { color: var(--ink-soft); font-size: 14px; }

/* --------- 11. Schedule preview --------- */
.schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .schedule-grid { grid-template-columns: 1fr; } }

.schedule-card {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.schedule-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.schedule-card .day {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--orange-deep); margin-bottom: 8px;
}
.schedule-card h3 { font-size: 1.4rem; margin-bottom: 6px; }
.schedule-card .time { color: var(--maroon); font-weight: 600; }
.schedule-card p { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; }

/* --------- 12. Cathedral feature --------- */
.cathedral { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.cathedral__photo {
	border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; position: relative;
}
.cathedral__photo img { width: 100%; height: 100%; object-fit: cover; }
.cathedral__quote {
	background: var(--maroon); color: #fff; border-radius: var(--radius-lg);
	padding: 40px; display: flex; align-items: center;
	font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.2;
}
.cathedral__cta {
	background: var(--cream-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
	padding: 40px;
}
.cathedral__cta h2 { margin-bottom: 14px; }
.cathedral__cta .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cathedral__address {
	border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	color: #fff; padding: 28px;
}
.cathedral__address::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.20) 60%, rgba(0,0,0,0.10) 100%);
}
.cathedral__address img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.cathedral__address > * { position: relative; z-index: 1; }
.cathedral__address .label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-soft); }
.cathedral__address .time { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; line-height: 1; margin: 6px 0; }
.cathedral__address .place { font-size: 16px; opacity: 0.92; }

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

/* --------- 13. Pastor feature --------- */
.pastor {
	display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center;
}
.pastor__photo {
	border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5;
	box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
.pastor__photo img { width: 100%; height: 100%; object-fit: cover; }
.pastor__chip {
	display: inline-block; background: rgba(228, 122, 43, 0.12); color: var(--maroon);
	padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
	margin-bottom: 14px;
}
.pastor__years { font-family: var(--font-serif); color: var(--orange-deep); font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.pastor__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 880px) { .pastor { grid-template-columns: 1fr; } }

/* --------- 14. Books shelf --------- */
.books-shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1280px) { .books-shelf { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .books-shelf { grid-template-columns: repeat(2, 1fr); } }
.book-card.is-new { border-color: var(--orange); }
.book-card.is-new .badge-new {
	display: inline-block;
	background: var(--orange-deep); color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px;
	margin-top: 4px;
	align-self: flex-start;
}

/* Books - how to order CTA */
.books-order {
	margin-top: 32px;
	background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 32px;
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
}
.books-order .eyebrow { color: var(--orange-soft); }
.books-order h3 { color: #fff; margin: 8px 0 10px; font-size: 1.5rem; }
.books-order p { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 50ch; }
.books-order__contacts { display: flex; flex-direction: column; gap: 14px; }
.till-display {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: var(--radius);
	padding: 16px 20px;
	text-align: center;
}
.till-display .till-label {
	font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: rgba(255,255,255,0.7); margin-bottom: 4px;
}
.till-display .till-number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700;
	color: var(--orange-soft); letter-spacing: 0.06em; line-height: 1;
}
.contact-row { display: flex; flex-direction: column; gap: 8px; }
.contact-row a {
	color: #fff; font-weight: 500; font-size: 14px;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.08);
	transition: background .2s var(--ease);
}
.contact-row a:hover { background: rgba(255, 255, 255, 0.16); color: var(--orange-soft); }
.contact-row a .label-tag {
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255,255,255,0.55); font-weight: 600; margin-right: auto;
}
@media (max-width: 760px) {
	.books-order { grid-template-columns: 1fr; padding: 24px; }
}

.book-card {
	background: #fff; border-radius: var(--radius); border: 1px solid var(--rule);
	padding: 18px; display: flex; flex-direction: column; gap: 12px;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.book-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.book-card__cover {
	aspect-ratio: 1/1;
	flex-shrink: 0;
	background: linear-gradient(180deg, var(--cream-2), #fff);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	padding: 12px; overflow: hidden;
}
.book-card__cover img { max-width: 100%; max-height: 100%; object-fit: contain; }
.book-card h3 { font-size: 1rem; margin: 0; }
.book-card p { color: var(--ink-soft); font-size: 13px; margin: 0; }
.book-card .author-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: auto; }

/* --------- 15. Centres grid --------- */
.centres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .centres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .centres { grid-template-columns: 1fr; } }
.centre-card {
	border-radius: var(--radius-lg); overflow: hidden; position: relative;
	aspect-ratio: 4/3; color: #fff;
	display: flex; align-items: flex-end; padding: 22px;
	transition: transform .2s var(--ease);
}
.centre-card:hover { transform: translateY(-3px); color: #fff; }
.centre-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.centre-card::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(0deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.20) 60%, rgba(0,0,0,0.05) 100%);
}
.centre-card__inner { position: relative; z-index: 2; }
.centre-card .label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-soft); }
.centre-card h3 { color: #fff; font-size: 1.4rem; margin: 4px 0 0; }
.centre-card .open { font-size: 13px; opacity: 0.9; margin-top: 8px; display: inline-block; }

/* --------- 16. WLM affiliation block --------- */
.wlm-block {
	text-align: center;
	background: linear-gradient(135deg, var(--ink) 0%, #2A2420 100%);
	color: #fff; border-radius: var(--radius-lg);
	padding: 64px 32px;
}
.wlm-block .eyebrow { color: var(--orange-soft); }
.wlm-block h2 { color: #fff; max-width: 22ch; margin: 14px auto 14px; }
.wlm-block .pull { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 1.2rem; margin-bottom: 18px; }
.wlm-block p { color: rgba(255,255,255,0.78); max-width: 60ch; margin: 0 auto 24px; }
.wlm-block img { width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; background: rgba(255,255,255,0.08); padding: 10px; }

/* --------- 16b. Partner form --------- */
.partner-layout {
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start;
}
@media (max-width: 880px) { .partner-layout { grid-template-columns: 1fr; } }

.partner-form,
.form-card {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
	padding: 28px; box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}
.form-card h3 { margin: 0 0 8px; }
.form-card .form-intro { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }
.form-field textarea {
	width: 100%; box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--rule); border-radius: var(--radius);
	background: var(--cream-2);
	font-family: var(--font-sans); font-size: 16px; color: var(--ink); /* 16px stops iOS focus-zoom */
	min-height: 120px; resize: vertical;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-field textarea:focus {
	outline: none; border-color: var(--orange-deep); background: #fff;
	box-shadow: 0 0 0 3px rgba(168, 84, 16, 0.18);
}
.form-error {
	background: rgba(176, 0, 32, 0.08); border: 1px solid rgba(176, 0, 32, 0.20);
	border-left: 4px solid var(--error);
	color: var(--error-deep); padding: 12px 16px; border-radius: var(--radius);
	margin-bottom: 16px; font-size: 14px;
}
.form-error ul { margin: 4px 0 0 18px; padding: 0; }
.form-error a { color: var(--error-deep); text-decoration: underline; }
.form-success-inline {
	background: var(--success);
	color: #fff; border-radius: var(--radius-lg);
	padding: 28px; text-align: center;
}
.form-success-inline h3 { color: #fff; font-size: 1.4rem; margin-bottom: 8px; }
.form-success-inline p { color: rgba(255,255,255,0.92); margin: 0; }
.form-card button[type="submit"],
.partner-form button[type="submit"] {
	width: 100%; padding: 14px 22px;
	background: linear-gradient(135deg, var(--orange-deep), var(--orange-deep-soft));
	color: #fff; font-weight: 600; font-size: 15px;
	border: 0; border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(168, 84, 16, 0.35);
	transition: transform .2s var(--ease);
}
.form-card button[type="submit"]:hover,
.partner-form button[type="submit"]:hover { transform: translateY(-1px); }
.form-card button[type="submit"]:disabled,
.partner-form button[type="submit"]:disabled { opacity: 0.7; cursor: wait; }
.partner-form h3 { margin: 0 0 18px; }
.form-field { margin-bottom: 16px; }
.form-field label {
	display: block; font-size: 13px; font-weight: 600;
	color: var(--ink); margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.form-field label .req { color: var(--orange-deep); margin-left: 2px; }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="email"],
.form-field select {
	width: 100%; box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--rule); border-radius: var(--radius);
	background: var(--cream-2);
	font-family: var(--font-sans); font-size: 16px; color: var(--ink); /* 16px stops iOS focus-zoom */
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-field select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236b1a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}
.form-field input:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--orange-deep);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(168, 84, 16, 0.18);
}
.form-field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

.form-success {
	background: var(--success);
	color: #fff; border-radius: var(--radius-lg);
	padding: 32px; text-align: center; display: none;
}
.form-success.is-shown { display: block; }
.form-success h3 { color: #fff; font-size: 1.6rem; margin-bottom: 10px; }
.form-success p { color: rgba(255,255,255,0.92); margin: 0; }

.partner-side {
	background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-deep) 100%);
	color: #fff; border-radius: var(--radius-lg);
	padding: 28px;
}
.partner-side h3 { color: #fff; margin: 0 0 14px; font-size: 1.2rem; }
.partner-side .pay-block {
	background: rgba(255,255,255,0.10); border-radius: var(--radius);
	padding: 14px 18px; margin-bottom: 12px;
}
.partner-side .pay-block .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.partner-side .pay-block .value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; color: var(--orange-soft); margin-top: 4px; }
.partner-side .pay-block .gloss { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 4px; }
.partner-side .or { text-align: center; margin: 8px 0; color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.18em; }

.partner-mission { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 32px 0; }
.partner-mission__item {
	background: var(--cream-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px;
}
.partner-mission__item .ico {
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(228, 122, 43, 0.15); color: var(--orange);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; margin-bottom: 10px;
}
.partner-mission__item h3 { font-size: 1rem; margin: 0 0 4px; }
.partner-mission__item p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* --------- 17. Page hero (compact, sub-pages) --------- */
.page-hero {
	background: linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 50%, var(--orange) 100%);
	color: #fff;
	padding: clamp(64px, 10vw, 140px) 0 clamp(64px, 8vw, 120px);
	position: relative; overflow: hidden;
}
.page-hero::before {
	content: ""; position: absolute; inset: 0; opacity: 0.10;
	background: radial-gradient(circle at 80% 20%, #fff, transparent 60%);
}
.page-hero .shell { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--orange-soft); }
.page-hero h1 { color: #fff; max-width: 18ch; margin: 14px 0 18px; font-size: clamp(2.25rem, 5vw, 4rem); }
.page-hero .lead { color: rgba(255,255,255,0.92); max-width: 60ch; }
.page-hero .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* --------- 18. Detail card (used on services, fasting etc) --------- */
.detail-card {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
	padding: 24px; display: flex; gap: 20px; align-items: flex-start;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.detail-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.detail-card .time-block {
	min-width: 110px; font-family: var(--font-serif); font-weight: 700;
	color: var(--maroon); font-size: 1rem; line-height: 1.2;
}
.detail-card h3 { margin: 0 0 8px; }
.detail-card p { color: var(--ink-soft); margin: 0; font-size: 14px; }
.detail-card .meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 480px) {
	/* Stack time above title so the text column isn't squeezed on phones */
	.detail-card { flex-direction: column; gap: 8px; }
	.detail-card .time-block { min-width: 0; }
}

/* --------- 19. Day group (services page) --------- */
.day-group { margin-bottom: 48px; }
.day-group h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--orange-deep);
	display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.day-group h2::after {
	content: ""; flex: 1; height: 1px; background: var(--rule);
}
.day-group .stack { display: grid; gap: 14px; }

/* --------- 20. News feed --------- */
.news-tabs {
	display: flex; gap: 6px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--rule); border-radius: 999px;
	padding: 6px; margin-bottom: 24px; max-width: max-content;
}
.news-tabs button {
	background: transparent; border: 0; padding: 8px 16px; border-radius: 999px;
	font-weight: 500; color: var(--ink-soft); cursor: pointer; font-size: 14px;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.news-tabs button.is-active, .news-tabs button:hover {
	background: var(--maroon); color: #fff;
}

.news-card {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
	padding: 24px; margin-bottom: 14px;
}
.news-card.is-pinned { border-left: 4px solid var(--orange); }
.news-card .badges { display: flex; gap: 8px; margin-bottom: 10px; }
.news-card .badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 12px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
}
.news-card .badge--pinned { background: var(--maroon); color: #fff; }
.news-card .badge--event { background: rgba(228, 122, 43, 0.15); color: var(--orange-deep); }
.news-card .badge--notice { background: rgba(107, 26, 24, 0.10); color: var(--maroon); }
.news-card .badge--ministry { background: rgba(217, 168, 87, 0.20); color: #8B6519; }
.news-card .badge--celebration { background: rgba(228, 122, 43, 0.15); color: var(--orange-deep); }
.news-card .date { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.news-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.news-card p { color: var(--ink-soft); margin: 0 0 8px; }
.news-card .pay { background: var(--cream); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; font-size: 14px; }

/* --------- 21. Give cards --------- */
.give-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.give-card {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
	display: flex; flex-direction: column;
}
.give-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.06); }
.give-card__head {
	background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
	color: #fff; padding: 18px 22px; display: flex; align-items: center; gap: 12px;
}
.give-card__head h3 { color: #fff; font-size: 1.15rem; margin: 0; }
.give-card__icon {
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(228, 122, 43, 0.25); color: var(--orange-soft);
	display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.give-card__body { padding: 22px; flex: 1; }
.give-card__row {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.give-card__row:last-of-type { border-bottom: 0; }
.give-card__label { color: var(--muted); font-size: 13px; font-weight: 500; }
.give-card__value { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.give-card__note {
	background: var(--cream); border-radius: var(--radius); padding: 12px 14px;
	font-size: 13px; color: var(--ink-soft); margin-top: 14px; line-height: 1.55;
}
.give-verse {
	text-align: center; max-width: 720px; margin: 0 auto 32px;
	font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--ink-soft);
	line-height: 1.4;
}

/* Featured "Tithes & Offerings" card — the primary giving channel */
.give-card--featured {
	border: 2px solid var(--orange-deep);
	box-shadow: 0 14px 36px rgba(0,0,0,0.06);
}
.give-card--featured .give-card__head h2 { color: #fff; font-size: 1.5rem; margin: 0; }
.give-card--featured .give-card__body { max-width: 640px; }
.give-card--featured .give-card__value { font-size: 1.3rem; }

/* Tap-to-copy for paybill / till / account values */
.copy-btn {
	margin-left: 8px;
	padding: 4px 12px;
	font-size: 12px; font-weight: 600;
	border: 1px solid var(--rule); border-radius: 999px;
	background: var(--cream-2); color: var(--maroon);
	transition: background .2s var(--ease), color .2s var(--ease);
}
.copy-btn:hover { background: var(--maroon); color: #fff; }
.copy-btn.is-copied { background: var(--success); border-color: var(--success); color: #fff; }
.give-verse .ref { font-style: normal; font-size: 0.9rem; color: var(--orange-deep); margin-top: 12px; letter-spacing: 0.10em; text-transform: uppercase; }

/* --------- 22. Sermon archive --------- */
.sermon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.sermon-tile {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sermon-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); color: var(--ink); }
.sermon-tile__media {
	aspect-ratio: 16/9; position: relative; background: var(--ink); overflow: hidden;
}
.sermon-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.sermon-tile__media::after {
	content: "▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--orange-deep); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; padding-left: 3px;
	box-shadow: 0 6px 18px rgba(168, 84, 16, 0.40);
}
.sermon-tile__body { padding: 18px 20px; }
.sermon-tile__body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.sermon-tile__meta { font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 12px; }
.sermon-tile__meta .speaker { font-style: italic; color: var(--maroon); }

/* --------- 22b. WLM "fuel" banner (partner CTA above arms) --------- */
.wlm-fuel {
	background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 28px 36px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.wlm-fuel::before {
	content: ""; position: absolute; inset: 0; opacity: 0.12;
	background: radial-gradient(circle at 100% 0%, var(--orange-soft), transparent 50%);
	pointer-events: none;
}
.wlm-fuel > * { position: relative; }
.wlm-fuel .eyebrow { color: var(--orange-soft); }
.wlm-fuel h3 { color: #fff; font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 6px 0 8px; }
.wlm-fuel p { color: rgba(255,255,255,0.85); margin: 0; max-width: 60ch; line-height: 1.55; }
.wlm-fuel .btn { white-space: nowrap; }

@media (max-width: 760px) {
	.wlm-fuel { grid-template-columns: 1fr; padding: 24px; }
}

/* --------- 23. WLM arm sections --------- */
.wlm-arm {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
	align-items: center; padding: 48px 0;
	border-bottom: 1px solid var(--rule);
}
.wlm-arm:last-child { border-bottom: 0; }
.wlm-arm.flip { direction: rtl; }
.wlm-arm.flip > * { direction: ltr; }
.wlm-arm__media {
	border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3;
	box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}
.wlm-arm__media img { width: 100%; height: 100%; object-fit: cover; }
.wlm-arm h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: 12px; }
.wlm-arm .sub { font-family: var(--font-serif); font-style: italic; color: var(--orange-deep); margin-bottom: 14px; }
.wlm-arm .pillars {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.wlm-arm .pillars span {
	background: rgba(107, 26, 24, 0.08); color: var(--maroon);
	padding: 6px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600;
}
.wlm-arm .stat-row {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px;
}
.wlm-stat-card {
	background: var(--cream-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px;
}
.wlm-stat-card .num { font-family: var(--font-serif); font-size: 1.8rem; color: var(--maroon); font-weight: 700; line-height: 1; }
.wlm-stat-card .lbl { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 880px) {
	.wlm-arm { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
	.wlm-arm.flip { direction: ltr; }
}

/* --------- 24. Bus Routes --------- */
.service-tabs {
	display: flex; gap: 4px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--rule); border-radius: 999px;
	padding: 6px; margin-bottom: 12px; max-width: max-content;
}
.service-tabs button {
	background: transparent; border: 0; padding: 9px 18px; border-radius: 999px;
	font-weight: 500; color: var(--ink-soft); cursor: pointer; font-size: 14px;
	transition: background .2s var(--ease), color .2s var(--ease);
	white-space: nowrap;
}
.service-tabs button:hover { color: var(--maroon); }
.service-tabs button.is-active { background: var(--maroon); color: #fff; }
.service-meta {
	font-size: 13px; color: var(--ink-soft);
	margin-bottom: 24px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.service-meta .chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--cream-2); border: 1px solid var(--rule);
	padding: 4px 12px; border-radius: 999px; font-weight: 500;
}
.service-meta .chip strong { color: var(--ink); font-weight: 600; }


.bus-layout {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
}
@media (max-width: 980px) { .bus-layout { grid-template-columns: 1fr; } }

.bus-map {
	border-radius: var(--radius-lg);
	border: 1px solid var(--rule);
	position: relative;
	min-height: 540px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0,0,0,0.06);
}
#bus-leaflet { position: absolute; inset: 0; background: var(--cream); }
.bus-map__fallback {
	position: absolute; inset: 0; z-index: 400;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; text-align: center;
	background: var(--cream-2);
}
.bus-map__fallback[hidden] { display: none; }
.bus-map__fallback p { max-width: 40ch; color: var(--ink-soft); margin: 0; }

/* Mute the OSM/Carto tiles slightly so brand colors pop */
.leaflet-tile-pane { filter: saturate(0.8) brightness(1.02); }
.leaflet-container { font-family: var(--font-sans) !important; background: var(--cream) !important; }
.leaflet-popup-content-wrapper {
	background: #fff; border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	padding: 4px;
}
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content strong { font-family: var(--font-serif); font-size: 14px; color: var(--ink); display: block; margin-bottom: 2px; }
.leaflet-popup-content .meta { color: var(--muted); font-size: 12px; }
.leaflet-popup-tip { background: #fff; }

/* Custom markers (rendered as <div> via L.divIcon) */
.stop-marker {
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 3px solid var(--maroon);
	box-shadow: 0 2px 8px rgba(0,0,0,0.20);
	cursor: pointer; transition: transform .2s var(--ease);
}
.stop-marker:hover { transform: scale(1.3); }
.stop-marker--01 { border-color: var(--orange); }
.stop-marker--02 { border-color: var(--maroon); }
.stop-marker--03 { border-color: var(--gold); }
.stop-marker--04 { border-color: var(--route-teal); }

.church-divicon {
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.church-divicon::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--maroon); opacity: 0.22;
	animation: pulse-ring 2.4s infinite;
}
.church-divicon span {
	position: relative; z-index: 1;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--maroon); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
@keyframes pulse-ring {
	0%   { transform: scale(0.6); opacity: 0.4; }
	100% { transform: scale(1.4); opacity: 0; }
}

/* Active bus panel */
.bus-panel {
	background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-deep) 100%);
	color: #fff; border-radius: var(--radius-lg);
	padding: 28px;
	display: flex; flex-direction: column; gap: 18px;
}
.bus-panel__head {
	display: flex; align-items: center; gap: 14px;
}
.bus-panel__id {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--orange-deep); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-serif); font-weight: 700;
}
.bus-panel h3 { color: #fff; margin: 0 0 2px; font-size: 1.3rem; }
.bus-panel .route { color: rgba(255,255,255,0.78); font-size: 14px; }

.bus-info-row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.bus-info {
	background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 12px 14px;
}
.bus-info .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 4px; }
.bus-info .value { font-weight: 600; font-size: 14px; }
.bus-info .plate {
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700; letter-spacing: 0.06em;
	background: rgba(255,255,255,0.95); color: var(--ink);
	padding: 4px 10px; border-radius: 4px;
	border: 1px solid rgba(255,255,255,0.40);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.bus-stops {
	background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 14px 16px;
}
.bus-stops__title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 12px; }
.bus-stops ol { list-style: none; padding: 0; margin: 0; counter-reset: stop; }
.bus-stops li {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 0; counter-increment: stop;
	font-size: 14px;
}
.bus-stops li::before {
	content: counter(stop);
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--orange-deep); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
	margin-right: 12px; flex-shrink: 0;
}
.bus-stops li.is-church::before { background: #fff; color: var(--maroon); content: "✦"; }
.bus-stops li > .stop-name { flex: 1; }
.bus-stops li > .stop-time { color: rgba(255,255,255,0.65); font-size: 13px; font-variant-numeric: tabular-nums; }

.bus-panel__cta { display: flex; gap: 10px; }
.bus-panel__cta .btn { flex: 1; justify-content: center; }
.bus-panel__cta .btn-primary { background: #fff; color: var(--maroon); }
.bus-panel__cta .btn-primary:hover { background: var(--cream); color: var(--maroon-deep); }
.bus-panel__cta .btn-ghost {
	background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.30);
}
.bus-panel__cta .btn-ghost:hover { background: rgba(255,255,255,0.20); color: #fff; }

/* Route summary cards */
.routes-row {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 1100px) { .routes-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .routes-row { grid-template-columns: 1fr; } }
.route-card {
	background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
	padding: 18px 20px; cursor: pointer;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
	display: flex; align-items: center; gap: 14px;
}
.route-card:hover, .route-card.is-active {
	transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.06);
	border-color: var(--orange);
}
.route-card.is-active { border-color: var(--orange); border-width: 2px; padding: 17px 19px; }
.route-card__id {
	width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1rem;
	flex-shrink: 0;
}
.route-card--01 .route-card__id { background: var(--orange-deep); }
.route-card--02 .route-card__id { background: var(--maroon); }
.route-card--03 .route-card__id { background: var(--gold); color: var(--maroon-deep); }
.route-card--04 .route-card__id { background: var(--route-teal); }
.route-card h3 { margin: 0 0 2px; font-size: 1rem; font-family: var(--font-serif); }
.route-card .path { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.route-card .eta {
	margin-left: auto; flex-shrink: 0; text-align: right;
	font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: var(--maroon);
}
.route-card .eta small {
	display: block;
	font-family: var(--font-sans); font-size: 10px; font-weight: 600;
	letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
}

/* --------- 25. Footer --------- */
.site-footer {
	background: var(--ink);
	color: rgba(255,255,255,0.78);
	padding: 64px 0 32px;
	margin-top: 80px;
}
.site-footer .shell { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 10px; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: var(--orange-soft); }
.site-footer__brand p { font-size: 14px; line-height: 1.7; max-width: 36ch; }
.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.10);
	margin-top: 48px; padding-top: 24px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
	font-size: 13px; color: rgba(255,255,255,0.55);
}

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