/* =========================================================
   Little Lions Club — Design E "Golden Hour"
   Generated from the design source by sync.py. Edit there, then re-sync.
   ========================================================= */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/fredoka.woff2) format('woff2')}
@font-face{font-family:'ABeeZee';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/abeezee.woff2) format('woff2')}
@font-face{font-family:'ABeeZee';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/abeezee-italic.woff2) format('woff2')}
@font-face{font-family:'Shadows Into Light Two';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/shadows-into-light-two.woff2) format('woff2')}

:root{
  color-scheme:light;
  --sun:#FBE115;
  --honey:#F6DE82;
  --shell:#FFF6DC;
  --cream:#FFFBEF;
  --pitch:#43AB1A;
  --pitch-deep:#2A7A0C;
  --leaf:#E4F1D8;
  /* Address chip. Contrast-checked: #2A5D86 on #DEEAF6 is 5.72:1, comfortably
     over the 4.5:1 AA threshold for body text. */
  --sky:#DEEAF6;
  --sky-deep:#2A5D86;
  --ink:#26261F;
  --ink-2:#57574A;
  --ink-3:#6E6E5F;
  --white:#FFFFFF;
  --sh:0 8px 28px -10px rgba(95,80,15,.2);
  --sh-lg:0 22px 56px -20px rgba(95,80,15,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{margin:0;padding:0;font-family:'ABeeZee',-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--cream);color:var(--ink);font-size:16.5px;line-height:1.78;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
/* Intrinsic width/height attributes must never override a one-axis CSS size. */
.hd img,.ft img,.sheet img,.school-logo img{width:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--pitch);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-color:var(--ink)}






.site{background:var(--cream);overflow:clip}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4.5vw,50px)}

h1,h2,h3,h4{font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
.h-hero{font-size:clamp(42px,6vw,78px);line-height:1.02}
.h-sec{font-size:clamp(30px,3.9vw,48px)}
.h-card{font-size:23px;font-weight:500}
.ll p{margin:0}
.hand{font-family:'Shadows Into Light Two',cursive;color:var(--pitch-deep);font-size:clamp(20px,2.2vw,25px);line-height:1.4}
.lede{font-size:clamp(17px,1.7vw,19.5px);color:var(--ink-2);max-width:34em}

.btn{
  font-family:'Fredoka',sans-serif;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:17.5px;line-height:1;cursor:pointer;text-decoration:none;
  background:var(--pitch-deep);color:#fff;border:none;border-radius:999px;padding:18px 34px;
  box-shadow:var(--sh);transition:transform .16s ease,box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.btn.sun{background:var(--sun);color:var(--ink)}
.btn.soft{background:var(--white);color:var(--ink)}
.btn.big{font-size:19px;padding:20px 40px}

/* ---- STRONG header (D placement, B/C style) ---- */
.hd{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:3px solid var(--ink)}
.hd::before{content:"";display:block;height:5px;background:var(--sun)}
.hd .in{max-width:1180px;margin:0 auto;padding:14px clamp(20px,4.5vw,50px);display:flex;align-items:center;gap:30px}
.hd .logo-link{display:block}
.hd img{height:54px;width:auto}
.hd nav{display:flex;flex:1;justify-content:center;gap:clamp(14px,2vw,30px);align-items:center;flex-wrap:nowrap}
.hd nav a{white-space:nowrap;font-family:'Fredoka',sans-serif;font-weight:500;font-size:16px;color:var(--ink);text-decoration:none;position:relative;padding:8px 0}
.hd nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:4px;border-radius:99px;background:var(--sun);transition:right .18s ease}
.hd nav a:hover::after,.hd nav a.on::after{right:0}
.hd .btn{padding:14px 26px;font-size:16px}

.grp{position:relative}
.grp>a svg{transition:transform .15s ease}
.grp:hover>a svg,.grp:focus-within>a svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:240px;background:var(--white);border-radius:22px;box-shadow:var(--sh-lg);padding:10px;display:none;flex-direction:column;z-index:70}
.drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:11px}
.grp:hover .drop,.grp:focus-within .drop{display:flex}
.drop a{font-family:'ABeeZee',sans-serif;font-size:14.5px;text-decoration:none;border-radius:12px;padding:11px 14px;color:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:14px}
.drop a::after{display:none}
.drop a:hover{background:var(--shell);color:var(--ink)}
.menu-btn{display:none;margin-left:auto;background:var(--white);border:2px solid var(--ink);border-radius:14px;width:46px;height:46px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.sheet{display:none;position:fixed;inset:0;z-index:95;background:var(--cream);padding:22px;flex-direction:column}
.sheet.open{display:flex}
.sheet .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sheet .top img{height:46px;width:auto}
.sheet .body{overflow-y:auto;flex:1;display:flex;flex-direction:column}
.sheet .body a{font-family:'Fredoka',sans-serif;font-weight:500;text-decoration:none;font-size:20px;color:var(--ink);padding:13px 6px;border-bottom:1px solid rgba(38,38,31,.1)}
.sheet .grp-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:18px 6px 6px}
.sheet .body a.sub{font-family:'ABeeZee',sans-serif;font-size:16.5px;padding:11px 6px 11px 14px}
.sheet .btn{margin-top:20px}



