/* =====================================================================
   PLAYFUL THEME — bright and child-centric. Logo colours + sunshine extras.
   Loaded after style.css and overrides it.
   ===================================================================== */
:root {
  --sun: #FFC233; --sun-soft: #FFF3C9;
  --orange: #FF8A3D; --orange-soft: #FFE6D3;
  --sky: #3DB8F0; --sky-soft: #DDF3FF;
  --purple: #8E63D8; --purple-soft: #EEE6FF;
  --mint: #2FCB97; --mint-soft: #DCF8EC;
  --pink-soft2: #FFE3EE;
  --head: 'Baloo 2', 'Poppins', 'Mukta', system-ui, sans-serif;
}
body { background: #FFF4C2; }
h1, h2, h3, .facts strong, .btn, .eyebrow, .nav a, .mobile-nav a { font-family: var(--head); }
h1, h2 { font-weight: 800; letter-spacing: -.01em; }
h3 { font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* coloured section backgrounds that cycle down the page, each with a wavy top edge */
main > section.block { position: relative; background: var(--sec, #FFFBF0); }
main > section.block:nth-of-type(6n+1) { --sec: #FFEE9E; --ink2: #A86B00; }
main > section.block:nth-of-type(6n+2) { --sec: #BFE8FF; --ink2: #1366A0; }
main > section.block:nth-of-type(6n+3) { --sec: #FFCFE1; --ink2: #B8235A; }
main > section.block:nth-of-type(6n+4) { --sec: #BDF2D9; --ink2: #0E7350; }
main > section.block:nth-of-type(6n+5) { --sec: #DCCBFF; --ink2: #5B37A0; }
main > section.block:nth-of-type(6n+6) { --sec: #FFD5B3; --ink2: #B4510F; }
main > section.block::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 36px; z-index: 2; background: var(--sec);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'%3E%3Cpath d='M0 36V18C100 0 200 0 300 18S500 36 600 18 800 0 900 18 1100 36 1200 18V36Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'%3E%3Cpath d='M0 36V18C100 0 200 0 300 18S500 36 600 18 800 0 900 18 1100 36 1200 18V36Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* scattered doodles: star, cloud, dots, squiggle */
main > section.block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFC233' d='M12 1l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.1 5.6 20.6 7 13.5l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") left 3% top 42px / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Cpath fill='%23ffffff' stroke='%233DB8F0' stroke-width='2.5' d='M16 34h34a12 12 0 0 0 0-24 16 16 0 0 0-30-2A13 13 0 0 0 16 34z'/%3E%3C/svg%3E") right 4% top 36px / 74px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23EB5688'/%3E%3Ccircle cx='30' cy='14' r='4' fill='%232FCB97'/%3E%3Ccircle cx='14' cy='32' r='3.5' fill='%238E63D8'/%3E%3C/svg%3E") left 5% bottom 46px / 46px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath fill='none' stroke='%23FF8A3D' stroke-width='4' stroke-linecap='round' d='M3 10q8-12 16 0t16 0 16 0 16 0 10 0'/%3E%3C/svg%3E") right 5% bottom 52px / 70px no-repeat;
}
main > section.block > .wrap { position: relative; z-index: 1; }
@media (max-width: 700px) { main > section.block::after { opacity: .55; background-size: 22px, 52px, 34px, 50px; } }

/* sticker-style eyebrows in rotating colours */
.eyebrow { display: inline-flex; background: var(--pink); color: #fff; padding: 5px 14px 4px; border-radius: 999px; transform: rotate(-2deg); box-shadow: 0 3px 0 rgba(0,0,0,.12); letter-spacing: .04em; }
.eyebrow svg { display: none; }
main > section.block:nth-of-type(6n+2) .eyebrow { background: var(--sky); }
main > section.block:nth-of-type(6n+3) .eyebrow { background: var(--purple); }
main > section.block:nth-of-type(6n+4) .eyebrow { background: var(--orange); }
main > section.block:nth-of-type(6n+5) .eyebrow { background: var(--green); }
main > section.block:nth-of-type(6n+6) .eyebrow { background: var(--blue); }
/* crayon squiggle under centred headings */
.center h2::after { content: ""; display: block; width: 120px; height: 14px; margin: 10px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath fill='none' stroke='%23FFC233' stroke-width='5' stroke-linecap='round' d='M4 8q10-8 20 0t20 0 20 0 20 0 20 0 12 0'/%3E%3C/svg%3E") center / contain no-repeat; }

/* chunky, bouncy buttons */
.btn { border-radius: 18px; font-weight: 700; font-size: 1.05rem; box-shadow: 0 5px 0 rgba(0,0,0,.18); transition: transform .12s, box-shadow .12s, background .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,.18); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn-outline { background: #fff; border-width: 3px; }
.btn-ghost { box-shadow: none; }

/* header: a rainbow ribbon under it */
.site-header { border-bottom: 0; }
.site-header::after { content: ""; display: block; height: 6px;
  background: linear-gradient(90deg, var(--pink) 0 16.6%, var(--orange) 0 33.3%, var(--sun) 0 50%, var(--mint) 0 66.6%, var(--sky) 0 83.3%, var(--purple) 0); }
.nav a { font-weight: 600; font-size: 1.02rem; }
.nav li:nth-child(1) a:hover { background: var(--pink-soft2); color: var(--pink-dark); }
.nav li:nth-child(2) a:hover { background: var(--orange-soft); color: #C2571A; }
.nav li:nth-child(3) a:hover { background: var(--sun-soft); color: #9A6B00; }
.nav li:nth-child(4) a:hover { background: var(--mint-soft); color: #127A58; }
.nav li:nth-child(5) a:hover { background: var(--sky-soft); color: #1676A6; }
.nav li:nth-child(6) a:hover { background: var(--purple-soft); color: #5B37A0; }
.nav li:nth-child(7) a:hover { background: var(--green-soft); color: var(--green-dark); }
.nav a[aria-current="page"] { background: var(--pink); color: #fff; }

/* home hero: brighter, colourful overlay */
.hero::after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(142,99,216,.25) 60%, rgba(35,45,120,.82) 100%); }
.hero h1 .since { color: var(--sun); font-size: .55em; }
.hero h1 .since::before { content: "★ "; }

/* rainbow fact tiles */
.green-band { background: #FFFBF0; padding: 26px 0 30px; }
.facts { gap: 12px; }
.facts div { border: 0; border-radius: 22px; color: #fff; padding: 20px 10px; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.facts div:nth-child(1) { background: var(--pink); transform: rotate(-1.5deg); }
.facts div:nth-child(2) { background: var(--orange); transform: rotate(1deg); }
.facts div:nth-child(3) { background: var(--green); transform: rotate(-1deg); }
.facts div:nth-child(4) { background: var(--sky); transform: rotate(1.5deg); }
.facts div:nth-child(5) { background: var(--purple); transform: rotate(-1deg); }
.facts strong { font-size: 2.1rem; }
@media (max-width: 899px) { .facts div, .facts div:last-child { border-right: 0; border-bottom: 0; } }

/* inner-page banners: bright gradient instead of dark green */
.page-hero { background: linear-gradient(120deg, var(--pink) 0%, var(--purple) 55%, var(--sky) 100%); }
.page-hero img { opacity: .22; mix-blend-mode: luminosity; }
.page-hero .wrap { padding-top: 56px; padding-bottom: 76px; }
.page-hero h1 { text-shadow: 0 3px 0 rgba(0,0,0,.15); }

/* colourful cards */
.card { border: 3px solid var(--pink); border-radius: 26px; transition: transform .2s; }
.cards .card:nth-child(6n+2) { border-color: var(--orange); }
.cards .card:nth-child(6n+3) { border-color: var(--sky); }
.cards .card:nth-child(6n+4) { border-color: var(--green); }
.cards .card:nth-child(6n+5) { border-color: var(--purple); }
.cards .card:nth-child(6n+6) { border-color: var(--sun); }
.cards .card:nth-child(odd) { transform: rotate(-.6deg); }
.cards .card:nth-child(even) { transform: rotate(.6deg); }
.cards .card:hover { transform: rotate(0) translateY(-6px); }
.card h3 { color: var(--pink-dark); font-size: 1.35rem; }
.cards .card:nth-child(6n+2) h3 { color: #D9681F; }
.cards .card:nth-child(6n+3) h3 { color: #1A86BF; }
.cards .card:nth-child(6n+4) h3 { color: var(--green-dark); }
.cards .card:nth-child(6n+5) h3 { color: #6C45B8; }
.cards .card:nth-child(6n+6) h3 { color: #B07A00; }
.photo { border: 6px solid #fff; border-radius: 28px; box-shadow: 0 10px 0 rgba(255,194,51,.55); transform: rotate(-1.2deg); }
.founder .photo, .person .photo { transform: none; }
.founder .photo { box-shadow: 0 10px 0 rgba(235,86,136,.45); }

/* medium cards, branches, panels: playful borders */
.medium { border-radius: 26px; border: 3px solid var(--green); border-top-width: 10px; }
.medium.mr { border-color: var(--blue); }
.medium li span:first-child::before { content: "✿ "; color: var(--pink); }
.branch { border: 3px solid var(--sky); border-radius: 26px; }
.branches .branch:nth-child(2) { border-color: var(--orange); }
.branches .branch:nth-child(3) { border-color: var(--purple); }

/* Instagram posts on the gallery page */
.insta-grid figure { border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.insta-grid figure:nth-child(4n+1) { transform: rotate(-1.5deg); }
.insta-grid figure:nth-child(4n+3) { transform: rotate(1.5deg); }
.insta-grid a { display: block; color: inherit; }
.insta-grid .kind { position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 99px; font-size: .75rem; font-weight: 700; color: #fff; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.panel { border: 3px dashed var(--sky); border-radius: 26px; }
.table-wrap { border: 3px solid var(--purple); border-radius: 22px; }
th { background: var(--purple); }
tbody tr:nth-child(even) td { background: #FAF7FF; }

/* timeline + steps: rainbow dots */
.timeline::before { background: repeating-linear-gradient(180deg, var(--sun) 0 10px, transparent 10px 18px); width: 4px; }
.timeline li:nth-child(6n+1) .dot { background: var(--pink); }
.timeline li:nth-child(6n+2) .dot { background: var(--orange); }
.timeline li:nth-child(6n+3) .dot { background: var(--sun); color: #5a4300; }
.timeline li:nth-child(6n+4) .dot { background: var(--green); }
.timeline li:nth-child(6n+5) .dot { background: var(--sky); }
.timeline li:nth-child(6n+6) .dot { background: var(--purple); }
.timeline img { border: 5px solid #fff; box-shadow: 0 6px 0 rgba(61,184,240,.35); }
.steps li { border: 3px solid var(--sun); border-radius: 24px; }
.steps li:nth-child(2) { border-color: var(--sky); }
.steps li:nth-child(3) { border-color: var(--mint); }
.steps li:nth-child(4) { border-color: var(--purple); }
.steps li:nth-child(2)::before { background: var(--sky); }
.steps li:nth-child(3)::before { background: var(--green); }
.steps li:nth-child(4)::before { background: var(--purple); }

/* FAQ: colourful tabs */
.faq details { border-left: 8px solid var(--pink); border-radius: 16px; }
.faq details:nth-of-type(5n+2) { border-left-color: var(--orange); }
.faq details:nth-of-type(5n+3) { border-left-color: var(--sky); }
.faq details:nth-of-type(5n+4) { border-left-color: var(--green); }
.faq details:nth-of-type(5n+5) { border-left-color: var(--purple); }
.faq h3 { display: inline-block; background: var(--sun); color: #5a4300; padding: 2px 14px; border-radius: 12px; transform: rotate(-1deg); }
.faq summary::after { color: var(--pink); font-weight: 800; }

/* gallery filters as candy pills */
.filters button { font-family: var(--head); font-weight: 700; border-width: 2.5px; }
.filters button:nth-child(2) { border-color: var(--orange); }
.filters button:nth-child(3) { border-color: var(--sky); }
.filters button:nth-child(4) { border-color: var(--green); }
.filters button:nth-child(5) { border-color: var(--purple); }
.filters button[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); }
.gallery figure { border: 4px solid #fff; box-shadow: 0 5px 0 rgba(142,99,216,.3); border-radius: 18px; }
.gallery figure:nth-child(3n+2) { box-shadow: 0 5px 0 rgba(255,138,61,.35); }
.gallery figure:nth-child(3n+3) { box-shadow: 0 5px 0 rgba(47,203,151,.35); }

/* CTA: rainbow band with confetti */
.cta-band { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cg opacity='.5'%3E%3Ccircle cx='12' cy='18' r='5' fill='%23FFC233'/%3E%3Ccircle cx='180' cy='24' r='6' fill='%23ffffff'/%3E%3Ccircle cx='160' cy='100' r='4' fill='%23FFC233'/%3E%3Ccircle cx='30' cy='96' r='4' fill='%23ffffff'/%3E%3Cpath d='M100 8l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") center / 260px repeat,
  linear-gradient(110deg, var(--pink) 0%, var(--orange) 50%, var(--sun) 100%);
  border-radius: 34px; box-shadow: 0 10px 0 rgba(142,99,216,.35); }
.cta-band h2 { text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.cta-band .btn-green { color: var(--pink-dark); }

/* footer: rainbow ribbon on top */
.site-footer { border-top: 8px solid transparent;
  border-image: linear-gradient(90deg, var(--pink), var(--orange), var(--sun), var(--mint), var(--sky), var(--purple)) 1; }
.site-footer h3 { color: var(--sun); }

/* small touches */
.lead { color: #514b4e; }
.tick-list li::before { background-color: var(--sun-soft); }
.todo, .todo-box { border-color: var(--purple); background: var(--purple-soft); color: #5B37A0; }

/* vary the doodles: mirror them on every other section */
main > section.block:nth-of-type(even)::after { transform: scaleX(-1); }

/* brighter: headings take a deep shade of their section colour */
main > section.block h2 { color: var(--ink2, var(--ink)); }
.green-band { background: #FFF4C2; }
.page-hero .wrap { z-index: 2; }