/* ==========================================================================
   Askiya — design system
   Brand taken from the Askiya deck and logo:
     navy      #003F67   logo wordmark
     deep      #002A46   footer and dark bands
     blue      #0089D6   logo globe, primary accent
     blue-mid  #0076B8
     lime      #9FB124   logo canopy
     green     #4EA72E   logo canopy
     teal      #187455
   Type: Poppins for headings, Manrope for body — both taken from the deck.
   Layout follows unitedwayla.org: two-tier header with a utility bar, oversized
   hero, two-up panel splits, pill buttons, square media cards with an eyebrow
   label, solid stat bands, news grid, newsletter band, deep footer with EIN.
   ========================================================================== */

:root{
  --sticky-top:7rem;   /* clears the sticky header under a stuck photo */
  --navy:#003F67;
  --navy-deep:#002A46;
  --navy-soft:#0E4C75;
  --blue:#0089D6;
  --blue-mid:#0076B8;
  --blue-pale:#E4F1FA;
  --lime:#9FB124;
  --green:#4EA72E;
  --teal:#187455;

  --ink:#1D2A33;
  --muted:#53646F;
  --line:#D6DEE4;
  --line-soft:#E9EEF2;
  --paper:#FFFFFF;
  --mist:#F3F7FA;

  --head:'Poppins','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --gap:clamp(1.25rem,3vw,2.25rem);
  --radius:8px;
  /* How far each panel rides up over the one above it, and how round its
     top edge is while it does. Both scale with the viewport. */
  --panel-radius:clamp(20px,3vw,44px);
  --panel-lift:clamp(18px,2.6vw,40px);
  --pill:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}

h1,h2,h3,h4{font-family:var(--head);font-weight:600;color:var(--navy);margin:0 0 .5em;letter-spacing:-.015em;line-height:1.12}
h1{font-size:clamp(2.6rem,6vw,4.5rem);font-weight:700;line-height:1.02}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.1rem}
p{margin:0 0 1.1em;max-width:70ch}