/* ---- hero: full-bleed photo, warm overlay ---- */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:brightness(1.02) saturate(1.06)}
.hero .bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(30,30,24,.72) 0%,rgba(30,30,24,.52) 30%,rgba(30,30,24,.12) 62%,rgba(30,30,24,0) 82%),
    linear-gradient(0deg,rgba(30,30,24,.55) 0%,rgba(30,30,24,.18) 30%,rgba(30,30,24,0) 55%),
    radial-gradient(120% 80% at 90% 6%,rgba(255,246,190,.16),transparent 60%);
}
.hero .in{position:relative;width:100%;padding:clamp(140px,20vw,240px) 0 clamp(48px,6vw,76px);display:flex;justify-content:flex-start}
.hero-copy{max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;color:#fff}
.hero .hand{color:var(--sun);transform:rotate(-1.2deg)}
.hero .h-hero{color:#fff;text-shadow:0 2px 22px rgba(20,20,15,.45)}
.hero p.sub{font-size:clamp(17px,1.8vw,20px);color:rgba(255,255,255,.95);max-width:32em;text-shadow:0 1px 16px rgba(20,20,15,.5)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.hero .facts{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(20,20,15,.5)}
.hero .facts span{display:inline-flex;gap:9px;align-items:center}
.hero .facts svg{color:var(--sun)}
.hero .wavebottom{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:64px;z-index:3;display:block}

/* ---- inner page hero band ---- */
.pagehero{position:relative;background:linear-gradient(175deg,var(--sun) 0%,var(--honey) 100%);border-bottom:3px solid var(--ink);overflow:hidden}
.pagehero .ball{position:absolute;border-radius:50%;background:rgba(255,255,255,.4)}
.pagehero .b1{width:260px;height:260px;top:-110px;left:-70px}
.pagehero .b2{width:180px;height:180px;bottom:-80px;right:5%;background:rgba(67,171,26,.12)}
.pagehero .in{position:relative;padding:clamp(44px,6vw,76px) 0 clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pagehero .hand{transform:rotate(-1deg)}
.pagehero h1{font-size:clamp(36px,5vw,62px)}
.pagehero p.sub{color:var(--ink);opacity:.78;max-width:38em;font-size:clamp(16.5px,1.7vw,19px)}

/* ---- welcome (human) ---- */
.welcome{background:var(--cream)}
.welcome .in{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,54px);align-items:center;
  padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px);
}
.welcome .pic{position:relative;width:clamp(180px,22vw,250px)}
.welcome .pic img{
  width:100%;aspect-ratio:1;object-fit:cover;object-position:center 30%;
  border-radius:50%;border:7px solid var(--white);box-shadow:var(--sh-lg);transform:rotate(-2deg);
}
.welcome .pic .tape{
  position:absolute;bottom:-10px;left:50%;transform:translateX(-50%) rotate(2deg);
  background:var(--sun);border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:500;
  font-size:14px;padding:8px 18px;white-space:nowrap;box-shadow:var(--sh);
}
.welcome .txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.welcome .txt p{color:var(--ink-2);max-width:56ch}
.welcome .sig{font-family:'Shadows Into Light Two',cursive;font-size:24px;color:var(--ink);transform:rotate(-1deg)}

/* ---- programs: alternating feature rows ---- */
.feature{padding:clamp(34px,4.5vw,60px) 0}
.feature .in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,72px);align-items:center}
.feature.flip .in>.ph{order:2}
.feature .ph{position:relative}
.feature .ph img{
  width:100%;aspect-ratio:16/11;object-fit:cover;
  border-radius:180px 180px 30px 30px;
  border:7px solid var(--white);box-shadow:var(--sh-lg);
}
.feature .ph .age{
  position:absolute;top:16px;right:-8px;transform:rotate(3deg);
  background:var(--sun);border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:500;
  font-size:14.5px;padding:9px 18px;box-shadow:var(--sh);white-space:nowrap;
}
.feature .cp{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.feature .cp p{color:var(--ink-2);max-width:50ch}
.feature .cp .hand{margin-bottom:-6px}
.golink{font-family:'Fredoka',sans-serif;font-weight:500;font-size:17px;color:var(--pitch-deep);text-decoration:none;display:inline-flex;gap:9px;align-items:center;border-bottom:3px solid var(--sun);padding-bottom:3px}
.golink:hover{border-bottom-color:var(--pitch)}

/* ---- warm stats sentence ---- */
.numbers{background:var(--shell);border-block:3px solid var(--ink)}
.numbers .in{padding:clamp(44px,6vw,70px) 0;text-align:center}
.numbers p{
  font-family:'Fredoka',sans-serif;font-weight:500;
  font-size:clamp(22px,3vw,34px);line-height:1.5;max-width:26em;margin:0 auto;
}
.numbers b{
  font-weight:600;color:var(--pitch-deep);
  background:linear-gradient(transparent 62%,var(--sun) 62% 92%,transparent 92%);
  padding:0 4px;
}

/* ---- big quote / testimonials ---- */
.bigquote{background:var(--cream)}
.bigquote .ph{position:relative;max-width:420px;justify-self:center}
.bigquote .ph img{width:100%;aspect-ratio:4/4.4;object-fit:cover;border-radius:200px 200px 32px 32px;border:7px solid var(--white);box-shadow:var(--sh-lg);transform:rotate(1.2deg)}

.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,30px);margin-top:clamp(36px,4vw,52px)}
.tcard{background:var(--white);border-radius:28px;box-shadow:var(--sh);padding:30px 32px;display:flex;flex-direction:column;gap:14px;margin:0}
.tcard:first-child{transform:rotate(-.5deg)}
.tcard:nth-child(2){transform:rotate(.4deg)}
.tcard:last-child{transform:rotate(-.3deg)}
.tcard blockquote{margin:0;font-style:italic;color:var(--ink-2);font-size:15.5px;line-height:1.75;flex:1}
.tcard cite{font-family:'Fredoka',sans-serif;font-weight:500;font-size:15.5px}
.tcard cite span{display:block;font-family:'ABeeZee',sans-serif;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.tcard .hearts{color:var(--pitch);display:flex;gap:4px}

/* ---- video ---- */
.vsec{background:var(--leaf);border-block:3px solid var(--ink)}
.vsec .in{padding:clamp(48px,6vw,80px) 0;text-align:center}
.vwrap{position:relative;border-radius:42px;overflow:hidden;border:7px solid var(--white);box-shadow:var(--sh-lg);max-width:900px;margin:38px auto 0;transform:rotate(-.4deg)}
.vwrap img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vwrap .play{position:absolute;inset:0;margin:auto;width:86px;height:86px;background:var(--sun);border-radius:50%;display:grid;place-items:center;box-shadow:var(--sh)}
.vwrap .play svg{color:var(--ink);margin-left:6px}
.vwrap .vnote{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(38,38,31,.72);color:#fff;font-size:12.5px;border-radius:999px;padding:6px 16px;white-space:nowrap}

/* ---- schools invite ---- */
.invite{background:var(--cream)}
.invite .in{padding:clamp(52px,7vw,90px) 0;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.invite .cp{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.invite .cp p{color:var(--ink-2);max-width:50ch}
.gift{font-family:'Fredoka',sans-serif;font-weight:500;background:var(--white);border-radius:20px;padding:15px 22px;color:var(--pitch-deep);box-shadow:var(--sh);font-size:16px;transform:rotate(-.6deg)}
.invite .ph img{aspect-ratio:16/11;border-radius:34px;border:7px solid var(--white);box-shadow:var(--sh-lg);transform:rotate(.8deg)}

/* ---- cta ---- */
.sunset{position:relative;background:linear-gradient(175deg,var(--sun) 0%,var(--honey) 100%);border-top:3px solid var(--ink);text-align:center;overflow:hidden}
.sunset .ball{position:absolute;border-radius:50%;background:rgba(255,255,255,.4)}
.sunset .b1{width:300px;height:300px;top:-120px;left:-80px}
.sunset .b2{width:220px;height:220px;bottom:-90px;right:6%;background:rgba(67,171,26,.13)}
.sunset .in{position:relative;padding:clamp(60px,8vw,100px) 0}
.sunset .hand{transform:rotate(-1deg);color:var(--pitch-deep)}
.sunset p.subp{max-width:32em;margin:16px auto 32px;color:var(--ink);opacity:.78}

/* ---- schools directory ---- */
.dir{padding:clamp(44px,6vw,72px) 0}
.dir .find{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(30px,4vw,44px)}
.dir .find input{
  flex:1;min-width:240px;font-family:'ABeeZee',sans-serif;font-size:16.5px;color:var(--ink);
  background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:15px 24px;box-shadow:var(--sh);
}
.dir .find input::placeholder{color:var(--ink-3)}
.dir .count{font-family:'Fredoka',sans-serif;font-weight:500;font-size:15px;color:var(--ink-2);background:var(--shell);border-radius:999px;padding:11px 20px}
.region{margin-bottom:clamp(30px,4vw,44px)}

/* Per-region accent (owner, 2026-08-02). The colour marks which of the eight
   regions you are in, which is the page's real navigation — so it reinforces
   structure rather than decorating for its own sake. Alternating per CARD was
   considered and rejected: it would carry no meaning across 41 cards.
   Cycling by nth-of-type means a ninth region picks up the next colour on its
   own — nothing to configure and nothing to maintain.
   Initials sit on --accent-soft in --pitch-deep; contrast-checked at 5.01, 4.60,
   4.43 and 4.48:1, all clear of the 3:1 needed for 58px text. */
.region{--accent:var(--sun);--accent-soft:var(--shell)}
.region:nth-of-type(4n+1){--accent:#FBE115;--accent-soft:#FFF6DC}
.region:nth-of-type(4n+2){--accent:#43AB1A;--accent-soft:#E4F1D8}
.region:nth-of-type(4n+3){--accent:#4A87BE;--accent-soft:#DEEAF6}
.region:nth-of-type(4n+4){--accent:#E08A2E;--accent-soft:#FBE7CE}
.region .school-card{border-top:5px solid var(--accent)}
.region .school-logo{background:var(--accent-soft)}
.region h2 .rc{background:var(--accent-soft)}
.region h2{font-size:clamp(22px,2.4vw,29px);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.region h2 .rc{font-family:'ABeeZee',sans-serif;font-size:13px;font-weight:400;color:var(--ink-2);background:var(--white);border-radius:999px;box-shadow:var(--sh);padding:6px 14px}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:stretch}
/* Two columns, not three or four. The card keeps its original horizontal shape
   — badge on the left, name on the right — and a 200px logo needs a 224px badge
   beside readable text, which does not fit in a third of 1080px. */
.school{position:relative}
/* The visual card. The toggle used to be a <button> wrapping all of this, which
   made a real website link impossible — an <a> inside a <button> is invalid and
   breaks keyboard handling on both. The button is now a transparent overlay
   stretched across the card (.school-head below), so the link can sit above it. */
.school-card{
  position:relative;width:100%;height:100%;text-align:left;font-size:15px;color:inherit;
  background:var(--white);border-radius:24px;box-shadow:var(--sh);padding:20px 24px;
  display:flex;gap:22px;align-items:center;
  transition:transform .14s ease,box-shadow .14s ease;
}
.school:hover .school-card,.school:focus-within .school-card{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.school-head{
  position:absolute;inset:0;width:100%;height:100%;
  background:none;border:none;padding:0 24px 0 0;margin:0;cursor:pointer;font:inherit;color:inherit;
  display:flex;align-items:center;justify-content:flex-end;border-radius:24px;
}
.school-head:focus-visible{outline:3px solid var(--pitch);outline-offset:-3px}
.school-logo{
  flex:none;width:224px;height:224px;border-radius:50%;background:var(--leaf);
  display:grid;place-items:center;overflow:hidden;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:58px;color:var(--pitch-deep);letter-spacing:.02em;
}
.school-logo img{width:100%;height:100%;object-fit:contain;background:var(--white)}
/* 224px, not 200px. The requirement is a 200px logo, and `contain` fits inside
   the CONTENT box — 224 less 12px padding on each side leaves exactly 200, so
   the squarest real logo (Kindercare 573x564) paints 200x200 and the widest
   (Everbrook 304x91) paints 200x60. At a 200px badge the squarest one painted
   171x168, under the bar.
   A logo gets a rounded square rather than the circle, because a 50% radius
   clips the corners off wide marks. The initials badge keeps its circle. */
.school-logo:has(img){border-radius:22px;background:var(--white);padding:12px}

/* Phones only. A 224px badge plus 48px of card padding, a 20px gap and readable
   text needs about 432px of content width; a 390px phone gives 350, so the
   horizontal card overflowed by 58px and would have scrolled sideways. Below
   520px the badge moves on top at full width and keeps its 224px height, so the
   logo still paints at 200px. Grid areas keep the name and chevron on one row
   without touching the markup the renderer emits. */
@media (max-width:520px){
  .school-card{display:block;padding:16px}
  .school-logo{width:100%;border-radius:22px;margin-bottom:14px}
  /* display:block matters. .school-id is a <span>, blockified on desktop only
     because it is a flex item. Once .school-card becomes display:block it falls
     back to inline, and the full-width address bubble then sizes against the
     card rather than its own column — overflowing it by the 26px chevron
     gutter. */
  .school-id{display:block;padding-right:26px}
}
.school-id{flex:1;min-width:0;position:relative;padding-right:26px}
.school-id b{font-family:'Fredoka',sans-serif;font-weight:500;font-size:22px;display:block;line-height:1.25}
/* Address and website ride as chips under the name, and two lines of the blurb
   preview the card before it is opened — the badge grew to 224px and left the
   old single-line name looking marooned. Same pill language as the region count
   and the perks list. */
.school-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.school-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--shell);border-radius:999px;padding:6px 13px;
  font-size:12.5px;line-height:1.4;color:var(--ink-2);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
/* The one interactive thing on the face of the card, so it sits above the
   overlay button and keeps its own hover. */
.school-chip.school-web{
  background:var(--leaf);color:var(--pitch-deep);text-decoration:none;
  position:relative;z-index:2;transition:background .14s ease;
}
.school-chip.school-web:hover{background:var(--pitch);color:#fff}
.school-chip.school-web svg{flex:none}
/* Street address gets its own full-width bubble under the town and website. */
.school-chip.school-addr{
  display:flex;width:100%;margin-top:8px;
  background:var(--sky);color:var(--sky-deep);
  white-space:normal;justify-content:flex-start;align-items:flex-start;
}
.school-chip svg{flex:none;opacity:.75;margin-top:1px}
.school-prev{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:11px;font-size:14.5px;line-height:1.62;color:var(--ink-2);
}
.school-chev{flex:none;color:var(--ink-3);transition:transform .18s ease}
.school.open .school-chev{transform:rotate(180deg)}

.school-blurb{
  background:var(--white);border-radius:18px;box-shadow:var(--sh-lg);
  padding:16px 20px;font-size:14px;line-height:1.65;color:var(--ink-2);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  border-top:4px solid var(--sun);
}
.school-blurb p{margin:0}
.school-link{
  font-family:'Fredoka',sans-serif;font-weight:500;font-size:14px;color:var(--pitch-deep);
  text-decoration:none;display:inline-flex;gap:7px;align-items:center;border-bottom:2px solid var(--sun);padding-bottom:2px;
}
.school-link:hover{border-bottom-color:var(--pitch)}
.school-nolink{font-size:13px;color:var(--ink-3)}

/* touch / narrow: inline accordion */
.school-blurb{display:none}
.school.open .school-blurb{display:flex;margin-top:8px}

/* pointer devices: floating panel on hover, no reflow */
@media (hover:hover) and (pointer:fine){
  .school-blurb{
    display:flex;position:absolute;top:calc(100% - 6px);left:0;right:0;z-index:20;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .school:hover .school-blurb,.school:focus-within .school-blurb,.school.open .school-blurb{
    opacity:1;visibility:visible;transform:none;margin-top:0;
  }
  .school:hover,.school:focus-within{z-index:30}
}
.dir .nores{display:none;text-align:center;color:var(--ink-2);background:var(--shell);border-radius:22px;padding:34px;font-size:16px}
.dir .hint{font-size:13.5px;color:var(--ink-3);margin-bottom:clamp(22px,3vw,32px)}
.show-touch{display:inline}
.hide-touch{display:none}
@media (hover:hover) and (pointer:fine){.show-touch{display:none}.hide-touch{display:inline}}

/* ---- registration steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px);margin-top:clamp(32px,4vw,46px)}
.step{background:var(--white);border-radius:28px;box-shadow:var(--sh);padding:30px;display:flex;flex-direction:column;gap:12px}
.step:first-child{transform:rotate(-.5deg)}
.step:nth-child(2){transform:rotate(.4deg)}
.step:last-child{transform:rotate(-.3deg)}
.step .num{width:46px;height:46px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px}
.step p{color:var(--ink-2);font-size:15.5px}
.pricebar{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.pricebar span{background:var(--white);border-radius:999px;box-shadow:var(--sh);font-family:'Fredoka',sans-serif;font-weight:500;font-size:15px;padding:12px 22px}

/* ---- generic content section ---- */
.sect{padding:clamp(44px,6vw,72px) 0}
.sect .head{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-bottom:clamp(26px,3.4vw,40px)}
.sect .head.center{align-items:center;text-align:center}
.sect .head p{color:var(--ink-2);max-width:60ch}

/* ---- pillars (mission) ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px)}
.pillar{background:var(--white);border-radius:28px;box-shadow:var(--sh);padding:32px;display:flex;flex-direction:column;gap:12px}
.pillar:first-child{transform:rotate(-.5deg)}
.pillar:nth-child(2){transform:rotate(.4deg)}
.pillar:last-child{transform:rotate(-.4deg)}
.pillar .ic{width:56px;height:56px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;color:var(--pitch-deep)}
.pillar p{color:var(--ink-2);font-size:15.5px}

/* ---- team cards ---- */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,34px)}
.tm{background:var(--white);border-radius:30px;box-shadow:var(--sh);padding:34px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.tm:nth-child(odd){transform:rotate(-.4deg)}
.tm:nth-child(even){transform:rotate(.4deg)}
.tm .avatar{width:132px;height:132px;border-radius:50%;background:linear-gradient(160deg,var(--sun),var(--honey));display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:44px;color:var(--ink);border:5px solid var(--white);box-shadow:var(--sh)}
.tm .role{font-family:'Shadows Into Light Two',cursive;color:var(--pitch-deep);font-size:19px}
.tm p{color:var(--ink-2);font-size:15.5px}
/* Coach photos belong in the Photo box, which sets the featured image and
   fills the circle. An image pasted into the bio instead used to render at
   full card width; keep it tidy rather than letting it wreck the card. */
.tm p img{max-width:180px;height:auto;border-radius:16px;margin:6px 0}

/* ---- FAQ accordion ---- */
.faqs{display:flex;flex-direction:column;gap:14px;max-width:860px}
.faq{background:var(--white);border-radius:22px;box-shadow:var(--sh);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:'Fredoka',sans-serif;font-weight:500;font-size:17.5px;padding:20px 26px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--shell);transition:transform .18s ease,background .18s ease;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:12px 2.2px,2.2px 12px;background-position:center,center;background-repeat:no-repeat}
.faq[open] summary::after{transform:rotate(45deg);background-color:var(--sun)}
.faq>*:not(summary){padding:0 26px;color:var(--ink-2);font-size:15.5px}
.faq>*:not(summary):last-child{padding-bottom:22px}
.faq>h3,.faq>h4{font-family:'Fredoka',sans-serif;font-size:17px;color:var(--ink);margin-top:16px}
.faq>ul{padding-left:46px;margin:6px 0}
.faq>p+p{margin-top:10px}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4.5vw,60px);align-items:start}
.cinfo{display:flex;flex-direction:column;gap:18px}
.crow{background:var(--white);border-radius:20px;box-shadow:var(--sh);padding:20px 24px;display:flex;gap:16px;align-items:center}
.crow .ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;color:var(--pitch-deep)}
.crow b{font-family:'Fredoka',sans-serif;font-weight:500;font-size:15.5px;display:block}
.crow a,.crow span.v{font-size:15px;color:var(--ink-2);text-decoration:none}
.crow a:hover{color:var(--pitch-deep)}
.cform{background:var(--white);border-radius:30px;box-shadow:var(--sh-lg);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;gap:16px;transform:rotate(.3deg)}
.cform label{font-family:'Fredoka',sans-serif;font-weight:500;font-size:15px;display:flex;flex-direction:column;gap:7px}
/* Checkboxes and radios are excluded so the form plugin keeps drawing its own
   — including the checked state, which is a background-image these rules would
   paint over. Measured: without the exclusion .cform input{width:100%} made the
   consent checkbox 840px wide at 1521px. */
.cform input:not([type=checkbox]):not([type=radio]),.cform textarea,.cform select{
  font-family:'ABeeZee',sans-serif;font-size:15.5px;color:var(--ink);
  background:var(--cream);border:2px solid rgba(38,38,31,.16);border-radius:14px;padding:13px 16px;width:100%;
}
.cform input:not([type=checkbox]):not([type=radio]):focus,.cform textarea:focus,.cform select:focus{outline:3px solid var(--sun);outline-offset:0;border-color:var(--ink)}
.cform .note{font-size:12.5px;color:var(--ink-3)}
.cform fieldset{border:none;border-top:2px solid var(--shell);margin:0;padding:22px 0 0;display:flex;flex-direction:column;gap:16px}
.cform legend{font-family:'Fredoka',sans-serif;font-weight:500;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 0 0}
.cform .formhead{display:flex;flex-direction:column;gap:6px}
.cform .formhead p{color:var(--ink-2);font-size:15.5px}
.cform .two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.cform .two-up{grid-template-columns:1fr}}
.cform .paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--shell);border-radius:20px;padding:18px 22px;font-size:15.5px;color:var(--ink-2)}
.cform .paybar b{font-family:'Fredoka',sans-serif;font-size:21px;color:var(--ink)}
.formwrap{max-width:860px;margin:0 auto}

/* ---- desktop alignment ----
   Any block narrower than its container is centred, so its left and right
   gutters match. Left-aligning them left a lopsided gap on wide screens. */
.faqs,.cform,.sponsor,.perks,.pricebar,.steps,.two-up,.faq-group{margin-inline:auto}
.faq-group{max-width:860px}
.faqs{max-width:860px}
.cform{max-width:860px}
.sponsor{max-width:900px}
/* Section eyebrow, heading and lede share one left edge and one measure. */
.head{max-width:none}
.head .lede{max-width:60ch}
.alt{background:var(--shell)}
.ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.hero-ctas .btnp,.ctas .btnp{display:contents}

/* ---- blog archive ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}
.post{background:var(--white);border-radius:26px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.post.feat{grid-column:1/-1;flex-direction:row}
@media (max-width:820px){.post.feat{flex-direction:column}}
.post-thumb{background:linear-gradient(160deg,var(--sun),var(--honey));min-height:170px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.post-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post.feat .post-thumb{flex:0 0 42%;min-height:250px}
.post-thumb span{font-family:'Shadows Into Light Two',cursive;font-size:26px;color:var(--ink);opacity:.55}
.post-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:9px;flex:1}
.post.feat .post-body{justify-content:center;padding:34px}
.post.feat .h-card{font-size:clamp(24px,2.6vw,32px)}
.post-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.post-meta .cat{background:var(--leaf);color:var(--pitch-deep);font-family:'Fredoka',sans-serif;font-size:12px;padding:4px 11px;border-radius:99px}
.post .byline{font-size:14px;color:var(--ink-3)}
.post .golink{margin-top:auto;padding-top:8px}

/* ---- sponsors ---- */
.sponsor{display:flex;gap:30px;align-items:center;background:var(--white);border-radius:30px;box-shadow:var(--sh-lg);padding:clamp(26px,3.4vw,40px);max-width:900px}
@media (max-width:700px){.sponsor{flex-direction:column;align-items:flex-start;gap:20px}}
.sponsor-mark{flex:0 0 120px;height:120px;border-radius:26px;background:linear-gradient(150deg,var(--sun),var(--honey));display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:38px;color:var(--ink);position:relative;overflow:hidden}
.sponsor-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--white);padding:12px}
.sponsor-body{display:flex;flex-direction:column;gap:10px}
.sponsor-body .tier{font-family:'Fredoka',sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pitch-deep)}
.sponsor-body p{color:var(--ink-2)}

