/* Self-hosted variable font (SIL Open Font License). Upright only: the brand uses no italics. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Titles: Jost, a light geometric face with a Swiss, timeless feel. Upright only. */
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
  Design tokens. See DESIGN.md.
  Built on the TAMI seal: deep navy and bronze, on a soft blue ground. Upright sans-serif only, no italics.
  Provisional direction "A · Harbour" until the church chooses from /brand.
*/
:root {
  /* Paper and ink */
  --paper: #e9eff9;
  --paper-deep: #d7e3f5;
  --surface: #f6f9fd;
  --ink: #0f1d45;
  --ink-soft: #42517c;
  --ink-mute: #4a5a86;
  --navy: #1a2d61;
  --navy-deep: #0f1d45;
  --navy-line: #34498a;

  /* Brass: --brass is for text on paper, --gold for rules and ornament only, --gold-light for text on navy */
  --brass: #7a5a30;
  --gold: #a67d51;
  --gold-light: #d9b98a;

  /* One warm red, used for errors, the live dot and rare emphasis */
  --oxblood: #7b2230;
  --oxblood-wash: #f3e2e1;
  --success: #2f5d3a;
  --success-wash: #e3eddf;
  --notice-wash: #f1e6d3;

  --line: #bdcce5;
  --line-strong: var(--ink);
  --focus: #2b4fa8;

  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Jost", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem; /* 17px */
  --text-lg: 1.25rem;
  --text-xl: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.4rem + 6vw, 6rem);

  /* Space: a 4px base on a modular rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --gutter: clamp(1rem, 4vw, 2rem);
  --container: 76rem;
  --measure: 62ch;
  --tap: 3rem; /* 48px minimum target */

  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 0 rgba(15, 29, 69, 0.06), 0 14px 34px -20px rgba(15, 29, 69, 0.4);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 260ms;
  --medium: 520ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
}
h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.04em;
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
  line-height: 1.2;
}
h4 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--navy);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
a:hover {
  text-decoration-color: var(--navy);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

ul,
ol {
  padding-left: 1.25rem;
}
li {
  margin-bottom: var(--space-2);
}

small,
.small {
  font-size: var(--text-sm);
}

/* The brand is upright. Emphasis is by weight or colour, never italic. */
em,
i,
cite,
address,
dfn,
var {
  font-style: normal;
}

::selection {
  background: var(--gold-light);
  color: var(--navy-deep);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-4);
}

@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;
  }
}

/* ---- Layout: a Swiss 12-column grid ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}
/* On phones every grid child takes the full row; the column classes below only apply from tablet up. */
.grid > * {
  grid-column: 1 / -1;
}
@media (min-width: 48rem) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-12 { grid-column: 1 / -1; }
}
.grid > * {
  min-width: 0;
}

.stack > * + * {
  margin-top: var(--stack, var(--space-4));
}
.stack-lg {
  --stack: var(--space-6);
}

.section {
  padding-block: var(--space-8);
}
.section--tight {
  padding-block: var(--space-6);
}

/* ---- Editorial furniture ---- */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font: 600 var(--text-xs) / 1.3 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}

.small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

/* Thick-thin rule: the Victorian masthead and column rule */
.rule-double {
  height: 5px;
  border-top: 3px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}
.rule {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0;
}
.rule--soft {
  border-top-color: var(--line);
}

/* The cross, drawn as a Swiss registration mark. The bar sits high, as on a Latin cross. */
.regmark {
  position: relative;
  display: inline-block;
  width: 0.8em;
  height: 1em;
  vertical-align: -0.12em;
  color: var(--gold);
}
.regmark::before,
.regmark::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.regmark::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
.regmark::after {
  left: 0;
  right: 0;
  top: 32%;
  height: 1px;
}
.regmark--lg {
  font-size: 1.6rem;
}

/* Fleuron: hairline, cross, hairline */
.fleuron {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--gold);
  margin-block: var(--space-7);
}
.fleuron::before,
.fleuron::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

/* A quiet wave, for "Ocean of Love". Used once or twice a page, never as wallpaper. */
.wave {
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4T36 4T48 4' fill='none' stroke='%23b8903f' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center;
}

/* Numbered folio: Roman numeral in the margin, content to the right */
.folio {
  border-top: 1px solid var(--ink);
  padding-top: var(--space-4);
}
.folio__num {
  display: block;
  font: 800 var(--text-xl) / 1 var(--font-display);
  color: var(--brass);
}
.folio__label {
  display: block;
  margin-top: var(--space-2);
  font: 600 var(--text-xs) / 1.3 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

a.folio {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fast) var(--ease);
}
a.folio:hover {
  border-top-color: var(--gold);
  border-top-width: 3px;
  padding-top: calc(var(--space-4) - 2px);
}
a.folio:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
}

/* Drop cap, for the first paragraph of a story */
.dropcap::first-letter {
  float: left;
  padding: 0.06em 0.1em 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.2em;
  line-height: 0.78;
  color: var(--navy);
}

/* Scripture epigraph */
.scripture {
  margin: 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--gold);
  font: 500 var(--text-xl) / 1.4 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--navy);
  max-width: 34rem;
}
.scripture p {
  margin: 0;
}
.scripture cite,
.scripture footer {
  display: block;
  margin-top: var(--space-3);
  font: 600 var(--text-xs) / 1.3 var(--font-ui);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.7rem 1.5rem;
  font: 600 var(--text-xs) / 1.1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--paper);
  box-shadow: inset 0 -3px 0 var(--gold);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover {
  background: var(--navy-deep);
  color: var(--paper);
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn--secondary {
  background: transparent;
  color: var(--navy);
  box-shadow: none;
}
.btn--secondary:hover {
  background: var(--navy);
  color: var(--paper);
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--navy);
  box-shadow: none;
  padding-inline: 0.25rem;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.4em;
}
.btn--ghost:hover {
  background: transparent;
  color: var(--navy);
  text-decoration-color: var(--navy);
}
.btn--danger {
  background: var(--oxblood);
  border-color: var(--oxblood);
  box-shadow: none;
}
.btn--danger:hover {
  background: #5d1925;
}
.btn--small {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
}
.btn--block {
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ---- Forms: labels always visible, errors beside the field ---- */
.field {
  margin-bottom: var(--space-5);
}
.field label,
.field .label {
  display: block;
  margin-bottom: var(--space-2);
  font: 600 var(--text-sm) / 1.3 var(--font-ui);
  color: var(--ink);
}
.field .optional {
  font-weight: 400;
  color: var(--ink-mute);
}
.field__help {
  margin: var(--space-2) 0 0;
  font: 400 var(--text-sm) / 1.45 var(--font-ui);
  color: var(--ink-mute);
}
.field__error {
  margin: var(--space-2) 0 0;
  font: 600 var(--text-sm) / 1.4 var(--font-ui);
  color: var(--oxblood);
}
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  font: 400 1rem / 1.4 var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-mute);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.textarea {
  min-height: 7rem;
  resize: vertical;
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.input[readonly],
.input[disabled],
.select[disabled],
.textarea[disabled] {
  background: var(--paper-deep);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--oxblood);
  border-width: 2px;
}
.input--code {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  font: 400 var(--text-sm) / 1.5 var(--font-ui);
}
.check input {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  accent-color: var(--navy);
}
.check label {
  font-weight: 400;
}
/* Honeypot for public forms: off-screen, not display:none, so simple bots still fill it */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Notices ---- */
.notice {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brass);
  background: var(--notice-wash);
  font: 400 var(--text-sm) / 1.5 var(--font-ui);
  color: var(--ink);
}
.notice strong {
  font-weight: 650;
}
.notice p {
  margin: 0;
  max-width: none;
}
.notice p + p {
  margin-top: var(--space-2);
}
.notice--success {
  border-color: var(--success);
  background: var(--success-wash);
}
.notice--error {
  border-color: var(--oxblood);
  background: var(--oxblood-wash);
}

/* ---- Cards ---- */
.card {
  position: relative;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
  border-radius: var(--radius);
}
.card--flat {
  background: transparent;
}
.card > :last-child {
  margin-bottom: 0;
}
.card__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

/* ---- Tables ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font: 400 var(--text-sm) / 1.45 var(--font-ui);
}
.table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover {
  background: var(--paper);
}

/* ---- Badges ---- */
.badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  font: 600 0.68rem / 1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge--ok {
  color: var(--success);
}
.badge--warn {
  color: var(--brass);
}
.badge--alert {
  color: var(--oxblood);
}

/* Colour swatches (style guide) */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 6rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  font: 500 var(--text-xs) / 1.4 var(--font-ui);
}
.swatch--paper { background: var(--paper); }
.swatch--paper-deep { background: var(--paper-deep); }
.swatch--surface { background: var(--surface); }
.swatch--ink { background: var(--ink); color: var(--paper); }
.swatch--navy { background: var(--navy); color: var(--paper); }
.swatch--navy-deep { background: var(--navy-deep); color: var(--paper); }
.swatch--brass { background: var(--brass); color: #fff; }
.swatch--gold { background: var(--gold); color: var(--navy-deep); }
.swatch--gold-light { background: var(--gold-light); color: var(--navy-deep); }
.swatch--oxblood { background: var(--oxblood); color: #fff; }

/* Live indicator */
.live-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--oxblood);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(123, 34, 48, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(123, 34, 48, 0);
  }
}

/* ---- Gentle reveal on scroll ----
   Content is only hidden once reveal.js has run (it adds .reveal-ready after marking what is already
   in view), so a failed script can never leave a page blank. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  }
  .reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---- A short on-page note, in a native <dialog> ---- */
.dialog {
  width: min(26rem, 92vw);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(10, 20, 40, 0.25);
}
.dialog::backdrop {
  background: rgba(10, 20, 50, 0.55);
}
.dialog--note p:first-of-type {
  margin: 0 0 var(--space-2);
  font: 700 var(--text-lg) / 1.3 var(--font-display);
  color: var(--navy);
}
.dialog--note .small {
  color: var(--ink-mute);
}
.dialog--note .btn {
  margin-top: var(--space-5);
}

/* ---- Announcement banner ---- */
.banner {
  background: var(--navy-deep);
  color: var(--paper);
  font: 500 var(--text-sm) / 1.4 var(--font-ui);
  text-align: center;
}
.banner__inner {
  padding: var(--space-3) var(--gutter);
}
.banner a {
  color: var(--gold-light);
  text-decoration-color: var(--gold-light);
  font-weight: 600;
}

/* ---- Header / masthead ---- */
.site-header {
  position: relative;
  z-index: 40;
  background: var(--paper);
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--navy);
  text-decoration: none;
}
.brand:hover {
  text-decoration: none;
}
.brand__mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name {
  font: 600 1.4rem / 1.05 var(--font-display);
  letter-spacing: -0.01em;
}
.brand__tag {
  margin-top: 0.2rem;
  font: 600 0.62rem / 1 var(--font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font: 600 var(--text-xs) / 1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle__bars {
  position: relative;
  width: 1.1rem;
  height: 0.7rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  border-top: 2px solid currentColor;
}

.site-nav {
  display: none;
}
.site-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li {
  margin: 0;
}
.site-nav a {
  text-decoration: none;
}

/* Mobile: a full-screen panel, like turning to the contents page */
.nav-open .site-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: calc(var(--space-8) + 3.4rem) var(--gutter) var(--space-6);
  background: var(--navy-deep);
  color: var(--paper);
  overflow-y: auto;
}
.nav-open .site-nav ol {
  counter-reset: contents;
}
.nav-open .site-nav li {
  counter-increment: contents;
  border-top: 1px solid var(--navy-line);
}
.nav-open .site-nav li:last-child {
  border-bottom: 1px solid var(--navy-line);
}
.nav-open .site-nav li a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font: 500 clamp(1.75rem, 8vw, 2.5rem) / 1.1 var(--font-display);
  color: var(--paper);
}
.nav-open .site-nav li a::before {
  content: counter(contents, upper-roman);
  min-width: 2.2rem;
  font: 700 var(--text-lg) / 1 var(--font-display);
  color: var(--gold-light);
}
.nav-open .site-nav .btn {
  align-self: flex-start;
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--navy-deep);
  box-shadow: none;
}
.nav-open .menu-toggle {
  position: relative;
  z-index: 70;
  color: var(--paper);
  border-color: var(--paper);
}
.nav-open {
  overflow: hidden;
}
.nav-open .brand {
  position: relative;
  z-index: 70;
  color: var(--paper);
}
.nav-open .brand__tag {
  color: var(--gold-light);
}

/* Mobile: the Ministries dropdown list sits open underneath its item, always visible */
.nav-open .site-nav li .nav-drop {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-3) calc(2.2rem + var(--space-4));
}
.nav-open .site-nav li .nav-drop a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font: 500 var(--text-base) / 1.3 var(--font-ui);
  color: #c9d2e0;
}
.nav-open .site-nav li .nav-drop a::before {
  content: none;
}
.nav-open .site-nav li .nav-drop .nav-drop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold-light);
}
.nav-open .site-nav li .nav-drop .nav-drop__icon .icon {
  width: 1rem;
  height: 1rem;
}
.nav-open .site-nav li .nav-drop a[aria-current="page"],
.nav-open .site-nav li .nav-drop a:hover {
  color: var(--gold-light);
}

/* Without JavaScript the menu is simply open and stacked under the masthead */
@media (scripting: none) {
  .menu-toggle {
    display: none;
  }
  .site-nav {
    display: block;
    padding-bottom: var(--space-4);
  }
  .site-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .site-nav a:not(.btn) {
    font: 600 var(--text-xs) / 1 var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .masthead {
    flex-wrap: wrap;
  }
}

@media (min-width: 60rem) {
  .menu-toggle {
    display: none;
  }
  .site-nav,
  .nav-open .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
    background: transparent;
    color: var(--ink);
    overflow: visible;
  }
  .site-nav ol,
  .nav-open .site-nav ol {
    display: flex;
    gap: var(--space-6);
  }
  .site-nav li,
  .nav-open .site-nav li,
  .nav-open .site-nav li:last-child {
    border: 0;
  }
  .site-nav li a,
  .nav-open .site-nav li a {
    display: inline-block;
    padding: var(--space-2) 0;
    font: 600 var(--text-xs) / 1 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 2px solid transparent;
    transition: border-color var(--fast) var(--ease);
  }
  .site-nav li a::before,
  .nav-open .site-nav li a::before {
    content: none;
  }
  .site-nav li a:hover {
    border-bottom-color: var(--gold);
  }
  .site-nav li a[aria-current="page"] {
    border-bottom-color: var(--navy);
  }
  .nav-open .site-nav .btn,
  .site-nav .btn {
    align-self: auto;
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
    box-shadow: inset 0 -3px 0 var(--gold);
  }
  .site-nav .btn:hover {
    background: var(--navy);
    color: var(--paper);
  }
  .nav-open {
    overflow: visible;
  }
  .nav-open .brand {
    color: var(--navy);
  }
  .nav-open .brand__tag {
    color: var(--brass);
  }

  /* Desktop: the Ministries dropdown opens as a panel on hover or keyboard focus */
  .nav-item--drop {
    position: relative;
  }
  .nav-item--drop .nav-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(2, minmax(11.5rem, 1fr));
    gap: var(--space-1) var(--space-5);
    min-width: 25rem;
    margin-top: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    box-shadow: 0 12px 28px rgba(10, 20, 40, 0.16);
    transform-origin: top center;
    transform: translateX(-50%) translateY(-6px) scaleY(0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms var(--ease-ios, ease), transform 220ms var(--ease-ios, ease), visibility 220ms;
  }
  .nav-item--drop:hover .nav-drop,
  .nav-item--drop:focus-within .nav-drop,
  .nav-item--drop.is-open .nav-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scaleY(1);
    transition: opacity 220ms var(--ease-ios, ease), transform 220ms var(--ease-ios, ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-item--drop .nav-drop { transition: opacity 120ms linear, visibility 120ms; transform: translateX(-50%); }
    .nav-item--drop:hover .nav-drop, .nav-item--drop:focus-within .nav-drop { transform: translateX(-50%); }
  }
  .nav-item--drop .nav-drop a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: 0.4rem;
    font: 600 0.78rem / 1.3 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
    border-bottom: 0;
    white-space: nowrap;
  }
  .nav-item--drop .nav-drop a:hover,
  .nav-item--drop .nav-drop a[aria-current="page"] {
    border-bottom: 0;
    background: var(--paper-deep);
  }
  .nav-drop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    border-radius: 0.55rem;
    background: var(--paper-deep);
    color: var(--brass);
  }
  .nav-drop__icon .icon {
    width: 1.1rem;
    height: 1.1rem;
  }
  .nav-item--drop .nav-drop a:hover .nav-drop__icon,
  .nav-item--drop .nav-drop a[aria-current="page"] .nav-drop__icon {
    background: var(--surface);
  }
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--space-8);
}
.hero__title {
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin-bottom: var(--space-5);
}
.hero__title em {
  font-weight: 800;
  color: var(--brass);
}
.hero__lede {
  font-size: var(--text-lg);
  max-width: 34rem;
}
.hero__art {
  align-self: end;
  color: var(--navy);
}
.hero__art svg {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.colophon {
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--ink);
  font: 400 var(--text-sm) / 1.55 var(--font-ui);
  color: var(--ink-soft);
}
.colophon dt {
  margin-top: var(--space-3);
  font: 600 var(--text-xs) / 1.3 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.colophon dd {
  margin: var(--space-1) 0 0;
  color: var(--ink);
}

/* ---- Footer ---- */
.site-footer {
  margin-top: var(--space-9);
  background: var(--navy-deep);
  color: var(--paper);
  font: 400 var(--text-sm) / 1.6 var(--font-ui);
}
.site-footer .wave {
  margin-top: -4px;
  opacity: 0.9;
}
.site-footer__main {
  padding-block: var(--space-8) var(--space-6);
}
.site-footer a {
  color: var(--paper);
  text-decoration-color: var(--navy-line);
}
.site-footer a:hover {
  text-decoration-color: var(--gold-light);
}
.site-footer h2 {
  margin-bottom: var(--space-4);
  font: 600 var(--text-xs) / 1.3 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  margin-bottom: var(--space-2);
}
.site-footer .brand {
  color: var(--paper);
  margin-bottom: var(--space-5);
}
.site-footer .brand__tag {
  color: var(--gold-light);
}
.site-footer .scripture {
  color: var(--paper);
  border-color: var(--gold);
  font-size: var(--text-lg);
}
.site-footer .scripture cite {
  color: var(--gold-light);
}
.site-footer .footer-contact {
  margin-top: var(--space-6);
  font-style: normal;
  line-height: 1.7;
}
.site-footer .footer-contact a {
  display: inline-block;
}
.site-footer__base {
  padding-block: var(--space-5);
  border-top: 1px solid var(--navy-line);
  color: #b9c3cf;
  font-size: var(--text-xs);
}
.site-footer__base .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
}

