/* ==========================================================================
   Lil' Images of Blessings Christian Learning Center
   Light, warm, colorful. Logo red is reserved for the single primary action.
   ========================================================================== */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/baloo2-var.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/nunito-var.woff2') format('woff2');}

:root{
  /* paper */
  --cream:#FFFCF6;
  --cream-2:#FFF4E4;
  --cream-3:#FDE9CF;
  --ink:#151A21;
  --ink-soft:#4A5560;
  --ink-line:rgba(21,26,33,.10);

  /* logo colors, sampled from the wordmark */
  --red:#E10009;        /* PRIMARY ACTION ONLY */
  --red-deep:#A80007;
  --sky:#0073D2;
  --royal:#0033A3;
  --green:#2F7D00;
  --purple:#6F009A;
  --magenta:#A50CB0;
  --yellow:#FFE100;
  --yellow-deep:#9A7300;

  /* accessible ink versions for small text on tinted chips */
  --sky-ink:#00559B;
  --green-ink:#245F00;
  --royal-ink:#002B87;
  --purple-ink:#5C0080;
  --magenta-ink:#7E0888;

  /* soft section washes */
  --wash-sky:#EAF4FE;
  --wash-green:#EFF8E7;
  --wash-purple:#F6ECFA;
  --wash-yellow:#FFF7D6;
  --wash-pink:#FDEDEE;

  --la-accent:#B8006E;

  --shadow-card:0 2px 0 rgba(21,26,33,.05), 0 14px 30px -20px rgba(21,26,33,.30);
  --shadow-lift:0 4px 0 rgba(21,26,33,.07), 0 26px 48px -22px rgba(21,26,33,.38);
  --r:24px;
  --rainbow:linear-gradient(90deg,var(--red),#FF7A00,var(--yellow),var(--green),var(--sky),var(--royal),var(--purple));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Baloo 2','Nunito',system-ui,sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.005em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.05rem,5.6vw,3.85rem)}
h2{font-size:clamp(1.7rem,3.9vw,2.7rem)}
h3{font-size:clamp(1.18rem,2.1vw,1.45rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

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

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:32px}}
.wrap-narrow{max-width:860px}

section{position:relative}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec-cream2{background:var(--cream-2)}
.sec-sky{background:var(--wash-sky)}
.sec-green{background:var(--wash-green)}
.sec-purple{background:var(--wash-purple)}
.sec-yellow{background:var(--wash-yellow)}

/* bright colorful CTA band, replaces the old black band */
/* the closing call to action sits on clean white so the red button carries it */
.sec-bright{
  background:#fff;
  border-block:1px solid rgba(21,26,33,.08);
}
.sec-bright h2{color:var(--ink)}
.sec-bright .lede{color:var(--ink-soft)}

/* ---------- eyebrow + accent word ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-ink);margin-bottom:.9rem;
}
.eyebrow::before{content:"";width:26px;height:4px;border-radius:99px;background:currentColor;flex:none}

.crayon{
  position:relative;
  background-image:linear-gradient(90deg,var(--yellow),var(--yellow));
  background-repeat:no-repeat;
  background-size:100% .34em;
  background-position:0 84%;
  padding-inline:.06em;
  border-radius:3px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:56px;padding:.9rem 1.65rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.06rem;line-height:1.1;
  border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,background-color .22s ease;
  position:relative;overflow:hidden;
}
/* clean pill, no hard 3D lip under the bottom edge */
.btn-primary{
  background:linear-gradient(180deg,#F0121B 0%,var(--red) 55%,var(--red-deep) 100%);
  color:#fff;
  box-shadow:0 10px 22px -10px rgba(225,0,9,.55), 0 2px 6px -3px rgba(21,26,33,.35);
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:linear-gradient(180deg,#FF1A24 0%,#EE0710 55%,var(--red) 100%);
  transform:translateY(-2px);
  box-shadow:0 18px 32px -12px rgba(225,0,9,.6), 0 3px 8px -3px rgba(21,26,33,.35);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(225,0,9,.55)}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .75s ease}

.btn-ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 2.5px var(--ink);
}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink);color:#fff;transform:translateY(-3px)}
.hero .btn-ghost{color:#fff;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.8);backdrop-filter:blur(4px)}
.hero .btn-ghost:hover,.hero .btn-ghost:focus-visible{background:#fff;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transition:none;transform:none}
  .btn-primary::after{display:none}
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,252,246,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-line);
}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--rainbow);opacity:.85}
.site-header .bar{display:flex;align-items:center;gap:.75rem;min-height:92px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;margin-right:auto;min-height:44px}
.brand img{height:51px;width:auto;display:block}
@media(min-width:1080px){.brand img{height:64px}}

