/* ==========================================================================
   KODA 4 Kids - Holland, Michigan
   Bright, warm, local. Every color here is sampled from the KODA 4 Kids logo.
   White is the dominant surface; the logo colors do the talking.

   Depth model
   -----------
   The old sheet had one flat shadow token and a single tint per band, so every
   section landed on the same optical plane and the page read as a stack of
   rectangles. Three things fix that here, and they are used together:

     1. A five-step elevation scale. Every shadow is TWO shadows - a wide, very
        soft ambient one and a tight, darker contact one. A single blur reads as
        fog; the contact shadow is what makes an element look like it is
        actually resting on something.
     2. Warm-tinted shadows. Neutral grey shadows on a cream page look dirty,
        so the shadow color is a desaturated version of the ink, which is itself
        warm.
     3. Surfaces that catch light. Cards carry a 1px top highlight and a hairline
        border; raised things get a gradient rather than a flat fill.

   Motion is opt-in: every animation is disabled wholesale under
   prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  /* straight off the logo artwork */
  --yellow:      #F8B820;
  --yellow-deep: #E9A408;
  --yellow-soft: #FFE9B0;
  --yellow-wash: #FFF7E3;
  --gold-text:   #8A5A00;   /* readable gold for TEXT - logo yellow is 2.1:1 on white */
  --red:         #E81828;   /* logo red - fills and large text */
  --red-text:    #C8101E;   /* deeper, for small text on cream (5.5:1) */
  --red-soft:    #FFD9DC;
  --green:       #186818;
  --green-deep:  #10500F;
  --green-soft:  #D6EBD2;
  --teal:        #004868;
  --teal-deep:   #003049;
  --teal-soft:   #D3E8F2;

  /* The action red - Donate buttons, the primary tile, focus rings.
     This was a pink (#C84869) sampled from koda4kids.com, and sitting beside
     the logo it read as a second brand rather than as part of this one. It is
     now the logo red, the red in the K, so the thing we most want clicked is
     the same color as the mark above it. The name is kept because admin.html,
     signup.html and privacy.html all reference --rose. */
  --rose:        #E81828;
  --rose-deep:   #B00F1C;
  --royal:       #213E8C;

  /* surfaces - bright, never dark.

     --cream and --cream-2 were #FFF9EE and #FFF2DC, a fully saturated tan
     yellow. At panel size - the kit strip, the Contact cards, the footer -
     that much yellow stopped reading as paper and started reading as a
     stain, and it fought the logo yellow sitting right beside it.

     They are now the same two lightness steps with about three quarters of
     the saturation taken out: a warm stone. It still sits on the warm side
     of neutral, which is what keeps the warm-tinted shadows and the warm ink
     honest, and it still separates cleanly from --sky in the band rhythm.
     The logo yellow now only ever appears as an accent, never as a field. */
  --white:       #FFFFFF;
  --cream:       #F8F6F3;
  --cream-2:     #EFEBE6;
  --sky:         #EFF7FB;

  /* text - warm near-black, matching the logo's ink outlines */
  --ink:         #1F1D1A;
  --ink-soft:    #5F594E;
  --ink-faint:   #6E675C;

  --line:        1px solid #E8E4DE;
  --line-2:      2px solid #DED9D1;
  --hairline:    rgba(31,29,26,.08);

  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  --r-sm: 12px;
  --r:    20px;
  --r-lg: 30px;
  --r-xl: 44px;
  --curve: clamp(28px, 4vw, 56px);

  /* --- elevation: ambient + contact, warm-tinted --- */
  --sh-1: 0 1px 2px rgba(70,54,32,.06),  0 2px 6px -2px rgba(70,54,32,.08);
  --sh-2: 0 2px 4px rgba(70,54,32,.06),  0 8px 18px -6px rgba(70,54,32,.14);
  --sh-3: 0 3px 6px rgba(70,54,32,.07),  0 16px 32px -10px rgba(70,54,32,.18);
  --sh-4: 0 6px 12px rgba(70,54,32,.08), 0 28px 52px -16px rgba(70,54,32,.24);
  --sh-5: 0 10px 20px rgba(70,54,32,.10),0 44px 80px -24px rgba(70,54,32,.30);
  --sh-warm: 0 3px 6px rgba(168,25,35,.14), 0 16px 34px -12px rgba(168,25,35,.36);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,.9);

  /* legacy aliases so nothing that still references them breaks */
  --shadow:      var(--sh-2);
  --shadow-lg:   var(--sh-4);
  --shadow-warm: var(--sh-warm);

  --gut: clamp(1.15rem, 4vw, 3rem);
  --maxw: 1200px;

  --ease: cubic-bezier(.2,.8,.28,1);
  --bounce: cubic-bezier(.34,1.4,.64,1);

  /* set by JS: 0 at the top of the document, 1 at the bottom */
  --scroll: 0;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
/* --head-h is measured by koda.js; the fallback matches the CSS height so an
   anchor still lands correctly before the script runs. */
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h,4.7rem) + 1.25rem);
}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem,.98rem + .22vw,1.12rem);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
/* Images carry width/height attributes for layout stability. Those attributes
   also act as presentational hints, so setting only `width` in CSS leaves the
   attribute height in force and stretches the image. height:auto keeps the
   aspect ratio; rules that genuinely want a fixed height (.frame img,
   .brand img) are more specific and still win. */
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--teal);text-underline-offset:.2em;text-decoration-thickness:2px}
a:hover{color:var(--red-text)}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}

/* A fine, still grain over the whole page. Two jobs: it stops the large flat
   cream fields from banding on cheap panels, and it gives every surface a
   texture for the shadows to sit against. Kept under 4% or it reads as noise.

   Deliberately position:absolute and NOT mix-blend-mode. A fixed, blended
   full-viewport layer has to be re-rastered on every scroll frame, which is a
   real cost on the mid-range phones most of this audience is holding. Painted
   once into the page flow it costs nothing to scroll. */
