/* =============================================================
   CSS Reset & Normalize
   ============================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    line-height: 1.6;
    background: #F8F8F4;
    color: #244D3E;
    font-family: 'Lato', Arial, sans-serif;
    min-height: 100vh;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: #244D3E;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: #94BCA9;
    text-decoration: underline;
}
ul, ol {
    margin-left: 1.2em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    padding-left: 1em;
}
li {
    margin-bottom: 0.5em;
}

/* =============================================================
   Variables & Pastel Color Palette
   ============================================================= */
:root {
    --primary: #244D3E;
    --secondary: #E0E5DF;
    --accent: #FFE38A;
    --pastel-pink: #F8E8E7;
    --pastel-green: #D5F5E3;
    --pastel-yellow: #FFF9DB;
    --pastel-blue: #DCECF6;
    --shadow: 0 6px 32px 0 rgba(36,77,62,0.08);
    --radius: 18px;
    --focus: #B6CFC4;
}

/* =============================================================
   Typography
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    color: #244D3E;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
h1 {
    font-size: 2.5rem;
    margin-bottom: 18px;
}
h2 {
    font-size: 2rem;
    margin-bottom: 14px;
}
h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
h4, h5, h6 {
    margin-bottom: 10px;
}
p, ul, ol {
    font-size: 1rem;
    color: #3A5447;
}
strong, b {
    font-weight: 700;
    color: #244D3E;
}

body, p, li {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

.text-section h3 {
    color: #588E79;
    font-size: 1.1rem;
    margin-top: 18px;
}
.section ul {
    margin-bottom: 0;
}

/* =============================================================
   Container & Spacing Utilities
   ============================================================= */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section {
    margin-bottom: 60px;
    padding: 40px 20px;
}
@media (max-width: 768px) {
    .section {
        padding: 28px 8px;
        margin-bottom: 40px;
    }
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.text-image-section {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .text-image-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.feature-grid, .card-container, .features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.card-container {
    margin-top: 18px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.card {
    background: var(--pastel-pink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 20px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-placeholder {
    background: var(--pastel-blue);
    border-radius: var(--radius);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7CA0B3;
    font-size: 1.1rem;
    margin: 12px 0;
}

.text-section {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* =============================================================
   Header & Navigation
   ============================================================= */
header {
    width: 100%;
    background: linear-gradient(90deg, #F8E8E7 0%, #DCECF6 100%);
    padding: 0;
    box-shadow: 0 4px 16px 0 rgba(196,200,250,0.13);
    position: sticky;
    top: 0;
    z-index: 30;
}
header .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 20px;
    min-height: 74px;
}
header nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
header nav a {
    color: #244D3E;
    font-size: 1rem;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 500;
}
header nav a:hover, header nav a:focus {
    background: #F3EBFA;
    color: #43977F;
    text-decoration: none;
}
.cta-button {
    background: var(--accent);
    color: #244D3E;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 rgba(36,77,62,0.07);
    font-size: 1.06rem;
    letter-spacing: 0.02em;
    margin-left: 12px;
    transition: background 0.15s, color 0.15s, box-shadow 0.2s;
    outline: none;
}
.cta-button:hover, .cta-button:focus {
    background: #FFF5B2;
    color: #25543D;
    box-shadow: 0 4px 18px 0 rgba(138,188,133,0.17);
}

header img[alt='Fundshine Haven'] {
    height: 48px;
    width: auto;
    margin-right: 20px;
}

@media (max-width: 990px) {
    header nav {
        gap: 10px;
    }
    header .container {
        padding: 0 8px;
    }
}
@media (max-width: 768px) {
    header .container {
        flex-wrap: wrap;
        min-height: 55px;
    }
    header nav, .cta-button {
        display: none;
    }
}

/* =============================================================
   Mobile Burger Menu
   ============================================================= */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2.3rem;
    color: #244D3E;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 100px;
    transition: background 0.15s;
    margin-left: 8px;
    line-height: 1;
}
.mobile-menu-toggle:focus {
    background: var(--focus);
}
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: inline-block;
    }
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(90deg, #FFFAF3 0%, #E0E5DF 100%);
    z-index: 299;
    display: flex;
    flex-direction: column;
    transform: translateX(-100vw);
    transition: transform 0.4s cubic-bezier(.77,0,.175,1);
    box-shadow: 0 4px 32px 0 rgba(36,77,62,0.10);
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-menu-close {
    background: none;
    border: none;
    font-size: 2.0rem;
    color: #244D3E;
    align-self: flex-end;
    margin: 22px 24px 8px 0;
    cursor: pointer;
    border-radius: 50%;
    padding: 6px 9px;
    transition: background 0.15s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
    background: #F3EBFA;
}
.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 28px 32px;
}
.mobile-nav a {
    padding: 15px 0;
    font-size: 1.2rem;
    font-family: 'Lato', Arial, sans-serif;
    color: #244D3E;
    border-bottom: 1px solid #F0E2E0;
    width: 100%;
    transition: color 0.17s, background 0.17s;
}
.mobile-nav a:last-child {
    border-bottom: none;
}
.mobile-nav a:hover, .mobile-nav a:focus {
    color: #519982;
    background: #FFF5C2;
    border-radius: 12px;
}

@media (min-width: 769px) {
    .mobile-menu, .mobile-menu-toggle {
        display: none !important;
    }
}


/* =============================================================
   Main Sections & Hero
   ============================================================= */
main {
    margin-top: 0;
}
section {
    background:
        linear-gradient(115deg, #FFF9DB 0%, #F8E8E7 68%, #DCECF6 100%);
    border-radius: var(--radius);
    box-shadow: 0 10px 45px 0 rgba(36,77,62,0.04);
    margin-bottom: 60px;
}
section > .container {
    padding: 0;
}

@media (max-width: 768px) {
    section {
        margin-bottom: 40px;
        padding: 0;
        border-radius: 10px;
    }
}

/* =============================================================
   Feature Grid & Cards
   ============================================================= */
.feature-grid > div, .card {
    background: #FFFDF7;
    border-radius: var(--radius);
    padding: 26px 20px 18px 20px;
    box-shadow: 0 6px 26px 0 rgba(173, 182, 210, 0.10);
    min-width: 228px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    transition: box-shadow 0.16s, transform 0.11s;
}
.feature-grid > div img {
    height: 40px;
    width: 40px;
    margin-bottom: 8px;
}
.feature-grid > div:hover {
    box-shadow: 0 16px 40px 0 rgba(36,77,62,0.10);
    transform: translateY(-2px) scale(1.01);
}

@media (max-width: 900px) {
    .feature-grid {
        flex-wrap: wrap;
        gap: 16px;
    }
    .feature-grid > div {
        min-width: 48%;
        flex-basis: 48%;
    }
}
@media (max-width: 668px) {
    .feature-grid > div {
        min-width: 97vw;
        flex-basis: 100%;
    }
    .feature-grid {
        gap: 18px;
    }
}

/* =============================================================
   Testimonial Cards
   ============================================================= */
.testimonial-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #D5F5E3;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px 0 rgba(36,77,62,0.10);
    font-size: 1.07rem;
    color: #25543D;
    transition: box-shadow 0.17s, background 0.17s;
}
.testimonial-card strong {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1rem;
    color: #244D3E;
    margin-left: 12px;
    white-space: nowrap;
}
.testimonial-card:hover, .testimonial-card:focus-within {
    background: #E0E5DF;
    box-shadow: 0 10px 36px 0 rgba(81, 167, 130, 0.08);
}

@media (max-width: 600px) {
    .testimonial-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .testimonial-card strong {
        margin-left: 0;
    }
}

/* =============================================================
   Footer
   ============================================================= */
footer {
    padding: 0 0 12px 0;
    background: #F8F8F4;
    color: #386758;
    box-shadow: 0 -2px 9px 0 rgba(185,223,210,0.07);
    margin-top: 40px;
}
footer .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 35px 20px 20px 20px;
    flex-wrap: wrap;
}
footer nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer nav a {
    font-family: 'Lato', Arial, sans-serif;
    color: #437168;
    font-size: 1rem;
    margin-bottom: 4px;
    transition: color 0.15s;
}
footer nav a:hover, footer nav a:focus {
    color: #197358;
    text-decoration: underline;
}
footer .contact-info {
    font-size: 0.98rem;
    color: #386758;
    line-height: 1.5;
    margin-bottom: 6px;
}
footer .contact-info img {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: 4px;
}
footer .contact-info a {
    color: #27907E;
    transition: color 0.15s;
}
footer .contact-info a:hover {
    color: #196457;
}
footer .social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFF9DB;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    box-shadow: 0 2px 8px 0 rgba(255,255,155,0.09);
    transition: background 0.16s;
}
footer .social-links a:hover {
    background: #F8E8E7;
}
footer .social-links img {
    height: 19px;
    width: 19px;
    filter: grayscale(40%);
}
@media (max-width: 900px) {
    footer .container {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
        padding: 22px 8px;
    }
    footer .social-links {
        margin-bottom: 10px;
    }
}

/* =============================================================
   Buttons & Inputs
   ============================================================= */
button, .button {
    font-family: 'Lato', Arial, sans-serif;
    border: none;
    border-radius: 28px;
    padding: 11px 28px;
    cursor: pointer;
    background: var(--accent);
    color: #244D3E;
    font-weight: 600;
    transition: background .14s, box-shadow .14s, color .13s;
    box-shadow: 0 2px 12px 0 rgba(36,77,62,0.07);
}
button:hover, .button:hover,
button:focus, .button:focus {
    background: #FFF5B2;
    color: #258888;
    outline: none;
}
input, textarea, select {
    font-family: 'Lato', Arial, sans-serif;
    border-radius: 8px;
    border: 1px solid #DADADA;
    padding: 12px 14px;
    font-size: 1rem;
    background: #FFF;
    transition: border-color 0.18s;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    outline: none;
}

/* =============================================================
   Cookie Consent Banner
   ============================================================= */
.cookie-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: linear-gradient(90deg, #FFF9DB 0%, #D5F5E3 68%, #DCECF6 100%);
    box-shadow: 0 -2px 32px 0 rgba(36,77,62,0.08);
    z-index: 2202;
    padding: 24px 18px 24px 18px;
    font-size: 1.04rem;
    color: #244D3E;
    animation: cookie-in 0.79s cubic-bezier(.84,.03,.43,.99);
}
.cookie-banner p {
    max-width: 760px;
    text-align: center;
}
.cookie-banner .cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    justify-content: center;
}
.cookie-btn-accept {
    background: #B8EDB9;
}
.cookie-btn-reject {
    background: #F8E8E7;
    color: #4B657D;
}
.cookie-btn-settings {
    background: #FFE38A;
}
.cookie-btn-accept:hover,
.cookie-btn-settings:hover {
    background: #E0E5DF;
}

@keyframes cookie-in {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Cookie Modal */
.cookie-modal-overlay {
    position: fixed;
    z-index: 3002;
    left: 0; top: 0; bottom: 0; right: 0;
    background: rgba(55, 79, 77, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in .28s;
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cookie-modal {
    background: #FFFDF7;
    border-radius: 22px;
    box-shadow: 0 4px 40px 0 rgba(36,77,62,0.18);
    max-width: 440px;
    width: 90vw;
    padding: 38px 30px 24px 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: #244D3E;
    position: relative;
}
.cookie-modal h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 6px;
}
.cookie-modal .cookie-category {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 10px;
}
.cookie-modal label {
    font-size: 1.06rem;
    color: #25543D;
}
.cookie-modal input[type='checkbox'] {
    margin-right: 4px;
    accent-color: #90E3A8;
}
.cookie-modal .button-row {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 16px;
}
.cookie-modal .close-modal {
    position: absolute;
    right: 16px;
    top: 16px;
    background: #F8E8E7;
    border-radius: 50%;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    color: #244D3E;
    cursor: pointer;
    transition: background .14s;
}
.cookie-modal .close-modal:hover {
    background: #EBEFF7;
}

@media (max-width: 540px) {
    .cookie-modal {
        padding: 18px 8px 16px 12px;
        gap: 13px;
    }
    .cookie-modal h2 {
        font-size: 1.1rem;
    }
}

/* =============================================================
   Responsive Design & Utilities
   ============================================================= */
@media (max-width: 520px) {
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.08rem; }
    .cta-button, button, .button {
        padding: 11px 14px;
        font-size: .98rem;
    }
    .container, .feature-grid > div, .testimonial-card, section, .card {
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media (max-width: 330px) {
    .cookie-modal { width: 99vw; padding: 8px 1vw; }
}

/* Utility: visually hidden (for accessible buttons) */
.sr-only { 
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* =============================================================
   Micro-Interactions & Focus States
   ============================================================= */
button:focus, .cta-button:focus, .mobile-menu-close:focus, .cookie-modal .close-modal:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =============================================================
   Dreamy Pastel Effects
   ============================================================= */
.card, .feature-grid>div, .testimonial-card, .cookie-modal {
    box-shadow: var(--shadow);
}

/* Decorative dreamy blob (optional): you could place additional SVG blobs */

/* =============================================================
   END
   ============================================================= */