/* ==========================================================================
   Arkansas Zoo Foundation — design system
   Brand: lime #BFD42F + navy #09436C (2025 AZF identity)
   Every color pairing below is WCAG 2.2 AA verified — see the token notes.
   ========================================================================== */

/* ---------- Fonts (self-hosted, see .htaccess for the 1-year immutable cache) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Tokens */
:root{
  /* Light grounds */
  --paper:#FBFAF5;         /* warm off-white, echoes the zoo's burlap texture */
  --paper-2:#F2EEE3;
  --white:#FFFFFF;

  /* Brand navy — 9.89:1 on paper */
  --navy:#09436C;
  --navy-deep:#062F4C;
  --navy-dark:#041F33;

  /* Brand lime — 1.66:1 on white, so DARK GROUNDS or badge-background ONLY.
     6.24:1 on navy, 10.15:1 on --navy-dark. Never small text on light. */
  --lime:#BFD42F;
  --lime-ink:#556411;      /* the light-ground counterpart — 6.25:1 on paper */

  /* Secondary accents lifted from the zoo's zigzag ZOO mark */
  --teal-ink:#10646F;      /* 6.54:1 on paper */
  --teal-lt:#6FD3DE;       /* 5.93:1 on navy */
  --coral-ink:#A93B22;     /* 6.02:1 on paper */

  /* Text */
  --ink:#17242E;           /* 15.13:1 on paper */
  --muted:#4E6273;         /* 6.06:1 on paper */
  --muted-dk:#AFC6D6;      /* 5.85:1 on navy */

  --line:#E2DCCC;
  --line-dk:rgba(255,255,255,.16);

  --nav-h:76px;
  --wrap:1200px;
  --wrap-narrow:820px;

  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(4,31,51,.06),0 2px 8px rgba(4,31,51,.05);
  --sh-2:0 4px 12px rgba(4,31,51,.08),0 12px 32px rgba(4,31,51,.09);
  --sh-3:0 10px 24px rgba(4,31,51,.12),0 28px 60px rgba(4,31,51,.14);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}                    /* kills the 8px edge-sliver bug */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}   /* MUST precede any width/height attrs */
h1,h2,h3,h4,h5{margin:0 0 .5em;font-family:'Archivo',system-ui,sans-serif;line-height:1.05;
  letter-spacing:-.02em;font-weight:800;color:var(--navy);text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--lime-ink)}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:700;color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--lime-ink);outline-offset:3px;border-radius:3px}
::selection{background:var(--lime);color:var(--navy-dark)}

/* ---------- Type scale */
.h-hero{font-size:clamp(2.6rem,7.2vw,5.4rem);line-height:.96;letter-spacing:-.035em;font-weight:900}
.h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:900;letter-spacing:-.03em}
.h2{font-size:clamp(1.75rem,3.4vw,2.7rem);font-weight:800}
.h3{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:800}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:var(--muted)}
.small{font-size:.9375rem}
.tiny{font-size:.8125rem}

/* Eyebrow / section label — a11y: styled div, NOT a heading (no level skips) */
.eyebrow{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lime-ink);
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:8px;flex:none;background:var(--lime);
  clip-path:polygon(0 100%,12.5% 0,25% 100%,37.5% 0,50% 100%,62.5% 0,75% 100%,87.5% 0,100% 100%)}
.on-dark .eyebrow{color:var(--lime)}
.on-dark .eyebrow::before{background:var(--lime)}