/* ---- careers perks ---- */
/* `.perks li` added 2026-08-02 so the Hall of Fame names can be an editable
   core List block instead of a locked HTML block. Purely additive — the
   existing span pills render identically. */
.perks{display:flex;gap:12px;flex-wrap:wrap;list-style:none;padding-left:0;margin-block:0}
.perks span,.perks li{background:var(--white);border-radius:999px;box-shadow:var(--sh);font-size:14px;color:var(--ink-2);padding:10px 18px}

/* ---- contact quick-action buttons ---- */
.cactions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.cactions .btn{font-size:16px;padding:15px 26px}

/* ---- sticky mobile register bar ---- */
.regbar{display:none}

}

/* ---- program hub cards ---- */
.hubcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px)}
.hub{background:var(--white);border-radius:28px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.hub:first-child{transform:rotate(-.4deg)}
.hub:nth-child(2){transform:rotate(.35deg)}
.hub:last-child{transform:rotate(-.3deg)}
.hub img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hub .hb{padding:24px 26px 28px;display:flex;flex-direction:column;gap:11px;align-items:flex-start;flex:1}
.hub .hb p{color:var(--ink-2);font-size:15px;flex:1}
.hub .age-chip{background:var(--sun);border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:500;font-size:13.5px;padding:6px 14px}

/* ---- footer ---- */
.ft{background:#201f18;color:rgba(244,242,230,.75);font-size:14.5px}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding:clamp(48px,6vw,68px) 0 40px}
.ft h4{margin:0 0 16px;font-family:'Fredoka',sans-serif;font-weight:500;font-size:15.5px;color:var(--sun)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft a{color:rgba(244,242,230,.75);text-decoration:none}
.ft a:hover{color:var(--sun)}
.ft .brand img{height:54px;width:auto;filter:invert(1) brightness(1.7)}
.ft .brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ft .legal{border-top:1px solid rgba(244,242,230,.14);padding:20px 0 30px;font-size:12.5px;color:rgba(244,242,230,.62);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

.ll-js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.ll-js .rv.vis{opacity:1;transform:none}
/* Above-the-fold copy is never hidden: it is the LCP element. */
.ll-js .hero .rv,.ll-js .pagehero .rv{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.ll-js .rv{opacity:1;transform:none;transition:none}.btn,.vwrap{transition:none}}

@media (max-width:960px){
  .hd nav,.hd .hd-cta{display:none}
  .menu-btn{display:flex}
  .tcards,.steps,.pillars,.hubcards{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr}
  .hd{top:0}
  .welcome .in,.feature .in,.bigquote .in,.invite .in,.contact-grid,.team,.mission-cols,.careers-cols{grid-template-columns:1fr !important}
  .feature.flip .in>.ph{order:0}
  .welcome .pic{margin:0 auto}
  .welcome .in{text-align:left}
  /* No footer on mobile (owner, 2026-08-02). 960px is where this site becomes
     mobile: the desktop nav hides and the hamburger appears on the same line.
     Loses no internal links -- the footer columns and the mobile sheet render
     from the same menu, so every footer URL is already in the sheet. Only the
     legal line is hidden. To restore, delete this and put back
     `.ft .cols{grid-template-columns:1fr}` to stack the columns. */
  .ft{display:none}
  .bigquote .ph{max-width:340px}
}
@media (max-width:640px){
  .hero-ctas .btn{width:100%}
  
  .sgrid{grid-template-columns:1fr}
}

/* ---- utility classes (replaced inline styles so blocks stay editable) ---- */
.ll .mt-6{margin-top:6px}
.ll .mt-8{margin-top:8px}
.ll .mt-10{margin-top:10px}
.ll .mt-12{margin-top:12px}
.ll .mt-22{margin-top:22px}
.ll .mt-26{margin-top:26px}
.ll .mt-xl{margin-top:clamp(40px,5vw,60px)}
.ll .mt-mid{margin:clamp(28px,3.4vw,40px) 0 16px}
.ll .mb-16{margin-bottom:16px}
.ll .pt-md{padding-top:clamp(34px,4vw,52px)}
.ll .pt-lg{padding-top:clamp(44px,6vw,72px)}
.ll .muted{color:var(--ink-2)}
.ll .muted-15{color:var(--ink-2);font-size:15px}
.ll .muted-50{color:var(--ink-2);max-width:50ch}
.ll .mw-70{max-width:70ch}
.ll .fs-155{font-size:15.5px}
.ll .meta-sm{font-size:13.5px;color:var(--ink-3)}
.ll .fw-green{font-family:'Fredoka',sans-serif;font-weight:500;color:var(--pitch-deep)}
.ll .ff-head{font-family:'Fredoka',sans-serif}
.ll .ta-left{text-align:left}
.ll .band-top{background:var(--shell);border-top:3px solid var(--ink)}
.ll .band-block{background:var(--shell);border-block:3px solid var(--ink)}
.ll .btn.ink{background:var(--ink);color:var(--sun)}
.ll .finenote{margin-top:18px;font-size:14px;color:var(--ink-3);max-width:64ch}

/* Wrappers the block editor introduces must not disturb the layout. */
/* Vertical only. The `margin` shorthand also zeroed margin-inline, which killed
   the `margin:0 auto` centring on every .wrap and every other centred box,
   because those elements are themselves .wp-block-group. */
.ll .wp-block-group{margin-block:0}
/* ...but a section header's bottom margin is deliberate design, not an editor
   artefact, and the rule above was swallowing it. `.sect .head` (0,2,0) and
   `.ll .wp-block-group` (0,2,0) tie on specificity, so the later one won and
   every section header across the site sat flush against the content beneath
   it — measured at a 0px gap on the Birthday FAQ. Restated here at (0,3,0).
   This is the second bug caused by that rule; the first zeroed the centring on
   every .wrap. Anything with a deliberate vertical margin inside .ll needs to
   out-specify it. */
.ll .sect .head{margin-bottom:clamp(26px,3.4vw,40px)}
.ll figure.wp-block-image{display:contents}
.ll .btnp{display:contents}

/* ---- horizontal alignment controls ----
   Applied from the block sidebar's Styles panel. Each class covers the three
   ways something can sit east-west: the text inside it, the items inside it if
   it is a flex row or column, and the box itself inside a wider parent. The
   class is doubled purely to win specificity over the base rules. */
.is-style-ll-left.is-style-ll-left,
.is-style-ll-center.is-style-ll-center,
.is-style-ll-right.is-style-ll-right{max-width:100%}
.is-style-ll-left.is-style-ll-left{text-align:left;align-items:flex-start;justify-content:flex-start;margin-inline:0 auto}
.is-style-ll-center.is-style-ll-center{text-align:center;align-items:center;justify-content:center;margin-inline:auto}
.is-style-ll-right.is-style-ll-right{text-align:right;align-items:flex-end;justify-content:flex-end;margin-inline:auto 0}
.is-style-ll-center.is-style-ll-center > *{margin-inline:auto}
.is-style-ll-right.is-style-ll-right > *{margin-inline:auto 0}
.is-style-ll-left.is-style-ll-left > *{margin-inline:0 auto}
.is-style-ll-center .lede,.is-style-ll-center p,
.is-style-ll-right .lede,.is-style-ll-right p{max-width:none}

/* Arrow drawn in CSS: as an inline SVG it kept every "read more" link locked
   inside a raw HTML block. */
.golink::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.45em;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg) translateY(-.06em);vertical-align:middle}
.golink:hover::after{transform:rotate(45deg) translate(.12em,-.12em)}

/* Two-column text/aside rows, previously inline grid styles. */
.cols-a,.cols-b{display:grid;gap:clamp(30px,4vw,52px);align-items:start}
.cols-a{grid-template-columns:1.05fr .95fr}
.cols-b{grid-template-columns:1.1fr .9fr}
@media (max-width:860px){.cols-a,.cols-b{grid-template-columns:1fr}}
.tag-sm{font-size:14px;color:var(--ink-3);padding:4px 6px}

.tcard cite{font-style:normal;font-family:'Fredoka',sans-serif;font-weight:500;
  color:var(--ink);display:block;margin-top:14px;font-size:15.5px}
.tcard blockquote{margin:0;border:0;padding:0}
.tcard blockquote p{margin:0}

.bq-wrap{padding:clamp(52px,7vw,90px) 0;text-align:center}
.bq-pic{margin:0 auto clamp(44px,6vw,64px)}

/* ---- desktop scaling ----
   Everything below 1280px is byte-identical to the signed-off design: phones
   and tablets are deliberately untouched. Above it the page was only using 61%
   of a 1920px screen and 46% of a 2560px one, so the container, the type and
   the founders portrait all grow together. */
@media (min-width:1280px){
  .wrap{max-width:clamp(1180px,88vw,1480px);padding:0 clamp(50px,4.5vw,56px)}
  body{font-size:17.5px}
  .welcome .pic{width:clamp(250px,20vw,330px)}
  .faqs,.cform,.faq-group,.formwrap{max-width:min(100%,960px)}
  .sponsor{max-width:min(100%,1000px)}
}
/* 4-column rule removed 2026-08-02: it dropped each card below the width a
   200px logo panel needs. Three columns is the cap at every width above 960px. */
@media (min-width:1600px){body{font-size:18.5px}}
@media (min-width:2000px){body{font-size:19.5px}}

/* ---- mobile hero framing (phones only) ----
   The photo is composed for a wide crop, so on a phone the children ended up
   small and low. Scaling around the point where they are running brings them up
   into the band between the sub-heading and the buttons, and the overlay is
   eased so they are actually visible there. */
@media (max-width:640px){
  .hero .bg img{transform:scale(1.55);transform-origin:50% 74%;filter:brightness(1.06) saturate(1.06)}
  .hero .bg::after{
    background:
      linear-gradient(180deg,rgba(30,30,24,.66) 0%,rgba(30,30,24,.5) 34%,rgba(30,30,24,.12) 56%,rgba(30,30,24,0) 72%),
      linear-gradient(0deg,rgba(30,30,24,.5) 0%,rgba(30,30,24,.1) 18%,rgba(30,30,24,0) 34%);
  }
}

/* ---- WordPress integration ---- */
.wp-site-blocks{padding:0}

/* WordPress constrains every top-level block to theme.json contentSize, which
   capped the page at 1480px and left a visible seam either side of the
   full-bleed bands on wide screens. Our sections paint their own backgrounds
   and manage their own measure via .wrap, so the root must not constrain them.
   The class is doubled to beat the generated global-styles rule regardless of
   stylesheet order. */
.wp-site-blocks.wp-site-blocks > *{max-width:none;margin-block-start:0}
.ll,.ll-main,.wp-block-template-part{max-width:none;width:100%}
.cform .wp-block-group,.cform form{display:flex;flex-direction:column;gap:16px}
.vwrap iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.tm .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.two-up{grid-template-columns:1fr}}

/* ---- blog: real WP query loop wearing the archive styling ---- */
.posts-query .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none;margin:0;padding:0}
@media (max-width:980px){.posts-query .posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.posts-query .posts{grid-template-columns:1fr}}
.post .post-thumb .thumb-cat{font-family:'Shadows Into Light Two',cursive;font-size:26px;color:var(--ink);opacity:.55}
.post .post-thumb .thumb-cat a{text-decoration:none;color:inherit}
.post .post-thumb .wp-block-post-featured-image{position:absolute;inset:0;margin:0;height:100%}
.post .post-thumb .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.post .post-body>*{margin:0}
.post .h-card a,.post .wp-block-post-title a{text-decoration:none}
.post .wp-block-post-title{font-family:'Fredoka',sans-serif;font-weight:500;font-size:23px;line-height:1.2}
.post .wp-block-post-title a:hover{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px}
.post .wp-block-post-excerpt__excerpt{font-size:15px;color:var(--ink-2)}
.post .wp-block-post-date,.post .wp-block-post-author-name{font-size:13.5px;color:var(--ink-3)}
.post .cat a{text-decoration:none}
.post .golink,.post .wp-block-read-more{margin-top:auto;padding-top:10px;text-decoration:none;font-family:'Fredoka',sans-serif;color:var(--pitch-deep)}

