/* ==========================================================================
   In The Father's Heart Ekklesia
   Built by Colney Digital.

   Mobile-first. Two complete themes driven by custom properties on
   [data-theme]. Every colour below is a role, never a raw hex in a component,
   so the dark theme is a token swap rather than a second stylesheet.
   ========================================================================== */

@layer tokens, reset, chrome, layout, components, utilities;

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* --- Brand constants: the same in both themes --------------------- */
    /* Brand ramp, darkest to lightest. Every accent, gradient and glow on the
       site is built from these six and nothing else. */
    --brand-oxblood:  #3A0F10;
    --brand-burgundy: #5C1A1B;
    --brand-wine:     #8B2E2F;
    --brand-gold:     #B8891F;
    --brand-amber:    #F0A93B;
    --brand-glow:     #FFD86B;

    /* Ink that sits on a gold surface — constant across both themes, because
       the gradient itself does not change. 8.5:1 on amber, 12.9:1 on glow. */
    --on-bright:    #26191A;

    /* Deeper gold, for gradient text only. --brand-gold itself measures 2.8:1
       on the bg-alt sections, under the 3:1 large-text floor; this clears it on
       every light surface while still reading as gold. */
    --gold-deep:    #A57917;

    /* Gradient fill for emphasised words in headings. Theme-aware, because a
       single ramp cannot clear 3:1 against both a cream and a near-black page. */
    --em-from:      var(--brand-wine);
    --em-to:        var(--gold-deep);
    --overlay:      rgb(26 14 10 / 0.94);
    --danger:       #B3261E;
    --danger-dark:  #FFB4AB;

    /* --- LIGHT THEME -------------------------------------------------- */
    --bg:           #FDFAF4;   /* warm white */
    --bg-alt:       #F7F1E6;   /* soft neutral band */
    --surface:      #FFFFFF;
    --surface-2:    #FBF6EC;
    --border:       #E8DEC9;
    --border-soft:  #F0E8D8;

    --text:         #26191A;   /* 15.4:1 on --bg */
    --text-2:       #5C4A44;   /* 7.7:1  */
    --text-3:       #77655C;   /* 5.3:1  */
    --heading:      #3A1113;
    --accent:       #8B2E2F;   /* links, primary CTA fill — 8.0:1 */
    --accent-hover: #6E2223;
    --on-accent:    #FFF8EE;
    --kicker:       #7E5B12;   /* gold reading, but readable at 12px — 6.0:1 */

    --ambient-1: rgb(240 169 59 / 0.20);
    --ambient-2: rgb(139 46 47 / 0.10);
    --shadow-sm: 0 2px 8px rgb(38 25 26 / 0.06);
    --shadow:    0 10px 30px -18px rgb(38 25 26 / 0.35);
    --shadow-lg: 0 28px 60px -34px rgb(38 25 26 / 0.45);
    --glass:     rgb(255 255 255 / 0.72);
    --grain-ink: #26191A;
    --grain-opacity: 0.045;

    /* --- Type ---------------------------------------------------------- */
    --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Body sits at 17px desktop, never below 16px. Nothing here is thin. */
    --step--1: clamp(0.875rem, 0.86rem + 0.08vw, 0.925rem);
    --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.08rem + 0.24vw, 1.25rem);
    --step-2:  clamp(1.375rem, 1.28rem + 0.48vw, 1.625rem);
    --step-3:  clamp(1.75rem, 1.55rem + 1vw, 2.375rem);
    --step-4:  clamp(2.125rem, 1.72rem + 2vw, 3.25rem);
    --step-5:  clamp(2.5rem, 1.85rem + 3.2vw, 4.5rem);

    --sp-1: 0.375rem; --sp-2: 0.625rem; --sp-3: 1rem;    --sp-4: 1.5rem;
    --sp-5: 2.25rem;  --sp-6: 3.25rem;  --sp-7: 4.5rem;  --sp-8: 6rem;

    --measure: 66ch;
    --gutter: clamp(1.25rem, 5vw, 4rem);
    --radius: 14px;
    --radius-lg: 22px;
    --section-pad: clamp(3.5rem, 8vh, 6rem);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-sheet: cubic-bezier(.77, 0, .18, 1);
    --dur: 240ms;
    --dur-mid: 520ms;

    color-scheme: light;
  }

  /* --- DARK THEME ------------------------------------------------------ */
  /* --- DARK THEME — obsidian and sapphire ----------------------------- */
  [data-theme="dark"] {
    --bg:           #121011;
    --bg-alt:       #191516;
    --surface:      #1C1819;
    --surface-2:    #221D1E;
    --border:       #362E2C;
    --border-soft:  #2A2423;

    --text:         #F4EDE4;   /* 15.1:1 on --bg */
    --text-2:       #C3B4AA;   /* 9.0:1  */
    --text-3:       #A2938A;   /* 6.4:1  */
    --heading:      #FBEFDD;
    --accent:       #F0A93B;   /* gold reads where wine would disappear */
    --accent-hover: #FFC46A;
    --on-accent:    #1A1211;
    --kicker:       #E8B65C;   /* 9.1:1 on --bg */
    --em-from:      var(--brand-amber);
    --em-to:        var(--brand-glow);

    --ambient-1: rgb(240 169 59 / 0.16);
    --ambient-2: rgb(139 46 47 / 0.18);
    --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.4);
    --shadow:    0 12px 34px -18px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 30px 64px -32px rgb(0 0 0 / 0.8);
    --glass:     rgb(28 24 25 / 0.72);
    --grain-ink: #FFFFFF;
    --grain-opacity: 0.035;

    --em-from:      var(--brand-amber);
    --em-to:        var(--brand-glow);

    color-scheme: dark;
  }

  /* Theme swap is animated, but only for the moment the class is applied —
     leaving it on permanently would make every hover feel sluggish. */
  .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
    transition: background-color 420ms var(--ease), border-color 420ms var(--ease),
                color 420ms var(--ease), fill 420ms var(--ease) !important;
  }
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(5.5rem + env(safe-area-inset-top, 0px)); }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; font-size: max(16px, 1em); }
  button { background: none; border: 0; cursor: pointer; }
  a, button { touch-action: manipulation; }
  a { color: inherit; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; overflow-wrap: break-word; }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  ::selection { background: var(--brand-amber); color: var(--on-bright); }

  .skip-link {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -140%);
    z-index: 999; padding: 0.9rem 1.6rem;
    background: var(--accent); color: var(--on-accent);
    font-weight: 600; font-size: var(--step--1);
    border-radius: 0 0 var(--radius) var(--radius);
    transition: transform var(--dur) var(--ease);
  }
  .skip-link:focus-visible { transform: translate(-50%, 0); }
  [hidden] { display: none !important; }
}

