/* TiivisKoti — toiminta-aluesivujen tyylit.
   Poimittu index.html:n <style>-lohkosta, koska aluesivuilla on sama
   hintalaskuri kuin etusivulla — taloyhtio.html:n tyyleistä puuttuivat
   laskurin askelkortti, kalenteri ja lomake.
   Aluesivut ovat ainoat jotka lataavat tämän; index.html ja taloyhtio.html
   pitävät omat inline-tyylinsä, jottei niiden renderöinti muutu.
   Päivitä ajamalla build-alueet.mjs uudelleen jos indexin tyylit muuttuvat. */
/* ============================================================
   TIIVISKOTI — vaalea & luotettava (AaltoAir-layout)
   Kirkas off-white pohja, luottamusta herättävä syvä vihreä,
   ryhtiä tuovat syvänvihreät paneelit. Ei synkkä, ei ankea.
   Manrope. Isot pyöristetyt kuvalohkot, mittarit, kaupunkilista.
   ============================================================ */
:root{
  --bg:#F6F7F3; --alt:#ECF0E9; --card:#FFFFFF; --imgtop:#EAF1EC;
  --ink:#183A28; --text:#4A544D; --mute:#7B857D;
  --green:#217A4E; --green-d:#1A6340; --green-l:#2E9E63; --green-soft:#E4F0E9;
  --deep:#163A28; --deep2:#1E4A34; --onwhite:#FFFFFF;
  --line:#E4E8E0; --line2:#D2D9CE; --star:#E0A63A;
  --dtext:#D7E4DB; --dmute:#9DB2A5;
  --r:12px; --r-lg:18px; --max:1200px; --ease:cubic-bezier(.2,.6,.3,1);
  --sh:0 1px 2px rgba(24,58,40,.04), 0 18px 40px -26px rgba(24,58,40,.32);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--text);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Manrope',sans-serif;color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
b,strong{font-weight:700;color:var(--ink)}
::selection{background:var(--green);color:#fff}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:26px}
.sec{padding:clamp(60px,7vw,100px) 0;position:relative}
.alt{background:var(--alt)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.kicker::before{content:"";width:20px;height:2px;background:var(--green);border-radius:2px}
h2.title{font-size:clamp(29px,3.8vw,44px);font-weight:800;max-width:18ch;letter-spacing:-.025em;color:var(--ink)}
.sub{font-size:18px;color:var(--mute);max-width:56ch;margin-top:14px}
.center{text-align:center}.center .kicker{justify-content:center}.center .title,.center .sub{margin-inline:auto}
.rv{opacity:0;transform:translateY(16px);transition:.7s var(--ease)}.rv.in{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:16px;padding:14px 26px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:.18s var(--ease)}
.btn svg{width:18px;height:18px}
.btn-p{background:var(--green);color:#fff}.btn-p:hover{background:var(--green-d)}
a.btn-p{color:#fff}
.btn-o{background:var(--card);color:var(--ink);border-color:var(--line2)}.btn-o:hover{border-color:var(--green);color:var(--green)}
.btn-lg{padding:16px 32px}
.arrow{transition:transform .18s}.btn:hover .arrow{transform:translateX(3px)}
.lnk{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green);font-size:15px}
.lnk .arrow{width:15px;height:15px}
.on-deep.btn-o{background:transparent;color:#fff;border-color:rgba(246,247,243,.4)}.on-deep.btn-o:hover{border-color:#fff;color:#fff;background:rgba(246,247,243,.08)}

/* nav */
nav.top{position:sticky;top:0;z-index:60;background:rgba(246,247,243,.9);backdrop-filter:saturate(1.1);border-bottom:1px solid transparent;transition:.25s}
nav.top.scr{border-color:var(--line);background:var(--bg)}
nav.top .wrap{display:flex;align-items:center;height:74px;gap:22px}
.logo{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:23px;letter-spacing:-.03em;color:var(--ink)}
.logo .mark{width:34px;height:34px}
.logo .b{color:var(--green)}
.nlinks{display:flex;gap:2px;margin-left:auto;margin-right:8px}
.nlinks a{font-weight:600;font-size:15px;color:var(--text);padding:8px 12px;border-radius:8px}
.nlinks a:hover{color:var(--green)}
.ntel{font-weight:700;font-size:15px;color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink)}

/* HERO — valoisa split: teksti + iso pyöristetty kuvalohko */
.hero{padding:clamp(30px,4vw,56px) 0 clamp(20px,3vw,32px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,60px);align-items:center}
.hero .rating{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text);margin-bottom:18px;font-weight:600}
.hero .rating svg{color:var(--green);flex:0 0 auto}
.hero h1{font-size:clamp(36px,5.2vw,60px);font-weight:800;line-height:1.03;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.hero h1 .a{color:var(--green)}
.hero-sub{font-size:19px;color:var(--text);max-width:45ch;margin-top:20px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.hero-fine{font-size:14px;color:var(--mute);margin-top:16px;display:flex;align-items:center;gap:8px}
.hero-fine svg{color:var(--green);flex:0 0 auto}
.hero-card{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line);aspect-ratio:5/4}
.hero-card svg,.hero-card img{width:100%;height:100%;display:block;object-fit:cover}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--sh)}
.metric b{display:block;font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.metric b .a{color:var(--green)}
/* HUOM: suora lapsi. Pelkkä ".metric span" osui myös <b>:n sisällä olevaan
   <span class="a">:han ja kutisti luvun 32px → 14.5px. Sama koski .wstat:ia. */
.metric>span{display:block;font-size:14.5px;color:var(--mute);margin-top:8px}

/* SERVICE CARDS */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(34px,4vw,50px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.2s var(--ease);box-shadow:var(--sh)}
.card:hover{border-color:var(--green);transform:translateY(-4px)}
.card-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--imgtop);border-bottom:1px solid var(--line)}
.card-fig .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-fig .tag{position:absolute;left:16px;bottom:14px;z-index:2;background:var(--green);color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px}
.card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:21px;color:var(--ink)}
.card p{font-size:15px;color:var(--mute);flex:1;margin-top:8px}
.card .lnk{margin-top:16px}