.nav-main{display:none;align-items:center;gap:.1rem}
@media(min-width:1080px){.nav-main{display:flex}}
.nav-main a{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.02rem;
  color:var(--ink);text-decoration:none;padding:.6rem .72rem;border-radius:999px;
  transition:background-color .2s ease,color .2s ease;
}
.nav-main a:hover{background:var(--cream-3)}
.nav-main a[aria-current="page"]{color:var(--purple-ink);background:var(--wash-purple)}

/* the "More" / "Menu" dropdown, no hamburger anywhere */
.more-wrap{position:relative;flex:none}
.more-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:48px;padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--ink-line);background:#fff;color:var(--ink);
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.02rem;
  transition:border-color .2s ease,background-color .2s ease;
}
.more-btn:hover{border-color:var(--purple);background:var(--wash-purple)}
.more-btn .chev{
  width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .22s ease;flex:none;
}
.more-btn[aria-expanded="true"] .chev{transform:translateY(1px) rotate(225deg)}
.more-btn .lbl-more{display:none}
@media(min-width:1080px){
  .more-btn .lbl-more{display:inline}
  .more-btn .lbl-menu{display:none}
}

.more-panel{
  position:absolute;right:0;top:calc(100% + 12px);z-index:70;
  min-width:264px;max-width:min(92vw,320px);
  background:#fff;border-radius:20px;padding:.6rem;
  box-shadow:0 18px 48px -14px rgba(21,26,33,.32),0 0 0 1px var(--ink-line);
  display:none;
}
.more-panel.open{display:block}
.more-panel a{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .8rem;min-height:48px;border-radius:14px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.02rem;
  color:var(--ink);text-decoration:none;
}
.more-panel a:hover{background:var(--cream-2)}
.more-panel a[aria-current="page"]{color:var(--purple-ink);background:var(--wash-purple)}
.more-panel a .dot{width:9px;height:9px;border-radius:50%;flex:none}
.more-panel .grp{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);padding:.7rem .8rem .3rem;margin:0;
}
.more-panel hr{border:0;border-top:1px solid var(--ink-line);margin:.4rem .6rem}
.more-panel a.only-small{display:flex}
.more-panel hr.only-small{display:block}
@media(min-width:1080px){
  .more-panel a.only-small,.more-panel hr.only-small{display:none}
}

.header-cta{flex:none;min-height:48px;padding:.6rem 1.05rem;font-size:1rem}
.header-cta .tiny{display:inline}
.header-cta .short,.header-cta .long{display:none}
@media(min-width:430px){
  .header-cta .tiny{display:none}
  .header-cta .short{display:inline}
}
@media(min-width:620px){
  .header-cta .short{display:none}
  .header-cta .long{display:inline}
}
@media(max-width:429px){
  .site-header .bar{gap:.4rem;min-height:78px}
  .brand img{height:41px}
  .more-btn{padding:.55rem .8rem;font-size:.95rem}
  .header-cta{padding:.6rem .9rem;font-size:.95rem}
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:.85rem 1.25rem;border-radius:0 0 12px 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- hero with video ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#243041}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% center;display:block}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(12,16,24,.93) 0%,rgba(12,16,24,.85) 36%,rgba(12,16,24,.46) 64%,rgba(12,16,24,.18) 100%),
    linear-gradient(180deg,rgba(12,16,24,.42) 0%,transparent 34%,rgba(12,16,24,.34) 100%);
}
@media(max-width:767px){
  .hero-scrim{background:linear-gradient(180deg,rgba(12,16,24,.62) 0%,rgba(12,16,24,.72) 45%,rgba(12,16,24,.88) 100%)}
}
.hero-inner{padding-block:clamp(64px,11vw,132px);position:relative}