body::after{
  content:'';position:absolute;inset:0;z-index:9999;pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{position:relative}

/* ---------- 3. Type ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.005em;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.3rem)}
h2{font-size:clamp(1.95rem,1.4rem + 2.2vw,3.1rem)}
h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem)}
h4{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);font-weight:700}
p{margin:0 0 1.15em;text-wrap:pretty}
.lede{font-size:clamp(1.12rem,1.02rem + .55vw,1.4rem);line-height:1.6;color:var(--ink-soft);max-width:58ch}
.small{font-size:.9rem;color:var(--ink-soft)}
.tiny{font-size:.82rem;color:var(--ink-faint)}

.eyebrow{
  font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:.04em;color:var(--teal);
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .8rem;
}
.eyebrow::before{content:'';width:1.6rem;height:4px;background:var(--yellow);border-radius:3px}
.eyebrow--red{color:var(--red-text)}
.eyebrow--red::before{background:var(--red)}
.eyebrow--green{color:var(--green)}
.eyebrow--green::before{background:var(--green)}

/* Crayon highlight.
   The gradient is measured from the BOTTOM of the inline background box, which
   sits a full descent below the baseline. Baloo 2 reports a 0.525em descent and
   a 0.505em x-height, so:

     baseline          = 0.525em  above the box bottom
     top of lowercase  = 1.030em  above the box bottom

   These stops put the band from a hair under the baseline to about three
   quarters of the way up the x-height, which is where a real highlighter lands.
   The earlier values (0.46 / 0.78) stopped at the middle of the x-height and
   read as a thick underline instead. Recalibrate if the display font changes. */
:root{ --uline-lo:.50em; --uline-hi:.92em; }
.uline{
  background-image:linear-gradient(to top,
    transparent var(--uline-lo), var(--yellow) var(--uline-lo),
    var(--yellow) var(--uline-hi), transparent var(--uline-hi));
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding:0 .08em;
}
.uline--red{background-image:linear-gradient(to top,transparent var(--uline-lo),var(--red-soft) var(--uline-lo),var(--red-soft) var(--uline-hi),transparent var(--uline-hi))}
.uline--green{background-image:linear-gradient(to top,transparent var(--uline-lo),var(--green-soft) var(--uline-lo),var(--green-soft) var(--uline-hi),transparent var(--uline-hi))}
.uline--teal{background-image:linear-gradient(to top,transparent var(--uline-lo),var(--teal-soft) var(--uline-lo),var(--teal-soft) var(--uline-hi),transparent var(--uline-hi))}

/* The highlighter draws itself when the heading scrolls in, left to right,
   the way someone would actually pull a marker across the word. */
.js .uline{background-size:0 100%}
.js .is-in .uline,.js .uline.is-in{
  background-size:100% 100%;
  transition:background-size .75s cubic-bezier(.4,0,.2,1) .18s;
}

.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}

/* ---------- 4. Layout ---------- */
.wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto}
.wrap--narrow{width:min(780px,100% - var(--gut)*2);margin-inline:auto}
.wrap--mid{width:min(980px,100% - var(--gut)*2);margin-inline:auto}
.band{padding:clamp(3.5rem,7vw,6rem) 0;position:relative;background:var(--white)}
.band--tight{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.band--roomy{padding:clamp(4.5rem,9vw,8rem) 0}
.band--cream{background:var(--cream)}
.band--cream2{background:var(--cream-2)}
.band--sky{background:var(--sky)}
.band--yellow{background:var(--yellow-wash)}
.band--gold{background:var(--yellow)}

/* Sections curve up over the one above, like sheets of paper stacked on a
   board. The shadow under the lip is what sells the stack - without it the
   curve reads as a shape, not as an edge. */
.band--lift{
  border-radius:var(--curve) var(--curve) 0 0;
  margin-top:calc(var(--curve) * -1);
  z-index:1;
  box-shadow:0 -12px 28px -14px rgba(70,54,32,.20);
}
.band--lift + .band--lift{z-index:2}
.band--lift + .band--lift + .band--lift{z-index:3}
.band--lift + .band--lift + .band--lift + .band--lift{z-index:4}
.band--lift + .band--lift + .band--lift + .band--lift + .band--lift{z-index:5}
.band--lift + .band--lift + .band--lift + .band--lift + .band--lift + .band--lift{z-index:6}
.band--lift + .band--lift + .band--lift + .band--lift + .band--lift + .band--lift + .band--lift{z-index:7}
.band--lift + .band--lift + .band--lift + .band--lift + .band--lift + .band--lift + .band--lift + .band--lift{z-index:8}

/* content that should sit above the curved edge */
.band > .wrap{position:relative;z-index:2}

/* A soft off-center wash, so a band is lit from somewhere rather than filled
   with one flat color. Applied per band with a modifier. */
.band--glow-warm::before,
.band--glow-cool::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
}
.band--glow-warm::before{background:radial-gradient(70% 60% at 82% 0%, rgba(248,184,32,.10), transparent 68%)}
.band--glow-cool::before{background:radial-gradient(64% 58% at 8% 4%, rgba(0,72,104,.10), transparent 66%)}

.section-head{max-width:60rem;margin-bottom:clamp(2rem,4vw,3rem)}
.center.section-head{margin-inline:auto}

.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.split--wide-l{grid-template-columns:1.1fr .9fr}
.split--wide-r{grid-template-columns:.9fr 1.1fr}
.split--top{align-items:start}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.stack{display:flex;flex-direction:column;gap:1rem}
@media (max-width:880px){
  .split,.split--wide-l,.split--wide-r{grid-template-columns:1fr}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--rose);--bg2:var(--rose-deep);--fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  padding:.72em 1.5em;border-radius:999px;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--fg);border:2px solid transparent;
  text-decoration:none;cursor:pointer;isolation:isolate;
  box-shadow:var(--sh-2), var(--sh-inset-top);
  transition:transform .2s var(--bounce),box-shadow .22s var(--ease),filter .2s;
}
/* a light sweep that follows the pointer across the face of the button */
.btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 70%);
  opacity:0;transition:opacity .25s var(--ease);
}
.btn:hover::before{opacity:1}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sh-4), var(--sh-inset-top);color:var(--fg)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn--lg{font-size:1.14rem;padding:.85em 1.9em}
.btn--mini{font-size:.92rem;padding:.55em 1.15em}
.btn--donate{--bg:var(--rose);--bg2:var(--rose-deep);box-shadow:var(--sh-warm), var(--sh-inset-top)}
.btn--donate:hover{box-shadow:0 6px 12px rgba(168,25,35,.18), 0 26px 50px -14px rgba(168,25,35,.44), var(--sh-inset-top)}

/* The Donate button breathes.
   Slow and faint on purpose: this runs forever on every page, and anything
   faster or heavier stops reading as "look here" and starts reading as a
   broken banner ad.

   It is a halo on ::after rather than a pulse of the button's own box-shadow
   or transform. The button already animates transform on :hover and :active
   and sets its own box-shadow on :hover; an animation on either property wins
   over those declarations for as long as it is applied, so pulsing them
   directly would swallow the hover state. A separate ring layer leaves both
   alone. It sits at z-index:-1 like the pointer sweep on ::before - an outer
   box-shadow never paints inside the border box, so only the spread outside
   the button is visible.

   It stops on hover and on keyboard focus: once the pointer or focus is on the
   button the pulse has done its job, and a target that keeps moving under the
   cursor is just noise. Under prefers-reduced-motion the global block at the
   foot of this file cancels it outright. */
