:root { --clr-pop-pink: #EF476F; --clr-bright-teal: #00C4B5; --clr-sunny-yell: #FFD166; --clr-deep-navy: #2B2D42; --clr-soft-wht: #F8F9FA; --font-body: 'Nunito', sans-serif; --font-mono: 'Space Mono', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--clr-deep-navy); background-color: var(--clr-soft-wht); line-height: 1.6; } img { width: 100%; height: auto; object-fit: cover; } a { color: var(--clr-pop-pink); text-decoration: none; } .sprout-top-nav { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); border-bottom: 2px solid var(--clr-bright-teal); } .sprout-logo-txt { font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; color: var(--clr-bright-teal); } .sprout-nav-links { display: flex; gap: 2rem; align-items: center; } .sprout-nav-links a { color: var(--clr-deep-navy); font-weight: 600; transition: color 0.3s; } .sprout-nav-links a:hover { color: var(--clr-bright-teal); } .sprout-btn-nav { background: var(--clr-sunny-yell); padding: 0.5rem 1.2rem; border-radius: 20px; color: var(--clr-deep-navy) !important; font-weight: 700; } .sprout-mono-title { font-family: var(--font-mono); font-weight: 700; margin-bottom: 1rem; line-height: 1.2; } .sprout-mono-sm { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; } .sprout-btn-primary { display: inline-block; background: var(--clr-pop-pink); color: #fff !important; padding: 1rem 2rem; border-radius: 30px; font-weight: 700; border: none; cursor: pointer; transition: transform 0.2s; font-family: var(--font-body); font-size: 1rem; } .sprout-btn-primary:hover { transform: translateY(-3px); } .sprout-hero-asym { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; padding: 8vw 5%; gap: 4vw; } .sprout-hero-sub { font-size: 1.2rem; margin-bottom: 2rem; } .sprout-hero-img-box img { border-radius: 20px 0 60px 0; box-shadow: -15px -15px 0px var(--clr-bright-teal); } .sprout-story-deep { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4vw; padding: 6vw 5%; background: #fff; align-items: center; } .sprout-story-fig img { border-radius: 50%; border: 8px solid var(--clr-sunny-yell); } .sprout-inline-link { text-decoration: underline; text-decoration-color: var(--clr-bright-teal); text-decoration-thickness: 2px; } .sprout-stat-highlight { background: var(--clr-sunny-yell); font-weight: 700; padding: 0 0.3rem; } .sprout-perks-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 6vw 5%; background: var(--clr-bright-teal); align-items: center; } .sprout-perk-card { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .sprout-perk-2 { transform: translateY(20px); } .sprout-perk-3 { transform: translateY(-15px); } .sprout-perks-img img { border-radius: 12px; border: 4px solid #fff; } .sprout-care-options { padding: 6vw 5%; background: var(--clr-soft-wht); } .sprout-ctr { text-align: center; margin-bottom: 3rem; } .sprout-options-grid { display: flex; gap: 3rem; justify-content: center; margin-bottom: 4rem; flex-wrap: wrap; } .sprout-srv-card { background: #fff; width: 300px; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; padding-bottom: 1.5rem; } .sprout-srv-card img { height: 200px; margin-bottom: 1rem; } .sprout-faq-zone { max-width: 700px; margin: 0 auto; } .sprout-faq-item { margin-bottom: 1rem; border: 2px solid var(--clr-deep-navy); border-radius: 8px; overflow: hidden; } .sprout-faq-btn { width: 100%; text-align: left; background: #fff; border: none; padding: 1.2rem; font-family: var(--font-mono); font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--clr-deep-navy); } .sprout-faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fff; } .sprout-faq-panel p { padding: 0 1.2rem 1.2rem; } .sprout-happy-parents { padding: 6vw 5%; background: var(--clr-sunny-yell); } .sprout-review-masonry { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .sprout-review-box { background: #fff; padding: 2rem; border-radius: 16px; position: relative; } .sprout-offset-rev { transform: translateY(30px); } .sprout-reviewer-pic { width: 60px; height: 60px; border-radius: 50%; position: absolute; top: -30px; left: 20px; border: 3px solid var(--clr-pop-pink); } .sprout-booking-zone { padding: 8vw 5%; background: #fff; } .sprout-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 2rem; } .sprout-inp, .sprout-txt-area { width: 100%; padding: 1rem; margin-bottom: 1.5rem; border: 2px solid #eee; border-radius: 8px; font-family: var(--font-body); font-size: 1rem; } .sprout-txt-area { height: 150px; resize: vertical; } .sprout-hours-box { background: var(--clr-soft-wht); border-radius: 16px; overflow: hidden; } .sprout-hours-box img { height: 250px; } .sprout-hours-txt { padding: 2rem; } .sprout-tiny-disclaimer { font-size: 0.8rem; color: #777; text-align: center; } .sprout-foot { background: var(--clr-deep-navy); color: #fff; padding: 4vw 5% 2vw; } .sprout-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .sprout-foot a { color: var(--clr-bright-teal); } .sprout-foot-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; font-size: 0.9rem; } @media (max-width: 900px) { .sprout-hero-asym, .sprout-story-deep, .sprout-contact-layout { grid-template-columns: 1fr; } .sprout-perks-wrap { grid-template-columns: 1fr; } .sprout-perk-2, .sprout-perk-3 { transform: none; } .sprout-nav-links { display: none; } .sprout-offset-rev { transform: none; } }