/* ==========================================================================
   Life NOW Global Mission — design system
   Built by Doxa Digital

   Loaded on every page. Elementor sections use these classes, and the custom
   LNGM widgets output this markup, so restyling anything here restyles it
   everywhere at once.

   Colour, spacing and radius are all CSS custom properties in section 1 —
   change a value there and it propagates across the whole site.
   ========================================================================== */


/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Blue ink ramp — every value has B > G > R */
  --ink:    #122A4D;   /* 14.3:1 on white */
  --deep:   #0E2340;   /* 15.8:1 */
  --body-t: #44577A;   /*  7.3:1 */
  --muted:  #5C6A86;   /*  5.2:1 */

  /* Surfaces */
  --paper:  #FFFFFF;
  --mist:   #F4F8FF;
  --tint:   #E7F0FF;
  --tint-2: #D5E4FB;
  --edge:   #DCE7F9;
  --edge-2: #C8D9F2;

  /* Primary blue */
  --blue:      #2A5FCC;   /* white on it = 5.8:1 */
  --blue-dk:   #1E4FB0;   /* accent text on light = 7.5:1 */
  --blue-lt:   #7FA8EE;
  --blue-glow: rgba(42, 95, 204, 0.18);

  /* Warm call-to-action */
  --amber:    #F2A03D;    /* ink on it = 6.7:1 */
  --amber-hi: #FFB55C;
  --amber-dp: #9A5510;

  /* On dark */
  --on-dark:      #FFFFFF;
  --on-dark-soft: #C4D6F0;   /* 8.6:1 on ink */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --wrap: 1220px;
  --narrow: 720px;
  --bay: clamp(3.5rem, 7.5vw, 7rem);

  /* Cards are rounded; images stay near-square-cornered */
  --r-card: 16px;
  --r-btn: 10px;
  --r-img: 10px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(18, 42, 77, 0.06), 0 4px 12px rgba(18, 42, 77, 0.05);
  --sh-2: 0 2px 6px rgba(18, 42, 77, 0.07), 0 14px 32px -12px rgba(18, 42, 77, 0.16);
  --sh-3: 0 8px 20px rgba(18, 42, 77, 0.1), 0 30px 60px -22px rgba(18, 42, 77, 0.26);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-t);
  font-family: var(--body);
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.1rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
a { color: inherit; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }

/* --- 3. Typography ------------------------------------------------------ */

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -0.038em; }
h2, .h2 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.022em; }
h4, .h4 { font-size: 1.02rem; }

.lede { font-size: clamp(1.08rem, 0.7vw + 0.94rem, 1.3rem); line-height: 1.6; }