@keyframes donate-pulse{
  0%  {box-shadow:0 0 0 0    rgba(232,24,40,.40)}
  70% {box-shadow:0 0 0 13px rgba(232,24,40,0)}
  100%{box-shadow:0 0 0 0    rgba(232,24,40,0)}
}
.btn--donate::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  animation:donate-pulse 3.4s var(--ease) infinite;
}
.btn--donate:hover::after,
.btn--donate:focus-visible::after{animation-play-state:paused}
.btn--yellow{--bg:var(--yellow);--bg2:var(--yellow-deep);--fg:var(--ink)}
.btn--teal{--bg:#0A5C82;--bg2:var(--teal)}
.btn--green{--bg:#1E7A1E;--bg2:var(--green-deep)}
.btn--red{--bg:var(--red);--bg2:#C8101E}
.btn--white{--bg:#fff;--bg2:#F6F4F1;--fg:var(--ink);border-color:#DED9D1}
.btn--outline{
  background:rgba(255,255,255,.6);--fg:var(--teal);
  border-color:currentColor;box-shadow:none;backdrop-filter:blur(4px);
}
.btn--outline:hover{background:var(--teal);--fg:#fff;border-color:var(--teal);box-shadow:var(--sh-3)}
.btn svg{width:19px;height:19px;flex:none;transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 6. Header ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--teal);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s;
}
/* The bar only earns a shadow once the page has moved under it. */
.site-head.is-stuck{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 2px rgba(70,54,32,.05), 0 10px 24px -14px rgba(70,54,32,.28);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.6rem;padding:.5rem 0}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{height:52px;width:auto;transition:transform .3s var(--bounce)}
.brand:hover img{transform:rotate(-4deg) scale(1.05)}
.brand__txt{display:block;font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.1;color:var(--ink)}
.brand__sub{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}

/* reading progress, hairline along the bottom edge of the sticky bar */
.site-head__progress{
  position:absolute;left:0;bottom:-1px;height:3px;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--scroll));
  background:linear-gradient(90deg,var(--yellow),var(--rose) 55%,var(--teal));
  pointer-events:none;
}

.nav__links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0 0 0 auto;padding:0}
.nav__link{
  position:relative;display:block;padding:.5rem .8rem;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);
  text-decoration:none;transition:background .18s,color .18s;
}
.nav__link::after{
  content:'';position:absolute;left:50%;bottom:.28rem;translate:-50% 0;
  width:0;height:3px;border-radius:3px;background:var(--yellow);
  transition:width .25s var(--ease);
}
.nav__link:hover{background:var(--yellow-wash);color:var(--ink)}
.nav__link.is-active{color:var(--teal)}
.nav__link.is-active::after{width:1.2rem}
.nav__cta{list-style:none;margin-left:.4rem;display:flex;align-items:center;gap:.5rem;flex:none}

/* the staff login key, deliberately small and quiet next to Donate */
.iconbtn{
  display:inline-grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:50%;border:2px solid #DED9D1;background:#fff;color:var(--teal);
  cursor:pointer;padding:0;
  box-shadow:var(--sh-1);
  transition:transform .2s var(--bounce),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s;
}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--sh-3)}

.nav__toggle{
  display:none;width:46px;height:46px;border:2px solid #DED9D1;border-radius:14px;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0;
  box-shadow:var(--sh-1);
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  display:block;width:20px;height:3px;background:var(--ink);border-radius:3px;position:relative;
  transition:transform .25s var(--ease),opacity .18s;
}
.nav__toggle span::before{content:'';position:absolute;top:-6px}
.nav__toggle span::after{content:'';position:absolute;top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1060px){
  .nav__toggle{display:inline-flex}
  .nav__links{
    position:fixed;inset:var(--head-h,4.7rem) 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;
    background:#fff;border-bottom:var(--line-2);padding:1rem var(--gut) 1.5rem;
    clip-path:inset(0 0 100% 0);transition:clip-path .35s var(--ease);
    box-shadow:0 18px 30px rgba(31,29,26,.10);
    max-height:calc(100dvh - var(--head-h,4.7rem));overflow-y:auto;margin:0;
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0)}
  .nav__link{padding:.8rem .8rem;font-size:1.15rem}
  .nav__link::after{left:.8rem;translate:0 0;bottom:.5rem}
  .nav__cta{margin-left:auto}
}
/* Small phones: the bar has to hold the brand, Donate, the staff key and the
   menu button inside about 345px. Everything tightens rather than anything
   being dropped. */
@media (max-width:560px){
  .nav{gap:.5rem}
  .brand{gap:.5rem}
  .brand img{height:44px}
  .brand__txt{font-size:1rem}
  .brand__sub{font-size:.62rem;letter-spacing:.07em}
  .nav__cta{gap:.35rem}
  .nav__cta .btn{font-size:.92rem;padding:.6em 1.05em}
  .iconbtn{width:38px;height:38px}
  .iconbtn svg{width:17px;height:17px}
  .nav__toggle{width:42px;height:42px;border-radius:12px}
}
@media (max-width:390px){
  .brand__txt,.brand__sub{display:none}
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 680px at 94% 2%, var(--yellow-wash) 0%, transparent 60%),
    radial-gradient(720px 560px at -6% 88%, var(--teal-soft) 0%, transparent 55%),
    var(--white);
  padding:clamp(1.75rem,3.5vw,3rem) 0 clamp(4.5rem,8vw,7rem);
}
/* Snow. One canvas, drawn by JS, sitting behind the content and above the
   background wash. Removed entirely when motion is reduced. */
.hero__snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.75}
.hero > .wrap{position:relative;z-index:1}

.hero__grid{
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
}
/* The logo is tall (roughly 3:5). Keeping it modest here is what lets the
   photograph become the biggest thing on the page. It is centred over the
   headline block as a crest - an img is inline by default, so the auto margins
   only bite once it is display:block. */
.hero__logo{display:block;width:min(168px,34vw);height:auto;margin:0 auto 1rem}
.hero h1{margin-bottom:.32em}
.hero .lede{margin-bottom:0}
.hero__actions{margin-top:1.7rem}

/* Depth stage. Each layer sits at a different --depth, and JS translates them
   by pointer position and scroll in proportion to it, so the closer things move
   further. perspective on the parent makes the rotation read as a real tilt. */