/* Blog cards (owner, 2026-08-02): the post's own photo, or nothing.
   A post with no featured image used to show a bare gold gradient panel with
   the category name across it, which read as a design element rather than the
   absence of one. `:has()` hides the whole panel when there is no image, so the
   card simply starts at its title.
   `wp:post-template` renders ul > li > article.post. The li is the grid item and
   stretches to the row height, but the article inside it did not, so cards with
   shorter excerpts floated with white space under them. Making the li a flex
   container stretches the card to fill its cell; `.golink{margin-top:auto}`
   already pins "Read the post" to the bottom. Measured 431/547/493px before,
   equal after. */
.post .post-thumb:not(:has(img)){display:none}
.posts-query .posts>li{display:flex}
.posts-query .posts>li>.post{width:100%}
.pager{margin-top:40px;gap:14px;font-family:'Fredoka',sans-serif}
.pager a,.pager .current{text-decoration:none;padding:9px 15px;border-radius:99px;background:var(--white);box-shadow:var(--sh)}
.pager .current{background:var(--sun)}

/* ---- horizontal alignment controls ----
   Applied from the block sidebar's Styles panel. Each class covers the three
   ways something can sit east-west: the text inside it, the items inside it if
   it is a flex row or column, and the box itself inside a wider parent. The
   class is doubled purely to win specificity over the base rules. */
