:root {
  --ink: #26364a;
  --muted: #5f6b7c;
  --cream: #fff9f1;
  --surface: #fffdf9;
  --coral: #c34e44;
  --coral-soft: #f7d8d2;
  --yellow: #fff0c2;
  --blue: #d8efed;
  --lavender: #e5e0f7;
  --line: #e8e1d8;
  --deep-lavender: #625b8e;
  --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
.brand-mark svg { width: 20px; height: 20px; fill: currentColor; }
.button svg, .site-shell .btn svg, .text-link svg, .phone-link svg, .nav-cta svg { width: 18px; height: 18px; }
.floating-pill svg { width: 17px; height: 17px; fill: currentColor; }
.menu-button svg { width: 26px; height: 26px; }
.activity-icon svg { width: 27px; height: 27px; }
.footer-social svg { width: 19px; height: 19px; }
.site-shell { overflow: hidden; }
.site-shell img,
.site-shell svg { max-width: 100%; }
.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: auto; padding: 25px 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 24px; line-height: .78; letter-spacing: -.06em; }
.brand-mark { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 14px 14px 14px 4px; background: var(--coral); color: white; transform: rotate(-8deg); box-shadow: 4px 4px 0 #a84038; }
.brand strong { font-weight: 900; }.brand em { color: var(--coral); font-style: normal; font-weight: 900; }.brand small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 13px; font-weight: 700; }.main-nav a { transition: color .2s, transform .2s; }.main-nav a:hover { color: var(--coral); transform: translateY(-2px); }.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; background: var(--ink); color: white !important; border-radius: 999px; }.menu-button { display: none; border: 0; background: none; color: var(--ink); }
.hero { position: relative; display: flex; min-height: 735px; padding: 150px max(32px, calc((100vw - 1176px) / 2)) 80px; background: #e8f7f6; }.hero-copy { position: relative; z-index: 2; width: 52%; padding-top: 48px; }.eyebrow,.section-label { display: flex; align-items: center; gap: 9px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.eyebrow span { width: 28px; height: 3px; background: var(--coral); border-radius: 3px; }.hero h1 { margin: 18px 0 22px; color: var(--ink); font-size: clamp(48px, 6vw, 82px); font-weight: 900; letter-spacing: -.075em; line-height: .94; }.hero h1 span, h2 span { color: var(--coral); }.hero-text { max-width: 445px; color: var(--muted); font-size: 17px; line-height: 1.65; }.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 30px; }.button { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 15px 21px; font-size: 13px; font-weight: 800; transition: transform .2s, box-shadow .2s; }.button:hover { transform: translateY(-3px); }.button-primary { background: var(--coral); color: white; box-shadow: 0 5px 0 #dc6157; }.button-dark { background: var(--ink); color: white; box-shadow: 0 5px 0 #172433; }.button-quiet { color: var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; }.button-quiet span { color: var(--coral); font-size: 20px; }.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 55px; color: var(--muted); font-size: 12px; font-weight: 700; }.note-dots { color: var(--yellow); letter-spacing: 4px; }.hero-art { position: relative; width: 48%; min-height: 470px; }.playground-card { position: absolute; z-index: 2; right: 8%; top: 36px; width: min(440px, 90%); height: 410px; overflow: hidden; border: 10px solid white; border-radius: 47% 47% 45% 44%; background: #f8dcae; box-shadow: 11px 13px 0 rgba(38,54,74,.1); }.playground-sun { position: absolute; top: 34px; right: 52px; width: 59px; height: 59px; border-radius: 50%; background: var(--yellow); }.playground-hill { position: absolute; bottom: -67px; border-radius: 50% 50% 0 0; }.hill-one { left: -35px; width: 360px; height: 230px; background: #9dce8f; }.hill-two { right: -40px; width: 330px; height: 200px; background: #70b6aa; }.tree { position: absolute; z-index: 2; bottom: 105px; left: 50px; width: 65px; height: 148px; }.tree span { position: absolute; bottom: 0; left: 28px; height: 82px; width: 10px; background: #976b4d; }.tree b,.tree i { position: absolute; border-radius: 50%; background: #65aa7b; }.tree b { left: 0; top: 13px; width: 65px; height: 65px; }.tree i { right: -14px; top: 48px; width: 49px; height: 49px; background: #82bd73; }.kite { position: absolute; top: 70px; left: 44%; color: var(--coral); font-size: 43px; transform: rotate(45deg); }.child { position: absolute; z-index: 4; bottom: 68px; width: 80px; height: 158px; }.child-one { left: 37%; }.child-two { right: 19%; bottom: 60px; }.child .head { position: absolute; left: 17px; top: 0; width: 49px; height: 49px; border-radius: 50%; background: #a96f51; }.child-two .head { background: #e7b379; }.child .body { position: absolute; top: 43px; left: 7px; width: 68px; height: 73px; border-radius: 42% 42% 18% 18%; background: var(--coral); }.child-two .body { background: var(--blue); }.child .leg { position: absolute; top: 108px; width: 13px; height: 58px; background: #42536a; border-radius: 0 0 12px 12px; }.child .left { left: 23px; transform: rotate(5deg); }.child .right { right: 21px; transform: rotate(-5deg); }.flower { position: absolute; z-index: 4; bottom: 50px; color: var(--yellow); font-size: 28px; }.flower-one { left: 25%; }.flower-two { right: 7%; color: var(--coral); }.floating-pill { position: absolute; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 20px; background: white; color: var(--ink); box-shadow: 0 8px 20px rgba(38,54,74,.12); font-size: 12px; font-weight: 800; }.pill-heart { right: 0; top: 80px; color: var(--coral); transform: rotate(4deg); }.pill-star { bottom: 78px; left: 9%; color: #ce9e13; transform: rotate(-6deg); }.blob { position: absolute; border-radius: 50%; opacity: .85; }.blob-yellow { top: 3px; left: 6%; width: 75px; height: 75px; background: var(--yellow); }.blob-coral { bottom: 33px; right: 7%; width: 70px; height: 70px; background: var(--coral); }.blob-blue { top: 40%; left: 2%; width: 37px; height: 37px; background: var(--lavender); }.hero-cloud { position: absolute; color: white; opacity: .85; }.hero-cloud svg { width: 70px; height: 70px; fill: white; stroke: #cfe9e5; stroke-width: 1; }.cloud-one { top: 140px; left: 6%; }.cloud-two { top: 75px; right: 11%; transform: scale(.65); }.sun-shape { position: absolute; top: -190px; left: 42%; width: 430px; height: 430px; border-radius: 50%; background: #fff4cb; opacity: .65; }.hero-bottom-shape { position: absolute; bottom: -1px; left: -2%; width: 104%; height: 52px; background: var(--cream); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.section-pad { max-width: 1176px; margin: auto; padding: 115px 32px; }.welcome-section { background: var(--cream); }.welcome-grid,.proposal-section,.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }.welcome-grid { margin-top: 25px; }.welcome-grid h2,h2 { margin: 0; color: var(--ink); font-size: clamp(36px, 4.2vw, 57px); letter-spacing: -.065em; line-height: .98; }.large-copy { margin: 0 0 22px; color: var(--muted); font-size: 18px; line-height: 1.6; }.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--coral); font-size: 13px; font-weight: 800; }.values-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 72px; }.value-card { padding: 26px; border-radius: var(--radius); min-height: 170px; }.value-card span { font-size: 12px; font-weight: 800; opacity: .7; }.value-card h3 { margin: 32px 0 7px; font-size: 20px; letter-spacing: -.03em; }.value-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }.value-coral { background: #fae0d9; }.value-yellow { background: #fff0c2; }.value-blue { background: #d8f0ef; }.proposal-section { align-items: center; background: #fff; border-radius: 44px; }.proposal-illustration { position: relative; min-height: 420px; display: grid; place-items: center; background: #f7d9cf; border-radius: 44% 56% 50% 43%; overflow: hidden; }.proposal-illustration:before,.proposal-illustration:after { content: ''; position: absolute; border-radius: 50%; background: #f4a39a; }.proposal-illustration:before { width: 260px; height: 260px; left: -100px; bottom: -70px; }.proposal-illustration:after { width: 130px; height: 130px; right: -20px; top: 30px; background: #f9c94f; }.circle-note { position: relative; z-index: 2; display: grid; place-content: center; width: 230px; height: 230px; border-radius: 50%; background: #fff8eb; color: var(--ink); font-size: 18px; line-height: 1.1; text-align: center; transform: rotate(-8deg); box-shadow: 8px 10px 0 rgba(38,54,74,.08); }.circle-note strong { color: var(--coral); font-size: 30px; }.doodle { position: absolute; z-index: 3; color: var(--ink); font-size: 45px; }.d-one { left: 18%; top: 19%; color: var(--yellow); }.d-two { right: 13%; bottom: 16%; font-size: 62px; color: var(--blue); }.proposal-copy p { max-width: 480px; margin: 25px 0; color: var(--muted); font-size: 16px; line-height: 1.65; }.proposal-copy ul { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; color: var(--ink); font-size: 13px; font-weight: 700; }.proposal-copy li { display: flex; align-items: center; gap: 9px; }.proposal-copy li svg { padding: 3px; border-radius: 50%; background: #d9f0e3; color: #4e9d73; }
.activities-section { background: #f6eee4; max-width: none; padding-left: max(32px, calc((100vw - 1176px) / 2)); padding-right: max(32px, calc((100vw - 1176px) / 2)); }.section-heading { align-items: end; gap: 30px; }.section-heading > p { max-width: 280px; margin: 0 0 5px; color: var(--muted); line-height: 1.55; font-size: 14px; }.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 55px; }.activity-card { position: relative; min-height: 250px; padding: 27px; border-radius: var(--radius); }.activity-card h3 { margin: 33px 0 12px; font-size: 23px; letter-spacing: -.04em; }.activity-card p { max-width: 200px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }.activity-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 18px 18px 18px 5px; background: rgba(255,255,255,.65); }.activity-card.coral { background: #f7c7bd; }.activity-card.yellow { background: #ffdf89; }.activity-card.blue { background: #bce3e0; }.card-arrow { position: absolute; right: 26px; bottom: 25px; font-size: 26px; }.community-section { background: var(--cream); }.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }.team-card { padding: 20px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: white; }.avatar { position: relative; display: grid; flex: 0 0 104px; width: 104px; height: 104px; margin: 0 auto 20px; place-items: center; border-radius: 50%; font-size: 27px; font-weight: 900; }.avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; border-radius: inherit; }.avatar.coral { background: #f7c7bd; color: #bf625a; }.avatar.blue { background: #bce3e0; color: #428b91; }.avatar.yellow { background: #ffdf89; color: #aa7b18; }.avatar-spark { position: absolute; z-index: 1; right: -4px; bottom: 5px; font-size: 22px; color: white; }.team-card h3 { margin: 0 0 6px; font-size: 17px; }.team-card p { margin: 0; color: var(--muted); font-size: 12px; }.contact-section { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; max-width: none; padding-left: max(32px, calc((100vw - 1176px) / 2)); padding-right: max(32px, calc((100vw - 1176px) / 2)); background: #d9f0ef; }.contact-section h2 { margin-top: 20px; }.contact-actions p { max-width: 370px; margin: 0 0 22px; color: var(--muted); line-height: 1.6; font-size: 15px; }.phone-link { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--ink); font-size: 13px; font-weight: 800; }.contact-cloud { position: absolute; right: 9%; top: 36px; color: rgba(255,255,255,.7); }.contact-cloud svg { width: 110px; height: 110px; fill: white; stroke: #b7dcda; stroke-width: 1; }.site-footer { display: grid; grid-template-columns: 1.7fr 1fr .5fr; gap: 40px; align-items: end; padding: 55px max(32px, calc((100vw - 1176px) / 2)) 25px; background: var(--ink); color: white; }.site-footer .brand { color: white; }.site-footer .brand small { color: #a8b3c0; }.site-footer .brand em { color: #f7c7bd; }.footer-brand p { margin: 18px 0 0; color: #a8b3c0; font-size: 13px; }.footer-links { display: flex; gap: 22px; font-size: 12px; color: #c3ccd5; }.footer-social { display: flex; gap: 9px; justify-content: end; }.footer-social a { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #405064; }.copyright { grid-column: 1/-1; margin: 25px 0 0; padding-top: 15px; border-top: 1px solid #405064; color: #8795a4; font-size: 10px; }
@media (max-width: 760px) { .site-header { padding: 20px 20px; }.brand { font-size: 21px; }.brand-mark { width: 35px; height: 35px; }.menu-button { display: block; z-index: 12; }.main-nav { position: absolute; top: 72px; left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(38,54,74,.16); }.main-nav.is-open { display: flex; }.main-nav a { padding: 13px 12px; }.nav-cta { justify-content: center; margin-top: 6px; }.hero { display: block; min-height: auto; padding: 125px 22px 85px; }.hero-copy { width: 100%; padding-top: 15px; }.hero h1 { font-size: 55px; }.hero-text { font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 13px; }.hero-note { margin-top: 38px; }.hero-art { width: 100%; min-height: 365px; margin-top: 20px; }.playground-card { right: 3%; top: 12px; width: 91%; height: 330px; }.child { transform: scale(.8); transform-origin: bottom; }.hero-cloud { display: none; }.pill-heart { right: -1%; top: 25px; }.pill-star { bottom: 35px; left: 1%; }.section-pad { padding: 75px 22px; }.welcome-grid,.proposal-section,.section-heading,.contact-section { grid-template-columns: 1fr; gap: 28px; }.welcome-grid h2,h2 { font-size: 42px; }.large-copy { font-size: 16px; }.values-row,.activity-grid,.team-grid { grid-template-columns: 1fr; margin-top: 38px; }.value-card { min-height: auto; }.value-card h3 { margin-top: 23px; }.proposal-section { padding: 0 22px 60px; background: white; border-radius: 32px; }.proposal-illustration { min-height: 300px; margin: 0 -22px; }.proposal-copy { padding-top: 5px; }.activities-section { padding-left: 22px; padding-right: 22px; }.section-heading > p { margin: 0; }.activity-card { min-height: 210px; }.community-section .section-heading { gap: 25px; }.contact-section { padding-top: 80px; padding-bottom: 80px; gap: 15px; }.contact-cloud { right: 3%; top: 9px; transform: scale(.65); }.site-footer { grid-template-columns: 1fr; gap: 25px; padding: 45px 22px 23px; }.footer-links { flex-wrap: wrap; }.footer-social { justify-content: start; }.copyright { grid-column: auto; } }

@media (min-width: 761px) and (max-width: 1100px) {
  .hero { min-height: 650px; padding-inline: 32px; }
  .hero-copy { width: 55%; padding-top: 25px; }
  .hero-art { width: 45%; min-height: 410px; }
  .hero h1 { font-size: clamp(48px, 6.5vw, 68px); }
  .playground-card { right: 0; width: 96%; height: 360px; }
  .hero-actions { flex-wrap: wrap; gap: 14px; }
  .welcome-grid, .proposal-section, .section-heading { gap: 42px; }
}

@media (max-width: 420px) {
  .hero { padding-inline: 16px; }
  .hero h1 { font-size: clamp(42px, 14vw, 55px); overflow-wrap: anywhere; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .section-pad, .activities-section, .contact-section { padding-left: 16px; padding-right: 16px; }
  .floating-pill { padding: 9px 12px; }
}

/* Fixed warm-pastel system: neutrals 60%, supporting pastels 30%, coral accents 10%. */
.hero { background: var(--blue); }
.button-primary { background: var(--coral); box-shadow: 0 5px 0 #a84038; }
.button-primary:hover { background: #b94a42; }
.button:focus-visible,
.text-link:focus-visible,
.phone-link:focus-visible,
.site-footer a:focus-visible { outline: 3px solid #f2b84b; outline-offset: 4px; }
.news-section,
.community-section,
.faq-section { background: var(--cream); }
.activities-section { background: #f5ede3; }
.activity-card.coral,
.avatar.coral { background: var(--coral-soft); }
.activity-card.yellow,
.avatar.yellow { background: var(--yellow); }
.activity-card.blue,
.avatar.blue,
.contact-section { background: var(--blue); }
.team-card,
.news-card,
.event-card-new,
.faq-item { background: var(--surface); border-color: var(--line); }
.site-footer { background: var(--deep-lavender); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button,
  .text-link,
  .phone-link,
  .site-footer a { transition: none; }
}
