/* ===== Distillery District Early Learning — site styles ===== */
:root{
  --purple:#3B2160; --purple-2:#5A3D8A; --lav:#EEE6F8; --lav-text:#E7DDF5;
  --sky:#BFE3F2; --lime:#B4D93B; --lime-2:#9CC93A; --lime-soft:#D7EE8F;
  --cream:#FFFDF7; --white:#FFFFFF;
  --head:'Baloo 2',sans-serif; --body:Quicksand,sans-serif; --hand:'Gochi Hand',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--purple);font-family:var(--body);font-weight:500;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple)} a:hover{color:var(--purple-2)}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.hand{font-family:var(--hand);font-weight:400}
.skip{position:absolute;left:-999px;top:8px;background:var(--purple);color:var(--cream);padding:10px 16px;border-radius:12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;border:0;font-family:var(--head);font-weight:700;font-size:18px;text-decoration:none;cursor:pointer;transition:transform .15s}
.pill:hover{transform:scale(1.04)}
.pill-lime{background:var(--lime);color:var(--purple)}
.pill-dark{background:var(--purple);color:var(--cream)} .pill-dark:hover{color:var(--cream)}
.pill-light{background:var(--cream);color:var(--purple)}

/* ===== header / nav ===== */
.site-header{position:relative;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;background:var(--cream);border-radius:999px;padding:6px 16px 6px 8px}
.brand img{height:44px;width:auto}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--head);font-weight:800;font-size:19px}
.brand i{font-family:var(--hand);font-style:normal;font-size:18px;color:var(--purple-2)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:0;background:var(--purple);color:var(--cream);font-family:var(--head);font-weight:700;font-size:17px;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.nav-links{display:none;position:absolute;left:12px;right:12px;top:76px;background:var(--cream);border-radius:24px;padding:12px;box-shadow:0 12px 30px rgba(59,33,96,.18);flex-direction:column}
.nav-links.open{display:flex}
.nav-links a{display:block;padding:14px 16px;font-weight:700;font-size:18px;text-decoration:none;border-radius:14px}
.nav-links a:hover{background:var(--lav)}
.nav-links .pill{display:flex;margin-top:8px}

/* ===== hero ===== */
.hero{position:relative;background:var(--sky);overflow:hidden;padding-bottom:70px}
.clouds{position:absolute;top:80px;left:0;width:100%;height:240px;pointer-events:none;animation:drift 40s linear infinite}
.hero-grid{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:4px}
.hero-owl{position:relative;width:min(84vw,360px)}
.hero-owl .branch{position:absolute;left:-8%;right:-8%;bottom:2%;width:116%;height:auto;overflow:visible} /* the leaf circles extend past the drawing area, so let them show */
.hero-owl .owl{position:relative;width:56%;margin:0 auto 12%;animation:bob 5s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 8px 0 rgba(59,33,96,.18))}
.hero-text{display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:30px;position:relative;z-index:2}
.tag{display:inline-block;background:var(--cream);border-radius:14px;padding:2px 14px;font-size:22px;transform:rotate(-3deg)}
.hero h1{font-size:clamp(40px,11vw,88px);letter-spacing:-.5px;line-height:.98}
.hero p.lead{font-size:18px;font-weight:600;max-width:520px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hills{position:absolute;left:0;bottom:0;width:100%;height:110px;pointer-events:none}

/* ===== registration ribbon ===== */
.ribbon{display:block;background:var(--purple);color:var(--cream);text-decoration:none;overflow:hidden;padding:12px 0}
.ribbon:hover{color:var(--cream)}
.marquee{display:flex;width:max-content;animation:mq 26s linear infinite;font-family:var(--head);font-weight:700;font-size:20px;white-space:nowrap}
.marquee span{padding:0 20px}
.marquee .hand{color:var(--lime);font-size:24px}
.marquee .star{color:var(--lime)}

/* ===== sections ===== */
section{scroll-margin-top:16px}
.sec{padding:64px 0}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.sec-head h2{font-size:clamp(34px,8vw,54px)}
.sec-head .hand{font-size:24px;color:var(--purple-2)}

/* about */
.about{display:flex;flex-direction:column;gap:36px;align-items:center}
.badge{width:min(78vw,360px);aspect-ratio:1;border-radius:50%;background:var(--white);border:4px dashed var(--purple-2);display:flex;align-items:center;justify-content:center;transform:rotate(-6deg)}
/* sized and nudged so the whole picture (including "Celebrating 20 years") sits inside the dashed circle */
.badge img{width:82%;transform:translate(-1.5%,4%)}
.about-text{display:flex;flex-direction:column;gap:16px}
.about-text p{font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{border-radius:999px;padding:8px 20px;font-family:var(--head);font-weight:700;font-size:19px}

/* programs */
.programs{display:grid;grid-template-columns:1fr;gap:24px}
.ticket{border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.ticket.sky{background:var(--sky)} .ticket.lime{background:var(--lime-soft)}
.ticket-photo{position:relative;overflow:hidden;aspect-ratio:16/10;background-color:var(--lav);background-image:radial-gradient(rgba(59,33,96,.12) 2px,transparent 2px);background-size:18px 18px;border-bottom:4px dashed var(--cream)}
/* the photo/video fills the frame without changing its size, so a tall video stays the same size as the preschool photo */
.ticket-photo img,.ticket-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ticket-body{padding:26px 24px 30px;display:flex;flex-direction:column;gap:10px}
.ticket-body .hand{font-size:22px}
.ticket-body h3{font-size:34px}
.ticket-body p{font-size:16px;font-weight:600}
.ticket-body .note{font-size:14px;font-weight:700}
.ticket-body a{font-family:var(--head);font-weight:700;font-size:18px;padding:8px 0}

/* neighbourhood + gallery */
.dark{background:var(--purple);color:var(--cream);border-radius:48px 48px 0 0}
.dark a{color:var(--cream)}
.dark .sec-head .hand{color:var(--lime)}
.dark p{color:var(--lav-text);font-size:18px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
.gallery button{all:unset;cursor:pointer;display:block;border-radius:20px;overflow:hidden;aspect-ratio:1;background:var(--purple-2);position:relative}
.gallery button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery button:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:8px;bottom:8px;right:8px;background:rgba(255,253,247,.92);color:var(--purple);border-radius:12px;padding:3px 10px;font-family:var(--hand);font-size:18px;line-height:1.3}
.gallery button:nth-child(4n+1){border-radius:90px 90px 20px 20px}
.gallery button:nth-child(4n+4){border-radius:20px 60px 20px 20px}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(26,12,46,.92);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px;z-index:200}
.lightbox.open{display:flex}
.lightbox img{max-height:76vh;max-width:100%;border-radius:18px}
.lightbox p{color:var(--cream);font-family:var(--hand);font-size:24px;text-align:center}
.lb-btn{position:absolute;min-width:52px;min-height:52px;border-radius:50%;border:0;background:var(--cream);color:var(--purple);font-size:26px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close{top:16px;right:16px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}

/* rates */
.rates-band{background:var(--purple);padding:0 0 4px}
.rates{background:var(--lime);border-radius:32px;padding:30px 24px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;transform:translateY(40px)}
.rates h2{font-size:30px}
.rates p{font-size:17px;font-weight:600}

/* contact */
.contact-sec{background:var(--lav);padding:100px 0 64px}
.contact{display:flex;flex-direction:column;gap:36px}
.contact-info{display:flex;flex-direction:column;gap:16px}
.contact-info h2{font-size:clamp(36px,8vw,54px)}
.contact-info p{font-size:18px}
.contact-list{display:flex;flex-direction:column;gap:4px;font-size:18px;font-weight:700}
.contact-list a{padding:8px 0;display:inline-block}
form.card{background:var(--cream);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:16px}
form label{display:flex;flex-direction:column;gap:6px;font-weight:700}
input,textarea{font-family:var(--body);font-size:16px;font-weight:600;border:2px solid var(--purple);border-radius:16px;padding:14px 16px;background:var(--white);color:var(--purple);width:100%}
input:focus,textarea:focus{outline:3px solid var(--lime);outline-offset:2px}
.form-row{display:grid;grid-template-columns:1fr;gap:16px}

/* footer */
footer{background:var(--sky);padding:40px 0 110px}
.foot{display:flex;flex-direction:column;gap:22px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 22px;font-weight:700}
.foot-links a{padding:8px 0}
.foot small{font-size:14px;font-weight:600}

/* mobile sticky action bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,247,.96);box-shadow:0 -6px 20px rgba(59,33,96,.15)}
.mobile-bar .pill{flex:1;min-height:50px;font-size:17px;padding:0 12px}

/* ===== rates page (rates.html) ===== */
.nav-links a[aria-current="page"]{background:var(--lav)}
.page-hero-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:20px 20px 150px}
.page-hero-text h1{font-size:clamp(44px,12vw,88px);letter-spacing:-.5px}
.page-hero-text .lead{font-size:18px;font-weight:600;max-width:560px}
.rate-cards{display:grid;grid-template-columns:1fr;gap:24px}
.rate-card{border-radius:28px;padding:30px 26px;display:flex;flex-direction:column;gap:8px}
.rate-card.sky{background:var(--sky)} .rate-card.lime{background:var(--lime-soft)}
.rate-card .hand{font-size:22px}
.rate-card h2{font-size:38px}
.rate-card .price{margin-top:10px;font-family:var(--head);line-height:1}
.rate-card .price b{font-size:clamp(52px,14vw,72px);font-weight:800}
.rate-card .price span{font-size:22px;font-weight:700}
.rate-card .monthly{display:inline-block;align-self:flex-start;background:var(--cream);border-radius:999px;padding:6px 18px;font-family:var(--head);font-weight:700;font-size:20px}
.rate-card .small{font-size:15px;font-weight:700}
.effective{margin-top:18px;font-weight:700;font-size:16px;color:var(--purple-2)}
.rate-notes{display:grid;grid-template-columns:1fr;gap:24px;margin-top:40px}
.rate-notes>div{border:3px dashed var(--purple-2);border-radius:24px;padding:24px}
.rate-notes h3{font-size:26px;margin-bottom:8px}
.rate-notes p{font-size:17px}
.rates-band-end{background:none;padding:0 0 64px}
.rates-band-end .rates{transform:none}
@media (min-width:640px){
  .rate-cards{grid-template-columns:1fr 1fr}
  .rate-card{padding:36px}
}
@media (min-width:960px){
  .page-hero-text{padding:30px 20px 220px}
  .page-hero-text .lead{font-size:20px}
  .rate-cards{gap:32px}
  .rate-notes{grid-template-columns:repeat(3,1fr)}
  .rates-band-end{padding-bottom:100px}
}

/* ===== team page (team.html) ===== */
.team{display:grid;grid-template-columns:1fr;gap:28px}
.member{border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.member.sky{background:var(--sky)} .member.lime{background:var(--lime-soft)} .member.lav{background:var(--lav)}
.member-photo{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:4px dashed var(--cream)}
.member-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px}
.member-body .hand{font-size:22px}
.member-body h3{font-size:32px}
.member-body h3 small{font-family:var(--body);font-size:16px;font-weight:700;background:var(--cream);border-radius:999px;padding:2px 10px;vertical-align:middle;white-space:nowrap}
.member-body p{font-size:16px;font-weight:600}
.member details p{margin-top:12px}
.member summary{cursor:pointer;font-family:var(--head);font-weight:700;font-size:18px;padding:8px 0;list-style:none}
.member summary::-webkit-details-marker{display:none}
.member summary::after{content:" →"}
.member details[open] summary::after{content:" ↑"}
.staff{display:flex;flex-direction:column;gap:24px}
.staff .sec-head{margin-bottom:0}
.staff-text{display:flex;flex-direction:column;gap:16px;max-width:760px}
.team-end{height:70px;background:var(--cream)}
@media (min-width:640px){
  .team{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .team{grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
  .team-end{height:100px}
}

/* ===== privacy page (privacy.html) ===== */
.policy{max-width:860px;display:flex;flex-direction:column;gap:32px}
.policy p{font-size:17px}
.policy-intro{display:flex;flex-direction:column;gap:14px}
.policy-intro p:first-child{font-size:19px;font-weight:600}
.policy-badge{align-self:flex-start;background:var(--lime-soft);border-radius:16px;padding:10px 18px;font-weight:700}
.policy-list{display:flex;flex-direction:column;gap:18px}
.policy-item{border:3px dashed var(--purple-2);border-radius:24px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.policy-item:nth-child(3n+1){border-color:var(--sky);background:rgba(191,227,242,.25)}
.policy-item:nth-child(3n+2){border-color:var(--lime-2);background:rgba(215,238,143,.25)}
.policy-item:nth-child(3n+3){border-color:var(--purple-2);background:rgba(238,230,248,.5)}
.policy h2{font-size:clamp(24px,5.5vw,30px)}
.policy ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.policy li{font-size:17px}
.policy-contact{background:var(--purple);color:var(--cream);border-radius:28px;padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.policy-contact p{color:var(--lav-text)}
.policy-contact address{font-style:normal;font-size:17px;line-height:1.8}
.policy-contact a{color:var(--lime)} .policy-contact a:hover{color:var(--cream)}
.foot-links a[aria-current="page"]{text-decoration:none}
@media (min-width:960px){
  .policy-item{padding:28px 32px}
  .policy-contact{padding:36px 40px}
}

/* ===== communication page (communication.html) ===== */
.comm-cards{display:grid;grid-template-columns:1fr;gap:24px}
.comm-cards .rate-card{gap:12px}
.comm-cards .rate-card p{font-size:17px;font-weight:600}
.comm-chips{margin-top:6px}
.comm-chips span{font-size:17px;padding:6px 16px}
.comm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
@media (min-width:640px){.comm-cards{grid-template-columns:1fr 1fr}}

/* ===== waitlist callout (home contact section + rates page) ===== */
.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}
.waitlist{position:relative;background:var(--cream);border:3px dashed var(--purple-2);border-radius:24px;padding:30px 22px 24px;margin-top:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.waitlist-tag{position:absolute;top:-16px;left:18px;background:var(--lime);color:var(--purple);font-family:var(--hand);font-size:20px;line-height:1;padding:7px 14px;border-radius:999px;transform:rotate(-3deg)}
.waitlist h3{font-size:28px}
.waitlist p{font-size:17px}
.waitlist .pill{margin-top:4px}
.waitlist-wide{margin-top:36px}
.waitlist-owl{position:absolute;top:-44px;right:18px;width:auto;height:84px;transform-origin:50% 100%;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(59,33,96,.15));pointer-events:none}
.waitlist h3,.waitlist p{padding-right:64px}
@media (min-width:640px){
  .waitlist-wide{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:24px;padding:34px 40px 30px}
  .waitlist-wide h3{flex-basis:100%}
  .waitlist-wide p{flex:1 1 320px}
  .waitlist-wide .waitlist-owl{height:100px;top:-54px;right:32px}
  .waitlist-wide .pill{margin-top:0}
}

/* animations */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.marquee,.hero-owl .owl,.clouds,.waitlist-owl{animation:none}}

/* ===== tablet ===== */
@media (min-width:640px){
  .wrap{padding:0 28px}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .form-row{grid-template-columns:1fr 1fr}
  form.card{padding:34px}
  .rates{flex-direction:row;align-items:center;justify-content:space-between;padding:36px 40px}
}

/* ===== desktop ===== */
@media (min-width:960px){
  .menu-btn{display:none}
  .nav{padding:22px 0}
  .brand img{height:52px}
  .brand b{font-size:22px} .brand i{font-size:20px}
  .nav-links,.nav-links.open{display:flex;position:static;flex-direction:row;align-items:center;gap:2px;box-shadow:none;padding:6px 6px 6px 16px;border-radius:999px}
  .nav-links a{padding:10px 12px;font-size:17px;border-radius:999px}
  .nav-links .pill{display:inline-flex;margin:0 0 0 8px;min-height:46px;font-size:16px;padding:0 22px}
  .hero{padding-bottom:0}
  .hero-grid{flex-direction:row-reverse;text-align:left;align-items:flex-end;gap:24px;padding-top:20px}
  .hero-text{align-items:flex-start;flex:1 1 50%;padding-bottom:190px}
  .hero-owl{flex:1 1 50%;width:auto;max-width:560px;margin-bottom:130px}
  .hero-owl .owl{width:64%}
  .btn-row{justify-content:flex-start}
  .hero p.lead{font-size:20px}
  .hills{height:200px}
  .sec{padding:100px 0}
  .about{flex-direction:row;gap:64px}
  .about .badge{flex:none}
  .programs{grid-template-columns:1fr 1fr;gap:32px}
  .ticket{flex-direction:row}
  .ticket-photo{flex:1 1 45%;aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:4px dashed var(--cream)}
  .ticket-body{flex:1 1 55%;padding:32px}
  .dark{border-radius:80px 80px 0 0}
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .rates{transform:translateY(60px)}
  .contact-sec{padding:150px 0 90px}
  .contact{flex-direction:row;gap:56px}
  .contact-info{flex:1 1 40%}
  form.card{flex:1 1 60%}
  footer{padding:48px 0 36px}
  .foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .foot small{flex-basis:100%}
  .mobile-bar{display:none}
}