/* ---- Auth pages (sign in, invitations) ---- */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
}
.auth-page__head {
  padding-block: var(--space-5);
}
.auth-card {
  width: 100%;
  max-width: 28rem;
  margin: var(--space-6) auto var(--space-8);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  box-shadow: var(--shadow);
}
.auth-card h1 {
  font-size: var(--text-2xl);
}
.auth-page__foot p {
  margin: var(--space-3) auto 0;
}
.auth-page__foot {
  padding: var(--space-5) var(--gutter);
  font: 400 var(--text-xs) / 1.5 var(--font-ui);
  color: var(--ink-mute);
  text-align: center;
}
@media (min-width: 48rem) {
  .auth-card {
    padding: var(--space-7) var(--space-7) var(--space-6);
  }
}

/*
  Home page: Deep Water at the top (night to dawn), Harbour below (soft blue paper, navy and bronze).
  Upright sans only. The hero keeps all its words in the page, so it reads fine before (or without) the 3D.
*/
:is(body.is-home, body.has-hero) .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  color: #fff;
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
:is(body.is-home, body.has-hero) .site-header .rule-double { display: none; }
:is(body.is-home, body.has-hero) .site-header .brand { color: #fff; }
:is(body.is-home, body.has-hero) .site-header .brand__tag { color: var(--gold-light); }
:is(body.is-home, body.has-hero) .site-header .menu-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
:is(body.is-home, body.has-hero) .site-header.is-solid {
  background: rgba(233, 239, 249, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
:is(body.is-home, body.has-hero) .site-header.is-solid .brand { color: var(--navy); }
:is(body.is-home, body.has-hero) .site-header.is-solid .brand__tag { color: var(--brass); }
:is(body.is-home, body.has-hero) .site-header.is-solid .menu-toggle { color: var(--navy); border-color: var(--navy); }
@media (min-width: 60rem) {
  :is(body.is-home, body.has-hero) .site-header .site-nav li a { color: #fff; }
  :is(body.is-home, body.has-hero) .site-header .site-nav li a:hover { border-bottom-color: var(--gold-light); }
  :is(body.is-home, body.has-hero) .site-header .site-nav .btn { color: #fff; border-color: rgba(255, 255, 255, 0.7); background: transparent; box-shadow: inset 0 -3px 0 var(--gold); }
  :is(body.is-home, body.has-hero) .site-header .site-nav .btn:hover { background: #fff; color: var(--navy); }
  :is(body.is-home, body.has-hero) .site-header.is-solid .site-nav li a { color: var(--navy); }
  :is(body.is-home, body.has-hero) .site-header.is-solid .site-nav .btn { color: var(--navy); border-color: var(--navy); }
  :is(body.is-home, body.has-hero) .site-header.is-solid .site-nav .btn:hover { background: var(--navy); color: #fff; }
}
:is(body.is-home, body.has-hero) .skip-link { z-index: 120; }

/* ---------- Hero: a calm blue field in the TAMI navy, with a soft light and slow water lines ---------- */
.hero3d {
  position: relative;
  isolation: isolate;
  min-height: max(640px, 100svh);
  max-height: 1200px;
  display: grid;
  align-items: end;
  color: #fff;
  background: linear-gradient(180deg, #0f1d45 0%, #1a2d61 45%, #2a4a94 100%);
  overflow: hidden;
}
.hero3d__stage { position: absolute; inset: 0; z-index: -1; }
.hero3d__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 78% 22%, rgba(120, 165, 240, 0.38) 0%, rgba(120, 165, 240, 0) 70%),
    radial-gradient(45% 40% at 12% 90%, rgba(166, 125, 81, 0.22) 0%, rgba(166, 125, 81, 0) 70%);
}
.hero3d__waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; fill: none; stroke: rgba(217, 185, 138, 0.28); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hero3d__waves path { vector-effect: non-scaling-stroke; animation: wave-drift 14s ease-in-out infinite alternate; }
.hero3d__waves path:nth-child(2) { animation-duration: 18s; stroke: rgba(255, 255, 255, 0.16); }
.hero3d__waves path:nth-child(3) { animation-duration: 22s; stroke: rgba(217, 185, 138, 0.18); }
@keyframes wave-drift { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@media (prefers-reduced-motion: reduce) { .hero3d__waves path { animation: none; } }
.hero3d__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 50, 0.45) 0%, rgba(10, 20, 50, 0) 65%);
}

.hero3d__content {
  width: 100%;
  padding-inline: clamp(1.25rem, 6vw, 6.5rem);
  padding-top: calc(var(--space-9) + 1rem);
  padding-bottom: clamp(7.5rem, 16vh, 11rem);
}
.hero3d__content > * { max-width: min(40rem, 100%); }
.hero3d__content > h1 { max-width: min(52rem, 100%); }
.hero3d .eyebrow { color: var(--gold-light); }
.hero3d h1 {
  margin: 0 0 var(--space-5);
  color: #fff;
  font-size: clamp(2.7rem, 1.4rem + 5vw, 5.6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.hero3d h1 .hl { color: var(--gold-light); display: block; text-shadow: none; }
.hero3d .lede { color: #dbe5f8; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem); max-width: 36rem; text-wrap: pretty; }
.hero3d .btn { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; box-shadow: none; }
.hero3d .btn:hover { background: #fff; border-color: #fff; color: #0a1432; }
.hero3d .btn--ghost { background: transparent; border-color: transparent; color: #fff; text-decoration-color: var(--gold-light); box-shadow: none; }
.hero3d .btn--ghost:hover { background: transparent; color: #fff; text-decoration-color: #fff; }

.hero3d__verse {
  margin: var(--space-7) 0 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--gold);
  max-width: 28rem;
  font-size: var(--text-base);
  line-height: 1.5;
  color: #cfdaf2;
}
.hero3d__verse cite { display: block; margin-top: var(--space-2); font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }

.hero3d__next {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(3.4rem, 8vh, 5rem);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  background: rgba(10, 20, 50, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(217, 185, 138, 0.4);
  border-radius: 999px;
  font: 600 var(--text-sm) / 1.3 var(--font-ui);
  color: #fff;
  text-decoration: none;
  max-width: calc(100% - 2 * var(--gutter));
}
.hero3d__next:hover { background: rgba(10, 20, 50, 0.75); color: #fff; }
.hero3d__next small { display: block; font: 700 0.65rem / 1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.3rem; }
.hero3d__next .go { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gold-light); color: #0a1432; font-weight: 800; flex: none; }
@media (max-width: 47.99rem) {
  .hero3d__next { left: var(--gutter); right: var(--gutter); bottom: 4.4rem; }
  /* On a phone the words sit at the top, in the sky, and the cross rises below them.
     Shorter than full-height on purpose: a less extreme portrait crop leaves more of the video's frame visible. */
  .hero3d { align-items: start; min-height: max(480px, 58svh); }
  .hero3d__content { padding-top: 6rem; padding-bottom: 0; }
  .hero3d h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); margin-bottom: var(--space-4); }
    .hero3d__verse, .hero3d .lede, .hero3d__scroll { display: none; }
}

.hero3d__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font: 700 0.62rem / 1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); text-decoration: none;
}
.hero3d__scroll::after { content: ""; width: 1px; height: 2rem; background: linear-gradient(var(--gold-light), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hero3d__edge { position: absolute; z-index: 1; left: 0; right: 0; width: 100%; bottom: -1px; height: clamp(28px, 5vw, 64px); color: var(--paper); fill: currentColor; }


/* the sentinel the header watches */
.hero3d [data-hero-end] { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

/* ---------- Hero entrance and ambient animation ----------
   Lines rise out of a soft blur, then everything else follows in turn. With reduced motion the same
   sequence plays as fades only (no movement). The words are in the page from the start for readers and search. */
.hero3d h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero3d h1 .line > span { display: inline-block; }
.hero3d h1 .hl > span {
  color: transparent;
  background: linear-gradient(110deg, var(--gold-light) 38%, #fff3d6 50%, var(--gold-light) 62%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text;
}
@keyframes hero-line { from { opacity: 0; transform: translateY(105%); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-in-right { from { opacity: 0; transform: translateX(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-fade { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes hero-shimmer { 0%, 70% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hero-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 185, 138, 0.6); } 60% { box-shadow: 0 0 0 9px rgba(217, 185, 138, 0); } }

.hero3d .eyebrow { animation: hero-rise 900ms var(--ease) 150ms both; }
.hero3d h1 .line:nth-child(1) > span { animation: hero-line 1100ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; }
.hero3d h1 .line:nth-child(2) > span { animation: hero-line 1100ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both, hero-shimmer 7s ease-in-out 2.4s infinite; }
.hero3d__content .lede { animation: hero-rise 900ms var(--ease) 850ms both; }
.hero3d__content .btn-row { animation: hero-rise 900ms var(--ease) 1050ms both; }
.hero3d__verse { animation: hero-fade 1200ms var(--ease) 1500ms both; }
.hero3d__event .go { animation: hero-pulse 2.8s ease-out 2.6s infinite; }
.hero3d__scroll { animation: hero-fade 900ms var(--ease) 2000ms both; }
:is(body.is-home, body.has-hero) .site-header .masthead { animation: hero-fade 900ms var(--ease) 100ms both; }
.hero3d .btn { position: relative; overflow: hidden; }
.hero3d .btn:not(.btn--ghost)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) 0 0 / 250% 100%; background-position: 120% 0; transition: background-position 700ms var(--ease); }
.hero3d .btn:not(.btn--ghost):hover::after { background-position: -40% 0; }

@media (prefers-reduced-motion: reduce) {
  /* Same order and timing, but fades instead of movement. Overrides the global "no animation" rule for these. */
  .hero3d .eyebrow, .hero3d__content .lede, .hero3d__content .btn-row, .hero3d__verse, .hero3d__scroll, body.is-home .site-header .masthead { animation-name: hero-fade !important; animation-duration: 1200ms !important; animation-iteration-count: 1 !important; }
  .hero3d h1 .line:nth-child(1) > span { animation: hero-fade 1400ms var(--ease) 300ms both !important; }
  .hero3d h1 .line:nth-child(2) > span { animation: hero-fade 1400ms var(--ease) 550ms both, hero-shimmer 9s ease-in-out 3s infinite !important; }
  .hero3d__event .go { animation: none !important; }
}

/* ---------- Events pill, beside the next-service pill ---------- */
.hero3d__event {
  position: absolute; z-index: 2; right: var(--gutter);
  bottom: calc(clamp(3.4rem, 8vh, 5rem) + 4.6rem);
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  background: rgba(10, 20, 50, 0.55); backdrop-filter: blur(14px);
  border: 1px solid rgba(217, 185, 138, 0.4); border-radius: 999px;
  font: 600 var(--text-sm) / 1.3 var(--font-ui); color: #fff; text-decoration: none;
  max-width: calc(100% - 2 * var(--gutter));
}
.hero3d__event:hover { background: rgba(10, 20, 50, 0.75); color: #fff; }
.hero3d__event small { display: block; font: 700 0.65rem / 1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.3rem; }
.hero3d__event-date { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--gold-light); color: #0a1432; font: 700 0.6rem / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.hero3d__event-date b { font: 800 1.1rem / 1 var(--font-display); }
.hero3d__event .go { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gold-light); color: var(--gold-light); font-weight: 800; flex: none; }
@media (max-width: 47.99rem) {
  .hero3d__event { left: var(--gutter); right: var(--gutter); bottom: 9.2rem; }
}

/* Home page sections below the hero. Deep Water (dark) and Harbour (light) alternate down the page. */

/* ---------- Shared pieces ---------- */
.hl { color: var(--brass); }
.edge { position: absolute; left: 0; right: 0; width: 100%; top: -1px; height: clamp(28px, 5vw, 64px); transform: scaleY(-1); fill: currentColor; color: var(--paper); display: block; }
.section-head { margin-bottom: var(--space-7); max-width: 44rem; }
.section-head h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); letter-spacing: -0.045em; margin-bottom: 0; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.section-head--light h2 { color: #fff; }
.section-head--light .eyebrow, .visit .eyebrow, .prayer .eyebrow { color: var(--gold-light); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; padding: 0.6rem 0.95rem; font: 600 0.9rem / 1 var(--font-ui); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.chips--light li { background: rgba(255, 255, 255, 0.07); border-color: rgba(217, 185, 138, 0.5); color: #fff; font-size: 1rem; padding: 0.7rem 1.1rem; }
.chips [lang="ml"], .chips [lang="ta"], .chips [lang="te"], .chips [lang="hi"], .chips [lang="ur"] { line-height: 1.3; }
.btn--light { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; box-shadow: none; }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--navy); }
.visit .btn:not(.btn--light), .prayer .btn:not(.btn--ghost) { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; box-shadow: none; }
.visit .btn:not(.btn--light):hover, .prayer .btn:not(.btn--ghost):hover { background: #fff; border-color: #fff; }
.prayer .btn--ghost { color: #fff; text-decoration-color: var(--gold-light); box-shadow: none; }
body.is-home .site-footer { margin-top: 0; }
body.is-home main { overflow-x: clip; }

/* ---------- Welcome ---------- */
.welcome { padding-block: var(--space-9) var(--space-8); }
.welcome__grid { align-items: center; row-gap: var(--space-8); }
.welcome h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); letter-spacing: -0.05em; line-height: 1; margin-bottom: var(--space-5); }
.welcome .lede { margin-bottom: var(--space-4); }
.collage { position: relative; min-height: 26rem; margin-bottom: 2rem; }
.collage figure { margin: 0; overflow: hidden; background: var(--navy); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage__a { width: 74%; margin-left: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.collage__b { position: absolute; left: 0; bottom: -1.75rem; width: 46%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7.5px var(--gold), var(--shadow); }
.collage__c { position: absolute; right: 0; top: -1.25rem; width: 30%; aspect-ratio: 1; border-radius: var(--radius-lg); box-shadow: 0 0 0 5px var(--paper), var(--shadow); }
.collage__chip { position: absolute; right: 4%; bottom: 1rem; padding: 0.75rem 1.1rem; border-radius: 999px; background: var(--navy); color: #fff; font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: var(--shadow); }
.stats { list-style: none; margin: var(--space-9) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); background: var(--navy); color: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.stats li { margin: 0; padding: var(--space-6) var(--space-5); border-top: 1px solid var(--navy-line); }
.stats li:nth-child(-n + 2) { border-top: 0; }
.stats li:nth-child(even) { border-left: 1px solid var(--navy-line); }
.stats strong { display: block; font: 800 clamp(2.2rem, 1.4rem + 3vw, 3.6rem) / 1 var(--font-display); letter-spacing: -0.05em; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: var(--space-2); font: 500 var(--text-sm) / 1.4 var(--font-ui); color: #c9d6f0; max-width: 16rem; }
@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats li { border-top: 0 !important; border-left: 1px solid var(--navy-line); }
  .stats li:first-child { border-left: 0; }
  .collage { min-height: 34rem; }
}

/* ---------- Plan your visit (Deep Water) ---------- */
.visit {
  position: relative;
  padding: calc(var(--space-9) + 2.5rem) 0 var(--space-9);
  color: #fff;
  background:
    radial-gradient(50% 70% at 88% 8%, rgba(166, 125, 81, 0.28), transparent 62%),
    radial-gradient(40% 50% at 6% 92%, rgba(52, 73, 138, 0.5), transparent 70%),
    linear-gradient(180deg, #0f1d45, #14265a 55%, #0f1d45);
}
.visit__grid { align-items: center; row-gap: var(--space-7); }
.visit h2 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); letter-spacing: -0.05em; line-height: 1; margin-bottom: var(--space-3); }
.visit__where { color: #b8c6e6; margin-bottom: var(--space-5); }
.visit__time { margin: var(--space-5) 0 var(--space-6); padding: var(--space-5); border-left: 3px solid var(--gold); background: rgba(255, 255, 255, 0.05); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.visit__time small { display: block; font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.visit__time strong { display: block; margin: var(--space-2) 0; font: 800 clamp(2rem, 1.2rem + 3.2vw, 3.6rem) / 1 var(--font-display); letter-spacing: -0.05em; }
.visit__time span { color: #dbe5f8; }
.visit__langs-title { margin: 0 0 var(--space-3); font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.visit__ask { margin: var(--space-4) 0 var(--space-6); color: #b8c6e6; }
.visit__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 0 0 9.5px var(--gold), 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; }
.visit__notes { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.visit__notes li { position: relative; margin: 0; padding-left: 1.6rem; color: #dbe5f8; }
.visit__notes li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.9rem; height: 1px; background: var(--gold); }
.visit__notes b { color: #fff; }
@media (min-width: 60rem) { .visit__photo { max-width: 28rem; margin-left: auto; } }

/* ---------- Three steps ---------- */
.steps { padding-block: var(--space-9); }
.step { display: block; padding-bottom: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: inherit; text-decoration: none; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: inherit; }
.step__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.step__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.step:hover .step__photo img { transform: scale(1.05); }
.step__n { display: inline-block; margin: var(--space-5) 0 0 var(--space-5); font: 800 var(--text-xl) / 1 var(--font-display); color: var(--brass); }
.step__label { display: inline-block; margin-left: var(--space-2); font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.step h3, .step p { margin-inline: var(--space-5); }
.step h3 { margin-top: var(--space-3); font-size: var(--text-xl); }
.step p { margin-bottom: 0; color: var(--ink-soft); }

/* ---------- Our story ---------- */
.story { padding-block: var(--space-9); background: linear-gradient(180deg, var(--paper), #dce6f6 45%, var(--paper)); }
.story__grid { align-items: center; row-gap: var(--space-7); }
.story__art figure { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.story__art img { width: 100%; height: 100%; object-fit: cover; }
.story__art blockquote { margin: var(--space-5) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--gold); font: 700 var(--text-lg) / 1.35 var(--font-display); letter-spacing: -0.02em; color: var(--navy); max-width: 26rem; }
.timeline { list-style: none; margin: 0 0 var(--space-6); padding: 0 0 0 1.6rem; border-left: 1px solid var(--gold); display: grid; gap: var(--space-6); }
.timeline li { position: relative; margin: 0; display: grid; gap: var(--space-2) var(--space-4); }
.timeline li::before { content: ""; position: absolute; left: calc(-1.6rem - 5px); top: 0.55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--paper); }
.timeline__year { font: 800 clamp(1.5rem, 1rem + 1.6vw, 2.2rem) / 1 var(--font-display); letter-spacing: -0.04em; color: var(--brass); }
.timeline h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.timeline p { margin: 0; color: var(--ink-soft); }
@media (min-width: 40rem) { .timeline li { grid-template-columns: 6.5rem 1fr; } }

/* ---------- Sermons ---------- */
.sermons { padding-block: var(--space-8); }
.sermon { display: block; color: inherit; text-decoration: none; }
.sermon:hover { color: inherit; }
.sermon__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-deep); box-shadow: var(--shadow); }
.sermon__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.sermon:hover .sermon__thumb img { transform: scale(1.05); }
.sermon__play { position: absolute; right: 0.8rem; bottom: 0.8rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; }
.sermon__play::before { content: ""; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.sermon__play::after { content: ""; position: absolute; width: 0; height: 0; margin-left: 0.25rem; border-left: 0.7rem solid var(--navy); border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; }
.sermon__meta { display: block; margin-top: var(--space-4); font: 700 var(--text-xs) / 1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.sermon h3 { margin-top: var(--space-2); font-size: var(--text-lg); line-height: 1.25; }

/* ---------- Leaders ---------- */
.leaders { padding-block: var(--space-8) var(--space-9); }
.leaders__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.leaders__grid li { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; font: 500 var(--text-sm) / 1.35 var(--font-ui); color: var(--ink-mute); }
.leaders__grid strong { color: var(--navy); font-size: var(--text-base); font-weight: 700; }
.leaders__photo { display: block; aspect-ratio: 4 / 5; margin-bottom: var(--space-3); border-radius: var(--radius-lg); overflow: hidden; background: #cfd8ea; }
.leaders__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 700ms var(--ease); }
.leaders__grid li:hover img { transform: scale(1.04); }
@media (min-width: 48rem) { .leaders__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Values (Deep Water again) ---------- */
.values { position: relative; padding: calc(var(--space-9) + 2.5rem) 0 var(--space-9); color: #fff; background: radial-gradient(60% 50% at 50% 0%, rgba(166, 125, 81, 0.2), transparent 70%), linear-gradient(180deg, #0f1d45, #0a1432); }
.value { padding: var(--space-6); border: 1px solid rgba(217, 185, 138, 0.28); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.03); transition: border-color 300ms var(--ease), background 300ms var(--ease); }
.value:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.06); }
.value__icon { width: 3.6rem; height: 3.6rem; margin-bottom: var(--space-5); color: var(--gold-light); }
.value h3 { color: #fff; font-size: var(--text-xl); }
.value p { color: #c9d6f0; }
.value ul { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(217, 185, 138, 0.28); }
.value li { margin: 0 0 var(--space-2); font: 600 var(--text-sm) / 1.4 var(--font-ui); color: var(--gold-light); }

/* ---------- Ministries ---------- */
.ministries { padding-block: var(--space-9); }
.ministries__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .ministries__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .ministries__grid { grid-template-columns: repeat(4, 1fr); } }
.ministry { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.ministry:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.ministry__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ministry__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ministry:hover .ministry__photo img { transform: scale(1.05); }
.ministry__body { display: block; padding: var(--space-5); }
.ministry h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.ministry p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.ministry:not(.ministry--photo) { justify-content: flex-end; min-height: 13rem; background: var(--navy); border-color: transparent; border-top: 3px solid var(--gold); }
.ministry__mark { width: 2.6rem; height: 2.6rem; margin: var(--space-5) var(--space-5) auto; color: var(--gold); }
.ministry:not(.ministry--photo) h3 { color: #fff; }
.ministry:not(.ministry--photo) p { color: #c9d6f0; }

/* ---------- Prayer ---------- */
.prayer { position: relative; isolation: isolate; padding: calc(var(--space-9) + 2.5rem) 0 calc(var(--space-9) + 1rem); color: #fff; background: #0a1432; overflow: hidden; }
.prayer__bg { position: absolute; inset: 0; z-index: -1; }
.prayer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.prayer__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a1432 18%, rgba(10, 20, 50, 0.6) 62%, rgba(10, 20, 50, 0.35)); }
.prayer__inner > * { max-width: 38rem; }
.prayer h2 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); letter-spacing: -0.05em; line-height: 1; }
.prayer .lede { color: #dbe5f8; }
.prayer__verse { margin: var(--space-6) 0; padding-left: var(--space-4); border-left: 1px solid var(--gold); }
.prayer__verse p { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.45; color: #fff; }
.prayer__verse cite { font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }

/* small staggers so cards arrive one after another */
.grid > [data-reveal]:nth-child(2), .ministries__grid > [data-reveal]:nth-child(4n + 2) { transition-delay: 90ms; }
.grid > [data-reveal]:nth-child(3), .ministries__grid > [data-reveal]:nth-child(4n + 3) { transition-delay: 180ms; }
.ministries__grid > [data-reveal]:nth-child(4n) { transition-delay: 270ms; }

/*
  Inner pages: the blue page opening, the content pages restyled, Churches in Sharjah, Sharjah services,
  and Insights and media. Same tokens as the home page. Upright sans only, no italics.
*/

/* ---------- Page opening (blue, under a clear header) ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(180deg, #0f1d45 0%, #1a2d61 55%, #2a4a94 100%);
  padding: calc(var(--space-9) + 1rem) 0 clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 80% at 82% 10%, rgba(120, 165, 240, 0.36), transparent 70%),
    radial-gradient(40% 60% at 6% 100%, rgba(166, 125, 81, 0.26), transparent 70%);
}
.page-hero__inner { display: grid; gap: var(--space-7); align-items: center; }
.page-hero__text > * { max-width: 44rem; }
.page-hero .eyebrow { color: var(--gold-light); }
.page-hero h1 {
  margin: 0 0 var(--space-4);
  color: #fff;
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.page-hero .lede { color: #dbe5f8; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); text-wrap: pretty; }
.page-hero .btn-row { margin-top: var(--space-5); }
.page-hero .btn { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; box-shadow: none; }
.page-hero .btn:hover { background: #fff; border-color: #fff; }
.page-hero .btn--ghost { background: transparent; border-color: transparent; color: #fff; text-decoration-color: var(--gold-light); }
.page-hero .btn--ghost:hover { background: transparent; color: #fff; text-decoration-color: #fff; }
.page-hero__art { margin: 0; }
.page-hero__art img { width: 100%; height: auto; max-height: 26rem; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgba(217, 185, 138, 0.5), 0 24px 60px -24px rgba(5, 11, 31, 0.8); }
.page-hero__edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(28px, 5vw, 64px); color: var(--paper); fill: currentColor; }
.page-hero [data-hero-end] { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }
@media (min-width: 60rem) {
  .page-hero__inner.has-image { grid-template-columns: 1.2fr 1fr; }
}

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; list-style: none; margin: 0 0 var(--space-4); padding: 0; font: 600 var(--text-xs) / 1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--gold-light); }
.crumbs a { color: #c9d6f0; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---------- Section sub-navigation ---------- */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.subnav li { margin: 0; flex: none; }
.subnav a { display: block; padding: 1rem 0.9rem; font: 700 var(--text-sm) / 1 var(--font-ui); color: var(--navy); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.subnav a:hover { border-bottom-color: var(--gold); }
.subnav a[aria-current="page"] { border-bottom-color: var(--navy); }

/* ---------- Page body and reading text ---------- */
.page-body { padding-block: var(--space-8); }
.page-body--tint { background: var(--paper-deep); }
.page-layout { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) {
  .page-layout.has-toc { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}
.toc { font: 500 var(--text-sm) / 1.4 var(--font-ui); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 60rem) { .toc { position: sticky; top: 6rem; } }
.toc strong { display: block; margin-bottom: var(--space-3); font: 800 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 0.6rem; }
.toc a { color: var(--navy); text-decoration: none; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.prose { max-width: 46rem; }
.page-layout:not(.has-toc) .prose { margin-inline: auto; }
.prose h2 { margin: var(--space-8) 0 var(--space-4); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -0.04em; line-height: 1.1; scroll-margin-top: 6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xl); letter-spacing: -0.03em; scroll-margin-top: 6rem; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.prose p { margin: 0 0 var(--space-4); }
.prose ul { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.prose ul li { position: relative; margin: 0 0 0.6rem; padding-left: 1.6rem; }
.prose ul li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); }
.prose ul.story-cards li { padding-left: 0; }
.prose ul.story-cards li::before { content: none; }
.prose a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
/* A plain .btn is solid navy with white text; without this, the ".prose a" rule above wins and makes the text navy-on-navy (invisible) until hover. */
.prose a.btn { color: var(--paper); text-decoration: none; }
.prose a.btn--secondary, .prose a.btn--ghost { color: var(--navy); }
.prose .btn-row { margin-top: var(--space-5); }
.prose__figure { margin: 0 0 var(--space-5); }
.prose__figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.prose__figure figcaption { margin-top: var(--space-2); font: 500 var(--text-sm) / 1.4 var(--font-ui); color: var(--ink-mute); }

/* ---------- A short list, shown as icon cards instead of plain bullets ---------- */
.story-cards { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.story-cards__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 13rem;
  max-width: 18rem;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font: 600 var(--text-sm) / 1.4 var(--font-ui);
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.reveal-ready .story-cards__item { transition-delay: calc(var(--i, 0) * 60ms); }
.story-cards__item:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.story-cards__icon { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--paper-deep); color: var(--navy); }
.story-cards__icon .icon { width: 1.3rem; height: 1.3rem; }

/* ---------- A single highlighted box, picked out from the page ---------- */
.callout-row { display: flex; gap: var(--space-5); align-items: stretch; margin: 0 0 var(--space-6); }
.callout-row .callout { flex: 1; margin: 0; min-width: 0; }
.callout-row__photo { display: block; flex: 1; min-width: 0; }
.callout-row__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.callout::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 20rem at 110% -20%, rgba(217, 185, 138, 0.18), transparent 60%); pointer-events: none; }
.callout__icon { display: grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(217, 185, 138, 0.16); color: var(--gold-light); animation: callout-breathe 4s ease-in-out infinite; }
.callout__icon .icon { width: 1.6rem; height: 1.6rem; }
.callout__body { position: relative; }
.callout__body h3 { margin: 0 0 0.4rem; font: 700 var(--text-xl) / 1.2 var(--font-display); color: #fff; }
.callout__body p { margin: 0; color: #d5dce5; }
.callout__link { display: inline-block; margin-top: var(--space-3); font: 700 var(--text-sm) / 1 var(--font-ui); color: var(--gold-light); text-decoration: none; }
.callout__link:hover { text-decoration: underline; text-decoration-color: var(--gold); }
@keyframes callout-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .callout__icon { animation: none; } }
@media (max-width: 47.99rem) {
  .callout-row.has-photo { flex-direction: column; }
  .callout-row__photo img { max-height: 18rem; }
}
@media (max-width: 30rem) { .callout { flex-direction: column; } }
.prose .cards, .prose .team, .prose .emirates { max-width: none; }
.prose:has(.cards, .team) { max-width: none; }
.verse { margin: 0 0 var(--space-6); padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 3px solid var(--gold); }
.verse p { margin: 0; font-size: var(--text-lg); line-height: 1.5; color: var(--navy); font-weight: 600; }
.notice-line { padding: var(--space-4) var(--space-5); background: var(--notice-wash); border-left: 3px solid var(--gold); border-radius: var(--radius); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card-link { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform var(--medium) var(--ease), border-color var(--medium) var(--ease); }
.card-link:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--ink); }
.card-link__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.card-link__photo img { width: 100%; height: 100%; object-fit: cover; }
.card-link__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); height: 100%; }
.card-link__body h2, .card-link__body h3 { margin: 0; font-size: var(--text-xl); letter-spacing: -0.03em; color: var(--navy); }
.card-link__body p { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--ink-soft); }
.card-link__go { margin-top: auto; padding-top: var(--space-3); font: 700 var(--text-sm) / 1 var(--font-ui); color: var(--brass); }
.card-link--plain { border-top: 4px solid var(--navy); }

/* ---------- Team ---------- */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.team li { margin: 0; padding: 0; text-align: center; }
.team li::before { display: none; }
.team__photo { display: block; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-3); border-radius: 50%; overflow: hidden; background: var(--navy); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--gold); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__initials { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold-light); font: 800 2rem / 1 var(--font-display); }
.team strong { display: block; font-size: var(--text-base); color: var(--navy); }
.team li > span:last-child { display: block; font-size: var(--text-sm); color: var(--ink-mute); }

/* ---------- Contact: every emirate ---------- */
.emirates { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.emirates li { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.emirates li::before { display: none; }
.emirates strong { display: block; font-size: var(--text-lg); color: var(--navy); }
.emirates span { display: block; color: var(--ink-soft); font-size: var(--text-sm); }
.emirates a { display: inline-block; margin-top: var(--space-2); font-weight: 700; font-size: var(--text-sm); }
.emirates .is-home-campus { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }

/* ---------- Closing band ---------- */
.cta-band { background: linear-gradient(180deg, #14265a, #0f1d45); color: #fff; padding-block: var(--space-8); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.cta-band .eyebrow { color: var(--gold-light); }
.cta-band h2 { margin: 0 0 var(--space-2); color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -0.045em; line-height: 1.05; }
.cta-band p { margin: 0; color: #b8c6e6; }
.cta-band .btn:not(.btn--light) { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; box-shadow: none; }
.cta-band .btn:not(.btn--light):hover { background: #fff; border-color: #fff; }

/* ---------- Churches in Sharjah ---------- */
.churches__grid { row-gap: var(--space-7); align-items: start; }

/* ---------- Upcoming services: the next, then the next, then the next ---------- */
.upcoming-list { list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.upcoming-list__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.upcoming-list__kicker { flex-basis: 100%; font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.upcoming-list__when { font: 800 var(--text-xl) / 1.1 var(--font-display); letter-spacing: -0.03em; color: var(--navy); }
.upcoming-list__lang { color: var(--ink-soft); font-size: var(--text-sm); }
.upcoming-list__item.is-next { background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow); }
.upcoming-list__item.is-next .upcoming-list__kicker { color: var(--gold-light); }
.upcoming-list__item.is-next .upcoming-list__when { color: #fff; }
.upcoming-list__item.is-next .upcoming-list__lang { color: #c9d2e0; }
.times { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-top: 2px solid var(--navy); }
.times li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--space-5); margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.times__lang { flex: 1 1 8rem; font: 800 var(--text-lg) / 1.2 var(--font-display); letter-spacing: -0.03em; color: var(--navy); }
.times__lang a { color: inherit; text-decoration-color: var(--gold); }
.times__when { font: 700 var(--text-lg) / 1.2 var(--font-ui); font-variant-numeric: tabular-nums; }
.times__note { flex-basis: 100%; font-size: var(--text-sm); color: var(--ink-mute); }

/* ---------- Filterable weekly schedule table ---------- */
.schedule { margin: 0 0 var(--space-6); }
.schedule__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.schedule__filter {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 600 var(--text-xs) / 1 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.schedule__filter:hover { border-color: var(--navy); color: var(--navy); }
.schedule__filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.schedule__wrap { overflow-x: auto; border-top: 2px solid var(--navy); -webkit-overflow-scrolling: touch; }
.schedule__table { width: 100%; min-width: 36rem; border-collapse: collapse; }
.schedule__table th {
  padding: var(--space-3) var(--space-3) var(--space-2);
  text-align: left;
  font: 700 var(--text-xs) / 1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.schedule__table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  font: 500 var(--text-sm) / 1.4 var(--font-ui);
  color: var(--ink);
  vertical-align: top;
}
.schedule__table td:first-child { font-weight: 700; color: var(--navy); white-space: nowrap; }
.schedule__table tbody tr:hover { background: var(--paper-deep); }
.schedule__empty { padding: var(--space-5) 0; color: var(--ink-mute); font-family: var(--font-ui); }

.visit-notes { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.visit-notes li { position: relative; margin: 0 0 0.7rem; padding-left: 1.6rem; line-height: 1.6; }
.visit-notes li::before { content: ""; position: absolute; left: 0.1rem; top: 0.7em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); }
.place { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.place h2 { margin-top: 0; font-size: var(--text-xl); letter-spacing: -0.03em; }
.place address { font-style: normal; margin-bottom: var(--space-4); line-height: 1.6; color: var(--ink-soft); }

/* ---------- Click-to-load embeds ---------- */
.embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); border-radius: var(--radius-lg); }
.embed--map { aspect-ratio: 4 / 3; margin-top: var(--space-4); background: linear-gradient(135deg, #1a2d61, #2a4a94); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__start { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font: 800 var(--text-lg) / 1.2 var(--font-ui); }
.embed__start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.embed__start span, .embed__start small { position: relative; }
.embed__start small { display: block; font: 500 var(--text-sm) / 1.4 var(--font-ui); color: #c9d6f0; }
.embed__start:hover { background: rgba(255, 255, 255, 0.06); }
.embed__playbtn, .insight__play { position: absolute; display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--gold-light); box-shadow: 0 10px 30px rgba(5, 11, 31, 0.5); }
.embed__playbtn::after, .insight__play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem; border-color: transparent transparent transparent #0a1432; }
.embed__fallback { position: absolute; right: 0.75rem; bottom: 0.6rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(10, 20, 50, 0.7); color: #fff; font: 700 var(--text-xs) / 1 var(--font-ui); text-decoration: none; }
.embed__fallback:hover { background: var(--navy-deep); color: #fff; }
.embed.is-ready .embed__fallback { opacity: 0; pointer-events: none; }
.embed.is-ready .embed__fallback:focus { opacity: 1; pointer-events: auto; }
.embed.is-playing .embed__fallback { display: none; }

/* ---------- Sharjah services ---------- */
.lang-grid { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.lang-grid li { margin: 0; }
.lang-card { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform var(--medium) var(--ease), border-color var(--medium) var(--ease); }
.lang-card:hover { transform: translateY(-3px); border-top-color: var(--gold); color: var(--ink); }
.lang-card__native { font: 800 clamp(1.7rem, 1.4rem + 1vw, 2.2rem) / 1.25 var(--font-display); color: var(--navy); }
.lang-card__name { font: 700 var(--text-sm) / 1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.lang-card__time { font-size: var(--text-base); color: var(--ink-soft); }
.lang-card__go { margin-top: auto; padding-top: var(--space-3); font: 700 var(--text-sm) / 1 var(--font-ui); color: var(--navy); }
.welcome-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.welcome-line strong { font: 800 clamp(2.4rem, 1.6rem + 3vw, 4rem) / 1.2 var(--font-display); color: var(--navy); }
.welcome-line span { font: 600 var(--text-lg) / 1 var(--font-ui); color: var(--brass); }
.chips a { color: inherit; text-decoration: none; }
.chips li:hover { border-color: var(--gold); }

/* ---------- Insights and media ---------- */
.feature { display: grid; gap: 0; margin-bottom: var(--space-8); overflow: hidden; background: var(--navy); color: #fff; border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow); }
.feature:hover { color: #fff; }
.feature__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--navy-deep); overflow: hidden; }
.feature__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.feature:hover .feature__thumb img { transform: scale(1.04); }
.feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); justify-content: center; }
.feature .eyebrow { color: var(--gold-light); }
.feature h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); letter-spacing: -0.045em; line-height: 1.05; }
.feature .insight__meta { color: #c9d6f0; }
.feature__verse { color: #dbe5f8; font-size: var(--text-lg); line-height: 1.5; max-width: 34rem; }
.feature .btn { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; box-shadow: none; }
@media (min-width: 60rem) { .feature { grid-template-columns: 1.3fr 1fr; } .feature__thumb { aspect-ratio: auto; min-height: 22rem; } }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.filters li { margin: 0; }
.filters a { display: inline-block; padding: 0.65rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--navy); font: 700 var(--text-sm) / 1 var(--font-ui); text-decoration: none; }
.filters a:hover { border-color: var(--gold); }
.filters a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.insights { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.insights--3 { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.insight { display: block; color: var(--ink); text-decoration: none; }
.insight:hover { color: var(--ink); }
.insight__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: var(--space-3); overflow: hidden; background: var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.insight__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.insight:hover .insight__thumb img { transform: scale(1.05); }
.insight__thumb .insight__play { width: 3.4rem; height: 3.4rem; }
.insight__thumb .insight__play::after { border-width: 0.6rem 0 0.6rem 1rem; }
.insight__meta { display: block; font: 600 var(--text-xs) / 1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.insight__meta b { font-weight: 800; }
.insight h3 { margin: 0.4rem 0 0.25rem; font-size: var(--text-lg); letter-spacing: -0.03em; line-height: 1.2; color: var(--navy); }
.insight:hover h3 { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
.insight__by { font-size: var(--text-sm); color: var(--ink-mute); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.pager span { font: 600 var(--text-sm) / 1 var(--font-ui); color: var(--ink-mute); }
.article { display: grid; gap: var(--space-7); margin-bottom: var(--space-9); }
.article .embed { max-width: 56rem; box-shadow: var(--shadow); }
.article__meta { line-height: 1.8; }
.article__meta b { display: inline-block; min-width: 6.5rem; font: 800 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .card-link, .lang-card, .insight__thumb img, .feature__thumb img { transition: none; }
  .card-link:hover, .lang-card:hover { transform: none; }
}

/* ---------- Sticky "Plan your visit" bar (phones) and WhatsApp button ---------- */
.visit-bar { display: none; }
@media (max-width: 59.99rem) {
  body.has-visit-bar { padding-top: 2.75rem; }
  .visit-bar { display: block; position: fixed; z-index: 130; top: 0; left: 0; right: 0; background: var(--gold-light); color: #0a1432; box-shadow: 0 2px 12px rgba(5, 11, 31, 0.25); }
  .visit-bar summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.75rem; padding: 0 var(--gutter); list-style: none; cursor: pointer; font: 800 var(--text-sm) / 1 var(--font-ui); }
  .visit-bar summary::-webkit-details-marker { display: none; }
  .visit-bar__go { font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
  .visit-bar__go::after { content: " ▾"; }
  .visit-bar[open] .visit-bar__go::after { content: " ▴"; }
  .visit-bar__panel { padding: var(--space-3) var(--gutter) var(--space-4); background: var(--surface); color: var(--ink); max-height: calc(100svh - 2.75rem); overflow-y: auto; border-bottom: 3px solid var(--gold); }
  .visit-bar__panel ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
  .visit-bar__panel li { margin: 0; border-bottom: 1px solid var(--line); }
  .visit-bar__panel li a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.7rem 0; color: var(--navy); text-decoration: none; }
  .visit-bar__panel li span { color: var(--ink-soft); font-size: var(--text-sm); }
  .visit-bar__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  :is(body.is-home, body.has-hero) .site-header { top: 2.75rem; }
  .nav-open .visit-bar { display: none; }
}
.wa-float { position: fixed; z-index: 120; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1.1rem 0 0.9rem; border-radius: 999px; background: #1f8f4e; color: #fff; font: 800 var(--text-sm) / 1 var(--font-ui); text-decoration: none; box-shadow: 0 8px 24px rgba(5, 11, 31, 0.35); }
.wa-float:hover { background: #17753f; color: #fff; }
.wa-float svg { width: 1.6rem; height: 1.6rem; }

/* ---- Back to top: fades and slides in once you have scrolled, sits above the WhatsApp button ---- */
.to-top {
  position: fixed;
  z-index: 119;
  right: 1.25rem;
  bottom: calc(1rem + 3.25rem + 0.75rem);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(5, 11, 31, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms, background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.to-top svg { width: 1.3rem; height: 1.3rem; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--gold); background: var(--paper-deep); }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 120ms linear, visibility 120ms; transform: none; }
}
@media (max-width: 36rem) {
  .to-top { right: 0.85rem; bottom: calc(0.85rem + 3.25rem + 0.6rem); width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 47.99rem) { .hero3d__next { bottom: 5.4rem; } }

/* ---------- Public forms ---------- */
.pform { max-width: 36rem; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pform h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); letter-spacing: -0.03em; }
.pform > p { margin: 0 0 var(--space-4); color: var(--ink-soft); }
.pform .field { margin-bottom: var(--space-4); }
.pform .btn { margin-top: var(--space-2); }
.pform--newsletter { max-width: none; padding: 0; margin: var(--space-5) 0 var(--space-4); background: transparent; border: 0; box-shadow: none; }
.site-footer .pform--newsletter h2 { margin-bottom: var(--space-2); }
.site-footer .pform--newsletter .field label { color: #fff; }
.site-footer .pform--newsletter .check label { color: #c9d6f0; font-size: var(--text-xs); }
.prose .pform { margin-top: var(--space-8); max-width: none; }
select.input { width: 100%; }

/* ---------- 40-day campaign ---------- */
.days { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.days li { margin: 0; }
.day { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; min-height: 5.5rem; padding: 0.8rem 0.9rem; background: var(--paper-deep); border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-mute); text-decoration: none; }
.day b { font: 800 1.6rem / 1 var(--font-display); letter-spacing: -0.04em; }
.day span { font-size: var(--text-xs); line-height: 1.3; }
.day.is-open { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
.day.is-open b { color: var(--gold-light); }
a.day.is-open:hover { background: var(--navy-deep); color: #fff; }
.feature--text { margin-bottom: var(--space-8); }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { margin: 0; border-bottom: 1px solid var(--line); }
.linklist a { display: block; padding: 0.8rem 0; color: var(--navy); font-weight: 600; text-decoration: none; }
.linklist a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* ---------- Events: a timeline of dated cards ---------- */
.events-timeline { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.events-timeline__item { position: relative; margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.events-timeline__item::before { content: ""; position: absolute; left: 0.3rem; top: 2.8rem; bottom: -1.9rem; width: 1px; background: var(--line); }
.events-timeline__item:last-child::before { display: none; }
.events-timeline__dot { position: absolute; left: 0; top: 1.6rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--paper); }
.tcard { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.tcard:hover { border-color: var(--gold); color: var(--ink); transform: translateX(2px); }
.tcard__thumb { flex: none; width: 4.6rem; height: 4.6rem; border-radius: var(--radius); overflow: hidden; }
.tcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard__thumb-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--navy); color: var(--gold-light); }
.tcard__thumb-fallback .icon { width: 1.4rem; height: 1.4rem; }
.tcard__body { flex: 1; min-width: 0; }
.tcard__meta { display: block; font: 600 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.tcard__title { display: block; margin-top: 0.3rem; font: 700 var(--text-lg) / 1.2 var(--font-display); letter-spacing: -0.02em; color: var(--navy); }
.tcard__flag { display: inline-block; margin-top: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--paper-deep); font: 600 var(--text-xs) / 1.4 var(--font-ui); color: var(--brass); }
.tcard__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  flex: none;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(217, 185, 138, 0.35);
}
.tcard__date b { font: 800 2rem / 1 var(--font-display); color: #fff; }
.tcard__date small { font: 700 0.68rem / 1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.tcard__date em { margin-top: 0.2rem; font: 600 0.62rem / 1 var(--font-ui); font-style: normal; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 36rem) {
  .events-timeline__item { padding-left: var(--space-5); }
  .tcard { gap: var(--space-3); padding: var(--space-3); }
  .tcard__thumb { width: 3.6rem; height: 3.6rem; }
  .tcard__date { width: 5rem; height: 5rem; }
  .tcard__date b { font-size: 1.5rem; }
  .tcard__date em { display: none; }
}

/* ---------- Misc ---------- */
.searchbar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); max-width: 34rem; }
.searchbar .input { flex: 1 1 14rem; }
.insight__thumb--text { background: linear-gradient(135deg, #1a2d61, #2a4a94); }
.insight__kind { position: relative; padding: 0 var(--space-4); color: var(--gold-light); font: 800 var(--text-sm) / 1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.emirates--big li { padding: var(--space-5); }
.emirates--big strong { font-size: var(--text-xl); }

/* ---------- The next step, at the end of every page ---------- */
.next { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #14265a 0%, #0f1d45 100%); color: #fff; padding-block: var(--space-8) var(--space-7); }
.next__waves { position: absolute; inset: auto 0 0 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: rgba(217, 185, 138, 0.22); stroke-width: 1.2; }
.next__waves path { vector-effect: non-scaling-stroke; transition: transform 900ms var(--ease); }
.next:has(.next__link:hover) .next__waves path:nth-child(1) { transform: translateX(-2.5%); }
.next:has(.next__link:hover) .next__waves path:nth-child(2) { transform: translateX(2%); }
.next:has(.next__link:hover) .next__waves path:nth-child(3) { transform: translateX(-1.5%); }
.next__inner { display: grid; gap: var(--space-6); }
.next__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); color: #fff; text-decoration: none; border-top: 1px solid rgba(217, 185, 138, 0.35); border-bottom: 1px solid rgba(217, 185, 138, 0.35); }
.next__link:hover { color: #fff; }
.next__text { display: grid; gap: var(--space-2); }
.next .eyebrow { color: var(--gold-light); }
.next__title { font: 800 clamp(2.2rem, 1.2rem + 5vw, 5rem) / 1 var(--font-display); letter-spacing: -0.05em; transition: transform 500ms var(--ease), color 300ms; }
.next__link:hover .next__title { transform: translateX(0.6rem); color: var(--gold-light); }
.next__line { font-size: var(--text-lg); color: #c9d6f0; max-width: 34rem; }
.next__arrow { display: grid; place-items: center; flex: none; width: clamp(3.4rem, 8vw, 5.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--gold-light); color: #0a1432; transition: transform 500ms var(--ease), background 300ms; }
.next__arrow svg { width: 45%; height: 45%; transition: transform 500ms var(--ease); }
.next__link:hover .next__arrow { background: #fff; transform: scale(1.08); }
.next__link:hover .next__arrow svg { transform: translateX(0.3rem); }
.next__more { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); list-style: none; margin: 0; padding: 0; }
.next__more li { margin: 0; }
.next__more a { color: #c9d6f0; font: 700 var(--text-sm) / 1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; text-decoration-color: var(--gold); text-underline-offset: 0.35em; }
.next__more a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .next__title, .next__arrow, .next__arrow svg, .next__waves path { transition: none; }
  .next__link:hover .next__title, .next__link:hover .next__arrow, .next__link:hover .next__arrow svg { transform: none; }
}

/*
  The About pages: a story told as you scroll. Everything is readable with no script and with reduced motion
  (the movement turns into simple fades). Upright sans only, no italics. No inline styles: delays use nth-child.
*/

.chapter { padding-block: var(--space-9); position: relative; }
.chapter--statement { background: var(--paper); }
.chapter--numbers { padding-block: 0 var(--space-8); }
.chapter--timeline { background: var(--paper-deep); overflow: hidden; }
.chapter--values { background: linear-gradient(180deg, #0f1d45, #14265a 55%, #0f1d45); color: #fff; }
.chapter--family { padding-block: var(--space-8); }
.chapter--leaders { background: var(--paper-deep); padding-block: var(--space-8); }

/* ---------- The statement, one word at a time ---------- */
.statement { max-width: 22ch; margin: var(--space-4) 0 var(--space-6); font: 800 clamp(2.6rem, 1.3rem + 6vw, 6rem) / 0.98 var(--font-display); letter-spacing: -0.055em; color: var(--navy); text-wrap: balance; }
.statement span { display: inline-block; transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); }
.statement span:nth-child(n + 7) { color: var(--brass); }
.reveal-ready .words:not(.is-visible) span { opacity: 0.12; transform: translateY(0.35em); filter: blur(6px); }
.words span:nth-child(1) { transition-delay: 0ms; } .words span:nth-child(2) { transition-delay: 90ms; } .words span:nth-child(3) { transition-delay: 180ms; }
.words span:nth-child(4) { transition-delay: 270ms; } .words span:nth-child(5) { transition-delay: 360ms; } .words span:nth-child(6) { transition-delay: 450ms; }
.words span:nth-child(7) { transition-delay: 540ms; } .words span:nth-child(8) { transition-delay: 630ms; } .words span:nth-child(9) { transition-delay: 720ms; }
.words span:nth-child(10) { transition-delay: 810ms; } .words span:nth-child(11) { transition-delay: 900ms; } .words span:nth-child(12) { transition-delay: 990ms; }
.statement__sub { max-width: 44rem; font-size: var(--text-lg); line-height: 1.6; color: var(--ink-soft); }

/* ---------- Numbers ---------- */
.stats--about { margin-top: 0; }

/* ---------- Timeline: the line draws itself as you scroll ---------- */
.tline { --p: 0; position: relative; list-style: none; margin: 0; padding: 0; }
.tline::before, .tline::after { content: ""; position: absolute; left: 1.1rem; top: 0; bottom: 0; width: 3px; border-radius: 3px; }
.tline::before { background: var(--line); }
.tline::after { background: linear-gradient(var(--gold), var(--navy)); transform-origin: top; transform: scaleY(var(--p)); }
.tline__item { position: relative; display: grid; gap: var(--space-4); margin: 0 0 var(--space-9); padding-left: 3.5rem; }
.tline__item:last-child { margin-bottom: 0; }
.tline__dot { position: absolute; left: 0.45rem; top: 0.4rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--paper-deep); border: 3px solid var(--gold); transition: transform 600ms var(--ease), background 400ms; }
.tline__item.is-visible .tline__dot { background: var(--gold); transform: scale(1.15); }
.tline__year { font: 800 clamp(3rem, 1.8rem + 6vw, 7rem) / 0.9 var(--font-display); letter-spacing: -0.06em; color: var(--navy); font-variant-numeric: tabular-nums; }
.tline__card { max-width: 34rem; padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.tline__card h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); letter-spacing: -0.03em; color: var(--navy); }
.tline__card p { margin: 0; line-height: 1.65; color: var(--ink-soft); }
.tline__photo { margin: 0; max-width: 26rem; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); will-change: transform; }
.tline__photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 60rem) {
  .tline::before, .tline::after { left: 50%; margin-left: -1.5px; }
  .tline__item { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 6rem; padding-left: 0; }
  .tline__dot { left: 50%; top: 2.2rem; margin-left: -0.72rem; }
  .tline__year, .tline__card { grid-column: 1; justify-self: end; text-align: right; }
  .tline__card { border-left: 1px solid var(--line); border-right: 4px solid var(--gold); }
  .tline__photo { grid-column: 2; grid-row: 1 / span 2; justify-self: start; }
  .tline__item.is-right .tline__year, .tline__item.is-right .tline__card { grid-column: 2; justify-self: start; text-align: left; }
  .tline__item.is-right .tline__card { border-right: 1px solid var(--line); border-left: 4px solid var(--gold); }
  .tline__item.is-right .tline__photo { grid-column: 1; justify-self: end; }
}
/* Items slide in from their own side */
.reveal-ready .tline__item[data-reveal]:not(.is-visible) .tline__card { opacity: 0; transform: translateX(-2rem); }
.reveal-ready .tline__item.is-right[data-reveal]:not(.is-visible) .tline__card { transform: translateX(2rem); }
.reveal-ready .tline__item[data-reveal]:not(.is-visible) .tline__photo { opacity: 0; transform: scale(0.94); }
.tline__card, .tline__photo { transition: opacity 800ms var(--ease) 150ms, transform 800ms var(--ease) 150ms; }

/* ---------- Values: icons draw themselves ---------- */
.value--draw .value__icon * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease) 250ms; }
.reveal-ready .value--draw[data-reveal]:not(.is-visible) .value__icon * { stroke-dashoffset: 1; }
.value--draw:nth-child(2) .value__icon * { transition-delay: 450ms; } .value--draw:nth-child(3) .value__icon * { transition-delay: 650ms; }

/* ---------- Family ---------- */
.family { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-7); max-width: 56rem; padding: var(--space-6) var(--space-7); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.family__seal { width: 6rem; height: 6rem; flex: none; }
.family h2 { margin: var(--space-2) 0; font-size: var(--text-2xl); letter-spacing: -0.04em; }
.family p { margin: 0; max-width: 38rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .statement span, .tline__dot, .tline__card, .tline__photo, .value--draw .value__icon * { transition-duration: 1ms; transition-delay: 0ms; }
  .tline__photo { will-change: auto; }
  .reveal-ready .words:not(.is-visible) span { transform: none; filter: none; }
  .reveal-ready .tline__item[data-reveal]:not(.is-visible) .tline__card, .reveal-ready .tline__item.is-right[data-reveal]:not(.is-visible) .tline__card, .reveal-ready .tline__item[data-reveal]:not(.is-visible) .tline__photo { transform: none; }
}

/*
  Theme: "Cathedral at night". A deep-navy stage holds a framed photograph, badges and card rails (the cinematic,
  confident structure), while reading sections stay on soft blue paper, photographs get white mats, the scripture
  turns slowly in a ring, and small ornaments (laurel, cross) keep it warm and unhurried rather than trendy.
  Loaded last, so it overrides the earlier files. Plus Jakarta Sans only, upright, no italics, no inline styles.
*/
:root {
  --stage: #0a1432;
  --stage-pad: clamp(0.5rem, 1.4vw, 1rem);
  --radius-xl: 1.5rem;
}

/* ---------- Pill buttons on the public site ---------- */
body.public .btn { border-radius: 999px; padding-inline: 1.5rem; }
body.public .btn--small { padding-inline: 1.1rem; }

/* ---------- Header: a solid deep-navy bar above the framed hero ---------- */
:is(body.is-home, body.has-hero) .site-header,
:is(body.is-home, body.has-hero) .site-header.is-solid {
  position: sticky; top: 0; inset-inline: 0; background: var(--stage); color: #fff; box-shadow: none; backdrop-filter: none;
}
:is(body.is-home, body.has-hero) .site-header .brand,
:is(body.is-home, body.has-hero) .site-header.is-solid .brand { color: #fff; }
:is(body.is-home, body.has-hero) .site-header .brand__tag,
:is(body.is-home, body.has-hero) .site-header.is-solid .brand__tag { color: var(--gold-light); }
:is(body.is-home, body.has-hero) .site-header .menu-toggle,
:is(body.is-home, body.has-hero) .site-header.is-solid .menu-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.55); border-radius: 999px; }
@media (min-width: 60rem) {
  :is(body.is-home, body.has-hero) .site-header .site-nav li a,
  :is(body.is-home, body.has-hero) .site-header.is-solid .site-nav li a { color: #fff; border-bottom: 2px solid transparent; padding-block: 0.4rem; }
  :is(body.is-home, body.has-hero) .site-header .site-nav li a:hover,
  :is(body.is-home, body.has-hero) .site-header .site-nav li a[aria-current="page"] { border-bottom-color: var(--gold-light); }
  :is(body.is-home, body.has-hero) .site-header .site-nav .btn,
  :is(body.is-home, body.has-hero) .site-header.is-solid .site-nav .btn { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }
  :is(body.is-home, body.has-hero) .site-header .site-nav .btn:hover { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; }
  /* The dropdown panel always sits on its own light surface, so its links stay dark regardless of the hero */
  :is(body.is-home, body.has-hero) .site-header .nav-item--drop .nav-drop a,
  :is(body.is-home, body.has-hero) .site-header.is-solid .nav-item--drop .nav-drop a { color: var(--navy); border-bottom: 0; }
  :is(body.is-home, body.has-hero) .site-header .nav-item--drop .nav-drop a:hover,
  :is(body.is-home, body.has-hero) .site-header .nav-item--drop .nav-drop a[aria-current="page"] { border-bottom: 0; background: var(--paper-deep); }
}
@media (max-width: 59.99rem) { :is(body.is-home, body.has-hero) .site-header { top: 2.75rem; } }
.edge { display: none; }

/* ---------- The stage: deep navy around a framed hero ---------- */
.stage { background: var(--stage); padding: 0 var(--stage-pad) var(--stage-pad); }
.stage .hero3d,
.stage .page-hero { border-radius: var(--radius-xl); }

/* Home hero: a framed photograph under a blue wash */
.stage .hero3d { min-height: clamp(34rem, calc(100svh - 7rem), 52rem); max-height: none; background: var(--navy-deep); align-items: end; }
.hero3d__photo { position: absolute; inset: 0; display: block; }
.hero3d__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: saturate(0.75) contrast(1.02); animation: hero-zoom 2.4s var(--ease) both; }
.hero3d__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero3d__video { display: none; } }
.hero3d__waves, .hero3d__glow, .hero3d__edge { display: none; }
.stage .hero3d__scrim {
  background: rgba(15, 29, 69, 0.55);
}
.stage .hero3d__content { padding: var(--space-9) var(--space-6) var(--space-7); }
@media (min-width: 60rem) { .stage .hero3d__content { padding-inline: var(--space-8); padding-bottom: var(--space-8); } }
.hero3d__est { position: absolute; z-index: 2; top: var(--space-6); left: var(--space-6); margin: 0; display: grid; gap: 0.25rem; color: #fff; }
.hero3d__est b { font: 800 clamp(1.8rem, 1.2rem + 2vw, 2.8rem) / 1 var(--font-display); letter-spacing: -0.04em; }
.hero3d__est span { font: 700 0.62rem / 1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); }
.hero3d__quote { position: absolute; z-index: 2; top: var(--space-6); right: var(--space-6); margin: 0; max-width: 21rem; display: none; color: #e6edf9; }
.hero3d__quote p { margin: 0 0 var(--space-2); font-size: var(--text-base); line-height: 1.5; }
.hero3d__quote p::before { content: "“"; display: block; font: 800 3rem / 0.7 var(--font-display); color: var(--gold); }
.hero3d__quote cite { font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }
@media (min-width: 60rem) { .hero3d__quote { display: block; } }
.hero3d__cards { position: absolute; z-index: 2; right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); max-width: calc(100% - 2 * var(--space-6)); }
.hero3d__cards > a { position: static; inset: auto; }
@media (max-width: 59.99rem) {
  .stage .hero3d { display: flex; flex-direction: column; justify-content: flex-end; }
  .stage .hero3d__content { padding-bottom: var(--space-5); }
  .hero3d__cards { position: relative; right: auto; bottom: auto; align-items: stretch; max-width: none; padding: 0 var(--space-5) var(--space-5); }
  .hero3d__est { top: var(--space-5); left: var(--space-5); }
  .stage .hero3d .lede { display: block; font-size: 1rem; }
}

/* ---------- Badges (laurel) ---------- */
.honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-4) var(--space-3); list-style: none; margin: var(--stage-pad) 0 0; padding: var(--space-5) var(--space-4); border-top: 1px solid rgba(217, 185, 138, 0.25); }
.honours li { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: 0; color: #fff; }
.laurel { width: 2.7rem; height: 2.7rem; flex: none; color: var(--gold); }
.honours span { display: grid; gap: 0.2rem; }
.honours b { font: 800 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; }
.honours small { font: 500 0.72rem / 1.2 var(--font-ui); color: var(--gold-light); }
@media (max-width: 47.99rem) { .honours { display: none; } }

/* ---------- Card rails (horizontal, snapping) ---------- */
.rail { padding: var(--space-6) var(--space-4) var(--space-7); color: #fff; }
.rail__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); padding-inline: var(--space-2); }
.rail__head h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.04em; }
.rail__head > a { font: 600 var(--text-sm) / 1 var(--font-ui); color: var(--gold-light); text-underline-offset: 0.3em; }
.rail__arrows { display: flex; gap: 0.5rem; margin-left: auto; align-self: center; }
.rail__arrows button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; font: 700 1.3rem / 1 var(--font-ui); cursor: pointer; }
.rail__arrows button:hover { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; }
.rail__track { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.rail__track li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.rcard { position: relative; display: flex; align-items: flex-end; width: 15rem; aspect-ratio: 3 / 4.2; overflow: hidden; border-radius: 0.9rem; background: var(--navy); color: #fff; text-decoration: none; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.rcard--tall { width: 16.5rem; aspect-ratio: 3 / 4.6; }
.rcard:hover { transform: translateY(-4px); color: #fff; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
.rcard__photo { position: absolute; inset: 0; }
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.rcard:hover .rcard__photo img { transform: scale(1.06); }
.rcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 20, 50, 0.96) 0%, rgba(10, 20, 50, 0.55) 45%, rgba(10, 20, 50, 0.1) 100%); }
.rcard__date { position: absolute; z-index: 1; top: 0.8rem; left: 0.8rem; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--gold-light); color: #0a1432; font: 700 0.6rem / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.rcard__date b { font: 800 1.3rem / 1 var(--font-display); }
.rcard__body { position: relative; z-index: 1; display: grid; gap: 0.35rem; padding: var(--space-5); }
.rcard__body b { font: 800 var(--text-xl) / 1.1 var(--font-display); letter-spacing: -0.03em; }
.rcard__body span { font-size: var(--text-sm); line-height: 1.4; color: #d3def4; }
.rail--ministries { padding: 0; color: var(--ink); }
.rail--ministries .rail__head--bar { justify-content: flex-end; margin-bottom: var(--space-4); }
.rail--ministries .rail__arrows button { border-color: var(--navy); background: var(--navy); color: #fff; }
.rail--ministries .rail__arrows button:hover { background: var(--gold); border-color: var(--gold); }
.rail--ministries .rail__track { padding-inline: 0; }

/* ---------- Welcome: white-matted photographs and the turning scripture ring ---------- */
.collage figure { border: 0.55rem solid #fff; background: #fff; box-shadow: 0 1px 0 rgba(15, 29, 69, 0.08), 0 26px 50px -28px rgba(15, 29, 69, 0.55); }
.collage__a, .collage__c { border-radius: 0.3rem; }
.collage__b { box-shadow: 0 0 0 1.5px var(--gold), 0 18px 36px -18px rgba(15, 29, 69, 0.55); }
.ring { position: absolute; z-index: 2; left: -1.25rem; top: 6%; width: 8.2rem; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--gold); }
.ring svg { width: 100%; height: 100%; animation: ring-turn 46s linear infinite; }
.ring__text { font: 700 10.5px var(--font-ui); letter-spacing: 0.17em; fill: var(--navy); }
@keyframes ring-turn { to { transform: rotate(360deg); } }
.ring__mark { transform-origin: 100px 100px; animation: ring-keep 46s linear infinite; }
@keyframes ring-keep { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .ring svg, .ring__mark { animation: none; } }
@media (min-width: 48rem) { .ring { left: -2.5rem; width: 9.5rem; } }

/* ---------- Values: giant stacked words, one after another ---------- */
.values { padding-top: var(--space-9); }
.pillars { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(217, 185, 138, 0.3); }
.pillar { display: grid; gap: var(--space-4) var(--space-7); align-items: center; margin: 0; padding: var(--space-6) 0; border-bottom: 1px solid rgba(217, 185, 138, 0.3); }
.pillar__word { margin: 0; color: #fff; font: 800 clamp(2.8rem, 1.3rem + 7vw, 7.5rem) / 0.95 var(--font-display); letter-spacing: -0.06em; transition: color 300ms var(--ease), transform 500ms var(--ease); }
.pillar:hover .pillar__word { color: var(--gold-light); transform: translateX(0.5rem); }
.pillar__body p { margin: 0 0 var(--space-3); max-width: 32rem; color: #c9d6f0; font-size: var(--text-lg); line-height: 1.5; }
.pillar__body ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.pillar__body li { margin: 0; font: 600 var(--text-sm) / 1.4 var(--font-ui); color: var(--gold-light); }
.pillar__body li + li::before { content: "·"; margin-right: 1.25rem; color: var(--gold); }
@media (min-width: 60rem) { .pillar { grid-template-columns: 1.15fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .pillar__word { transition: none; } .pillar:hover .pillar__word { transform: none; } }

/* ---------- Prayer: full-bleed photograph, centred ---------- */
.prayer { text-align: center; padding-block: var(--space-9); }
.prayer__bg img { opacity: 0.7; }
.prayer__bg::after { background: linear-gradient(180deg, rgba(10, 20, 50, 0.78), rgba(10, 20, 50, 0.55) 50%, rgba(10, 20, 50, 0.85)); }
.prayer__inner > * { margin-inline: auto; }
.prayer .btn-row { justify-content: center; }
.prayer__verse { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--gold); max-width: 28rem; }
.visit { padding-top: var(--space-9); }

/* ---------- Inner pages: framed blue panel on the stage ---------- */
.stage .page-hero { padding: var(--space-8) 0; background: linear-gradient(135deg, #0f1d45 0%, #1a2d61 55%, #2a4a94 100%); }
.page-hero__art img { border: 0.5rem solid #fff; border-radius: 0.3rem; box-shadow: 0 28px 56px -26px rgba(5, 11, 31, 0.85); }
.crumbs li + li::before { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--stage); }
.next { background: var(--stage); }

/*
  Round two: calmer details, no one-sided borders, smoother movement. Loaded after theme.css.
*/

/* Smooth scrolling, kept clear of the sticky header (and the phone visit bar) */
html { scroll-padding-top: 5.5rem; }
@media (max-width: 59.99rem) { html { scroll-padding-top: 8.5rem; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Small labels: a little less spread out */
.eyebrow { letter-spacing: 0.14em; }
.eyebrow--link { text-decoration: none; }
.eyebrow--link:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* Badges: line icons in place of laurels */
.honours .icon { width: 2.1rem; height: 2.1rem; flex: none; color: var(--gold); }

/* ---------- No accent border on one side, anywhere on the public site ---------- */
body.public .visit__time { border-left: 0; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); }
body.public .verse { border-left: 0; padding-left: 0; }
body.public .verse p::before { content: "“"; display: block; font: 800 3rem / 0.7 var(--font-display); color: var(--gold); }
body.public .notice-line, body.public .notice { border-left: 0; border-radius: var(--radius-lg); }
body.public .card-link--plain, body.public .place, body.public .lang-card, body.public .pform, body.public .family { border-top: 1px solid var(--line); }
body.public .emirates .is-home-campus { box-shadow: none; }
body.public .tline__card, body.public .tline__item.is-right .tline__card { border: 1px solid var(--line); }
body.public .prayer__verse { border: 0; padding: 0; }
body.public .site-footer .scripture { border-left: 0; padding-left: 0; }

/* ---------- Welcome: photographs you can hover ---------- */
.welcome__text { display: flex; flex-direction: column; align-items: flex-start; }
.collage figure { cursor: pointer; transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.collage figure img { transition: transform 900ms var(--ease); }
.collage figure:hover { transform: translateY(-8px) scale(1.03); z-index: 3; box-shadow: 0 1px 0 rgba(15, 29, 69, 0.08), 0 38px 60px -28px rgba(15, 29, 69, 0.7); }
.collage figure:hover img { transform: scale(1.08); }
.collage__b:hover { transform: scale(1.06); }
.collage__chip { padding: 1.05rem 1.7rem; font-size: 0.9rem; letter-spacing: 0.08em; }
@media (prefers-reduced-motion: reduce) { .collage figure, .collage figure img { transition: none; } .collage figure:hover { transform: none; } }

/* ---------- The numbers: light, quiet, separated by short blue lines ---------- */
.stats { background: transparent; color: var(--navy); border-radius: 0; box-shadow: none; overflow: visible; margin-top: var(--space-8); }
.stats li { position: relative; padding: var(--space-4) var(--space-5); border: 0 !important; }
.stats li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 2.6rem; margin-top: -1.3rem; width: 1px; background: #2a4a94; opacity: 0.55; }
.stats strong { color: var(--navy); }
.stats span { color: var(--ink-soft); }
@media (max-width: 47.99rem) { .stats li:nth-child(odd)::before { display: none; } }

/* ---------- Visit: centred buttons, nothing extra ---------- */
.visit__text .btn-row { justify-content: center; }

/* ---------- Three small steps: a calm path ---------- */
.section-head--center { margin-inline: auto; text-align: center; }
.path { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7); }
.path__step { position: relative; display: grid; align-content: start; justify-items: center; text-align: center; gap: 0.4rem; margin: 0; padding-inline: var(--space-3); }
.path__node { position: relative; z-index: 1; display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: var(--surface); border: 1.5px solid #2a4a94; color: var(--navy); }
.path__node .icon { width: 1.6rem; height: 1.6rem; }
.path__n { margin-top: 0.6rem; font: 800 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.path__step h3 { margin: 0; font-size: var(--text-xl); letter-spacing: -0.03em; }
.path__step h3 a { color: var(--navy); text-decoration: none; }
.path__step h3 a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--gold); }
.path__step p { margin: 0; max-width: 20rem; color: var(--ink-soft); line-height: 1.55; }
.path__step .path__calm { margin-top: 0.4rem; color: var(--navy); font-weight: 600; }
@media (min-width: 48rem) {
  .path { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .path__step:not(:last-child)::after { content: ""; position: absolute; top: 1.9rem; left: calc(50% + 2.6rem); right: calc(-50% + 2.6rem); height: 1px; background: #2a4a94; opacity: 0.55; }
}
@media (max-width: 47.99rem) {
  .path__step { grid-template-columns: 3.8rem 1fr; justify-items: start; text-align: left; column-gap: var(--space-4); }
  .path__node { grid-row: 1 / span 4; }
  .path__step:not(:last-child)::after { content: ""; position: absolute; top: 3.9rem; bottom: calc(-1 * var(--space-7)); left: 1.9rem; width: 1px; background: #2a4a94; opacity: 0.45; }
}

/* ---------- Our story: a quote box under the photograph ---------- */
.story__art .story__quote { position: relative; max-width: none; margin: var(--space-5) 0 0; padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.story__quote::before { content: "“"; display: block; font: 800 3rem / 0.7 var(--font-display); color: var(--gold); }
.story__quote p { margin: 0; font: 700 var(--text-lg) / 1.4 var(--font-display); letter-spacing: -0.02em; color: var(--navy); }
.story__by { margin: var(--space-3) 0 0; text-align: center; font: 800 var(--text-sm) / 1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }

/* ---------- Past sermons: cards that open to a summary ---------- */
.sermons__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.scard { display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease); }
.scard:hover, .scard:focus-visible { transform: translateY(-6px); border-color: var(--gold); color: var(--ink); box-shadow: 0 30px 50px -28px rgba(15, 29, 69, 0.6); }
.scard__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-deep); }
.scard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.scard:hover .scard__thumb img { transform: scale(1.06); }
.scard__play { position: absolute; right: 0.9rem; bottom: 0.9rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gold-light); box-shadow: 0 10px 24px rgba(5, 11, 31, 0.45); }
.scard__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.5rem 0 0.5rem 0.85rem; border-color: transparent transparent transparent #0a1432; }
.scard__body { display: block; padding: var(--space-5); }
.scard__meta { display: block; font: 700 var(--text-xs) / 1.3 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }
.scard h3 { margin: 0.45rem 0 0; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.03em; color: var(--navy); }
.scard__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.scard__inner { display: block; min-height: 0; overflow: hidden; opacity: 0; transition: opacity 400ms var(--ease) 100ms; }
.scard:hover .scard__more, .scard:focus-visible .scard__more { grid-template-rows: 1fr; }
.scard:hover .scard__inner, .scard:focus-visible .scard__inner { opacity: 1; }
.scard__summary { display: block; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-soft); line-height: 1.55; }
.scard__go { display: block; margin-top: var(--space-3); font: 800 var(--text-sm) / 1 var(--font-ui); color: var(--brass); }
@media (hover: none) { .scard__more { grid-template-rows: 1fr; } .scard__inner { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scard, .scard__more, .scard__inner, .scard__thumb img { transition: none; } .scard:hover { transform: none; } }

/* ---------- Leadership: larger, equal photographs, a gentle stagger ---------- */
.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 60rem) { .crew { grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); } .crew__card:nth-child(3n + 2) { margin-top: var(--space-8); } }
.crew__card { margin: 0; }
.crew__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1.1rem; background: #cfd8ea; box-shadow: var(--shadow); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 900ms var(--ease); }
.crew__card:hover .crew__photo { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold), 0 28px 50px -26px rgba(15, 29, 69, 0.6); }
.crew__card:hover img { transform: scale(1.05); }
.crew__name { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--space-4) var(--space-2) 0; }
.crew__name strong { font: 800 var(--text-xl) / 1.1 var(--font-display); letter-spacing: -0.03em; color: var(--navy); }
.crew__name span { font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .crew__photo, .crew__photo img { transition: none; } .crew__card:hover .crew__photo { transform: none; } }

/* ---------- Principles: tidier gold points ---------- */
.pillar__body ul { gap: 0.4rem 1.1rem; }
.pillar__body li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.pillar__body li::before, .pillar__body li + li::before { content: ""; width: 5px; height: 5px; margin: 0; border-radius: 50%; background: var(--gold); }

/* ---------- Ministries: heading and arrows together ---------- */
.head-actions { display: flex; align-items: center; gap: var(--space-4); }
.head-actions .rail__arrows { margin-left: 0; }

/* ---------- Small gold/brass labels (eyebrows) are removed site-wide; the headings carry the meaning ---------- */
body.public .eyebrow:not(.eyebrow--link) { display: none; }

/*
  Finishing: the title typeface (Jost, light), a consistent rhythm for every button and icon, the minimal
  Swiss-style banner for the About pages, and the WhatsApp button. Loaded after polish.css.
*/

/* ---------- Titles: lighter, wider-set, except the home hero ---------- */
body.public :is(h1, h2, h3, h4):not(.hero3d h1) { font-family: var(--font-title) !important; font-weight: 300 !important; letter-spacing: -0.015em !important; }
body.public :is(h3, h4):not(.hero3d h1) { font-weight: 400 !important; }
body.public :is(.next__title, .statement, .tline__year, .stats strong, .rcard__body b, .crew__name strong, .hero3d__est b, .welcome-line strong, .times__lang, .path__n, .story__quote p, .pillar__word) { font-family: var(--font-title) !important; font-weight: 300 !important; letter-spacing: -0.02em !important; }
body.public :is(.rcard__body b, .crew__name strong, .times__lang, .story__quote p) { font-weight: 400 !important; }
body.public .eyebrow { font-family: var(--font-ui); }
.heading-link { color: inherit; text-decoration: none; }
.heading-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- One rhythm for buttons and icons ---------- */
body.public .btn { box-shadow: none; min-height: 3rem; padding: 0.75rem 1.6rem; gap: 0.6rem; line-height: 1.1; }
body.public .btn--small { min-height: 2.5rem; padding: 0.5rem 1.2rem; }
body.public .btn--ghost { padding-inline: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.section-head--row { align-items: center; }
.rail__arrows { gap: 0.6rem; }
.rail__arrows button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0 0 0.1rem; }
.hero3d__cards > a { gap: var(--space-4); }
.hero3d__next .go, .hero3d__event .go { width: 2.5rem; height: 2.5rem; flex: none; }
.honours li { gap: 0.9rem; }
.honours .icon { width: 2.2rem; height: 2.2rem; }
.path__node .icon { width: 1.7rem; height: 1.7rem; }
.next__more { gap: 0.9rem 1.75rem; }
.menu-toggle { gap: 0.6rem; min-height: 2.75rem; padding: 0 1rem; }
.wa-float { gap: 0.55rem; min-height: 3.25rem; padding: 0 1.25rem 0 1rem; }
.wa-float svg { width: 1.6rem; height: 1.6rem; flex: none; }

/* ---------- Swiss, minimal banner for the About pages: a background and a title ---------- */
.stage .page-hero--mini { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5.5rem); background: linear-gradient(135deg, #0f1d45 0%, #1a2d61 60%, #2a4a94 100%); }
.page-hero--mini .page-hero__glow { opacity: 0.55; }
.page-hero--mini h1 { margin: 0; font-size: clamp(3.6rem, 1.8rem + 9vw, 10rem); line-height: 0.92; letter-spacing: -0.035em !important; font-weight: 200 !important; }
.page-hero--mini .page-hero__text > * { max-width: none; }

/*
  About pages: story, vision, values, beliefs. Each page tells its own story with its own shapes and movement.
  The shapes (scooped corners, a great curve, a rounded panel with a window) are cut with CSS masks, so they are
  text, not pictures. Everything reads with no script, and with reduced motion the movement becomes still.
  Upright sans only, no italics, no inline styles.
*/
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --w { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Frames: a thin white outline around a photograph ---------- */
.frames, .vision__panels { display: grid; gap: var(--space-6); }
.frame { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.9); background: var(--navy-deep); }
.frame--tall { min-height: clamp(30rem, 68vh, 44rem); padding: clamp(1rem, 4vw, 3rem); }
.frame--cover { min-height: clamp(28rem, 58vh, 40rem); }
.frame__bg { position: absolute; inset: 0; z-index: -1; }
.frame__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 2.8s var(--ease); }
.frame.is-visible .frame__bg img { transform: scale(1); }
.frame__bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 50, 0.38); }

/* ---------- Panels: the shapes that carry the words ---------- */
.panel { --r: clamp(2.5rem, 8vw, 6.5rem); position: relative; background: var(--surface); color: var(--navy); transition: --r 1.4s var(--ease), --w 1.4s var(--ease), opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.panel__num { display: block; font: 200 clamp(3.4rem, 2rem + 6vw, 7rem) / 0.9 var(--font-title); letter-spacing: -0.04em; color: var(--brass); }
.panel h2 { margin: 0.4rem 0 1rem; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.05; color: var(--navy); }
.panel p { margin: 0 0 var(--space-3); max-width: 38rem; line-height: 1.7; color: var(--ink-soft); }
.panel__hint { font: 600 var(--text-sm) / 1.4 var(--font-ui); color: var(--brass) !important; }
.panel--center { margin: auto; width: min(46rem, 100%); text-align: center; }
.panel--center p { margin-inline: auto; }

/* scooped corners */
.panel--star {
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(2.5rem, 10vw, 7.5rem);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + 1px)) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + 1px)) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + 1px)) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + 1px)) 100% 100% / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + 1px)) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + 1px)) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + 1px)) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + 1px)) 100% 100% / 51% 51% no-repeat;
}
/* one great curve cut from a corner */
.panel--arc {
  --r: clamp(5rem, 15vw, 11rem);
  align-self: stretch; width: 100%; background: var(--navy-deep); color: #fff;
  padding: calc(var(--r) * 0.75 + 2rem) clamp(2rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
  -webkit-mask: radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + 1px));
  mask: radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + 1px));
}
.panel--arc h2 { color: #fff; }
.panel--arc p { color: #c9d6f0; }
.panel--arc .panel__num { color: var(--gold-light); }
.panel__cols { display: grid; gap: var(--space-6) var(--space-8); }
@media (min-width: 52rem) { .panel__cols { grid-template-columns: 1fr 1fr; } }
/* a rounded panel with a window onto the photograph */
.panel--pill {
  --w: clamp(3rem, 9vw, 7rem);
  width: min(60rem, 100%);
  border-radius: 1.5rem clamp(8rem, 20vw, 16rem) clamp(8rem, 20vw, 16rem) 1.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(9rem, 22vw, 17rem) clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 6vw, 4.5rem);
  -webkit-mask: radial-gradient(circle at calc(100% - clamp(5rem, 12vw, 9.5rem)) 50%, #0000 var(--w), #000 calc(var(--w) + 1px));
  mask: radial-gradient(circle at calc(100% - clamp(5rem, 12vw, 9.5rem)) 50%, #0000 var(--w), #000 calc(var(--w) + 1px));
}
/* arrival: corners carve in, the curve grows, the window opens */
.reveal-ready .frame:not(.is-visible) .panel--star { --r: 0px; opacity: 0; transform: scale(0.9); }
.reveal-ready .frame:not(.is-visible) .panel--arc { --r: 0px; opacity: 0; transform: translateX(3rem); }
.reveal-ready .frame:not(.is-visible) .panel--pill { --w: 0px; opacity: 0; transform: translateX(-3rem); }

.chapter--frames { padding-block: var(--space-8); background: var(--paper); }
.chapter--close { padding-block: var(--space-9); }

/* ---------- Vision: three circles held together ---------- */
.chapter--vision { background: var(--paper-deep); }
.vision { display: grid; gap: var(--space-8); }
@media (min-width: 60rem) { .vision { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .vision__art { position: sticky; top: 7rem; } }
.vision__art svg { display: block; width: 100%; max-width: 30rem; margin-inline: auto; overflow: visible; }
.vc { fill: rgba(166, 125, 81, 0); stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: fill 400ms var(--ease), stroke-dashoffset 2s var(--ease); }
.vc--together { transition-delay: 0s, 300ms; }
.vc--others { transition-delay: 0s, 600ms; }
.reveal-ready .vision__art:not(.is-visible) .vc { stroke-dashoffset: 1; }
.vt { font: 400 15px var(--font-title); letter-spacing: 0.02em; text-anchor: middle; fill: var(--navy); }
.vcross { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.vision:has(.mframe--god:hover) .vc--god, .vision:has(.mframe--god:focus-within) .vc--god,
.vision:has(.mframe--together:hover) .vc--together, .vision:has(.mframe--together:focus-within) .vc--together,
.vision:has(.mframe--others:hover) .vc--others, .vision:has(.mframe--others:focus-within) .vc--others { fill: rgba(166, 125, 81, 0.3); }
.mframe--together { min-height: clamp(26rem, 52vh, 34rem); }

/* ---------- Values: each value has its own picture in motion ---------- */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.why li { position: relative; display: grid; gap: 0.3rem; margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.why li + li { padding-left: var(--space-5); }
.why li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 2.4rem; margin-top: -1.2rem; width: 1px; background: #2a4a94; opacity: 0.55; }
.why b { font: 300 1.8rem / 1 var(--font-title); color: var(--brass); }
.why span { font-weight: 600; color: var(--navy); }

.vsec { position: relative; overflow: hidden; padding: var(--space-9) 0; }
.vsec--presence { background: var(--stage); color: #fff; }
.vsec--encounter { background: var(--paper); color: var(--navy); }
.vsec--transformation { background: linear-gradient(135deg, #1a2d61 0%, #2a4a94 100%); color: #fff; }
.vsec__grid { display: grid; gap: var(--space-7) var(--space-8); grid-template-areas: "text" "art" "points"; }
@media (min-width: 60rem) {
  .vsec__grid { grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "text art" "points points"; align-items: center; }
  .vsec--encounter .vsec__grid { grid-template-areas: "art text" "points points"; }
}
.vsec__text { grid-area: text; }
.vsec__art { grid-area: art; }
.vpoints { grid-area: points; }
.vsec__n { font: 300 1rem / 1 var(--font-title); letter-spacing: 0.3em; color: var(--gold); }
.vsec h2 { margin: 0.5rem 0 1rem; font-size: clamp(3.4rem, 2rem + 7vw, 8.5rem); line-height: 0.95; }
.vsec--presence h2, .vsec--transformation h2 { color: #fff; }
.vsec--encounter h2 { color: var(--navy); }
.vsec__lede { max-width: 32rem; margin: 0; font-size: var(--text-lg); line-height: 1.6; }
.vsec--presence .vsec__lede, .vsec--transformation .vsec__lede { color: #d3def4; }
.vsec--encounter .vsec__lede { color: var(--ink-soft); }

.vart { position: relative; width: min(100%, 26rem); aspect-ratio: 1; justify-self: center; }
/* presence: rings of light going out from a cross */
.vart--presence .r { position: absolute; inset: 0; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; animation: ring-out 6s ease-out infinite; }
.vart--presence .r2 { animation-delay: 1.5s; } .vart--presence .r3 { animation-delay: 3s; } .vart--presence .r4 { animation-delay: 4.5s; }
@keyframes ring-out { 0% { transform: scale(0.12); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
.vart__cross { position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 3.2rem; transform: translate(-50%, -50%); }
.vart__cross::before, .vart__cross::after { content: ""; position: absolute; background: var(--gold-light); }
.vart__cross::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.vart__cross::after { left: 0; top: 30%; width: 100%; height: 2px; }
/* encounter: two lives drawing together */
.vart--encounter .c { position: absolute; top: 18%; width: 64%; aspect-ratio: 1; border: 1.5px solid var(--navy); border-radius: 50%; transition: transform 2.2s var(--ease); }
.vart--encounter .c1 { left: 0; background: rgba(26, 45, 97, 0.07); transform: translateX(14%); }
.vart--encounter .c2 { right: 0; background: rgba(166, 125, 81, 0.16); transform: translateX(-14%); }
.reveal-ready .vart--encounter:not(.is-visible) .c1 { transform: translateX(-14%); }
.reveal-ready .vart--encounter:not(.is-visible) .c2 { transform: translateX(14%); }
.vart__heart { position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem; border-radius: 50%; background: var(--gold); }
/* transformation: steady growth */
.vart--transformation { display: flex; align-items: flex-end; gap: 4%; }
.vart--transformation .b { flex: 1; border-radius: 0.4rem 0.4rem 0 0; background: linear-gradient(180deg, var(--gold-light), rgba(217, 185, 138, 0.12)); transform-origin: bottom; transition: transform 1.4s var(--ease); }
.vart--transformation .b1 { height: 22%; } .vart--transformation .b2 { height: 34%; transition-delay: 100ms; } .vart--transformation .b3 { height: 48%; transition-delay: 200ms; }
.vart--transformation .b4 { height: 63%; transition-delay: 300ms; } .vart--transformation .b5 { height: 80%; transition-delay: 400ms; } .vart--transformation .b6 { height: 100%; transition-delay: 500ms; }
.reveal-ready .vart--transformation:not(.is-visible) .b { transform: scaleY(0.05); }

.vpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.vpoint { margin: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: 0.6rem; background: var(--surface); transition: transform 400ms var(--ease), background 400ms var(--ease), border-color 400ms var(--ease); }
.vsec--presence .vpoint { background: rgba(255, 255, 255, 0.03); border-color: rgba(217, 185, 138, 0.3); }
.vsec--transformation .vpoint { background: rgba(255, 255, 255, 0.06); border-color: rgba(217, 185, 138, 0.35); }
.vpoint h3 { margin: 0 0 0.4rem; font-size: var(--text-lg); color: var(--navy); }
.vpoint p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.vsec--presence .vpoint h3, .vsec--transformation .vpoint h3 { color: #fff; }
.vsec--presence .vpoint p, .vsec--transformation .vpoint p { color: #c9d6f0; }
.vpoint:hover { transform: translateY(-4px); border-color: var(--gold); }
.vsec--presence .vpoint:hover, .vsec--transformation .vpoint:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Beliefs, with a verse box that opens as you hover ---------- */
.chapter--beliefs { background: var(--paper); padding-block: var(--space-8); }
.beliefs__intro { margin-bottom: var(--space-8); }
.beliefs { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) { .beliefs { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-8); align-items: start; } }
.belief { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-5); padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.belief:first-child { border-top: 0; padding-top: 0; }
.belief__n { font: 200 clamp(2.5rem, 2rem + 3vw, 4.5rem) / 0.9 var(--font-title); letter-spacing: -0.04em; color: var(--brass); }
.belief h3 { margin: 0 0 0.6rem; font-size: var(--text-2xl); color: var(--navy); }
.belief p { max-width: 44rem; margin: 0; font-size: 1.0625rem; line-height: 1.75; }
.vrefs { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.vrefs li { margin: 0; }
.vref { padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--navy); font: 600 0.82rem / 1.2 var(--font-ui); cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; }
.vref:hover, .vref:focus-visible, .vref.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.faq { margin-top: var(--space-8); }
.faq h2 { margin: 0 0 var(--space-5); font-size: var(--text-2xl); }
.faq__item { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; font: 300 var(--text-xl) / 1.25 var(--font-title); color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 1.6rem; color: var(--brass); }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { max-width: 44rem; margin: var(--space-3) 0 0; line-height: 1.7; }
.verse-box { position: sticky; top: 6.5rem; max-height: calc(100svh - 8rem); overflow: auto; padding: var(--space-6); background: var(--navy-deep); color: #fff; border-radius: 1.25rem; box-shadow: var(--shadow); }
.verse-box__label { font: 700 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
.verse-box__ref { margin: 0.5rem 0 var(--space-4); font-size: var(--text-2xl); font-weight: 300; line-height: 1.1; color: #fff; }
.verse-box__text { margin: 0; font-size: 1.1rem; line-height: 1.75; color: #dbe5f8; }
@media (max-width: 59.99rem) { .verse-box { position: sticky; top: auto; bottom: 0.5rem; z-index: 5; max-height: 42svh; padding: var(--space-5); } }

/* ---------- Team: heads stay inside the circle ---------- */
.team__photo img { object-position: 50% 0%; }

@media (prefers-reduced-motion: reduce) {
  .panel, .frame__bg img, .vc, .vart--encounter .c, .vart--transformation .b { transition: none; }
  .vart--presence .r { animation: none; opacity: 0.35; }
  .vart--presence .r1 { transform: scale(0.35); } .vart--presence .r2 { transform: scale(0.55); } .vart--presence .r3 { transform: scale(0.75); } .vart--presence .r4 { transform: scale(0.95); }
}

/* Vision panels sit in a narrower column: a smaller window, more room for the words */
.mframe .panel--pill { --w: clamp(2.2rem, 5vw, 3.6rem); padding-right: clamp(6.5rem, 12vw, 9.5rem); -webkit-mask: radial-gradient(circle at calc(100% - clamp(3.6rem, 7vw, 5.6rem)) 50%, #0000 var(--w), #000 calc(var(--w) + 1px)); mask: radial-gradient(circle at calc(100% - clamp(3.6rem, 7vw, 5.6rem)) 50%, #0000 var(--w), #000 calc(var(--w) + 1px)); }
.mframe .panel--star { padding-inline: clamp(2.2rem, 6vw, 4.5rem); }

/*
  Motion and polish, loaded last. One idea throughout: quiet, confident movement and a calm scale.
  The logo arrives once per visit (black and white to colour), pages cross-fade, and nothing shouts.
*/

/* ---------- The logo intro: black and white to colour, once per visit ---------- */
.intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--stage); animation: intro-out 700ms var(--ease) 1900ms both; }
.intro__logo { width: clamp(9rem, 26vw, 13rem); height: auto; border-radius: 50%; background: #fff; animation: intro-pop 900ms var(--ease) both, intro-colour 1700ms ease-in-out 250ms both; }
@keyframes intro-colour { from { filter: grayscale(1) contrast(1.3) brightness(0.8); } to { filter: grayscale(0) contrast(1) brightness(1); } }
@keyframes intro-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
.no-intro .intro { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { animation-duration: 1ms; animation-delay: 400ms; } .intro__logo { animation: none; } }


/* ---------- Header: a larger logo, at the far left ---------- */
body.public .site-header > .container { max-width: none; padding-inline: clamp(1rem, 2.4vw, 2.4rem); }
.brand { gap: 0.9rem; }
.brand__mark { width: 3.6rem; height: 3.6rem; }
.brand__name { font-size: 1.55rem; }
.masthead { min-height: 5.25rem; }
.site-footer .brand__mark { width: 3.2rem; height: 3.2rem; }

/* ---------- Focus initiatives: a numbered list, not photo cards ---------- */
.focus { padding-block: clamp(4rem, 8vw, 7rem); background: var(--paper); }
.focus .section-head { max-width: 40rem; }
.focus .section-head h2 { margin-bottom: var(--space-3); }
.focus .section-head .lede { margin: 0; }
.focus--inline { margin-top: var(--space-8); padding: 0; background: transparent; }
.focus--inline h2 { margin: 0 0 var(--space-3); }
.ledger { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid rgba(42, 74, 148, 0.45); }
.ledger li { margin: 0; border-bottom: 1px solid rgba(42, 74, 148, 0.3); }
.ledger a { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-3); color: var(--navy); text-decoration: none; transition: background 400ms var(--ease), padding 400ms var(--ease); }
.ledger__n { font: 200 2.4rem / 1 var(--font-title); color: var(--brass); }
.ledger__body { display: grid; gap: 0.3rem; }
.ledger__body b { font: 300 clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem) / 1.1 var(--font-title); letter-spacing: -0.02em; }
.ledger__body span { max-width: 40rem; color: var(--ink-soft); line-height: 1.5; }
.ledger__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--navy); border-radius: 50%; transition: background 300ms, color 300ms, transform 400ms var(--ease); }
.ledger a:hover { background: var(--surface); padding-inline: var(--space-5); color: var(--navy); }
.ledger a:hover .ledger__go { background: var(--navy); color: #fff; transform: translateX(0.3rem); }
@media (max-width: 40rem) { .ledger a { grid-template-columns: 2.6rem 1fr auto; gap: var(--space-3); } .ledger__n { font-size: 1.6rem; } }

/* ---- Prayer, picked out from the rest: a quiet gold glow, not a shout ---- */
.ledger__item--featured a { background: linear-gradient(90deg, rgba(217, 185, 138, 0.1), transparent 60%); }
.ledger__item--featured .ledger__n { color: var(--gold); }
.ledger__item--featured .ledger__go { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 0 rgba(217, 185, 138, 0.55); animation: ledger-pulse 2.8s ease-out infinite; }
.ledger__item--featured a:hover { background: linear-gradient(90deg, rgba(217, 185, 138, 0.16), transparent 70%); padding-inline: var(--space-5); }
.ledger__item--featured a:hover .ledger__go { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); animation: none; }
@keyframes ledger-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 185, 138, 0.55); } 60% { box-shadow: 0 0 0 9px rgba(217, 185, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .ledger__item--featured .ledger__go { animation: none; } }

/* ---------- Scale: big type, but never so big that it shouts ---------- */
.vsec h2 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.2rem); }
.pillar__word { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.8rem); }
.statement { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.4rem); }
.page-hero--mini h1 { font-size: clamp(3rem, 1.6rem + 6.5vw, 7rem); }
.tline__year { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.next__title { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem); }
.vsec__story { max-width: 34rem; margin: var(--space-4) 0 0; line-height: 1.7; }
.vsec--presence .vsec__story, .vsec--transformation .vsec__story { color: #c9d6f0; }
.vsec--encounter .vsec__story { color: var(--ink-soft); }
.vpractice { display: grid; gap: 0.9rem; list-style: none; margin: var(--space-6) 0 0; padding: 0; max-width: 34rem; }
.vpractice li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); margin: 0; }
.vpractice b { font: 800 var(--text-xs) / 1.5 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.vsec--encounter .vpractice b { color: var(--brass); }
.vpractice span { line-height: 1.55; }
.vsec--presence .vpractice span, .vsec--transformation .vpractice span { color: #dbe5f8; }

/* ---------- Unity: one rhythm for sections, one way to focus, kinder text wrapping ---------- */
.welcome, .steps, .story, .sermons, .leaders, .ministries, .values, .visit, .prayer { padding-block: clamp(4rem, 8vw, 7rem); }
.visit, .values { padding-top: clamp(4rem, 8vw, 7rem); }
body.public :is(h1, h2, h3) { text-wrap: balance; }
body.public p { text-wrap: pretty; }
body.public :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
body.public .stage :focus-visible, body.public .site-footer :focus-visible, body.public .vsec--presence :focus-visible { outline-color: var(--gold-light); }
::selection { background: var(--navy); color: #fff; }

/* Footer: room before the second group of links */
.site-footer ul + h2 { margin-top: var(--space-5); }

/*
  About pages: a clear hierarchy. One large title in the banner; everything below it is a step smaller, so the
  eye always knows where it is. The banner pairs the title with a photograph in an arched window (a church
  window), centred tabs sit below it, and the Vision is three plain cards. Loaded last.
*/

/* ---------- Tabs: centred and larger ---------- */
.subnav ul { justify-content: center; gap: 0.5rem; }
.subnav a { padding: 1.25rem 1.5rem; font-size: var(--text-base); font-weight: 700; }

/* ---------- Banner: the title beside a photograph in an arched window ---------- */
.stage .page-hero--mini { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; overflow: hidden; }
.page-hero--mini .page-hero__inner { display: grid; align-items: end; gap: var(--space-5); }
@media (min-width: 60rem) { .page-hero--mini .page-hero__inner.has-arch { grid-template-columns: 0.95fr 1.05fr; } }
.about-page .page-hero--mini h1 { padding-bottom: clamp(2rem, 5vw, 4rem); font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.6rem); line-height: 1; }
.page-hero__arch { position: relative; justify-self: end; width: min(100%, 32rem); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 999px 999px 0 0; outline: 1px solid var(--gold-light); outline-offset: 0.55rem; }
.page-hero__arch img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }
@media (max-width: 59.99rem) { .page-hero__arch { justify-self: center; width: min(92%, 26rem); margin-top: var(--space-4); } }

/* ---------- Content scale on the About pages: smaller headings, a clear order ---------- */
.about-page .statement { max-width: 40ch; margin: 0 0 var(--space-4); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.2; }
.about-page .statement span:nth-child(n + 7) { color: inherit; }
.about-page .statement__sub { max-width: 40rem; font-size: 1.1rem; }
.about-page .chapter--statement { padding-block: var(--space-8); }
.about-page .section-head h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.about-page .panel__num { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.about-page .panel h2 { margin: 0.3rem 0 0.8rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; }
.about-page .tline__year { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.about-page .stats strong { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
.about-page .vsec h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.about-page .vsec__n { margin-bottom: 0.3rem; }
.about-page .vsec__lede { font-size: 1.15rem; }
.about-page .why b { font-size: 1.4rem; }
.about-page .belief__n { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.about-page .belief h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }
.about-page .faq h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.about-page .faq__item summary { font-size: 1.15rem; }
.about-page .verse-box__ref { font-size: 1.7rem; }
.about-page .family h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.about-page .crew__name strong { font-size: 1.3rem; }

/* ---------- Vision: three cards ---------- */
.chapter--cards { padding-block: 0 var(--space-9); }
.vcards { display: grid; gap: var(--space-5); }
@media (min-width: 52rem) { .vcards { grid-template-columns: repeat(3, 1fr); } }
.vcard { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease); }
.vcard:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 30px 50px -28px rgba(15, 29, 69, 0.55); }
.vcard__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-deep); }
.vcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.vcard:hover .vcard__photo img { transform: scale(1.06); }
.vcard__body { display: grid; gap: 0.5rem; align-content: start; padding: var(--space-5) var(--space-5) var(--space-6); }
.vcard__n { font: 300 1rem / 1 var(--font-title); letter-spacing: 0.2em; color: var(--brass); }
.vcard h3 { margin: 0; font-size: 1.6rem; line-height: 1.1; color: var(--navy); }
.vcard p { margin: 0; line-height: 1.65; color: var(--ink-soft); }
.vcards > .vcard:nth-child(2) { transition-delay: 90ms; }
.vcards > .vcard:nth-child(3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .vcard, .vcard__photo img { transition: none; } .vcard:hover { transform: none; } }

/* ---------- Our Story: the photograph and quote beside a line that draws itself ---------- */
.chapter--story { padding-block: var(--space-8) var(--space-9); background: linear-gradient(180deg, var(--paper), #dce6f6 50%, var(--paper)); }
.story2 { display: grid; gap: var(--space-8); }
@media (min-width: 60rem) { .story2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; } .story2__art { position: sticky; top: 7rem; } }
.story2__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border: 0.55rem solid #fff; border-radius: 0.3rem; background: #fff; box-shadow: 0 1px 0 rgba(15, 29, 69, 0.08), 0 30px 54px -28px rgba(15, 29, 69, 0.6); }
.story2__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.story2__art:hover .story2__photo img { transform: scale(1.04); }
.story2__head h2 { margin: 0 0 var(--space-3); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; }
.story2__head p { max-width: 34rem; margin: 0 0 var(--space-7); color: var(--ink-soft); line-height: 1.6; }

.chron { --p: 0; position: relative; list-style: none; margin: 0; padding: 0; }
.chron::before, .chron::after { content: ""; position: absolute; left: 0.85rem; top: 0.6rem; bottom: 0.6rem; width: 2px; border-radius: 2px; }
.chron::before { background: var(--line); }
.chron::after { background: linear-gradient(var(--gold), var(--navy)); transform-origin: top; transform: scaleY(var(--p)); }
.chron__item { position: relative; display: grid; gap: var(--space-3); margin: 0 0 var(--space-7); padding-left: 3.2rem; }
.chron__item:last-child { margin-bottom: 0; }
.chron__dot { position: absolute; left: 0.2rem; top: 0.45rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--gold); transition: transform 600ms var(--ease), background 400ms; }
.chron__item.is-visible .chron__dot { background: var(--gold); transform: scale(1.12); }
.chron__year { font: 200 clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem) / 1 var(--font-title); letter-spacing: -0.03em; color: var(--brass); font-variant-numeric: tabular-nums; }
.chron__card { padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); transition: transform 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.chron__card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 26px 46px -28px rgba(15, 29, 69, 0.5); }
.chron__card h3 { margin: 0 0 0.4rem; font-size: 1.5rem; line-height: 1.15; color: var(--navy); }
.chron__card p { margin: 0; line-height: 1.7; color: var(--ink-soft); }
.chron__item.is-now .chron__card { background: var(--navy-deep); border-color: transparent; }
.chron__item.is-now .chron__card h3 { color: #fff; }
.chron__item.is-now .chron__card p { color: #c9d6f0; }
.chron__item.is-now .chron__year { color: var(--navy); }
.reveal-ready .chron__item[data-reveal]:not(.is-visible) .chron__card { opacity: 0; transform: translateX(1.5rem); }
.chron__card { transition-property: transform, border-color, box-shadow, opacity; }
@media (prefers-reduced-motion: reduce) { .story2__photo img, .chron__dot, .chron__card { transition: none; } .reveal-ready .chron__item[data-reveal]:not(.is-visible) .chron__card { transform: none; } .chron__card:hover { transform: none; } }

/*
  Other churches: the finder panel and the church cards. Calm, scannable, and every contact action is one tap.
  Upright sans only, no italics, no one-sided accent borders.
*/
.finder { scroll-margin-top: 6rem; }
.finder .section-head { max-width: 40rem; }
.finder .section-head p { margin: var(--space-3) 0 0; color: var(--ink-soft); line-height: 1.6; }

.finder__panel { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow); }
.finder__group { display: grid; gap: 0.6rem; }
.finder__label { font: 800 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.chipset { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chipset li { margin: 0; }
.chipbtn { padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--navy); font: 600 0.9rem / 1 var(--font-ui); cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; }
.chipbtn:hover { border-color: var(--navy); }
.chipbtn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.finder__tools { display: grid; gap: var(--space-4); align-items: end; }
@media (min-width: 52rem) { .finder__tools { grid-template-columns: 1fr 1fr auto; } }
.finder__field { display: grid; gap: 0.4rem; font: 600 var(--text-sm) / 1 var(--font-ui); color: var(--navy); }
.finder__field select { width: 100%; }
.finder__locate { white-space: nowrap; }
.finder__locate .icon { width: 1.25rem; height: 1.25rem; }
.finder__privacy { margin: 0; font-size: var(--text-sm); color: var(--ink-mute); }
.finder__status { min-height: 1.4em; margin: 0; font: 600 var(--text-sm) / 1.4 var(--font-ui); color: var(--navy); }
.finder__home { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--navy-deep); color: #fff; border-radius: 1rem; }
.finder__home p { margin: 0; }
.finder__home[hidden], .finder__empty[hidden], .finder__more [hidden] { display: none; }
.finder__home .btn { background: var(--gold-light); border-color: var(--gold-light); color: #0a1432; }
.finder__list { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.finder__more { text-align: center; margin-bottom: var(--space-5); }

/* ---------- The church card ---------- */
.gcard { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.gcard[hidden] { display: none; }
.gcard:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 24px 44px -28px rgba(15, 29, 69, 0.55); }
.gcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gcard__city { font: 800 var(--text-xs) / 1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.gcard__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gcard__badge { padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--paper-deep); color: var(--navy); font: 700 0.7rem / 1 var(--font-ui); letter-spacing: 0.04em; }
.gcard__badge[hidden] { display: none; }
.gcard__badge--best { background: var(--gold-light); color: #0a1432; }
.gcard h3 { margin: 0.2rem 0 0; font-size: 1.35rem; line-height: 1.2; color: var(--navy); }
.gcard p { margin: 0; line-height: 1.5; }
.gcard__when, .gcard__where { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--ink); }
.gcard__when { font-weight: 700; }
.gcard__where { color: var(--ink-soft); font-size: var(--text-sm); }
.gcard .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; color: var(--brass); }
.gcard__pastor { font-size: var(--text-sm); color: var(--ink-soft); }
.gcard__langs { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.gcard__langs li { margin: 0; padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font: 600 0.75rem / 1 var(--font-ui); color: var(--navy); }
.gcard__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: var(--space-3); }
.gbtn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; padding: 0 1rem; border: 1px solid var(--navy); border-radius: 999px; background: transparent; color: var(--navy); font: 700 0.82rem / 1 var(--font-ui); text-decoration: none; transition: background 200ms, color 200ms, border-color 200ms; }
.gbtn .icon { width: 1.1rem; height: 1.1rem; margin: 0; color: currentColor; }
.gbtn:hover { background: var(--navy); color: #fff; }
.gbtn--call { background: var(--navy); color: #fff; }
.gbtn--call:hover { background: var(--navy-deep); }
.gbtn--wa { border-color: #1f8f4e; color: #17753f; }
.gbtn--wa:hover { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.gcard__more { font-size: var(--text-sm); }
.gcard__more summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.gcard__more ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.gcard__more li { margin: 0 0 0.25rem; }
.gcard__note { font-size: var(--text-sm); color: var(--brass); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .gcard { transition: none; } .gcard:hover { transform: none; } }

/* ---------- Contact page: the church's own details ---------- */
.contactlist { display: grid; gap: var(--space-4); list-style: none; margin: 0 0 var(--space-6); padding: 0; max-width: 34rem; }
.contactlist li { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: 0.9rem; }
.contactlist li::before { display: none; }
.contactlist .icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--brass); }
.contactlist span { display: grid; gap: 0.15rem; }
.contactlist b { font: 800 var(--text-xs) / 1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.contactlist a { font-weight: 600; }

/* Home page: Our pastor. A framed photograph beside a few words and a quote. */
.pastor { padding-block: clamp(4rem, 8vw, 7rem); background: var(--paper-deep); }
.pastor__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 60rem) { .pastor__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); } }
.pastor__photo { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border: 0.55rem solid #fff; border-radius: 0.3rem; background: #fff; box-shadow: 0 1px 0 rgba(15, 29, 69, 0.08), 0 32px 56px -28px rgba(15, 29, 69, 0.6); }
.pastor__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.pastor__photo:hover img { transform: scale(1.04); }
.pastor__text h2 { margin: 0 0 0.3rem; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; }
.pastor__name { margin: 0 0 var(--space-4); font: 800 var(--text-sm) / 1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.pastor__text p { line-height: 1.7; color: var(--ink-soft); }
.pastor__quote { position: relative; margin: var(--space-5) 0 var(--space-6); padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); }
.pastor__quote::before { content: "“"; display: block; font: 800 3rem / 0.7 var(--font-display); color: var(--gold); }
.pastor__quote p { margin: 0; font: 400 1.3rem / 1.4 var(--font-title); letter-spacing: -0.01em; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .pastor__photo img { transition: none; } }

/* Generated by scripts/photo-focus.mjs: keeps the subject of each photograph in view when it is cropped. */
.fp-0-0 { object-position: 0% 0%; }
.fp-0-10 { object-position: 0% 10%; }
.fp-0-20 { object-position: 0% 20%; }
.fp-0-30 { object-position: 0% 30%; }
.fp-0-40 { object-position: 0% 40%; }
.fp-0-50 { object-position: 0% 50%; }
.fp-0-60 { object-position: 0% 60%; }
.fp-0-70 { object-position: 0% 70%; }
.fp-0-80 { object-position: 0% 80%; }
.fp-0-90 { object-position: 0% 90%; }
.fp-0-100 { object-position: 0% 100%; }
.fp-10-0 { object-position: 10% 0%; }
.fp-10-10 { object-position: 10% 10%; }
.fp-10-20 { object-position: 10% 20%; }
.fp-10-30 { object-position: 10% 30%; }
.fp-10-40 { object-position: 10% 40%; }
.fp-10-50 { object-position: 10% 50%; }
.fp-10-60 { object-position: 10% 60%; }
.fp-10-70 { object-position: 10% 70%; }
.fp-10-80 { object-position: 10% 80%; }
.fp-10-90 { object-position: 10% 90%; }
.fp-10-100 { object-position: 10% 100%; }
.fp-20-0 { object-position: 20% 0%; }
.fp-20-10 { object-position: 20% 10%; }
.fp-20-20 { object-position: 20% 20%; }
.fp-20-30 { object-position: 20% 30%; }
.fp-20-40 { object-position: 20% 40%; }
.fp-20-50 { object-position: 20% 50%; }
.fp-20-60 { object-position: 20% 60%; }
.fp-20-70 { object-position: 20% 70%; }
.fp-20-80 { object-position: 20% 80%; }
.fp-20-90 { object-position: 20% 90%; }
.fp-20-100 { object-position: 20% 100%; }
.fp-30-0 { object-position: 30% 0%; }
.fp-30-10 { object-position: 30% 10%; }
.fp-30-20 { object-position: 30% 20%; }
.fp-30-30 { object-position: 30% 30%; }
.fp-30-40 { object-position: 30% 40%; }
.fp-30-50 { object-position: 30% 50%; }
.fp-30-60 { object-position: 30% 60%; }
.fp-30-70 { object-position: 30% 70%; }
.fp-30-80 { object-position: 30% 80%; }
.fp-30-90 { object-position: 30% 90%; }
.fp-30-100 { object-position: 30% 100%; }
.fp-40-0 { object-position: 40% 0%; }
.fp-40-10 { object-position: 40% 10%; }
.fp-40-20 { object-position: 40% 20%; }
.fp-40-30 { object-position: 40% 30%; }
.fp-40-40 { object-position: 40% 40%; }
.fp-40-50 { object-position: 40% 50%; }
.fp-40-60 { object-position: 40% 60%; }
.fp-40-70 { object-position: 40% 70%; }
.fp-40-80 { object-position: 40% 80%; }
.fp-40-90 { object-position: 40% 90%; }
.fp-40-100 { object-position: 40% 100%; }
.fp-50-0 { object-position: 50% 0%; }
.fp-50-10 { object-position: 50% 10%; }
.fp-50-20 { object-position: 50% 20%; }
.fp-50-30 { object-position: 50% 30%; }
.fp-50-40 { object-position: 50% 40%; }
.fp-50-50 { object-position: 50% 50%; }
.fp-50-60 { object-position: 50% 60%; }
.fp-50-70 { object-position: 50% 70%; }
.fp-50-80 { object-position: 50% 80%; }
.fp-50-90 { object-position: 50% 90%; }
.fp-50-100 { object-position: 50% 100%; }
.fp-60-0 { object-position: 60% 0%; }
.fp-60-10 { object-position: 60% 10%; }
.fp-60-20 { object-position: 60% 20%; }
.fp-60-30 { object-position: 60% 30%; }
.fp-60-40 { object-position: 60% 40%; }
.fp-60-50 { object-position: 60% 50%; }
.fp-60-60 { object-position: 60% 60%; }
.fp-60-70 { object-position: 60% 70%; }
.fp-60-80 { object-position: 60% 80%; }
.fp-60-90 { object-position: 60% 90%; }
.fp-60-100 { object-position: 60% 100%; }
.fp-70-0 { object-position: 70% 0%; }
.fp-70-10 { object-position: 70% 10%; }
.fp-70-20 { object-position: 70% 20%; }
.fp-70-30 { object-position: 70% 30%; }
.fp-70-40 { object-position: 70% 40%; }
.fp-70-50 { object-position: 70% 50%; }
.fp-70-60 { object-position: 70% 60%; }
.fp-70-70 { object-position: 70% 70%; }
.fp-70-80 { object-position: 70% 80%; }
.fp-70-90 { object-position: 70% 90%; }
.fp-70-100 { object-position: 70% 100%; }
.fp-80-0 { object-position: 80% 0%; }
.fp-80-10 { object-position: 80% 10%; }
.fp-80-20 { object-position: 80% 20%; }
.fp-80-30 { object-position: 80% 30%; }
.fp-80-40 { object-position: 80% 40%; }
.fp-80-50 { object-position: 80% 50%; }
.fp-80-60 { object-position: 80% 60%; }
.fp-80-70 { object-position: 80% 70%; }
.fp-80-80 { object-position: 80% 80%; }
.fp-80-90 { object-position: 80% 90%; }
.fp-80-100 { object-position: 80% 100%; }
.fp-90-0 { object-position: 90% 0%; }
.fp-90-10 { object-position: 90% 10%; }
.fp-90-20 { object-position: 90% 20%; }
.fp-90-30 { object-position: 90% 30%; }
.fp-90-40 { object-position: 90% 40%; }
.fp-90-50 { object-position: 90% 50%; }
.fp-90-60 { object-position: 90% 60%; }
.fp-90-70 { object-position: 90% 70%; }
.fp-90-80 { object-position: 90% 80%; }
.fp-90-90 { object-position: 90% 90%; }
.fp-90-100 { object-position: 90% 100%; }
.fp-100-0 { object-position: 100% 0%; }
.fp-100-10 { object-position: 100% 10%; }
.fp-100-20 { object-position: 100% 20%; }
.fp-100-30 { object-position: 100% 30%; }
.fp-100-40 { object-position: 100% 40%; }
.fp-100-50 { object-position: 100% 50%; }
.fp-100-60 { object-position: 100% 60%; }
.fp-100-70 { object-position: 100% 70%; }
.fp-100-80 { object-position: 100% 80%; }
.fp-100-90 { object-position: 100% 90%; }
.fp-100-100 { object-position: 100% 100%; }

/*
  Smooth: everything moves like an iPhone. One easing curve (a soft, spring-like deceleration), long gentle
  durations, and no abrupt change anywhere: pages arrive out of a blur and leave into one, content rises into
  place, buttons lift and glow on hover and press down softly, hovers glide. Loaded last.
  With "reduce motion" switched on, all of it becomes instant.
*/
:root { --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); }
html { -webkit-tap-highlight-color: transparent; }

/* ---------- Page changes ----------
   Another section: the whole screen, header included, melts into a soft blur and the next page clears out of the same
   blur. A veil laid over the viewport does the blurring, so the page itself is never filtered and the fixed header
   keeps working. Both pages hold the same blur at the moment of the hand-over, so nothing flashes.
   Within a section (the About tabs and the like): a swipe. The click goes straight to the next page and, the moment it is
   ready, the old page slides off while the new one slides on, with a trace of horizontal motion blur. The two overlap, so
   there is never a gap. The header stays put. Browsers without page transitions (html.vt missing) swipe the page itself.
   html[data-dir] is "blur", "next" or "prev"; with nothing set (a first visit, a refresh) there is no effect. */
html { overflow-x: clip; }
html::after { content: ""; position: fixed; inset: 0; z-index: 500; pointer-events: none; }
@keyframes veil-in {
  from { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background-color: rgba(233, 239, 249, 0); }
  to { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: rgba(233, 239, 249, 0.28); }
}
@keyframes veil-out {
  from { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: rgba(233, 239, 249, 0.28); }
  to { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background-color: rgba(233, 239, 249, 0); }
}
/* swipe: a streak that builds as the page goes and clears as the next one lands */
@keyframes vt-out-next { 0% { opacity: 1; transform: none; filter: none; } 25% { filter: url(#mb1); } 50% { filter: url(#mb2); } 75% { filter: url(#mb3); } 100% { opacity: 0; transform: translateX(-14vw); filter: url(#mb4); } }
@keyframes vt-out-prev { 0% { opacity: 1; transform: none; filter: none; } 25% { filter: url(#mb1); } 50% { filter: url(#mb2); } 75% { filter: url(#mb3); } 100% { opacity: 0; transform: translateX(14vw); filter: url(#mb4); } }
@keyframes vt-in-next { 0% { opacity: 0; transform: translateX(14vw); filter: url(#mb4); } 25% { filter: url(#mb3); } 50% { filter: url(#mb2); } 75% { filter: url(#mb1); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes vt-in-prev { 0% { opacity: 0; transform: translateX(-14vw); filter: url(#mb4); } 25% { filter: url(#mb3); } 50% { filter: url(#mb2); } 75% { filter: url(#mb1); } 100% { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* the blur is the veil's job: the page transition itself does nothing for it */
  ::view-transition-group(root) { animation-duration: 0.01s; }
  ::view-transition-old(root) { animation: none; opacity: 0; }
  ::view-transition-new(root) { animation: none; }
  /* the swipe: the header, the visit bar and the chat button stay where they are */
  html[data-dir="next"] .site-header, html[data-dir="prev"] .site-header { view-transition-name: site-header; }
  html[data-dir="next"] .visit-bar, html[data-dir="prev"] .visit-bar { view-transition-name: visit-bar; }
  html[data-dir="next"] .wa-float, html[data-dir="prev"] .wa-float { view-transition-name: wa-float; }
  ::view-transition-old(site-header), ::view-transition-old(visit-bar), ::view-transition-old(wa-float) { animation: none; opacity: 0; }
  ::view-transition-new(site-header), ::view-transition-new(visit-bar), ::view-transition-new(wa-float) { animation: none; }
  html[data-dir="next"]::view-transition-old(root) { animation: vt-out-next 280ms cubic-bezier(0.32, 0.72, 0, 1) both; opacity: 1; }
  html[data-dir="next"]::view-transition-new(root) { animation: vt-in-next 480ms var(--ease-ios) both; }
  html[data-dir="prev"]::view-transition-old(root) { animation: vt-out-prev 280ms cubic-bezier(0.32, 0.72, 0, 1) both; opacity: 1; }
  html[data-dir="prev"]::view-transition-new(root) { animation: vt-in-prev 480ms var(--ease-ios) both; }

  /* the blur: out on the old page, in on the new one */
  html.leave-blur::after { animation: veil-in 340ms cubic-bezier(0.4, 0, 0.6, 1) both; }
  html[data-dir="blur"]:not(.is-leaving)::after { animation: veil-out 800ms var(--ease-ios) backwards; }

  /* browsers that cannot cross-fade pages: the page itself swipes out, and the next one swipes in */
  html.leave-next body.public #main, html.leave-next body.public .site-footer { animation: vt-out-next 230ms var(--ease-ios) both; }
  html.leave-prev body.public #main, html.leave-prev body.public .site-footer { animation: vt-out-prev 230ms var(--ease-ios) both; }
  html:not(.vt):not(.is-leaving)[data-dir="next"] body.public #main, html:not(.vt):not(.is-leaving)[data-dir="next"] body.public .site-footer { animation: vt-in-next 520ms var(--ease-ios) backwards; }
  html:not(.vt):not(.is-leaving)[data-dir="prev"] body.public #main, html:not(.vt):not(.is-leaving)[data-dir="prev"] body.public .site-footer { animation: vt-in-prev 520ms var(--ease-ios) backwards; }
}
.fx-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
/* the footer is the last thing to be drawn, after the part of the page that is in view */
body.public .site-footer { content-visibility: auto; contain-intrinsic-size: auto 640px; }
/* the header does not fade in on its own either */
body.public .site-header .masthead, :is(body.is-home, body.has-hero) .site-header .masthead { animation: none !important; }

/* ---------- Content rises into place, softly out of focus ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { opacity: 0; filter: blur(8px); transform: translateY(26px); transition: opacity 1000ms var(--ease-ios), transform 1000ms var(--ease-ios), filter 1000ms var(--ease-ios); }
  .reveal-ready [data-reveal].is-visible { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- Buttons: a soft light under the hand, a lift on hover, a gentle press ---------- */
body.public .btn, .gbtn, .chipbtn, .rail__arrows button, .ledger__go {
  -webkit-tap-highlight-color: transparent;
  transition: transform 520ms var(--ease-ios), background-color 420ms var(--ease-ios), color 320ms var(--ease-ios), border-color 420ms var(--ease-ios), box-shadow 620ms var(--ease-ios), filter 420ms var(--ease-ios);
}
body.public .btn, .gbtn { position: relative; overflow: hidden; isolation: isolate; }
body.public .btn::before, .gbtn::before { content: ""; position: absolute; inset: -60%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.4), transparent 70%); filter: blur(12px); opacity: 0; transform: scale(0.5); transition: opacity 700ms var(--ease-ios), transform 900ms var(--ease-ios); }
body.public .btn:hover::before, .gbtn:hover::before, body.public .btn:focus-visible::before { opacity: 1; transform: scale(1); }
body.public .btn:hover, .gbtn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(15, 29, 69, 0.55); }
body.public .btn--ghost:hover { box-shadow: none; transform: translateY(-1px); }
body.public .btn:active, .gbtn:active, .chipbtn:active, .rail__arrows button:active { transform: translateY(0) scale(0.96); filter: blur(0.5px); transition-duration: 160ms; }

/* ---------- Hovers glide ---------- */
a { transition: color 320ms var(--ease-ios), text-decoration-color 320ms var(--ease-ios), opacity 320ms var(--ease-ios); }
.site-nav a, .subnav a { transition: color 320ms var(--ease-ios), border-color 420ms var(--ease-ios), background-color 320ms var(--ease-ios); }
.scard, .gcard, .vcard, .chron__card, .rcard, .ledger a, .crew__photo, .vpoint, .step, .card-link { transition-timing-function: var(--ease-ios); }
.scard, .gcard, .vcard, .chron__card, .vpoint { transition-duration: 600ms; }
.rcard__photo img, .scard__thumb img, .vcard__photo img, .crew__photo img, .collage figure img { transition-timing-function: var(--ease-ios); transition-duration: 1400ms; }

/* ---------- The mobile menu opens like a sheet ---------- */
@keyframes sheet-in { from { opacity: 0; filter: blur(10px); transform: translateY(-12px) scale(0.985); } to { opacity: 1; filter: blur(0); transform: none; } }
.nav-open .site-nav { animation: sheet-in 520ms var(--ease-ios) both; }
.nav-open .site-nav li { animation: sheet-in 620ms var(--ease-ios) both; }
.nav-open .site-nav li:nth-child(1) { animation-delay: 60ms; } .nav-open .site-nav li:nth-child(2) { animation-delay: 110ms; } .nav-open .site-nav li:nth-child(3) { animation-delay: 160ms; } .nav-open .site-nav li:nth-child(4) { animation-delay: 210ms; }

/* ---------- Nothing moves for people who ask for calm ---------- */
@media (prefers-reduced-motion: reduce) {
  body.public #main, body.public .site-footer { animation: none !important; }
  body.public .btn::before, .gbtn::before { transition: none; }
  body.public .btn:hover, .gbtn:hover { transform: none; }
  .nav-open .site-nav, .nav-open .site-nav li { animation: none; }
}

/* A finished animation must not leave a filter or transform behind: it would trap the full-screen mobile menu
   inside the header bar. Animations here only play forwards into the normal state. */
body.public .site-header .masthead, :is(body.is-home, body.has-hero) .site-header .masthead { animation-fill-mode: backwards !important; }
.nav-open .site-nav, .nav-open .site-nav li { animation-fill-mode: backwards; }

/* Phones: the logo lockup stays on one line, and the chat button steps aside while the menu is open */
.brand__name { white-space: nowrap; }
@media (max-width: 40rem) { .brand__name { font-size: 1.3rem; } .brand__mark { width: 3.2rem; height: 3.2rem; } .brand { gap: 0.7rem; } }
.nav-open .wa-float { display: none; }

/* Phones: a round chat button, two leaders across, and the scripture ring kept inside the screen */
@media (max-width: 40rem) {
  .wa-float { min-height: 3.4rem; width: 3.4rem; padding: 0; justify-content: center; right: 0.9rem; bottom: 0.9rem; }
  .wa-float span { display: none; }
  .wa-float svg { width: 1.8rem; height: 1.8rem; }
  .crew { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
  .crew__card:nth-child(3n + 2) { margin-top: 0; }
  .crew__name strong { font-size: 1.05rem; }
  .ring { left: 0.4rem; top: 3%; width: 6.4rem; }
}