/* =============================================================================
   Pearls of Grace Ministries
   -----------------------------------------------------------------------------
   The design prototypes styled everything inline — a constraint of the
   prototype runtime, not a design intention. This file is that styling moved
   into one place. Values below are the handoff's design tokens; they were
   arrived at by measurement, so change them deliberately.

   Served as a plain stylesheet rather than through Vite: this host has no
   Node/npm, so there is no build step available.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Palette. Five properties carry the whole colourway; everything else
     references them. To switch the site to another brand colourway,
     change only these five and the og:image folder in layouts/app.blade.php.

     Currently: Magenta.

       Pearl white  #F16667  #FBCCCD  #A3057F  pog-mark-light.png
       Magenta      #F122C1  #F788DC  #850465  pog-mark-magenta.png
       Rose pink    #F8AFB2  #FEC1C8  #86163E  pog-mark-pearl.png
       Crimson      #EF2B51  #FE678E  #86163E  pog-mark-coral.png
       Mint         #3BEACB  #A4FEF1  #016173  pog-mark-mint.png
       Greyscale    #B9BABD  #EEEEEE  #311717  pog-mark-grey.png   tint #DDDEE0

     --accent-soft and --surface-tint are deliberately separate. Ink and
     hairlines take --accent-soft; anything filling a whole section or card
     takes --surface-tint. An earlier pass used one token for both and the
     About LEADERSHIP band painted as a full-bleed saturated pink.

     Alpha variants use color-mix() rather than rgba() so the tint follows
     the palette. Never let a property reference itself.

     Mint's --accent-deep is darkened from the brand book's #028AA5, which
     measured 3.49:1 on #EEEEEE. Greyscale carries an explicit --surface-tint
     because the derived value would equal the #EEEEEE sections either side
     and erase the band edge.
     ------------------------------------------------------------------ */
  --accent: #F122C1;
  --accent-soft: #F788DC;
  --accent-deep: #850465;
  --surface-tint: color-mix(in srgb, var(--accent-soft) 34%, #EEEEEE);
  --mark: url('../assets/pog-mark-magenta.png');

  /* Brand palette. Dark-first: deep plum grounds, pearl and rose as the
     light, the accent reserved for actions.

     The plum grounds are NOT tokenised — the darkness-to-light structure is
     the brand, and tinting the hero overlays with the palette was rejected.
     Same for the #EEEEEE / #FFFFFF surfaces and the body-copy ink below. */
  --plum-900: #2B0121;
  --plum-800: #3A0A2C;
  --plum-700: #400131;
  --plum-600: #660450;
  --oxblood-900: #311717;
  --oxblood-800: #3D1418;
  --oxblood-700: #4A1220;
  --pink-pale: #FBE9EA;
  --pearl: #EEEEEE;
  --white: #FFFFFF;
  --teal: #02BBD7;

  /* Ink. Never apply alpha to accent-coloured type — a 40%-opacity magenta
     numeral measured 2.2:1 and had to be fixed. */
  --ink-dark-88: rgba(238, 238, 238, 0.88);
  --ink-dark-85: rgba(238, 238, 238, 0.85);
  --ink-dark-82: rgba(238, 238, 238, 0.82);
  --ink-dark-80: rgba(238, 238, 238, 0.80);
  --ink-dark-78: rgba(238, 238, 238, 0.78);
  --ink-dark-75: rgba(238, 238, 238, 0.75);
  --ink-dark-62: rgba(238, 238, 238, 0.62);
  --ink-light-88: rgba(49, 23, 23, 0.88);
  --ink-light-85: rgba(49, 23, 23, 0.85);
  --ink-light-82: rgba(49, 23, 23, 0.82);
  --ink-light-80: rgba(49, 23, 23, 0.80);
  --ink-light-78: rgba(49, 23, 23, 0.78);
  --ink-light-70: rgba(49, 23, 23, 0.70);
  --ink-light-62: rgba(49, 23, 23, 0.62);

  /* Hairlines */
  --rule-dark-28: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  --rule-dark-22: color-mix(in srgb, var(--accent-soft) 22%, transparent);
  --rule-dark-20: color-mix(in srgb, var(--accent-soft) 20%, transparent);
  --rule-dark-18: color-mix(in srgb, var(--accent-soft) 18%, transparent);
  --rule-dark-16: color-mix(in srgb, var(--accent-soft) 16%, transparent);
  --rule-dark-14: color-mix(in srgb, var(--accent-soft) 14%, transparent);
  --rule-dark-12: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  --rule-light-18: color-mix(in srgb, var(--accent-deep) 18%, transparent);
  --rule-light-14: color-mix(in srgb, var(--accent-deep) 14%, transparent);
  --rule-light-12: color-mix(in srgb, var(--accent-deep) 12%, transparent);
  --rule-oxblood-12: rgba(49, 23, 23, 0.12);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* THERE IS EXACTLY ONE CONTENT WIDTH. The header inner box, every section,
     the four-word band and the footer all use --shell, unchanged. It scales
     with the viewport so the site does not become a narrow ribbon on a 4K
     display while section backgrounds and hero photos stay full-bleed. The
     minimum exceeds small-viewport widths, which is harmless for max-width:
     the element just fills its container.

     Two rules govern every horizontal edge, and both have been broken more
     than once:

     1. The gutter goes OUTSIDE the capped box, never inside. Every section,
        the header and the band are a padded outer element containing a
        centred inner box with no padding of its own. Reverse the order and
        content sits 22px further in than its neighbours above ~1284px.

     2. Narrower reading measures NEST inside the standard box as
        `max-width: min(100%, Npx)` on a left-aligned child. They are never
        centred on their own. Separate centred tiers were tried twice: because
        each tier centres independently, a narrower one's left edge lands
        further right than its neighbours' — at 3840px the hero began at
        x≈982 while the narrower block began at x=1240, a 280px step down the
        page. Raising the ceilings made it worse. Use .measure-* below. */
  --shell: clamp(1240px, 78vw, 1920px);
  --measure-form: min(100%, 1100px);
  --measure-prose: min(100%, 780px);
  --pad-y: clamp(52px, 8vw, 104px);
  --pad-x: 22px;
  --card-pad: clamp(22px, 3vw, 38px);
}