/* --------------------------------------------------------------------------
   CHROME
   -------------------------------------------------------------------------- */
@layer chrome {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: var(--step-0);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgb(139 46 47 / 0.16);
    overflow-x: clip;
    min-height: 100svh;
    min-height: 100dvh;
  }

  /* Ambient light, fixed behind everything. Two slow-moving washes, no flicker. */
  .ambient {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  }
  .ambient span {
    position: absolute; border-radius: 50%; filter: blur(70px);
    will-change: transform;
  }
  .ambient span:nth-child(1) {
    width: 58vw; height: 58vw; top: -18vw; right: -12vw;
    background: var(--ambient-1); animation: drift-a 34s ease-in-out infinite alternate;
  }
  .ambient span:nth-child(2) {
    width: 46vw; height: 46vw; bottom: -14vw; left: -10vw;
    background: var(--ambient-2); animation: drift-b 42s ease-in-out infinite alternate;
  }
  @keyframes drift-a { to { transform: translate3d(-6vw, 5vh, 0) scale(1.12); } }
  @keyframes drift-b { to { transform: translate3d(5vw, -6vh, 0) scale(1.08); } }

  /* Subtle grain, masked so it tints rather than greys the page */
  body::after {
    content: ""; position: fixed; inset: 0;
    pointer-events: none; z-index: 1;
    opacity: var(--grain-opacity); background-color: var(--grain-ink);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* --- Header ------------------------------------------------------------ */
  .header {
    position: fixed; inset: 0 0 auto 0; z-index: 500;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: calc(0.65rem + env(safe-area-inset-top, 0px))
             max(var(--gutter), env(safe-area-inset-right, 0px))
             0.65rem
             max(var(--gutter), env(safe-area-inset-left, 0px));
    transition: background var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease),
                transform var(--dur-mid) var(--ease), backdrop-filter var(--dur-mid);
  }
  .header[data-scrolled="true"] {
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--shadow-sm), 0 1px 0 var(--border-soft);
  }
  .header[data-hidden="true"] { transform: translateY(-105%); }
  @media (max-width: 61.99rem) {
    .header[data-hidden="true"] { transform: none; }
  }

  .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; min-width: 0; flex: 1; }
  .brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
  .brand__text { display: grid; line-height: 1.05; }
  .brand__text b {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(0.95rem, 3.4vw, 1.15rem);
    letter-spacing: -0.01em; color: var(--heading);
  }
  .brand__text span {
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--kicker); margin-top: 0.15em;
  }

  .nav { display: none; }
  @media (min-width: 62rem) {
    .nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.25rem); }
    .nav a {
      text-decoration: none; font-size: 0.95rem; font-weight: 500;
      color: var(--text-2); padding: 0.55rem 0.35rem; position: relative;
      transition: color var(--dur) var(--ease);
    }
    .nav a::after {
      content: ""; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.15rem;
      height: 2px; border-radius: 2px; background: var(--accent);
      transform: scaleX(0); transform-origin: right;
      transition: transform var(--dur-mid) var(--ease-sheet);
    }
    .nav a:hover, .nav a:focus-visible { color: var(--text); }
    .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
    .nav a[aria-current="page"] { color: var(--text); }
    .nav a[aria-current="page"]::after { transform: scaleX(1); }
  }

  .header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
  /* Icon-only Give on tablets; phones use the drawer and the sticky bar. */
  @media (max-width: 61.99rem) {
    .header__actions > a.btn {
      width: 44px; height: 44px; min-height: 44px; padding: 0;
      font-size: 0; gap: 0;
    }
    .header__actions > a.btn svg { width: 1.15rem; height: 1.15rem; }
  }
  @media (max-width: 40rem) {
    .header { gap: 0.4rem; }
    .header__actions { gap: 0.35rem; }
    .header__actions > a.btn { display: none; }
    .brand img { width: 2.15rem; height: 2.15rem; }
  }

  .theme-toggle { display: none !important; }

  .menu-toggle {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--heading);
    position: relative; z-index: 510;
  }
  @media (min-width: 62rem) { .menu-toggle { display: none; } }
  .menu-toggle span { display: block; width: 1.15rem; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: background 160ms; }
  .menu-toggle span::before, .menu-toggle span::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform 340ms var(--ease-sheet);
  }
  .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] span { background: transparent; }
  .menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

  /* --- Mobile drawer ----------------------------------------------------- */
  /* Kept in-viewport (no off-canvas translate). body overflow-x used to clip
     a panel sitting at translateX(100%), so the menu never appeared. */
  .drawer {
    position: fixed; inset: 0; z-index: 450;
    background: var(--bg);
    display: grid; align-content: start;
    padding: calc(5.5rem + env(safe-area-inset-top, 0px))
             max(var(--gutter), env(safe-area-inset-right, 0px))
             calc(6.5rem + env(safe-area-inset-bottom, 0px))
             max(var(--gutter), env(safe-area-inset-left, 0px));
    overscroll-behavior: contain; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 280ms var(--ease), visibility 280ms;
  }
  .drawer[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  @media (min-width: 62rem) { .drawer { display: none; } }
  .drawer a {
    display: flex; align-items: center; justify-content: space-between;
    text-decoration: none; font-family: var(--display); font-weight: 600;
    font-size: clamp(1.5rem, 7vw, 2rem); color: var(--heading);
    padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft);
  }
  .drawer a[aria-current="page"] { color: var(--accent); }
  .drawer a svg { width: 1rem; height: 1rem; color: var(--text-3); }
  .drawer__cta { margin-top: var(--sp-4); display: grid; gap: 0.75rem; }
  .drawer__meta { margin-top: var(--sp-5); color: var(--text-3); font-size: var(--step--1); display: grid; gap: 0.3rem; overflow-wrap: anywhere; }

  /* --- Footer ------------------------------------------------------------ */
  .footer {
    position: relative; z-index: 2;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding: var(--sp-7) var(--gutter) var(--sp-4);
  }
  .footer__grid {
    display: grid; gap: var(--sp-5);
    grid-template-columns: 1fr;
    max-width: 76rem; margin-inline: auto;
  }
  @media (min-width: 44rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
  .footer h2 {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--kicker); margin-bottom: var(--sp-3);
  }
  .footer__list { display: grid; gap: 0.6rem; font-size: 0.95rem; color: var(--text-2); }
  .footer__list a { text-decoration: none; transition: color var(--dur); }
  .footer__list a:hover { color: var(--accent); }
  .socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--sp-3); }
  .socials a {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); text-decoration: none;
    transition: color var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out);
  }
  .socials a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
  .socials svg { width: 1.1rem; height: 1.1rem; }
  .footer__base {
    max-width: 76rem; margin: var(--sp-6) auto 0; padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
    justify-content: space-between; font-size: var(--step--1); color: var(--text-3);
  }
  .footer__base a { text-decoration: none; }
  .footer__base a:hover { color: var(--accent); }

  /* --- Page curtain ------------------------------------------------------ */
  /* The curtain is created by scripts/transitions.js, never by the HTML.
     If that script does not run, the element does not exist and there is
     nothing to cover the page — which is the whole point of doing it this way. */
  .curtain {
    position: fixed; inset: 0; z-index: 600; pointer-events: none;
    background: var(--bg);
    display: grid; place-items: center;
    /* Default is OPEN. A curtain that defaults to closed can strand a page. */
    clip-path: inset(0 0 100% 0);
  }
  .curtain[data-state="closed"] { clip-path: inset(0 0 0 0); }
  .curtain img { width: 4.5rem; }
  .page-stage { position: relative; z-index: 2; }
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
@layer layout {
  main { position: relative; z-index: 2; }

  .shell { width: min(100% - (var(--gutter) * 2), 76rem); max-width: 100%; margin-inline: auto; }
  .shell--narrow { width: min(100% - (var(--gutter) * 2), 46rem); }
  .shell--wide { width: min(100% - (var(--gutter) * 2), 88rem); }

  .section { position: relative; padding-block: var(--section-pad); }
  .section--tight { padding-block: calc(var(--section-pad) * 0.62); }
  .section--first { padding-top: calc(clamp(6rem, 14vh, 8.5rem) + env(safe-area-inset-top, 0px)); }
  .section--alt { background: var(--bg-alt); }
  .section--surface { background: var(--surface-2); }

  .section__head { max-width: 46rem; margin-bottom: var(--sp-5); min-width: 0; }
  .section__head--center { margin-inline: auto; text-align: center; }

  .grid { display: grid; gap: var(--sp-4); }
  .grid > * { min-width: 0; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  @media (min-width: 40rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 52rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

  .split { display: grid; gap: var(--sp-5); align-items: center; }
  .split > * { min-width: 0; }
  @media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (min-width: 56rem) { .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } }
  @media (min-width: 56rem) {
    .split--reverse > :first-child { order: 2; }
    .split--reverse > :last-child { order: 1; }
  }

  .prose { max-width: var(--measure); }
  .prose p + p { margin-top: var(--sp-3); }
  .prose h2, .prose h3 { margin-top: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */
@layer components {

  /* --- Type -------------------------------------------------------------- */
  .kicker {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--kicker);
    margin-bottom: var(--sp-3);
  }
  .kicker::before {
    content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-burgundy), var(--brand-gold));
  }
  .kicker--center { justify-content: center; }
  .kicker--center::after {
    content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
    background: linear-gradient(270deg, var(--brand-burgundy), var(--brand-gold));
  }

  .h1, .h2, .h3 {
    font-family: var(--display); color: var(--heading);
    font-weight: 600; line-height: 1.08; letter-spacing: -0.02em;
    overflow-wrap: break-word;
  }
  .h1 { font-size: var(--step-5); line-height: 1.02; }
  .h2 { font-size: var(--step-4); }
  .h3 { font-size: var(--step-3); }
  .h4 { font-family: var(--display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; color: var(--heading); }
  .h1 em, .h2 em, .h3 em {
    font-style: italic; font-weight: 500;
    background: linear-gradient(100deg, var(--em-from), var(--em-to) 55%, var(--em-from));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  .lede { font-size: var(--step-1); line-height: 1.65; color: var(--text-2); max-width: 52ch; overflow-wrap: break-word; }
  .muted { color: var(--text-3); }

  /* --- Buttons ----------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    min-height: 52px; padding: 0.85rem 1.6rem;
    font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
    text-decoration: none; border-radius: 999px;
    border: 2px solid transparent; position: relative; overflow: hidden;
    isolation: isolate; white-space: nowrap;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), color var(--dur), border-color var(--dur);
  }
  .btn:active { transform: scale(0.97); }
  .btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

  .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
  .btn--primary::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, var(--brand-burgundy), var(--brand-gold) 60%, var(--brand-amber));
    opacity: 0; transition: opacity var(--dur-mid) var(--ease);
  }
  .btn--primary:hover, .btn--primary:focus-visible { color: var(--on-bright); box-shadow: var(--shadow-lg); }
  .btn--primary:hover::before, .btn--primary:focus-visible::before { opacity: 1; }

  .btn--ghost { border-color: var(--border); color: var(--text); background: var(--surface); }
  .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

  /* A light chip with dark ink rather than white on gold: white measures only
     2.1:1 against --brand-amber and 1.5:1 against --brand-glow. */
  .btn--bright {
    background: linear-gradient(100deg, var(--brand-amber), var(--brand-glow) 70%, #E4EEFF);
    color: var(--on-bright); box-shadow: 0 10px 30px -14px rgb(184 137 31 / 0.45);
  }
  .btn--bright:hover { box-shadow: 0 16px 38px -14px rgb(184 137 31 / 0.55); }

  .btn--sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.925rem; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  @media (max-width: 36rem) { .btn-row .btn { width: 100%; } }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 600; color: var(--accent); text-decoration: none;
    min-height: 44px;
  }
  .link-arrow svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease-out); }
  .link-arrow:hover svg { transform: translateX(4px); }

  /* --- Hero film (video only) + intro copy ------------------------------- */
  .hero {
    position: relative; overflow: hidden;
    padding: 0;
    margin-top: calc(4.6rem + env(safe-area-inset-top, 0px));
    height: min(86svh, 52rem);
    min-height: 16rem;
  }
  .hero__video {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden; pointer-events: none;
  }
  .hero__video-frame {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover;
  }
  .hero__grid { display: grid; gap: var(--sp-5); align-items: center; min-width: 0; }
  @media (min-width: 56rem) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); } }

  .hero__verses {
    position: relative; z-index: 3;
    display: grid; gap: var(--sp-5);
    max-width: 36ch;
  }
  .hero__verses blockquote {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.05rem, 2.15vw, 1.4rem);
    line-height: 1.4; color: var(--heading);
    letter-spacing: 0.03em;
  }
  .hero__verses cite {
    display: block; margin-top: var(--sp-3);
    font-style: normal; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--kicker);
  }
  .hero__place {
    margin-top: var(--sp-2);
    font-family: var(--display);
    font-style: italic;
    font-size: var(--step-1);
    color: var(--heading);
    max-width: 28ch;
  }
  .hero__sub { margin-top: var(--sp-4); }
  .hero__cta { margin-top: var(--sp-5); }
  .hero__facts {
    margin-top: var(--sp-5); padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
    animation: facts-in 0.8s var(--ease-out) 0.85s both;
  }
  @keyframes facts-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .hero__fact b {
    display: flex; align-items: flex-start;
    font-family: var(--display); font-weight: 600; font-size: var(--step-3);
    color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums;
  }
  .hero__fact > span { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-3); overflow-wrap: break-word; }

  .count-view {
    display: block; height: 1em; overflow: hidden;
  }
  .count-strip {
    display: block; will-change: transform;
  }
  .count-num {
    display: block; height: 1em; line-height: 1;
  }
  .count-affix { line-height: 1; }

  /* The logo, lit from behind rather than sitting on a flat plate.
     --heart-beat locks the thump, glow and ripples to one cycle (~60 bpm). */
  .hero__art {
    position: relative; display: grid; place-items: center;
    --heart-beat: 1.5s;
  }
  .hero__heart {
    position: relative; z-index: 2;
    display: grid; place-items: center;
    width: min(100%, 26rem);
    --heart-shadow: 0 24px 46px rgb(139 46 47 / 0.28);
    --heart-glow: 0 0 28px rgb(255 216 107 / 0.55);
  }
  [data-theme="dark"] .hero__heart {
    --heart-shadow: 0 18px 42px rgb(0 0 0 / 0.5);
    --heart-glow: 0 0 36px rgb(255 216 107 / 0.7);
  }
  .hero__heart img {
    position: relative; z-index: 2;
    width: 100%; height: auto;
    transform-origin: 50% 58%;
    filter: drop-shadow(var(--heart-shadow));
    animation: heartbeat var(--heart-beat) ease-in-out infinite;
    will-change: transform, filter;
  }
  .hero__heart::after {
    content: "";
    position: absolute; inset: 16%; z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 216 107 / 0.5), transparent 68%);
    filter: blur(14px);
    pointer-events: none;
    animation: heart-flash var(--heart-beat) ease-out infinite;
  }
  .hero__pulse {
    position: absolute; z-index: 1;
    width: 68%; aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgb(240 169 59 / 0.55);
    box-shadow: 0 0 18px rgb(255 216 107 / 0.25);
    pointer-events: none;
    animation: heart-ripple var(--heart-beat) ease-out infinite;
  }
  .hero__pulse--late { animation-delay: 0.22s; }
  .hero__aura, .hero__ring {
    position: absolute; border-radius: 50%; pointer-events: none;
  }
  .hero__aura {
    width: 78%; aspect-ratio: 1; z-index: 1;
    background: radial-gradient(circle,
      rgb(255 216 107 / 0.5) 0%, rgb(240 169 59 / 0.34) 34%,
      rgb(139 46 47 / 0.16) 58%, transparent 72%);
    filter: blur(26px);
    animation: heartbeat-aura var(--heart-beat) ease-in-out infinite;
  }
  .hero__ring {
    z-index: 1; border: 1px solid var(--border);
    width: 92%; aspect-ratio: 1;
  }
  .hero__ring:nth-of-type(2) { width: 108%; opacity: 0.6; }

  /* Lub-dub: squeeze, expand, rest, smaller second beat, then a long rest. */
  @keyframes heartbeat {
    0%, 42%, 100% {
      transform: scale(1);
      filter: drop-shadow(var(--heart-shadow));
    }
    6% {
      transform: scale(0.97, 0.94);
      filter: drop-shadow(var(--heart-shadow));
    }
    12% {
      transform: scale(1.12, 1.16);
      filter: drop-shadow(var(--heart-shadow)) drop-shadow(var(--heart-glow)) brightness(1.08);
    }
    20% { transform: scale(1); filter: drop-shadow(var(--heart-shadow)); }
    26% { transform: scale(0.98, 0.96); }
    32% {
      transform: scale(1.07, 1.1);
      filter: drop-shadow(var(--heart-shadow)) drop-shadow(var(--heart-glow)) brightness(1.05);
    }
  }
  @keyframes heartbeat-aura {
    0%, 42%, 100% { transform: scale(1); opacity: 0.92; }
    12% { transform: scale(1.16); opacity: 1; }
    20% { transform: scale(1.04); opacity: 0.88; }
    32% { transform: scale(1.12); opacity: 1; }
  }
  @keyframes heart-ripple {
    0%, 8% { transform: scale(0.72); opacity: 0; }
    12% { opacity: 0.75; }
    40% { transform: scale(1.42); opacity: 0; }
    100% { transform: scale(1.42); opacity: 0; }
  }
  @keyframes heart-flash {
    0%, 8% { opacity: 0; transform: scale(0.78); }
    12% { opacity: 0.9; transform: scale(1); }
    28% { opacity: 0; transform: scale(1.28); }
    30% { opacity: 0; }
    32% { opacity: 0.55; transform: scale(1); }
    48% { opacity: 0; transform: scale(1.2); }
    100% { opacity: 0; }
  }

  @media (max-width: 56rem) {
    .hero {
      margin-top: calc(4.85rem + env(safe-area-inset-top, 0px));
      height: min(72svh, 36rem);
      padding: 0;
    }
    .intro { text-align: center; }
    .intro .hero__copy { display: flex; flex-direction: column; align-items: center; }
    .intro .h1 br { display: none; }
    .h1, .h2, .h3 { text-wrap: wrap; }
    .h1 { font-size: clamp(1.9rem, 8.2vw, 2.75rem); }
    .hero__sub, .hero__place, .hero__copy .lede { margin-inline: auto; }
    .hero__cta { justify-content: center; width: 100%; }
    .hero__cta .btn { width: 100%; white-space: normal; }
    .hero__verses { margin-inline: auto; text-align: center; }
    .hero__heart { width: min(58%, 13.5rem); }
    .hero__ring { display: none; }
    .hero__pulse, .hero__heart::after { display: none; }
    .hero__heart img { will-change: auto; }
    .hero__facts {
      width: 100%; gap: 0.65rem; margin-top: var(--sp-4);
    }
    .hero__fact { text-align: center; }
    .hero__fact b { justify-content: center; font-size: var(--step-2); }
    .hero__fact > span { font-size: 0.68rem; line-height: 1.25; }
    .btn { white-space: normal; }
  }

  /* --- Cards ------------------------------------------------------------- */
  .card {
    position: relative; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-4); box-shadow: var(--shadow-sm);
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid),
                border-color var(--dur-mid);
  }
  @media (hover: hover) and (pointer: fine) {
    .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
  }
  .card__icon {
    width: 3rem; height: 3rem; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: var(--sp-3);
    background: linear-gradient(140deg, rgb(240 169 59 / 0.22), rgb(240 169 59 / 0.14));
    color: var(--kicker);
  }
  .card__icon svg { width: 1.4rem; height: 1.4rem; }
  .card p { color: var(--text-2); margin-top: var(--sp-2); }

  /* Reveal card: collapsed until More is tapped. CSS grid 0fr→1fr is the
     motion; JS only flips data-open. Hover never opens a card. */
  .reveal-card {
    cursor: pointer; overflow: visible;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid),
                border-color var(--dur-mid), background-color var(--dur);
  }
  .reveal-card[data-open="true"] {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
  }
  @media (hover: hover) and (pointer: fine) {
    .reveal-card[data-open="true"] { transform: translateY(-3px); }
  }
  @media (pointer: coarse) {
    .reveal-card:active { background: var(--surface-2); }
  }
  .reveal-card__more {
    display: grid; grid-template-rows: 0fr;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows 480ms var(--ease-out), max-height 480ms var(--ease-out), opacity 280ms var(--ease);
  }
  .reveal-card__more > div {
    overflow: hidden; min-height: 0;
    transform: translateY(0.55rem);
    opacity: 0;
    transition: transform 400ms var(--ease-out), opacity 280ms var(--ease);
  }
  .reveal-card[data-open="true"] .reveal-card__more {
    grid-template-rows: 1fr; max-height: 48rem; opacity: 1;
  }
  .reveal-card[data-open="true"] .reveal-card__more > div {
    transform: none; opacity: 1;
  }
  .no-js .reveal-card__more {
    display: block; opacity: 1; grid-template-rows: 1fr; height: auto; max-height: none;
  }
  .no-js .reveal-card__more > div { transform: none; opacity: 1; overflow: visible; }
  .reveal-card__more p { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
  .reveal-card__hint {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--sp-3);
    font-size: 0.85rem; font-weight: 600; color: var(--accent);
    min-height: 44px;
  }
  .reveal-card__hint svg {
    width: 0.9rem; height: 0.9rem; flex: none;
    transition: transform 420ms var(--ease-out);
  }
  .reveal-card[data-open="true"] .reveal-card__hint svg { transform: rotate(180deg); }

  /* --- Service times ----------------------------------------------------- */
  .times { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  @media (min-width: 48rem) { .times { grid-template-columns: repeat(2, 1fr); } }
  .time {
    background: var(--surface); padding: var(--sp-4);
    display: flex; gap: var(--sp-3); align-items: flex-start;
    transition: background var(--dur);
  }
  .time:hover { background: var(--surface-2); }
  .time__when {
    flex: none; width: 5.5rem; font-family: var(--display); font-weight: 600;
    font-size: 1.05rem; color: var(--accent); line-height: 1.25;
  }
  .time__what b { display: block; font-weight: 600; color: var(--heading); }
  .time__what span { display: block; color: var(--text-3); font-size: 0.9rem; margin-top: 0.15rem; }

  /* --- Sermons ----------------------------------------------------------- */
  .filters {
    display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 0.4rem; margin-bottom: var(--sp-4);
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button {
    flex: none; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px;
    font-size: 0.925rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
    transition: all var(--dur) var(--ease);
  }
  .filters button:hover { border-color: var(--accent); color: var(--text); }
  .filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  @media (min-width: 56rem) { .filters { flex-wrap: wrap; overflow: visible; } }

  .sermons { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
  .sermon { display: grid; }
  .sermon__thumb {
    position: relative; width: 100%; aspect-ratio: 16/9;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2);
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
  }
  .sermon__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
  .sermon__thumb iframe,
  .channel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
  .sermon__thumb.is-playing .sermon__play { display: none; }
  @media (hover: hover) {
    .sermon:hover .sermon__thumb { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .sermon:hover .sermon__thumb img { transform: scale(1.06); }
  }
  .sermon__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, transparent 40%, rgb(26 14 10 / 0.6));
  }
  .sermon__play span {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-glow), var(--brand-amber));
    color: var(--on-bright); box-shadow: 0 8px 26px -8px rgb(184 137 31 / 0.5);
    transition: transform var(--dur) var(--ease-out);
  }
  .sermon:hover .sermon__play span { transform: scale(1.1); }
  .sermon__play svg { width: 1.3rem; height: 1.3rem; }
  .sermon__meta { padding-top: 0.85rem; }
  .sermon__title { font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--heading); }
  .sermon__by { margin-top: 0.35rem; font-size: 0.875rem; color: var(--text-3); }

  .theater {
    position: fixed; inset: 0; z-index: 560; display: grid; place-items: center;
    background: var(--overlay); padding: var(--gutter);
    padding-top: max(var(--gutter), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--gutter), env(safe-area-inset-bottom, 0px));
    opacity: 1;
  }
  .theater[hidden] { display: none; }
  .theater__frame {
    position: relative; width: min(100%, 68rem); aspect-ratio: 16/9;
    border-radius: var(--radius); background: #0b0908;
  }
  .theater__player {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: var(--radius); background: #000;
  }
  .theater__close {
    position: absolute; top: -3rem; right: 0; min-height: 44px; padding-inline: 0.5rem;
    color: #F5EBE1; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .theater__watch {
    position: absolute; top: -3rem; left: 0; min-height: 44px; padding-inline: 0.5rem;
    color: #F5EBE1; font-weight: 600; text-decoration: none;
  }
  .theater__watch:hover { text-decoration: underline; }
  @media (max-width: 56rem) {
    .theater {
      align-content: start;
      padding: calc(4.25rem + env(safe-area-inset-top, 0px)) var(--gutter)
               calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
    .theater__close {
      position: fixed;
      top: max(0.55rem, env(safe-area-inset-top, 0px));
      right: max(var(--gutter), env(safe-area-inset-right, 0px));
      z-index: 1;
    }
  }

  /* Channel embed facade */
  .channel {
    position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--border);
    background: linear-gradient(150deg, var(--surface-2), var(--bg-alt));
    display: grid; place-items: center; text-align: center; padding: var(--sp-4);
    cursor: pointer;
  }
  .channel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .channel__glow {
    position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 216 107 / 0.42), transparent 65%);
    filter: blur(30px);
  }
  .channel__inner { position: relative; display: grid; justify-items: center; gap: var(--sp-3); }
  .channel__inner p { color: var(--text-2); max-width: 32ch; }

  /* --- Events ------------------------------------------------------------ */
  .event {
    display: grid; gap: var(--sp-3); align-items: start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-4);
    transition: border-color var(--dur), box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
  }
  @media (min-width: 40rem) { .event { grid-template-columns: auto 1fr auto; align-items: center; } }
  @media (hover: hover) and (pointer: fine) { .event:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-3px); } }
  .event__date {
    flex: none; width: 4.5rem; aspect-ratio: 1; border-radius: var(--radius);
    display: grid; place-content: center; text-align: center; line-height: 1.1;
    background: linear-gradient(150deg, rgb(240 169 59 / 0.22), rgb(240 169 59 / 0.12));
    border: 1px solid var(--border);
  }
  .event__date b { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--heading); }
  .event__date span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker); }
  .event__where { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.4rem; font-size: 0.875rem; color: var(--text-3); }
  .event__where span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .event__where svg { width: 0.9rem; height: 0.9rem; }

  /* --- Prayer ------------------------------------------------------------ */
  .prayer-block {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 5vw, 3.5rem);
    background: linear-gradient(150deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border); text-align: center;
  }
  .prayer-block::before {
    content: ""; position: absolute; top: -40%; left: 50%; translate: -50% 0;
    width: 60%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 216 107 / 0.34), transparent 65%);
    filter: blur(40px); pointer-events: none;
  }
  .prayer-block > * { position: relative; }

  /* --- Testimonies ------------------------------------------------------- */
  .stories {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: min(84vw, 24rem);
    gap: var(--sp-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: var(--sp-3);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .stories::-webkit-scrollbar { display: none; }
  .story {
    scroll-snap-align: start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-4);
    display: grid; align-content: start; gap: var(--sp-3);
  }
  .story__quote { font-family: var(--display); font-size: 1.2rem; line-height: 1.45; color: var(--heading); font-weight: 500; }
  .story__who { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
  .story__avatar {
    width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 700; color: var(--on-bright);
    background: linear-gradient(140deg, var(--brand-amber), var(--brand-gold));
  }
  .story__who b { display: block; font-weight: 600; color: var(--text); }
  .story__who span { display: block; font-size: 0.825rem; color: var(--text-3); }
  .stories-nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: var(--sp-2); }
  .stories-nav button {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
    transition: all var(--dur);
  }
  .stories-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .stories-nav button:disabled { opacity: 0.35; cursor: default; }
  .stories-nav svg { width: 1.1rem; height: 1.1rem; }

  /* --- Scripture --------------------------------------------------------- */
  .scripture {
    position: relative; text-align: center;
    padding-block: clamp(3rem, 9vh, 6rem);
    overflow: hidden;
  }
  .scripture::before {
    content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
    width: min(70vw, 34rem); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 216 107 / 0.26), transparent 62%);
    filter: blur(50px); pointer-events: none;
  }
  .scripture blockquote {
    position: relative;
    font-family: var(--display); font-weight: 400; font-style: italic;
    font-size: clamp(1.5rem, 4.4vw, 2.75rem);
    line-height: 1.28; color: var(--heading);
    max-width: 22ch; margin-inline: auto;
  }
  .scripture__stack {
    display: grid;
    gap: clamp(2.5rem, 7vh, 5rem);
    position: relative;
    z-index: 1;
  }
  .scripture--long {
    font-size: clamp(1.15rem, 3vw, 2.1rem);
    max-width: 32ch;
  }
  .scripture cite {
    display: block; margin-top: var(--sp-4); font-style: normal;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--kicker);
  }

  /* --- Stats ------------------------------------------------------------- */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  @media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, 1fr); } }
  .stat { text-align: center; }
  .stat b {
    display: flex; align-items: flex-start; justify-content: center;
    font-family: var(--display); font-weight: 600; font-size: var(--step-4);
    color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums;
  }
  .stat > span { display: block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

  /* --- Forms ------------------------------------------------------------- */
  .field { display: grid; gap: 0.4rem; margin-bottom: var(--sp-3); }
  .field label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
  .field input, .field select, .field textarea {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 0.85rem 1rem; min-height: 52px;
    color: var(--text); font-size: max(16px, 1rem);
    transition: border-color var(--dur), box-shadow var(--dur);
  }
  .field textarea { min-height: 9rem; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px rgb(139 46 47 / 0.16);
  }
  [data-theme="dark"] .field input:focus,
  [data-theme="dark"] .field select:focus,
  [data-theme="dark"] .field textarea:focus { box-shadow: 0 0 0 4px rgb(240 169 59 / 0.3); }
  .field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  }
  .field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }
  .field--check input { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--accent); margin-top: 0.25rem; }
  .field--check label { font-weight: 400; color: var(--text-2); }
  .field__error { font-size: 0.85rem; font-weight: 500; color: var(--danger); min-height: 1.2em; }
  [data-theme="dark"] .field__error { color: var(--danger-dark); }
  .honeypot { position: absolute; left: -9999px; opacity: 0; }
  .form-note { font-size: 0.875rem; color: var(--text-3); margin-top: var(--sp-2); }
  .form-status { margin-top: var(--sp-3); font-size: 0.95rem; font-weight: 500; color: var(--accent); min-height: 1.4em; }

  /* --- Notices ----------------------------------------------------------- */
  .notice {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: var(--sp-3); border-radius: var(--radius);
    background: var(--surface-2); border: 1px dashed var(--border);
    font-size: 0.875rem; color: var(--text-2);
  }
  .notice svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--kicker); margin-top: 0.15rem; }
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .center { text-align: center; }
  .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
  .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
  .full-bleed-scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  [data-reveal] { opacity: 0; }
  .no-js [data-reveal], .motion-off [data-reveal] { opacity: 1; }
}