.hero__art{position:relative;isolation:isolate;perspective:1000px}
.hero__photo{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:9px solid #fff;
  box-shadow:var(--sh-5);
  aspect-ratio:4/5;
  transform:rotate(1.6deg);
  will-change:transform;
}
.hero__photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(255,255,255,.30),transparent 42%);
}
.hero__photo img{width:100%;height:100%;object-fit:cover}

/* The 100% mark.
   The previous version was a yellow rectangle running a looping bob keyframe,
   which also clobbered its own rotate() and made it wobble flat on the page.
   It is a seal now: an embossed disc that presses into the photograph, rotates
   into place once on load, and afterwards only reacts to the pointer. Nothing
   about it repeats, which is what stopped the old one from feeling considered. */
/* The wrapper owns the position and the parallax; the seal itself owns the
   entrance animation. Keeping them on separate elements is what stops the
   pointer parallax from overwriting the pop-in transform. */
.hero__sealwrap{
  position:absolute;left:-2.2rem;top:6%;z-index:3;
  width:clamp(8.5rem,13vw,10.5rem);
  will-change:transform;
}
.hero__seal{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  color:var(--ink);
  background:
    radial-gradient(circle at 34% 26%, #FFD877 0%, var(--yellow) 46%, var(--yellow-deep) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.75),
    inset 0 -4px 10px rgba(140,90,0,.30),
    var(--sh-4);
  transform:rotate(-9deg);
}
/* the stitched inner ring */
.hero__seal::before{
  content:'';position:absolute;inset:9%;border-radius:50%;
  border:2px dashed rgba(90,58,0,.34);
}
.hero__seal b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,3.1vw,2.5rem);line-height:1;letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.hero__seal span{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(.62rem,.86vw,.72rem);line-height:1.2;letter-spacing:.03em;
  text-transform:uppercase;margin-top:.25rem;padding:0 1.6rem;
  color:#5A3A00;
}
.js .hero__seal{opacity:0;transform:rotate(-38deg) scale(.55)}
.js .hero__seal.is-in{
  opacity:1;transform:rotate(-9deg) scale(1);
  transition:opacity .5s var(--ease) .5s,transform .8s var(--bounce) .5s;
}

/* a second, smaller photo tucked behind the main one - scrapbook, not gallery */
.hero__peek{
  position:absolute;right:-1.2rem;bottom:-1.8rem;z-index:2;
  width:38%;max-width:210px;aspect-ratio:1;
  border-radius:var(--r-lg);overflow:hidden;border:7px solid #fff;
  box-shadow:var(--sh-4);
  transform:rotate(-5deg);
  will-change:transform;
}
.hero__peek img{width:100%;height:100%;object-fit:cover}

.hero__note{margin-top:1.1rem}

@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr;text-align:center;gap:2.25rem}
  .hero__grid .lede{margin-inline:auto}
  .hero .row{justify-content:center}
  .hero__logo{margin-inline:auto;width:min(180px,44vw)}
  .hero__art{max-width:460px;margin-inline:auto;width:100%}
  .hero__photo{aspect-ratio:4/3}
  .hero__sealwrap{left:-1rem;top:auto;bottom:-2rem;width:clamp(7.5rem,26vw,9rem)}
  .hero__peek{display:none}
}
@media (max-width:520px){
  .hero__art{margin-bottom:3rem}
  .hero__sealwrap{left:50%;translate:-50% 0;bottom:-3.2rem}
}

/* Elements that straddle the seam of the section above them. */
.overlap{margin-top:calc(clamp(2rem,5vw,4.5rem) * -1);position:relative;z-index:5}

/* ---------- 8. The 100% promise ---------- */
.promise{
  background:linear-gradient(168deg,#FFC845 0%,var(--yellow) 42%,var(--yellow-deep) 100%);
  color:var(--ink);padding:clamp(3rem,6vw,4.75rem) 0;text-align:center;
  position:relative;overflow:hidden;
}
.promise__big{
  font-family:var(--display);font-weight:800;line-height:1.02;
  font-size:clamp(2.2rem,1.3rem + 4vw,4rem);margin:0 0 .3em;
  text-shadow:0 2px 0 rgba(255,255,255,.28);
}
.promise__sub{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);font-weight:700;margin:0;max-width:46ch;margin-inline:auto;color:#4A3202}
.promise__row{display:flex;flex-wrap:wrap;gap:.8rem 1rem;justify-content:center;margin-top:2rem}
.promise__item{
  display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1rem;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7);
  padding:.55em 1.15em;border-radius:999px;
  box-shadow:var(--sh-inset-top), 0 6px 14px -8px rgba(120,78,0,.5);
  backdrop-filter:blur(3px);
  transition:transform .22s var(--bounce),background .22s;
}
.promise__item:hover{transform:translateY(-3px);background:rgba(255,255,255,.62)}
.promise__item svg{width:20px;height:20px;flex:none;stroke:var(--green-deep);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.promise__dots{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(var(--ink) 2px,transparent 2.2px);background-size:28px 28px;pointer-events:none}
.promise > .wrap{position:relative;z-index:2}

/* ---------- 9. Cards ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg,#fff,#FFFDF8);
  border:var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,2.6vw,2rem);
  box-shadow:var(--sh-2), var(--sh-inset-top);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.card--lift:hover{transform:translateY(-6px);box-shadow:var(--sh-4), var(--sh-inset-top)}
.card--cream{background:linear-gradient(180deg,var(--cream),#F1EDE8)}
.card p:last-child{margin-bottom:0}
.card__mark{
  width:2.9rem;height:2.9rem;border-radius:14px;display:grid;place-items:center;
  margin-bottom:1rem;background:var(--yellow-wash);color:var(--teal);
  box-shadow:var(--sh-1), var(--sh-inset-top);
}
.card__mark svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* A pointer-tracked highlight. Cheap, but it is what makes a flat card feel
   like a physical surface catching a light source. */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px 200px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 62%);
  opacity:0;transition:opacity .3s var(--ease);
}
.tilt:hover::after{opacity:1}