/* ---------------------------------------------------------------- reset --- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--plum-900);
  color: var(--pearl);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* <picture> is only a wrapper for format selection — it should not introduce a
   box of its own, so absolutely-positioned hero images keep resolving against
   the section and no stray inline space appears. */
picture { display: contents; }

a { color: var(--accent-soft); text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--plum-900); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Visible only to screen readers, and to keyboard users once focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--plum-900);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus {
  left: 0;
  color: var(--plum-900);
}

/* ------------------------------------------------------------- primitives - */

.shell { max-width: var(--shell); margin: 0 auto; }
/* Reading measures. These go INSIDE a .shell, left-aligned — never centred
   on their own. See the note in :root. */
.measure-form { max-width: var(--measure-form); }
.measure-prose { max-width: var(--measure-prose); }

.section { padding: var(--pad-y) var(--pad-x); }
.section-tall { padding: clamp(64px, 9vw, 120px) var(--pad-x); }

/* Grounds */
.ground-plum-900 { background: var(--plum-900); }
.ground-plum-800 { background: var(--plum-800); }
.ground-plum-700 { background: var(--plum-700); }
.ground-oxblood-900 { background: var(--oxblood-900); }
.ground-oxblood-800 { background: var(--oxblood-800); }
.ground-oxblood-700 { background: var(--oxblood-700); }
.ground-pink { background: var(--surface-tint); color: var(--oxblood-900); }
.ground-pearl { background: var(--pearl); color: var(--oxblood-900); }
.ground-light-gradient {
  background: linear-gradient(180deg, var(--pearl) 0%, var(--pink-pale) 100%);
  color: var(--oxblood-900);
}
.ground-mandate { background: linear-gradient(180deg, var(--oxblood-900) 0%, var(--plum-700) 100%); }

/* Type */
.eyebrow {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.eyebrow-dark { color: var(--accent-soft); }
.eyebrow-light { color: var(--accent-deep); }
.eyebrow-rose { color: var(--accent-deep); }

.label {
  margin: 0 0 16px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.h1-home {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}
.h1-home em { font-style: italic; color: var(--accent-soft); }

.h1 {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.12;
}
.h2-light { color: var(--plum-700); }

.lead {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--ink-dark-85);
}

.prose p {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-light-85);
}
.prose p:last-child { margin-bottom: 0; }
.prose-dark p { color: var(--ink-dark-80); }