@media (max-width: 56rem) {
  .ambient span { will-change: auto; filter: blur(48px); }
  .depth, .depth > *, .collage > * { will-change: auto; }
  .brand { min-width: 0; }
  .brand__text { min-width: 0; }
  .brand__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drawer__cta .btn { width: 100%; }
  .full-bleed-scroll { scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }

  .reveal-card { overflow: visible; }
  .reveal-card[data-open="true"] { transform: none; }
}

@media (max-width: 61.99rem) {
  .header { z-index: 500; }
  .menu-toggle { display: grid; }
  .header__actions > a.btn { display: none; }
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 450;
    transform: none;
  }
  .drawer[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (max-width: 28rem) {
  .brand__text span { display: none; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ambient span { animation: none; }
  .hero__facts { animation: none; }
  .strip { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .strip__track {
    animation: none !important;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    transform: none !important;
  }
  .strip__item { white-space: normal; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .stories { scroll-behavior: auto; }
}

/* ==========================================================================
   IMAGERY, 3D AND MOTION — added in revision 5
   Everything below is layered on top of the base build. All of it is behind
   prefers-reduced-motion, and every hover-only effect is gated on a fine
   pointer so phones get taps instead.
   ========================================================================== */

@layer components {

  /* --- Photographs --------------------------------------------------------
     A cool tone is laid over every photograph so imagery sits inside the blue
     palette rather than fighting it. The treatment is CSS, so replacing a
     placeholder with a real photograph needs no retouching. */
  .photo {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-lg); background: var(--surface-2);
    border: 1px solid var(--border);
  }
  .photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 900ms var(--ease-out), filter 600ms var(--ease);
  }
  .photo::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(160deg, rgb(58 15 16 / 0.5) 0%, transparent 55%),
                linear-gradient(20deg, rgb(240 169 59 / 0.3) 0%, transparent 60%);
    mix-blend-mode: multiply;
  }
  .photo::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgb(26 14 10 / 0.55));
    opacity: 0; transition: opacity 500ms var(--ease);
  }
  .photo--caption::after { opacity: 1; }
  [data-theme="dark"] .photo img { filter: brightness(0.82) contrast(1.05); }
  @media (hover: hover) { .photo:hover img { transform: scale(1.06); } }

  .photo figcaption {
    position: absolute; z-index: 4; left: 1rem; right: 1rem; bottom: 0.9rem;
    color: #FFF6E8; font-size: 0.85rem; font-weight: 500;
    text-shadow: 0 1px 10px rgb(26 14 10 / 0.9);
  }
  .photo--tall { aspect-ratio: 3 / 4; }
  .photo--wide { aspect-ratio: 16 / 10; }
  .photo--square { aspect-ratio: 1; }

  /* Portraits keep their own colour — the duotone overlay is for scene photos. */
  .photo--person {
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 26rem;
  }
  .photo--person::before,
  .photo--person::after { content: none; }
  .photo--person img { object-position: 50% 14%; }
  [data-theme="dark"] .photo--person img { filter: brightness(0.94) contrast(1.02); }

  .person + .person { margin-top: var(--sp-6); }
  .person__photo {
    width: min(100%, 26rem);
    justify-self: center;
  }

  /* --- Collage: three photographs that overlap and drift apart on scroll --- */
  .collage {
    position: relative; display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    aspect-ratio: 1 / 1;
    perspective: 1400px;
  }
  .collage > * { will-change: transform; }
  .collage__a { grid-area: 1 / 1 / 5 / 5; z-index: 2; }
  .collage__b { grid-area: 3 / 4 / 7 / 7; z-index: 3; box-shadow: var(--shadow-lg); }
  .collage__c { grid-area: 5 / 1 / 7 / 4; z-index: 4; box-shadow: var(--shadow-lg); }
  @media (max-width: 40rem) {
    .collage { aspect-ratio: 4 / 5; }
    .collage__c { grid-area: 5 / 1 / 7 / 3; }
  }

  /* --- Full-bleed parallax band ------------------------------------------- */
  .band {
    position: relative; overflow: hidden;
    min-height: min(70svh, 34rem);
    display: grid; place-items: center; text-align: center;
    isolation: isolate;
  }
  .band__bg {
    position: absolute; inset: -12% 0; z-index: -2;
    will-change: transform;
  }
  .band__bg img { width: 100%; height: 100%; object-fit: cover; }
  .band::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(26 14 10 / 0.8), rgb(58 15 16 / 0.7));
  }
  .band__inner { position: relative; z-index: 2; padding: var(--sp-6) var(--gutter); }
  .band__inner .h2, .band__inner .h1 { color: #FFF6E8; }
  .band__inner p { color: #E7D8C6; }
  .band__inner .kicker { color: var(--brand-amber); }

  /* --- Section seam: the next section rises over the last one ------------- */
  .seam { position: relative; z-index: 3; }
  .seam--curved {
    border-start-start-radius: clamp(1.5rem, 5vw, 3rem);
    border-start-end-radius: clamp(1.5rem, 5vw, 3rem);
    margin-top: clamp(-4rem, -6vw, -2rem);
    box-shadow: 0 -30px 60px -40px rgb(10 27 61 / 0.6);
  }

  /* --- Slider ------------------------------------------------------------- */
  .slider { position: relative; }
  .slider__track {
    display: flex; gap: var(--sp-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-block: var(--sp-2) var(--sp-4);
    perspective: 1200px;
  }
  .slider__track::-webkit-scrollbar { display: none; }
  .slider__slide {
    flex: none; width: min(80vw, 26rem); scroll-snap-align: center;
    transform-style: preserve-3d;
    transition: transform 500ms var(--ease-out), opacity 500ms var(--ease);
  }
  .slider__slide .photo { aspect-ratio: 4 / 5; }
  .slider__slide h3 { margin-top: var(--sp-3); }
  .slider__slide p { color: var(--text-2); margin-top: 0.35rem; }
  .slider__nav { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
  .slider__dots { display: flex; gap: 0.4rem; flex-wrap: wrap; }
  .slider__dots button {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  }
  .slider__dots button::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--border); transition: all var(--dur) var(--ease);
  }
  .slider__dots button[aria-current="true"]::after {
    background: var(--accent); width: 26px; border-radius: 999px;
  }
  .slider__arrows { display: flex; gap: 0.5rem; }
  .slider__arrows button {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
    transition: all var(--dur);
  }
  .slider__arrows button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
  .slider__arrows button:disabled { opacity: 0.35; cursor: default; }
  .slider__arrows svg { width: 1.1rem; height: 1.1rem; }

  /* --- 3D flip card ------------------------------------------------------- */
  .flip { perspective: 1400px; }
  .flip__inner {
    position: relative; transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 720ms var(--ease-sheet);
    min-height: 16rem;
  }
  .flip[data-flipped="true"] .flip__inner { transform: rotateY(180deg); }
  @media (hover: hover) and (pointer: fine) {
    .flip:hover .flip__inner { transform: rotateY(180deg); }
  }
  .flip__face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg); overflow: hidden;
    display: grid; align-content: end; padding: var(--sp-4);
  }
  .flip__face--front { border: 1px solid var(--border); }
  .flip__face--front .photo { position: absolute; inset: 0; border-radius: 0; border: 0; }
  .flip__face--front h3, .flip__face--front p { position: relative; z-index: 4; color: #FFF6E8; }
  .flip__face--front p { color: #E7D8C6; }
  .flip__face--back {
    transform: rotateY(180deg);
    background: linear-gradient(150deg, var(--brand-burgundy), var(--brand-oxblood));
    color: #F5EBE1; align-content: center;
    border: 1px solid var(--brand-burgundy);
  }
  .flip__face--back h3 { color: #FFFFFF; }
  .flip__face--back p { color: #CBD8F0; margin-top: var(--sp-2); }
  .flip__face--back .link-arrow { color: var(--brand-amber); margin-top: var(--sp-3); }

  /* Phones cannot reliably 3D-flip (parent transforms from scroll-reveal
     flatten preserve-3d). Tap opens the back as a panel under the photo. */
  @media (max-width: 56rem) {
    .flip { perspective: none; }
    .flip__inner {
      min-height: 0;
      transform: none !important;
      transform-style: flat;
      -webkit-transform-style: flat;
      transition: none;
    }
    .flip__face {
      position: relative;
      inset: auto;
      transform: none !important;
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }
    .flip__face--front { min-height: min(64vw, 18rem); }
    .flip__face--back {
      display: none;
      margin-top: 0.75rem;
    }
    .flip[data-flipped="true"] .flip__face--back { display: grid; }
    .flip__face--front::after {
      content: "More";
      position: relative; z-index: 4;
      margin-top: 0.75rem;
      font-size: 0.85rem; font-weight: 600; color: var(--brand-amber);
    }
    .flip[data-flipped="true"] .flip__face--front::after { content: "Less"; }
  }

  /* --- Marquee ------------------------------------------------------------ */
  .strip {
    position: relative; z-index: 4;
    overflow: hidden;
    padding-block: var(--sp-4);
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .strip__track {
    display: flex; width: max-content; align-items: center;
    animation: strip-scroll 42s linear infinite;
  }
  .strip__item {
    display: inline-flex; align-items: center; gap: 0.9rem;
    padding-inline: 1.1rem; white-space: nowrap;
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.1rem, 2.6vw, 1.9rem); color: var(--heading);
  }
  .strip__item::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-gold); flex: none;
  }
  @keyframes strip-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
  }

  /* --- Click sparks ------------------------------------------------------- */
  .spark {
    position: fixed; z-index: 480; pointer-events: none;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-gold);
    will-change: transform, opacity;
  }
  .ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgb(255 255 255 / 0.55), transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    will-change: transform, opacity;
  }
  .btn, .filters button { position: relative; overflow: hidden; }

  /* --- Layered depth on the hero art -------------------------------------- */
  .depth { transform-style: preserve-3d; will-change: transform; }
  .depth > * { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .photo img, .flip__inner, .slider__slide { transition: none !important; }
  .flip:hover .flip__inner { transform: none; }
  .flip[data-flipped="true"] .flip__inner { transform: rotateY(180deg); }
  .band__bg { transform: none !important; }
  .spark, .ripple { display: none !important; }
}

@layer components {
  /* --- The shared WebGL canvas -------------------------------------------
     One fixed, full-viewport canvas holding a single context. Every 3D graphic
     on the page is scissor-rendered into it at the position of its host div.
     Created by scripts/motion3d.js, so it cannot exist without the code that
     draws to and disposes of it. */
  #gl {
    position: fixed; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    height: 100dvh;
    pointer-events: none;
  }

  /* A scene host is a transparent window onto that canvas. It reserves layout
     space and defines the rectangle; it never paints anything itself. */
  .scene-host {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    opacity: 0; transition: opacity 1000ms var(--ease);
  }
  .scene-host[data-ready="true"] { opacity: 1; }
  .scene-host--inline { position: relative; inset: auto; width: 100%; }

  /* Anything drawn over a scene must be lifted above it, and the section
     itself must stay transparent or the fixed canvas is hidden behind it. */
  [data-scene-section] { background: transparent !important; }
  [data-scene-section] > *:not(.scene-host):not(.hero__video) { position: relative; z-index: 2; }
  .hero__copy, .hero__art, .hero__verses { position: relative; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  #gl, .scene-host { display: none; }
}