/* === 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,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;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}
body {
    line-height:1.6;
    background:#f9fafb;
    color:#2c3942;
    font-family:'Open Sans',Arial,sans-serif;
    font-weight:400;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-size:16px;
}
img {
    max-width:100%;
    height:auto;
    border:0;
    vertical-align:middle;
    display:block;
}
a {
    color:inherit;
    text-decoration:none;
    transition:color 0.2s;
}
ul,ol {
    margin-left:24px;
    margin-bottom:20px;
}
li {
    margin-bottom:8px;
}

/* === VARIABLES (fallbacks) === */
:root {
    --color-primary: #365668;
    --color-secondary: #7BB372;
    --color-accent: #F9E5A8;
    --color-contrast-bg: #fffbe9;
    --color-card-bg: #fff;
    --color-hero-bg: #E4F6F5;
    --color-dark: #232F34;
    --color-grey: #E2E2E2;
    --color-link-hover: #4AA0D3;
    --font-display: 'Montserrat',Arial,sans-serif;
    --font-body: 'Open Sans',Arial,sans-serif;
}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6 {
    font-family:var(--font-display);
    margin-bottom:16px;
    font-weight:900;
    letter-spacing: 0.03em;
}
h1 {
    font-size:2.4rem;
    color:var(--color-primary);
    line-height:1.16;
}
h2 {
    font-size:2rem;
    color:var(--color-secondary);
}
h3 {
    font-size:1.35rem;
    color:var(--color-primary);
    margin-bottom:10px;
}
h4,h5,h6 { font-size:1.1rem; color:var(--color-primary);} 
p, address, ul, ol { font-family:var(--font-body); font-size:1rem; margin-bottom:16px; color:#333; }
strong,b { font-weight:800; color:var(--color-secondary);}

/* FUN (PLAYFUL) FONTS + STYLE */
h1, h2, h3 { text-transform: none; }
h1, h2, h3, h4 {  letter-spacing: 0.02em; }

/* Fun animated underline for titles */
h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 8px 16px 14px 8px;
    margin: 8px 0 0 0;
    animation: underline-swing 1.1s cubic-bezier(.18,.85,.62,1.21);
}
@keyframes underline-swing {
    0% { width:0; opacity:0.2; }
    80% { width:54px; opacity:1; }
    100% { width:48px; opacity:1; }
}

/* === LAYOUT === */
.container {
    width:100%;
    max-width:1100px;
    padding-left: 20px;
    padding-right: 20px;
    margin:0 auto;
}
.content-wrapper {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.section {
    margin-bottom:60px;
    padding:40px 20px;
    background: none;
    border-radius: 24px;
}

/* Critical Flex Spacing Patterns */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap:24px;
}
.card {
    margin-bottom:20px;
    position: relative;
    background: var(--color-card-bg);
    border-radius:18px;
    box-shadow:0 2px 12px 0 rgba(90,128,112,.07);
    transition:transform 0.21s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
    padding:28px 22px;
    min-width:240px;
    flex:1 1 290px;
}
.card:hover {
    transform:scale(1.03) rotate(-1deg);
    box-shadow: 0 6px 24px 0 rgba(60,70,100,0.14);
}
.content-grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:space-between;
}
.text-image-section {
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}
.testimonial-card {
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px;
    background:var(--color-contrast-bg);
    border-radius:18px;
    box-shadow:0 2px 14px 0 rgba(100,150,120,.05);
    margin-bottom:20px;
    min-width:0;
    flex:1 1 360px;
    position:relative;
    border:2.5px solid #fffbe9;
    z-index:1;
    transition:box-shadow 0.19s,transform 0.19s;
}
.testimonial-card:hover {
    box-shadow:0 8px 28px 0 rgba(75,170,211,.18);
    transform:scale(1.015) rotate(0.5deg);
}
.feature-item {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}