.rule-coral {
  height: 1px;
  width: 72px;
  background: var(--accent);
  /* Explicit inline margins: an <hr> inherits `margin-inline: auto` from the
     UA stylesheet, which centres the rule in its column rather than leaving
     it flush left under the text. */
  margin: 0 0 22px;
  border: 0;
}

/* Buttons. Hover swaps coral to pink on dark, plum-700 to plum-600 on light. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 16px 32px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  cursor: pointer;
}
.btn-coral { background: var(--accent); color: var(--plum-900); font-weight: 600; }
.btn-coral:hover { background: var(--accent-soft); color: var(--plum-900); }
.btn-plum { background: var(--plum-700); color: var(--pearl); font-weight: 600; }
.btn-plum:hover { background: var(--plum-600); color: var(--pearl); }
.btn-outline-dark { border-color: color-mix(in srgb, var(--accent-soft) 45%, transparent); color: var(--pearl); }
.btn-outline-dark:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
.btn-outline-light { border-color: rgba(64, 1, 49, 0.45); color: var(--plum-700); }
.btn-outline-light:hover { border-color: var(--plum-700); background: rgba(255, 255, 255, 0.5); color: var(--plum-700); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.arrow-link-magenta { color: var(--accent-deep); font-size: 12.5px; }
.arrow-link-magenta:hover { color: var(--accent); }

/* Grids. Every multi-column grid uses this pattern so a final column is
   never stranded alone beside empty space. The minimums were tuned by
   measurement — verify at ~900px, ~700px and ~400px if you change them. */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 47%)), 1fr)); }
.grid-2-tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 47%)), 1fr)); }
.grid-2-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, 31%)), 1fr)); }
.grid-3-values { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, 30%)), 1fr)); }
.grid-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, 44%)), 1fr)); gap: clamp(32px, 5vw, 72px); }
.grid-split-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 44%)), 1fr)); gap: clamp(30px, 4vw, 64px); }

.card {
  padding: var(--card-pad);
  border-radius: 20px;
}
.card-dark {
  background: rgba(43, 1, 33, 0.5);
  border: 1px solid var(--rule-dark-20);
}
.card-dark h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: var(--accent-soft);
}
.card-dark p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-dark-80);
}
.card-white {
  background: var(--white);
  border: 1px solid var(--rule-oxblood-12);
  border-radius: 18px;
  padding: 28px;
}
.card-white h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--plum-700);
}
.card-white p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-light-78);
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  padding: clamp(56px, 8vw, 110px) var(--pad-x) clamp(44px, 6vw, 80px);
  background: var(--plum-900);
  isolation: isolate;
}
.hero-home { padding: clamp(64px, 10vw, 132px) var(--pad-x) clamp(56px, 8vw, 104px); }

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-wash { position: absolute; inset: 0; z-index: -1; }

/* The brand guide's "light line" device — a halftone dot field masked
   diagonally. It recurs on every hero. */
.hero-dots {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(251, 204, 205, 0.5) 1.1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
}
.hero-body { position: relative; max-width: var(--shell); margin: 0 auto; }

/* Photo bands — bottom-aligned text over a darkening wash. */
.band {
  position: relative;
  min-height: clamp(300px, 42vw, 520px);
  display: flex;
  align-items: flex-end;
  padding: clamp(36px, 6vw, 72px) var(--pad-x);
  background: var(--oxblood-900);
  isolation: isolate;
}
.band-short { min-height: clamp(260px, 36vw, 440px); padding: clamp(32px, 5vw, 68px) var(--pad-x); }
.band-tall { min-height: clamp(320px, 44vw, 540px); }
.band-body { max-width: var(--shell); margin: 0 auto; width: 100%; }
.band-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  color: var(--pearl);
  max-width: 26ch;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(43, 1, 33, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-dark-16);
}
/* Gutter outside, max-width inside — the same order the page sections use.
   Reversing these makes header content indent further than page content at
   any viewport above 1284px. */
.site-header-pad { padding: 12px var(--pad-x); }
.site-header-bar {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-width: 0;
}
/* The mark is a background-image, not an <img>, in both lockups. It changes
   with the palette, and a template-driven src would need editing alongside
   the five palette properties for a colourway switch to be complete.
   role="img" + aria-label on the element carries the accessible name. */