/* ---------- Layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.sect{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.sect--tight{padding-block:clamp(2.5rem,4.5vw,4rem)}
.sect--paper{background:var(--paper)}
.sect--paper2{background:var(--paper-2)}
.sect--white{background:var(--white)}

/* Dark sections — carry .on-dark so accent tokens flip to their dark-ground values */
.sect--navy{background:var(--navy);color:#EAF2F8}
.sect--deep{background:var(--navy-deep);color:#EAF2F8}
.on-dark{color:#EAF2F8}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white)}
.on-dark .lead,.on-dark .muted{color:var(--muted-dk)}
.on-dark a{color:var(--lime)}
.on-dark strong{color:var(--white)}
.muted{color:var(--muted)}

/* Bamboo texture on the deepest sections — the zoo's own asset, subtle */
.sect--textured{
  background-color:var(--navy-dark);
  background-image:linear-gradient(rgba(4,31,51,.82),rgba(4,31,51,.9)),url('/assets/images/tex-bamboo-1200.webp');
  background-size:auto,420px;background-repeat:no-repeat,repeat;
  color:#EAF2F8;
}

.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.9rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.split{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-l{grid-template-columns:1.25fr 1fr}
  .split--wide-r{grid-template-columns:1fr 1.25fr}
  .split--flip>*:first-child{order:2}
}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.stack>*+*{margin-top:1.1rem}

/* ---------- Zigzag: the brand's signature motif (from the zoo's ZOO mark) */
.zz{height:10px;width:100%;
  background:var(--lime);
  clip-path:polygon(0 100%,4.166% 0,8.333% 100%,12.5% 0,16.666% 100%,20.833% 0,25% 100%,29.166% 0,
    33.333% 100%,37.5% 0,41.666% 100%,45.833% 0,50% 100%,54.166% 0,58.333% 100%,62.5% 0,66.666% 100%,
    70.833% 0,75% 100%,79.166% 0,83.333% 100%,87.5% 0,91.666% 100%,95.833% 0,100% 100%)}
.zz--rule{max-width:96px;margin:0 0 1.4rem}
.center .zz--rule{margin-inline:auto}
.zz--teal{background:var(--teal-lt)}
.zz--coral{background:var(--coral-ink)}

/* Notched section edge — masked triangles, so the section above "bites" into this one.
   Guarded: browsers without mask support simply get a clean flat edge. */
@supports((mask:conic-gradient(#000,#000)) or (-webkit-mask:conic-gradient(#000,#000))){
  .notch-top{
    --nw:34px; --nh:15px;
    -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/var(--nw) var(--nh) repeat-x,
      linear-gradient(#000 0 0) 0 var(--nh)/100% calc(100% - var(--nh)) no-repeat;
    mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/var(--nw) var(--nh) repeat-x,
      linear-gradient(#000 0 0) 0 var(--nh)/100% calc(100% - var(--nh)) no-repeat;
    padding-top:calc(clamp(3.5rem,7vw,6.5rem) + var(--nh));
  }
}

/* ---------- Buttons */
.btn{
  --bg:var(--navy); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:var(--fg);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.94rem;
  letter-spacing:.05em;text-transform:uppercase;
  padding:.95rem 1.7rem;min-height:48px;border:0;border-radius:999px;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .2s linear;
  box-shadow:var(--sh-1);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--fg)}
.btn:active{transform:translateY(0)}
/* sheen sweep */
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transition:transform .7s var(--ease-out)}
.btn:hover::after{transform:translateX(101%)}

.btn--lime{--bg:var(--lime);--fg:var(--navy-dark)}      /* 10.15:1 */
.btn--lime:hover{--bg:#CBE03C}
.btn--white{--bg:#fff;--fg:var(--navy)}                  /* 10.34:1 */
.btn--coral{--bg:var(--coral-ink);--fg:#fff}             /* 6.30:1 */
.btn--ghost{--bg:transparent;--fg:var(--navy);box-shadow:inset 0 0 0 2px currentColor}
.btn--ghost:hover{--bg:var(--navy);--fg:#fff;box-shadow:inset 0 0 0 2px var(--navy)}

/* ⚠ A button's own colour MUST beat the dark-ground link colour.
   `.on-dark a{color:var(--lime)}` is specificity 0,1,1 and `.btn{color:var(--fg)}` is
   only 0,1,0 — so on a dark section a lime button rendered lime-on-lime at 1:1 and was
   completely invisible. These rules are 0,2,0 and restore --fg. Verified in-browser with
   getComputedStyle, not by reading the cascade. */
.on-dark .btn,.cta-band .btn,.hero .btn,.page-hero .btn{color:var(--fg)}

/* Dark grounds that are NOT tagged .on-dark: the hero, the interior page hero, and the
   CTA band all paint dark navy, so a ghost button's default navy text would sit on navy.
   Group them with .on-dark rather than relying on each page remembering a class. */
.on-dark .btn--ghost,.cta-band .btn--ghost,
.hero .btn--ghost,.page-hero .btn--ghost{--fg:#fff}
.on-dark .btn--ghost:hover,.cta-band .btn--ghost:hover,
.hero .btn--ghost:hover,.page-hero .btn--ghost:hover{--bg:#fff;--fg:var(--navy);box-shadow:inset 0 0 0 2px #fff}
.btn--lg{font-size:1.02rem;padding:1.15rem 2.2rem;min-height:56px}
.btn--sm{font-size:.82rem;padding:.6rem 1.15rem;min-height:40px}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.center .btn-row{justify-content:center}

/* Text link with animated arrow */
.arrow-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.88rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--lime-ink);
  text-decoration:none;padding:.35rem 0;min-height:24px;
}
.arrow-link span{transition:transform .3s var(--ease)}
.arrow-link:hover span{transform:translateX(5px)}
.arrow-link:hover{color:var(--navy)}
.on-dark .arrow-link{color:var(--lime)}
.on-dark .arrow-link:hover{color:#fff}

/* ==========================================================================
   HEADER
   ========================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy);color:#fff;padding:.85rem 1.4rem;
  font-family:'Archivo',sans-serif;font-weight:800;text-decoration:none;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0;color:#fff}

.site-header{
  position:fixed;inset-inline:0;top:0;z-index:1000;
  background:rgba(251,250,245,.92);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.site-header.is-stuck{box-shadow:var(--sh-2);background:rgba(251,250,245,.97)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--nav-h);transition:height .3s var(--ease)}
.site-header.is-stuck .hdr{height:64px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:52px;width:auto;transition:height .3s var(--ease)}
.site-header.is-stuck .brand img{height:44px}

.nav{display:none}
@media(min-width:1060px){
  .nav{display:flex;align-items:center;gap:.15rem}
}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:.3rem;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.86rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy);
  text-decoration:none;padding:.7rem .78rem;min-height:44px;border-radius:var(--r-sm);
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-link:hover,.nav-item:focus-within>.nav-link{background:rgba(9,67,108,.07);color:var(--navy)}
/* Parent of the current submenu page — highlighted, but no aria-current (it is not
   the current page, and saying so would mislead a screen reader). */
.nav-link[data-parent]{color:var(--lime-ink)}
.nav-link[aria-current="page"]{color:var(--lime-ink)}
.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.42rem;height:4px;background:var(--lime);
  clip-path:polygon(0 100%,12.5% 0,25% 100%,37.5% 0,50% 100%,62.5% 0,75% 100%,87.5% 0,100% 100%)}
.nav-link .caret{width:9px;height:9px;flex:none;transition:transform .25s var(--ease)}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 2px);left:0;min-width:266px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  padding:.55rem;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li{margin:0}
.submenu a{
  display:block;padding:.6rem .8rem;min-height:44px;border-radius:var(--r-sm);
  font-size:.94rem;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35;
  transition:background .18s,color .18s;
}
.submenu a:hover{background:var(--paper-2);color:var(--navy)}
.submenu a small{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.1rem}

.hdr-cta{display:none;flex:none}
@media(min-width:1060px){.hdr-cta{display:flex;align-items:center;gap:.6rem}}
.hdr-phone{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.86rem;color:var(--navy);
  text-decoration:none;padding:.6rem .5rem;min-height:44px;letter-spacing:.02em;
}
.hdr-phone:hover{color:var(--lime-ink)}

/* Mobile toggle + drawer */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;background:transparent;border:0;cursor:pointer;flex:none;
}
@media(min-width:1060px){.burger{display:none}}
.burger span{display:block;height:3px;width:100%;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s linear}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:999;
  background:var(--paper);overflow-y:auto;
  padding:1.25rem clamp(1.15rem,4vw,2rem) 3rem;
  transform:translateX(100%);visibility:hidden;
  transition:transform .36s var(--ease-out),visibility .36s;
}
.drawer.is-open{transform:translateX(0);visibility:visible}
@media(min-width:1060px){.drawer{display:none}}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{margin:0;border-bottom:1px solid var(--line)}
.drawer a{
  display:block;padding:1rem .2rem;min-height:48px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.08rem;
  color:var(--navy);text-decoration:none;letter-spacing:-.01em;
}
.drawer a[aria-current="page"]{color:var(--lime-ink)}
.drawer .sub a{font-size:.98rem;font-weight:600;font-family:'Figtree',sans-serif;
  padding-left:1.3rem;color:var(--ink)}
.drawer .sub li:last-child{border-bottom:0}
.drawer .sub{margin-bottom:.2rem}
.drawer-foot{margin-top:1.8rem;display:grid;gap:.75rem}
body.nav-open{overflow:hidden}

/* ==========================================================================
   BREADCRUMB (JSON-LD is in <head>; this is the visible bar)
   ========================================================================== */
.wj-bc{background:var(--navy-deep);color:#fff;font-size:.84rem}
.wj-bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;
  list-style:none;margin:0;padding:.6rem 0}
.wj-bc li{display:flex;align-items:center;gap:.15rem;margin:0}
.wj-bc a{color:#CFE0EC;text-decoration:none;padding:.3rem .1rem;min-height:24px;
  display:inline-flex;align-items:center}
.wj-bc a:hover{color:var(--lime);text-decoration:underline}
.wj-bc [aria-current="page"]{color:var(--lime);font-weight:600}
.wj-bc .sep{opacity:.5;padding-inline:.35rem;font-size:.78rem}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--navy-dark);color:#fff;overflow:hidden}
/* Hero art. The image is FLIPPED horizontally (scaleX(-1) on this container, never on the
   img — the img's transform belongs to the kenburns animation and the reduced-motion block
   forces transform:none on it, which would silently un-flip the hero for those visitors).
   The flip is what puts the monkey's head on the RIGHT.
   There is deliberately NO vertical offset here any more. Earlier revisions nudged the box
   down to lower the subject, but that fights the photograph: the animal sits high in the
   original with almost nothing above its head, so shifting either exposed a bare navy strip
   or needed a ~99% zoom. The head is now positioned by the CROP itself (see the <picture>
   in index.html) — landscape lands it ~47% down, portrait ~42% — so the box is flush with
   the hero and the image simply covers it. Do NOT reintroduce a vertical offset — it would
   push the head back off centre.
   The 100px horizontal nudge is desktop-only — see the min-width:901px rule below. */
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;transform:scaleX(-1)}
.hero__media img{width:100%;height:100%;object-fit:cover;
  animation:kenburns 26s var(--ease) infinite alternate}

/* Phones/tablets get the portrait crop. X is biased toward the head side so the whole head
   stays in frame where the crop is wider than the viewport; Y keeps it near mid on tablets,
   which have vertical slack. Phones have none, so the crop alone sets the vertical. */
@media(max-width:900px){
  .hero__media img{object-position:50% 50%}
}

/* DESKTOP ONLY — nudge the art 100px right so the headline gets more clear space.
   Scoped deliberately: 100px is 27% of a 375px phone, and because this widens the box the
   image also scales up, which on mobile re-zoomed into an unrecognisable fur close-up and
   pushed the head off frame. Phones/tablets keep the plain inset:0 box.
   Why a translate over an over-wide box rather than object-position: a 100px shift needs
   slack/2 + 100 of horizontal overflow, and wide screens do not have it — measured, it gaps
   35px at 2560 and 100px at 3440 where cover turns width-driven and the overflow is zero.
   Insetting -100px each side and translating +100px cannot gap at any width.
   Transform order matters: scaleX(-1) applies FIRST (rightmost), so the translate acts in the
   hero's unmirrored space and moves the art RIGHT. Swap them and it goes left. */
@media(min-width:901px){
  .hero__media{left:-100px;right:-100px;inset-inline:-100px;
    transform:translateX(100px) scaleX(-1)}
}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(-1.5%,-1.5%,0)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(4,31,51,.93) 0%,rgba(4,31,51,.78) 42%,rgba(4,31,51,.34) 72%,rgba(4,31,51,.5) 100%),
    linear-gradient(to top,rgba(4,31,51,.9) 0%,transparent 46%)}
.hero__inner{position:relative;z-index:2;
  padding-block:clamp(6.5rem,15vw,10.5rem) clamp(3.5rem,7vw,5.5rem);
  min-height:clamp(560px,84vh,860px);display:flex;flex-direction:column;justify-content:flex-end}
.hero__body{max-width:min(100%,720px)}
.hero h1{color:#fff;margin-bottom:1rem}
.hero .lead{color:#DCE9F2;max-width:56ch;font-size:clamp(1.1rem,1.8vw,1.35rem)}
.hero__ctas{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.9rem}
.hero__phones{margin-top:1.15rem;display:flex;flex-wrap:wrap;gap:1.35rem;align-items:center}
.hero__phones a{color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px}
.hero__phones a:hover{color:var(--lime)}
.hero__phones .tiny{color:var(--muted-dk);font-family:'Figtree',sans-serif;font-weight:400}

/* Highlight — lime brush behind a word */
.hl{position:relative;display:inline-block;color:inherit;z-index:0}
/* Reads as a marker UNDERLINE, not a highlighter block. Height .16em sits under the
   letterforms rather than behind them (it was .34em at bottom:.06em, which covered the
   lower half of the glyphs and looked like a filled box). bottom:0 puts it on the
   baseline so it crosses the 'y' descender the way a drawn underline would, and the
   .08em radius softens the ends to match the hand-drawn logo instead of a hairline rule. */
.hl::before{content:"";position:absolute;left:-.1em;right:-.1em;bottom:0;height:.16em;
  background:var(--lime);z-index:-1;border-radius:.08em;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .35s}
.is-in .hl::before,.hero .hl::before{transform:scaleX(1)}

/* Page hero (interior pages) */
.page-hero{position:relative;isolation:isolate;background:var(--navy);color:#fff;overflow:hidden}
.page-hero__media{position:absolute;inset:0;z-index:-2;opacity:.42}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to right,rgba(4,31,51,.92),rgba(6,47,76,.62))}
.page-hero__inner{position:relative;z-index:2;padding-block:clamp(2.5rem,5.5vw,4.5rem)}
.page-hero h1{color:#fff;margin-bottom:.7rem;max-width:22ch}
.page-hero .lead{color:#D6E5F0;max-width:62ch}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:#D3E4CF}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.card:hover .card__media img{transform:scale(1.07)}
.card__media--tall{aspect-ratio:3/4}
.card__body{padding:clamp(1.2rem,2.2vw,1.7rem);display:flex;flex-direction:column;flex:1;gap:.15rem}
.card__body h3{margin-bottom:.45rem;color:var(--navy)}
.card__body p{color:var(--muted);font-size:.99rem}
.card__body .arrow-link{margin-top:auto;padding-top:.9rem}
/* Link lists inside a card are NAVIGATION, not prose — WCAG 2.2 SC 2.5.8's
   "inline in a sentence" exemption does not cover them, so they need a real target.
   (Measured: 21px without this, which fails.) */
.card__body ul{margin-bottom:0}
.card__body ul li{margin-bottom:.15rem}
.card__body ul a{display:inline-flex;align-items:center;min-height:26px;padding-block:.28rem}
.card__tag{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  background:var(--lime);color:var(--navy-dark);         /* 10.15:1 */
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.38rem .72rem;border-radius:999px;
}
.card__tag--navy{background:var(--navy);color:#fff}
.card__tag--coral{background:var(--coral-ink);color:#fff}

/* Icon feature card (no image) */
.feat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,1.9rem);height:100%;position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);box-shadow:var(--sh-1);
}
.feat:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.feat::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.feat:hover::before,.feat.is-in::before{transform:scaleX(1)}
.feat__icon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--navy);color:var(--lime);margin-bottom:1.05rem;flex:none;
  transition:transform .4s var(--ease);
}
.feat:hover .feat__icon{transform:rotate(-6deg) scale(1.06)}
.feat__icon svg{width:27px;height:27px}
.feat h3{margin-bottom:.5rem}
.feat p{color:var(--muted);font-size:.99rem;margin:0}
.on-dark .feat{background:rgba(255,255,255,.055);border-color:var(--line-dk)}
.on-dark .feat h3{color:#fff}
.on-dark .feat p{color:var(--muted-dk)}
.on-dark .feat__icon{background:var(--lime);color:var(--navy-dark)}

/* ==========================================================================
   STATS (count-up)
   ========================================================================== */
.stats{display:grid;gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr))}
.stat{text-align:center;padding:.4rem}
.stat__num{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;letter-spacing:-.04em;
  color:var(--lime);display:block;font-variant-numeric:tabular-nums;
}
.sect--paper .stat__num,.sect--white .stat__num,.sect--paper2 .stat__num{color:var(--lime-ink)}
.stat__label{
  display:block;margin-top:.6rem;font-size:.86rem;line-height:1.35;
  color:var(--muted-dk);font-weight:600;opacity:.92;
}
.sect--paper .stat__label,.sect--white .stat__label,.sect--paper2 .stat__label{color:var(--muted)}

/* ==========================================================================
   TIMELINE (campaign phases) — spine fills on scroll
   ========================================================================== */
.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 2.6rem}
.timeline::before{content:"";position:absolute;left:11px;top:.5rem;bottom:.5rem;width:3px;
  background:var(--line);border-radius:2px}