a{color:var(--blue-mid)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.wrap-narrow{max-width:860px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.8rem 1.3rem;z-index:300}
.skip:focus{left:0}

.kicker{
  font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-mid);margin:0 0 .75rem;
}
.hero .kicker,.section-navy .kicker,.cta .kicker{color:#8FD2F5}
.section-head{max-width:62ch;margin-bottom:2.6rem}
/* A head that should run the full width of the section rather than leaving
   the right-hand third empty. Its copy sets in two columns on a wide screen,
   which keeps the measure readable while filling the space. */
.section-head-wide{max-width:none}

/* ---------- swipe: a row of boxes you page through ----------
   One screenful at a time instead of a wall of text. It is a scroll-snap row,
   so it works with a finger, a trackpad and the arrow buttons alike, and it
   degrades to a plain scrolling row with no JavaScript. */
.swipe{position:relative}
.swipe-track{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding:.3rem .3rem 1.2rem;margin:0;list-style:none;
  scrollbar-width:thin}
/* Flex rather than grid: a percentage basis resolves reliably here, so the
   row really does overflow and the arrows have something to page. */
.swipe-track > li{flex:0 0 min(84%,320px);scroll-snap-align:start;background:#fff;border:1px solid var(--line-soft);
  border-left:5px solid var(--blue);border-radius:var(--radius);padding:1.5rem 1.6rem;
  box-shadow:0 2px 12px rgba(0,42,70,.04)}
.swipe-track > li h4{margin-bottom:.4rem;font-family:var(--head);font-weight:600}
.swipe-track > li p{margin:0 0 .7rem;font-size:1rem;color:var(--muted)}
.swipe-track > li p:last-child{margin-bottom:0}
.section-navy .swipe-track > li{background:var(--navy-soft);border-color:rgba(255,255,255,.14);
  border-left-color:var(--lime)}
.section-navy .swipe-track > li p{color:#C5D6E2}
@media (min-width:900px){.swipe-track > li{flex:0 0 calc(33.333% - .8rem)}}
.swipe-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.2rem}
.swipe-nav button{width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--navy);font-size:1.1rem;line-height:1}
.swipe-nav button:hover:not([disabled]){background:var(--navy);color:#fff;border-color:var(--navy)}
.swipe-nav button[disabled]{opacity:.35;cursor:default}
.section-navy .swipe-nav button{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.no-js .swipe-nav{display:none}
/* One panel at a time, for a slider whose items are too big to share a row. */
.swipe-solo .swipe-track > li{flex:0 0 min(92%,760px)}
@media (min-width:900px){.swipe-solo .swipe-track > li{flex:0 0 calc(100% - .6rem)}}
.swipe-solo .swipe-track > li{display:grid;gap:1.4rem;align-items:start}
@media (min-width:760px){.swipe-solo .swipe-track > li.has-media{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.swipe-solo .swipe-track > li img{width:100%;height:auto;border-radius:calc(var(--radius) - 4px);display:block}
.swipe-count{font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-mid);margin-right:auto;align-self:center}
.section-navy .swipe-count{color:#8FD2F5}

/* A tick list that runs in columns when there is room for them. */
@media (min-width:700px){.ticks-cols{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.ticks-cols{grid-template-columns:1fr 1fr 1fr}}

/* Ways in: numbered stages, each ending in its own action. */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:flow}
.flow > li{counter-increment:flow;position:relative;background:#fff;border:1px solid var(--line-soft);
  border-top:5px solid var(--lime);border-radius:var(--radius);padding:1.6rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;gap:.55rem;box-shadow:0 2px 14px rgba(0,42,70,.05)}
.flow > li::before{content:counter(flow);display:grid;place-items:center;width:2.1rem;height:2.1rem;
  border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:.95rem;font-family:var(--head)}
.flow > li h3{margin:0;font-size:1.18rem}
.flow > li p{margin:0;font-size:1rem;color:var(--muted)}
.flow > li .btn-row{margin-top:auto;padding-top:.5rem}
/* The arrow between stages, on wide screens only, where they sit in a row. */
/* (arrow between stages removed: the dashed connector now runs through every stage) */
.section-navy .flow > li{background:var(--navy-soft);border-color:rgba(255,255,255,.14)}
.section-navy .flow > li p{color:#C5D6E2}
.section-navy .flow > li::before{background:var(--lime);color:var(--navy)}

/* A caption under a drawing, saying plainly that it is a drawing. */
.figcap{margin:.7rem 0 0;font-size:.86rem;line-height:1.45;color:var(--muted);font-style:italic}
.section-navy .figcap,.hero .figcap{color:#C5D6E2}

/* Detail that opens under a heading rather than sitting on the page. */
.more{margin-top:.6rem}
.more > summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--blue-mid);
  list-style:none;padding:.2rem 0}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:" +";font-weight:700}
.more[open] > summary::after{content:" \2212"}
.more > summary:hover{text-decoration:underline}
.more p{margin:.6rem 0 0;font-size:1rem;color:var(--muted)}

/* A pulled quote standing on its own in a section. */
.pull{margin:0 0 1.6rem;border-left:5px solid var(--lime);padding:.2rem 0 .2rem 1.6rem}
.pull p{font-family:var(--head);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.3;
  font-style:italic;color:var(--navy);margin:0 0 .8rem}
.pull cite{font-style:normal;font-weight:700;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.section-navy .pull p{color:#fff}.section-navy .pull cite{color:#C5D6E2}
.section-head-wide > p{max-width:none}
@media (min-width:900px){
  .section-head-wide .head-cols{column-count:2;column-gap:clamp(2rem,4vw,3.4rem)}
  .section-head-wide .head-cols > p{margin-top:0;break-inside:avoid}
  .section-head-wide .head-cols > p + p{margin-top:1rem}
}
.section-head p{color:var(--muted)}

/* ---------- header: two tier ---------- */
.utility{background:var(--navy-deep);color:#C5D6E2;font-size:.86rem}
.utility-inner{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;min-height:40px}
.utility a{color:#C5D6E2;text-decoration:none;font-weight:600}
.utility a:hover{color:#fff}
.utility form{display:flex;align-items:center;gap:.4rem}
.utility input[type="search"]{
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  padding:.3rem .8rem;border-radius:var(--pill);font-family:var(--body);font-size:.84rem;width:160px;
}
.utility input[type="search"]::placeholder{color:#8FA6B6}
.utility button{background:none;border:none;color:#C5D6E2;cursor:pointer;font-family:var(--body);font-size:.84rem;font-weight:700}
.utility button:hover{color:#fff}
/* The social row sits in the utility bar, the way unitedwayla.org carries it
   in the header rather than only in the footer. */
.utility-social{display:flex;gap:.9rem}
.utility-social a{font-size:.74rem;font-weight:800;letter-spacing:.06em}

/* Pill tags: "our work touches a number of topics — explore one". A row of
   chips that each run through to a page, taken from unitedwayla.org. */
.tagrow{display:flex;flex-wrap:wrap;gap:.7rem;list-style:none;margin:0;padding:0}
.tagrow a{
  display:inline-block;padding:.52rem 1.15rem;border-radius:var(--pill);
  background:#fff;border:1px solid var(--line);color:var(--navy);
  text-decoration:none;font-weight:700;font-size:.93rem;line-height:1.3;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.tagrow a:hover,.tagrow a:focus{background:var(--navy);border-color:var(--navy);color:#fff}
.section-sand .tagrow a{background:#fff}
.section-navy .tagrow a{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.section-navy .tagrow a:hover,.section-navy .tagrow a:focus{background:var(--lime);border-color:var(--lime);color:var(--navy-deep)}

.topbar{position:sticky;top:0;z-index:200;background:#fff;box-shadow:0 1px 0 var(--line-soft),0 6px 20px rgba(0,42,70,.06)}
.topbar-inner{display:flex;align-items:center;gap:1.75rem;min-height:92px}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;margin-right:auto}
.brand img{max-height:62px;width:auto}
.brand-mark{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--navy);
  color:#8FD2F5;font-family:var(--head);font-weight:700;display:grid;place-items:center;font-size:1.4rem;
}
.brand-word{font-family:var(--head);font-size:1.55rem;font-weight:700;color:var(--navy);letter-spacing:.02em;line-height:1.1}
.brand-tag{display:block;font-family:var(--body);font-size:.74rem;font-weight:600;color:var(--muted);letter-spacing:.02em}

.nav{display:flex;align-items:center;gap:1.9rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--navy);text-decoration:none;font-weight:700;font-size:1rem;padding:.35rem 0;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--blue)}
.nav a[aria-current="page"],.nav .current-menu-item > a{border-bottom-color:var(--lime)}
.nav-toggle{
  display:none;background:none;border:2px solid var(--navy);border-radius:var(--pill);
  padding:.45rem 1.1rem;font-family:var(--body);font-weight:700;color:var(--navy);cursor:pointer;
}

/* ---------- dropdown navigation ----------
   The primary menu nests four levels deep under Our Programs. On a pointer
   device each level opens on hover or keyboard focus; the toggle buttons that
   theme.js injects carry the same state for touch and for screen readers, so
   a sub-menu is never reachable by hover alone. */
.nav li{position:relative}
.nav .sub-menu{
  list-style:none;margin:0;padding:.5rem 0;
  position:absolute;top:100%;left:-1.1rem;z-index:60;min-width:250px;
  background:#fff;border:1px solid var(--line-soft);border-top:3px solid var(--blue);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:0 14px 30px rgba(0,42,70,.15);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
/* Levels three and four fly out sideways rather than stacking downwards. */
.nav .sub-menu .sub-menu{top:-.5rem;left:100%;border-top:1px solid var(--line-soft);border-left:3px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0}
/* Each nested flyout steps 250px further right, so by the fourth level it ran
   past the window and put a horizontal scrollbar on every page. From the third
   level down, open leftward instead. */
@media (min-width:821px){
  .nav .sub-menu .sub-menu .sub-menu{
    left:auto;right:100%;
    border-left:none;border-right:3px solid var(--blue);
    border-radius:var(--radius) 0 0 var(--radius);
  }
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu,
.nav li.is-open > .sub-menu{opacity:1;visibility:visible;transform:none}
/* Link and disclosure button share one row, so the chevron never wraps below. */
.nav .sub-menu li{display:flex;align-items:center}
.nav .sub-menu li > a{flex:1 1 auto}
.nav .sub-menu > li > .submenu-toggle{flex:0 0 auto;padding:.55rem .9rem .55rem .2rem;align-self:stretch}
.nav .sub-menu a{
  display:block;padding:.55rem 1.1rem;font-weight:600;font-size:.95rem;
  border-bottom:none;border-left:3px solid transparent;line-height:1.35
}
.nav .sub-menu a:hover,.nav .sub-menu a:focus{background:var(--blue-pale);border-left-color:var(--blue);border-bottom:none}
.nav .sub-menu .current-menu-item > a{border-left-color:var(--lime);background:var(--blue-pale)}
/* A parent keeps its underline while any descendant is the current page. */
.nav .current-menu-ancestor > a,.nav .current-page-ancestor > a{border-bottom-color:var(--lime)}

.submenu-toggle{
  background:none;border:none;padding:0 0 0 .3rem;margin:0;cursor:pointer;color:inherit;
  font:inherit;line-height:1;display:inline-flex;align-items:center;
}
.submenu-toggle::after{
  content:"";display:block;width:.42em;height:.42em;margin-top:-.18em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .16s ease;
}
.nav .sub-menu .submenu-toggle::after{transform:rotate(-45deg);margin:0 0 0 .1em}
.submenu-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.nav > li > .submenu-toggle{color:var(--navy)}

/* A menu item styled as a button takes the button's colors. Without this,
   ".nav a" out-ranks ".btn-primary" on specificity and the Donate label is
   drawn in navy on blue — then navy on navy once the button is hovered, which
   makes it disappear. */
.nav a.btn{border-bottom:none;color:#fff}
.nav a.btn-primary,.nav a.btn-primary:hover,.nav a.btn-primary:focus,
.nav a.btn-navy,.nav a.btn-navy:hover,.nav a.btn-navy:focus{color:#fff}
.nav a.btn-gold{color:var(--navy-deep)}
.nav a.btn-gold:hover,.nav a.btn-gold:focus{color:#fff}

/* Donate renders as a solid pill, so its chevron sits clear of the button
   rather than crowding the label inside it. */
.nav > li.donate{display:flex;align-items:center}
.nav > li.donate > .submenu-toggle{padding-left:.55rem}
.nav > li.donate > .sub-menu{left:auto;right:-1.1rem}
.nav > li.donate > .sub-menu .sub-menu{left:auto;right:100%;border-left:none;border-right:3px solid var(--blue);border-radius:var(--radius) 0 0 var(--radius)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--body);font-size:1rem;font-weight:700;
  padding:.85rem 1.9rem;border-radius:var(--pill);text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--navy);border-color:var(--navy)}
.btn-gold{background:var(--lime);color:var(--navy-deep);border-color:var(--lime)}
.btn-gold:hover{background:var(--green);border-color:var(--green);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-outline-light:hover{background:#fff;color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
/* A single button that belongs to the row of choices above it rather than to
   the text on the left: centred under the set, so the eye reads it as the way
   on from all of them. */
.btn-row-center{justify-content:center;margin-top:1rem}

.textlink{font-weight:700;color:var(--blue-mid);text-decoration:none;border-bottom:2px solid rgba(0,118,184,.3);padding-bottom:2px}
.textlink:hover{border-bottom-color:var(--blue-mid)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-media{
  position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(0,42,70,.97) 0%,rgba(0,63,103,.92) 45%,rgba(0,118,184,.55) 100%),
    radial-gradient(circle at 78% 28%,rgba(159,177,36,.30) 0%,rgba(0,63,103,0) 46%),
    radial-gradient(circle at 92% 78%,rgba(0,137,214,.40) 0%,rgba(0,63,103,0) 50%);
}
.hero-inner{position:relative;padding:clamp(4.5rem,10vw,8rem) 0 clamp(4rem,8vw,6.5rem);max-width:64rem}
.hero h1{color:#fff;max-width:16ch}
.hero p{color:#DCE9F2;font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:60ch}
.hero-flag{
  display:inline-block;background:var(--lime);color:var(--navy-deep);font-weight:800;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.4rem 1rem;border-radius:var(--pill);margin-bottom:1.3rem;
}
.hero-slim .hero-inner{padding:clamp(3.2rem,7vw,5rem) 0 clamp(2.8rem,5vw,4rem)}


/* ---------- section rhythm ---------- */
.section{padding:clamp(3.6rem,7vw,6.5rem) 0}
.section-tight{padding:clamp(2.4rem,4.5vw,3.6rem) 0}
.section-white{background:#fff}
.section-sand{background:var(--mist)}
.section-navy{background:var(--navy);color:#DCE9F2}
.section-navy h2,.section-navy h3,.section-navy h4{color:#fff}
.section-navy p{color:#C5D6E2}

/* ---------- panel scroll ----------
   Each section is a panel with a rounded top edge that rides up over the
   one above it, and the hero is held in place while the first panel
   covers it. It is the effect on unitedwayla.org, and it is pure CSS:
   no scroll listener, nothing to go wrong on a slow connection.

   Only <section> elements become panels. The pop-up dialogues are also
   children of <main> and must keep their own positioning, which is why
   the selectors name sections rather than every child.

   The background line is a safety net: a panel has to paint its own
   background or the panel underneath shows through the overlap. Every
   colour class is a single class selector and so still wins. */
main > section{background-color:var(--paper);position:relative;z-index:1}

main > section ~ section,
.signup{
  margin-top:calc(-1 * var(--panel-lift));
  border-top-left-radius:var(--panel-radius);
  border-top-right-radius:var(--panel-radius);
}
.signup{position:relative;z-index:1}

/* The hero sits behind the panel that covers it. It drifts up by the
   height of the header, then holds. */
@media (min-width:861px){
  main > section.hero:first-child{position:sticky;top:0;z-index:0}
}
/* Someone who has asked for less movement gets the panels and the rounded
   edges, but nothing that holds still against the scroll. */
@media (prefers-reduced-motion:reduce){
  main > section.hero:first-child{position:relative}
}

/* ---------- lineage ----------
   Three people, five centuries, one argument. They are laid along a drawn
   line rather than stacked in boxes, because the point of the section is
   that they are continuous: one idea passed between three hands. The line
   and its nodes live in the padding above the cards, so nothing has to be
   cut out of a card to let the line through. */
.lineage{
  list-style:none;margin:0;padding:2.7rem 0 0;position:relative;
  display:grid;gap:clamp(1rem,2.2vw,1.6rem);grid-template-columns:repeat(3,1fr);
}
.lineage::before{
  content:'';position:absolute;top:.62rem;left:16.6%;right:16.6%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--lime) 50%,var(--navy));opacity:.55;
}
.lineage > :is(li,.lineage-item){
  position:relative;border-radius:clamp(16px,2.3vw,28px);
  padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;
}
.lineage > :is(li,.lineage-item)::before{
  content:'';position:absolute;top:-2.68rem;left:50%;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #fff;
}
.lineage > :is(li,.lineage-item):nth-child(1){background:var(--blue-pale)}
.lineage > :is(li,.lineage-item):nth-child(2){background:rgba(159,177,36,.17)}
.lineage > :is(li,.lineage-item):nth-child(3){background:rgba(0,63,103,.07)}
.lineage > :is(li,.lineage-item):nth-child(2)::before{background:var(--lime)}
.lineage > :is(li,.lineage-item):nth-child(3)::before{background:var(--navy)}

.lineage-era{font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-soft);margin:0 0 .25rem}
.lineage-idea{font-family:var(--head);font-weight:600;line-height:1;margin:0 0 .55rem;
  font-size:clamp(1.9rem,3.3vw,2.6rem);color:var(--blue);letter-spacing:-.02em}
.lineage > :is(li,.lineage-item):nth-child(2) .lineage-idea{color:#67750E}
.lineage > :is(li,.lineage-item):nth-child(3) .lineage-idea{color:var(--navy)}
.lineage h3{font-size:clamp(1.05rem,1.6vw,1.24rem);margin:0 0 .5rem}
.lineage > :is(li,.lineage-item) > p:not([class]){font-size:.98rem;margin:0 0 .9rem}
.lineage-where{margin:auto 0 0;padding:.95rem 0 0;border-top:1px solid rgba(0,42,70,.14);
  display:grid;gap:.6rem}
.lineage-where > div{display:grid;gap:.12rem}
.lineage-where dt{font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-soft)}
.lineage-where dd{margin:0;font-size:.93rem;color:var(--muted);line-height:1.5}

/* Side by side, the three read better when the era, the one-word idea, the
   name and the footnotes line up across all three rather than drifting with
   the length of each paragraph. Subgrid does that; without it the cards
   simply keep their own rhythm, which is no worse than before. */
@supports (grid-template-rows:subgrid){
  @media (min-width:861px){
    .lineage{grid-template-rows:repeat(5,auto)}
    .lineage > :is(li,.lineage-item){display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start}
    .lineage-where{margin-top:0}
  }
}

/* Narrow screens read it as a timeline going down, with the same line. */
@media (max-width:860px){
  .lineage{grid-template-columns:1fr;padding:0 0 0 2.2rem;gap:1.1rem}
  .lineage::before{
    top:1.15rem;bottom:1.15rem;left:.44rem;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--blue),var(--lime) 50%,var(--navy));
  }
  .lineage > :is(li,.lineage-item)::before{top:1.15rem;left:calc(-1.76rem - 7.5px);transform:none}
}

.lede{font-family:var(--head);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.4;color:var(--navy);max-width:34ch}
.lede-wide{max-width:62ch}

.split{display:grid;grid-template-columns:1fr 1fr}
.split > div{padding:clamp(2.4rem,5vw,4.5rem) clamp(1.8rem,4vw,3.6rem)}
.split-a{background:var(--navy);color:#C5D6E2}
.split-a h2,.split-a h3{color:#fff}
.split-b{background:var(--blue-pale)}

.stats{background:var(--blue)}
.stats-gold{background:var(--lime)}
.stats-inner{display:grid;gap:var(--gap);padding:clamp(3rem,5.5vw,4.5rem) 0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{text-align:left}
.stat-num{font-family:var(--head);font-size:clamp(2.8rem,5.5vw,4.25rem);font-weight:700;line-height:1;display:block;color:#fff;letter-spacing:-.025em}
.stats-gold .stat-num{color:var(--navy-deep)}
.stat-label{display:block;margin-top:.7rem;font-size:1rem;font-weight:600;line-height:1.4;color:rgba(255,255,255,.92)}
.stats-gold .stat-label{color:var(--navy-deep)}

.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line-soft);box-shadow:0 2px 14px rgba(0,42,70,.05)}
.card > img,.card > a > img{aspect-ratio:1/1;object-fit:cover;width:100%}
.card-body{padding:1.7rem 1.6rem 1.9rem;display:flex;flex-direction:column;flex:1}
.card-body p{font-size:1rem;color:var(--muted)}
.card-body .textlink{margin-top:auto;align-self:flex-start;padding-top:.7rem}
.card-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-mid);margin:0 0 .6rem}
.card-status{display:inline-block;background:var(--blue-pale);color:var(--navy);font-size:.78rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:.3rem .8rem;border-radius:var(--pill);margin-bottom:.9rem}
.card-status.live{background:var(--green);color:#fff}

/* People directory — board, staff, advisors */
.people{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.people-wide{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.person{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line-soft);box-shadow:0 2px 14px rgba(0,42,70,.05)}
.person-photo{position:relative;aspect-ratio:1/1;background:var(--blue-pale);display:grid;place-items:center;overflow:hidden}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.person-initials{font-family:var(--head);font-weight:700;font-size:3rem;color:var(--blue-mid);letter-spacing:.04em}
.person-body{padding:1.6rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.person-role{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-mid);margin:0 0 .5rem}
.person-body h3{font-size:1.32rem;margin:0 0 .35rem;line-height:1.25}
.person-title{font-size:.97rem;font-weight:700;color:var(--navy);margin:0 0 .9rem;line-height:1.45}
.person-org{display:block;font-weight:500;color:var(--muted)}
.person-bio{font-size:.96rem;color:var(--muted);margin:0 0 1rem}
.tags{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{background:var(--blue-pale);color:var(--navy);font-size:.74rem;font-weight:700;letter-spacing:.02em;
  padding:.28rem .68rem;border-radius:var(--pill);line-height:1.35}
.person-meta{margin:auto 0 0;padding-top:.5rem;font-size:.86rem;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.person-meta .sep{color:var(--line)}
.person-where{font-weight:600}
.person-link{font-weight:700;color:var(--blue-mid);text-decoration:none;border-bottom:2px solid rgba(0,118,184,.3);padding-bottom:1px}
.person-link:hover{border-bottom-color:var(--blue-mid)}
.section-sand .person{border-color:var(--line)}
/* On a phone the portrait becomes a thumbnail pinned beside the name, so a
   long biography never stretches the face to the height of the card. */
/* On a phone the portrait shrinks to a fixed square rather than filling the
   card width, so a full-page-wide face never pushes the biography off screen.
   Stretching it to the card's height, which a side-by-side layout would do,
   crops the face badly on the longer biographies. */
@media (max-width:540px){
  .people,.people-wide{grid-template-columns:1fr}
  .person{padding:1.3rem 1.3rem 1.4rem}
  .person-photo{width:150px;height:150px;border-radius:calc(var(--radius) / 1.5);margin-bottom:1.1rem}
  .person-initials{font-size:2.6rem}
  .person-body{padding:0}
  .person-body h3{font-size:1.24rem}
  .person-bio{font-size:.95rem}
}

.row{display:grid;gap:clamp(1.8rem,4vw,3.6rem);align-items:center;grid-template-columns:1fr 1fr}
.row + .row{margin-top:clamp(2.8rem,6vw,5rem)}
.row-flip .row-media{order:2}
.row-narrow{grid-template-columns:1fr 1.2fr}

/* The reference site's signature section: the photograph stays put on the
   left while a column of boxes rises past it, one after another. The sticky
   offset clears the sticky header. */
.row-sticky{align-items:start}
.row-sticky .row-media{position:sticky;top:calc(var(--sticky-top, 96px))}
.row-sticky .row-media .ph{width:100%}
.stack{display:grid;gap:1.2rem;margin:0;padding:0;list-style:none}
.stack > li,.stack > div{background:#fff;border:1px solid var(--line-soft);
  border-left:5px solid var(--blue);border-radius:var(--radius);
  padding:1.5rem 1.6rem;box-shadow:0 2px 12px rgba(0,42,70,.04)}
.stack h4{margin-bottom:.4rem;font-family:var(--head);font-weight:600}
.stack p{margin:0;font-size:1rem;color:var(--muted)}
.section-navy .stack > li,.section-navy .stack > div{background:var(--navy-soft);
  border-color:rgba(255,255,255,.14);border-left-color:var(--lime)}
.section-navy .stack p{color:#C5D6E2}
/* On a narrow screen nothing sticks: the photo simply sits above the boxes. */
@media (max-width:860px){.row-sticky .row-media{position:static}}

/* A two-up whose other half is a block of working notes has one child on the
   public page. Let it take the full width rather than sit in half of one. */
.row > :only-child,.split > :only-child,.cards-2 > :only-child{grid-column:1 / -1}

.imgslot{
  background:linear-gradient(135deg,var(--blue-pale) 0%,#EEF4E2 100%);
  border:2px dashed var(--blue);border-radius:var(--radius);
  display:grid;place-items:center;text-align:center;padding:1.8rem;min-height:260px;color:var(--navy);
}
.imgslot span{font-size:.95rem;max-width:34ch;line-height:1.5}
.imgslot b{display:block;font-family:var(--head);font-size:1rem;font-weight:600;margin-bottom:.35rem;letter-spacing:.04em;text-transform:uppercase}
.imgslot-tall{min-height:440px}
.imgslot-wide{min-height:320px}
.imgslot-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.imgslot-quad .imgslot{min-height:190px}

.blocks{display:grid;gap:1.2rem;margin:0;padding:0;list-style:none}
.blocks-2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
@media (min-width:900px){.blocks-2:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.blocks:has(> li:nth-child(4):last-child):not(.blocks-2){grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Four boxes that belong on one line rather than wrapping to two. */
.blocks-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.blocks-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.blocks-4{grid-template-columns:1fr}}
.blocks li{background:#fff;border:1px solid var(--line-soft);border-left:5px solid var(--blue);
  border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:0 2px 12px rgba(0,42,70,.04)}
.blocks li h4{margin-bottom:.4rem;font-family:var(--head);font-weight:600}
.blocks li p{margin:0;font-size:1rem;color:var(--muted)}
.blocks-rust li{border-left-color:var(--lime)}
.blocks-navy li{border-left-color:var(--navy)}
.section-navy .blocks li{background:var(--navy-soft);border-color:rgba(255,255,255,.14);border-left-color:var(--lime)}
.section-navy .blocks li p{color:#C5D6E2}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ticks li{padding-left:1.7rem;position:relative;font-size:1rem}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:.7rem;border-radius:50%;background:var(--lime)}

.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);background:#fff}
.acc summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--head);font-size:1.2rem;font-weight:600;color:var(--navy)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  color:var(--blue);font-size:1.7rem;font-family:var(--body);line-height:1}
.acc details[open] summary::after{content:"\2013"}
.acc summary span{display:block;font-family:var(--body);font-size:1rem;font-weight:400;color:var(--muted);margin-top:.3rem}
.acc-body{padding:0 0 1.8rem;border-top:1px solid var(--line-soft)}
.acc-body dl{margin:1.1rem 0 0;display:grid;gap:1rem}
.acc-body dt{font-weight:800;color:var(--navy);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.acc-body dd{margin:.2rem 0 0;color:var(--muted);font-size:1rem}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:1rem}
caption{text-align:left;font-family:var(--head);font-size:1.15rem;font-weight:600;color:var(--navy);
  padding:1.2rem 1.3rem;border-bottom:1px solid var(--line)}
th,td{padding:1rem 1.2rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
thead th{background:var(--navy);color:#fff;font-family:var(--head);font-weight:600;font-size:.95rem}
tbody th{font-weight:700;color:var(--navy);width:22%}
td.bad{background:#FDF3EF}
td.good{background:#F1F8EC}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}

.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:10px;top:.7rem;bottom:.7rem;width:2px;background:rgba(143,210,245,.4)}
.timeline li{position:relative;padding:0 0 2.2rem 2.8rem}
.timeline li::before{content:"";position:absolute;left:0;top:.45rem;width:22px;height:22px;border-radius:50%;
  background:var(--navy);border:4px solid var(--lime)}
.timeline h3{margin-bottom:.2rem}
.timeline .when{display:block;font-weight:800;color:#8FD2F5;margin-bottom:.55rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.timeline p{margin:0}

.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1.4rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:1.2rem;align-items:start}
.steps li::before{content:counter(s);font-family:var(--head);font-weight:700;font-size:1.4rem;
  width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.steps h4{margin-bottom:.25rem;font-family:var(--head)}
.steps .when{color:var(--blue-mid);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.steps p{margin:.3rem 0 0;color:var(--muted);font-size:1rem}

.quarters{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.quarter{background:#fff;border-radius:var(--radius);border:1px solid var(--line-soft);padding:1.5rem}
.section-navy .quarter{background:var(--navy-soft);border-color:rgba(255,255,255,.14)}
.quarter .when{font-weight:800;color:var(--blue-mid);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.5rem}
.section-navy .quarter .when{color:#8FD2F5}
.quarter h4{font-family:var(--head)}
.quarter p{margin:0;font-size:1rem;color:var(--muted)}
.section-navy .quarter p{color:#C5D6E2}

.form{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(1.7rem,4vw,2.6rem);box-shadow:0 4px 20px rgba(0,42,70,.06)}
.field{margin-bottom:1.3rem}
.field label{display:block;font-weight:700;color:var(--navy);margin-bottom:.4rem;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius);font-family:var(--body);font-size:1rem;background:#fff;color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.field-row{display:grid;gap:1.3rem;grid-template-columns:1fr 1fr}
.hint{font-size:.9rem;color:var(--muted);margin:.4rem 0 0}

.amounts{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:1.5rem}
.amount{border:2px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.1rem;text-align:left;cursor:pointer;font-family:var(--body)}
.amount:hover{border-color:var(--blue)}
.amount b{display:block;font-family:var(--head);font-size:1.6rem;font-weight:700;color:var(--navy);margin-bottom:.25rem}
.amount span{font-size:.94rem;color:var(--muted);line-height:1.45;display:block}
.toggle{display:inline-flex;border:2px solid var(--navy);border-radius:var(--pill);overflow:hidden;margin-bottom:1.5rem}
.toggle button{background:#fff;border:none;padding:.75rem 1.8rem;font-family:var(--body);font-size:1rem;font-weight:700;color:var(--navy);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}

.tiles{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tile{background:#fff;border-radius:var(--radius);border:1px solid var(--line-soft);
  border-top:5px solid var(--blue);padding:1.7rem;display:flex;flex-direction:column;box-shadow:0 2px 14px rgba(0,42,70,.05)}
.tile .when{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-mid);display:block;margin-bottom:.6rem}
.tile p{font-size:1rem;color:var(--muted)}
.tile .textlink,.tile .btn{margin-top:auto;align-self:flex-start}

.promise{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.promise div{border-top:4px solid var(--lime);padding-top:1.3rem}
.promise h3{font-size:1.25rem}
.promise p{font-size:1rem;color:#C5D6E2;margin:0}

.milestones{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.milestone{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.6rem;box-shadow:0 2px 14px rgba(0,42,70,.05)}
.milestone .when{display:inline-block;background:var(--navy);color:#fff;font-size:.78rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:.35rem .85rem;border-radius:var(--pill);margin-bottom:.95rem}
.milestone p{margin:0;font-size:1rem;color:var(--muted)}

.money{background:var(--blue-pale);border-radius:var(--radius);border-left:8px solid var(--blue);padding:clamp(1.7rem,4vw,2.6rem)}
.section-navy .money{background:var(--navy-soft);border-left-color:var(--lime)}
.money .big{font-family:var(--head);font-size:clamp(2.6rem,6vw,4.25rem);font-weight:700;color:var(--navy);line-height:1;display:block;letter-spacing:-.025em}
.section-navy .money .big{color:#fff}
.money .cap{font-size:1rem;color:var(--navy);margin-top:.6rem;display:block;font-weight:600}
.section-navy .money .cap{color:#C5D6E2}

.note{border-left:5px solid var(--lime);background:#fff;border-radius:var(--radius);padding:1.3rem 1.5rem;font-size:1rem}
.note p{margin:0;color:var(--muted)}

.contacts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.contacts li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.contacts li:first-child{border-top:1px solid var(--line-soft)}
.contacts b{color:var(--navy)}

.todo{background:#FFF6D9;border-bottom:2px solid var(--lime);padding:.05em .35em;font-style:italic;color:#6A5310}
.todo-block{background:#FFF6D9;border:2px dashed var(--lime);border-radius:var(--radius);
  padding:1.1rem 1.3rem;font-size:1rem;color:#6A5310;margin:1.3rem 0}
.todo-block b{color:#4E3D0B}

.cta{background:var(--blue);color:#fff;text-align:center}
.cta-inner{padding:clamp(3.4rem,6vw,5.5rem) 0}
.cta h2{color:#fff;margin-left:auto;margin-right:auto;max-width:22ch}
.cta p{color:rgba(255,255,255,.92);margin:0 auto;max-width:62ch}
.cta .btn-row{justify-content:center}
.cta-navy{background:var(--navy)}
.cta-navy p{color:#C5D6E2}

.signup{background:var(--mist);border-top:1px solid var(--line-soft)}
.signup-inner{display:grid;gap:var(--gap);grid-template-columns:1fr 1.25fr;align-items:center;padding:clamp(2.6rem,5vw,4rem) 0}
.signup h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.signup form{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.signup input{padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--body);font-size:1rem}
.signup .btn{grid-column:1/-1;justify-self:start}
.signup .consent{grid-column:1/-1;font-size:.85rem;color:var(--muted);margin:0;max-width:none}

.foot{background:var(--navy-deep);color:#AFC4D3;padding:clamp(3.2rem,6vw,4.5rem) 0 2rem}
.foot a{color:#AFC4D3;text-decoration:none}
.foot a:hover{color:#fff}
.foot-grid{display:grid;gap:var(--gap);grid-template-columns:1.6fr 1fr 1fr 1fr}
.foot h4{color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:1rem}
.foot .brand-word{color:#fff}
.foot .brand-tag{color:#8FA6B6}
.foot p{font-size:1rem;color:#8FA6B6;max-width:34ch}
.foot-wordmark{max-height:74px;width:auto;margin-bottom:1.1rem}
.foot-social{display:flex;gap:1rem;margin-top:1.1rem}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;font-size:.78rem;font-weight:800}
.foot-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.foot-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.8rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.92rem;color:#8FA6B6}
.foot-legal ul{display:flex;gap:1.4rem;flex-wrap:wrap}

/* ---------- sitewide scroll reveal ----------
   Sections rise and fade as they enter the viewport; grids inside them
   stagger their children. Applied by assets/js/theme.js to every section,
   so nothing needs a class in the markup. */
.reveal{
  opacity:0;transform:translateY(56px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}

.reveal-item{
  opacity:0;transform:translateY(44px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in .reveal-item{opacity:1;transform:none}

/* No JavaScript, or motion turned off: show everything immediately. */
.no-js .reveal,.no-js .reveal-item,
.reveal-off .reveal,.reveal-off .reveal-item{opacity:1;transform:none;transition:none}

/* Inside a dialog, never. A dialog's contents are revealed by opening it, and
   while it is hidden the scroll observer cannot see them — so anything that
   started at zero opacity would stay invisible after the dialog opened. */
.modal .reveal,.modal .reveal-item{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-item{opacity:1 !important;transform:none !important;transition:none !important}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{
  .reveal,.reveal-item{opacity:1 !important;transform:none !important}

  /* These pages get printed and circulated as PDFs, so the page breaks matter.
     Keep a heading with the text it introduces, never split one down the
     middle, and never strand a line of a paragraph on its own. */
  h1,h2,h3,h4{break-inside:avoid;break-after:avoid-page;page-break-after:avoid}
  figure,.ph,.diagram,.card,.tile,.block,.milestone,.stat,li{break-inside:avoid}
  p,li{orphans:3;widows:3}
  .kicker,.section-head{break-after:avoid-page}
  .kicker{break-inside:avoid}
}

/* ---------- real photography ---------- */
.ph{width:100%;height:auto;display:block;border-radius:var(--radius);object-fit:cover}
.ph-wide{aspect-ratio:4/3}
.ph-tall{aspect-ratio:4/5}
.ph-square{aspect-ratio:1/1;border-radius:0}
/* Plans, maps and diagrams are shown entire. Cropping one to a fixed ratio
   cuts off the part of the drawing the reader came for. */
.ph-plan{aspect-ratio:auto;object-fit:contain;background:#fff}

/* ---------- press coverage ----------
   A dated list of articles elsewhere. Each entry leads with where and when,
   because for coverage the outlet and the date are the credential. */
.coverage{list-style:none;margin:0;padding:0;display:grid;gap:0}
.coverage-item{
  padding:clamp(1.4rem,3vw,1.9rem) 0;
  border-top:1px solid var(--line);
}
.coverage-item:first-child{border-top:none;padding-top:0}
.coverage-item:last-child{padding-bottom:0}
.coverage-meta{
  margin:0 0 .45rem;font-size:.82rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-mid);
}
.coverage-meta .sep{margin:0 .55rem;color:var(--line);font-weight:400}
.coverage-date{color:var(--muted)}
.coverage-item h3{
  margin:0 0 .5rem;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.3;
}
.coverage-item h3 a{
  color:var(--navy);text-decoration:none;
  border-bottom:2px solid transparent;
}
.coverage-item h3 a:hover{border-bottom-color:var(--lime)}
.coverage-note{margin:0;color:var(--muted);font-size:1rem;line-height:1.6;max-width:68ch}
.section-navy .coverage-item{border-top-color:rgba(255,255,255,.16)}
.section-navy .coverage-item h3 a{color:#fff}
.section-navy .coverage-note{color:rgba(255,255,255,.88)}

/* ---------- photo gallery ----------
   A grid of square photographs with a caption under each. Used where the
   pictures are the evidence, rather than decoration beside an argument. */
.gallery{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.gallery figure{margin:0}
.gallery img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:var(--radius);box-shadow:0 2px 14px rgba(0,42,70,.08);
}
.gallery figcaption{
  margin-top:.7rem;font-size:.95rem;line-height:1.5;color:var(--muted);
}

/* ---------- one drawing, shown entire ----------
   A figure section is a single illustration across the content width. The
   picture keeps its own shape (see .ph-plan) because the labels inside it are
   the point. */
.figure{margin:0}
.figure figcaption{
  margin-top:.8rem;font-size:.95rem;line-height:1.5;color:var(--muted);
}
.section-navy .figure figcaption{color:#C5D6E2}
.section-navy .gallery figcaption{color:#C5D6E2}
.card > .ph{border-radius:0}
.row-media .ph{box-shadow:0 10px 34px rgba(0,42,70,.14)}
.row-media .ph-square{border-radius:var(--radius)}
/* Credit under a picture. Used where a reader could otherwise take an
   illustration for a documentary photograph. */
.row-credit,.ask-credit p,.ask-credit{
  margin:.7rem 0 0;font-size:.85rem;line-height:1.45;color:var(--muted);
  font-style:italic;
}

/* hero with a photograph behind the gradient */
.hero-media.has-photo{background-size:cover;background-position:center center;background-repeat:no-repeat}

@media (max-width:980px){
  .split,.row,.row-narrow,.signup-inner,.field-row{grid-template-columns:1fr}
  .row-flip .row-media{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  tbody th{width:auto}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;box-shadow:0 12px 24px rgba(0,42,70,.12);padding:.5rem 1.2rem 1.3rem}
  .nav.open{display:flex;max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav li{border-bottom:1px solid var(--line-soft)}
  .nav a{display:block;padding:.95rem 0;border-bottom:none}
  .nav .btn{margin-top:1rem;text-align:center}

  /* Sub-menus become an accordion: no hover on a phone, so only the toggle
     buttons open them, and they push the list down instead of floating. */
  .nav li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .nav li > a{flex:1}
  .nav .sub-menu,.nav .sub-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;transition:none;
    width:100%;min-width:0;display:none;box-shadow:none;border:none;border-radius:0;
    padding:0 0 .4rem .9rem;background:transparent;
  }
  .nav li.is-open > .sub-menu{display:block}
  .nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{display:none}
  .nav li.is-open:hover > .sub-menu,.nav li.is-open:focus-within > .sub-menu{display:block}
  .nav .sub-menu li{border-bottom:none}
  .nav .sub-menu a{padding:.62rem 0;font-size:.97rem;border-left:none}
  .nav .sub-menu a:hover,.nav .sub-menu a:focus{background:transparent;border-left:none;color:var(--blue-mid)}
  .submenu-toggle{padding:.95rem .3rem .95rem 1rem}
  .submenu-toggle::after{width:.5em;height:.5em;transform:rotate(45deg)}
  .nav .sub-menu .submenu-toggle::after{transform:rotate(45deg)}
  .nav li.is-open > .submenu-toggle::after,
  .nav .sub-menu li.is-open > .submenu-toggle::after{transform:rotate(-135deg);margin-top:.14em}
  .topbar-inner{position:relative;min-height:76px}
  .utility-inner{justify-content:center;gap:1rem}
  .foot-grid{grid-template-columns:1fr}
  body{font-size:17px}
}

/* ---------- Elementor ----------
   A converted page puts each of the theme's bands inside its own Elementor
   section. Those bands already carry their full-bleed background and vertical
   rhythm, so the wrapper around them must add nothing.

   Each band's zero padding is stored in its own settings and rendered by
   Elementor's generated stylesheet. These two rules cover what that does not:
   the HTML widget's default bottom margin, and the boxed container width.
   Both are safe for sections built in Elementor later. */
.elementor-widget-html > .elementor-widget-container{margin:0;padding:0}
.elementor-section-full_width > .elementor-container{max-width:none}

/* ---------- WordPress integration ---------- */
.brand{text-decoration:none}
.brand-word{display:inline-block}
.custom-logo{max-height:62px;width:auto}
.nowrap{white-space:nowrap}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.entry h2{margin-top:2rem}
.entry h3{margin-top:1.6rem}
.entry ul,.entry ol{margin:0 0 1.2em;padding-left:1.4rem}
.entry li{margin-bottom:.5rem}
.entry img{margin:1.6rem 0;border-radius:var(--radius)}
.entry blockquote{border-left:5px solid var(--lime);background:var(--mist);margin:1.8rem 0;border-radius:var(--radius);
  padding:1.3rem 1.6rem;font-family:var(--head);font-weight:500;font-size:1.2rem;color:var(--navy)}
.entry blockquote p:last-child{margin-bottom:0}
.entry figcaption{font-size:.92rem;color:var(--muted);margin-top:.6rem}
.entry a{color:var(--blue-mid)}
.search-form{display:flex;gap:.7rem;flex-wrap:wrap}
.search-form label{flex:1 1 220px}
.search-form .search-field{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--body);font-size:1rem}
.search-form .search-submit{background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:var(--pill);
  padding:.8rem 1.7rem;font-family:var(--body);font-size:1rem;font-weight:700;cursor:pointer}
.pagination,.nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pagination .page-numbers,.nav-links .page-numbers{display:inline-block;padding:.55rem .95rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--navy);text-decoration:none;font-weight:700}
.pagination .page-numbers.current,.nav-links .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.foot ul li{list-style:none}
.foot .menu{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-legal .menu{display:flex;gap:1.4rem;flex-wrap:wrap}
.ticks .children{list-style:none;margin:.5rem 0 0 1.3rem;padding:0;display:grid;gap:.45rem}
.ticks li a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(0,63,103,.22)}
.ticks li a:hover{border-bottom-color:var(--blue)}

/* ---------- flex-gap fallbacks for older rendering engines ----------
   Modern browsers use the `gap` declarations above; these margins are
   harmless there because gap wins, and they keep spacing intact on engines
   that predate flex gap support (older Safari, some in-app browsers, and
   the PDF renderers used for print exports). */
@supports not (gap: 1rem) {
  .utility-inner > * + *{margin-left:1.5rem}
  .nav > li + li{margin-left:1.9rem}
  .btn-row > .btn + .btn{margin-left:.9rem}
  .foot-social > a + a{margin-left:1rem}
  .foot-legal > * + *{margin-left:1.2rem}
  .search-form > * + *{margin-left:.7rem}
}

/* ==========================================================================
   Trip pages — quick facts, inclusions, tabs and the inclusions modal
   ========================================================================== */

.icon{width:1.5rem;height:1.5rem;flex:0 0 auto;display:block}

/* ---------- quick facts strip ---------- */
.quickfacts{background:var(--navy-deep);color:#fff}
.quickfacts-inner{
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(255,255,255,.14);
}
.fact{
  background:var(--navy-deep);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.35rem;
}
.fact .icon{color:var(--lime);width:1.7rem;height:1.7rem;margin-bottom:.35rem}
.fact-label{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8FA6B6}
.fact-value{font-family:var(--head);font-weight:600;font-size:1.05rem;color:#fff;line-height:1.3}

/* ---------- what's included ---------- */
.incl-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.incl{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.8rem 1.6rem;box-shadow:0 2px 14px rgba(0,42,70,.05);
}
.incl-icon{
  width:64px;height:64px;border-radius:50%;background:var(--blue-pale);color:var(--navy);
  display:grid;place-items:center;margin-bottom:1.1rem;
}
.incl-icon .icon{width:2rem;height:2rem}
.incl h3{font-size:1.15rem;margin-bottom:.45rem}
.incl p{font-size:1rem;color:var(--muted);margin:0}
.incl-more{margin-top:2rem;display:flex;justify-content:center}

/* ---------- tabs ---------- */
.tablist{
  display:flex;flex-wrap:wrap;gap:.5rem;border-bottom:2px solid var(--line);
  margin-bottom:2rem;padding-bottom:0;
}
.tablist button{
  background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:.85rem 1.1rem;font-family:var(--body);font-size:1rem;font-weight:700;
  color:var(--muted);cursor:pointer;border-radius:4px 4px 0 0;
}
.tablist button:hover{color:var(--navy);background:rgba(0,137,214,.06)}
.tablist button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--blue)}
.tabpanel{animation:askiya-fade .35s ease}
.tabpanel h3{margin-top:0}
.tabpanel .ticks b{color:var(--navy)}
@keyframes askiya-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.promise-light div{border-top-color:var(--blue)}
.promise-light h4{color:var(--navy);font-family:var(--head);font-size:1.1rem;margin-bottom:.4rem}
.promise-light p{color:var(--muted)}

.workstep{display:grid;grid-template-columns:60px 1fr;gap:1.3rem;align-items:start;margin-bottom:1.8rem}
.workstep-num{
  width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;
  font-family:var(--head);font-weight:700;font-size:1.4rem;display:grid;place-items:center;
}
.workstep h4{font-family:var(--head);font-size:1.2rem;margin-bottom:.35rem}
.workstep p{margin:0;color:var(--muted)}

.steps-light li::before{background:var(--lime);color:var(--navy-deep)}
.section-navy .steps h4{color:#fff}
.section-navy .steps p{color:#C5D6E2}
.section-navy .steps .when{color:#8FD2F5}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:1.2rem}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,26,44,.72);backdrop-filter:blur(2px)}
.modal-panel{
  position:relative;background:#fff;border-radius:var(--radius);max-width:820px;width:100%;
  max-height:88vh;overflow-y:auto;padding:clamp(1.8rem,4vw,2.8rem);
  box-shadow:0 30px 70px rgba(0,26,44,.4);
  animation:askiya-rise .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes askiya-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:.9rem;right:1rem;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--navy);font-size:1.6rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}
.modal-close:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.modal-panel h2{margin-bottom:.4rem}
.modal-panel h3{font-size:1.15rem;margin-top:1.8rem;padding-bottom:.5rem;border-bottom:2px solid var(--line-soft)}
.modal-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}

.incl-list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.9rem}
.incl-list li{display:grid;grid-template-columns:1.6rem 1fr;gap:.85rem;align-items:start;font-size:1rem}
.incl-list .icon{margin-top:.18rem}
.incl-list .ok{color:var(--green)}
.incl-list .no{color:#B5471B}
.incl-list b{color:var(--navy)}

body.modal-open{overflow:hidden}

@media (max-width:700px){
  .workstep{grid-template-columns:48px 1fr;gap:1rem}
  .workstep-num{width:48px;height:48px;font-size:1.2rem}
  .tablist{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tablist button{white-space:nowrap}
}

/* ==========================================================================
   Diagrams
   Drawn inline as SVG, so they inherit the page fonts and these tokens.
   ========================================================================== */

:root{ --rust-diagram:#B5471B; }

.diagram{margin:0;padding:0}
.diagram .dg{width:100%;height:auto;display:block;overflow:visible}
.diagram figcaption{
  margin-top:1.1rem;font-size:.95rem;color:var(--muted);
  padding-left:1rem;border-left:3px solid var(--line);max-width:70ch;
}

/* the two-panel comparison stacks on narrow screens, so each panel
   gets the full column width and its text stays legible */
.diagram-pair{
  display:grid;gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
.diagram-pair .dg{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.6rem 1.4rem;box-shadow:0 2px 14px rgba(0,42,70,.05);
}
.section-sand .diagram-pair .dg{box-shadow:0 2px 14px rgba(0,42,70,.07)}

/* A diagram sitting in a dark band gets a white card, so a navy shape inside
   the diagram still reads against the section behind it. */
.section-navy .diagram figcaption{color:#C5D6E2;border-left-color:rgba(255,255,255,.25)}
.section-navy .diagram .dg{
  background:#fff;border-radius:var(--radius);
  padding:clamp(1.2rem,3vw,2rem);box-shadow:0 8px 30px rgba(0,26,44,.25);
}

/* single-column diagrams read best at a contained width */
.diagram-nucleus .dg,
.diagram-escrow .dg{max-width:620px;margin-inline:auto}

/* ==========================================================================
   Comparison grid (askiya_section_compare)

   A grid of text: the criteria run down the left, one column per thing being
   compared, so the eye reads across a row. Cells are placed explicitly by the
   renderer, which frees the markup to be written in the order a phone needs.

   Below 900px the container stops being a grid, the explicit placements lapse,
   and the markup order shows through as three stacked cards — each carrying
   its own name and its own row labels.
   ========================================================================== */
.compare{
  display:grid;
  grid-template-columns:minmax(140px,.72fr) repeat(var(--cmp-cols,3),minmax(0,1fr));
  column-gap:clamp(.7rem,1.6vw,1.2rem);
  align-items:stretch;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}

/* --- the heading of each column --- */
.cmp-head{padding:0 0 1rem;align-self:end}
.cmp-rule{
  display:block;height:5px;border-radius:3px;
  background:var(--cmp-accent,var(--blue));margin-bottom:.85rem;
}
.cmp-name{
  display:block;font-family:var(--head);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.25;color:var(--navy);
}

/* --- criteria and cells --- */
.cmp-key{
  padding:1.05rem .9rem 1.05rem 0;border-top:1px solid var(--line);
  font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}
.cmp-cell{
  padding:1.05rem 0;border-top:1px solid var(--line);
  font-size:.95rem;line-height:1.6;color:var(--ink);
}
.cmp-cell p{margin:0;font-size:inherit;line-height:inherit}
.cmp-key.is-last,.cmp-cell.is-last{border-bottom:1px solid var(--line)}

.cmp-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.cmp-list li{position:relative;padding-left:1.05rem}
.cmp-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--cmp-accent,var(--blue));
}

/* The answer column is lifted onto a panel so the eye lands on it, while the
   other two stay as plain columns of the same grid. */
.cmp-head.is-lead,.cmp-cell.is-lead{
  background:#fff;
  padding-left:clamp(.85rem,1.7vw,1.25rem);
  padding-right:clamp(.85rem,1.7vw,1.25rem);
  border-top-color:var(--line-soft);
}
.cmp-head.is-lead{
  padding-top:1.1rem;border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:0 -1px 0 var(--line-soft),-1px 0 0 var(--line-soft),1px 0 0 var(--line-soft);
}
.cmp-cell.is-lead{box-shadow:-1px 0 0 var(--line-soft),1px 0 0 var(--line-soft)}
.cmp-cell.is-lead.is-last{
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:-1px 0 0 var(--line-soft),1px 0 0 var(--line-soft),0 1px 0 var(--line-soft),
             0 14px 30px rgba(0,42,70,.07);
}

.cmp-inline-key{display:none}

/* --- the line the comparison was made to arrive at --- */
.cmp-verdict{
  margin-top:clamp(1.8rem,3.5vw,2.4rem);
  padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.3rem,3vw,2rem);
  border-left:4px solid var(--lime);border-radius:var(--radius);
  background:var(--navy);
}
.cmp-verdict h3{margin:0 0 .5rem;color:#fff;font-size:clamp(1.08rem,1.7vw,1.26rem)}
.cmp-verdict p{margin:0;color:#D7E5EF;font-size:1rem;line-height:1.65}

@media (max-width:900px){
  /* No longer a grid, so the explicit row and column placements stop applying
     and the markup order — one thing at a time — is what shows. */
  .compare{display:block}
  .cmp-key{display:none}
  .cmp-head,.cmp-head.is-lead{
    padding:0 0 .9rem;margin-top:2.4rem;background:none;
    box-shadow:none;border-radius:0;
  }
  .cmp-head:first-of-type{margin-top:0}
  .cmp-cell,.cmp-cell.is-lead{
    padding:.85rem 0;background:none;box-shadow:none;border-radius:0;
    border-top:1px solid var(--line-soft);
  }
  .cmp-cell.is-last,.cmp-cell.is-lead.is-last{
    border-bottom:none;box-shadow:none;border-radius:0;background:none;
  }
  .cmp-inline-key{
    display:block;margin-bottom:.3rem;
    font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);
  }
}

@media print{
  .cmp-key,.cmp-cell,.cmp-head,.cmp-verdict{break-inside:avoid}
  .cmp-verdict{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ==========================================================================
   Two-way contrast (askiya_section_contrast)

   The plantation model and the Askiya-Pinder model face each other across the
   criterion they disagree about. A table puts both answers in the same reading
   direction and the opposition goes flat; set facing, with the criterion and a
   turning arrow between them, the inversion is the thing you see first.

   Below 820px it becomes one column: criterion, then each side labeled.
   ========================================================================== */
.contrast{
  display:grid;
  grid-template-columns:1fr minmax(140px,170px) 1fr;
  column-gap:0;row-gap:clamp(.7rem,1.6vw,1rem);
  align-items:stretch;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}

.ct-head{
  align-self:end;padding:0 clamp(1rem,2vw,1.4rem) .9rem;
  font-family:var(--head);font-weight:700;line-height:1.25;
  font-size:clamp(1rem,1.5vw,1.14rem);
}
.ct-head-a{color:var(--muted);text-align:right}
.ct-head-b{color:var(--navy)}

/* the criterion, sitting between the two answers */
.ct-key{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:1rem .6rem;text-align:center;
}
.ct-key-text{
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);line-height:1.45;
}
/* An arrow drawn from a rule and a triangle rather than a glyph, so it keeps
   its weight at any size and prints cleanly. */
.ct-turn{display:block;position:relative;width:34px;height:2px;background:var(--lime);flex:none}
.ct-turn::after{
  content:"";position:absolute;right:-1px;top:50%;
  border:5px solid transparent;border-left:7px solid var(--lime);
  transform:translateY(-50%);
}

.ct-side{
  padding:clamp(.9rem,2vw,1.2rem) clamp(1rem,2vw,1.4rem);
  font-size:.95rem;line-height:1.6;border-radius:var(--radius);
}
.ct-side p{margin:0;font-size:inherit;line-height:inherit}

/* The old arrangement is stated plainly and kept visually quiet — it is the
   thing being argued against, not a second offer. */
.ct-a{
  background:var(--mist);color:var(--muted);text-align:right;
  border-right:3px solid #C8907A;
}
.section-sand .ct-a{background:#EFF3F6}

/* The alternative carries the brand and the weight. */
.ct-b{
  background:var(--navy);color:#E3EDF4;
  border-left:3px solid var(--lime);
}
.ct-b strong,.ct-b b{color:#fff}

.ct-inline-key,.ct-who{display:none}

@media (max-width:820px){
  /* No longer a grid, so the explicit placements lapse and the markup order —
     criterion, then each side — is what shows. */
  .contrast{display:block;margin-top:1.6rem}
  .ct-head{display:none}
  .ct-key{display:none}
  .ct-side{
    text-align:left;border-radius:0;
    padding:.95rem clamp(.9rem,3vw,1.1rem);
  }
  .ct-a{
    border-right:none;border-left:3px solid #C8907A;
    border-radius:var(--radius) var(--radius) 0 0;margin-top:1.4rem;
  }
  .ct-b{border-radius:0 0 var(--radius) var(--radius)}
  .ct-inline-key{
    display:block;margin:0 0 .75rem;
    font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);
  }
  .ct-who{
    display:block;margin-bottom:.25rem;
    font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  }
  .ct-a .ct-who{color:#A4683F}
  .ct-b .ct-who{color:var(--lime)}
}

@media print{
  .ct-side,.ct-key,.ct-head{break-inside:avoid}
  .ct-a,.ct-b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ==========================================================================
   Composition (askiya_section_composition)

   A plus B plus C makes D. The parts run across with plus signs between them
   and the result sits below an equals sign, which is the arrangement that says
   ingredients rather than alternatives. Comparison grids set things against
   each other; this one adds them up.

   Below 880px the parts stack and the operators turn to sit between the rows.
   ========================================================================== */
.compose{
  display:grid;
  grid-template-columns:repeat(var(--cps-n,3),minmax(0,1fr));
  gap:0;align-items:stretch;
  margin-top:clamp(1.8rem,4vw,2.6rem);
  position:relative;
}
.cps-part{
  padding:0 clamp(1.1rem,2.4vw,1.8rem);
  border-left:1px solid var(--line);
}
.cps-part:first-child{padding-left:0;border-left:none}
.cps-rule{
  display:block;height:5px;width:46px;border-radius:3px;
  background:var(--cps-accent,var(--blue));margin-bottom:.95rem;
}
.cps-label{
  margin:0 0 .85rem;font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.25;color:var(--navy);
}
.cps-items{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.cps-items li{
  position:relative;padding-left:1.05rem;font-size:.95rem;line-height:1.55;color:var(--ink);
}
.cps-items li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--cps-accent,var(--blue));
}
/* The limitation of each ingredient, which is the reason the next one is
   needed. Without these the row reads as three nice attributes. */
.cps-note{
  margin:1rem 0 0;padding-top:.85rem;border-top:1px dashed var(--line);
  font-size:.88rem;line-height:1.55;color:var(--muted);font-style:italic;
}
.cps-note span{
  display:block;font-style:normal;font-weight:700;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem;
}

/* The operators sit on the dividing lines rather than taking a column, so the
   parts keep the full measure. */
.cps-op,.cps-equals{
  font-family:var(--head);font-weight:700;color:var(--lime);
  display:grid;place-items:center;line-height:1;
}
.cps-op{
  position:absolute;top:0;width:34px;height:34px;border-radius:50%;
  background:var(--mist);font-size:1.4rem;transform:translateX(-50%);
  border:1px solid var(--line);padding-bottom:2px;
}
.section-sand .cps-op{background:#EFF3F6}
.cps-equals{
  font-size:1.5rem;margin:clamp(1.4rem,3vw,2rem) auto .4rem;
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
}

.cps-result{
  padding:clamp(1.3rem,2.8vw,1.9rem) clamp(1.4rem,3vw,2.1rem);
  border-radius:var(--radius);background:var(--navy);
  border-left:4px solid var(--lime);
}
.cps-result h3{margin:0 0 .5rem;color:#fff;font-size:clamp(1.12rem,1.8vw,1.34rem)}
.cps-result p{margin:0;color:#D7E5EF;font-size:1rem;line-height:1.65}

@media (max-width:880px){
  .compose{grid-template-columns:1fr;position:static}
  .cps-part{
    padding:1.5rem 0 0;border-left:none;border-top:1px solid var(--line);
  }
  .cps-part:first-child{border-top:none;padding-top:0}
  .cps-op{
    position:static;transform:none;margin:1.5rem auto -.3rem;
    width:34px;height:34px;
  }
}

@media print{
  .cps-part,.cps-result,.cps-note{break-inside:avoid}
  .cps-result,.cps-equals,.cps-op{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Amount tiles shown for information rather than selection — the gift itself
   is taken on the donation platform, so these must not look clickable. */
.amounts-static{list-style:none;padding:0}
li.amount{cursor:default}
li.amount:hover{border-color:var(--line)}

/* Phased launch: a note shown only to signed-in editors, on a page that is
   published and working but deliberately kept out of the menus. */
.launch-notice{
  background:#FFF4D6;border-bottom:1px solid #E6D08A;color:#5A4506;
  padding:.85rem var(--gap);font-size:.92rem;line-height:1.5;text-align:center;
}
.launch-notice a{color:#5A4506}
@media print{.launch-notice{display:none}}

/* =====================================================================
   ARTISTIC LAYER — November 2026
   The site's design language is the learning circle on the Experiential
   Learning page: nodes joined by lines, color carrying meaning, nothing
   fenced in a bordered box. Everything below either restyles a shared
   component into that language or adds a custom figure for one section.
   ===================================================================== */
:root{
  --node-1:var(--blue);
  --node-2:#67750E;
  --node-3:var(--teal);
  --node-4:var(--navy);
  --node-5:#B5471B;
  --sand-warm:#FBF7EF;
  --rail:rgba(0,118,184,.28);
}

/* ---------- 1. The stack becomes a path ----------
   A column of points joined by one line, each point a numbered node. */
.stack{counter-reset:stk;gap:0}
.stack > li,.stack > div{
  counter-increment:stk;position:relative;background:none;border:0;box-shadow:none;border-radius:0;
  padding:0 0 2.1rem 3.6rem;
}
.stack > li:last-child,.stack > div:last-child{padding-bottom:0}
.stack > li::before,.stack > div::before{
  content:counter(stk);position:absolute;left:0;top:-.1rem;width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;font:700 .95rem/1 var(--head);color:#fff;background:var(--node,var(--node-1));
  box-shadow:0 0 0 5px rgba(255,255,255,.9),0 0 0 6px var(--node,var(--node-1));
}
.stack > li::after,.stack > div::after{
  content:"";position:absolute;left:calc(1.2rem - 1px);top:2.7rem;bottom:.35rem;width:2px;
  background:linear-gradient(var(--node,var(--node-1)),transparent 140%);opacity:.5;border-radius:2px;
}
.stack > :last-child::after{display:none}
.stack > :nth-child(4n+2){--node:var(--node-2)}
.stack > :nth-child(4n+3){--node:var(--node-3)}
.stack > :nth-child(4n+4){--node:var(--node-4)}
.section-sand .stack > li::before,.section-sand .stack > div::before{box-shadow:0 0 0 5px var(--mist),0 0 0 6px var(--node,var(--node-1))}
.section-navy .stack > li,.section-navy .stack > div{background:none;border:0}
.section-navy .stack > li::before,.section-navy .stack > div::before{
  background:var(--lime);color:var(--navy-deep);box-shadow:0 0 0 5px var(--navy),0 0 0 6px var(--lime)}
.section-navy .stack > li::after,.section-navy .stack > div::after{background:linear-gradient(var(--lime),transparent 140%)}
.stack .kicker{margin-bottom:.3rem}

/* ---------- 2. Blocks, tiles, quarters and flows become a constellation ----------
   Points laid along a line, each with a colored node, the line running on
   to the next. No fences. */
.blocks,.tiles,.quarters,.flow{gap:2.2rem 1.8rem;overflow-x:clip}
.blocks li,.tile,.quarter,.flow > li{
  position:relative;background:none;border:0;box-shadow:none;border-radius:0;padding:2.9rem 0 0;
}
.blocks li::before,.tile::before,.quarter::before{
  content:"";position:absolute;left:0;top:0;width:1.35rem;height:1.35rem;border-radius:50%;
  background:#fff;border:5px solid var(--node,var(--node-1));
}
.blocks li::after,.tile::after,.quarter::after,.flow > li::after{
  content:"";position:absolute;top:.62rem;left:1.9rem;right:-1.8rem;height:2px;
  background:repeating-linear-gradient(90deg,var(--node,var(--node-1)) 0 8px,transparent 8px 14px);opacity:.45;
}
.blocks li:last-child::after,.tile:last-child::after,.quarter:last-child::after,.flow > li:last-child::after{right:0}
.blocks li:nth-child(4n+2),.tile:nth-child(4n+2),.quarter:nth-child(4n+2),.flow > li:nth-child(4n+2){--node:var(--node-2)}
.blocks li:nth-child(4n+3),.tile:nth-child(4n+3),.quarter:nth-child(4n+3),.flow > li:nth-child(4n+3){--node:var(--node-3)}
.blocks li:nth-child(4n+4),.tile:nth-child(4n+4),.quarter:nth-child(4n+4),.flow > li:nth-child(4n+4){--node:var(--node-4)}
.blocks-rust li{--node:var(--lime)}
.section-sand .blocks li::before,.section-sand .tile::before,.section-sand .quarter::before{background:var(--mist)}
.section-navy .blocks li,.section-navy .quarter,.section-navy .tile{background:none;border:0}
.section-navy .blocks li::before,.section-navy .tile::before,.section-navy .quarter::before{background:var(--navy);border-color:var(--lime)}
.section-navy .blocks li::after,.section-navy .tile::after,.section-navy .quarter::after{
  background:repeating-linear-gradient(90deg,var(--lime) 0 8px,transparent 8px 14px)}
.section-navy .tile p{color:#C5D6E2}
.flow > li{display:flex;flex-direction:column;gap:.55rem}
.flow > li::before{position:absolute;left:0;top:-.3rem;background:var(--node,var(--node-1));
  box-shadow:0 0 0 5px #fff}
.section-sand .flow > li::before{box-shadow:0 0 0 5px var(--mist)}
.section-navy .flow > li{background:none;border:0}
.section-navy .flow > li::before{box-shadow:0 0 0 5px var(--navy)}
.quarter .when,.tile .when{margin-bottom:.35rem}

/* ---------- 3. Cards: an arched photograph and open text ---------- */
.card{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
.card > img.ph,.card > img,.card > a > img{border-radius:999px 999px 22px 22px;box-shadow:0 18px 40px -26px rgba(0,42,70,.55)}
.cards > .card:nth-child(3n+2) > img.ph,.cards > .card:nth-child(3n+2) > img{border-radius:22px 22px 999px 999px}
.card-body{padding:1.4rem .2rem 0}
.card:not(:has(> img)):not(:has(> a > img)) .card-body{position:relative;padding:2.9rem 0 0}
.card:not(:has(> img)):not(:has(> a > img)) .card-body::before{
  content:"";position:absolute;left:0;top:0;width:1.35rem;height:1.35rem;border-radius:50%;
  background:#fff;border:5px solid var(--node,var(--node-1))}
.cards > .card:nth-child(3n+2){--node:var(--node-2)}
.cards > .card:nth-child(3n+3){--node:var(--node-3)}
.section-navy .card h3{color:#fff}
.section-navy .card-body p{color:#C5D6E2}
.section-navy .card-eyebrow{color:#8FD2F5}
.section-navy .card .textlink{color:#fff;border-bottom-color:var(--lime)}
.section-navy .card:not(:has(> img)) .card-body::before{background:var(--navy);border-color:var(--lime)}

/* ---------- 4. Sliders and galleries, softened ---------- */
.swipe-track > li{border:0;border-radius:28px;box-shadow:none;background:#fff}
.section-white .swipe-track > li{background:var(--mist)}
.section-navy .swipe-track > li{background:var(--navy-soft);border:0}
.gallery img.ph{border-radius:28px}
.gallery li:nth-child(odd) img.ph{border-radius:999px 999px 28px 28px}

/* ---------- 5. The horizontal timeline (Our Story) ---------- */
.htl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem;position:relative}
.htl::before{content:"";position:absolute;left:0;right:0;top:1.35rem;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--node-1),var(--node-2),var(--node-3),var(--node-4))}
.htl::after{content:"";position:absolute;right:-6px;top:calc(1.35rem - 7px);border:9px solid transparent;border-left:13px solid var(--node-4);border-right:0}
.htl > li{position:relative;padding-top:4.2rem}
.htl > li::before{content:"";position:absolute;left:0;top:.35rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:#fff;border:6px solid var(--node,var(--node-1))}
.htl > li:nth-child(2){--node:var(--node-2)}.htl > li:nth-child(3){--node:var(--node-3)}.htl > li:nth-child(4){--node:var(--node-4)}
.htl-place{display:inline-block;font:800 .74rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--node,var(--node-1));padding:.45rem .8rem;border-radius:var(--pill);margin-bottom:.8rem}
.htl h4{font-family:var(--head);font-weight:600;margin-bottom:.4rem}
.htl p{font-size:1rem;color:var(--muted);margin:0}
.htl-ends{display:flex;justify-content:space-between;font:800 .8rem var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-mid);margin:0 0 .7rem}
.section-sand .htl > li::before{background:var(--mist)}
@media (max-width:860px){
  .htl{grid-template-columns:1fr;gap:0}
  .htl::before{left:1.15rem;right:auto;top:.5rem;bottom:.5rem;width:4px;height:auto;
    background:linear-gradient(var(--node-1),var(--node-2),var(--node-3),var(--node-4))}
  .htl::after{display:none}
  .htl > li{padding:0 0 2rem 3.6rem}
  .htl > li::before{top:0}
  .htl-ends{display:none}
}

/* ---------- 6. The before-and-after story path (Our Story pilot) ---------- */
.journey{display:grid;grid-template-columns:minmax(0,.85fr) 120px minmax(0,1.25fr);align-items:start;gap:0 1rem}
.journey-from{position:sticky;top:var(--sticky-top);padding:2.2rem 2rem 2.4rem;border-radius:200px 200px 32px 32px;
  background:linear-gradient(170deg,#F6EEDC 0%,#EAF0D6 100%);text-align:center;
  box-shadow:inset 0 0 0 2px rgba(159,177,36,.35)}
.journey-from::before{content:"";display:block;width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;
  background:radial-gradient(circle,#F2B33D 0 38%,transparent 40%),repeating-conic-gradient(#F2B33D 0 8deg,transparent 8deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 0 70%,transparent 71%);mask:radial-gradient(circle,#000 0 70%,transparent 71%)}
.journey-tag{display:inline-block;font:800 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--navy);padding:.5rem .9rem;border-radius:var(--pill);margin-bottom:1rem}
.journey-to .journey-tag{background:var(--node-3)}
.journey-from .journey-big{font:600 clamp(1.35rem,2.2vw,1.75rem)/1.28 var(--head);color:var(--navy);margin:0 0 1rem}
.journey-from p{font-size:1rem;color:var(--ink)}
.journey-arrow{width:100%;height:auto;margin-top:7rem;overflow:visible;position:sticky;top:calc(var(--sticky-top) + 7rem)}
.journey-end{margin-top:2.4rem;display:flex;gap:1.1rem;align-items:center;padding:1.3rem 1.6rem;
  border-radius:var(--pill);background:var(--navy);color:#fff}
.journey-end::before{content:"";flex:0 0 2.4rem;height:2.4rem;border-radius:50%;background:var(--lime)}
.journey-end p{margin:0;font:600 1.08rem/1.4 var(--head);color:#fff}
@media (max-width:900px){
  .journey{grid-template-columns:1fr}
  .journey-from{position:static;border-radius:160px 160px 28px 28px}
  .journey-arrow{width:70px;margin:.6rem auto;transform:rotate(90deg);position:static}
  .journey-end{border-radius:28px}
}

/* ---------- 7. Guiding lights: medallions and quotes ---------- */
.lights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem 2rem;position:relative}
.lights::before{content:"";position:absolute;left:12%;right:12%;top:74px;height:2px;
  background:repeating-linear-gradient(90deg,var(--lime) 0 3px,transparent 3px 11px)}
.lights > li{position:relative;text-align:center}
.light-medal{position:relative;width:124px;height:124px;margin:12px auto 1.3rem;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,var(--tint,#E4F1FA) 70%);border:3px solid var(--node,var(--node-1));
  font:700 1.55rem/1 var(--head);color:var(--node,var(--node-1));letter-spacing:.02em}
.light-medal::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px dashed var(--node,var(--node-1));opacity:.35}
.light-medal small{display:block;font:800 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-top:.35rem;opacity:.75}
.lights > li:nth-child(1){--node:#8A6A12;--tint:#F5EBCB}
.lights > li:nth-child(2){--node:var(--teal);--tint:#E2F0EA}
.lights > li:nth-child(3){--node:var(--blue);--tint:#E4F1FA}
.lights > li:nth-child(4){--node:#67750E;--tint:#F1F4E0}
.lights h4{font-family:var(--head);font-weight:600;margin:0 0 .15rem}
.light-when{display:block;font:800 .74rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.lights blockquote{margin:0;font:italic 500 1.12rem/1.45 var(--head);color:var(--navy)}
.lights blockquote::before{content:"\201C";display:block;font:700 2.4rem/0.6 Georgia,serif;color:var(--node);margin-bottom:.5rem}
.light-note{font-size:.92rem;color:var(--muted);margin:.8rem 0 0}
@media (max-width:1000px){.lights{grid-template-columns:repeat(2,minmax(0,1fr))}.lights::before{display:none}}
@media (max-width:560px){.lights{grid-template-columns:1fr}}

/* ---------- 8. Connected figures: a hub with nodes around it ----------
   Lines between the hub and each node are drawn by theme.js, so the
   layout can reflow freely and the lines follow. */
.web{position:relative}
.web-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.web-lines path{fill:none;stroke-width:2;stroke-dasharray:3 8;stroke-linecap:round}
.web > *:not(.web-lines){position:relative;z-index:1}

/* Who it is for: Askiya in the middle, three audiences around it */
.orbit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a hub c" "a b c";gap:2.2rem 2.6rem;align-items:start}
.orbit-hub{grid-area:hub;justify-self:center;align-self:center;width:210px;height:210px;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:var(--navy);color:#fff;padding:1.4rem;
  box-shadow:0 0 0 12px rgba(0,63,103,.08),0 0 0 26px rgba(0,63,103,.04)}
.orbit-hub b{display:block;font:700 1.5rem/1.1 var(--head);color:#fff}
.orbit-hub span{display:block;font-size:.85rem;color:#C5D6E2;margin-top:.4rem;line-height:1.3}
.orbit-node{text-align:center}
.orbit-node:nth-of-type(2){grid-area:a;margin-top:1rem}
.orbit-node:nth-of-type(3){grid-area:b;margin-top:1.6rem}
.orbit-node:nth-of-type(4){grid-area:c;margin-top:1rem}
.orbit-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;display:block;
  border:6px solid #fff;box-shadow:0 0 0 3px var(--node,var(--node-1)),0 16px 34px -20px rgba(0,42,70,.6)}
.orbit-node:nth-of-type(3){--node:var(--node-2)}
.orbit-node:nth-of-type(4){--node:var(--node-3)}
.orbit-node h4{font-family:var(--head);font-weight:600;margin-bottom:.35rem}
.orbit-node p{font-size:1rem;color:var(--muted);margin:0 auto;max-width:30ch}
.orbit .web-lines path{stroke:var(--blue)}
@media (max-width:820px){
  .orbit{grid-template-columns:1fr;grid-template-areas:none;gap:2rem}
  .orbit-node:nth-of-type(n){grid-area:auto;margin-top:0}
  .orbit-hub{grid-area:auto;width:170px;height:170px}
}

/* How it works: picture on one side, the path on the other */
.mv-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.mv-split-media{position:sticky;top:var(--sticky-top)}
.mv-split-media a{display:block}
.mv-split-media img{width:100%;border-radius:32px;box-shadow:0 22px 50px -30px rgba(0,42,70,.6);background:#fff}
@media (max-width:860px){.mv-split{grid-template-columns:1fr}.mv-split-media{position:static}}

/* Critical elements: five parts around the village */
.elements{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"a hub b" "c hub d" ". e .";gap:2.4rem 3rem;align-items:center}
.el-hub{grid-area:hub;justify-self:center;width:min(100%,330px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-align:center;padding:2.4rem;
  background:radial-gradient(circle at 50% 40%,#fff 0,#FBF7EF 60%,#F1E6CF 100%);
  box-shadow:0 0 0 10px rgba(159,177,36,.16),0 0 0 22px rgba(159,177,36,.07)}
.el-hub b{display:block;font:700 clamp(1.5rem,2.6vw,2rem)/1.05 var(--head);color:var(--navy);margin-bottom:.8rem}
.el-hub p{margin:0;font:italic 500 1rem/1.4 var(--head);color:#5B4A1E}
.el{position:relative;background:none}
.el-a{grid-area:a}.el-b{grid-area:b}.el-c{grid-area:c}.el-d{grid-area:d}.el-e{grid-area:e;text-align:center}
.el-b,.el-d{text-align:left}
.el-a,.el-c{text-align:right}
.el-icon{width:58px;height:58px;border-radius:50%;display:inline-grid;place-items:center;background:var(--node);color:#fff;margin-bottom:.7rem;
  box-shadow:0 0 0 6px #fff,0 0 0 8px var(--node)}
.el-icon svg{width:28px;height:28px}
.el h3{font-size:1.2rem;margin-bottom:.5rem}
.el ul{list-style:none;margin:0;padding:0;font-size:.97rem;color:var(--muted);line-height:1.5}
.el ul{display:flex;flex-wrap:wrap;gap:.35rem .4rem}
.el-a ul,.el-c ul{justify-content:flex-end}.el-e ul{justify-content:center}
.el li{display:inline-block;white-space:nowrap;font-size:.86rem;padding:.22rem .65rem;border-radius:var(--pill);background:#fff;border:1px solid color-mix(in srgb,var(--node) 35%,transparent);color:var(--ink)}
@media (max-width:900px){.el ul,.el-a ul,.el-c ul,.el-e ul{justify-content:flex-start}}
.el-a{--node:#4EA72E}.el-b{--node:#B5471B}.el-c{--node:var(--blue)}.el-d{--node:#8A6A12}.el-e{--node:var(--teal)}
.elements .web-lines path{stroke:var(--lime);stroke-dasharray:2 9;stroke-width:2.5}
.section-sand .el-icon{box-shadow:0 0 0 6px var(--mist),0 0 0 8px var(--node)}
@media (max-width:900px){
  .elements{grid-template-columns:1fr;grid-template-areas:"hub" "a" "b" "c" "d" "e";gap:2rem}
  .el,.el-a,.el-b,.el-c,.el-d,.el-e{text-align:left;padding-left:4.6rem}
  .el-icon{position:absolute;left:0;top:0}
  .el-hub{width:min(100%,280px)}
}

/* ---------- 9. The Sustainable Development Goals ---------- */
.sdg-strip{list-style:none;margin:0 0 clamp(2.2rem,5vw,3.2rem);padding:0;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:6px}
.sdg-strip li{aspect-ratio:1;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;min-width:0}
.sdg-strip b{font:700 clamp(.95rem,1.8vw,1.5rem)/1 var(--head)}
.sdg-strip span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sdg-strip .dark{color:#1D2A33}
@media (max-width:640px){.sdg-strip{grid-template-columns:repeat(9,minmax(0,1fr))}}
.sdg-groups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem}
.sdg-groups > li{position:relative;padding-top:1.1rem;border-top:3px solid var(--line)}
.sdg-groups h3{font-size:1.08rem;margin:.6rem 0 .4rem}
.sdg-groups p{font-size:.95rem;color:var(--muted);margin:0 0 .4rem}
.sdg-chips{display:flex;flex-wrap:wrap;gap:4px}
.sdg-chips i{font-style:normal;width:1.7rem;height:1.7rem;border-radius:6px;display:grid;place-items:center;
  font:700 .78rem/1 var(--head);color:#fff;background:var(--c)}
.sdg-chips i.dark{color:#1D2A33}
.sdg-groups details.more summary{font-size:.92rem}
.sdg-groups details.more p{font-size:.93rem}
@media (max-width:980px){.sdg-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sdg-groups{grid-template-columns:1fr}}

/* ---------- 10. Three pillars standing on the land ---------- */
.pillars{--p1:#3D7A2A;--p2:var(--blue-mid);--p3:#8A6A12}
.pillars-figure{max-width:880px;margin:0 auto}
.pillars-roof{position:relative;height:clamp(70px,9vw,104px);clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,var(--navy),var(--navy-deep));display:grid;place-items:end center;padding-bottom:.7rem}
.pillars-roof span{font:700 clamp(.82rem,1.5vw,1.05rem)/1 var(--head);color:#fff;letter-spacing:.06em;text-transform:uppercase}
.pillars-beam{height:14px;background:var(--navy);margin:0 -2%;border-radius:3px}
.pillars-cols{display:grid;grid-template-columns:repeat(3,1fr);padding:0 4%}
.pillar-shaft{position:relative;margin:0 auto;width:56%;height:clamp(170px,22vw,250px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 14px),var(--pc);
  display:grid;place-items:center;text-align:center;padding:0 .4rem}
.pillar-shaft::before,.pillar-shaft::after{content:"";position:absolute;left:-14%;right:-14%;height:14px;background:var(--pc);border-radius:3px;filter:brightness(.85)}
.pillar-shaft::before{top:0}.pillar-shaft::after{bottom:0}
.pillar-shaft span{font:700 clamp(.78rem,1.4vw,1.05rem)/1.2 var(--head);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pillars-cols > :nth-child(1){--pc:var(--p1)}.pillars-cols > :nth-child(2){--pc:var(--p2)}.pillars-cols > :nth-child(3){--pc:var(--p3)}
.pillars-ground{position:relative;margin:0 -4%;padding:1.5rem 1rem 1.2rem;text-align:center;border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(180deg,#8B5A2B 0 10px,#B07A45 10px,#C79A62 100%);color:#fff}
.pillars-ground::before{content:"";position:absolute;left:0;right:0;top:-12px;height:14px;
  background:radial-gradient(circle at 8px 14px,#4EA72E 7px,transparent 8px) 0 0/22px 14px repeat-x}
.pillars-ground span{font:600 clamp(.85rem,1.5vw,1.02rem)/1.3 var(--head)}
.pillars-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:clamp(2rem,4vw,2.8rem)}
.pillars-text > div{position:relative;padding-top:1rem;border-top:4px solid var(--pc)}
.pillars-text > :nth-child(1){--pc:var(--p1)}.pillars-text > :nth-child(2){--pc:var(--p2)}.pillars-text > :nth-child(3){--pc:var(--p3)}
.pillars-text h4{font-family:var(--head);font-weight:600;margin-bottom:.4rem;color:var(--pc)}
.pillars-text p{font-size:1rem;color:var(--muted);margin:0 0 .5rem}
@media (max-width:760px){.pillars-text{grid-template-columns:1fr}}

/* ---------- 11. Photos sized to their place ---------- */
.estate-intro{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:center}
.estate-intro + .estate-intro{margin-top:clamp(2rem,4vw,3rem)}
.estate-intro.flip{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.estate-intro.flip > .estate-media{order:-1}
.estate-media a{display:block}
.estate-media img{width:100%;border-radius:24px;background:#fff;box-shadow:0 18px 40px -28px rgba(0,42,70,.6)}
.estate-media .figcap{font-size:.8rem}
@media (max-width:760px){.estate-intro,.estate-intro.flip{grid-template-columns:1fr}.estate-media{max-width:420px}}

/* the In the news entry that carries a photograph */
.coverage-item.has-photo{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:2rem;align-items:start}
.coverage-photo{margin:0}
.coverage-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;border-radius:999px 999px 22px 22px}
.coverage-photo figcaption{font-size:.85rem;line-height:1.4;color:var(--muted);margin-top:.7rem;font-style:italic}
@media (max-width:700px){.coverage-item.has-photo{grid-template-columns:1fr}.coverage-photo{max-width:230px}}

/* concept label on illustrated or rendered images */
.concept-tag{display:inline-block;font:800 .7rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  background:var(--lime);color:var(--navy-deep);padding:.42rem .75rem;border-radius:var(--pill);margin-top:.8rem}
.flow > li::after{top:.75rem;left:2.7rem}
@media (max-width:600px){
  .pillar-shaft{width:80%;height:150px;padding:0 .15rem}
  .pillar-shaft span{font-size:.66rem;line-height:1.15}
  .pillars-cols{padding:0 2%}
}

/* =====================================================================
   ROUND TWO — November 2026
   ===================================================================== */

/* ---------- Rolling panels ---------- */
.panels-on main > section.panel{position:sticky;box-shadow:0 -18px 40px -24px rgba(0,30,50,.35)}
.panels-on main > section.panel:first-child{box-shadow:none}
.panels-on main > section.panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:#00182a;opacity:calc(var(--cover,0) * .38);z-index:50}
.panels-on main > section.panel > .wrap{translate:0 calc(var(--cover,0) * -24px);scale:calc(1 - var(--cover,0) * .025);transform-origin:50% 0}
/* a section never hides the end of the one above it: the overlap is paid
   for with extra room at the bottom of every section */
main > section.section:not(:last-child){padding-bottom:calc(var(--sec-pad-b,clamp(3.6rem,7vw,6.5rem)) + var(--panel-lift))}
main > section.section-tight:not(:last-child){--sec-pad-b:clamp(2.4rem,4.5vw,3.6rem)}

/* ---------- Lightbox ---------- */
a.zoomable{position:relative;display:block;cursor:zoom-in}
a.zoomable::after{content:"\2922  Enlarge";position:absolute;right:.8rem;bottom:.8rem;
  font:800 .7rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(0,30,50,.72);padding:.5rem .7rem;border-radius:var(--pill);opacity:.92;pointer-events:none}
a.zoomable:hover::after,a.zoomable:focus-visible::after{opacity:1;background:var(--blue)}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,18,32,.88);display:grid;place-items:center;padding:3.6rem 1rem 1rem}
.lightbox[hidden]{display:none}
.lightbox-fig{margin:0;max-width:min(96vw,1600px);max-height:calc(100vh - 5rem);display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lightbox-fig img{max-width:100%;max-height:calc(100vh - 8rem);object-fit:contain;border-radius:12px;background:#fff}
.lightbox-fig figcaption{color:#DCE9F2;font-size:.95rem;text-align:center;max-width:70ch}
.lightbox-close{position:fixed;top:1rem;right:1rem;width:2.8rem;height:2.8rem;border-radius:50%;border:0;
  background:#fff;color:var(--navy);font-size:1.7rem;line-height:1;cursor:pointer}

/* ---------- Slider cue ---------- */
.swipe{position:relative}
.swipe-hint{margin:0 auto 0 0;align-self:center;font:700 .82rem/1.3 var(--body);color:var(--blue-mid)}
.swipe-hint span{display:inline-block;margin-right:.35rem;animation:hintslide 1.8s ease-in-out infinite}
.section-navy .swipe-hint{color:#8FD2F5}
.swipe-nav .swipe-count{margin-right:0}
.swipe .swipe-track{-webkit-mask-image:none;mask-image:none}
.swipe.has-more .swipe-track{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.swipe.has-more.has-back .swipe-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
.swipe-nav button.nudge:not([disabled]){animation:nudge 1.6s ease-in-out infinite;background:var(--navy);color:#fff;border-color:var(--navy)}
.section-navy .swipe-nav button.nudge:not([disabled]){background:var(--lime);color:var(--navy-deep);border-color:var(--lime)}
@keyframes nudge{0%,100%{transform:translateX(0);box-shadow:0 0 0 0 rgba(0,118,184,.45)}50%{transform:translateX(4px);box-shadow:0 0 0 8px rgba(0,118,184,0)}}
@keyframes hintslide{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.swipe-nav button.nudge,.swipe-hint span{animation:none}}

/* ---------- Shared helpers for round-two layouts ---------- */
/* A heading on the left, its text on the right: fills the width */
.split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:start}
.split-head h2{margin:0}
.split-head > div > p:first-child{margin-top:.2rem}
@media (max-width:860px){.split-head{grid-template-columns:1fr}}
/* text beside a picture, both halves used */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4rem);align-items:center}
.duo-60{grid-template-columns:minmax(0,.68fr) minmax(0,1fr)}
.duo-media img{width:100%;display:block;border-radius:28px;box-shadow:0 22px 50px -32px rgba(0,42,70,.6);background:#fff}
.duo-media .figcap{margin-top:.6rem}
.duo-media.arch img{border-radius:999px 999px 28px 28px}
@media (max-width:860px){.duo,.duo-60{grid-template-columns:1fr}}
/* a standout statement */
.pullquote{position:relative;margin:clamp(2rem,4vw,3rem) 0 0;padding:.2rem 0 .2rem 1.6rem;border-left:5px solid var(--lime);
  font:italic 600 clamp(1.35rem,2.6vw,2rem)/1.3 var(--head);color:var(--navy);max-width:34ch}
.section-navy .pullquote{color:#fff}
/* a button that sits beside a heading */
.head-with-action{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem}
.head-with-action > :first-child{flex:1 1 34rem}
.head-with-action > .btn,.head-with-action > .btn-row{flex:0 0 auto;margin-bottom:2.6rem}
.card-status{align-self:flex-start;width:fit-content;justify-self:start}

/* the next card peeks in at the edge, so the fade sits on it and not on a card being read */
@media (min-width:900px){.swipe:not(.swipe-solo) .swipe-track > li{flex:0 0 calc(31% - .8rem)}}
.nav .menu-overview > a{font-weight:800}
.nav .menu-overview{border-bottom:1px solid var(--line-soft)}

/* Round three: a quieter page. Only the panels the script marks hold and
   roll; the rest just scroll, with a gentle rounded seam between them. */
.panels-on main > section:not(.panel){box-shadow:none}
.panels-on main > section.panel.cta,.panels-on main > section.panel[data-roll]{box-shadow:0 -18px 40px -24px rgba(0,30,50,.35)}
.panels-on main > section.panel:not(.cta):not([data-roll]){box-shadow:none}
/* Round three: Our work > MakerVillages > Daieplay is four levels deep.
   On a wide screen there is room to keep flying right, which reads as a
   path instead of covering the column you came from. */
.nav .sub-menu li{position:relative}
@media (min-width:821px){
  /* the fourth level sits indented inside the third, always open */
  .nav .sub-menu .sub-menu li.menu-item-has-children{flex-wrap:wrap}
  .nav .sub-menu .sub-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;flex:1 1 100%;
    min-width:0;padding:0 0 .35rem;margin:0 0 0 1.1rem;border:0;border-left:2px solid var(--blue-pale);border-radius:0;box-shadow:none;background:transparent}
  .nav .sub-menu .sub-menu .sub-menu a{font-size:.92rem;padding-top:.4rem;padding-bottom:.4rem}
  .nav .sub-menu .sub-menu li.menu-item-has-children > .submenu-toggle{display:none}
  .nav .sub-menu .sub-menu .sub-menu .menu-overview{display:none}
}
/* Round four: seven top-level items. Keep them on one line on smaller laptops and tablets. */
@media (min-width:821px){.nav > li > a{white-space:nowrap}}
@media (min-width:821px) and (max-width:1180px){
  .nav{gap:0 .1rem}
  .nav > li > a{font-size:.86rem;padding-left:.45rem;padding-right:.45rem}
  .nav > li > a.btn{padding:.5rem .85rem}
  .brand img{height:46px;width:auto}
  .nav .submenu-toggle{width:1.1rem}
}

/* Quotes in a readable handwritten script (Dancing Script). */
:root{--script:"Dancing Script","Segoe Script","Bradley Hand",cursive}
.pullquote,.pull p,.lights blockquote{font-family:var(--script)!important;font-style:normal!important;font-weight:600!important;letter-spacing:.005em}
.pullquote{font-size:clamp(1.65rem,3.1vw,2.45rem)!important;line-height:1.22!important}
.pull p{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.22}
.lights blockquote{font-size:1.4rem!important;line-height:1.3!important}
.pullquote cite,.pq-cite,.pull cite{font-family:var(--body,inherit);font-style:normal}

/* Three people: plus-sign dropdowns for "In the model" and "At Daieplay" */
.lineage-where details{border-bottom:1px solid rgba(0,42,70,.12)}
.lineage-where details:last-child{border-bottom:0}
.lineage-where summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 0;font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-soft)}
.lineage-where summary::-webkit-details-marker{display:none}
.lineage-where summary::after{content:"+";flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;
  background:#fff;color:var(--blue);font-size:1.15rem;font-weight:700;letter-spacing:0;box-shadow:0 0 0 1px rgba(0,63,103,.14)}
.lineage-where details[open] > summary::after{content:"\2212"}
.lineage-where summary:hover{color:var(--navy)}
.lineage-where details > :not(summary){font-size:.95rem;color:var(--ink,#1d2b36);line-height:1.55;margin:0 0 .8rem}
.lineage-where details ul{padding-left:1.1rem;display:grid;gap:.45rem}
.lineage-where details a{font-weight:700}
.lineage-fig{display:block;width:100%;height:auto;border-radius:14px;background:#fff;margin:.4rem 0 .9rem}
@media (min-width:861px){.lineage-where{align-self:start}}

/* Where it starts: the question set as a handwritten quote */
.script-question{font-family:var(--script)!important;font-weight:600!important;font-style:normal;letter-spacing:0;
  font-size:clamp(2.1rem,4.6vw,3.6rem)!important;line-height:1.15!important;color:#fff;margin:.2rem 0 1rem}
.script-question-note{font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FD2F5;margin:0}

/* About: the early-work numbers, with a lead-in and a way into the story */
.stats-story .stats-lead,.stats-story .stats-foot{padding-left:0;padding-right:0}
.stats-story .stats-lead{padding-top:clamp(3rem,5.5vw,4.5rem)}
.stats-story .stats-lead p{max-width:46rem}
.stats-story .stats-lead .kicker{color:#E3F2FB}
.stats-story .stats-lead h2{color:#fff;margin:.2rem 0 .8rem}
.stats-story .stats-lead p{color:#EAF5FC;margin:0}
.stats-story .stats-inner{padding-top:clamp(1.8rem,3.5vw,2.6rem);padding-bottom:clamp(1.4rem,3vw,2rem)}
.stats-story .stats-foot{padding-bottom:clamp(3rem,5.5vw,4.5rem)}
.stats-story .stats-foot .btn-row{margin-top:0}

/* About: the six decisions now sit inside the Askiya-Pinder Model section */
.pinder-inversion-head{margin-top:clamp(3rem,6vw,4.5rem);scroll-margin-top:var(--sticky-top,90px)}
#askiya-pinder-model .versus{background:#fff;border-radius:18px;padding:clamp(.6rem,1.5vw,1rem)}

/* About: the question opens Our story, full width */
.story-question{margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.story-question .script-question{max-width:none;color:var(--navy)}
.story-question .script-question-note{color:var(--blue-mid)}
.section-navy .story-question .script-question{color:#fff}
/* the lesson of the camp beside what it means, closing the story */
.camp-lesson{margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid rgba(0,42,70,.12);align-items:center}
.camp-lesson .pull{margin:0}
.camp-lesson .duo > div > p:first-child,.camp-lesson > div > p:first-child{font-size:1.12rem;margin-top:0}
/* numbers band: one wrap so everything reveals together */
.stats-story > .wrap{padding-top:clamp(3rem,5.5vw,4.5rem);padding-bottom:clamp(3rem,5.5vw,4.5rem)}
.stats-story .stats-lead{padding:0;margin-bottom:clamp(1.6rem,3vw,2.2rem);align-items:end}
.stats-story .stats-lead p{max-width:none;margin:0}
.stats-story .stats-inner{padding:0 0 clamp(1.4rem,3vw,2rem)}
.stats-story .stats-foot{padding:0;margin:0}

/* ===== Third round ===== */

/* ===== Third round ===== */
/* Buttons: teal and green, and a larger size for buttons that should stand out */
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover,.btn-teal:focus{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-green{background:#2F8A3E;color:#fff;border-color:#2F8A3E}
.btn-green:hover,.btn-green:focus{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-lg{font-size:1.08rem;padding:1rem 1.9rem}
.nav a.btn-green,.nav a.btn-green:hover,.nav a.btn-green:focus{color:#fff}
@media (min-width:821px){.nav > li > a.btn-green{margin-right:.35rem}}

/* Drawings sit on the page like the photos do */
.ph-drawing{display:block;width:100%;height:auto;border-radius:var(--radius,18px);background:#FBF7EF}
.row-credit + .pull{margin-top:1.4rem}

/* Formula tags: show the Community Success Formula at work */
.formula-tag{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .45rem;padding:.28rem .7rem;border-radius:999px;
  font:800 .68rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--blue-pale);color:var(--navy)}
.formula-tag::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--lime)}

/* Discover more, at the foot of every page */
.discover-band{padding:clamp(2.6rem,5vw,3.6rem) 0;background:var(--mist);border-top:1px solid rgba(0,42,70,.08)}
.discover-band .discover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.discover-band h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:.2rem 0 0}
.discover-band .tagrow{margin:0}
.discover-band .tagrow a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:760px){.discover-band .discover{grid-template-columns:1fr}}

/* Little villagers that pop up beside what matters most on each page */
.villager-spot{position:relative}
.villager{position:absolute;width:58px;height:78px;pointer-events:none;z-index:3}
.villager svg{width:100%;height:100%;overflow:visible}
.villager-tr{right:clamp(6px,2vw,24px);top:-62px}
.villager-tl{left:clamp(6px,2vw,24px);top:-62px}
.villager .vg-body{transform-origin:50% 100%;animation:vg-bob 2.6s ease-in-out infinite}
.villager .vg-tool{transform-box:fill-box;transform-origin:20% 10%;animation:vg-swing 1.6s ease-in-out infinite}
.villager .vg-page{transform-box:fill-box;transform-origin:0 50%;animation:vg-page 3.4s ease-in-out infinite}
@keyframes vg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes vg-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(16deg)}}
@keyframes vg-page{0%,80%,100%{transform:scaleX(1)}88%{transform:scaleX(-.2)}}
.villager{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.villager.is-up{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.villager .vg-body,.villager .vg-tool,.villager .vg-page{animation:none}.villager{transition:none}}
@media (max-width:620px){.villager{width:44px;height:60px}.villager-tr,.villager-tl{top:-48px}}
.btn-sm{font-size:.9rem;padding:.6rem 1.15rem}
/* Three program buttons on one line */
.btn-row-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.btn-row-three .btn{padding:.75rem .7rem;font-size:.92rem;text-align:center;justify-content:center;white-space:normal;line-height:1.2}
@media (max-width:520px){.btn-row-three{grid-template-columns:1fr}}
/* A one-line section */
.section-tight{padding-top:clamp(2.2rem,4vw,3rem);padding-bottom:clamp(2.2rem,4vw,3rem)}
.one-liner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem}
/* Three pillars beside the palava hut drawing */
.pillars-hut{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:start}
.pillars-hut .pillars-text{grid-template-columns:1fr;gap:1.4rem;margin-top:0}
.pillars-hut .pillars-art{position:sticky;top:calc(var(--sticky-top,90px) + 1rem)}
.pillars-hut .pillars-art img{max-width:440px;margin-left:auto}
.pillars-text details.more + details.more{margin-top:.3rem}
@media (max-width:860px){.pillars-hut{grid-template-columns:1fr}.pillars-hut .pillars-art{position:static;order:-1}.pillars-hut .pillars-art img{margin:0 auto;max-width:360px}}
/* The full model: a sideways accordion */
.model-lead{font-size:1.08rem;font-weight:500;color:var(--navy)}
.model-accordion .model-part-head{cursor:pointer}
@media (min-width:900px){
  .model-accordion.is-ready{display:flex;gap:1rem;align-items:stretch}
  .model-accordion.is-ready > .model-part{margin:0;flex:0 0 7.2rem;display:block;padding:1.6rem 1.1rem;overflow:hidden;transition:flex-basis .45s ease,background .3s ease}
  .model-accordion.is-ready > .model-part.is-open{flex:1 1 auto;display:grid;padding:clamp(1.6rem,3vw,2.6rem)}
  .model-accordion.is-ready > .model-part:not(.is-open) .model-part-body{display:none}
  .model-accordion.is-ready > .model-part:not(.is-open) .model-part-head{writing-mode:vertical-rl;transform:rotate(180deg);height:100%;min-height:22rem;display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
  .model-accordion.is-ready > .model-part:not(.is-open) .model-part-idea{font-size:2rem;margin:0}
  .model-accordion.is-ready > .model-part:not(.is-open):hover{background:#F3F8FC}
  .model-accordion.is-ready > .model-part.is-open .model-part-head{cursor:default}
}
@media (max-width:899px){
  .model-accordion.is-ready > .model-part:not(.is-open) .model-part-body{display:none}
  .model-accordion.is-ready .model-part-head{position:relative;padding-right:2.4rem}
  .model-accordion.is-ready .model-part-head::after{content:"+";position:absolute;right:0;top:.2rem;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--blue);font-weight:700}
  .model-accordion.is-ready .model-part.is-open .model-part-head::after{content:"\2212"}
}
@media (prefers-reduced-motion:reduce){.model-accordion.is-ready > .model-part{transition:none}}
.model-part-head:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:8px}
/* RI: three strategies side by side */
.ri-strategies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.ri-strategy{background:#fff;border-radius:18px;padding:clamp(1.3rem,2.6vw,1.9rem)}
.ri-strategy h3{margin:.1rem 0 .6rem;font-size:clamp(1.2rem,1.9vw,1.4rem)}
.ri-strategy p:not(.formula-tag){font-size:1rem;margin:0 0 .7rem}
@media (max-width:900px){.ri-strategies{grid-template-columns:1fr}}

/* RI: measures drawn as a row of growing plants */
.garden{list-style:none;margin:0;padding:0 0 1.4rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem);position:relative}
.garden::after{content:"";position:absolute;left:-1rem;right:-1rem;bottom:0;height:3.2rem;border-radius:999px 999px 0 0 / 40px 40px 0 0;background:#E2CFAE;z-index:0}
.garden li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:3.4rem}
.garden li::before{content:"";position:absolute;left:50%;top:5.5rem;bottom:1.4rem;width:4px;margin-left:-2px;border-radius:4px;background:linear-gradient(#5E9E3B,#3E7F25);z-index:-1}
.garden .g-target{display:block;background:#fff;border:3px solid var(--lime);border-radius:48% 52% 46% 54% / 55% 50% 50% 45%;padding:1.1rem 1rem;
  font:600 clamp(.98rem,1.4vw,1.1rem)/1.35 var(--head);color:var(--navy);box-shadow:0 10px 24px -18px rgba(0,42,70,.5);min-height:7.5rem;display:grid;place-items:center}
.garden .g-how{position:relative;margin:1.6rem 0 0;padding:.7rem .9rem;background:#EEF5E6;border-radius:999px 999px 999px 999px / 60% 60% 60% 60%;font-size:.9rem;line-height:1.4;color:var(--ink)}
.garden .g-how::before,.garden .g-how::after{content:"";position:absolute;top:-1.1rem;width:1.5rem;height:.85rem;background:#5E9E3B;border-radius:0 100% 0 100%}
.garden .g-how::before{left:calc(50% - 1.6rem);transform:rotate(-24deg)}
.garden .g-how::after{right:calc(50% - 1.6rem);transform:scaleX(-1) rotate(-24deg)}
.garden .g-cat{position:absolute;bottom:.7rem;left:0;right:0;font:800 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6E4A2A}
@media (max-width:900px){.garden{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.6rem}.garden::after{display:none}.garden li{background:#F3EBDD;border-radius:22px;padding:1rem 1rem 3rem}.garden li::before{bottom:2.2rem}}
@media (max-width:520px){.garden{grid-template-columns:1fr}}
/* A winding path of stops, in place of a table */
.term-path{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(3rem,8vw,6rem);row-gap:1.2rem;counter-reset:stop}
.term-path::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:60px;margin-left:-30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='200' viewBox='0 0 60 200'%3E%3Cpath d='M30,0 C58,50 2,50 30,100 C58,150 2,150 30,200' fill='none' stroke='%239FB124' stroke-width='4' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y center top/60px 200px}
.term-path li{counter-increment:stop;position:relative;background:#fff;border-radius:22px;padding:1.2rem 1.4rem 1.2rem 1.4rem;box-shadow:0 12px 26px -22px rgba(0,42,70,.55)}
.term-path li:nth-child(even){transform:translateY(3.2rem)}
.term-path li::before{content:counter(stop);position:absolute;top:1.1rem;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font:700 .95rem/1 var(--head);box-shadow:0 0 0 5px var(--mist)}
.term-path li:nth-child(odd)::before{right:calc(-1 * clamp(3rem,8vw,6rem) / 2 - 1.15rem)}
.term-path li:nth-child(even)::before{left:calc(-1 * clamp(3rem,8vw,6rem) / 2 - 1.15rem)}
.term-path b{display:block;font:600 1.05rem/1.3 var(--head);color:var(--navy);margin-bottom:.35rem}
.term-path span{display:block;font-size:.97rem;color:var(--muted);line-height:1.55}
.term-path{padding-bottom:3.2rem}
@media (max-width:760px){.term-path{grid-template-columns:1fr;padding-left:2.6rem;padding-bottom:0}.term-path::before{left:1rem;margin-left:-30px}.term-path li:nth-child(even){transform:none}
  .term-path li::before,.term-path li:nth-child(odd)::before,.term-path li:nth-child(even)::before{left:-2.75rem;right:auto}}

/* Daieplay: the flowing line from Askia to Daieplay */
.lineage-art{margin:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.8rem,3.5vw,2.6rem)!important}
.lineage-art img{width:100%;height:auto;display:block;border-radius:18px}
.address-cols h3{font-size:clamp(1.2rem,1.9vw,1.45rem)}

/* View switcher (site plan): two buttons swap the drawing */
.view-switch{margin-top:clamp(1.6rem,3vw,2.2rem)}
.view-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.view-btns .btn{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.view-btns .btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.view-stage{position:relative;border-radius:18px;overflow:hidden;background:#FBF6EA;box-shadow:0 1px 0 var(--line-soft)}
.view-stage .view{margin:0;position:relative;display:none}
.view-stage:not([data-current]) .view:first-child,
.view-stage[data-current="quarters"] .view[data-for="quarters"],
.view-stage[data-current="zones"] .view[data-for="zones"]{display:block;animation:view-in .45s ease}
.view-stage .view img{width:100%;height:auto;display:block}
@keyframes view-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.view-switch [data-caption]{margin-top:.7rem}
.map-walkers{position:absolute;inset:0;pointer-events:none}
.map-walkers svg{width:100%;height:100%;display:block}
.up-close{margin-top:clamp(2rem,4vw,2.8rem)}
.up-close h3{margin:0 0 1rem}
@media (prefers-reduced-motion:reduce){.view-stage .view{animation:none!important}}

/* Storybook: chapters you page through, with a page-turn */
.storybook{position:relative;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.storybook .story-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;background:#FFFDF7;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(0,40,70,.45)}
.storybook .story-page+.story-page{margin-top:1.6rem}
.storybook .story-pic{margin:0;background:#F3EBDD;position:relative;border-right:1px solid var(--line-soft)}
.storybook .story-pic::after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:26px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.07))}
.storybook .story-pic img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.storybook .story-pic figcaption{position:absolute;left:12px;bottom:10px;background:rgba(255,255,255,.88);padding:.25rem .6rem;border-radius:8px}
.storybook .story-text{padding:clamp(1.4rem,3vw,2.4rem)}
.storybook .story-text h3{margin-top:.2rem}
.storybook.is-book .story-page{display:none;margin-top:0}
.storybook.is-book .story-page.is-current{display:grid}
.storybook.is-book .story-page.turn-next{animation:page-next .6s cubic-bezier(.2,.7,.2,1)}
.storybook.is-book .story-page.turn-prev{animation:page-prev .6s cubic-bezier(.2,.7,.2,1)}
.storybook.is-book{perspective:1800px}
@keyframes page-next{from{transform:rotateY(-14deg) translateX(30px);opacity:0;transform-origin:left center}to{transform:none;opacity:1}}
@keyframes page-prev{from{transform:rotateY(14deg) translateX(-30px);opacity:0;transform-origin:right center}to{transform:none;opacity:1}}
.story-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.story-tabs button{font:700 .9rem/1 var(--head);border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:.55rem .95rem;cursor:pointer}
.story-tabs button[aria-current="true"]{background:var(--navy);color:#fff}
.story-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.story-nav button{width:46px;height:46px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);font-size:1.3rem;cursor:pointer}
.story-nav button:hover{background:var(--navy);color:#fff}
.story-count{font:700 .95rem var(--head);color:var(--navy)}
@media (max-width:860px){.storybook .story-page,.storybook.is-book .story-page.is-current{grid-template-columns:1fr}.storybook .story-pic{border-right:0;border-bottom:1px solid var(--line-soft)}.storybook .story-pic img{min-height:0;aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.storybook.is-book .story-page{animation:none!important}}

/* Donate page: header with a gift box (content left, box right) */
.give-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.give-hero-text h1{margin-bottom:.8rem}
.give-trust{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.95rem;opacity:.92}
.give-trust b{font-family:var(--head);color:var(--lime);margin-right:.3rem}
.give-box{background:#fff;color:var(--ink);border-radius:18px;padding:clamp(1.3rem,2.6vw,2rem);box-shadow:0 24px 50px -24px rgba(0,0,0,.55)}
.give-box-title{color:var(--navy);font-size:clamp(1.35rem,2.2vw,1.7rem);margin:0 0 1rem}
.give-freq{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);border-radius:999px;padding:4px;margin-bottom:1rem}
.give-freq button{border:0;background:transparent;border-radius:999px;padding:.65rem .8rem;font:700 .98rem var(--head);color:var(--navy);cursor:pointer}
.give-freq button[aria-pressed="true"]{background:var(--navy);color:#fff}
.give-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.give-amounts button{border:2px solid var(--line);background:#fff;border-radius:10px;padding:.75rem .4rem;font:700 1.08rem var(--head);color:var(--navy);cursor:pointer}
.give-amounts button:hover{border-color:var(--navy)}
.give-amounts button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.give-other{display:block;margin:.8rem 0 0;font-weight:600;font-size:.92rem;color:var(--muted)}
.give-other-field{display:flex;align-items:center;gap:.4rem;margin-top:.3rem;border:2px solid var(--line);border-radius:10px;padding:0 .8rem;background:#fff}
.give-other-field:focus-within{border-color:var(--navy)}
.give-other-field span{font-weight:700;color:var(--navy)}
.give-other-field input{border:0;outline:0;padding:.7rem 0;font:600 1rem var(--body);width:100%;background:transparent}
.give-to-label{display:block;margin:1rem 0 .3rem;font-weight:600;font-size:.92rem;color:var(--muted)}
.give-to{width:100%;padding:.75rem .8rem;border:2px solid var(--line);border-radius:10px;font:600 .98rem var(--body);background:#fff;color:var(--ink)}
.give-go{display:block;width:100%;text-align:center;margin-top:1.1rem}
.give-small{margin:.7rem 0 0;font-size:.85rem;color:var(--muted);text-align:center}
@media (max-width:900px){.give-hero{grid-template-columns:1fr}}

/* Donate page: three kinds of giving, compact */
.give-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.gk{border-top:6px solid var(--gk);background:var(--mist);border-radius:14px;padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.7rem}
.gk h3{margin:0;color:var(--navy)}
.gk p{margin:0}
.gk .tagrow{margin:.2rem 0 .4rem}
.gk .btn{align-self:flex-start;margin-top:auto}
@media (max-width:900px){.give-kinds{grid-template-columns:1fr}}
.nav > li > a.btn{padding:.55rem 1.1rem;border-radius:999px;line-height:1.1}
.give-box .give-small{color:var(--muted)}
.address-cols{align-items:start}
.storybook .story-pic > a{display:block;height:100%}
@media (max-width:900px){.give-hero{padding:clamp(1.6rem,6vw,2.4rem) 16px 2rem}}
#ways .split-head{margin-bottom:clamp(1.8rem,4vw,2.6rem)}

/* ===== Fourth round ===== */
/* What you'll come away with, at the top of each page */
.page-promise{margin:.9rem 0 0;padding-left:.9rem;border-left:3px solid var(--lime);font-size:.98rem;opacity:.95;max-width:46rem}
.section-white .page-promise,.hero-slim .page-promise{opacity:.95}
.chapter-chip{display:inline-block;margin:0 0 .8rem;padding:.3rem .8rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font:700 .78rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase}
/* Nell's own words, in her hand */
.nell-quote{font-family:var(--script),'Dancing Script',cursive;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.25;color:var(--teal);margin:1.2rem 0}
.section-navy .nell-quote,.cta .nell-quote{color:var(--lime)}
.nell-sign{font-weight:700;color:var(--navy);margin-top:-.4rem}
/* Audience doors */
.doors-band{padding-top:clamp(1.8rem,4vw,2.6rem);padding-bottom:clamp(1.8rem,4vw,2.6rem)}
.doors{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.doors a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1.1rem 1.2rem;border-radius:14px;background:var(--mist);border:2px solid transparent;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.doors a:hover,.doors a:focus-visible{border-color:var(--navy);transform:translateY(-2px)}
.door-who{font:700 1.08rem/1.25 var(--head);color:var(--navy)}
.door-who::after{content:" \2192";color:var(--teal)}
.door-what{font-size:.92rem;color:var(--muted)}
@media (max-width:900px){.doors{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.doors{grid-template-columns:1fr}}
/* Welcome, where we are today, and the road so far */
.welcome-duo{align-items:start}
.today-note{background:#fff;border-radius:14px;padding:1.2rem 1.4rem;border-left:5px solid var(--lime);margin-bottom:1.4rem}
.today-note p:last-child{margin:0}
.tracker{list-style:none;margin:0;padding:0;position:relative}
.tracker::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;background:var(--line)}
.tracker li{position:relative;padding:0 0 1rem 2.4rem;display:flex;flex-direction:column}
.tracker li::before{content:"";position:absolute;left:3px;top:4px;width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.tracker li.is-done::before{background:var(--teal);border-color:var(--teal)}
.tracker li.is-now::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px rgba(159,177,36,.25)}
.tr-when{font:800 .75rem/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-mid)}
.tracker li.is-now .tr-when{color:var(--lime);}
.tracker li.is-now .tr-what{font-weight:700;color:var(--navy)}
.tr-what{font-size:.98rem}
@media (prefers-reduced-motion:no-preference){.tracker li.is-now::before{animation:now-pulse 2.4s ease-in-out infinite}}
@keyframes now-pulse{50%{box-shadow:0 0 0 11px rgba(159,177,36,.12)}}
.arc-step .row-media img{width:100%;height:auto;border-radius:18px;display:block}
.village-art img{width:100%;height:auto;border-radius:18px;display:block}
.learned-duo{align-items:center}
.learned-duo img{width:100%;height:auto;border-radius:18px}
/* Daieplay in one minute */
.minute-band{padding-top:clamp(1.8rem,4vw,2.6rem);padding-bottom:clamp(1.8rem,4vw,2.6rem)}
.minute{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:.6rem 0 0}
.minute>div{background:#fff;border-radius:14px;padding:1rem 1.2rem}
.minute dt{font:800 .78rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.3rem}
.minute dd{margin:0;font-size:.98rem}
@media (max-width:900px){.minute{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.minute{grid-template-columns:1fr}}
details.more-wide{margin-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line-soft);padding-top:1rem}
details.more-wide>summary{cursor:pointer;font:700 1rem var(--head);color:var(--navy)}
details.more-wide[open]>summary{margin-bottom:1.2rem}
/* End of every page: the closing line and the next chapter */
.story-end{background:var(--navy-deep,#002A46);color:#fff;padding:clamp(2rem,5vw,3rem) 0}
.story-end-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.closing-line{margin:0;font-family:var(--script),'Dancing Script',cursive;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2;color:#fff}
.closing-line span{display:block}
.closing-line span+span{color:var(--lime)}
.next-chapter{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.4rem;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;min-width:15rem}
.next-chapter:hover,.next-chapter:focus-visible{background:rgba(255,255,255,.16)}
.nc-kicker{font:800 .75rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.nc-title{font:700 1.3rem var(--head)}
/* Gift box: second choice and impact */
.give-sub select{width:100%;padding:.7rem .8rem;border:2px solid var(--line);border-radius:10px;font:600 .96rem var(--body);background:#fff;color:var(--ink)}
.give-impact{margin:1rem 0 0;padding:.8rem 1rem;border-radius:10px;background:var(--mist);color:var(--navy);font-size:.95rem;min-height:1em}
.give-impact:empty{display:none}
/* Talk to Nell */
.talk-first-box{background:var(--mist);border-left:5px solid var(--teal);border-radius:12px;padding:1.1rem 1.3rem;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem}
.talk-first-box p{margin:0;flex:1 1 18rem}
.talk-first-lg{display:block;padding:clamp(1.3rem,3vw,2rem)}
.talk-first-lg p{margin:.6rem 0 1.1rem}
.contact-direct{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.contact-direct b{display:inline-block;min-width:4.5rem;color:var(--navy)}
.form-back{margin:0 0 1.2rem}
.form-back a{font-weight:700}
/* Short forms as pop-ups */
html.has-pop{overflow:hidden}
.form-pop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.form-pop[hidden]{display:none}
.form-pop-backdrop{position:absolute;inset:0;background:rgba(0,30,50,.6)}
.form-pop-panel{position:relative;width:min(640px,100%);height:min(88vh,860px);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.form-pop-panel iframe{width:100%;height:100%;border:0;display:block}
.form-pop-close{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
@media (max-width:620px){.form-pop{padding:0}.form-pop-panel{height:100%;border-radius:0}}
.askiya-popup-body{background:#fff;margin:0}
.askiya-popup-form{padding:24px 20px 32px;max-width:600px;margin:0 auto}
.askiya-popup-form .popup-title{font-size:clamp(1.4rem,4vw,1.8rem);color:var(--navy);margin:0 3rem .6rem 0}
.askiya-popup-body .site-header,.askiya-popup-body .topbar{display:none}
/* Story card pattern */
.story-card{background:#fff;border-radius:16px;padding:clamp(1.2rem,3vw,1.8rem);box-shadow:0 1px 0 var(--line-soft)}
.story-card-photo img{border-radius:12px;width:100%;height:auto}
.wrap.hero-inner{padding-left:clamp(1.1rem,4vw,2rem);padding-right:clamp(1.1rem,4vw,2rem)}
.give-box .give-impact{color:var(--navy)}

/* Coming soon page (pre-launch): logo and two buttons, no menu */
.cs-topbar .topbar-inner{justify-content:space-between}
.cs-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cs-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:2.2rem 0 1rem}
.cs-foot-row p{margin:0}
.cs-foot-row a{color:#fff}
.cs-quarters{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.cs-quarters li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-left:5px solid var(--lime);border-radius:12px;padding:.8rem 1rem;color:#fff}
.cs-quarters b{display:block;font-family:var(--head);font-size:1.05rem}
.cs-quarters span{font-size:.95rem;color:rgba(255,255,255,.82)}
.cs-names{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.cs-names div{background:#fff;border-radius:14px;padding:1.1rem 1.2rem;border-top:5px solid var(--teal)}
.cs-names div:nth-child(2){border-top-color:var(--lime)}
.cs-names b{display:block;font-family:var(--head);font-size:1.5rem;color:var(--navy)}
.cs-names em{font-size:1.05rem}
@media (max-width:620px){.cs-names{grid-template-columns:1fr}.cs-actions .btn{padding:.55rem .9rem;font-size:.9rem}.cs-topbar .brand img{max-height:52px}}