.lockup .mark { width: 46px; height: 46px; flex: none; background-image: var(--mark); background-size: contain; background-repeat: no-repeat; background-position: center; }
.lockup-text { display: block; line-height: 1; min-width: 0; }
.lockup-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  color: var(--pearl);
  white-space: nowrap;
}
.lockup-sub {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.4em;
  color: var(--accent-soft);
  margin-top: 6px;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.site-nav a {
  color: var(--pearl);
  font-weight: 400;
  border-bottom: 1.5px solid transparent;
  padding: 6px 0 5px;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent-soft); }
.site-nav a[aria-current="page"] {
  color: var(--accent-soft);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* About dropdown. The trigger is a button, not a link — the top level does
   not navigate. The panel hangs off a wrapper with a 14px transparent
   padding-top so the pointer can travel from trigger to panel without the
   hover breaking. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0 5px;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--pearl);
  white-space: nowrap;
  cursor: pointer;
}
.nav-group-trigger:hover { color: var(--accent-soft); }
.nav-group-trigger[data-active="true"] {
  color: var(--accent-soft);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.nav-group-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}
.nav-group-trigger[aria-expanded="true"] .nav-group-chevron {
  transform: translateY(1px) rotate(-135deg);
}
.nav-group-panel-wrap {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px;
  z-index: 60;
}
.nav-group[data-open="true"] .nav-group-panel-wrap { display: block; }
.nav-group-panel {
  min-width: 208px;
  padding: 8px;
  border-radius: 14px;
  background: var(--plum-700);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 20%, transparent);
  box-shadow: 0 18px 40px rgba(23, 0, 15, 0.45);
}
.nav-group-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  border-bottom: 0;
  font-size: 13.5px;
  white-space: nowrap;
}
.nav-group-panel a:hover { background: color-mix(in srgb, var(--accent-soft) 14%, transparent); }
.nav-group-panel a[aria-current="page"] { color: var(--accent-soft); font-weight: 600; }

.give-pill {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--plum-900);
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 100px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.give-pill:hover { background: var(--accent-soft); color: var(--plum-900); }

/* `.site-nav a` is more specific than `.give-pill` alone, so inside the nav it
   would otherwise win and strip the pill's horizontal padding and ink —
   collapsing GIVE into a coral blob. Restate the pill at matching specificity. */
.site-nav .give-pill {
  color: var(--plum-900);
  font-weight: 600;
  padding: 11px 22px;
  border-bottom: 0;
}
.site-nav .give-pill:hover { color: var(--plum-900); background: var(--accent-soft); }

.give-pill-compact { display: none; font-size: 12px; padding: 12px 18px; }

.nav-toggle {
  display: none;
  flex: none;
  width: 48px;
  height: 48px;
  place-items: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 40%, transparent);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle-bars { display: block; width: 20px; height: 11px; position: relative; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: var(--pearl);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }

.nav-panel {
  display: none;
  border-top: 1px solid var(--rule-dark-16);
  padding: 8px var(--pad-x) 18px;
}
.nav-panel[data-open="true"] { display: block; }
.nav-panel-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
.nav-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 0;
  font-size: 15px;
  color: var(--pearl);
  border-bottom: 1px solid var(--rule-dark-12);
}
.nav-panel a:hover { color: var(--accent-soft); }
.nav-panel a[aria-current="page"] { color: var(--accent-soft); font-weight: 600; }
.nav-panel-bar {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: transparent;
  flex: none;
}
.nav-panel a[aria-current="page"] .nav-panel-bar { background: var(--accent); }
/* About has no disclosure on mobile — a real heading, children indented. */
.nav-panel-heading {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.nav-panel a.nav-panel-child { padding-left: 15px; font-size: 14.5px; }
.nav-panel-bar-child { width: 2px; height: 13px; }
.nav-panel-message {
  color: var(--accent);
  border-bottom: 0 !important;
}

/* Breakpoint at 900px: above, the full horizontal nav; below, a hamburger
   beside a compact GIVE pill. */
@media (max-width: 899px) {
  .site-nav { display: none; }
  .give-pill-compact { display: inline-flex; }
  .nav-toggle { display: grid; }
}
@media (min-width: 900px) {
  .nav-panel { display: none !important; }
}

/* ---------------------------------------------------------------- footer -- */

/* Two nested grids, not one four-track grid. A single four-track grid reaches
   a 3-column state that strands the fourth column alone on a second row
   across the whole 700-900px tablet band. This yields 4 columns above ~950px,
   2x2 between ~950px and ~440px, and one column below. */
.site-footer {
  padding: clamp(52px, 7vw, 80px) var(--pad-x) 28px;
  background: var(--plum-900);
  border-top: 1px solid var(--rule-dark-16);
}
.footer-shell {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  gap: clamp(34px, 4.5vw, 52px);
}
.footer-outer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(30px, 4vw, 44px) clamp(24px, 3vw, 48px);
  align-items: start;
}
.footer-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(30px, 4vw, 44px) clamp(24px, 3vw, 44px);
  align-items: start;
}
.footer-lockup { display: inline-flex; align-items: center; gap: 14px; }
.footer-lockup .mark { width: 52px; height: 52px; flex: none; background-image: var(--mark); background-size: contain; background-repeat: no-repeat; background-position: center; }
.footer-lockup .lockup-name { font-size: 18px; font-weight: 500; }
.footer-lockup .lockup-sub { font-size: 8px; letter-spacing: 0.42em; margin-top: 7px; }