.on-dark .timeline::before{background:rgba(255,255,255,.17)}
.timeline::after{content:"";position:absolute;left:11px;top:.5rem;width:3px;border-radius:2px;
  background:linear-gradient(var(--lime),var(--teal-lt));
  height:var(--fill,0%);transition:height 1.1s var(--ease-out)}
.timeline li{position:relative;margin:0 0 2.1rem;padding-bottom:.2rem}
.timeline li:last-child{margin-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-2.6rem;top:.34rem;width:25px;height:25px;border-radius:50%;
  background:var(--paper);border:3px solid var(--line);z-index:2;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.on-dark .timeline li::before{background:var(--navy-dark);border-color:rgba(255,255,255,.28)}
.timeline li.is-in::before{border-color:var(--lime);background:var(--lime);transform:scale(1.12)}
.timeline .ph{font-family:'Archivo',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lime-ink);display:block;margin-bottom:.3rem}
.on-dark .timeline .ph{color:var(--lime)}
.timeline h3{margin-bottom:.4rem;font-size:1.18rem}
.timeline p{margin:0;color:var(--muted);font-size:.99rem}
.on-dark .timeline p{color:var(--muted-dk)}
.timeline li.is-done .ph::after{content:" ✓";color:var(--lime-ink)}
.on-dark .timeline li.is-done .ph::after{color:var(--lime)}

