/* HIUSTOIMI IRE - jaettu tyyli. Kopioidaan jokaiseen sivuun demo-luonti.md:n kevyt-jaettu-tyyli-ohjeen mukaisesti. */
:root{
 --rust:#a8462f;
 --rust-dark:#7f331f;
 --cream:#faf3ea;
 --cream-2:#f1e6d8;
 --charcoal:#241f1c;
 --charcoal-soft:#3c342f;
 --line:#e2d3c0;
 --gold:#c99a52;
}
*{box-sizing:border-box;margin:0;padding:0}
/* HUOM: overflow-x:hidden html/bodyyn EI käy - se pakottaa overflow-y:auto
   spesifikaation mukaan (jos jompikumpi akseli asetetaan ei-visible-arvoon,
   toinen "visible"-akseli muuttuu automaattisesti "auto":ksi), mikä rikkoo
   position:sticky-navigaation koko sivulla. Löydetty katselmoinnissa
   2026-08-21: nav vieri pois ruudusta 8000-12000px scrollin jälkeen eikä
   palannut. Vaakaylivuoto estetään sen sijaan itse ylivuotavasta elementistä
   (ks. .varaa-grid ja muut breakpointit) ja tällä wrapperilla: */
html{scroll-behavior:smooth}
body{
 font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
 background:var(--cream);
 color:var(--charcoal);
 line-height:1.6;
 -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
 font-family:'Libre Franklin',-apple-system,sans-serif;
 font-weight:800;
 letter-spacing:-0.01em;
 color:var(--charcoal);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Vaakaylivuodon esto ilman html/body-overflow-hidden -ansaa (ks. yllä):
   asetetaan overflow-x:hidden bodyn suoriin lapsielementteihin PAITSI nav,
   ei bodyyn itseensä. .nav jätetään pois, koska overflow-hidden esti-isä
   leikkaisi myös position:fixed-lapsensa (.nav-links, mobiilivalikko)
   maalauksen, vaikka se on layoutiltaan viewportin suhteinen. */
body>*:not(nav){overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{
 font-size:12.5px;
 font-weight:700;
 letter-spacing:.14em;
 text-transform:uppercase;
 color:var(--rust);
}

/* ---- Nav ---- */
.nav{
 position:sticky;top:0;z-index:100;
 border-bottom:1px solid transparent;
}
/* Taustan sumennus tehdään ::before-pseudoelementillä, ei .nav:iin suoraan.
   Syy: backdrop-filter luo uuden containing blockin position:fixed-lapsille
   (CSS-spesifikaatio), jolloin mobiilin koko ruudun valikkopaneeli (.nav-links,
   position:fixed) asettuisi .nav:in 79px korkean laatikon suhteen eikä
   viewportin suhteen ja litistyisi muutaman kymmenen pikselin korkuiseksi.
   Havaittu ja korjattu integraatio-QA:ssa 2026-08-21 (koodiprojekti-protokollan
   vaatima build-portin QA-ajo, ei agenttien itseraportointiin luottaen). */
.nav::before{
 content:'';position:absolute;inset:0;z-index:-1;
 background:rgba(250,243,234,0.0);
 backdrop-filter:blur(0px);
 transition:background .35s ease, backdrop-filter .35s ease;
}
.nav.solid{box-shadow:0 1px 0 var(--line);transition:box-shadow .35s ease}
.nav.solid::before{
 background:rgba(250,243,234,0.94);
 backdrop-filter:blur(10px);
}
.nav-inner{
 display:flex;align-items:center;justify-content:space-between;
 padding:18px 28px;max-width:1180px;margin:0 auto;
}
.logo{font-family:'Libre Franklin',sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em}
.logo span{color:var(--rust)}
.nav-links{display:flex;gap:30px;list-style:none;font-size:14.5px;font-weight:600}
.nav-links a{padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .2s}
.nav-links a:hover,.nav-links a.active{border-color:var(--rust)}
.nav-cta{
 background:var(--rust);color:#fff;padding:11px 20px;border-radius:999px;
 font-weight:700;font-size:14px;white-space:nowrap;transition:background .2s;
}
.nav-cta:hover{background:var(--rust-dark)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--charcoal);margin:5px 0;transition:transform .25s ease, opacity .2s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-cta{display:none}
.nav-overlay{
 display:none;position:fixed;inset:0;background:rgba(36,31,28,.4);z-index:90;
 opacity:0;transition:opacity .25s ease;
}
.nav-overlay.show{opacity:1}

/* ---- Buttons ---- */
.btn{
 display:inline-flex;align-items:center;gap:8px;
 padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
 transition:transform .15s ease, background .2s, color .2s;
}
.btn-primary{background:var(--rust);color:#fff}
.btn-primary:hover{background:var(--rust-dark);transform:translateY(-1px)}
.btn-outline{border:1.5px solid var(--charcoal);color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.btn-light{background:#fff;color:var(--rust)}
.btn-light:hover{background:var(--cream-2)}

/* ---- Sections ---- */
section{padding:88px 0}
.section-cream2{background:var(--cream-2)}
.section-dark{background:var(--charcoal);color:#f4ece1}
.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:640px;margin-bottom:52px}
.section-head h2{font-size:clamp(30px,4vw,44px);margin-top:10px}
.section-head p{margin-top:16px;font-size:17px;color:var(--charcoal-soft);max-width:520px}
.section-dark .section-head p{color:#d8c9b8}

/* ---- Contact strip (toistuva, aina näkyvissä nimi+puh) ---- */
.contact-strip{
 background:var(--charcoal);color:#f4ece1;font-size:14px;
 padding:10px 0;
}
.contact-strip .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;justify-content:space-between}
.contact-strip a{font-weight:700}
.contact-strip .cs-items{display:flex;flex-wrap:wrap;gap:6px 24px}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---- Footer ---- */
footer{background:var(--charcoal);color:#e9ddcf;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
footer p,footer li{color:#c9b9a6;font-size:14.5px}
footer li{list-style:none;margin-bottom:8px}
.foot-phone{color:#fff;font-weight:800;font-size:22px;display:block;margin:6px 0}
.foot-bottom{border-top:1px solid #453b34;margin-top:44px;padding-top:22px;font-size:13px;color:#b4a596;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.varaa-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:flex-start}

@media (max-width:840px){
 .varaa-grid{grid-template-columns:1fr;gap:34px}
 .nav-links{
 position:fixed;top:var(--nav-bottom,64px);left:0;right:0;bottom:0;
 background:var(--cream);flex-direction:column;gap:0;
 padding:20px 28px;transform:translateX(100%);transition:transform .3s ease;
 }
 .nav-links.mobile-open{transform:translateX(0)}
 .nav-links li{width:100%;border-bottom:1px solid var(--line)}
 .nav-links a{display:block;padding:16px 0;font-size:17px}
 .nav-cta{display:none}
 .nav-links .mobile-cta{display:block;margin-top:18px}
 .nav-links .mobile-cta a.btn{padding:14px 26px;display:inline-flex;justify-content:center;width:100%}
 .menu-toggle{display:block}
 .nav-overlay{display:block}
 .foot-grid{grid-template-columns:1fr;gap:30px}
 section{padding:60px 0}
 .booker{padding:22px}
}