/* Four separate spans with no separator characters — an earlier version
   using "·" separators stranded a dangling separator at line ends. */
.footer-tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 20px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
}
.footer-col .label { color: var(--accent-soft); }
.footer-links { display: grid; gap: 12px; font-size: 13.5px; }
.footer-links a { color: var(--ink-dark-80); }
.footer-links a:hover { color: var(--accent); }
.footer-links a.footer-email { color: var(--accent-soft); word-break: break-word; }
.footer-links a.footer-message { color: var(--accent); }

.footer-legal {
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark-14);
  display: flex;
  flex-wrap: wrap;
  gap: 9px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-dark-62);
}
.footer-legal p { margin: 0; }
.footer-legal a { color: var(--ink-dark-62); }
.footer-legal a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .footer-legal { justify-content: center; text-align: center; }
  .footer-legal > p, .footer-legal > a { flex: 0 0 100%; }
  .footer-legal > p { line-height: 1; }
  .footer-legal-sep { display: none; }
  .footer-legal-charity { display: block; margin-top: 9px; }
}

/* ------------------------------------------------------------------ home -- */

/* The scripture now leads the hero on its own: a 1px gradient rule beside the
   quote, bracketing only the scripture — the CTA sits outside it. */
/* The button and the scripture sit in one row on a shared baseline, and
   collapse to a single column below roughly 700px of content width. */
.hero-row {
  margin-top: clamp(38px, 5vw, 66px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(30px, 4vw, 64px);
  align-items: end;
}
.hero-verse {
  margin: 0;
  display: grid;
  grid-template-columns: 1px minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.hero-verse-rule {
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100%);
}
.hero-verse p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.6;
  color: rgba(238, 238, 238, 0.94);
  text-wrap: pretty;
}
.hero-verse cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent-soft);
}
.hero-cta { justify-self: start; padding: 16px 34px; }

/* The band was originally a single full-bleed flex row, so its cells spanned
   the whole viewport while every other section stopped at the content cap —
   on a 4K display the mismatch was the most obvious break on the page. Outer
   div carries the gutter and the ground; inner div is the standard box. */
.word-band {
  padding: 0 var(--pad-x);
  background: var(--plum-800);
  border-top: 1px solid var(--rule-dark-28);
  border-bottom: 1px solid var(--rule-dark-28);
}
.word-band-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.word-band-inner > div {
  flex: 1 1 180px;
  padding: clamp(20px, 3vw, 32px) var(--pad-x);
  text-align: center;
  border-right: 1px solid var(--rule-dark-22);
}
.word-band-inner > div:last-child { border-right: 0; }
.word-band-inner span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--accent-soft);
}

/* The mandate section header stands alone above the four pillars, with no
   supporting copy, so the title carries the section on its own. */
.mandate-section { padding: clamp(64px, 9vw, 120px) var(--pad-x) clamp(44px, 6vw, 76px); }

/* Full container width, no max-width. text-wrap:pretty rather than balance —
   balance holds the lines short and defeats the point of a full-width thesis. */