/* colored quick-link tiles, echoing the row on koda4kids.com */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.6vw,1.1rem)}
@media (max-width:880px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}
.tile{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:.15rem;
  text-decoration:none;border-radius:var(--r);padding:1.35rem 1.3rem 1.45rem;
  color:#fff;
  background:linear-gradient(160deg,var(--t1),var(--t2));
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .26s var(--bounce),box-shadow .26s var(--ease);
}
.tile::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(200px 120px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.30),transparent 70%);
  transition:opacity .3s var(--ease);
}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh-5), inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.tile:hover::before{opacity:1}
.tile__ico{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.55rem;opacity:.92}
.tile b{display:block;font-family:var(--display);font-weight:800;font-size:1.28rem;line-height:1.15}
.tile span{display:block;font-size:.92rem;opacity:.95;line-height:1.45}
.tile__go{
  margin-top:.8rem;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--display);font-weight:700;font-size:.86rem;opacity:.85;
  transition:gap .22s var(--ease),opacity .22s;
}
.tile:hover .tile__go{gap:.6rem;opacity:1}
.tile__go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tile--rose{--t1:#F0303F;--t2:var(--rose-deep)}
.tile--teal{--t1:#0A5C82;--t2:var(--teal-deep)}
.tile--green{--t1:#1E7A1E;--t2:var(--green-deep)}
.tile--red{--t1:#F0303F;--t2:#B70F1C}
.tile--yellow{--t1:#FFCB4D;--t2:var(--yellow-deep);color:var(--ink)}
.tile--yellow:hover{color:var(--ink)}

/* The Need - four figures on one line
   ------------------------------------------------------------------
   This was four tall cards, each with its own paragraph of context and its
   own dashed attribution rule. Between the lede above and the closing
   paragraph below it ate a whole screen to make a point the four numbers
   already make on their own.

   It is one band now: a left-hand head, the four figures in a row beside it,
   and every source collected into a single footnote. Nothing was rounded and
   nothing was dropped - the bodies were restatement, the attributions moved
   rather than went.

   It is deliberately typographic rather than photographic: a stock photograph
   of a cold-looking child pinned next to a poverty statistic is exactly the
   move this site has avoided everywhere else.

   --rule is separate from --accent because the two have different jobs. The
   rule is decoration and can be the pure logo color; the numeral is text and
   has to clear contrast. That only actually diverges on the gold figure -
   logo yellow on stone is nowhere near the 3:1 that even large text needs -
   so there the rule stays yellow and the numeral drops to --gold-text. */
.needbar{
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem) clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
.needbar__head{max-width:34rem}
.needbar__title{
  margin:.15rem 0 .55rem;text-wrap:balance;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1.1;
}
.needbar__sub{
  margin:0;font-size:1rem;line-height:1.55;color:var(--ink-soft);text-wrap:pretty;
}
.needbar__link{font-weight:700}

.needbar__stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.6rem) clamp(1.25rem,3vw,2.25rem);
}
/* Each figure hangs off a colored rule rather than sitting in a card. Without
   the four boxes the row costs roughly a third of the height it used to. */
.nstat{
  --accent:var(--teal);--rule:var(--accent);
  padding-left:clamp(.85rem,1.6vw,1.15rem);
  border-left:4px solid var(--rule);
}
.nstat b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,1.5rem + 1.5vw,2.6rem);line-height:1;
  color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  margin-bottom:.3rem;
}
/* Direct child only. The counter script animates a <span> INSIDE the <b>,
   and an unscoped .nstat span dropped that numeral to label size and broke
   the "<" of "<10%" onto a line of its own. */
.nstat > span{
  display:block;font-size:.95rem;line-height:1.45;color:var(--ink-soft);
  text-wrap:pretty;
}
/* A word, not a figure. "Thousands" set at the numeral size overruns its
   half-column in the middle widths, so the word variant runs a step smaller
   and keeps the label lined up with the other three. */
.nstat--word b{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.05rem)}
.nstat--red   {--accent:var(--red-text);  --rule:var(--red)}
.nstat--teal  {--accent:var(--teal)}
.nstat--green {--accent:var(--green)}
.nstat--yellow{--accent:var(--gold-text); --rule:var(--yellow)}

.needbar__src{
  grid-column:1/-1;margin:0;padding-top:.9rem;border-top:1px dashed #DED9D1;
  font-size:.74rem;line-height:1.5;color:var(--ink-faint);letter-spacing:.015em;
}
@media (max-width:900px){
  .needbar{grid-template-columns:1fr;gap:1.5rem}
  .needbar__head{max-width:none}
}
@media (max-width:480px){.needbar__stats{grid-template-columns:minmax(0,1fr)}}

/* "You can make a difference" - the video, under the kit strip
   ------------------------------------------------------------------
   Copy on the left, player on the right, and the player is the wider of the
   two so a 16:9 frame is not squeezed into a column it cannot use. Below
   860px it stacks with the copy first: the ask should still be read before
   the play button on a phone. */
.makediff{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:center;
  margin:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem);
}
.makediff__title{
  margin:.15rem 0 .7rem;text-wrap:balance;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1.1;
}
.makediff__lede{
  margin:0;font-size:1.03rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;
}
.makediff__row{margin-top:1.4rem}
/* aspect-ratio on the wrapper, iframe pinned to fill it - no padding-top
   hack, and the frame keeps its shape before the player has loaded. */
.makediff__video{
  position:relative;aspect-ratio:16/9;
  border-radius:var(--r-lg);overflow:hidden;
  border:6px solid #fff;background:var(--ink);
  box-shadow:var(--sh-4);
}
.makediff__video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
@media (max-width:860px){
  .makediff{grid-template-columns:1fr;gap:1.5rem}
}