/* wall to wall video with the copy centred */
.hero-center .hero-scrim{
  background:
    linear-gradient(180deg,rgba(12,16,24,.72) 0%,rgba(12,16,24,.62) 45%,rgba(12,16,24,.82) 100%),
    radial-gradient(78% 100% at 50% 50%,rgba(12,16,24,.42) 0%,rgba(12,16,24,.70) 100%);
}
.hero-center .hero-copy{max-width:820px;margin-inline:auto;text-align:center}
.hero-center .hero-badges{justify-content:center}
.hero-center p.lede{margin-inline:auto}
.hero-center .hero-actions{justify-content:center}
.hero-copy{max-width:min(100%,720px)}
.hero h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5)}
.hero p.lede{color:rgba(255,255,255,.94);font-size:clamp(1.04rem,1.9vw,1.28rem);max-width:56ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}

/* ---------- animated gradient words ----------
   .rainbow      for dark text on a light background
   .rainbow-light for light text over a photo or video, tints only, so the
                  contrast against a dark scrim stays well over 4.5:1        */
.rainbow,.rainbow-light{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:280% 100%;
  padding-inline:.04em;margin-inline:-.04em;
  animation:hueRun 11s linear infinite;
}
.rainbow{
  background-image:linear-gradient(90deg,
    #C40008,#B85A00,#7A6A00,#2F7D00,#0073D2,#5C0080,#A50CB0,#C40008);
}
.rainbow-light{
  background-image:linear-gradient(90deg,
    #FFE86B,#FFC98F,#FFB4BA,#E7B8FF,#A9D8FF,#A8F0C6,#FFE86B);
}
@keyframes hueRun{from{background-position:0 0}to{background-position:-280% 0}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .rainbow{color:var(--red);-webkit-text-fill-color:var(--red)}
  .rainbow-light{color:var(--yellow);-webkit-text-fill-color:var(--yellow)}
}
/* a slow hue shift on a few words is not the kind of motion that triggers
   anyone, so it keeps running under reduced motion, just gentler. Parallax and
   the marquee are the vestibular ones and those stay gated. */
@media (prefers-reduced-motion:reduce){
  .rainbow,.rainbow-light{animation-duration:26s}
}

/* rainbow sheen sweep across the h1, one pass on load */
.sheen{
  background-image:linear-gradient(100deg,
    #fff 0%,#fff 38%,var(--yellow) 45%,#7ED0FF 50%,#FF8A8F 55%,#fff 62%,#fff 100%);
  background-size:280% 100%;background-position:180% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.sheen.run{animation:sheenSweep 1.9s cubic-bezier(.3,.1,.2,1) .35s 1 forwards}
.sheen.done{background:none;color:#fff;-webkit-text-fill-color:#fff;animation:none}
@keyframes sheenSweep{from{background-position:180% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .sheen{background:none;color:#fff;-webkit-text-fill-color:#fff}
  .sheen.run{animation:none}
}

.hero-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.25rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  color:#fff;border-radius:999px;padding:.42rem .9rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.9rem;
  backdrop-filter:blur(6px);
}
.hero-badge svg{width:16px;height:16px;flex:none}

/* ---------- light hero for pages without video ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 110% at 8% 0%,var(--ph-a,rgba(255,225,0,.45)) 0%,transparent 62%),
    radial-gradient(60% 110% at 95% 100%,var(--ph-b,rgba(0,115,210,.22)) 0%,transparent 62%),
    linear-gradient(180deg,var(--cream-2),var(--cream));
  border-bottom:1px solid var(--ink-line);
}
.page-hero .inner{
  position:relative;z-index:1;
  padding-block:clamp(44px,6.5vw,76px);
  display:grid;gap:2rem;align-items:center;
}
@media(min-width:900px){.page-hero .inner{grid-template-columns:1.05fr .95fr;gap:3rem}}
.page-hero h1{color:var(--ink);font-size:clamp(1.95rem,4.4vw,3.15rem)}
.page-hero p.lede{color:var(--ink-soft);max-width:56ch;font-size:1.1rem;margin-top:1rem}
.page-hero .hero-actions{margin-top:1.6rem}

/* image placeholder, obviously a placeholder, still looks designed */
.img-slot{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.75) 0 14px,rgba(255,255,255,.45) 14px 28px),
    var(--slot,var(--wash-sky));
  border:3px dashed color-mix(in srgb,var(--slot-ink,var(--sky)) 45%,#fff);
  box-shadow:var(--shadow-card);
  padding:1.5rem;
}
.img-slot .inner-slot{max-width:34ch}
.img-slot svg{width:44px;height:44px;color:var(--slot-ink,var(--sky));margin-bottom:.6rem}
.img-slot strong{
  display:block;font-family:'Baloo 2',sans-serif;font-size:1.08rem;
  color:var(--slot-ink,var(--sky));line-height:1.25;
}
.img-slot span{display:block;margin-top:.35rem;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.img-slot .tag{
  position:absolute;top:.85rem;left:.85rem;
  background:var(--slot-ink,var(--sky));color:#fff;border-radius:999px;
  padding:.25rem .7rem;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;
}
/* the same box, holding a real photo instead of the placeholder */
.img-slot.has-photo{
  margin:0;padding:0;border:0;
  background:var(--slot,var(--wash-sky));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--slot-ink,var(--sky)) 22%,#fff), var(--shadow-card);
}
.img-slot.has-photo picture{display:block;width:100%;height:100%}
.img-slot.has-photo video{display:block;width:100%;height:100%;object-fit:cover}
.img-slot img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- trust rail, light ---------- */
.trust-rail{background:#fff;border-bottom:1px solid var(--ink-line);padding-block:1.35rem}
.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
@media(min-width:860px){.trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust-item{display:flex;align-items:flex-start;gap:.75rem}
.trust-item .ti{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff;
}
.trust-item .ti svg{width:22px;height:22px}
.trust-item strong{display:block;font-family:'Baloo 2',sans-serif;font-size:1rem;line-height:1.25;color:var(--ink)}
.trust-item span{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.4}

/* ---------- cards ---------- */
.card{
  background:#fff;border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--shadow-card);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
  height:100%;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
@media (prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}

.card-icon{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  margin-bottom:1rem;color:#fff;flex:none;
}
.card-icon svg{width:28px;height:28px}

.room{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-card);height:100%;
  border-top:6px solid var(--room,var(--sky));
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;position:relative;
}
.room::before{
  content:"";position:absolute;inset:auto -30% -55% -30%;height:150px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--room) 26%,transparent),transparent);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
a.room:hover,a.room:focus-visible{transform:translateY(-7px) rotate(-.4deg);box-shadow:var(--shadow-lift)}
a.room:hover::before,a.room:focus-visible::before{opacity:1}
.room-body{padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.room-age{
  display:inline-flex;align-self:flex-start;align-items:center;
  background:color-mix(in srgb,var(--room) 11%,#fff);
  color:color-mix(in srgb,var(--room) 62%,#000);
  border-radius:999px;padding:.3rem .8rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.85rem;
}
.room h3{color:color-mix(in srgb,var(--room) 78%,#000)}
.room .more{
  margin-top:auto;padding-top:.9rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;
  color:color-mix(in srgb,var(--room) 70%,#000);
  display:inline-flex;align-items:center;gap:.4rem;
}
a.room{text-decoration:none;color:inherit}
a.room .more::after{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg);transition:transform .25s ease}
a.room:hover .more::after{transform:rotate(45deg) translate(3px,-3px)}
.room-soon .more{color:var(--ink-soft);font-weight:600;font-size:.92rem}
@media (prefers-reduced-motion:reduce){a.room:hover{transform:none}}

.badge-sky{background:rgba(0,115,210,.11);color:var(--sky-ink)}
.badge-green{background:rgba(47,125,0,.11);color:var(--green-ink)}
.badge-royal{background:rgba(0,51,163,.11);color:var(--royal-ink)}
.badge-purple{background:rgba(111,0,154,.11);color:var(--purple-ink)}
.badge-magenta{background:rgba(165,12,176,.11);color:var(--magenta-ink)}

/* ---------- lists ---------- */
.tick{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tick li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.6}
.tick li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:.22rem;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.8 4.8 12l1.7-1.7 3.1 3.1 7.9-7.9L19.2 7z'/%3E%3C/svg%3E") center/135% no-repeat;
          mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.8 4.8 12l1.7-1.7 3.1 3.1 7.9-7.9L19.2 7z'/%3E%3C/svg%3E") center/135% no-repeat;
}

.steps{counter-reset:step;display:grid;gap:1.15rem}
.step{
  background:#fff;border-radius:var(--r);padding:1.5rem 1.5rem 1.5rem 4.6rem;
  box-shadow:var(--shadow-card);position:relative;
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:1.35rem;top:1.35rem;
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--purple);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.3rem;line-height:1;
}

/* ---------- day schedule rail ---------- */
.day{display:grid;gap:.85rem}
@media(min-width:640px){.day{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.day{grid-template-columns:repeat(3,minmax(0,1fr))}}
.day-item{
  background:#fff;border-radius:20px;padding:1.15rem 1.25rem;
  box-shadow:var(--shadow-card);display:flex;gap:.9rem;align-items:flex-start;
}
.day-item .dot{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.day-item .dot svg{width:21px;height:21px}
.day-item h3{font-size:1.06rem;margin-bottom:.15rem}
.day-item p{font-size:.95rem;color:var(--ink-soft);margin:0;line-height:1.55}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap}
}
.school-chip{
  display:inline-flex;align-items:center;gap:.55rem;flex:none;
  background:#fff;border-radius:999px;padding:.7rem 1.25rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1rem;
  box-shadow:var(--shadow-card);white-space:nowrap;
}
.school-chip .pin{width:10px;height:10px;border-radius:50%;flex:none}

/* ---------- quote ---------- */
.quote{background:#fff;border-radius:var(--r);padding:2rem;box-shadow:var(--shadow-card);position:relative}
.quote::before{
  content:"\201C";position:absolute;top:-.35rem;left:1.35rem;
  font-family:'Baloo 2',serif;font-size:6rem;line-height:1;color:var(--yellow);
}
.quote blockquote{margin:0;padding-top:1.6rem;font-size:1.14rem;line-height:1.68}
.quote figcaption{margin-top:1.1rem;display:flex;align-items:center;gap:.8rem}
.quote figcaption strong{font-family:'Baloo 2',sans-serif;display:block;line-height:1.25}
.quote figcaption span{font-size:.9rem;color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.85rem}
.faq details{background:#fff;border-radius:20px;box-shadow:var(--shadow-card);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 3.4rem 1.15rem 1.35rem;
  position:relative;min-height:56px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.08rem;font-weight:700;margin:0;line-height:1.35;text-wrap:balance}
.faq summary::after{
  content:"";position:absolute;right:1.35rem;top:50%;width:12px;height:12px;
  border-right:3px solid var(--purple);border-bottom:3px solid var(--purple);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq .answer{padding:0 1.35rem 1.35rem;color:var(--ink-soft)}
.faq .answer p:first-child{margin-top:0}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:1.05rem}
.field > span{
  display:flex;align-items:baseline;gap:.3rem;flex-wrap:nowrap;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.98rem;margin-bottom:.35rem;
}
.field > span .req{font-size:1rem;line-height:1}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;
  border:2px solid rgba(21,26,33,.16);border-radius:14px;background:#fff;
  font-family:inherit;font-size:1rem;color:var(--ink);
}
.field textarea{min-height:132px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7C8792}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
.req{color:var(--red-deep);font-weight:800}
#form-status.ok{color:var(--green-ink)}
#form-status.err{color:var(--red-deep)}

/* ---------- footer, light and warm ---------- */
.site-footer{
  background:linear-gradient(180deg,var(--cream-2),#FFEFD9);
  color:var(--ink-soft);position:relative;padding-block:clamp(48px,7vw,72px) 0;
}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--rainbow)}
.site-footer .footer-h{
  font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--ink);
  font-size:1.05rem;margin:0 0 .85rem;line-height:1.25;
}
.site-footer a{color:var(--ink-soft);text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--purple-ink);text-decoration:none}
.footer-grid{display:grid;gap:2.25rem}
@media(min-width:700px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.footer-grid{grid-template-columns:1.25fr .8fr .95fr 1.15fr}}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font-size:.97rem}
.footer-links li{display:block}
.footer-links a{
  display:flex;align-items:center;gap:.65rem;
  padding:.55rem .5rem .55rem .4rem;margin-left:-.4rem;
  border-radius:12px;text-decoration:none;min-height:44px;
  transition:background-color .2s ease,transform .2s ease;
}
.footer-links a:hover{background:rgba(255,255,255,.7);transform:translateX(2px);text-decoration:none}
.fi{
  width:28px;height:28px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  color:#fff;background:var(--fi,var(--sky));
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--fi,var(--sky)) 60%,transparent);
}
.fi svg{width:15px;height:15px;stroke-width:2.2}
.footer-hours li{display:flex;align-items:flex-start;gap:.65rem;padding:.42rem 0;line-height:1.5}
.footer-hours .fi{margin-top:.15rem}
.footer-hours strong{color:var(--ink);font-family:'Baloo 2',sans-serif;font-weight:700}
@media (prefers-reduced-motion:reduce){.footer-links a,.footer-links a:hover{transition:none;transform:none}}
.footer-logo{height:56px;width:auto;margin-bottom:1rem;display:block}

.footer-map{
  margin-top:2.75rem;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-card);
}
.footer-map .head{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  padding:1.1rem 1.35rem;border-bottom:1px solid var(--ink-line);
}
.footer-map .head .pinbox{width:42px;height:42px;border-radius:13px;background:var(--purple);color:#fff;display:grid;place-items:center;flex:none}
.footer-map .head .pinbox svg{width:22px;height:22px}
.footer-map .head strong{display:block;font-family:'Baloo 2',sans-serif;font-size:1.05rem;color:var(--ink);line-height:1.25}
.footer-map .head span{display:block;font-size:.93rem}
.footer-map .head .go{margin-left:auto}
.footer-map .frame{
  position:relative;height:300px;
  background:
    radial-gradient(60% 90% at 20% 20%,rgba(255,225,0,.35),transparent 60%),
    radial-gradient(60% 90% at 80% 80%,rgba(0,115,210,.18),transparent 60%),
    var(--cream-2);
}
@media(min-width:768px){.footer-map .frame{height:340px}}
.footer-map .frame .fallback{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.5rem;
}
.footer-map .frame .fallback p{max-width:36ch;font-size:.97rem;margin:0}
.footer-map iframe{position:relative;display:block;width:100%;height:100%;border:0;filter:saturate(1.05)}

.footer-bottom{
  margin-top:2.5rem;border-top:1px solid rgba(21,26,33,.12);
  padding-block:1.5rem;text-align:center;
}
.footer-bottom p{font-size:.9rem;color:var(--ink-soft);margin:0}
.footer-bottom p+p{margin-top:.45rem}
.la-attr{
  color:var(--la-accent);text-decoration:none;font-weight:800;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:.35rem;
  transition:filter .3s ease;
}
.la-attr:hover,.la-attr:focus-visible{color:var(--la-accent);filter:brightness(1.15);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.la-attr{transition:none}}
.social{display:flex;gap:.6rem;margin-top:1rem}
.social a{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--royal);color:#fff;transition:background-color .25s ease,transform .25s ease;
}
.social a:hover{background:var(--sky);transform:translateY(-2px);color:#fff}
.social svg{width:22px;height:22px}

/* ---------- sticky CTA, phones only ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,252,246,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--ink-line);
  transform:translateY(115%);transition:transform .3s ease;
}
.mobile-cta.show{transform:translateY(0)}
.mobile-cta .btn{min-height:52px;font-size:1rem;padding-inline:1rem}
@media(min-width:900px){.mobile-cta{display:none !important}}
@media(max-width:899px){body.has-mobile-cta{padding-bottom:var(--cta-pad,104px)}}
@media (prefers-reduced-motion:reduce){.mobile-cta{transition:none}}

/* ---------- doodles ---------- */
.doodles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.doodle{position:absolute;opacity:.45;will-change:transform}
.doodle svg{display:block}
.sec > .wrap{position:relative;z-index:1}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .reveal.in{transition:none}
}
.no-js .reveal{opacity:1;transform:none}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;z-index:90;width:0;background:var(--rainbow)}