.mandate-intro {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  max-width: 78ch;
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.75;
  color: var(--ink-dark-80);
  text-wrap: pretty;
}
.mandate-thesis {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.who-we-are p {
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.8;
  color: var(--ink-light-85);
}
.who-we-are p:last-child { margin-bottom: 0; }

/* Hairline-ruled rows, not cards. No closing rule under the last row — the
   between-item rules do the dividing, and a closing one boxed the list in and
   competed with the section edge. The section's bottom padding was cut to
   match at the same time so the visual gap matches the top. */
.pillars { margin-top: clamp(40px, 5vw, 68px); }
.pillar-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(14px, 3vw, 60px);
  align-items: baseline;
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-top: 1px solid var(--rule-dark-16);
}
.pillar-row:last-child { padding-bottom: 0; }
.pillar-row-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 22px);
}
.pillar-n {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.pillar-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--accent-soft);
}
.pillar-row-body { max-width: 54ch; }
.pillar-row .pillar-body {
  margin: 14px 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.02rem);
  line-height: 1.75;
  color: var(--ink-dark-80);
  text-wrap: pretty;
}

/* Scripture setting, shared by the mandate rows and the hero. The reference
   sits inline after the quote with a 12px gap — it previously butted straight
   against the closing quotation mark — and takes --accent-soft rather than
   --accent: on plum the saturated accent measured marginally under 4.5:1 at
   12px in the Magenta and Crimson palettes. */
.scripture {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.6;
  color: var(--accent-soft);
  text-wrap: pretty;
}
.scripture-ref {
  margin-left: 12px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--accent-soft);
}
/* On light grounds the scripture takes the deep accent instead. */
.scripture-light { color: var(--plum-700); }
.scripture-ref-light { color: var(--accent-deep); }

/* What We Believe — the seven values. The same editorial row pattern as the
   home mandate, inverted onto the light ground. The first row carries no top
   rule and no top padding: rows are hairline-separated, so the first rule
   would box the list in against the section edge. */
.value-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(14px, 3vw, 60px);
  align-items: baseline;
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-deep) 16%, transparent);
}
.value-row-first { padding-top: 0; border-top: 0; }
.value-row-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 22px);
}
.value-n {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
}
.value-row h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--plum-700);
}
.value-row-body { max-width: 54ch; }
.value-body {
  margin: 14px 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.02rem);
  line-height: 1.75;
  color: var(--ink-light-85);
  text-wrap: pretty;
}

/* Read-next band: heading in the left cell, buttons in the right, sharing a
   baseline. */
.read-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
}
.read-next .btn-row { margin-top: 0; justify-self: start; }

/* Closes the pearls section as a Playfair statement. */
.pearls-closing {
  margin: clamp(40px, 5vw, 66px) 0 0;
  max-width: 60ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--accent-soft);
  text-wrap: pretty;
}

/* Cards are flex columns so the CTA can be pinned with margin-top:auto —
   all three arrows must align regardless of body length. */
.door {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 20px;
  border: 1px solid var(--rule-dark-18);
  color: var(--pearl);
}
.door:hover { border-color: var(--accent); color: var(--pearl); }
.door img {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 26px;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 30%, transparent);
}
.door-eyebrow { display: block; font-size: 11px; letter-spacing: 0.26em; color: var(--accent-soft); }
.door-title {
  display: block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}
.door-body {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dark-75);
}
.door .arrow-link { margin-top: auto; padding-top: 22px; }

/* ----------------------------------------------------------------- about -- */

/* Founder's message. The opening sentence is set as a lead; a hairline-topped
   signature block closes it. */
.founder-lead {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--plum-700);
  text-wrap: pretty;
}
.signature {
  margin-top: clamp(26px, 3.2vw, 36px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--rule-light-18);
}
.signature-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  color: var(--plum-700);
}
.signature-role {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
}

/* "Why we exist": eyebrow and heading in the left cell, the two paragraphs in
   the right, so the rationale reads across rather than down. */
.why-exist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(30px, 4.5vw, 72px);
  align-items: start;
}

/* "What we are responding to" sits under it in the same section. Bare
   columns, not cards — the three read as one list. */
.responding { margin-top: clamp(40px, 5.5vw, 76px); }
.needs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: clamp(22px, 3vw, 48px);
}
.needs h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
  color: var(--accent-soft);
}
.needs p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-dark-82);
  text-wrap: pretty;
}

.story-figure { margin: 0; display: flex; flex-direction: column; }
.story-frame {
  position: relative;
  flex: 1;
  min-height: clamp(320px, 40vw, 520px);
  border-radius: 20px;
  overflow: hidden;
}
.story-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-figure figcaption {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-light-70);
}