/* photo frames */
.frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-4);border:6px solid #fff;background:var(--cream);
}
.frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(205deg,rgba(255,255,255,.26),transparent 40%);
}
.frame--4x3{aspect-ratio:4/3}
.frame--3x2{aspect-ratio:3/2}
.frame--1x1{aspect-ratio:1}
.frame--4x5{aspect-ratio:4/5}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tilt{transform:rotate(-1.2deg)}
.frame--tilt-r{transform:rotate(1.2deg)}
/* a frame that drifts slightly against the scroll, driven by JS */
.frame--drift{will-change:transform}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1rem;position:relative}
.steps li{
  counter-increment:s;position:relative;padding:1.2rem 1.3rem 1.3rem 4.3rem;
  background:linear-gradient(180deg,#fff,#FFFDF8);
  border:var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2), var(--sh-inset-top);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.steps li:hover{transform:translateX(5px);box-shadow:var(--sh-3), var(--sh-inset-top)}
.steps li::before{
  content:counter(s);position:absolute;left:1.1rem;top:1.15rem;
  width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;
  background:linear-gradient(180deg,#0A5C82,var(--teal));
  box-shadow:0 4px 10px -3px rgba(0,52,76,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.steps li:nth-child(2)::before{background:linear-gradient(180deg,#1E7A1E,var(--green-deep));box-shadow:0 4px 10px -3px rgba(16,80,15,.5), inset 0 1px 0 rgba(255,255,255,.3)}
.steps li:nth-child(3)::before{background:linear-gradient(180deg,#F0303F,#C8101E);box-shadow:0 4px 10px -3px rgba(184,16,30,.5), inset 0 1px 0 rgba(255,255,255,.3)}
.steps li:nth-child(4)::before{background:linear-gradient(180deg,#FFCB4D,var(--yellow-deep));color:var(--ink);box-shadow:0 4px 10px -3px rgba(180,120,0,.5), inset 0 1px 0 rgba(255,255,255,.5)}
.steps h4{margin:0 0 .25rem}
.steps p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* quote */
.quote{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,1.1rem + 1.1vw,2rem);line-height:1.35;color:var(--ink);
}
.byline{font-family:var(--body);font-weight:700;font-size:.95rem;color:var(--ink-soft);margin-top:1rem}

/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chip{
  border:2px solid var(--teal-soft);background:#fff;border-radius:999px;
  padding:.4em 1em;font-weight:700;font-size:.92rem;color:var(--ink);
  box-shadow:var(--sh-1);
  transition:transform .2s var(--bounce),border-color .2s,box-shadow .2s;
}
.chip:hover{transform:translateY(-2px);border-color:var(--yellow);box-shadow:var(--sh-2)}

/* The winter kit strip
   ------------------------------------------------------------------
   The shop slip that used to close the process section, rebuilt wide and
   moved up against the hero. Same paper language - cream stock, a dashed
   rule, green ticks, a torn bottom edge - but laid out along the page rather
   than down it: at this position a tall narrow receipt would have pushed the
   quick-link tiles off the first screen entirely.

   It carries .overlap, which the tile row used to hold, so this is now the
   element that laps up over the hero photograph.

   The "Cost to the family - $0.00" total that used to close the slip is gone.
   Sitting directly under a hero it read as a price tag on the kit, and the
   families it was reassuring are not the audience standing here. */
.kitstrip{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1rem,3vw,2.5rem);align-items:center;
  margin-bottom:clamp(1.6rem,3.5vw,2.5rem);
  padding:clamp(1.3rem,2.8vw,1.9rem) clamp(1.25rem,3vw,2.5rem) clamp(1.4rem,3vw,1.9rem);
  background:linear-gradient(180deg,#fff,var(--cream) 62%,var(--cream-2));
  border:var(--line-2);border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sh-4), var(--sh-inset-top);
}
/* torn bottom edge - a repeating conic gradient masked to the last 12px.
   Cheaper and sharper than an SVG, and it survives any width. */
.kitstrip::after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:-11px;height:12px;
  background:var(--cream-2);
  -webkit-mask-image:repeating-conic-gradient(from -45deg at 50% 0,#000 0 25%,transparent 0 50%);
  mask-image:repeating-conic-gradient(from -45deg at 50% 0,#000 0 25%,transparent 0 50%);
  -webkit-mask-size:22px 12px;mask-size:22px 12px;
  filter:drop-shadow(0 2px 2px rgba(70,54,32,.14));
}
.kitstrip__head{padding-right:clamp(1rem,3vw,2.5rem);border-right:2px dashed #DBD5CC}
.kitstrip__eyebrow{
  font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 .3rem;
}
.kitstrip__title{
  margin:0;color:var(--teal);text-wrap:balance;
  font-size:clamp(1.2rem,1rem + .85vw,1.75rem);line-height:1.12;
}
.kitstrip__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.7rem clamp(.75rem,2vw,1.25rem);
}

/* The six stickers.
   Each item is its icon on a coloured disc, the green tick stamped on the
   disc's corner, and the item name beside it, straight on the paper - no
   box around them, so the slip stays a slip. --tilt gives every disc its
   own slight lean, as if it were pressed on by hand; hovering straightens
   and lifts it. --disc / --fill / --fill-2 / --lite are the item's colours,
   all from the logo palette, and --act names the item's own little
   animation. The label never moves. */
.kitchip{
  --tilt:-3deg;
  --disc:var(--cream-2);--fill:var(--ink);--fill-2:var(--ink-soft);--lite:#fff;
  --act:kit-bounce;
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.1rem 0;
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.15;color:var(--ink);
  -webkit-user-select:none;user-select:none;
}
.kitchip:nth-child(2){--tilt:2.5deg}
.kitchip:nth-child(3){--tilt:-2deg}
.kitchip:nth-child(4){--tilt:3deg}
.kitchip:nth-child(5){--tilt:-2.5deg}
.kitchip:nth-child(6){--tilt:2deg}

.kitchip--coat {--disc:var(--red-soft);   --fill:var(--red);   --fill-2:var(--rose-deep);   --lite:var(--red-soft);   --act:kit-bounce}
.kitchip--boots{--disc:var(--teal-soft);  --fill:var(--teal);  --fill-2:var(--teal-deep);   --lite:var(--teal-soft);  --act:kit-stomp}
.kitchip--pants{--disc:#E6E0D8;           --fill:#3A3733;      --fill-2:#8A8378;            --lite:var(--yellow);     --act:kit-wiggle}
.kitchip--hat  {--disc:var(--yellow-soft);--fill:var(--yellow);--fill-2:var(--yellow-deep); --lite:var(--yellow-soft);--act:kit-tip}
.kitchip--mitt {--disc:var(--green-soft); --fill:var(--green); --fill-2:var(--green-deep);  --lite:var(--green-soft); --act:kit-wave}
.kitchip--socks{--disc:var(--sky);        --fill:var(--royal); --fill-2:var(--teal-deep);   --lite:var(--sky);        --act:kit-hop}

.kitchip__disc{
  position:relative;flex:none;width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--disc);display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), var(--sh-1);
  transform:rotate(var(--tilt));
  transition:transform .28s var(--bounce),box-shadow .25s var(--ease);
}
.kitchip:hover .kitchip__disc,.kitchip.is-live .kitchip__disc{
  transform:rotate(0) translateY(-3px) scale(1.06);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), var(--sh-2);
}
.kitchip__icon{
  width:1.85rem;height:1.85rem;overflow:visible;color:var(--ink);
  transform-origin:50% 100%;
}
.kitchip__icon .k-fill{fill:var(--fill)}
.kitchip__icon .k-lite{fill:var(--lite);stroke:currentColor}
.kitchip__icon .k-lite--line{fill:none;stroke:var(--lite);stroke-width:1.2}
.kitchip__icon .k-dark{stroke:var(--fill-2);stroke-width:1}
.kitchip--boots .k-lite{fill:none;stroke:var(--lite);stroke-width:1.2}
.kitchip--pants .k-strap{stroke:var(--lite);stroke-width:2.2}
.kitchip--hat .k-pom{transform-box:fill-box;transform-origin:50% 100%}

/* the tick, stamped on the disc's corner */
.kitchip__tick{
  position:absolute;right:-.1rem;bottom:-.1rem;
  width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 2px #fff;
  display:grid;place-items:center;
}
.kitchip__tick::after{
  content:'';width:.27rem;height:.52rem;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg);
}

/* Scroll-in: each item fades up while its disc slaps on, one after another,
   then each tick stamps. Everything fills backwards only, so once it has
   played the ordinary rules own opacity and transform again and the hover
   lift still works. Without JS the .js gate never matches and the six
   stickers are simply there. */
.js .kitstrip:not(.is-in) .kitchip{opacity:0}
.js .kitstrip:not(.is-in) .kitchip__tick{opacity:0}
.js .kitstrip.is-in .kitchip{animation:kit-in .5s var(--ease) backwards}
.js .kitstrip.is-in .kitchip__disc{animation:kit-pop .62s var(--bounce) backwards}
.js .kitstrip.is-in .kitchip__tick{animation:kit-stamp .42s var(--bounce) backwards}
.js .kitstrip.is-in .kitchip:nth-child(1),.js .kitstrip.is-in .kitchip:nth-child(1) .kitchip__disc{animation-delay:.18s}
.js .kitstrip.is-in .kitchip:nth-child(2),.js .kitstrip.is-in .kitchip:nth-child(2) .kitchip__disc{animation-delay:.28s}
.js .kitstrip.is-in .kitchip:nth-child(3),.js .kitstrip.is-in .kitchip:nth-child(3) .kitchip__disc{animation-delay:.38s}
.js .kitstrip.is-in .kitchip:nth-child(4),.js .kitstrip.is-in .kitchip:nth-child(4) .kitchip__disc{animation-delay:.48s}
.js .kitstrip.is-in .kitchip:nth-child(5),.js .kitstrip.is-in .kitchip:nth-child(5) .kitchip__disc{animation-delay:.58s}
.js .kitstrip.is-in .kitchip:nth-child(6),.js .kitstrip.is-in .kitchip:nth-child(6) .kitchip__disc{animation-delay:.68s}
.js .kitstrip.is-in .kitchip:nth-child(1) .kitchip__tick{animation-delay:.62s}
.js .kitstrip.is-in .kitchip:nth-child(2) .kitchip__tick{animation-delay:.72s}
.js .kitstrip.is-in .kitchip:nth-child(3) .kitchip__tick{animation-delay:.82s}
.js .kitstrip.is-in .kitchip:nth-child(4) .kitchip__tick{animation-delay:.92s}
.js .kitstrip.is-in .kitchip:nth-child(5) .kitchip__tick{animation-delay:1.02s}
.js .kitstrip.is-in .kitchip:nth-child(6) .kitchip__tick{animation-delay:1.12s}
@keyframes kit-in{
  0%  {opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:none}
}
@keyframes kit-pop{
  0%  {transform:rotate(calc(var(--tilt) - 16deg)) scale(.4)}
  100%{transform:rotate(var(--tilt)) scale(1)}
}
@keyframes kit-stamp{
  0%  {opacity:0;transform:scale(1.9)}
  50% {opacity:1}
  100%{opacity:1;transform:scale(1)}
}

/* Each item's own action: on hover where hover exists, on tap (koda.js adds
   .is-live for one play), and one at a time as a roll call while the slip is
   on screen. One play per trigger, never a loop. */
@media (hover:hover){
  .kitchip:hover .kitchip__icon{animation:var(--act) .9s var(--ease) 1}
  .kitchip--hat:hover .k-pom{animation:kit-pom .9s var(--ease) 1}
}
.kitchip.is-live .kitchip__icon{animation:var(--act) .9s var(--ease) 1}
.kitchip--hat.is-live .k-pom{animation:kit-pom .9s var(--ease) 1}
.kitchip--pants .kitchip__icon{transform-origin:50% 22%}
.kitchip--hat .kitchip__icon{transform-origin:28% 100%}
.kitchip--mitt .kitchip__icon{transform-origin:50% 96%}

/* coat: a puffed-up bounce */
@keyframes kit-bounce{
  0%,100%{transform:none}
  30%{transform:translateY(-4px) scale(1.08,.94)}
  55%{transform:translateY(0) scale(.95,1.06)}
  78%{transform:translateY(-2px)}
}
/* boots: two stomps */
@keyframes kit-stomp{
  0%,100%{transform:none}
  18%{transform:translateY(-4px) rotate(-9deg)}
  36%{transform:translateY(0) scaleY(.86)}
  58%{transform:translateY(-3px) rotate(7deg)}
  78%{transform:translateY(0) scaleY(.9)}
}
/* snow pants: a wiggle from the waistband */
@keyframes kit-wiggle{
  0%,100%{transform:none}
  20%{transform:rotate(-8deg)}
  40%{transform:rotate(7deg)}
  60%{transform:rotate(-5deg)}
  80%{transform:rotate(3deg)}
}
/* hat: tips to one side and settles back */
@keyframes kit-tip{
  0%,100%{transform:none}
  32%{transform:rotate(-17deg) translateY(-2px)}
  62%{transform:rotate(-13deg) translateY(-2px)}
}
@keyframes kit-pom{
  0%,100%{transform:none}
  32%{transform:translateY(-1.4px) scale(1.2)}
  62%{transform:translateY(-.8px) scale(1.1)}
}
/* mittens: a wave */
@keyframes kit-wave{
  0%,100%{transform:none}
  20%{transform:rotate(19deg)}
  42%{transform:rotate(-13deg)}
  64%{transform:rotate(14deg)}
  84%{transform:rotate(-5deg)}
}
/* socks: a hop */
@keyframes kit-hop{
  0%,100%{transform:none}
  26%{transform:translateY(-5px) rotate(-9deg)}
  50%{transform:translateY(0) scale(1.08,.9)}
  72%{transform:translateY(-3px) rotate(6deg)}
}

@media (max-width:860px){
  .kitstrip{grid-template-columns:1fr;gap:1.1rem}
  .kitstrip__head{
    padding:0 0 1rem;border-right:0;
    border-bottom:2px dashed #DBD5CC;text-align:center;
  }
}
/* On a phone the stickers size to their labels and wrap as a cluster, two
   or three to a line, instead of a grid that folds "Black snow pants" onto
   three lines or stacks six rows down the screen. */
@media (max-width:560px){
  .kitstrip__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .9rem}
  .kitchip{font-size:.95rem;gap:.55rem}
  .kitchip__disc{width:2.6rem;height:2.6rem}
  .kitchip__icon{width:1.65rem;height:1.65rem}
}
@media (max-width:380px){
  .kitstrip__list{gap:.5rem .7rem}
  .kitchip{font-size:.9rem;gap:.45rem}
}

/* counters - the "by the numbers" plaque
   ------------------------------------------------------------------
   This used to be four identical white cards sitting on a white band, and it
   read as four things that had failed to load. The fix is not a better card;
   it is to stop using cards. One deep teal panel makes the numbers a single
   object, the hairlines between them do the work the borders used to do, and
   the dark ground gives the page a contrast beat right after the yellow
   promise band. */
.ledger{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,3.4vw,2.75rem) clamp(1rem,3vw,2.5rem) clamp(2rem,3.8vw,3rem);
  background:
    radial-gradient(120% 150% at 8% -10%, #0A6288 0%, transparent 62%),
    radial-gradient(90% 120% at 100% 110%, #003A57 0%, transparent 60%),
    linear-gradient(158deg, var(--teal) 0%, var(--teal-deep) 100%);
  box-shadow:var(--sh-4), inset 0 1px 0 rgba(255,255,255,.18);
}
/* A warm bar across the top edge, so the plaque is stitched to the yellow band
   it sits under rather than dropped on the page from somewhere else. */
.ledger::before{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--yellow),var(--red) 38%,var(--green) 68%,var(--yellow));
}
/* Same dot field as the promise band, at a whisper, so the dark panel has a
   surface instead of being a flat fill. */
.ledger__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:radial-gradient(#fff 1.4px,transparent 1.6px);
  background-size:26px 26px;
}
.ledger__title{
  position:relative;z-index:2;text-align:center;color:#fff;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem);
  margin:0 0 clamp(1.25rem,2.6vw,2rem);
  letter-spacing:.01em;
}

.ledger__row{
  position:relative;z-index:2;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.ledger__cell{position:relative;text-align:center;padding:.35rem clamp(.4rem,1.4vw,1.1rem)}
/* Hairline rules, faded at both ends so they read as light rather than as a
   table border. */
.ledger__cell + .ledger__cell::before{
  content:'';position:absolute;left:0;top:6%;bottom:6%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.30) 22%,rgba(255,255,255,.30) 78%,transparent);
}
.ledger__cell b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,1.6rem + 3.2vw,4.25rem);line-height:.95;
  color:var(--yellow);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 rgba(0,26,40,.35);
}
/* Direct child only. The counter lives in a <span> inside the <b>, so a bare
   descendant selector here would shrink the numeral to label size. */
.ledger__cell > span{
  display:block;margin-top:.6rem;max-width:18ch;margin-inline:auto;
  font-size:.95rem;font-weight:700;line-height:1.35;color:rgba(255,255,255,.88);
}

@media (max-width:860px){
  .ledger__row{grid-template-columns:repeat(2,1fr);row-gap:1.6rem}
  .ledger__cell:nth-child(odd)::before{display:none}
  .ledger__cell:nth-child(n+3)::after{
    content:'';position:absolute;left:10%;right:10%;top:-.8rem;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  }
}
@media (max-width:430px){
  .ledger__row{grid-template-columns:1fr;row-gap:1.5rem}
  .ledger__cell::before{display:none}
  .ledger__cell:nth-child(n+2)::after{
    content:'';position:absolute;left:14%;right:14%;top:-.75rem;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  }
  .ledger__cell > span{max-width:24ch}
}

/* ---------- 10. Forms ---------- */
.contact-email{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);
  color:var(--teal);text-decoration:none;word-break:break-word;
  border-bottom:2px solid var(--yellow);
}
.contact-email:hover{color:var(--red-text);border-bottom-color:var(--red-text)}