/* ---------- utility ---------- */
.grid-3{display:grid;gap:1.15rem}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-2{display:grid;gap:1.5rem}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}}
.lede{font-size:1.12rem;color:var(--ink-soft)}
.center{text-align:center}
.mx-auto-narrow{max-width:62ch;margin-inline:auto}
.note{
  background:#fff;border-radius:18px;padding:1.1rem 1.25rem;
  font-size:.96rem;border-left:5px solid var(--yellow-deep);box-shadow:var(--shadow-card);
}
.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;
}

/* inline content links stay distinguishable without color, footer excepted */
p a:not(.btn), li a:not(.btn), blockquote a, .answer a, dd a, .note a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;
  padding-block:.22rem;
}
/* phone and email links inside a sentence get a fatter thumb target on touch screens */
@media(hover:none){
  a[href^="tel:"]:not(.btn), a[href^="sms:"]:not(.btn), a[href^="mailto:"]:not(.btn){
    padding-block:.55rem;display:inline-block;
  }
}
p a:not(.btn):hover, li a:not(.btn):hover, .answer a:hover{color:var(--purple-ink)}
.site-footer p a:not(.btn),.site-footer li a:not(.btn){text-decoration:none;padding-block:.32rem}
.site-footer p a:not(.btn):hover,.site-footer li a:not(.btn):hover{color:var(--purple-ink)}