/* === HEADER / NAVIGATION === */
header {
    background:var(--color-primary);
    color:#fff;
    padding:0;
    box-shadow:0 2px 18px rgba(54,86,104,0.09);
    border-radius:0 0 26px 26px;
    margin-bottom:0; /* reset */
}
header .container {
    display: flex;
    align-items: center;
    justify-content:space-between;
    height: 78px;
    gap:18px;
}
.logo img {
    height:48px;
    margin-right: 14px;
    transition:transform .16s;
}
.logo:hover img {
    transform: scale(1.08) rotate(-4deg);
}
nav.main-nav {
    display:flex;
    gap:26px;
}
nav.main-nav a {
    font-family:var(--font-display);
    font-size:1.13rem;
    letter-spacing:0.02em;
    color:#fffbe9;
    border-radius:15px;
    padding:4px 10px;
    transition:background 0.17s, color 0.17s;
    font-weight:600;
    position:relative;
}
nav.main-nav a:hover,nav.main-nav a:focus {
    background:var(--color-secondary);
    color:var(--color-primary);
    outline:none;
}
.cta-btn.primary {
    background:var(--color-secondary);
    color:#365668;
    font-family:var(--font-display);
    font-weight:800;
    font-size:1.09rem;
    border:none;
    border-radius:23px;
    padding:12px 30px;
    margin-left:16px;
    box-shadow:0 3px 22px 0 rgba(123,179,114,0.14);
    letter-spacing:0.03em;
    cursor:pointer;
    transition:background 0.21s,color 0.19s,transform 0.13s;
    outline:0;
}
.cta-btn.primary:hover,.cta-btn.primary:focus {
    background:var(--color-accent);
    color:var(--color-primary);
    transform: scale(1.045) rotate(-2deg);
}
.mobile-menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--color-accent);
    border:none;
    font-size:2.2rem;
    color:var(--color-primary);
    border-radius:14px;
    width:44px;
    height:44px;
    margin-left:10px;
    cursor:pointer;
    transition:background 0.16s, transform 0.16s;
    box-shadow: 0 2px 8px 0 rgba(249,229,168,.24);
    z-index:101;
}
.mobile-menu-toggle:hover,.mobile-menu-toggle:focus {
    background:var(--color-secondary);
    color:#fff;
    transform: translateY(-2px) scale(1.065);
}

/* === MOBILE MENU === */
.mobile-menu {
    background: var(--color-primary);
    position: fixed;
    top:0;
    left:0;
    height: 100vh;
    width:100vw;
    z-index: 2000;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    transition:transform 0.21s cubic-bezier(.47,1.64,0.41,0.8);
    overflow-y:auto;
    box-shadow:0 8px 34px 0 rgba(54,86,104,0.25);
    transform: translateX(-100vw);
}
.mobile-menu.open {
    display:flex;
    transform: translateX(0);
    animation:slideinmenu .35s cubic-bezier(.57,.08,.77,1.37);
}
@keyframes slideinmenu {
    from {transform:translateX(-100vw);}
    to {transform:translateX(0);}
}
.mobile-menu-close {
    margin:25px 0 0 22px;
    align-self:flex-start;
    background:var(--color-accent);
    color:var(--color-primary);
    font-size:2.3rem;
    border:none;
    border-radius:12px;
    width:46px;
    height:46px;
    cursor:pointer;
    transition:background .14s,transform .13s;
    z-index:2100;
    box-shadow:0 1px 7px 0 rgba(249,229,168,0.16);
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
    background:var(--color-secondary);
    color:#fff;
    transform: scale(1.07) rotate(-2deg);
}
.mobile-nav {
    display:flex;
    flex-direction:column;
    gap: 18px;
    margin:44px 0 0 28px;
    width: 86vw;
}
.mobile-nav a {
    font-family:var(--font-display);
    font-size:1.5rem;
    color:var(--color-accent);
    padding:14px 0;
    border-radius:12px;
    font-weight:700;
    background: none;
    transition: color 0.18s, background 0.15s;
    outline: none;
    margin-bottom: 2px;
}
.mobile-nav a:hover, .mobile-nav a:focus {
    background:var(--color-accent);
    color:var(--color-primary);
}

@media (max-width: 1040px) {
    .main-nav { gap: 16px;}
    .cta-btn.primary {padding:10px 20px;font-size:1rem;}
}
@media (max-width: 860px){
    header .container { flex-direction:row; gap:7px;}
    nav.main-nav { gap:11px; }
}

/* Hide nav and show burger on mobile */
@media (max-width: 768px) {
    nav.main-nav { display:none; }
    .cta-btn.primary { margin-left:4px; }
    .mobile-menu-toggle { display:inline-flex; }
}
@media (min-width: 769px) {
    .mobile-menu-toggle, .mobile-menu { display:none!important; }
}

