/* Consistent layout layer – preserves the existing cheerful palette and content. */
:root {
  --primary: #e879a7;
  --secondary: #d4a5c7;
  --hero-bg: #edf7ff;
  --nav-background: #ffd659;
  --foreground: #31313a;
  --muted-foreground: #626273;
  --border: #eadfd9;
  --surface: #ffffff;
  --surface-soft: #fffaf4;
  --container-max-width: 1120px;
  --section-padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
  --radius: 0.85rem;
  --radius-lg: 1.25rem;
}

html { scroll-behavior: smooth; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; transform: translateY(-200%); padding: .75rem 1rem; background: #fff; color: #31313a; border: 2px solid #245d80; border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); }
body { background: var(--surface-soft); color: var(--foreground); }
body, button, input, textarea, select { font-family: "Inter", system-ui, sans-serif; }
.container, .nav-container { width: min(100% - 2.5rem, var(--container-max-width)); margin-inline: auto; padding-inline: 0; }

/* Header and navigation */
.top-logo { transform: none !important; width: min(100% - 2.5rem, 450px); aspect-ratio: 594 / 125; overflow: hidden; margin: 1rem auto !important; text-align: center; }
.top-logo img { display: block; width: 100% !important; height: auto; margin: 0 auto; transform: translateY(-32%); opacity: 1 !important; animation: none !important; }
.navbar { background: var(--nav-background) !important; border: 0; box-shadow: 0 3px 14px rgba(90, 60, 20, .12); }
.nav-content { min-height: 4.25rem; height: auto; justify-content: center; }
.desktop-nav { justify-content: center; gap: clamp(1rem, 3vw, 2.25rem); flex-wrap: wrap; padding: .6rem 0; }
.nav-link { color: #3f3731; font-weight: 700; padding: .45rem 0; }
.nav-link:hover, .nav-link.active, .mobile-nav-link.active { color: #c75388; }
.btn { border-radius: 999px; font-weight: 700; box-shadow: 0 4px 10px rgba(186, 88, 137, .22); }
.btn-primary { background: #a43d6b; color: #fff; }
.btn-primary:hover { background: #873057; transform: translateY(-1px); }
.btn-outline { color: #873057; border-color: #a43d6b; background: transparent; }
.btn-outline:hover { color: #fff; background: #873057; }
:focus-visible { outline: 3px solid #245d80; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Shared rhythm */
h1, h2, h3 { color: var(--foreground); line-height: 1.2; }
.page-header { padding: clamp(2.75rem, 6vw, 4.5rem) 1.25rem 2.5rem; background: linear-gradient(180deg, var(--hero-bg), #fffaf4); }
.page-header h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 850px; margin-inline: auto; }
.page-header p { max-width: 680px; margin: .75rem auto 0; }

/* Start page */
.hero { padding: clamp(2rem, 4vw, 3.25rem) 0; background: var(--hero-bg); }
.hero-content { max-width: 960px; }
.hero-text { margin-bottom: 1.25rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 850px; margin-inline: auto; }
.hero-text p { max-width: 680px; margin: 1rem auto 0; font-size: clamp(1rem, 2vw, 1.18rem); }
.kind4 { display: block; width: min(100%, 760px) !important; height: auto !important; margin: 1.75rem auto 0 !important; border-radius: var(--radius-lg); box-shadow: 0 14px 35px rgba(67, 80, 95, .16); }
.hero-subtitle { margin: 1.75rem 0; }
.hero-subtitle p:first-child { font-size: 1.3rem; }
.hero-buttons { margin-top: 1.5rem; }
.hero-separator { margin-inline: .3rem; }
.parent-questions { padding: var(--section-padding); background: #fff; }
.parent-questions h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.parent-questions > .container > p { max-width: 800px; }
.parent-questions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.parent-questions-grid article { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.parent-questions-grid h3 { margin-bottom: .8rem; }
.parent-questions a:not(.btn) { color: #873057; }
.hero-intro { width: min(100% - 2.5rem, 960px); margin: 2.25rem auto 0; padding: 2rem; border: 1px solid #d9ebf7; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 10px 28px rgba(90, 126, 150, .09); text-align: center; }
.hero-intro-text { font-size: 1.15rem; }
.hero-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.hero-feature-item { display: flex; align-items: center; gap: .65rem; text-align: left; padding: 1rem; border-radius: .85rem; background: #fff7cf; }
.hero-feature-item .icon { font-size: 1.45rem; }
.approach { padding: var(--section-padding); background: transparent; }
.approach-content { max-width: 960px; margin-inline: auto; }
.approach-content h2, .contact-cta h2 { font-size: clamp(1.8rem, 4vw, 2.65rem); }
.approach-content > h2 { margin-bottom: 2rem; }
.approach-item { margin-bottom: 1.2rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(89, 68, 59, .06); }
.approach-item h3, .target-group-card h3 { color: #c75388; }
.approach-heart { padding: 1.6rem; }
.approach-heart + p { text-align: center; margin-top: 1.4rem; }
.approach a, .footer a { color: #b64b7d; font-weight: 700; }

/* Services page */
.slideshow-container { width: min(100% - 2.5rem, 900px) !important; margin: 2rem auto 0 !important; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 30px rgba(89, 68, 59, .1); }
.mySlides img { display: block; width: 100%; height: clamp(260px, 48vw, 520px) !important; object-fit: contain !important; border-radius: var(--radius-lg); }
.prev, .next { background: rgba(49,49,58,.64); border-radius: 999px; margin: 0 .8rem; }
.services-detail { padding: var(--section-padding); }
.service-detail-card, .target-group-card, .location-card, .contact-info-card, .contact-form-card { border-color: var(--border); box-shadow: 0 9px 24px rgba(89, 68, 59, .06); }
.service-detail-card { max-width: 960px; margin: 0 auto 3.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.target-groups-section, .service-locations, .process-section { max-width: 960px; margin: 4rem auto; }
.target-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.locations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.location-card { padding: 1.6rem; }
.process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }

/* Contact page */
.contact-section { padding: var(--section-padding); }
.contact-grid { max-width: 1000px; margin-inline: auto; gap: 1.5rem; }
.contact-info-card, .contact-form-card { padding: clamp(1.4rem, 3vw, 2.25rem); }
.form-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-detail-item { padding: .3rem 0; }
.form-hint { margin-bottom: 1.25rem; color: var(--muted-foreground); font-size: .95rem; }
.checkbox-label { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.6; }
.checkbox-label input[type="checkbox"] { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .3rem; accent-color: #a43d6b; }
.checkbox-label span { min-width: 0; }
.checkbox-label a { color: #873057; text-decoration: underline; }
.form-status:not(:empty) { padding: 1rem; border-radius: var(--radius); margin-block: 1rem; background: #edf7ff; }
.form-status-error:not(:empty) { color: #821f2c; background: #fff0f1; border: 1px solid #cf8f96; }
.form-status-success:not(:empty) { color: #205538; background: #edf8f0; border: 1px solid #82b994; }
.map-section { padding: var(--section-padding); }
.map-placeholder { min-height: 230px; padding: 2rem; }

/* Team page */
.team-intro-section { padding: var(--section-padding); }
.intro-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.intro-text { font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.8; }
.intro-image-wrapper { display: grid; grid-template-columns: 1fr minmax(180px, 350px) 1fr; align-items: center; gap: .8rem; }
.team-name { position: static !important; font-size: clamp(1rem, 2vw, 1.2rem); text-align: center; color: #b64b7d; }
.team-photo { width: 100%; max-width: 350px; box-shadow: 0 12px 28px rgba(89, 68, 59, .16); }
.team-video-wrapper { width: min(100%, 900px); margin: 4rem auto 0; text-align: center; }
.video-container { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 30px rgba(89,68,59,.13); }
.team-video { display: block; width: 100%; height: auto; }

/* Footer */
.contact-cta { padding: var(--section-padding); background: #fff2f7; }
.footer { padding: 3.5rem 1.25rem 1.5rem; background: #423f46; color: #fff; }
.footer-grid { width: min(100%, var(--container-max-width)); margin-inline: auto; gap: 2rem; }
.footer h3, .footer h4, .footer p, .footer a { color: #fff; }
.footer a:hover { color: #ffd659; }
.footer-bottom { width: min(100%, var(--container-max-width)); margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.2); }

@media (max-width: 760px) {
  .top-logo { margin: 1rem auto .75rem !important; }
  .top-logo img { max-width: none !important; }
  .nav-content { justify-content: space-between; }
  .desktop-nav { display: none; }
  .mobile-menu-btn { display: block; }
  .mobile-nav { width: 100%; }
  .hero-features, .target-groups-grid, .contact-grid, .intro-grid, .parent-questions-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .locations-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-image-wrapper { grid-template-columns: 1fr; }
  .team-name.left { order: 1; }
  .team-photo { order: 2; margin-inline: auto; }
  .team-name.right { order: 3; }
  .contact-info { flex-direction: column; align-items: center; gap: .85rem; }
}

@media (max-width: 430px) {
  .container, .nav-container { width: min(100% - 2rem, var(--container-max-width)); }
  .hero-intro, .slideshow-container { width: min(100% - 2rem, 960px); }
  .process-steps { grid-template-columns: 1fr; }
  .page-header h1, .hero h1 { font-size: 2rem; }
}