.statement { padding: clamp(28px, 3.2vw, 40px); border-radius: 20px; }
.statement .label { color: var(--accent-soft); font-size: 11px; letter-spacing: 0.26em; margin-bottom: 14px; }
.statement-vision {
  background: var(--plum-700);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.35;
  color: var(--pearl);
}
.statement-mission {
  background: var(--oxblood-800);
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(238, 238, 238, 0.9);
}
.statement p:last-child { margin: 0; }

.address-card {
  padding: 26px 28px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--rule-light-14);
}
.address-card .label { color: var(--accent-deep); font-size: 10px; letter-spacing: 0.24em; margin-bottom: 10px; }
.address-card p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-light-85); }

.founder {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.5vw, 28px);
  align-items: flex-start;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--rule-light-12);
}
/* Deliberate placeholder — real portraits are pending. */
.founder-portrait {
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-tint);
  border: 1px dashed color-mix(in srgb, var(--accent-deep) 30%, transparent);
}
.founder-portrait span {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--accent-deep) 65%, transparent);
  text-align: center;
  line-height: 1.5;
}
.founder-detail { flex: 1 1 150px; min-width: 0; }
.founder-role { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.24em; color: var(--accent-deep); }
.founder-name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  color: var(--plum-700);
}
.founder-bio { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-light-80); }

.governance {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rule-light-18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  align-items: baseline;
}
.governance p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-light-85); }
.governance a { font-size: 14.5px; color: var(--accent-deep); }
.governance a:hover { color: var(--accent); }

/* ------------------------------------------------------------ programmes -- */

.anchor-nav {
  background: rgba(43, 1, 33, 0.94);
  border-top: 1px solid var(--rule-dark-16);
  border-bottom: 1px solid var(--rule-dark-16);
}
.anchor-nav div {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.anchor-nav a { color: rgba(238, 238, 238, 0.72); }
.anchor-nav a:hover { color: var(--accent); }

.theme {
  padding: clamp(52px, 7vw, 96px) var(--pad-x);
  border-bottom: 1px solid var(--rule-dark-14);
  scroll-margin-top: 90px;
}
.theme-grid {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(340px, 46%)), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.theme-copy { display: flex; flex-direction: column; }
.theme-n { display: block; font-size: 10px; letter-spacing: 0.26em; color: var(--accent-soft); }
.theme-copy h2 {
  margin: 14px 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.12;
  text-wrap: pretty;
}
.theme-body {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-dark-82);
  max-width: 44ch;
}
.theme-initiatives-label {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--accent-soft);
}
.theme-items { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.theme-items li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule-dark-18);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dark-88);
}
.theme-items li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-3px);
}
/* Label and its gloss stack in one flex child so the dot stays on the first
   line rather than becoming a sibling of the second. */
.theme-item-text { display: block; min-width: 0; }
.theme-item-label { display: block; }
.theme-item-note {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dark-62);
  text-wrap: pretty;
}
/* Programme photo cell — do not change the sizing.
   This previously read `min-height: clamp(280px, 38vw, 100%)` with the image
   absolutely positioned inside. A percentage inside clamp() for min-height
   resolves against a parent of auto height, so Safari on iOS discarded the
   whole declaration, the cell collapsed to zero, and the absolutely-
   positioned image overlapped the following programme — while Chrome
   rendered it correctly.
   No percentages in a min-height: clamp(), and the image stays in normal
   flow so it cannot escape its box if a browser computes the height
   differently. */
.theme-frame {
  align-self: stretch;
  display: flex;
  min-height: clamp(260px, 38vw, 420px);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(238, 238, 238, 0.05);
}
.theme-frame picture { display: block; flex: 1 1 auto; min-width: 0; }
.theme-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 38vw, 420px);
  object-fit: cover;
}

.closing-cta {
  padding: clamp(52px, 7vw, 96px) var(--pad-x);
  background: var(--oxblood-900);
}
.closing-cta div {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.closing-cta h2 { max-width: 20ch; }

/* ------------------------------------------------------------------ give -- */

.way {
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--rule-light-12);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Deep-linked from the header, footer and home doors — clear the sticky bar. */
  scroll-margin-top: 90px;
}
.way-head { display: flex; align-items: baseline; gap: 14px; }
.way-n {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--accent-deep);
}
.way-tag { font-size: 10px; letter-spacing: 0.24em; color: var(--accent-deep); }
.way h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.2;
  color: var(--plum-700);
}
.way p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-light-82); }
.way .arrow-link-magenta { margin-top: auto; padding-top: 12px; }