/* === HERO SECTIONS === */
.hero {
    background: var(--color-hero-bg);
    border-radius: 0 0 38px 38px;
    margin-bottom: 0;
    box-shadow: 0 4px 48px 0 rgba(36,137,199,0.09);
    min-height: 350px;
    display:flex;
    align-items:center;
    position:relative;
    padding:0;
    animation: hero-popin 1s cubic-bezier(.86,-0.08,.7,1.36);
}
@keyframes hero-popin {
    from{opacity:0;transform:translateY(40px) scale(.95);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
.hero .container {
    padding-top: 34px;
    padding-bottom: 34px;
}
.hero .content-wrapper {
    align-items: flex-start;
    gap:20px;
    padding-top:20px;
    padding-bottom:20px;
}
.hero h1 {
    color: var(--color-primary);
    font-size:2.3rem;
    line-height:1.19;
}
.hero p {
    color: #365668;
    font-size:1.18rem;
    font-weight:500;
}

/* === FEATURES / CARDS === */
.feature-grid {
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    justify-content: flex-start;
    margin-bottom:18px;
}
.feature-grid li {
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    background:var(--color-accent);
    border-radius:20px;
    box-shadow:0 3px 13px 0 rgba(255,180,0,0.04);
    padding:26px 22px 22px 22px;
    min-width:200px;
    flex:1 1 230px;
    margin-bottom:0;
    transition:transform 0.21s cubic-bezier(.37,1.42,.46,.94), box-shadow .15s;
    border:2px solid #fffbe9;
    position:relative;
    z-index:1;
}
.feature-grid li:hover {
    transform:scale(1.055) rotate(-2deg);
    box-shadow:0 7px 30px 0 rgba(255,205,20,.09);
}
.feature-grid img {
    height: 42px;
    margin-bottom:12px;
    margin-top:2px;
    filter: drop-shadow(0 3px 12px #fffbe9);
}

/* === SERVICE CARDS === */
.service-cards {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:10px;
    margin-bottom:23px;
    justify-content: flex-start;
}
.service-card {
    background:var(--color-card-bg);
    border-radius:20px;
    box-shadow:0 2px 16px 0 rgba(90,128,112,0.08);
    padding: 30px 24px 24px 24px;
    min-width:200px;
    flex:1 1 250px;
    margin-bottom:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transition:box-shadow .14s,transform .14s;
    border:2.5px solid #F9E5A8;
    position:relative;
}
.service-card:hover {
    box-shadow: 0 9px 36px 0 rgba(123,179,114,0.15);
    transform:scale(1.045) rotate(-1deg);
}
.service-card h3 {
    margin-bottom:12px;
}
.service-card strong {
    margin-top:14px;
    font-size:1.05rem;
}

/* === TESTIMONIALS === */
.testimonials {
    background: var(--color-accent);
    border-radius: 32px;
    padding: 40px 0;
    margin-bottom:60px;
    box-shadow:0 3px 24px 0 rgba(249,229,168,.12);
}
.testimonials .container {max-width:900px;}
.testimonial-card blockquote {
    font-size:1.15rem;
    color: #365668;
    font-style:italic;
    line-height:1.38;
    margin:0 0 8px 0;
    font-family:var(--font-display);
}
.testimonial-card span {
    color:#365668;
    font-weight: bold;
    font-family:var(--font-body);
    font-size:1rem;
    margin-left:12px;
}

/* === BUTTONS === */
.cta-btn, .cta-btn.primary, button, .mobile-nav a, .mobile-menu-close {
    font-family:var(--font-display);
    font-size:1rem;
    cursor:pointer;
    transition: background 0.18s, color 0.16s,transform 0.11s;
    box-shadow:none;
    outline: none;
}
.cta-btn {
    display:inline-block;
    border:none;
    border-radius:20px;
    padding:10px 24px;
    font-weight:800;
    letter-spacing:0.02em;
    margin-top:10px;
    text-align:center;
    margin-right:10px;
    margin-bottom:5px;
}
.cta-btn.primary {
    background: var(--color-secondary);
    color: var(--color-primary);
    box-shadow:0 4px 18px 0 rgba(123,179,114,0.12);
    position:relative;
}
.cta-btn.primary:hover, .cta-btn.primary:focus {
    background: var(--color-accent);
    color:var(--color-primary);
    transform:scale(1.05) rotate(-2deg);
    box-shadow:0 7px 24px 0 rgba(249,229,168,0.13);
}

/* === TEXT SECTIONS === */
.text-section {
    background: #fffbe9;
    border-radius: 18px;
    box-shadow: 0 2px 9px 0 rgba(255,200,21,0.04);
    padding: 24px 20px 16px 20px;
    margin-bottom:24px;
    font-size:1.03rem;
}
.text-section h3 {
    font-size:1.18rem;
    color: var(--color-secondary);
    margin-bottom:9px;
}
.text-section ul, .text-section ol {
    margin-bottom: 18px;
}


/* === ADDRESS, FOOTER === */
.footer-nav {
    display: flex;
    gap:18px;
    margin-bottom: 8px;
    flex-wrap:wrap;
}
.footer-nav a {
    color: var(--color-primary);
    font-family:var(--font-display);
    font-size:1rem;
    font-weight: 700;
    padding:3px 8px;
    border-radius: 9px;
    transition: background .13s, color .13s;
}
.footer-nav a:hover {
    background: var(--color-secondary);
    color: #fff;
}
.footer-contact {
    font-family:var(--font-body);
    font-size:0.98rem;
    color:#365668;
    background:none;
    margin-bottom:15px;
}
footer {
    margin-top: 50px;
    background: var(--color-accent);
    border-radius: 24px 24px 0 0;
    padding:32px 0 16px 0;
    box-shadow: 0 -1px 18px 0 #F9E5A8;
}
footer .container {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}
/* === FORMS (if any) === */
input,textarea,select {
    font-family:var(--font-body);
    color:var(--color-primary);
    background:#fefefe;
    border:2px solid var(--color-grey);
    padding:9px 13px;
    border-radius:8px;
    font-size:1rem;
    margin-bottom:10px;
    width:100%;
    transition:border 0.17s;
}
input:focus,textarea:focus,select:focus {
    border:2px solid var(--color-secondary);
    outline:none;
}

/* === COOKIE BANNER === */
.cookie-consent-banner {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    background:var(--color-primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 18px;
    padding:18px 14px 21px 14px;
    z-index:9999;
    font-family:var(--font-body);
    font-size:1.09rem;
    box-shadow:0 -4px 24px 0 rgba(54,86,104,0.13);
    animation:cookiepop .6s cubic-bezier(.36,1.52,.53,.88);
}
@keyframes cookiepop {
    from{transform:translateY(80px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
}
.cookie-consent-banner .cookie-buttons {
    display:flex;
    gap:13px;
}
.cookie-consent-banner button {
    border:none;
    border-radius:13px;
    padding:8px 17px;
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    box-shadow:0 2px 8px 0 rgba(249,229,168,0.12);
    margin:0 3px;
    cursor:pointer;
    transition:background .2s, color .13s, transform .11s;
}
.cookie-consent-banner .accept {
    background:var(--color-secondary);
    color:var(--color-primary);
}
.cookie-consent-banner .accept:hover {
    background:var(--color-accent);
    color:var(--color-primary);
}
.cookie-consent-banner .reject {
    background: #fffbe9;
    color:var(--color-primary);
}
.cookie-consent-banner .reject:hover {
    background:var(--color-secondary);
    color:#fff;
}
.cookie-consent-banner .settings {
    background:transparent;
    color:var(--color-accent);
    border:2px solid var(--color-accent);
}
.cookie-consent-banner .settings:hover {
    background:var(--color-accent);
    color:var(--color-primary);
}

/* COOKIE MODAL */
.cookie-modal-overlay {
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(36,86,104,.37);
    z-index:10050;
    display:none;
    align-items:center;
    justify-content:center;
}
.cookie-modal-overlay.open {
    display:flex;
    animation:fadeinmodal .25s;
}
@keyframes fadeinmodal {
    from{opacity:0;}
    to{opacity:1;}
}
.cookie-modal {
    background:#fffbe9;
    color:#365668;
    border-radius:20px;
    padding:36px 26px 26px 26px;
    max-width:420px;
    width:92vw;
    box-shadow:0 6px 32px 0 rgba(63,91,105,0.13);
    position:relative;
    font-family:var(--font-body);
    font-size:1.05rem;
    z-index:10051;
    animation: modalpop .26s cubic-bezier(.45,1.18,.46,.95);
}
@keyframes modalpop {
    from{transform:scale(0.92) translateY(28px);opacity:0;}
    to{transform:scale(1) translateY(0);opacity:1;}
}
.cookie-modal h3 {
    color:var(--color-primary);
    font-size:1.2rem;
    font-family:var(--font-display);
    margin-bottom:12px;
}
.cookie-modal .cookie-categories {
    display:flex;
    flex-direction:column;
    gap:13px;
    margin-bottom:22px;
}
.cookie-modal label {
    font-weight:600;
    display:flex;
    align-items:center;
    gap:9px;
}
.cookie-modal input[type=checkbox] {
    accent-color:var(--color-secondary);
    width: 18px;
    height:18px;
}
.cookie-modal .cookie-buttons {
    display:flex;
    gap:12px;
}
.cookie-modal .close-modal {
    position:absolute;
    right:13px;
    top:12px;
    background:none;
    color:var(--color-primary);
    border:none;
    font-size:1.9rem;
    padding:0;
    cursor:pointer;
    transition:color .14s, transform .13s;
    border-radius:9px;
}
.cookie-modal .close-modal:hover,.cookie-modal .close-modal:focus {
    color:var(--color-secondary);
    background:var(--color-accent);
}

/* === RESPONSIVENESS === */
@media (max-width: 990px) {
    .feature-grid, .service-cards, .card-container {
        gap:18px;
    }
    .footer-nav {
        gap:9px;
    }
}

@media (max-width: 820px) {
    .service-cards, .feature-grid, .card-container {
        flex-direction:column;
        gap: 16px;
    }
    .service-card, .card, .testimonial-card, .feature-grid li {
        min-width:0;
        width:100%;
        flex:0 1 100%;
    }
}
@media (max-width: 768px) {
    .container { padding-left:10px; padding-right:10px; max-width:100vw; }
    .hero .container {padding-left:6px; padding-right:6px;}
    .footer-contact {font-size:.93rem;}

    .content-grid { flex-direction:column; gap:14px; }
    .text-image-section { flex-direction:column; gap:14px; }
    .card-container { flex-direction:column; }
    .service-cards, .feature-grid { flex-direction:column; }
    .main-nav {display:none;}
    .footer-nav {flex-direction:column;gap:8px;}
    .section {padding:25px 6px; margin-bottom:38px;}
    .testimonials {padding:22px 0; margin-bottom:32px; border-radius:18px;}
}
@media (max-width: 530px) {
    h1 {font-size:1.45rem;}
    h2 {font-size:1.20rem;}
    .hero { min-height: 168px;}
    .footer-contact { font-size:.89rem;}
    .cookie-consent-banner {font-size:.99rem;padding:12px 8px 16px 8px;}
}

/* === Micro-interactions === */
.cta-btn.primary:active, .mobile-menu-toggle:active, .mobile-menu-close:active, .cookie-consent-banner button:active {
    transform: scale(0.97) rotate(-1deg);
}

/* --- Animations for fun (playful feel) --- */
@keyframes card-bop {
    40% {transform: scale(1.045) rotate(-1.6deg);}
    80% {transform: scale(0.99) rotate(1.6deg);}
    100% {transform: scale(1) rotate(0);}
}
.card, .service-card, .feature-grid li {
    animation: card-bop .92s cubic-bezier(.52,1.49,.47,1.01);
}
.feature-grid img, .service-card h3, .testimonial-card blockquote {
    animation:fadein 0.8s cubic-bezier(.49,1.44,.47,1.00);
}
@keyframes fadein {
    from{ opacity:0; transform:translateY(26px);} 
    to{ opacity:1; transform:translateY(0);}
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar { width: 9px; background: #fffbe9; }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius:8px; }

/* --- Misc --- */
blockquote { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:before { content: open-quote; color:var(--color-secondary); font-size:1.8em; line-height:0; font-family:var(--font-display);}
blockquote:after { content: close-quote; color:var(--color-secondary); font-size:1.8em; line-height:0; font-family:var(--font-display);}

hr { border:none; border-top:1.5px dotted var(--color-accent); margin:14px 0 15px 0; }

/* === Accessibility & Fallbacks === */
[tabindex]:focus { outline: 2px solid var(--color-accent); outline-offset:2px; }

/* === END OF CSS === */