.note{
  border:2px dashed #DED9D1;border-radius:var(--r);padding:1rem 1.15rem;
  background:linear-gradient(180deg,var(--cream),#F1EDE8);
  font-size:.94rem;line-height:1.6;color:var(--ink);
  box-shadow:var(--sh-1);
}
.note strong{font-weight:800}

/* ---------- 11. Footer (light, warm) ---------- */
.site-foot{background:var(--cream);border-top:var(--line-2);padding:clamp(2.5rem,5vw,4rem) 0 0;position:relative}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:2rem}
@media (max-width:980px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot__grid{grid-template-columns:1fr}}
.foot__title{font-family:var(--display);font-weight:800;font-size:1.02rem;margin:0 0 .8rem;color:var(--teal)}
.foot__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.98rem}
.foot__list a{color:var(--ink);text-decoration:none;transition:color .18s,padding-left .18s}
.foot__list a:hover{color:var(--red-text);padding-left:.25rem}
.foot__brand img{height:84px;width:auto;margin-bottom:.9rem}
.foot__addr{font-size:.98rem;line-height:1.7;color:var(--ink-soft);margin:0 0 .9rem}
.foot__addr strong{color:var(--ink)}
.foot__bottom{
  margin-top:2.5rem;background:linear-gradient(180deg,#0A5C82,var(--teal-deep));color:#fff;
  padding:1rem 0;font-size:.88rem;
}
.foot__bottom .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center}
.foot__bottom a{color:#CFE6F0}
.foot__bottom a:hover{color:#fff}

/* ---------- 12. Motion ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* children of a revealing group stagger themselves, so a grid does not need
   a hand-written delay class on every cell */
.js .reveal-group > *{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js .reveal-group.is-in > *{opacity:1;transform:none}
.js .reveal-group.is-in > *:nth-child(1){transition-delay:0s}
.js .reveal-group.is-in > *:nth-child(2){transition-delay:.07s}
.js .reveal-group.is-in > *:nth-child(3){transition-delay:.14s}
.js .reveal-group.is-in > *:nth-child(4){transition-delay:.21s}
.js .reveal-group.is-in > *:nth-child(5){transition-delay:.28s}
.js .reveal-group.is-in > *:nth-child(6){transition-delay:.35s}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .reveal,.js .reveal-group > *{opacity:1;transform:none}
  .js .kitstrip .kitchip,.js .kitstrip .kitchip__disc,.js .kitstrip .kitchip__tick{animation:none;opacity:1}
  .kitchip__icon,.kitchip .k-pom{animation:none !important}
  .js .hero__seal{opacity:1;transform:rotate(-9deg)}
  .js .uline{background-size:100% 100%}
  .hero__snow{display:none}
}

@media print{
  .site-head,.site-foot,.tiles,.hero__snow,.drawer,.drawer__veil,body::after{display:none}
  body{background:#fff}
}