.giftaid { scroll-margin-top: 90px; }
.giftaid-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.giftaid-steps li { display: flex; gap: 16px; align-items: flex-start; }
.giftaid-steps .step-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--plum-900);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.giftaid-steps span:last-child { font-size: 14.5px; line-height: 1.65; color: var(--ink-light-88); }
.giftaid-card {
  background: var(--white);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--rule-light-14);
}
.giftaid-card .label { color: var(--accent-deep); margin-bottom: 20px; }
.giftaid-return {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-light-14);
}
.giftaid-return .label { margin-bottom: 8px; }
.giftaid-return p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-light-88); }
.giftaid-return a { color: var(--accent-deep); word-break: break-word; }

/* --------------------------------------------------------------- contact -- */

.enquiry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.enquiry-form {
  padding: clamp(26px, 3vw, 38px);
  border-radius: 22px;
  background: rgba(238, 238, 238, 0.05);
  border: 1px solid var(--rule-dark-20);
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 8px; font-size: 11px; letter-spacing: 0.16em; color: var(--accent-soft); }
.field input,
.field textarea,
.subject-trigger {
  background: rgba(43, 1, 33, 0.6);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 25%, transparent);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--pearl);
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus,
.subject-trigger:focus {
  border-color: var(--accent);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(238, 238, 238, 0.45); }

.field-error {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* The native select could not be styled to match, so it is a button plus a
   listbox with a hidden input mirroring the selection. */
.subject-field { display: grid; gap: 8px; position: relative; }
.subject-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.subject-trigger:hover { border-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.subject-trigger > span:first-child { flex: 1; min-width: 0; }
.subject-chevron {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--accent-soft);
  border-bottom: 1.5px solid var(--accent-soft);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 160ms ease;
}
.subject-trigger[aria-expanded="true"] .subject-chevron { transform: rotate(-135deg); }

.subject-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  padding: 6px;
  border-radius: 12px;
  background: var(--plum-800);
  border: 1px solid var(--rule-dark-28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  max-height: 280px;
  overflow-y: auto;
}
.subject-panel[data-open="true"] { display: block; }
.subject-panel button {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--pearl);
  font-weight: 400;
  cursor: pointer;
}
.subject-panel button:hover { background: color-mix(in srgb, var(--accent-soft) 14%, transparent); }
.subject-panel button[aria-selected="true"] { color: var(--accent-soft); font-weight: 600; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin: 0; font-size: 13px; line-height: 1.6; color: var(--teal); }
.form-status-error { color: var(--accent); }

.office { display: grid; gap: 10px; padding: clamp(18px, 2.4vw, 26px) 0; border-top: 1px solid var(--rule-dark-20); }
.office-tag { margin: 0; font-size: 10px; letter-spacing: 0.2em; color: color-mix(in srgb, var(--accent-soft) 85%, transparent); }
.office p:not(.office-tag) { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pearl); }

.route-card { padding: 28px; border-radius: 18px; background: var(--surface-tint); color: var(--oxblood-900); }
.route-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--plum-700);
}
.route-card p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-light-82); }

/* --------------------------------------------------------------- privacy -- */

.privacy-hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) var(--pad-x) clamp(40px, 5vw, 64px);
  background: linear-gradient(140deg, var(--plum-700) 0%, var(--plum-900) 62%);
}
.privacy-clauses { display: grid; gap: clamp(30px, 4vw, 44px); }
.privacy-clauses h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  color: var(--plum-700);
}
.privacy-clauses p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--ink-light-85); }
.privacy-callout {
  margin-top: clamp(38px, 5vw, 56px);
  padding: clamp(24px, 3vw, 32px);
  border-radius: 18px;
  background: var(--surface-tint);
}
.privacy-callout p:first-of-type { margin: 0 0 20px; font-size: 15.5px; line-height: 1.75; color: var(--ink-light-88); }
.privacy-updated {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-light-62);
}

/* ---------------------------------------------------------------- errors -- */

.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 104px) var(--pad-x);
}
.error-code { margin: 0 0 18px; font-size: 11px; letter-spacing: 0.3em; color: var(--accent-soft); }