/* doodles compete with copy on narrow screens, so they sit out below tablet */
/* only shown when the viewport is wider than the 1200px container plus a
   comfortable margin, so a doodle can never land on a line of copy */
@media(max-width:1319px){.doodles{display:none}}


/* ---------- full width band with a video background ---------- */
.video-band{position:relative;isolation:isolate;overflow:hidden;background:#2A2320}
.video-band .band-media{position:absolute;inset:0;z-index:-2}
.video-band .band-media video,.video-band .band-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;
}
.video-band .band-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(20,14,10,.86) 0%,rgba(20,14,10,.74) 42%,rgba(20,14,10,.88) 100%),
    radial-gradient(70% 90% at 50% 0%,rgba(111,0,154,.28),transparent 62%);
}
.video-band .wrap{position:relative;z-index:1}
.video-band h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
@media(max-width:767px){
  /* narrower crop lands on the brightest part of the frame, so the scrim works harder */
  .video-band .band-scrim{
    background:linear-gradient(180deg,rgba(16,11,8,.90) 0%,rgba(16,11,8,.86) 50%,rgba(16,11,8,.92) 100%);
  }
}
.video-band .lede{color:rgba(255,255,255,.92)}
.video-band p a:not(.btn),.video-band li a:not(.btn){
  color:var(--yellow);text-decoration-color:rgba(255,225,0,.7);
}
.video-band p a:not(.btn):hover,.video-band li a:not(.btn):hover{color:#fff}
.video-band .eyebrow{color:var(--yellow);text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7)}

