:root {
    --accent: #2a6b4b;
    --text: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fffdf8;
    --bg: #f6f2ea;
}

* { box-sizing: border-box; margin:0; padding:0; }
body { 
    font-family: system-ui, -apple-system, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    line-height: 1.6; 
}

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

/* Header */
header { 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background: rgba(255,253,248,0.95); 
    backdrop-filter: blur(6px); 
    border-bottom: 1px solid #e5dfd3; 
}

.nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; position: relative; }
.brand { font-weight: 900; font-size: 1.35rem; color: var(--accent); }

/* Hamburger menüü */
.hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; }
.hamburger span { width: 24px; height: 3px; background: var(--text); border-radius: 3px; transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; color: var(--text); font-weight: 700; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--accent); }

.mobile-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--paper); border-bottom: 1px solid #e5dfd3; padding: 16px 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); flex-direction: column; gap: 16px; }
.mobile-menu a { font-size: 1.1rem; padding: 8px 0; transition: color 0.3s ease; }
.mobile-menu a:hover { color: var(--accent); }

@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links { display: none; }
    .mobile-menu.open { display: flex; }
}

/* Hero */
.hero { position: relative; border-radius: 18px; overflow: hidden; margin: 16px 0 32px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.hero img { width: 100%; height: auto; object-fit: contain; display: block; }
.overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 82%, rgba(0,0,0,0.75) 100%); 
    display: flex; 
    align-items: flex-end; 
    padding: 32px; 
}
@media (max-width: 480px) { .overlay { padding: 24px; } }
.hero h1 { color: white; font-size: clamp(28px, 5vw, 52px); font-weight: 800; line-height: 1.05; margin-bottom: 12px; text-shadow: 0 3px 12px rgba(0,0,0,0.5); }
.hero-subtitle, .hero-services { color: white; font-size: 1.2rem; margin: 0 0 20px; text-shadow: 0 2px 6px rgba(0,0,0,0.5); font-weight: 600; } /* Paksem font loetavuseks */

@media (max-width: 768px) {  /* Mobiilivaates nihuta tekst pildi alla uueks kaardiks */
    .hero { 
        position: static;  /* Eemalda relative, et vool oleks loomulik */
    }
    .overlay { 
        position: relative;  /* Muuda absolute-st relative-ks, nii et see on pildi all */
        background: var(--paper);  /* Lisa kaardi-taoline taust (valge/beež) */
        color: var(--text);  /* Muuda tekst mustaks parema kontrasti jaoks */
        padding: 20px;  /* Lisa padding kaardi efekti jaoks */
        border-radius: 0 0 18px 18px;  /* Ümarda alumised nurgad */
        box-shadow: 0 8px 24px rgba(0,0,0,0.07);  /* Lisa vari, nagu teistel kaartidel */
        margin-top: -18px;  /* Nihuta veidi üles, et see pildiga ühenduks */
    }
    .hero h1, .hero-subtitle, .hero-services { 
        color: var(--text);  /* Must tekst kaardi taustal */
        text-shadow: none;  /* Eemalda vari, kuna taust on hele */
    }
    .hero-subtitle, .hero-services { font-size: 1rem; }  /* Väiksem font mobiilis */
}

/* Grid ja kaardid */
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .grid { grid-template-columns: 1.65fr 1fr; } }
.card { background: var(--paper); border-radius: 18px; padding: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.07); border: 1px solid #f0e8db; }
@media (max-width: 480px) { .card { padding: 20px; } }

h2 { margin-bottom: 16px; font-size: 1.8rem; }
h3 { margin-top: 28px; font-size: 1.4rem; }

/* Enne/Pärast liugur (uuendatud videote jaoks) */
.ba { position: relative; border-radius: 14px; overflow: hidden; margin-top: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); touch-action: manipulation; }
.ba video { width: 100%; height: 100%; object-fit: cover; display: block; visibility: visible; } /* Videod täidavad ala ja on nähtavad */
.resize { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; width: 50%; }
.handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 5px; background: white; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); cursor: ew-resize; }
.handle::before, .handle::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border: 8px solid transparent; }
.handle::before { left: -16px; border-right-color: #333; }
.handle::after { right: -16px; border-left-color: #333; }

.ba-help { margin-top: 12px; font-size: 0.9rem; color: var(--muted); }

/* Vorm */
label { 
    display: block; 
    margin: 16px 0 6px; 
    font-weight: 600; 
}
input, textarea { 
    display: block; 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #d8d0c0; 
    border-radius: 10px; 
    font-size: 1rem; 
    box-sizing: border-box; 
}
textarea { 
    min-height: 180px; 
    resize: vertical; 
}
.required { color: #e74c3c; }
.contact-hours { margin-top: 16px; color: var(--muted); }

.btn { margin-top: 16px; padding: 12px 24px; background: var(--accent); color: white; border: none; border-radius: 999px; font-weight: 700; cursor: pointer; width: 100%; transition: background 0.3s ease; }
.btn:hover { background: darken(var(--accent), 10%); } /* Vajadusel polyfill darken'ile */
@media (min-width: 480px) { .btn { width: auto; } }

.help-text { margin: 8px 0 12px; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #d8d0c0; }

footer { text-align: center; padding: 32px 0; color: var(--muted); font-size: 0.9rem; }
.service-overlay {
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0.15),   
        rgba(0,0,0,0.55)    
    ) !important;
}