/* ==========================================================================
   GIVING TIERS
   ========================================================================== */
.tier{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.4vw,1.8rem);height:100%;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.tier:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--lime)}
.tier__amt{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--navy);line-height:1;letter-spacing:-.03em}
.tier__amt small{display:block;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime-ink);margin-bottom:.4rem;letter-spacing:.12em}
.tier p{margin:.85rem 0 0;color:var(--muted);font-size:.97rem}
.tier--featured{border-color:var(--navy);background:var(--paper)}
.tier--featured .tier__amt{color:var(--navy)}

/* Price list rows (memorial giving) */
.price-row{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.9rem 0;border-bottom:1px dashed var(--line);
}
.price-row:last-child{border-bottom:0}
.price-row__label{font-weight:600;color:var(--ink);flex:1 1 auto;min-width:min(100%,220px)}
.price-row__label small{display:block;font-weight:400;color:var(--muted);font-size:.86rem;margin-top:.15rem}
.price-row__amt{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.3rem;
  color:var(--lime-ink);flex:none;letter-spacing:-.02em}

/* ==========================================================================
   BOARD ROSTER
   ========================================================================== */
.roster{display:grid;gap:.65rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  list-style:none;margin:0;padding:0}
.roster li{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.97rem;
  transition:border-left-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s}