.is-style-ll-left.is-style-ll-left,
.is-style-ll-center.is-style-ll-center,
.is-style-ll-right.is-style-ll-right{max-width:100%}
.is-style-ll-left.is-style-ll-left{text-align:left;align-items:flex-start;justify-content:flex-start;margin-inline:0 auto}
.is-style-ll-center.is-style-ll-center{text-align:center;align-items:center;justify-content:center;margin-inline:auto}
.is-style-ll-right.is-style-ll-right{text-align:right;align-items:flex-end;justify-content:flex-end;margin-inline:auto 0}
.is-style-ll-center.is-style-ll-center > *{margin-inline:auto}
.is-style-ll-right.is-style-ll-right > *{margin-inline:auto 0}
.is-style-ll-left.is-style-ll-left > *{margin-inline:0 auto}
.is-style-ll-center .lede,.is-style-ll-center p,
.is-style-ll-right .lede,.is-style-ll-right p{max-width:none}

/* ---- accessibility ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--sun);
  font-family:'Fredoka',sans-serif;padding:12px 20px;border-radius:0 0 14px 0;text-decoration:none}
.skip-link:focus{left:0}

/* ---- single post ---- */
.pagehero .wp-block-post-title{font-size:clamp(32px,4.4vw,54px);max-width:20ch}
.pagehero .post-meta{gap:14px;color:var(--ink-2);font-size:15px;margin-top:6px}
.post-hero-img img{width:100%;max-height:460px;object-fit:cover;border-radius:28px;box-shadow:var(--sh-lg);margin-bottom:34px}
.prose{max-width:72ch;margin:0 auto}
.prose>*{margin-block:0 22px}
/* .ll p{margin:0} out-specifies .prose>*, so post copy needs an explicit rule. */
.ll .prose p,.ll .prose ul,.ll .prose ol,.ll .prose blockquote{margin:0 0 22px}
.ll .prose figure.wp-block-image{display:block;margin:0 0 26px}
.prose h2{font-family:'Fredoka',sans-serif;font-size:clamp(25px,2.8vw,34px);margin-block:40px 14px}
.prose h3{font-family:'Fredoka',sans-serif;font-size:22px;margin-block:30px 10px}
.prose p,.prose li{font-size:17.5px;line-height:1.8;color:var(--ink-2)}
.prose a{color:var(--pitch-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.prose img{border-radius:22px;box-shadow:var(--sh)}
.prose blockquote{border-left:5px solid var(--sun);padding-left:22px;margin-left:0;font-style:italic}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-bottom:8px}

/* ============================================================
   FORMS — the plugin renders them, the theme skins the card
   ------------------------------------------------------------
   Registration, Contact and Careers are WPForms forms dropped in through
   [little_lions_form]. Nothing here changes a field, a price or an
   integration; it only makes the plugin's output wear Design E. Everything
   below was measured in Chromium against the real form markup and WPForms'
   own stylesheets, because reasoning about which selector wins got it
   wrong — WPForms does NOT out-specify .cform's generic rules.
   ============================================================ */

/* The three form cards are wp:group blocks, so WordPress emits is-layout-flow
   and its :where(.is-layout-flow)>* margin-block-start:24px stacks on top of
   the card's own 16px flex gap. Measured 24px injected on every child but the
   first. Same rule that pushed the Out of School pills down (§3i). */
.ll .cform>*{margin-block-start:0}

/* Rotations that used to be inline styles on the card divs. A stray inline
   style on a core group block trips block validation in the editor, so they
   live here now. */
.ll .regform{transform:rotate(-.25deg)}
.ll .jobform{transform:rotate(-.3deg);max-width:820px}

.ll-form{width:100%;min-width:0}
.cform .wpforms-container{margin:0;width:100%}
/* .cform form{display:flex;gap:16px} would double up on the spacing WPForms
   already applies to its own fields. */
.cform .wpforms-container form{display:block;gap:0}

/* Choice labels sit inline beside their box. .cform label{display:flex;
   flex-direction:column} was forcing every Yes/No onto its own line. */
.cform .wpforms-container .wpforms-field-label-inline{
  display:inline;font-family:'ABeeZee',sans-serif;font-weight:400;font-size:15.5px;gap:0;
}

/* Field labels in the brand face, matching the hand-authored card. */
.cform .wpforms-container .wpforms-field-label{
  font-family:'Fredoka',sans-serif;font-weight:500;color:var(--ink);
}
.cform .wpforms-container .wpforms-field-description{font-size:13.5px;color:var(--ink-3)}

/* Submit and the multi-page next/previous buttons in the site's button
   language. Left unbranded they render as the browser's grey default.
   inline-flex + align-items:center, exactly as .btn does, rather than relying
   on line-height to centre the label. Measured: line-height:1 left the text
   1.5px high inside the pill, because a Fredoka glyph box is not centred within
   a line box equal to its font-size. Flex centring is exact at any size. */
.cform .wpforms-container button[type=submit],
.cform .wpforms-container .wpforms-page-button{
  font-family:'Fredoka',sans-serif;font-weight:500;font-size:17.5px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pitch-deep);color:#fff;border:none;border-radius:999px;
  padding:18px 34px;cursor:pointer;box-shadow:var(--sh);
  transition:transform .16s ease,box-shadow .16s ease;
}
.cform .wpforms-container button[type=submit]:hover,
.cform .wpforms-container .wpforms-page-button:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}

/* The fallback shown when a form cannot be resolved. */
.ll-form-fallback{color:var(--ink-2);font-size:15.5px}
.ll-form-admin{
  font-size:14px;color:var(--ink-2);background:var(--shell);
  border-radius:16px;padding:14px 18px;
}

/* School-pay schools sign their own families up at the front desk, so the card
   says so before a parent reaches the registration form and discovers it does
   not apply to them. Amber, to sit apart from the town (shell), website (leaf)
   and address (sky) chips. #7A4206 on #FBE7CE measures 6.68:1 — comfortably
   past the 4.5:1 AA threshold at this 12.5px size. */
.school-chip.school-selfpay{
  background:#FBE7CE;color:#7A4206;font-weight:600;
}