/* LASKURI — vaalea kortti + syvänvihreä yhteenveto */
.calc-wrap{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(22px,3vw,34px);margin-top:clamp(34px,4vw,50px);align-items:start}
.order{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.order-hd{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.calc-types{display:flex;flex-direction:column}
.wtype{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line)}
.wtype.has{background:var(--green-soft)}
.wtype-ic{width:28px;height:28px;color:var(--green);opacity:.8;flex:0 0 auto}.wtype.has .wtype-ic{opacity:1}
.wtype-ic svg{width:28px;height:28px}
.wtype-top{flex:1;min-width:0}
.wtype-name{font-weight:700;font-size:16.5px;color:var(--ink)}
.wtype-desc{font-size:12.5px;color:var(--mute);margin-top:2px}
.wtype-price{font-size:12.5px;color:var(--green);font-weight:700;margin-top:4px;display:inline-block}
.stepper{flex:0 0 auto}.stepper .unit{display:none}
.stepper-btns{display:flex;align-items:center;gap:7px}
.stp{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line2);background:var(--card);color:var(--green);font-size:19px;font-weight:700;cursor:pointer;display:grid;place-items:center;line-height:0;padding-bottom:2px}
.stp:hover{border-color:var(--green)}.stp:disabled{opacity:.35;cursor:not-allowed}
.stp.plus{background:var(--green);color:#fff;border-color:var(--green)}
.qty{font-weight:800;font-size:20px;color:var(--ink);min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.extras-hd{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:14px 22px 2px}
/* minmax(0,1fr) eikä 1fr: fr-radan automaattinen alaraja on sen sisällön
   min-content, ja määrällisen lisätyön rivi (nimi + hinta + askellin +
   sisennys) on leveämpi kuin kortti 320 px:n näytöllä — silloin koko
   lisätyölaatikko työntyi kortin reunan yli. */
.extras{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.extra{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 22px;background:none;border:none;border-top:1px solid var(--line);cursor:pointer;text-align:left;font-family:inherit}
.extra:nth-child(2n){border-left:1px solid var(--line)}
.extra.on{background:var(--green-soft)}
.extra-chk{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line2);display:grid;place-items:center;font-size:11px;color:transparent;flex:0 0 auto}
.extra.on .extra-chk{background:var(--green);border-color:var(--green);color:#fff}
/* min-width:0 — ilman sitä flex-kohde ei kutistu tekstinsä alle, ja
   pitkä lisätyön nimi levitti rivin kortin yli 320 px:n näytöillä
   (mitattu iPhone SE: kortti 266 px, rivi 304 px). */
.extra-nm{font-size:14px;color:var(--text);flex:1;min-width:0}
.extra-pr{font-weight:700;font-size:13px;color:var(--green);white-space:nowrap}
.extra-note{font-weight:600;font-size:11.5px;color:var(--mute)}
/* Määrällinen lisätyö: div eikä button (askellin ei mahdu napin sisään),
   joten vasen reunus tasataan käsin valintaruudullisten kanssa. Vie oman
   rivinsä, koska nimi + hinta + askellin ei mahdu puolikkaaseen sarakkeeseen.
   Kaksoisluokka voittaa .extra:nth-child(2n):n reunuksen. */
.extra.extra-q{cursor:default;padding-left:51px;grid-column:1/-1;border-left:none}
.extra-stp{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.extra-stp .stp{width:27px;height:27px;border-radius:7px;font-size:16px}
.extra-stp .qty{font-size:15px;min-width:18px}
.extra.off{opacity:.4;cursor:not-allowed}
.wtype-tier{display:block;margin-top:3px;color:var(--green);font-weight:600}
/* Seuraavan määräportaan vihje: erottuu perusselitteestä, koska se
   muuttuu valinnan mukana ja on kehotus, ei staattinen tieto. */
.wtype-next{display:block;margin-top:4px;padding:3px 8px;border-radius:6px;background:rgba(46,158,99,.12);color:var(--green);font-weight:700;font-size:13px;width:fit-content}
.wtype-next[hidden]{display:none}
/* Määräalennuksen sirut: portaikko toimintana eikä alaviitteenä. Napautus
   asettaa määrän portaan alkuun, ja aktiivinen siru kertoo missä ollaan.
   Sirut ovat oma rivinsä ikkunakortin alla, koska ne koskevat vain sitä. */
.wtype-tiers{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 22px 11px;background:var(--card);border-bottom:1px solid var(--line)}
.wtype-tiers .tl{font-size:12.5px;font-weight:700;color:var(--mute)}
.tchip{font-family:inherit;font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);border:1.5px solid transparent;border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:.16s var(--ease)}
.tchip b{font-weight:800}
.tchip:hover{border-color:var(--green)}
.tchip.on{background:var(--green);color:#fff}
/* Harvinaisemmat kohteet avautuvat napista: neljä riviä näkyvissä, ei kuutta. */
.morecats{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--green);background:var(--card);border:none;border-bottom:1px solid var(--line);padding:14px 22px;cursor:pointer;text-align:left}
.morecats .cv{flex:0 0 auto;transition:transform .2s var(--ease)}
.morecats[aria-expanded="true"] .cv{transform:rotate(180deg)}
/* Kirjoitettava määrä: luku on napautettava ja muuttuu kentäksi. */
.qty.tap{cursor:text;border-bottom:1.5px dashed var(--line2)}
.qty-edit{width:46px;border:1.5px solid var(--green);border-bottom:1.5px solid var(--green);border-radius:8px;text-align:center;padding:2px 0;font-family:inherit;background:var(--card);color:var(--ink)}

.wtype-price s{opacity:.55;font-weight:600}
.cp-unit{font-size:12px;color:var(--dmute);font-weight:600}
.quote{position:sticky;top:88px;background:var(--deep);color:var(--dtext);border-radius:var(--r-lg);padding:26px}
.q-t{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dmute)}
.rc-lines{margin:16px 0 4px;min-height:40px}
.rc-empty{font-size:15px;color:var(--dmute)}
.cp-line{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--dtext);padding:8px 0;border-bottom:1px solid rgba(246,247,243,.13)}
.cp-line b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cp-line .cnt{color:var(--green-l);font-weight:700}
.q-total{margin-top:16px;padding-top:16px;border-top:1px solid rgba(246,247,243,.25)}
.q-total .pt{font-size:12px;color:var(--dmute)}
.q-total .pv{font-weight:800;font-size:50px;line-height:1;display:flex;align-items:baseline;gap:4px;margin-top:6px;color:#fff;font-variant-numeric:tabular-nums}
.q-total .pv small{font-size:.38em;color:var(--green-l)}
.q-net{font-size:14px;color:var(--dtext);margin-top:10px}.q-net b{color:var(--green-l)}
/* Lyhyt muoto vain kapealle hintapalkille, ks. mediakysely. */
.qn-s{display:none}
.q-meta{display:flex;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(246,247,243,.13)}
.q-meta b{display:block;font-weight:800;font-size:19px;color:#fff}
.q-meta span{font-size:12px;color:var(--dmute)}
.q-btn{margin-top:18px;width:100%;background:var(--green-l);border:none;color:#06231a}.q-btn:hover{background:#37b071}
.q-note{font-size:11.5px;color:var(--dmute);text-align:center;margin-top:11px}
/* Näkyy vain puhelimessa, ks. .order-note mediakyselyssä. */
.order-note{display:none;font-size:12px;line-height:1.5;color:var(--mute);padding:12px 14px;border-top:1px solid var(--line)}

/* BOOKING */
/* ---------- VAIHEKORTTI ----------
   Koko varaus on yhdellä kortilla etusivulla: laskuri → postinumero → aika →
   yhteystiedot → kuittaus. Sivu ei vaihdu kertaakaan, vaan kortin sisältö
   vaihtuu paikallaan. Laskuri tarvitsee kaksi saraketta, loput vaiheet ovat
   kapeita — siksi kortilla on kaksi leveyttä joiden välillä liu'utaan. */
.book-wrap{margin:clamp(28px,3.5vw,42px) auto 0}
.stepcard{max-width:560px;margin-inline:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh);overflow:hidden}
.stepcard.wide{max-width:var(--max)}
/* Laskurivaihe tuo oman korttinsa (.order/.quote), joten kehys on siinä turha. */
.stepcard.wide{background:none;border:none;box-shadow:none;padding:0;overflow:visible}
.stepcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;min-height:26px}
.stepback{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;
  color:var(--green);font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.stepback:hover{text-decoration:underline;text-underline-offset:3px}
.stepback[hidden]{display:none}
.steptag{font-weight:800;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.stepdots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.stepdots i{width:7px;height:7px;border-radius:99px;background:var(--line2);transition:.32s var(--ease)}
.stepdots i.on{width:22px;background:var(--green)}
.stepdots i.done{background:var(--green-l)}
.step{animation:step-in .22s var(--ease) both}
.step[hidden]{display:none}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stepcard.leaving .step{animation:step-out .13s var(--ease) both}
@keyframes step-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
.steprecap{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--green-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 16px;margin-bottom:18px}
.steprecap .when{font-weight:800;font-size:15px;color:var(--ink);line-height:1.3}
.steprecap .svc{font-size:13px;color:var(--text);margin-top:2px}
.steprecap .chg{flex:0 0 auto;background:none;border:none;padding:0;color:var(--green);
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bcal{min-width:0}
.bcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mname{font-weight:800;font-size:19px;color:var(--ink);text-transform:capitalize}
.mnav{width:36px;height:36px;border-radius:9px;border:1.5px solid var(--line2);background:var(--card);color:var(--green);cursor:pointer;display:grid;place-items:center}
.mnav:hover{border-color:var(--green)}.mnav:disabled{opacity:.35;cursor:not-allowed}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;max-width:460px;margin-inline:auto}
.dow span{text-align:center;font-size:11.5px;font-weight:700;color:var(--mute);text-transform:uppercase}
.grid-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:460px;margin-inline:auto}
.day{aspect-ratio:1;border-radius:9px;border:1.5px solid transparent;background:var(--alt);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative}
.day.empty{background:transparent;cursor:default}
.day.off{background:transparent;color:var(--line2);cursor:not-allowed}
.day.full{color:var(--line2);cursor:not-allowed;text-decoration:line-through}
.day.free{background:var(--card);border-color:var(--line)}
.day.free:hover{border-color:var(--green)}
.day.free .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.day.sel{background:var(--green);color:#fff;border-color:var(--green)}.day.sel .dot{background:#fff}
.day.today::after{content:"";position:absolute;bottom:6px;width:12px;height:2px;background:var(--green)}
.slots-wrap{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.slots-title{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:11px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{padding:11px 6px;border-radius:9px;border:1.5px solid var(--line2);background:var(--card);color:var(--green);font-weight:700;font-size:14.5px;cursor:pointer;text-align:center;font-variant-numeric:tabular-nums}
.slot:hover{border-color:var(--green)}.slot.sel{background:var(--green);color:#fff;border-color:var(--green)}
.slots-empty{font-size:14px;color:var(--mute)}
/* Ei enää oma korttinsa: kehys ja varjo tulevat .stepcardilta. */
.bside{min-width:0}
.bside h3{font-size:20px;margin-bottom:4px;color:var(--ink)}
.bsub{font-size:14px;color:var(--mute);margin-bottom:18px}
.bsum{background:var(--deep);color:var(--dtext);border-radius:var(--r);padding:16px 18px;margin-bottom:18px;font-size:13.5px}
.bsum b{color:#fff;font-weight:700}
.bsum .price{font-weight:800;font-size:23px;color:var(--green-l);display:block;margin-top:4px}
.bsum .when{margin-top:10px;display:flex;gap:8px;align-items:center;color:var(--green-l);font-weight:700;font-size:13px}
.bk-field{margin-bottom:12px}
.bk-field label{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:5px}
.bk-input{width:100%;padding:12px 14px;border-radius:9px;border:1.5px solid var(--line2);background:var(--bg);font-family:inherit;font-size:15px;color:var(--ink)}
.bk-input:focus{outline:none;border-color:var(--green)}
/* Alennuskoodin tarkistuksen tulos kentän alla. Väri asetetaan JS:stä
   (vihreä = kelpaa, punainen = ei), teksti kertoo aina syyn. */
.bk-note{display:block;margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.4}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bk-err{background:#f4e2d3;color:#9a5a1c;border-radius:9px;padding:11px 14px;font-size:13.5px;margin:8px 0}
/* Ei flexiä: teksti sisältää linkkejä, jotka flex-lapsina katkesivat omille
   riveilleen kesken lauseen. Ikoni riittää tekstin sisään. */
.bk-trust{font-size:12.5px;line-height:1.55;color:var(--mute);margin-top:13px}
.bk-trust svg{display:inline;vertical-align:-2px;margin-right:6px}
.book-done{text-align:center;padding:8px 0}
.book-done h3{font-size:20px;color:var(--ink)}
.book-done .ok{width:58px;height:58px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 16px;color:var(--green)}
.book-done .refno{font-weight:800;font-size:22px;color:var(--green);margin:8px 0}

/* ---------- POSTINUMEROVAIHE ----------
   Varauksen ainoa pakollinen ensiaskel kalenterin jälkeen: ilman postinumeroa
   ei tiedetä kenen alueella kohde on eikä aikoja voi näyttää. */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green);
  font-weight:700;font-size:13.5px;padding:7px 15px;border-radius:999px;margin-bottom:14px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.gate-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.gate-tab{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:13px 10px;cursor:pointer;font:inherit;color:var(--text);text-align:center;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.gate-tab b{display:block;font-size:14.5px;color:var(--ink)}
.gate-tab span{display:block;font-size:12.5px;color:var(--green);font-weight:700;margin-top:2px}
.gate-tab:hover{border-color:var(--line2)}
.gate-tab.on{border-color:var(--green);background:var(--green-soft)}
.gate-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.gate-price{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1;
  font-variant-numeric:tabular-nums}
.gate-net{color:var(--green);font-weight:700;font-size:14.5px;margin-top:7px}
.gate-meta{color:var(--mute);font-size:13px;margin-top:4px}
.gate-trust{display:flex;align-items:center;gap:6px;background:var(--alt);border-radius:999px;
  padding:6px 12px;white-space:nowrap;flex-shrink:0}
.gate-trust svg{color:var(--green);flex:0 0 auto}
.gate-trust b{font-size:13.5px;color:var(--ink)}
.gate-trust .n{font-size:12.5px;color:var(--mute)}
.gate-edit{display:inline-block;margin-top:14px;background:none;border:none;padding:0;
  font-family:inherit;color:var(--green);font-weight:700;font-size:14px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.gate-field{margin-top:22px;background:var(--green-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 16px 18px}
.gate-field label{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;
  color:var(--ink);letter-spacing:-.01em}
.gate-step{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--green);color:#fff;font-size:13px;font-weight:800;flex:0 0 auto}
.gate-hint{display:block;font-size:14px;line-height:1.55;color:var(--text);margin:7px 0 12px}
.gate-hint b{color:var(--ink)}
/* Iso väljä kenttä: viisi numeroa on koko syöte, joten se saa näkyä.
   Tasalevyiset numerot pitävät leveyden vakaana kirjoitettaessa. */
.gate-field .gate-postal{font-size:26px;font-weight:800;letter-spacing:.16em;text-align:center;
  padding:14px 12px;max-width:220px;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--card)}
.gate-field .gate-postal::placeholder{font-weight:600;letter-spacing:.16em;color:#B9C3BB}
.gate-cta{width:100%;margin-top:16px;padding:15px;font-size:16px}
.gate-ticks{display:flex;justify-content:center;gap:18px;margin-top:14px;
  font-size:13.5px;color:var(--green);font-weight:700}
.gate-ticks.col{flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}
.gate-more{margin-top:14px;text-align:center}
.gate-more summary{cursor:pointer;color:var(--ink);font-weight:700;font-size:14px;
  text-decoration:underline;text-underline-offset:3px}
.gate-more p{margin-top:10px;text-align:left;font-size:14px;line-height:1.65;color:var(--text)}
.gate-lead{font-size:15.5px;line-height:1.65;color:var(--text)}
.gate-note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--mute)}
.area-note{border:1px solid var(--line);background:var(--green-soft);border-radius:10px;padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.55}
.area-note b{display:block;color:var(--ink)}
.area-note span{display:block;color:var(--mute);margin-top:2px}
.area-note.ok{border-color:rgba(33,90,67,.35)}
.area-note.bad{background:#FDF3F2;border-color:rgba(200,80,70,.35)}
.area-note a{color:var(--green);font-weight:700}

/* WHY */
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,64px);align-items:center}
.why h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;color:var(--ink)}
.why p{margin-top:18px;font-size:17px;color:var(--text);max-width:52ch}
/* Vakuutus- ja takuurivi. Korvasi Google-arvostelumerkin: arvosteluja ei ole
   vielä kertynyt, joten tähtien tilalla on asia, jonka voi tarkistaa. */
.tbadge{display:flex;align-items:flex-start;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-top:28px;box-shadow:var(--sh)}
.tbadge-i{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.tbadge-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.tbadge-main b{font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.tbadge-main span{font-size:14px;color:var(--mute);line-height:1.5}
.why-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.wstat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)}
.wstat b{display:block;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.wstat b .a{color:var(--green)}
.wstat>span{font-size:13.5px;color:var(--mute);margin-top:4px;display:block}
.why-fig{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh);border:1px solid var(--line)}
.why-fig svg,.why-fig img{width:100%;height:100%;display:block;object-fit:cover}

/* SÄÄSTÖARVIO (entinen arvostelugrid — sama ruudukko, eri sisältö) */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(34px,4vw,50px)}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh)}
.rev p{font-size:15.5px;color:var(--text);flex:1;margin:0}
.save-n{font-size:clamp(34px,4.4vw,42px);font-weight:800;color:var(--green);line-height:1;letter-spacing:-.03em}
.save-l{font-size:14px;color:var(--mute);font-weight:600;margin-top:-4px}
.rev h3{font-size:17px;color:var(--ink);letter-spacing:-.01em}
.save-list{margin:0;padding-left:18px;font-size:15.5px;color:var(--text);flex:1}
.save-list li{margin-bottom:7px}
.save-note{font-size:13.5px;color:var(--mute);margin-top:20px;max-width:78ch}

/* CTA — syvänvihreä lohko (ryhtiä, luottamusta) */
.cta{background:var(--deep);border-radius:var(--r-lg);padding:clamp(36px,5vw,60px);text-align:center;color:var(--dtext)}
.cta h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.cta p{color:var(--dtext);margin-top:12px;font-size:17px;max-width:48ch;margin-inline:auto}
.cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta .btn-p{background:var(--green-l);color:#06231a}.cta .btn-p:hover{background:#37b071}

/* FAQ */
.faq{max-width:800px;margin:clamp(30px,4vw,46px) auto 0}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh)}
.q.op{border-color:var(--green)}
.q button{width:100%;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 22px;background:none;border:none;cursor:pointer;font-weight:700;font-size:17px;color:var(--ink);text-align:left;font-family:inherit}
.q .cv{color:var(--green);transition:.25s}.q.op .cv{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.q .a p{padding:0 22px 20px;color:var(--mute);font-size:15px}

/* FOOTER — syvänvihreä */
.mfoot{background:var(--deep);color:var(--dmute);padding:clamp(54px,7vw,84px) 0 30px}
.mf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(246,247,243,.14)}
.mf-brand .logo{color:#fff}.mf-brand .logo .d{color:#fff}
.mf-brand p{max-width:32ch;margin-top:14px;font-size:14.5px;color:var(--dmute)}
.mf-rate{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;color:var(--dtext);font-weight:600}
.mf-rate svg{color:#2E9E63;flex:0 0 auto}
.mf-col h4{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.mf-col a{display:block;color:var(--dmute);font-size:14.5px;margin-bottom:10px}.mf-col a:hover{color:var(--green-l)}
/* Aukioloajat ovat tekstiä, eivät linkki — sama rytmi kuin sarakkeen linkeillä. */
.mf-col .mf-hours{display:block;color:var(--dmute);font-size:14.5px;margin-bottom:10px}
.mf-col .mf-hours b{display:block;color:var(--dtext);font-weight:600}
/* Kapealla näytöllä rivi saa katketa välimerkin kohdalta, ei kellonajan sisältä. */
.mf-col .mf-hours span{white-space:nowrap}
.mf-cities{padding:26px 0;border-bottom:1px solid rgba(246,247,243,.14)}
.mf-cities h4{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.mf-cities .list{display:flex;flex-wrap:wrap;gap:8px 10px}
.mf-cities .list a{color:var(--dmute);font-size:14px}.mf-cities .list a:hover{color:var(--green-l)}
.mf-cities .list a::after{content:"·";margin-left:10px;color:#3f5a49}
.mf-cities .list a:last-child::after{content:""}
.mf-bot{display:flex;justify-content:space-between;padding-top:22px;font-size:13px;color:#7a9384;flex-wrap:wrap;gap:8px}
.mf-bot a:hover{color:var(--green-l)}

/* mobile sticky cta — EI näkyvissä koko ajan.
   Palkki nousee esiin vasta kun ruudulla ei ole omaa CTA:ta (hero, laskuri,
   footer). Aiemmin se roikkui pohjalla joka hetki: se peitti sisältöä ja
   toisti napin, joka oli jo näkyvissä. Näyttölogiikka on _shared.js:ssä. */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:85;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line2);visibility:hidden;transform:translateY(115%);transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s}
.mcta.show{visibility:visible;transform:none;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.mcta .btn{flex:1;padding:14px}.mcta .btn.tel{flex:0 0 auto}

@media(max-width:960px){
  .hero-grid,.calc-wrap,.why{grid-template-columns:1fr;gap:36px}
  .hero-card,.why-fig{order:-1;aspect-ratio:16/10}.quote{position:static}
  .metrics,.cards3,.revs{grid-template-columns:1fr}
  .mf-grid{grid-template-columns:1fr 1fr}
  .ntel{display:none}
}
@media(max-width:620px){
  .sec{padding:52px 0}

  /* NAV — kompakti kiinteä palkki. Aluesivujen hero on VAALEA (toisin kuin
     etusivun koko ruudun tumma hero), joten navi on normaali vaalea palkki
     tummalla logolla ja burgerilla. Aiemmin tässä oli etusivulta kopioitu
     läpinäkyvä valkoinen navi, jolloin logo ja burger jäivät näkymättömiin
     vaaleaa heroa vasten (mobiilibugi). */
  nav.top{background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.1)}
  nav.top .wrap{height:62px;gap:12px}
  .nlinks{display:none}
  /* Nappi pois navista puhelimessa: alalaidan .mcta-palkki kantaa saman CTA:n,
     ja 23px logo + nappi + burger eivat mahtuneet 390px leveyteen (nappi meni logon paalle). */
  nav.top .btn-p{display:none}
  .burger{display:flex;margin-left:auto}
  .nlinks.op{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--bg);padding:14px 24px;border-bottom:1px solid var(--line)}

  /* HERO — koko levyinen taustakuva + tumma peitto + keskitetty valkoinen teksti.
     Korkeus on TAYSI ruutu, ei 90vh: 90vh jatti taitteeseen kaistan tyhjaa ja
     seuraavan osion otsikon kurkkimaan heti latauksessa. svh = pieni viewport
     (osoitepalkki nakyvissa), joten hero ei kasva ruutua korkeammaksi Safarissa.
     vh jaa fallbackiksi vanhemmille selaimille. */
  header.hero{position:relative;padding:0;min-height:100vh;min-height:100svh;display:flex;align-items:center}
  /* HUOM: wrapilla EI saa olla position:relative. Se on .hero-card:in
     (absolute; inset:0) sijoitteluankkuri, ja wrapin korkeus on vain sisallon
     verran — kuva jai silloin pystysuunnassa keskitetyksi laatikoksi ja hero:n
     ylä- ja alareunaan jai vaalea kaista. Ankkuri on nyt header.hero, joten
     kuva tayttaa koko ruudun. Teksti pysyy kuvan paalla omalla z-indeksillaan. */
  header.hero .wrap.hero-grid{display:block;max-width:none;padding:78px 24px 132px;text-align:center}
  .hero-grid>div:first-child{position:relative;z-index:1}
  .hero-card{position:absolute;inset:0;z-index:0;order:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;opacity:1;transform:none}
  .hero-card img{width:100%;height:100%;object-fit:cover}
  .hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,42,30,.42),rgba(16,42,30,.72) 55%,rgba(16,42,30,.88))}
  /* Pilleri on inline-flex + nowrap, joten sen min-content = koko teksti
     yhdellä rivillä. header.hero on flex, joten liian pitkä pilleri venytti
     .wrap:in leveämmäksi kuin ruutu ja overflow-x:clip leikkasi lopun pois.
     Siksi pisin sana piilotetaan puhelimessa ja pilleri saa rivittyä. */
  .hero .rating{justify-content:center;color:#fff;font-size:13.5px;background:rgba(255,255,255,.15);padding:8px 16px;border-radius:999px;margin:0 auto 18px;width:max-content;max-width:100%;flex-wrap:wrap}
  .hero .rating .r-long{display:none}
  .hero .rating svg{color:#8FE3B4}
  .hero h1{color:#fff}
  .hero h1 .a{color:#8FE3B4}
  .hero-sub{color:rgba(255,255,255,.9);margin:20px auto 0}
  .hero-sub{font-size:17px;max-width:34ch}
  .hero-cta{flex-direction:column;align-items:center;gap:10px;margin-top:24px}
  .hero-cta .btn{width:100%;max-width:320px}
  .hero-cta .btn-o{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55)}
  /* Ilman tata check-ikoni jai roikkumaan kaksirivisen, keskitetyn
     hienotekstin vasempaan reunaan. */
  .hero-fine{justify-content:center;text-align:center;color:rgba(255,255,255,.82);font-size:13px;max-width:330px;margin-inline:auto;line-height:1.5}
  .hero-fine svg{display:none}

  /* METRICS — läpinäkyvä statistiikkapalkki hero:n alareunaan */
  .metrics{grid-template-columns:repeat(3,1fr);gap:9px;margin-top:-92px;position:relative;z-index:3}
  .metric{padding:15px 7px;text-align:center;border-radius:14px}
  .metric b{font-size:19px}
  .metric>span{font-size:10.5px;margin-top:6px;line-height:1.35}

  .extras{grid-template-columns:minmax(0,1fr)}.extra:nth-child(2n){border-left:none}
  /* Sisennys pois kapealla: se oli varattu valintaruudun leveydelle,
     mutta yhden palstan taitossa se vain vie tilaa askeltimelta. */
  .extra.extra-q{padding-left:14px}

  /* HINTALASKURI puhelimessa.
     Ongelma: yhden palstan taitossa yhteenveto valui listan alle, joten
     hinta oli ruudun ulkopuolella juuri silloin kun kohteita lisattiin,
     ja koko laskuri oli monta nakymaa pitka.
     Ratkaisu: yhteenveto nousee listan ylapuolelle (order:-1) ja jaa siihen
     kiinni navin alle, kutistettuna yhdeksi hintapalkiksi. Lista tiivistetaan.
     HUOM: .stepcard oli overflow:hidden, mika rikkoo position:sticky:n
     (siita tulee lapsille scrollport). overflow:clip leikkaa samoin mutta
     ei luo scrollporttia, joten sticky toimii. */
  .stepcard{overflow:clip}
  .calc-wrap{gap:16px}
  .quote{order:-1;position:sticky;top:62px;z-index:30;padding:13px 15px;border-radius:14px;
    display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;
    box-shadow:0 14px 28px -16px rgba(0,0,0,.6)}
  .q-t,.rc-lines,.q-meta,.q-note{display:none}
  .q-total{grid-column:1;grid-row:1;margin:0;padding:0;border-top:none}
  .q-total .pt{font-size:10.5px}
  .q-total .pv{font-size:28px;margin-top:1px}
  .q-total .pv small{font-size:.44em}
  .q-net{grid-column:1;grid-row:2;margin-top:2px;font-size:12.5px;line-height:1.3}
  .qn-l{display:none}.qn-s{display:inline}
  .q-btn{grid-column:2;grid-row:1/span 2;width:auto;margin-top:0;padding:13px 18px;font-size:15px;white-space:nowrap}
  .q-btn-long{display:none}
  .order-note{display:block}

  /* Rivit tiiviimmiksi: kuvausteksti pois, pienemmat ikonit ja steppetit. */
  .wtype{padding:11px 14px;gap:11px}
  .wtype-ic,.wtype-ic svg{width:23px;height:23px}
  /* Nimi ja hinta samalle riville allekkain sijoittamisen sijaan: se yksin
     lyhentaa kuuden rivin listaa noin 130 px. */
  .wtype-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .wtype-name{font-size:15.5px}
  .wtype-desc{display:none}
  .wtype-tiers{padding:9px 14px 10px;gap:6px}
  .wtype-tiers .tl{width:100%;font-size:11.5px}
  .tchip{flex:1 1 auto;text-align:center}
  .tchip{font-size:12.5px;padding:5px 10px}
  .morecats{padding:13px 14px;font-size:14px}
  /* Seuraavan portaan vihje omalle rivilleen: `.wtype-top` on puhelimessa
     rivitaittuva, ja vihje on koko rivin levyinen kehotus. */
  .wtype-next{width:100%}
  .wtype-price{font-size:12px;margin-top:0}
  .stp{width:31px;height:31px;font-size:17px}
  .qty{font-size:18px;min-width:24px}
  .order-hd,.extras-hd{padding-left:14px;padding-right:14px}
  .extra{padding:10px 14px}

  /* Miksi-osion luvut samaan kompaktiin kolmen palstan riviin kuin hero:n mittarit */
  .why-stats{grid-template-columns:repeat(3,1fr);gap:9px}
  .wstat{padding:15px 7px;text-align:center;border-radius:14px}
  .wstat b{font-size:19px}
  .wstat>span{font-size:10.5px;margin-top:6px;line-height:1.35}
  .slots{grid-template-columns:repeat(3,1fr)}
  /* Lomakekentät allekkain puhelimessa: inputin oma min-content venytti
     saraketta, jolloin kortti valui ruudun oikean reunan yli. */
  .bk-row{grid-template-columns:1fr}
  .bcal,.bside,.bk-input{min-width:0}
  .stepcard{padding:18px}
  .steprecap{flex-direction:column;align-items:flex-start;gap:8px}
  .gate-tabs{grid-template-columns:1fr}
  .gate-top{flex-direction:column}
  /* Footer puhelimessa: brandi omalle riville, linkkipalstat pareittain.
     Kahden palstan ruudukossa pitka luottamusrivi katkesi kolmelle riville. */
  .mf-grid{grid-template-columns:1fr 1fr;gap:26px}
  .mf-brand{grid-column:1/-1}
  /* Ei body-täytettä: palkki on piilossa footerin kohdalla, joten varattu
     76px jäi vain tyhjäksi kaistaleeksi sivun loppuun. */
  .mcta{display:flex}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{transition:none!important}}

/* ---------- TOIMINTA-ALUESIVUJEN OMAT OSAT ----------
   Nämä eivät ole muualla sivustolla, joten ne on lisätty tähän eikä
   kopioitu taloyhtio.html:stä. */

/* kaupunginosalista */
.osat{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.osa{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:14.5px;font-weight:600;color:var(--ink)}

/* hintataulukko */
.htbl{width:100%;border-collapse:collapse;margin-top:26px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.htbl th,.htbl td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);font-size:15.5px}
.htbl thead th{background:var(--green-soft);color:var(--ink);font-weight:800;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase}
.htbl tr:last-child td{border-bottom:none}
.htbl td:last-child{text-align:right;font-weight:800;color:var(--ink);white-space:nowrap}
.htbl td .mut{display:block;font-size:13px;color:var(--mute);font-weight:500;margin-top:2px}

/* UKK ilman JavaScriptiä: <details> toimii myös jos skriptit estetään */
.faq-d{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-top:12px;overflow:hidden}
.faq-d summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--ink);
  font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d summary::after{content:"+";font-size:22px;color:var(--green);font-weight:700;flex:0 0 auto}
.faq-d[open] summary::after{content:"–"}
.faq-d p{padding:0 22px 20px;color:var(--text);font-size:15.5px}

/* alueristikko hub-sivulla */
.aluegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;margin-top:34px}
.aluecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:var(--sh);transition:.2s var(--ease);display:block}
.aluecard:hover{border-color:var(--green);transform:translateY(-3px)}
.aluecard b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.aluecard span{display:block;font-size:14.5px;color:var(--mute);margin-top:7px;line-height:1.5}
/* display uudelleen, koska .aluecard span (0,1,1) voittaa .lnk:n (0,1,0)
   ja pudottaisi nuolen omalle rivilleen */
.aluecard .lnk{display:inline-flex;margin-top:14px}

/* CTA-palkki */
.ctaband{background:var(--deep);border-radius:var(--r-lg);padding:clamp(34px,5vw,54px);text-align:center}
.ctaband h2{color:#fff;font-size:clamp(26px,3.4vw,38px);max-width:22ch;margin-inline:auto}
.ctaband p{color:var(--dtext);margin-top:14px;max-width:52ch;margin-inline:auto}
.ctaband .hero-cta{justify-content:center;margin-top:26px}

/* murupolku */
.crumb{font-size:14px;color:var(--mute);padding-top:18px}
.crumb a{color:var(--green);font-weight:600}

/* Vaalea kehä primaarinapin ympärille tummalla CTA-palkilla.
   --green (#217A4E) tummaa --deep-taustaa (#163A28) vasten on vain 2,4:1,
   eli nappi sulautuu taustaan. Kehä nostaa rajan yli 3:1:n muuttamatta
   napin väriä — vaaleampi vihreä olisi korjannut rajan mutta pudottanut
   valkoisen tekstin kontrastin 3,4:1:een. */
.ctaband .btn-p{box-shadow:0 0 0 1.5px rgba(246,247,243,.55)}

/* Yhteenveto vaaleana: sama laskuri, sama ilme joka sivulla. Tumma paneeli
   luki "täytä lomake" siinä kohtaa jossa piti lukea "katso hinta". */
.quote{background:var(--card);color:var(--text);border:1px solid var(--line);padding:20px;box-shadow:var(--sh)}
.q-t,.q-total .pv,.q-meta b{color:var(--ink)}
.q-total .pt,.q-note,.q-net,.q-meta span{color:var(--mute)}
.q-total{border-top-color:var(--line)}
.q-total .pv{font-size:38px}
.q-total .pv small,.q-net b{color:var(--green)}
.rc-lines,.rc-empty{color:var(--mute)}
.q-btn{background:var(--green);color:#fff}
.wtype{padding-top:12px;padding-bottom:12px}