.roster li:hover{border-left-color:var(--lime);transform:translateX(3px);box-shadow:var(--sh-1)}
.roster .nm{display:block;font-weight:700;color:var(--navy);line-height:1.3}
.roster .rl{display:block;font-size:.79rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime-ink);margin-top:.2rem}
.roster li.is-officer{border-left-color:var(--navy);background:var(--paper)}

/* ==========================================================================
   EVENTS
   ========================================================================== */
.event{
  display:grid;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.event:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
@media(min-width:720px){.event{grid-template-columns:150px 1fr}}
.event__when{
  background:var(--navy);color:#fff;padding:1.5rem 1.2rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;
}
.event__mo{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.5rem;
  letter-spacing:.02em;text-transform:uppercase;line-height:1;color:var(--lime)}
.event__yr{font-size:.82rem;color:var(--muted-dk);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.event__body{padding:clamp(1.3rem,2.4vw,1.8rem)}
.event__body h3{margin-bottom:.45rem}
.event__body p{color:var(--muted);margin-bottom:.8rem}

/* ==========================================================================
   PROSE + CALLOUT
   ========================================================================== */
.prose{max-width:72ch}
.prose h2{margin-top:2.4rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9rem;font-size:1.22rem}
.prose ul li::marker{color:var(--lime-ink)}
.prose a{font-weight:600}

.callout{
  background:var(--paper-2);border-left:5px solid var(--lime);
  border-radius:0 var(--r) var(--r) 0;padding:clamp(1.2rem,2.4vw,1.7rem) clamp(1.3rem,2.6vw,1.9rem);
  margin:2rem 0;
}
.callout p{margin:0;font-size:1.06rem;color:var(--ink)}
.callout p+p{margin-top:.8rem}
.callout__label{font-family:'Archivo',sans-serif;font-weight:800;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink);display:block;margin-bottom:.5rem}
.on-dark .callout{background:rgba(255,255,255,.06);border-left-color:var(--lime)}
.on-dark .callout p{color:#EAF2F8}
.on-dark .callout__label{color:var(--lime)}

/* Figure with caption */
.fig{margin:0}
.fig img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%}
.fig figcaption{margin-top:.75rem;font-size:.87rem;color:var(--muted);line-height:1.5}
.on-dark .fig figcaption{color:var(--muted-dk)}

/* Gallery */
.gallery{display:grid;gap:clamp(.7rem,1.6vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/2;background:var(--paper-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:1.5rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(4,31,51,.9));
  color:#fff;font-size:.84rem;font-weight:600;line-height:1.4;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem}
.field label{font-family:'Archivo',sans-serif;font-weight:700;font-size:.83rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.field .req{color:var(--coral-ink)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;min-height:48px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#CFC7B2}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(9,67,108,.14)}
.field-row{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media(min-width:620px){.field-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:.84rem;color:var(--muted);line-height:1.55}
.form-note a{color:var(--lime-ink)}
/* Spam protection on this site is reCAPTCHA v3 ALONE (fleet standard) — there is
   deliberately no honeypot field, so there is no honeypot style here either. */

/* Visible to screen readers only */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.form-error{
  background:#FDECE7;border-left:5px solid var(--coral-ink);border-radius:0 var(--r) var(--r) 0;
  padding:1rem 1.2rem;margin-bottom:1.3rem;color:#7C2A17;font-size:.97rem;
}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--sh-2)}

/* Contact detail rows */
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.contact-list li{margin:0;display:flex;gap:1rem;align-items:flex-start}
.contact-list .ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--navy);color:var(--lime)}
.contact-list .ic svg{width:21px;height:21px}
.contact-list .lb{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lime-ink);margin-bottom:.2rem}
.contact-list a{font-weight:600;font-size:1.06rem;color:var(--navy);text-decoration:none;
  display:inline-flex;min-height:24px;align-items:center}
.contact-list a:hover{color:var(--lime-ink);text-decoration:underline}
.on-dark .contact-list .ic{background:var(--lime);color:var(--navy-dark)}
.on-dark .contact-list .lb{color:var(--lime)}
.on-dark .contact-list a{color:#fff}
.on-dark .contact-list a:hover{color:var(--lime)}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--navy-dark),var(--navy) 58%,var(--navy-deep));color:#fff}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.1;
  background:url('/assets/images/tex-bamboo-1200.webp') repeat;background-size:340px}