/* --- 4. Badges & chips — filled, never bare text ------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--blue-dk);
  font-family: var(--display);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.badge::before {
  content: "";
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: var(--blue);
}
.badge--amber { background: #FDF0DC; color: var(--amber-dp); }
.badge--amber::before { background: var(--amber-dp); }
.badge--onDark { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.badge--onDark::before { background: var(--amber); }
.badge--solid { background: var(--blue); color: #FFFFFF; }
.badge--solid::before { background: #FFFFFF; }

/* Numbered marker for steps and features */
.numchip {
  display: inline-grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--blue) 0%, #3F79E6 100%);
  color: #FFFFFF;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 6px 16px -6px var(--blue-glow);
  flex-shrink: 0;
}
.numchip--amber { background: linear-gradient(150deg, var(--amber-dp) 0%, #D98A24 100%); }

/* Icon chip */
.icochip {
  display: inline-grid; place-items: center;
  width: 3.2rem; height: 3.2rem;
  border-radius: 16px;
  background: var(--tint);
  color: var(--blue-dk);
  margin-bottom: 1.1rem;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.icochip svg { width: 1.5rem; height: 1.5rem; }
.card:hover .icochip { background: var(--blue); color: #FFFFFF; transform: translateY(-3px) rotate(-4deg); }

/* --- 5. Layout ---------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--narrow); }

.bay { position: relative; padding-block: var(--bay); }
.bay--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.bay--mist { background: var(--mist); }
.bay--tint { background: var(--tint); }

/* Soft blue wash, used to break up long light stretches */
.bay--wash {
  background:
    radial-gradient(70% 90% at 12% 0%, #EDF3FF 0%, transparent 60%),
    radial-gradient(60% 80% at 95% 100%, #FDF3E4 0%, transparent 62%),
    var(--paper);
}

.bay--ink {
  background: linear-gradient(155deg, var(--deep) 0%, #1A3A66 55%, #14304F 100%);
  color: var(--on-dark-soft);
}
.bay--ink h1, .bay--ink h2, .bay--ink h3, .bay--ink h4, .bay--ink .display { color: var(--on-dark); }
.bay--ink .lede { color: var(--on-dark-soft); }

.head { max-width: 30ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.head--wide { max-width: 40ch; }
.head--center { margin-inline: auto; text-align: center; }
.head p:last-child { margin-bottom: 0; }

.duo { display: grid; gap: clamp(1.8rem, 4vw, 3.8rem); align-items: center; }
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1.08fr 0.92fr; }
  .duo--tip { grid-template-columns: 0.88fr 1.12fr; }
  .duo--flip > :first-child { order: 2; }
  .duo--top { align-items: start; }
}

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 50rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack > * + * { margin-top: 1.1em; }

/* --- 6. Cards — the core surface ---------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--edge-2); }
.card h3 { margin-bottom: 0.55rem; }
.card > :last-child { margin-bottom: 0; }

.card--tint { background: var(--tint); border-color: transparent; }
.card--mist { background: var(--mist); border-color: transparent; }
.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: var(--sh-1); }

.card--ink {
  background: linear-gradient(150deg, var(--ink) 0%, #1D3F6E 100%);
  border-color: transparent;
  color: var(--on-dark-soft);
}
.card--ink h2, .card--ink h3, .card--ink h4 { color: var(--on-dark); }

/* A card with a coloured top edge instead of a hairline rule */
.card--capped { overflow: hidden; }
.card--capped::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lt));
}
.card--capped.is-amber::before { background: linear-gradient(90deg, var(--amber-dp), var(--amber)); }

.card ul { list-style: none; padding: 0; margin: 0; }
.card ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; font-size: 0.97rem; line-height: 1.55; }
.card ul li:last-child { margin-bottom: 0; }
.card ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem;
  border-radius: 4px;
  background: var(--tint-2);
}
.card--ink ul li::before { background: rgba(255, 255, 255, 0.28); }

/* --- 7. Buttons --------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.05rem;
  padding: 0.85rem 1.7rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--display);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex-shrink: 0; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--amber {
  background: linear-gradient(140deg, var(--amber) 0%, #E89526 100%);
  color: var(--ink);
  box-shadow: 0 6px 18px -7px rgba(184, 104, 26, 0.7);
}
.btn--amber:hover { background: linear-gradient(140deg, var(--amber-hi) 0%, var(--amber) 100%); box-shadow: 0 12px 26px -9px rgba(184, 104, 26, 0.8); }

.btn--blue {
  background: linear-gradient(140deg, var(--blue) 0%, #1E4FB0 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 18px -7px var(--blue-glow);
}
.btn--blue:hover { box-shadow: 0 12px 26px -9px rgba(42, 95, 204, 0.55); }

.btn--soft { background: var(--tint); color: var(--blue-dk); }
.btn--soft:hover { background: var(--tint-2); }

.btn--line { border-color: var(--edge-2); background: var(--paper); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }

.btn--onDark { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #FFFFFF; }
.btn--onDark:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.pull {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem 0.4rem 0;
  font-family: var(--display); font-size: 0.92rem; font-weight: 700;
  color: var(--blue-dk); text-decoration: none;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.pull:hover { gap: 0.9rem; color: var(--ink); }
.bay--ink .pull, .card--ink .pull { color: var(--amber); }
.bay--ink .pull:hover { color: #FFFFFF; }

/* --- 8. Progress + skip ------------------------------------------------- */

.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--amber));
  z-index: 150; pointer-events: none;
}
.skip {
  position: fixed; left: 1rem; top: -6rem; z-index: 300;
  padding: 0.85rem 1.3rem; background: var(--ink); color: #FFFFFF;
  border-radius: var(--r-btn); font-family: var(--display); font-weight: 700;
  text-decoration: none; transition: top 0.2s var(--ease);
}
.skip:focus { top: 1rem; }

/* --- 9. Header ---------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--edge); box-shadow: 0 4px 20px rgba(18, 42, 77, 0.06); }
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 0.8rem; }

.mark { display: block; flex-shrink: 0; line-height: 0; }
.mark img { width: auto; height: 74px; max-width: 260px; object-fit: contain; transition: height 0.3s var(--ease); }
.is-stuck .mark img { height: 58px; }

@media (max-width: 26rem) {
  .masthead-in { gap: 0.7rem; }
  .mark img { height: 52px; max-width: 168px; }
  .is-stuck .mark img { height: 46px; }
  .hamburger { padding: 0.55rem 0.78rem; font-size: 0.71rem; letter-spacing: 0.05em; }
}

.nav { display: none; }
@media (min-width: 66rem) { .nav { display: block; } }
.nav-row { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav-cell { position: relative; }

.nav-a {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 2.7rem; padding: 0.5rem 0.85rem;
  background: none; border: 0; border-radius: var(--r-pill);
  font-family: var(--display); font-size: 0.91rem; font-weight: 600;
  color: var(--body-t); text-decoration: none; cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav-a:hover { color: var(--blue-dk); background: var(--tint); }
.nav-a[aria-current="page"] { color: var(--blue-dk); background: var(--tint); }
.nav-a .chev { width: 0.56rem; transition: transform 0.25s var(--ease); }
.nav-cell.is-open > .nav-a .chev { transform: rotate(180deg); }

.subnav {
  position: absolute; top: calc(100% + 0.4rem); left: 0;
  min-width: 15rem; margin: 0; padding: 0.45rem; list-style: none;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-cell.is-open > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a {
  display: block; min-height: 2.6rem; padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-family: var(--display); font-size: 0.89rem; font-weight: 600;
  color: var(--body-t); text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), padding-left 0.18s var(--ease);
}
.subnav a:hover { background: var(--tint); color: var(--blue-dk); padding-left: 1.15rem; }
.subnav a[aria-current="page"] { background: var(--tint); color: var(--blue-dk); }

.masthead-cta { display: none; }
@media (min-width: 66rem) { .masthead-cta { display: inline-flex; } }

.hamburger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.85rem; padding: 0.6rem 1.05rem;
  background: linear-gradient(140deg, var(--blue) 0%, #1E4FB0 100%);
  border: 0; border-radius: var(--r-btn);
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; cursor: pointer;
}
@media (min-width: 66rem) { .hamburger { display: none; } }
.bars { display: grid; gap: 4px; width: 16px; }
.bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.28s var(--ease), opacity 0.2s; }
.hamburger[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- 10. Drawer --------------------------------------------------------- */

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 200;
  width: min(25rem, 90vw); padding: 1.1rem var(--gutter) 3rem;
  background: var(--paper); border-left: 1px solid var(--edge);
  overflow-y: auto;
  transform: translateX(103%); visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0.4s;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer-top { display: flex; justify-content: flex-end; margin-bottom: 1.1rem; }
