/* =========================================================
   Milestone PRC — Design Refinement Layer
   Additive only. No content / anchor / link changes.

   Goals (anti-slop "taste" pass):
   - Coherent design tokens (one teal accent + one warm pop)
   - Stronger, fluid typography with real hierarchy
   - Softer ink instead of pure black; tinted depth not flat white
   - Consistent surfaces: cards, buttons, inputs, navbar, footer
   - Display type switched to Outfit (already loaded, more character),
     body stays Rubik.
   ========================================================= */

:root {
    /* Brand */
    --c-teal:        #26ABA3;
    --c-teal-deep:   #168078;
    --c-teal-dark:   #0E5F59;
    --c-teal-tint:   #F2FBF9;   /* soft mint surface */
    --c-teal-tint-2: #E6F6F4;
    --c-amber:       #F7AB1E;
    --c-amber-deep:  #E89400;

    /* Neutrals */
    --c-ink:    #233036;        /* primary text (not pure black) */
    --c-ink-2:  #51616B;        /* secondary text */
    --c-line:   #E3EAEC;        /* hairlines / borders */
    --c-white:  #ffffff;

    /* Gradients */
    --g-teal:  linear-gradient(135deg, #2CB8AF 0%, #1E9B93 100%);
    --g-amber: linear-gradient(135deg, #FFB838 0%, #F39B05 100%);

    /* Shadows (tinted to the brand, never flat black) */
    --sh-sm: 0 4px 14px -6px rgba(22, 128, 120, 0.22);
    --sh-md: 0 14px 34px -14px rgba(22, 128, 120, 0.28);
    --sh-lg: 0 26px 56px -18px rgba(22, 128, 120, 0.34);

    /* Radii */
    --r-card: 22px;
    --r-pill: 999px;
}

/* =========================================================
   Base typography & rendering
   ========================================================= */
body {
    color: var(--c-ink);
    background-color: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Outfit", "Poppins", system-ui, sans-serif !important;
    letter-spacing: -0.02em;
    line-height: 1.14;
    text-wrap: balance;
    color: var(--c-ink);
}

p {
    line-height: 1.72;
    text-wrap: pretty;
    color: var(--c-ink-2);
}

a { text-decoration: none; }

::selection {
    background: rgba(38, 171, 163, 0.22);
    color: var(--c-teal-dark);
}

/* Fluid display sizes for the biggest headings (overrides fixed px,
   so they scale smoothly and read with more presence) */
.hero-banner h1 {
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.hero-banner p {
    font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    max-width: 56ch;
    opacity: 0.95;
}
.about-milestone h2,
.about-intro h1,
.enquiry-form h2,
.home-team h2,
.faq-section h2,
.new-home-about h2,
.about-renu h2,
.renu-education h2,
.join h2 {
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem) !important;
    line-height: 1.15;
}
.home-therapies h1 {
    font-size: clamp(1.6rem, 1.05rem + 1.8vw, 2.35rem) !important;
}

/* Eyebrow labels get tasteful tracking + teal */
.about-milestone h6,
.home-team .col-box h6,
.thermal-banner h6 {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* =========================================================
   Navbar — cleaner, floating, subtle depth
   ========================================================= */
.navbar {
    padding: 14px 24px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
            backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 6px 24px -16px rgba(14, 95, 89, 0.5);
    border-bottom: 1px solid rgba(38, 171, 163, 0.10);
}
.navbar .navbar-brand img { transition: transform 0.3s ease; }
.navbar .navbar-brand:hover img { transform: scale(1.03); }
.navbar li a {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
.navbar .dropdown-menu {
    border: 1px solid var(--c-line);
    border-radius: 16px;
    box-shadow: var(--sh-md);
    padding: 8px;
    overflow: hidden;
}
.navbar .dropdown-item {
    border-radius: 10px;
    font-size: 15px;
    padding: 9px 14px;
}

/* =========================================================
   Hero — richer teal field with soft depth
   ========================================================= */
.hero-banner {
    background-color: var(--c-teal) !important;
    background-blend-mode: soft-light, normal;
    background-image:
        radial-gradient(1100px 480px at 78% -10%, rgba(255, 255, 255, 0.18), transparent 60%),
        radial-gradient(900px 420px at 0% 110%, rgba(14, 95, 89, 0.35), transparent 60%),
        url(../Images/Vector1.jpg) !important;
    background-position: center, center, top center !important;
    background-size: cover, cover, cover !important;
    background-repeat: no-repeat !important;
}
.hero-banner .img-1,
.hero-banner .img-2 {
    border-radius: 28px !important;
    box-shadow: var(--sh-lg);
}

/* =========================================================
   Buttons — unified gradient pills with brand depth
   (animation layer adds the sheen + lift on top)
   ========================================================= */
.hero-banner button,
.home-therapies button,
.about-milestone button,
.new-home-about button,
.about-intro button,
.enquiry-form button,
.join button,
.contact-form-page button,
.home-gallery button,
.why-choose button {
    background-image: var(--g-teal) !important;
    background-color: var(--c-teal) !important;
    border-radius: var(--r-pill) !important;
    letter-spacing: 0.01em;
    box-shadow: var(--sh-sm);
}
.hero-banner button:hover,
.home-therapies button:hover,
.about-milestone button:hover,
.new-home-about button:hover,
.about-intro button:hover,
.enquiry-form button:hover,
.join button:hover,
.contact-form-page button:hover,
.home-gallery button:hover {
    background-image: var(--g-amber) !important;
    background-color: var(--c-amber) !important;
}

/* Gallery thumbnails — rounded with a gentle hover lift */
.home-gallery img {
    border-radius: 18px;
    transition: transform 0.5s var(--ms-ease-smooth, ease),
                box-shadow 0.5s ease;
}
.home-gallery img:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
}

/* =========================================================
   Cards (.col-box) — consistent rounded surface + hairline
   ========================================================= */
.home-therapies .col-box,
.home-team .col-box,
.home-testimonial .col-box {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-sm);
    padding: 16px;
}
.home-therapies .col-box h2,
.home-therapies .col-box h5 {
    color: var(--c-ink);
    font-weight: 700;
}
.home-team .col-box h4 { color: var(--c-ink); }
.home-team .col-box h6 { color: var(--c-teal-deep) !important; }

/* Therapy / program info cards (teal-filled) — soften corners + depth */
.our-program .col-box,
.what_is_early_intervention .col-box {
    background-image: var(--g-teal) !important;
    border: none !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh-md);
}

/* =========================================================
   Alternating section surfaces — gentle rhythm, same hue
   (uses the existing soft-mint tone, never a jarring jump)
   ========================================================= */
.home-therapies,
.enquiry-form,
.about-renu,
.why-therapy,
.who-benefit {
    background-color: var(--c-teal-tint) !important;
}

/* =========================================================
   Teal sections — keep text crisp on the deeper field
   ========================================================= */
.home-testimonial,
.therapy-intro,
.thermal-banner {
    background-image:
        radial-gradient(800px 360px at 85% 0%, rgba(255,255,255,0.12), transparent 60%);
    background-color: var(--c-teal) !important;
}
.home-testimonial h2,
.home-testimonial p,
.home-testimonial h6,
.therapy-intro h1,
.therapy-intro p { color: var(--c-white) !important; }
.home-testimonial .col-box p { color: var(--c-ink-2); }
.home-testimonial span { color: var(--c-amber) !important; }

/* =========================================================
   Forms — softer fields, clear focus (focus glow in anim layer)
   ========================================================= */
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea,
.contact-form-page input,
.contact-form-page select,
.contact-form-page textarea {
    border: 1px solid var(--c-line) !important;
    border-radius: 14px !important;
    background: var(--c-white) !important;
    color: var(--c-ink) !important;
}
.enquiry-form input::placeholder,
.contact-form-page input::placeholder,
.enquiry-form textarea::placeholder,
.contact-form-page textarea::placeholder { color: #93A1A8; }

/* =========================================================
   FAQ accordion — rounded, soft separation
   ========================================================= */
.faq-section .accordion-header,
.faq-section-therapies .accordion-header {
    border: 1px solid var(--c-line) !important;
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 12px;
}
.faq-section .accordion-button,
.faq-section-therapies .accordion-button {
    border-radius: 14px !important;
    color: var(--c-ink);
}

/* =========================================================
   Footer — warmer hierarchy on the teal field
   ========================================================= */
.foot {
    background-image: linear-gradient(180deg, #2BB3AB 0%, #1E938C 100%) !important;
}
.foot h4 {
    color: var(--c-white) !important;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
.foot p { color: rgba(255, 255, 255, 0.85) !important; }
.foot li a { color: rgba(255, 255, 255, 0.92) !important; font-weight: 500; }
.foot li a:hover { color: var(--c-amber) !important; }
.foot iframe { border-radius: 16px; }
.foot hr { opacity: 0.25; }

/* =========================================================
   Misc polish
   ========================================================= */
img { max-width: 100%; }

/* Branded scrollbar (supported browsers) */
* {
    scrollbar-color: var(--c-teal) transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--c-teal);
    border-radius: 999px;
    border: 2px solid #ffffff;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-teal-deep); }