.chip-rows{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  max-width:1150px;margin-inline:auto;
}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  color:#fff;border-radius:999px;padding:.5rem .95rem;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.94rem;line-height:1.2;
  backdrop-filter:blur(6px);white-space:nowrap;
}
.chip::before{
  content:"";width:15px;height:15px;flex:none;border-radius:50%;
  background:var(--yellow);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.8 4.8 12l1.7-1.7 3.1 3.1 7.9-7.9L19.2 7z'/%3E%3C/svg%3E") center/135% no-repeat;
          mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.8 4.8 12l1.7-1.7 3.1 3.1 7.9-7.9L19.2 7z'/%3E%3C/svg%3E") center/135% no-repeat;
}
@media(max-width:520px){
  .chip{font-size:.9rem;padding:.48rem .85rem;white-space:normal}
  .chip-rows{gap:.5rem}
}
.band-note{
  max-width:78ch;margin:2rem auto 0;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  border-radius:18px;padding:1.05rem 1.35rem;
  color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.6;
  backdrop-filter:blur(6px);
}
.band-stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2.25rem;margin-top:1.6rem;
}
.band-stat{display:flex;align-items:center;gap:.6rem;color:#fff}
.band-stat .n{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.75rem;line-height:1;color:var(--yellow)}
.band-stat span{font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.3;text-align:left}


/* ---------- team cards with headshots ---------- */
.team{
  background:#fff;border-radius:var(--r);overflow:hidden;height:100%;
  box-shadow:var(--shadow-card);border-top:6px solid var(--tc,var(--sky));
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}
.team:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
@media (prefers-reduced-motion:reduce){.team,.team:hover{transition:none;transform:none}}
.team .shot{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:color-mix(in srgb,var(--tc,var(--sky)) 8%,#fff);
}
.team .shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.team .body{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.team .body h3{color:color-mix(in srgb,var(--tc,var(--sky)) 78%,#000)}
.team .body p{font-size:.97rem;color:var(--ink-soft);margin:0}

/* awaiting a real headshot */
.team .shot.pending{
  display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.78) 0 14px,rgba(255,255,255,.42) 14px 28px),
    color-mix(in srgb,var(--tc,var(--sky)) 12%,#fff);
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--tc,var(--sky)) 28%,#fff);
}
.team .shot.pending svg{width:52px;height:52px;color:color-mix(in srgb,var(--tc,var(--sky)) 70%,#000);margin-bottom:.6rem}
.team .shot.pending strong{
  display:block;font-family:'Baloo 2',sans-serif;font-size:1rem;line-height:1.3;
  color:color-mix(in srgb,var(--tc,var(--sky)) 70%,#000);
}
.team .shot.pending span{display:block;margin-top:.3rem;font-size:.88rem;color:var(--ink-soft);line-height:1.45}

/* the owner photo runs full height of its column, bio lives beside it */
.team-photo{
  margin:0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tc,var(--purple)) 20%,#fff), var(--shadow-card);
  background:color-mix(in srgb,var(--tc,var(--purple)) 8%,#fff);
}
.team-photo picture{display:block;width:100%;height:100%}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}

.bio-card{
  margin-top:1.75rem;background:#fff;border-radius:20px;padding:1.35rem 1.5rem;
  box-shadow:var(--shadow-card);border-left:6px solid var(--tc,var(--purple));
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
}
.bio-card h3{color:color-mix(in srgb,var(--tc,var(--purple)) 78%,#000);margin:0}
.bio-card p{margin:0;color:var(--ink-soft);font-size:.97rem}
.bio-card p strong{color:var(--ink)}


/* alternating two column rows: on desktop the copy can sit on either side,
   on mobile the photo always comes first so the section still reads visually */
@media(max-width:899px){
  .grid-2.flip{display:flex;flex-direction:column-reverse}
}


/* the light twin of .chip, for the closed days list on Parent Resources */
.chip-light{
  background:#fff;border:1px solid var(--ink-line);color:var(--ink);
  box-shadow:var(--shadow-card);backdrop-filter:none;
}
.chip-light::before{background:var(--green)}

/* ---------- phone field: one box holding the dial-code picker and the number ----------
   form-playbook 12. The wrapper carries the border, radius and focus ring so the pair reads
   as a single field the same height as its neighbours; the picker is sized to the chosen code
   by assets/js/site.js. The wrapper is a span inside label.field, so it is also matched by
   ".field > span" (the caption rule): span.tel-field outranks it and resets what it set. */
.field > span.tel-field{
  display:flex;align-items:stretch;gap:0;margin-bottom:0;
  font-family:inherit;font-weight:400;font-size:1rem;
  border:2px solid rgba(21,26,33,.16);border-radius:14px;background:#fff;overflow:hidden;
}
.field .tel-field select,.field .tel-field input{
  min-height:48px;border:0;border-radius:0;box-shadow:none;
}
.field .tel-field select.tel-cc{
  flex:none;width:56px;padding:0 24px 0 12px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%230033A3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 9px center/10px 6px;
}
.field .tel-field select.tel-cc option{color:var(--ink)}
.field .tel-field input{
  flex:1 1 auto;width:auto;min-width:0;
  background:linear-gradient(rgba(21,26,33,.16),rgba(21,26,33,.16)) left center/1px 52% no-repeat #fff;
}
.field .tel-field:focus-within{outline:3px solid var(--royal);outline-offset:3px}
.field .tel-field select:focus-visible,.field .tel-field input:focus-visible{outline:0}
.field .tel-field:has(input[aria-invalid="true"]){border-color:var(--red)}
#form-status a{font-weight:800}