/* Tokens = theme.json palette / spacing. Layout: constrained groups, grid/flex + gap only, no negative margins. */
:root{--bg:#faf7ee;--fg:#1f2a1a;--card:#fff;--soft:#e5dcc8;--brand:#2d4a22;--on:#faf7ee;--gap:clamp(1rem,3vw,2rem);--wide:1100px;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121a0e;--fg:#ece8da;--card:#1c2917;--soft:#26331f;--brand:#3d6130}}
:root[data-theme="dark"]{--bg:#121a0e;--fg:#ece8da;--card:#1c2917;--soft:#26331f;--brand:#3d6130}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}[hidden]{display:none!important}
:root[data-lang=fi] [lang=en],:root[data-lang=en] [lang=fi]{display:none}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.05rem/1.6 "Source Sans 3",system-ui,sans-serif}
h1,h2,h3{font-family:Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;line-height:1.15;margin:0 0 .6rem;font-weight:600;letter-spacing:.01em}
h1{font-size:clamp(2.2rem,7vw,4rem)}h2{font-size:clamp(1.6rem,4vw,2.4rem)}h3{font-size:1.3rem}
p{margin:0 0 1rem}a{color:inherit}
.sec{padding:clamp(2.5rem,6vw,4.5rem) 1rem}.alt{background:var(--soft)}.dark{background:var(--brand);color:var(--on)}
.wrap{max-width:var(--wide);margin-inline:auto}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:var(--brand);color:var(--on)}
.logo{display:block;line-height:0}
.logo img{display:block;height:3rem;width:auto}
.foot-logo{display:block;height:3.4rem;width:auto;margin-bottom:.6rem}
nav{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
nav a{text-decoration:none;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:4px;border:2px solid currentColor;background:none;color:inherit;font:600 1rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer}
.btn.fill{background:var(--on);color:#2d4a22;border-color:var(--on)}
.btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero{--img:url(../images/hero.jpg);min-height:68vh;display:grid;align-items:center;color:#fff;
background:linear-gradient(90deg,rgba(10,20,8,.8) 0%,rgba(10,20,8,.45) 50%,rgba(10,20,8,.05) 100%),var(--img) 78% center/cover no-repeat #16240f}
.hero .wrap{width:100%}.hero p{max-width:34rem}.hero .btns{justify-content:flex-start}
@media(max-width:700px){.hero{background:linear-gradient(rgba(10,20,8,.7),rgba(10,20,8,.5)),var(--img) 80% center/cover no-repeat #16240f}}
.tag{font:italic 1.2rem Georgia,serif;opacity:.9}
.card{background:var(--card);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.card .body{padding:1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.ph{min-height:180px;display:grid;place-items:center;color:#fff;font-size:.85rem;text-align:center;padding:.5rem;background:linear-gradient(150deg,#4d7a3c,#1b2e14)}
.ph.a{background:linear-gradient(150deg,#1f6b4a,#0a1530)}.ph.b{background:linear-gradient(150deg,#b8862f,#2d4a22)}.ph.c{background:linear-gradient(150deg,#7fa3b8,#2d4a22)}
.pic{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft)}
img[data-img=forest]{object-position:25% 50%}img[data-img=korouoma]{object-position:50% 40%}
.price{font:600 1.3rem Oswald,sans-serif;color:var(--brand);margin-top:auto}
.dark .price{color:var(--on)}
.ico{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--soft);font-size:1.5rem;margin-bottom:.5rem}
.facts{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.facts li{padding-bottom:.4rem;border-bottom:1px dashed currentColor}
ul.list{margin:0 0 1rem;padding-left:1.2rem}
.note{font-size:.95rem;opacity:.85}
form{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
label{display:grid;gap:.3rem;font-weight:600}.full{grid-column:1/-1}
input,select,textarea{font:inherit;padding:.65rem;border:1px solid #8a9a80;border-radius:4px;background:var(--card);color:var(--fg);width:100%}
.hp{position:absolute;left:-9999px}
footer{padding:2rem 1rem}footer .wrap{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:space-between}
nav a[aria-current]{border-bottom:2px solid currentColor}
.msg{font-weight:600}