.drawer-x {
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
  background: var(--tint); border: 0; border-radius: var(--r-btn);
  color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.drawer-x:hover { background: var(--tint-2); }
.drawer-nav { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.drawer-nav > li + li { margin-top: 0.3rem; }
.drawer-nav a, .drawer-nav .fold {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 3.1rem; padding: 0.75rem 0.9rem;
  background: var(--mist); border: 0; border-radius: 12px;
  text-align: left; cursor: pointer;
  font-family: var(--display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.drawer-nav a:hover, .drawer-nav .fold:hover { background: var(--tint); color: var(--blue-dk); }
.drawer-nav a[aria-current="page"] { background: var(--tint); color: var(--blue-dk); }
.fold .chev { width: 0.7rem; transition: transform 0.25s var(--ease); }
.fold[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fold-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease); }
.fold-panel ul { list-style: none; margin: 0.3rem 0 0; padding: 0 0 0.3rem 0.6rem; }
.fold-panel li + li { margin-top: 0.2rem; }
.fold-panel a { min-height: 2.8rem; font-family: var(--body); font-size: 0.98rem; font-weight: 600; background: transparent; }

.scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(14, 35, 64, 0.5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.scrim.is-open { opacity: 1; visibility: visible; }
body.locked { overflow: hidden; }

/* --- 11. Heroes — one variant per page type ----------------------------- */

.hero { position: relative; overflow: hidden; }

/* a) Split hero — home */
.hero--split { padding-block: clamp(2.2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero--split .hero-in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .hero--split .hero-in { grid-template-columns: 1.04fr 0.96fr; } }
.hero h1 { margin-bottom: 0.35em; }
.hero .lede { max-width: 44ch; }
.hero .btns { margin-top: 1.7rem; }

/* Decorative blurred blobs behind the hero */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
  z-index: -1; pointer-events: none;
}
.hero::before { width: 34rem; height: 34rem; top: -14rem; right: -10rem; background: rgba(127, 168, 238, 0.28); }
.hero::after { width: 24rem; height: 24rem; bottom: -12rem; left: -8rem; background: rgba(242, 160, 61, 0.18); }

/* b) Banner hero — interior pages, tinted panel */
.hero--banner {
  padding-block: clamp(2.4rem, 5vw, 4.2rem);
  background:
    radial-gradient(60% 120% at 88% 10%, #E3EDFF 0%, transparent 60%),
    radial-gradient(50% 110% at 5% 90%, #FDF1DE 0%, transparent 58%),
    var(--mist);
  border-bottom: 1px solid var(--edge);
}
/* Tone variants so interior pages do not all open identically */
.hero--banner.tone-a {
  background:
    radial-gradient(55% 120% at 92% 15%, #DCE9FF 0%, transparent 62%),
    radial-gradient(45% 100% at 0% 95%, #FDF1DE 0%, transparent 60%), var(--mist);
}
.hero--banner.tone-b {
  background:
    radial-gradient(70% 130% at 15% 0%, #E6EFFF 0%, transparent 58%),
    radial-gradient(40% 90% at 100% 100%, #E9F3FF 0%, transparent 60%), #FBFCFF;
}
.hero--banner.tone-c {
  background:
    radial-gradient(60% 110% at 50% 0%, #FDF2E1 0%, transparent 60%),
    radial-gradient(55% 110% at 90% 100%, #E4EDFF 0%, transparent 58%), var(--mist);
}
.hero--banner.tone-d { background: var(--tint); }

.hero--banner h1 { max-width: 18ch; }
.hero--banner .lede { max-width: 52ch; margin-top: 0.9rem; }

/* c) Dark hero — donations */
.hero--ink {
  padding-block: clamp(2.6rem, 5.5vw, 4.6rem);
  background: linear-gradient(150deg, var(--deep) 0%, #1C3E6E 60%, #17355C 100%);
  color: var(--on-dark-soft);
}
.hero--ink h1 { color: #FFFFFF; }
.hero--ink .lede { color: var(--on-dark-soft); }
.hero--ink::before { background: rgba(127, 168, 238, 0.22); }
.hero--ink::after { background: rgba(242, 160, 61, 0.22); }

/* d) Letter hero — facilitator message */
.hero--letter { padding-block: clamp(2.4rem, 5vw, 4rem); background: var(--mist); border-bottom: 1px solid var(--edge); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  font-size: 0.82rem; color: var(--muted);
}
.crumbs a { color: var(--blue-dk); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 0.45rem; opacity: 0.5; }
.hero--ink .crumbs { color: var(--on-dark-soft); }
.hero--ink .crumbs a { color: #FFFFFF; }

/* --- 12. Images — contained, varied, never full width ------------------- */

.fig { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--tint); }
.fig img { width: 100%; height: auto; object-fit: cover; display: block; }
.fig--portrait img { aspect-ratio: 4 / 5; }
.fig--tall     img { aspect-ratio: 3 / 4; }
.fig--column   img { aspect-ratio: 2 / 3; }
.fig--square   img { aspect-ratio: 1 / 1; }
.fig--land     img { aspect-ratio: 3 / 2; }
.fig--wide     img { aspect-ratio: 16 / 9; }
.fig--shadow { box-shadow: var(--sh-3); }

/* Hero image cluster: one large plate, one small inset overlapping it */
.cluster { position: relative; padding-bottom: clamp(2rem, 5vw, 4rem); padding-right: clamp(1rem, 3vw, 2.5rem); }
.cluster__main { border-radius: 18px; overflow: hidden; box-shadow: var(--sh-3); }
.cluster__inset {
  position: absolute; right: 0; bottom: 0;
  width: 44%; max-width: 15rem;
  border: 6px solid var(--paper);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--sh-2);
}
.cluster__tagcard {
  position: absolute; left: -0.5rem; top: 8%;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: var(--paper); border-radius: 12px; box-shadow: var(--sh-2);
  font-family: var(--display); font-size: 0.82rem; font-weight: 700; color: var(--ink);
}
@media (max-width: 34rem) { .cluster__tagcard { display: none; } }
.cluster__tagcard .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

figure { margin: 0; }
.caption { margin-top: 0.7rem; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }

/* --- 13. Stat cards ----------------------------------------------------- */

.stat-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.stat-n {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
}
.stat-l { font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bay--ink .stat-card { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.bay--ink .stat-n { color: var(--amber); }
.bay--ink .stat-l { color: var(--on-dark-soft); }

/* --- 14. Giving cards --------------------------------------------------- */

.give {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.give::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--tint) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.give:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--blue-lt); }
.give:hover::before { opacity: 1; }
.give > * { position: relative; }
.give-sum {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: var(--blue-dk); margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.give h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
.give p { font-size: 0.94rem; line-height: 1.6; }
.give-foot { margin-top: auto; padding-top: 1.2rem; }

/* --- 15. Feature blocks (What We Do) ------------------------------------ */

.feature {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 20px;
  box-shadow: var(--sh-1);
}
@media (min-width: 58rem) {
  .feature { grid-template-columns: 0.95fr 1.05fr; }
  .feature--flip > :first-child { order: 2; }
}
.feature--tint { background: var(--tint); border-color: transparent; }
.feature--mist { background: var(--mist); border-color: transparent; }
.feature-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.feature-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* --- 16. Timeline (Events) ---------------------------------------------- */

.timeline { position: relative; display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.tl-item {
  position: relative;
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tl-item:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.tl-year {
  display: inline-grid; place-items: center;
  min-width: 4.2rem; padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--blue) 0%, #1E4FB0 100%);
  color: #FFFFFF;
  font-family: var(--display); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em;
}
.tl-year--amber { background: linear-gradient(140deg, var(--amber-dp) 0%, #D98A24 100%); }
.tl-item h3 { margin: 0; font-size: 1.15rem; }
.tl-meta {
  display: inline-block; margin-top: 0.2rem;
  padding: 0.28rem 0.7rem; border-radius: var(--r-pill);
  background: var(--mist); color: var(--muted);
  font-family: var(--display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
}
.tl-item video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); object-fit: cover; border-radius: 12px; }

/* --- 17. Gallery mosaic ------------------------------------------------- */

.mosaic { display: grid; gap: clamp(0.6rem, 1.3vw, 1rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) { .mosaic { grid-template-columns: repeat(6, 1fr); } }
.tile {
  position: relative; display: block; width: 100%;
  padding: 0; margin: 0; border: 0;
  background: var(--tint); border-radius: 12px;
  overflow: hidden; cursor: zoom-in;
  box-shadow: var(--sh-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tile img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 2; transition: transform 0.7s var(--ease-out); }
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 35, 64, 0.82), transparent 55%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile-cap {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem; z-index: 2;
  font-family: var(--display); font-size: 0.84rem; font-weight: 600; text-align: left;
  color: #FFFFFF; opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }
@media (min-width: 46rem) {
  .tile--wide   { grid-column: span 4; } .tile--wide img   { aspect-ratio: 16 / 9; }
  .tile--tall   { grid-column: span 2; } .tile--tall img   { aspect-ratio: 3 / 4; }
  .tile--square { grid-column: span 2; } .tile--square img { aspect-ratio: 1 / 1; }
  .tile--land   { grid-column: span 3; } .tile--land img   { aspect-ratio: 3 / 2; }
  .tile--col    { grid-column: span 2; } .tile--col img    { aspect-ratio: 2 / 3; }
}

.lb {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 35, 64, 0.96);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-width: 100%; max-height: 80vh; border-radius: 12px; }
.lb-cap { margin-top: 1rem; text-align: center; color: var(--on-dark-soft); font-size: 0.92rem; }
.lb-x {
  position: absolute; top: 1.3rem; right: 1.3rem;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16); border: 0; border-radius: var(--r-btn);
  color: #FFFFFF; font-size: 1.55rem; cursor: pointer;
}
.lb-x:hover { background: rgba(255, 255, 255, 0.3); }

/* --- 18. Locations ------------------------------------------------------ */

.loc-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.loc-head { display: flex; align-items: flex-start; gap: 0.9rem; padding: clamp(1.2rem, 2.2vw, 1.6rem); }
.loc-head h3 { margin: 0 0 0.15rem; font-size: 1.15rem; }
.loc-sub { margin: 0; font-size: 0.88rem; color: var(--muted); }
.loc-pin {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.7rem; height: 2.7rem; border-radius: 12px;
  background: var(--tint); color: var(--blue-dk);
}
.loc-pin svg { width: 1.25rem; height: 1.25rem; }
.loc-card iframe { width: 100%; height: clamp(14rem, 26vw, 18rem); border: 0; background: var(--tint); display: block; }
.loc-foot { padding: 1rem clamp(1.2rem, 2.2vw, 1.6rem); border-top: 1px solid var(--edge); }

/* --- 19. Contact cards -------------------------------------------------- */

.reach-card { display: flex; align-items: flex-start; gap: 0.95rem; padding: clamp(1.1rem, 2vw, 1.5rem); background: var(--paper); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--sh-1); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.reach-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.reach-label { margin: 0 0 0.25rem; font-family: var(--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.reach-value { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); }
.reach-card a { text-decoration: none; }
.reach-card a:hover { color: var(--blue-dk); }

/* --- 20. Forms ---------------------------------------------------------- */

.sheet { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--paper); border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--sh-2); }

.f { margin-bottom: 1.3rem; }
.f label, .f legend { display: block; padding: 0; margin-bottom: 0.42rem; font-family: var(--display); font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.f fieldset { border: 0; padding: 0; margin: 0; }
.need { color: var(--amber-dp); }
.hint { display: block; margin-top: 0.38rem; font-size: 0.85rem; color: var(--muted); }

.f input, .f textarea, .f select {
  width: 100%; min-height: 3rem; padding: 0.76rem 0.95rem;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--edge); border-radius: var(--r-btn);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.f textarea { min-height: 8.5rem; resize: vertical; }
.f input:focus, .f textarea:focus, .f select:focus {
  outline: none; background: var(--paper);
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42, 95, 204, 0.16);
}

.amounts { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.amount {
  position: relative;
  display: flex; flex-direction: column; gap: 0.12rem;
  min-height: 4.5rem; padding: 0.72rem 0.9rem;
  background: var(--mist); border: 1.5px solid var(--edge); border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.amount:hover { border-color: var(--blue-lt); transform: translateY(-3px); box-shadow: var(--sh-1); }
.amount input { position: absolute; opacity: 0; width: 0; height: 0; }
.amount-n { font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.amount-t { font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
.amount:has(input:checked) { border-color: var(--blue); background: var(--tint); box-shadow: 0 0 0 3px rgba(42, 95, 204, 0.14); }
.amount:has(input:checked) .amount-n { color: var(--blue-dk); }
.amount:has(input:focus-visible) { outline: 3px solid var(--blue-dk); outline-offset: 2px; }

.picks { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.pick {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.65rem 0.9rem;
  background: var(--mist); border: 1.5px solid var(--edge); border-radius: var(--r-btn);
  font-family: var(--display); font-size: 0.89rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.pick:hover { border-color: var(--blue-lt); }
.pick input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--blue); }
.pick:has(input:checked) { border-color: var(--blue); background: var(--tint); }
.pick:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(42, 95, 204, 0.2); }

.confirm { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 1.4rem; padding: 0.9rem 1rem; background: var(--mist); border-radius: var(--r-btn); }
.confirm input { width: 1.05rem; height: 1.05rem; margin-top: 0.3rem; accent-color: var(--blue); }
.confirm label { margin: 0; }

/* --- 21. Quote card ----------------------------------------------------- */

.quote-card {
  position: relative;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: linear-gradient(150deg, var(--ink) 0%, #1D3F6E 100%);
  border-radius: 20px;
  color: var(--on-dark-soft);
  overflow: hidden;
}
.quote-card::before {
  content: "\201C";
  position: absolute; top: -1.5rem; right: 1.5rem;
  font-family: var(--display); font-size: 12rem; font-weight: 800;
  color: rgba(255, 255, 255, 0.07); line-height: 1; pointer-events: none;
}
.quote-card blockquote { margin: 0; position: relative; }
.quote-card p {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -0.025em;
  color: #FFFFFF; text-wrap: balance;
}
.quote-card cite {
  display: inline-block; margin-top: 1.3rem;
  padding: 0.4rem 0.95rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--display); font-style: normal;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #FFFFFF;
}

/* --- 22. Prose (legal) -------------------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--blue-dk); }
.aside-card { padding: clamp(1.2rem, 2.4vw, 1.8rem); background: var(--tint); border-radius: var(--r-card); }
.aside-card h2 { margin-top: 0; font-size: 1.05rem; }
.aside-card ul { padding-left: 1.1rem; margin-bottom: 0; }
.aside-card li { font-size: 0.92rem; }
@media (min-width: 62rem) { .legal-grid { display: grid; grid-template-columns: 1fr 18rem; gap: 3rem; align-items: start; } }

/* --- 23. Closing call --------------------------------------------------- */

.call {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--deep) 0%, #1C3E6E 55%, #17355C 100%);
  color: var(--on-dark-soft);
}
.call::before {
  content: ""; position: absolute; width: 30rem; height: 30rem; border-radius: 50%;
  filter: blur(70px); background: rgba(242, 160, 61, 0.2); top: -12rem; right: -8rem;
}
.call-in { position: relative; display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 56rem) { .call-in { grid-template-columns: 1.35fr 0.65fr; } .call .btns { justify-content: flex-end; } }
.call h2 { color: #FFFFFF; margin-bottom: 0.45rem; }
.call p { max-width: 46ch; color: var(--on-dark-soft); }

/* --- 24. Footer --------------------------------------------------------- */

.foot { background: var(--deep); color: var(--on-dark-soft); padding-block: clamp(2.8rem, 5.5vw, 4.2rem) 1.6rem; }
.foot-grid {
  display: grid; gap: clamp(1.6rem, 3vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.foot-lead { grid-column: 1 / -1; max-width: 32rem; }
@media (min-width: 60rem) { .foot-lead { grid-column: span 2; } }
.foot-logo {
  display: inline-block;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  background: #FFFFFF;
  border-radius: 12px;
  line-height: 0;
}
.foot-logo img { width: auto; height: 62px; max-width: 220px; object-fit: contain; }

/* Fallback when no logo has been set in the Customizer. */
.foot-name {
  font-family: var(--display); font-size: 1.25rem; font-weight: 800;
  letter-spacing: -0.03em; color: #FFFFFF; margin-bottom: 0.7rem;
}
@media (max-width: 30rem) { .foot-logo img { height: 52px; max-width: 180px; } }
.foot-lead p { font-size: 0.95rem; }
.foot h3 { font-family: var(--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.3rem; }
.foot li a, .foot li span {
  display: inline-block; min-height: 2.2rem; padding: 0.28rem 0;
  font-size: 0.94rem; color: var(--on-dark-soft); text-decoration: none;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.foot li a:hover { color: #FFFFFF; transform: translateX(3px); }

.social { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.social a {
  width: 2.7rem; height: 2.7rem; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.12); border-radius: 10px; color: #FFFFFF;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.social a:hover { background: var(--amber); color: var(--ink); transform: translateY(-3px); }
.social svg { width: 1.05rem; height: 1.05rem; }

.foot-base { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: 0.84rem; }
.foot-base ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.foot-base a { text-decoration: none; }
.foot-base a:hover { color: #FFFFFF; }

/* --- 25. Motion --------------------------------------------------------- */

[data-rise] { opacity: 0; transform: translateY(20px); }
[data-rise].is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
[data-rise-d="1"].is-in { transition-delay: 0.08s; }
[data-rise-d="2"].is-in { transition-delay: 0.16s; }
[data-rise-d="3"].is-in { transition-delay: 0.24s; }
[data-rise-d="4"].is-in { transition-delay: 0.32s; }

[data-wipe] img { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
[data-wipe].is-in img {
  clip-path: inset(0 0 0 0); transform: scale(1);
  transition: clip-path 1s var(--ease-out), transform 1.3s var(--ease-out);
}

/* Gentle float on the hero inset card */
.floaty { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-rise] { opacity: 1; transform: none; }
  [data-wipe] img { clip-path: none; transform: none; }
  .floaty { animation: none; }
  .progress { display: none; }
}

/* --- 26. Focus ---------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.bay--ink :focus-visible, .foot :focus-visible, .lb :focus-visible, .call :focus-visible,
.hero--ink :focus-visible, .quote-card :focus-visible, .hamburger:focus-visible { outline-color: var(--amber); }

@media (prefers-contrast: more) {
  :root {
    --muted: #3F4D66; --body-t: #26364F;
    --edge: #9DB4D6; --edge-2: #7E99C4;
    --on-dark-soft: #E8F0FC;
  }
}

/* --- 27. Utilities ------------------------------------------------------ */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }

@media print {
  .masthead, .drawer, .scrim, .call, .lb, .progress { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: #000; }
  .card, .give, .tl-item, .sheet { box-shadow: none; border: 1px solid #999; }
}

/* ==========================================================================
   28. WordPress + Elementor integration
   Added for the theme build. Everything above is the original design system.
   ========================================================================== */

/* --- WordPress core classes --------------------------------------------- */

.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption {
  margin-top: 0.7rem; font-size: 0.84rem; color: var(--muted);
}
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sticky .card { border-color: var(--blue-lt); }

.prose img, .prose iframe { max-width: 100%; border-radius: var(--r-img); }
.prose blockquote {
  margin: 1.6rem 0; padding: 1.2rem 1.5rem;
  background: var(--mist); border-left: 4px solid var(--blue); border-radius: var(--r-img);
}
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.prose th, .prose td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--edge); text-align: left; }
.prose th { font-family: var(--display); font-weight: 700; color: var(--ink); }
.prose code, .prose pre {
  background: var(--mist); border-radius: 6px; font-size: 0.92em;
}
.prose code { padding: 0.15em 0.4em; }
.prose pre { padding: 1rem; overflow-x: auto; }

/* Pagination */
.pagination, .page-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem;
}
.pagination .page-numbers, .page-links a, .page-links > span {
  display: inline-grid; place-items: center;
  min-width: 2.8rem; min-height: 2.8rem; padding: 0 0.8rem;
  background: var(--mist); border: 1px solid var(--edge); border-radius: var(--r-btn);
  font-family: var(--display); font-weight: 700; font-size: 0.92rem;
  color: var(--ink); text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pagination .page-numbers:hover, .page-links a:hover { background: var(--tint); border-color: var(--blue-lt); }
.pagination .page-numbers.current, .page-links > span {
  background: var(--blue); border-color: var(--blue); color: #FFFFFF;
}

/* Comments */
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list li { margin-bottom: 1rem; }
.comment-body {
  padding: 1.2rem 1.4rem; background: var(--paper);
  border: 1px solid var(--edge); border-radius: var(--r-card);
}
.comment-meta { margin-bottom: 0.6rem; font-size: 0.86rem; color: var(--muted); }
.comment-form label { display: block; margin-bottom: 0.4rem; font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.comment-form input:not([type="submit"]), .comment-form textarea {
  width: 100%; min-height: 3rem; padding: 0.76rem 0.95rem; margin-bottom: 1rem;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--edge); border-radius: var(--r-btn);
}
.comment-form input:focus, .comment-form textarea:focus {
  outline: none; background: var(--paper); border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(42, 95, 204, 0.16);
}
.comment-form input[type="submit"] {
  min-height: 3.05rem; padding: 0.85rem 1.7rem;
  background: linear-gradient(140deg, var(--blue) 0%, #1E4FB0 100%);
  color: #FFFFFF; border: 0; border-radius: var(--r-btn);
  font-family: var(--display); font-size: 0.94rem; font-weight: 700; cursor: pointer;
}

/* Widget areas */
.widget { margin-bottom: 1.2rem; }
.widget-title { font-size: 1.05rem; margin-bottom: 0.9rem; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 0.45rem 0; border-bottom: 1px solid var(--edge); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--blue-dk); text-decoration: none; }
.widget a:hover { text-decoration: underline; }

/* --- Menu output --------------------------------------------------------
   wp_nav_menu adds its own classes; these keep the footer and drawer lists
   looking the same as the static build.
   ---------------------------------------------------------------------- */

.foot .menu { list-style: none; margin: 0; padding: 0; }
.foot .menu li { margin-bottom: 0.3rem; }
.foot .menu a {
  display: inline-block; min-height: 2.2rem; padding: 0.28rem 0;
  font-size: 0.94rem; color: var(--on-dark-soft); text-decoration: none;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.foot .menu a:hover { color: #FFFFFF; transform: translateX(3px); }

.foot-base .menu { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.foot-base .menu li { margin-bottom: 0; }

/* --- Feature list (widget markup) --------------------------------------- */

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  position: relative; padding: 0.55rem 0 0.55rem 1.6rem;
  font-size: 0.99rem; line-height: 1.55;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 0.7rem; height: 0.7rem; border-radius: 4px; background: var(--tint-2);
}
.feature--tint .feature-list li::before { background: #FFFFFF; }

/* --- Elementor ----------------------------------------------------------
   Elementor wraps every widget in .elementor-widget-container. Left alone,
   that wrapper adds margins that fight the design system's own spacing.
   ---------------------------------------------------------------------- */

.elementor-widget-container > .card,
.elementor-widget-container > .give,
.elementor-widget-container > .stat-card,
.elementor-widget-container > .tl-item,
.elementor-widget-container > .loc-card,
.elementor-widget-container > .reach-card,
.elementor-widget-container > .feature { height: 100%; }

/* Make equal-height cards work inside Elementor columns. */
.elementor-widget-lngm_icon_card,
.elementor-widget-lngm_giving_card,
.elementor-widget-lngm_stat_card,
.elementor-widget-lngm_timeline_item,
.elementor-widget-lngm_location_card { display: flex; }
.elementor-widget-lngm_icon_card > .elementor-widget-container,
.elementor-widget-lngm_giving_card > .elementor-widget-container,
.elementor-widget-lngm_stat_card > .elementor-widget-container,
.elementor-widget-lngm_timeline_item > .elementor-widget-container,
.elementor-widget-lngm_location_card > .elementor-widget-container { width: 100%; }

/* Section background helpers, so an Elementor section can take a named
   surface from the design system rather than a hand-picked hex. */
.lngm-bg-mist  { background: var(--mist) !important; }
.lngm-bg-tint  { background: var(--tint) !important; }
.lngm-bg-ink   { background: linear-gradient(155deg, var(--deep) 0%, #1A3A66 55%, #14304F 100%) !important; }
.lngm-bg-wash  {
  background:
    radial-gradient(70% 90% at 12% 0%, #EDF3FF 0%, transparent 60%),
    radial-gradient(60% 80% at 95% 100%, #FDF3E4 0%, transparent 62%),
    var(--paper) !important;
}
.lngm-bg-call {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--deep) 0%, #1C3E6E 55%, #17355C 100%) !important;
}

/* Text on the dark section helpers */
.lngm-bg-ink, .lngm-bg-call { color: var(--on-dark-soft); }
.lngm-bg-ink h1, .lngm-bg-ink h2, .lngm-bg-ink h3, .lngm-bg-ink h4,
.lngm-bg-call h1, .lngm-bg-call h2, .lngm-bg-call h3, .lngm-bg-call h4 { color: #FFFFFF; }
.lngm-bg-ink .stat-card, .lngm-bg-call .stat-card {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16);
}
.lngm-bg-ink .stat-n, .lngm-bg-call .stat-n { color: var(--amber); }
.lngm-bg-ink .stat-l, .lngm-bg-call .stat-l { color: var(--on-dark-soft); }
.lngm-bg-ink .badge, .lngm-bg-call .badge { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.lngm-bg-ink .badge::before, .lngm-bg-call .badge::before { background: var(--amber); }

/* Hero helpers for Elementor sections */
.lngm-hero-banner {
  background:
    radial-gradient(60% 120% at 88% 10%, #E3EDFF 0%, transparent 60%),
    radial-gradient(50% 110% at 5% 90%, #FDF1DE 0%, transparent 58%),
    var(--mist) !important;
  border-bottom: 1px solid var(--edge);
}

/* In the editor, never hide content behind a reveal that has not fired. */
.elementor-editor-active [data-rise],
.elementor-editor-active [data-wipe] img { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* --- Elementor button skins ---------------------------------------------
   Applied by adding one of these classes in Elementor > Advanced > CSS
   Classes on a Button widget, so core Elementor buttons match the design.
   ---------------------------------------------------------------------- */

.lngm-btn-amber .elementor-button,
.lngm-btn-blue .elementor-button,
.lngm-btn-line .elementor-button,
.lngm-btn-ondark .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.05rem; padding: 0.85rem 1.7rem;
  border: 1.5px solid transparent; border-radius: var(--r-btn);
  font-family: var(--display); font-size: 0.94rem; font-weight: 700;
  text-decoration: none; transition: background-color .25s var(--ease),
    color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease),
    box-shadow .25s var(--ease);
}
.lngm-btn-amber .elementor-button:hover,
.lngm-btn-blue .elementor-button:hover,
.lngm-btn-line .elementor-button:hover,
.lngm-btn-ondark .elementor-button:hover { transform: translateY(-2px); }

.lngm-btn-amber .elementor-button {
  background: linear-gradient(140deg, var(--amber) 0%, #E89526 100%);
  color: var(--ink); box-shadow: 0 6px 18px -7px rgba(154, 85, 16, .7);
}
.lngm-btn-amber .elementor-button:hover {
  background: linear-gradient(140deg, var(--amber-hi) 0%, var(--amber) 100%);
  color: var(--ink);
}
.lngm-btn-blue .elementor-button {
  background: linear-gradient(140deg, var(--blue) 0%, #1E4FB0 100%);
  color: #FFFFFF; box-shadow: 0 6px 18px -7px var(--blue-glow);
}
.lngm-btn-line .elementor-button {
  background: var(--paper); border-color: var(--edge-2); color: var(--ink);
}
.lngm-btn-line .elementor-button:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.lngm-btn-ondark .elementor-button {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #FFFFFF;
}
.lngm-btn-ondark .elementor-button:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

/* --- Form plugins --------------------------------------------------------
   Styles the common form plugins so a dropped-in form matches the site
   without per-field configuration.
   ---------------------------------------------------------------------- */

.elementor-field-group .elementor-field,
.gform_wrapper input:not([type="submit"]),
.gform_wrapper textarea,
.gform_wrapper select,
.wpforms-field input:not([type="submit"]),
.wpforms-field textarea,
.wpforms-field select,
.frm_form_field input:not([type="submit"]),
.frm_form_field textarea,
.frm_form_field select,
.fluentform input:not([type="submit"]),
.fluentform textarea,
.fluentform select {
  min-height: 3rem; padding: 0.76rem 0.95rem;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--edge);
  border-radius: var(--r-btn);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.elementor-field-group .elementor-field:focus,
.gform_wrapper input:focus, .gform_wrapper textarea:focus,
.wpforms-field input:focus, .wpforms-field textarea:focus,
.fluentform input:focus, .fluentform textarea:focus {
  outline: none; background: var(--paper); border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(42, 95, 204, .16);
}
.elementor-field-label,
.gform_wrapper label, .wpforms-field label, .fluentform label {
  font-family: var(--display); font-weight: 700; font-size: .85rem; color: var(--ink);
}
.elementor-button[type="submit"],
.gform_wrapper input[type="submit"],
.wpforms-submit, .fluentform button[type="submit"] {
  min-height: 3.05rem; padding: .85rem 1.7rem;
  background: linear-gradient(140deg, var(--amber) 0%, #E89526 100%);
  color: var(--ink); border: 0; border-radius: var(--r-btn);
  font-family: var(--display); font-size: .94rem; font-weight: 700; cursor: pointer;
}

/* --- Width safety net ----------------------------------------------------
   If an Elementor page is left on the default template, its content must not
   inherit the narrow article measure meant for written prose.
   ---------------------------------------------------------------------- */

/* The constraint is on the PARENT, so widening the child achieves nothing —
   the wrapper itself has to be released. page.php already avoids this case;
   this covers pages built before the fix. */
.prose:has(.elementor),
.prose:has(.elementor-section) { max-width: none; }
.prose > .elementor,
.prose .elementor-section { max-width: none; }
body .elementor .prose { max-width: none; }

/* Match Elementor's boxed container to the theme's 1220px measure, so a fresh
   install does not render narrower than the design. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1220px; }

/* Full-width sections should genuinely span the viewport. */
.elementor-section-full_width > .elementor-container { max-width: 100%; }

/* Elementor's default widget spacing fights the design system's own rhythm
   inside our card widgets, which manage their own padding. */
.elementor-widget-lngm_badge .elementor-widget-container { margin-bottom: 0; }