.cta-band__inner{position:relative;z-index:2;text-align:center;
  padding-block:clamp(3.2rem,6.5vw,5.5rem)}
.cta-band h2{color:#fff;max-width:24ch;margin-inline:auto}
.cta-band .lead{color:#CFE0EC;max-width:58ch;margin-inline:auto}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-dark);color:#C6D8E5;font-size:.96rem}
.footer-top{padding-block:clamp(2.8rem,5.5vw,4.2rem)}
.footer-grid{display:grid;gap:clamp(1.8rem,3.5vw,3rem);grid-template-columns:1fr}
@media(min-width:760px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
.footer-brand{background:var(--paper);border-radius:var(--r);padding:.9rem 1.1rem;
  display:inline-block;margin-bottom:1.2rem}
.footer-brand img{height:64px;width:auto}
.site-footer p{color:#AFC6D6;line-height:1.6}
.footer-h{font-family:'Archivo',sans-serif;font-weight:800;font-size:.79rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:1rem;display:block}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:0}
.footer-links a{display:inline-flex;align-items:center;min-height:34px;padding:.28rem 0;
  color:#C6D8E5;text-decoration:none;transition:color .2s,transform .2s}
.footer-links a:hover{color:var(--lime);transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between}
.footer-bottom p{margin:0;font-size:.85rem;color:#94AFC4}
.footer-bottom a{color:#AFC6D6}
.footer-bottom a:hover{color:var(--lime)}
.socials{display:flex;gap:.6rem}
.socials a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:#fff;
  transition:background .25s var(--ease),transform .25s var(--ease),color .25s}
.socials a:hover{background:var(--lime);color:var(--navy-dark);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.ein{font-size:.8rem;color:#8CA8BE;margin-top:.9rem}

/* ==========================================================================
   SCROLL REVEAL — opt-in via [data-reveal]; JS adds .is-in
   ========================================================================== */
/* Gated on .js — set synchronously in <head>. Without JS these rules never apply,
   so a no-JS visitor sees every section rather than a blank page, and a JS visitor
   never sees content paint and then vanish. */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal][data-d="1"]{transition-delay:.09s}
.js [data-reveal][data-d="2"]{transition-delay:.18s}
.js [data-reveal][data-d="3"]{transition-delay:.27s}
.js [data-reveal][data-d="4"]{transition-delay:.36s}
.js [data-reveal][data-d="5"]{transition-delay:.45s}
.js [data-reveal="left"]{transform:translateX(-32px)}
.js [data-reveal="right"]{transform:translateX(32px)}
.js [data-reveal="scale"]{transform:scale(.95)}

/* ==========================================================================
   MOTION OFF — one switch kills every animation on the site
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero__media img{animation:none!important;transform:none!important}
  .hl::before{transform:scaleX(1)!important}
  .feat::before{transform:scaleX(1)!important}
  .timeline::after{transition:none!important}
}

/* ---------- Print */
@media print{
  .site-header,.drawer,.wj-bc,.cta-band,.site-footer,.skip,.burger{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.page-hero{background:#fff;color:#000;min-height:0}
  .hero__media,.page-hero__media,.hero__scrim{display:none}
  .hero h1,.page-hero h1{color:#000}
  a{text-decoration:underline;color:#000}
}