/* Variables */
:root {
    --teal: #0D4D4D;
    --cream: #FAF3E0; /* Background color */
    --orange: #FFB84D;
    --white: #FFFFFF;
    --text: #1A3A3A;
    --radius-l: 40px;
    --radius-m: 25px;
    --font-head: 'Lexend', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: #FDFBF7;
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-head); cursor: pointer; border: none; }

/* Utilities */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    background: rgba(253, 251, 247, 0.95);
    z-index: 1000;
}

.logo { font-family: var(--font-head); font-size: 1.5rem; color: var(--teal); font-weight: 800; }

.nav-menu { display: flex; gap: 30px; align-items: center; }
.nav-menu a { font-weight: 500; font-size: 0.95rem; }

.btn-pill {
    background: var(--teal);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    transition: transform 0.2s;
}
.btn-pill:hover { transform: scale(1.05); }
.hamburger { display: none; font-size: 1.5rem; cursor: pointer; }

/* Hero Section */
.hero {
    background: #FCEBD1;
    border-radius: var(--radius-l);
    padding: 80px 60px;
    margin-top: 20px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.hero h1 { font-size: 3rem; color: var(--teal); margin-bottom: 20px; line-height: 1.2; }
.hero p { max-width: 500px; margin-bottom: 30px; line-height: 1.6; }

.btn-primary {
    background: var(--teal);
    color: white;
    padding: 15px 35px;
    border-radius: 30px;
    font-size: 1rem;
    transition: 0.3s;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(13,77,77,0.2); }

/* Shapes & Decorations */
.shape { position: absolute; pointer-events: none; }
.shape-star { top: 10%; right: 10%; font-size: 4rem; color: var(--teal); }
.shape-circle { bottom: 20%; right: 15%; width: 50px; height: 50px; background: var(--orange); border-radius: 50%; }
.shape-blob { bottom: -20px; left: -20px; width: 150px; height: 150px; background: #FF8A80; border-radius: 50%; opacity: 0.5; }

/* Split Section (Snack Bar) */
.split-section {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
}
.split-section > div { flex: 1; }
.text-block h2 { font-size: 2.5rem; color: var(--teal); margin-bottom: 20px; }

.image-block {
    height: 400px;
    border-radius: var(--radius-l);
    display: flex;
    justify-content: center;
    align-items: center;
}
.teal-bg { background-color: var(--teal); }
.illustration { font-size: 5rem; }

.btn-outline {
    background: transparent;
    border: 2px solid var(--teal);
    color: var(--teal);
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 20px;
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 80px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

/* Cards */
.card { padding: 40px; border-radius: var(--radius-l); position: relative; transition: transform 0.3s; }
.card:hover { transform: translateY(-10px); }
.bg-orange { background: var(--orange); }
.bg-white { background: white; }
.border { border: 2px solid #EEE; }

.loc-card {
    background: white;
    padding: 30px;
    border-radius: var(--radius-m);
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.tag { display: inline-block; padding: 6px 18px; border-radius: 20px; color: white; font-size: 0.8rem; margin-top: 15px; }
.tag-yellow { background: #F4B400; }
.tag-teal { background: var(--teal); }
.tag-pink { background: #F06292; }

/* Contact */
.contact-section { margin-bottom: 80px; }
.contact-wrapper {
    background: white;
    padding: 60px;
    border-radius: var(--radius-l);
    display: flex;
    gap: 60px;
}
.contact-form { flex: 1.5; }
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 15px;
    background: #f9f9f9;
    font-family: var(--font-body);
}

/* Footer */
.cta-banner {
    background: var(--teal);
    color: white;
    padding: 60px;
    border-radius: var(--radius-l);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta-text h2 { font-size: 2.5rem; }
.btn-white { background: white; color: var(--teal); padding: 15px 35px; border-radius: 30px; font-weight: 700; }
.footer-bottom { text-align: center; padding: 40px 0; opacity: 0.6; }

/* Animations */
.reveal { opacity: 1; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.float-slow { animation: float 4s ease-in-out infinite; }
.float-fast { animation: float 2.5s ease-in-out infinite; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .navbar { padding: 15px 20px; }
    .nav-menu { display: none; } /* Simple hide for mobile, JS can toggle */
    .hamburger { display: block; }
    
    .hero { padding: 40px 20px; margin: 10px; }
    .hero h1 { font-size: 2rem; }
    
    .split-section, .contact-wrapper, .cta-banner { flex-direction: column; padding: 30px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .image-block { height: 250px; }
}