:root {
  --dv-color-primary: #0a5e01;
  --dv-color-primary-contrast: #ffffff;
  --dv-color-secondary: #47953f;
  --dv-color-accent: #7da071;
  --dv-color-bg: #ffffff;
  --dv-color-surface: #f5f5f5;
  --dv-color-text: #202020;
  --dv-color-muted: #333333;
  --dv-color-border: #e0e0e0;
  --dv-font-heading: 'Montserrat', system-ui, sans-serif;
  --dv-font-body: 'Montserrat', system-ui, sans-serif;
  --dv-font-size-base: 16px;
  --dv-line-height: 1.6;
  --dv-font-size-h1: calc(var(--dv-font-size-base) * 3.052);
  --dv-font-size-h2: calc(var(--dv-font-size-base) * 2.441);
  --dv-font-size-h3: calc(var(--dv-font-size-base) * 1.953);
  --dv-font-size-h4: calc(var(--dv-font-size-base) * 1.563);
  --dv-font-size-h5: calc(var(--dv-font-size-base) * 1.250);
  --dv-font-size-h6: calc(var(--dv-font-size-base) * 1.000);
  --dv-radius: 12px;
  --dv-spacing: 1rem;
  --dv-container-max: 1240px;
  --dv-container-gutter: clamp(1.25rem, 4vw, 2rem);
  --dv-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--dv-color-bg);color:var(--dv-color-text);font-family:var(--dv-font-body);font-size:var(--dv-font-size-base);line-height:var(--dv-line-height)}
h1,h2,h3,h4,h5,h6{font-family:var(--dv-font-heading);line-height:1.2;margin:0 0 .5em}
h1{font-size:var(--dv-font-size-h1)}h2{font-size:var(--dv-font-size-h2)}h3{font-size:var(--dv-font-size-h3)}
a{color:var(--dv-color-primary)}
img,video{max-width:100%;height:auto}
.dv-main{max-width:var(--dv-container-max);margin-inline:auto;padding-inline:var(--dv-container-gutter)}
[hidden]{display:none!important}
.dv-consent-launcher{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:2147482999;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:1px solid var(--dv-color-border);border-radius:50%;background:var(--dv-color-surface);color:var(--dv-color-text);box-shadow:var(--dv-shadow,0 2px 12px rgba(0,0,0,.2));cursor:pointer}
.dv-consent-launcher:focus-visible,.dv-consent__close:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:3px}
.dv-consent__close{justify-self:end;border:0;background:transparent;color:inherit;min-width:2.75rem;min-height:2.75rem;font-size:1.5rem;cursor:pointer}
.dv-consent{position:fixed;z-index:2147483000;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--dv-spacing) * .75);padding:var(--dv-spacing);max-height:calc(100vh - 2 * var(--dv-spacing));max-height:calc(100dvh - 2 * var(--dv-spacing));overflow:auto;background:var(--dv-color-surface);color:var(--dv-color-text);border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);box-shadow:var(--dv-shadow, 0 -2px 24px rgba(0,0,0,.18));font-family:var(--dv-font-body);font-size:.95rem;line-height:var(--dv-line-height)}
.dv-consent.dv-consent--bottom{inset:auto 0 0 0;transform:none;width:100%;border-radius:0;border-inline-width:0;border-block-end-width:0}
.dv-consent.dv-consent--bottom-left{inset:auto auto var(--dv-spacing) var(--dv-spacing);transform:none;width:min(28rem, calc(100vw - 2 * var(--dv-spacing)))}
.dv-consent.dv-consent--bottom-right{inset:auto var(--dv-spacing) var(--dv-spacing) auto;transform:none;width:min(28rem, calc(100vw - 2 * var(--dv-spacing)))}
.dv-consent.dv-consent--center{inset:50% auto auto 50%;width:min(32rem, calc(100vw - 2 * var(--dv-spacing)));transform:translate(-50%,-50%)}
.dv-consent__body{display:flex;flex-direction:column;gap:.35rem}
.dv-consent__title{margin:0;font-family:var(--dv-font-heading);font-size:1.05rem;font-weight:600}
.dv-consent__text{margin:0;color:var(--dv-color-muted)}
.dv-consent__link{align-self:flex-start;color:var(--dv-color-primary)}
.dv-consent__cats{display:flex;flex-direction:column;gap:.5rem;max-height:40vh;overflow:auto;padding-block-start:.5rem;border-block-start:1px solid var(--dv-color-border)}
.dv-consent__cat{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.dv-consent__cat-input{flex:none;margin-block-start:.2rem;accent-color:var(--dv-color-primary)}
.dv-consent__cat-input:disabled{cursor:not-allowed}
.dv-consent__cat-text{display:flex;flex-direction:column;gap:.15rem}
.dv-consent__cat-label{font-weight:600}
.dv-consent__cat-desc{color:var(--dv-color-muted);font-size:.85em}
.dv-consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.dv-consent__btn{font:inherit;cursor:pointer;padding:.55rem 1.1rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-bg);color:var(--dv-color-text)}
.dv-consent__btn:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-consent__btn--primary{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary)}
.dv-consent__btn--ghost{margin-inline-end:auto;background:transparent;border-color:transparent;text-decoration:underline;color:var(--dv-color-text)}
@media (max-width:480px){.dv-consent__actions{flex-direction:column;align-items:stretch}.dv-consent__btn--ghost{margin-inline-end:0}}
.dv-booking{display:flex;flex-direction:column;gap:.6rem;font-family:var(--dv-font-body);color:var(--dv-color-text)}
.dv-booking--busy{opacity:.6}
.dv-booking__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dv-booking__month{margin:0;font-family:var(--dv-font-heading);font-size:1.05rem;font-weight:600;text-align:center;flex:1 1 auto}
.dv-booking__nav{font:inherit;cursor:pointer;min-width:40px;min-height:40px;padding:.4rem .7rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__nav:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__nav:disabled{opacity:.5;cursor:not-allowed}
.dv-booking__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dv-booking__weekdays{display:contents}
.dv-booking__week{display:contents}
.dv-booking__weekday{padding:.25rem 0;text-align:center;font-size:.8em;color:var(--dv-color-muted)}
.dv-booking__cell{display:block}
.dv-booking__cell--empty{min-height:40px}
.dv-booking__day{font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-width:40px;min-height:40px;padding:.3rem 0;border:1px solid transparent;border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__day:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__daynum{line-height:1}
.dv-booking__dot{display:block;width:6px;height:6px;border-radius:50%;background:transparent}
.dv-booking__day--free .dv-booking__dot{background:var(--dv-color-primary)}
.dv-booking__day--free{border-color:var(--dv-color-border)}
.dv-booking__day--today{box-shadow:inset 0 0 0 1px var(--dv-color-accent)}
.dv-booking__day--none{color:var(--dv-color-muted);cursor:default}
.dv-booking__day--selected{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary);font-weight:700}
.dv-booking__day--selected .dv-booking__dot{background:var(--dv-color-primary-contrast)}
.dv-booking__day[aria-disabled="true"]{opacity:.65;cursor:default}
.dv-booking__hint{margin:0;color:var(--dv-color-muted);font-size:.85em}
.dv-booking__status{margin:0;color:var(--dv-color-muted);font-size:.9em}
.dv-booking__status--error{color:var(--dv-color-danger);font-weight:600}
.dv-booking__times{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.dv-booking__times-title{flex:1 0 100%;margin:0;font-weight:600;font-size:.9em}
.dv-booking__slot{font:inherit;cursor:pointer;min-height:40px;padding:.5rem .9rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__slot:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__slot--selected{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary);font-weight:700}
.dv-booking__selected{margin:0;font-weight:600}
.dv-booking__empty{margin:0;color:var(--dv-color-muted)}
.dv-booking__retry{font:inherit;cursor:pointer;align-self:flex-start;min-height:40px;padding:.5rem 1.1rem;border:1px solid var(--dv-color-primary);border-radius:var(--dv-radius);background:var(--dv-color-primary);color:var(--dv-color-primary-contrast)}
.dv-booking__retry:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__rental{gap:.5rem}
/* Vuokrausvalitsimen otsikko, kontrolli ja painike kantavat MYÖS lomakkeen
   omia luokkia (dv-form__label/__control/__submit), jotta ne näyttäisivät
   sivuston muilta kentiltä. Alusta ei tyylittele lomaketta, joten sen ei pidä
   kilpailla sivuston säännöistä näistä elementeistä: :where() pudottaa nämä
   oletukset nollaspesifisyyteen. Sivuston sääntö voittaa aina, mutta
   tyylittelemätön sivusto saa silti käyttökelpoisen ulkoasun. */
:where(.dv-booking__rental-label){font-weight:600;font-size:.9em}
:where(.dv-booking__rental-control){font:inherit;min-height:40px;padding:.5rem .7rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
:where(.dv-booking__rental-control):focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
:where(.dv-booking__rental-trigger){text-align:start;cursor:pointer;inline-size:100%}
/*
 * PANEELI ON TYÖPÖYDÄLLÄ LIIPAISIMEN ALLA KELLUVA KORTTI.
 *
 * '.dv-booking__rental-field' kääri liipaisimen ja paneelin samaan
 * 'position:relative'-konttiin, jotta 'inset-block-start:100%' tarkoittaa
 * juuri liipaisimen alalaitaa eikä koko widgetin alalaitaa (jolloin
 * kalenteri avautuisi vasta lisätuotteiden alapuolelle). '[hidden]' hoitaa
 * piilotuksen — selain ohittaa muun asettelun automaattisesti.
 */
.dv-booking__rental-field{position:relative;display:flex;flex-direction:column}
.dv-booking__rental-panel{position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:20;margin-block-start:.3rem;min-inline-size:min(20rem, 100%);max-inline-size:min(24rem, 90vw);display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--dv-color-surface);color:var(--dv-color-text);border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);box-shadow:var(--dv-shadow, 0 4px 20px rgba(0,0,0,.18))}
.dv-booking__rental-panel--open{box-shadow:var(--dv-shadow, 0 8px 28px rgba(0,0,0,.24))}
.dv-booking__rental-panel-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dv-booking__rental-panel-title{margin:0;font-family:var(--dv-font-heading);font-size:1rem;font-weight:600;text-align:center;flex:1 1 auto}
.dv-booking__rental-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
[data-dv-rental-mode="month"] .dv-booking__rental-grid{grid-template-columns:repeat(4,1fr)}
.dv-booking__rental-hint{margin:0;color:var(--dv-color-muted);font-size:.85em}
.dv-booking__rental-panel-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dv-booking__rental-clear{font:inherit;cursor:pointer;min-height:40px;padding:.4rem .8rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__rental-clear:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__rental-close{font:inherit;cursor:pointer;min-height:40px;padding:.4rem .9rem;border:1px solid var(--dv-color-primary);border-radius:var(--dv-radius);background:var(--dv-color-primary);color:var(--dv-color-primary-contrast)}
.dv-booking__rental-close:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__day--range-start,.dv-booking__day--range-end{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary);font-weight:700}
.dv-booking__day--in-range{background:color-mix(in srgb, var(--dv-color-primary) 18%, var(--dv-color-surface));border-color:var(--dv-color-border)}
.dv-booking__rental-help{margin:0;color:var(--dv-color-muted);font-size:.85em}
:where(.dv-booking__rental-refresh){font:inherit;cursor:pointer;align-self:flex-start;min-height:40px;padding:.5rem 1.1rem;border:1px solid var(--dv-color-primary);border-radius:var(--dv-radius);background:var(--dv-color-primary);color:var(--dv-color-primary-contrast)}
:where(.dv-booking__rental-refresh):focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__rental-status{margin:0;color:var(--dv-color-muted);font-size:.9em}
.dv-booking__rental-status--error{color:var(--dv-color-danger);font-weight:600}
.dv-booking__rental-summary{display:flex;flex-direction:column;gap:.35rem}
.dv-booking__rental-period{margin:0;font-weight:600}
.dv-booking__rental-lines{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.2rem}
.dv-booking__rental-line{font-size:.9em;color:var(--dv-color-muted)}
.dv-booking__rental-total{margin:0;font-weight:700;font-size:1.05em;color:var(--dv-color-text)}
.dv-booking__rental-addons{margin:0;padding:.6rem .8rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);min-inline-size:0}
.dv-booking__rental-addons-title{padding:0 .3rem;font-weight:600;font-size:.9em}
.dv-booking__rental-addon{display:flex;align-items:center;gap:.5rem;padding:.15rem 0}
.dv-form__rental-fallback{margin:0;color:var(--dv-color-muted);font-size:.9em}
/*
 * MOBIILISSA PANEELI ON ALALAIDAN LEVY, EI LIIPAISIMEN ALLA KELLUVA KORTTI.
 *
 * Kapealla näytöllä liipaisimen alle asemoitu kortti tuppaa ylittämään
 * ruudun reunan tai peittämään loput lomakkeesta. 'position:fixed' +
 * 'inset-block-end:0' kiinnittää sen näytön alalaitaan riippumatta siitä
 * missä kohtaa pitkää lomaketta liipaisin sijaitsee, ja kosketuskohteet
 * kasvatetaan 44 px:iin (WCAG 2.5.5).
 */
@media (max-width:480px){.dv-booking__grid{gap:1px}.dv-booking__slot{flex:1 1 40%}.dv-booking__month{font-size:1rem}:where(.dv-booking__rental-refresh){align-self:stretch}.dv-booking__rental-panel{position:fixed;inset-inline:0;inset-block-end:0;inset-block-start:auto;max-inline-size:none;max-block-size:85vh;overflow-y:auto;border-end-end-radius:0;border-end-start-radius:0;margin-block-start:0}.dv-booking__rental-grid{gap:1px}[data-dv-rental-mode="month"] .dv-booking__rental-grid{grid-template-columns:repeat(3,1fr)}.dv-booking__rental-panel [data-dv-rental-day],.dv-booking__rental-panel [data-dv-rental-month]{min-height:44px}.dv-booking__nav,.dv-booking__rental-clear,.dv-booking__rental-close{min-height:44px}}
.dv-form__step{border:0;margin:0;padding:0;min-inline-size:0}
.dv-form__step-nav{display:flex;gap:.5rem;flex-wrap:wrap}
.dv-form__step-prev,.dv-form__step-next{font:inherit;cursor:pointer}
.dv-form__step-prev[disabled]{opacity:.5;cursor:default}
.dv-form__step-progress{margin:.25rem 0;font-size:.875rem;color:var(--dv-color-muted)}
.dv-form__step--current{display:block}
:where(.dv-booking-confirm){max-width:42rem;margin-inline:auto;padding:2rem 1rem;font-family:var(--dv-font-body)}
:where(.dv-booking-confirm__title){margin:0 0 1rem}
:where(.dv-booking-confirm__reservation){margin:0 0 1.5rem;padding-block-end:1.5rem;border-block-end:1px solid var(--dv-color-border)}
:where(.dv-booking-confirm__reservation):last-of-type{border-block-end:0;margin-block-end:0;padding-block-end:0}
:where(.dv-booking-confirm__continue){display:inline-block;margin-block-start:1rem;font-weight:600}

/* --- customCss --- */
/* Popos Oy — sivuston teema.

   :root-lohko on SOPIMUS komponenttien kanssa: components/header/component.css ja
   components/footer/component.css kuluttavat naita propertyja, eivatka maarittele
   niita itse. Varmistettu greppaamalla `var(--po-` molemmista tiedostoista:
   kaytossa ovat --po-bg-soft, --po-container, --po-font,
   --po-green, --po-green-dark, --po-gutter, --po-ink, --po-line, --po-muted,
   --po-radius, --po-shadow, --po-surface. Kaikki on maaritelty alla.

   VARIEN KAYTTOSAANTO (lahde rikkoo WCAG AA:ta).
   Luvut on laskettu WCAG 2.1:n relatiivisella luminanssikaavalla, EI arvattu.
   Aiemmat kommentit tassa tiedostossa antoivat --po-greenille 3,9:1 ja
   briefi 3,0:1; kumpikaan ei pida paikkaansa. Oikeat luvut:
   - --po-green (#47953f) valkoisella = 3,72:1. Alle 4,5:1 → EI TEKSTIA.
     Kelpaa ei-tekstiin (raja 3:1): ikonipohjat, reunat, korostusviivat.
   - --po-green-dark (#0a5e01) valkoisella = 8,03:1 → kaikki valkoista tekstia
     kantavat pinnat (napit, ylanauha) ja vihrea teksti valkoisella.
     Hover #084a01 valkoisella = 10,55:1.
   - --po-green-soft (#7da071) on lahteen oma osiovari. Valkoisella se on
     2,94:1, joten sen paalla teksti on TUMMAA (--po-ink = 5,54:1). */

:root{
  --po-green:#47953f;
  --po-green-dark:#0a5e01;
  --po-green-soft:#7da071;
  --po-ink:#202020;
  --po-surface:#ffffff;
  --po-muted:#333333;
  --po-muted-2:#555555;
  --po-bg-soft:#f5f5f5;
  --po-line:#e0e0e0;
  --po-shadow:0 4px 12px rgba(0,0,0,0.08);
  --po-shadow-lg:0 8px 20px rgba(0,0,0,0.12);
  --po-radius:0px;
  --po-radius-sm:0px;
  --po-radius-pill:500px;
  --po-container:1240px;
  --po-gutter:clamp(1.25rem, 4vw, 2rem);
  --po-font:'Montserrat', system-ui, -apple-system, sans-serif;

  /* Mobiilin kiinteän toimintopalkin korkeus. Palkki itse on
     components/footer/component.css:ssa; arvo on tassa koska se on osa
     komponenttisopimusta ja koska sivun oma sisalto (esim. sticky-elementit)
     voi joutua ottamaan sen huomioon. 1px reuna + 8px + 48px nappi + 8px = 65px.
     MITATTU selaimessa (iPhone 14, getBoundingClientRect): 65px.
     Turva-alue (env(safe-area-inset-bottom)) lisataan erikseen palkissa. */

  /* johdetut, vain taman tiedoston sisainen kaytto */
  --po-sec-y:clamp(3rem, 7vw, 100px);

  /* Leipatekstin rivimitta. ~65-70 merkkia on luettavin; ch on nollan leveys,
     joka Montserratissa on hieman keskimaaraista merkkia leveampi, joten
     68ch osuu noin 66 merkkiin. */
  --po-measure:68ch;
}

/* ---------- perusta ---------- */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--po-font);
  font-size:16px;
  line-height:1.6;
  color:var(--po-ink);
  background:var(--po-surface);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  margin:0;
  font-family:var(--po-font);
  font-weight:700;
  line-height:1.3;
}
h1{font-size:70px;font-weight:500;letter-spacing:1px}
h2{font-size:30px}
h3{font-size:20px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--po-green-dark);outline-offset:3px;border-radius:4px}

/* Ankkurien alareunus tulee headerilta: components/header/component.css asettaa
   html{scroll-padding-top:132px}. Sita EI toisteta tassa scroll-margin-topilla,
   koska arvot summautuisivat ja ankkuri jaisi 200px liian alas. */

/* ---------- jaetut apuluokat ---------- */

/* Sama laskenta kuin headerin .po-mainbar__inner ja footerin .po-social:
   max-inline-size:1140px + padding-inline:gutter. Nain logo ja sisalto ovat
   samassa linjassa. */
.po-container{
  width:100%;
  max-width:var(--po-container);
  margin-inline:auto;
  padding-inline:var(--po-gutter);
}

.po-section{padding-block:var(--po-sec-y)}
.po-section--soft{background:var(--po-bg-soft)}

.po-visually-hidden{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- napit ---------- */

.po-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:15px 40px;
  border:2px solid transparent;
  border-radius:var(--po-radius-pill);
  font-family:var(--po-font);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Lahteessa #47953F + valkoinen = 3,72:1. Tummempi vihrea = 8,03:1 ja nayttaa
   yha samalta vihrealta napilta. */
.po-btn--primary{background:var(--po-green-dark);color:var(--po-surface);border-color:var(--po-green-dark)}
.po-btn--primary:hover{background:#084a01;border-color:#084a01}

/*
 * --light ON TOISSIJAINEN NAPPI, EI VALKOINEN TAYTTONAPPI.
 *
 * Lahteessa .po-btn--light oli valkoinen tayttonappi tummaa heroa varten.
 * Sisalto kayttaa sita nyt paaosin VAALEILLA osioilla: 26 esiintymasta 19
 * on .po-section-, .po-section--soft-, .po-contact-cta- tai .po-contact
 * -osiossa (varmistettu greppaamalla content/fi/page/*.html). Valkoinen
 * tayttonappi valkoisella on 1:1 ja #f5f5f5:lla 1,06:1 — nappia ei erota
 * taustastaan lainkaan, mika rikkoo WCAG 1.4.11:n 3:1 vaatimuksen.
 *
 * Perusmuoto on siksi ULKOREUNANAPPI: lapinakyva pohja, --po-green-dark
 * reuna ja teksti. Valkoisella 8,03:1, #f5f5f5:lla 7,37:1. Se on samalla
 * oikea hierarkia — tayttamaton nappi lukee kevyemmaksi kuin taytetty
 * .po-btn--primary samassa rivissa.
 *
 * Tummat herot (.po-hero, .po-pagehero, .po-service-hero) yliajavat taman
 * valkoiseksi aavenapiksi omissa lohkoissaan.
 */
.po-btn--light{background:transparent;color:var(--po-green-dark);border-color:var(--po-green-dark)}
.po-btn--light:hover{background:var(--po-green-dark);color:var(--po-surface);border-color:var(--po-green-dark)}

.po-btn--dark{background:var(--po-ink);color:var(--po-surface);border-color:var(--po-ink)}
.po-btn--dark:hover{background:#000000;border-color:#000000}

.po-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.po-actions--center{justify-content:center}

/*
 * YKSI HALLITSEVA TOIMINTO PER NAKYMA.
 *
 * Kun .po-actionsissa on useampi nappi, ensisijainen erottuu kolmella
 * keinolla yhta aikaa (koko, paino, varjo) eika pelkalla varilla — varisokea
 * kayttaja nakee eron silti. Toissijainen jaa kevyemmaksi.
 * Saanto on kontekstuaalinen (.po-actions sisalla), joten yksinaan esiintyva
 * .po-btn--light tai .po-btn--dark sailyy ennallaan.
 */
.po-actions .po-btn--primary{
  padding:18px 46px;
  font-size:17px;
  box-shadow:0 6px 18px rgba(10,94,1,.35);
}
.po-actions .po-btn--primary:hover{box-shadow:0 8px 22px rgba(10,94,1,.45)}

/* ---------- hero ---------- */

.po-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:center;
  min-block-size:560px;
  padding-block:clamp(3rem, 6vw, 90px) 80px;
  color:var(--po-surface);
  background:var(--po-ink);
}
.po-hero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  object-position:center right;
}
/*
 * Lahteen overlay on linear-gradient(180deg,#FFFFFF03 0%,#354F2C 100%) opacity .78,
 * eli aivan ylhaalla lapinakyva. Otsikko ja ingressi ovat valkoisia: vaalean
 * kuvan paalla kontrasti jaa alle 3:1.
 *
 * YLAREUNAN ALPHA ON .62, MITATTU EIKA ARVATTU. Heron kuvissa on vaaleita
 * seinia ja ikkunoita; pahin realistinen taustapikseli on n. #e8e6e0.
 * Sen paalla rgba(20,30,16,a) antaa valkoiselle tekstille:
 *   a=.50 -> 3,92:1   (ei riita 16px ingressille)
 *   a=.55 -> 4,53:1   (juuri ja juuri)
 *   a=.62 -> 5,56:1   (valittu, marginaalia jaa)
 * Sama arvo on kaikissa kolmessa herossa (.po-hero, .po-pagehero,
 * .po-service-hero), jotta ne eivat paase eroon toisistaan.
 */
.po-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(20,30,16,.62) 0%, rgba(53,79,44,.9) 100%);
}
.po-hero__title{
  max-width:16ch;
  margin-inline:auto;
  text-align:center;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
.po-hero__lead{
  display:grid;
  gap:6px;
  max-inline-size:34ch;
  margin-top:28px;
  margin-inline:auto;
  text-align:center;
  font-size:32px;
  font-weight:400;
  line-height:1.35;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
.po-hero .po-actions{margin-top:36px;justify-content:center}

/*
 * HERON NAPPIHIERARKIA.
 *
 * Lahteessa herossa on kaksi yhta painavaa tayttonappia: vihrea ja valkoinen.
 * Tummalla heropohjalla valkoinen tayttonappi on itse asiassa NAKYVAMPI kuin
 * vihrea (valkoinen pinta erottuu taustastaan enemman kuin #0a5e01), joten
 * toissijainen toiminto veti enemman huomiota kuin ensisijainen. Herossa
 * .po-btn--light saa siksi aavepinnan.
 *
 * Saanto on rajattu heroihin tarkoituksella: aavepinta vaatii tumman taustan,
 * ja .po-btn--light voi esiintya muualla vaalealla. Sisaltotiedostoihin ei
 * kosketa (ne omistaa toinen agentti), joten muutos tehdaan kontekstilla.
 */
.po-hero .po-btn--light,
.po-pagehero .po-btn--light{
  padding:15px 32px;
  background:transparent;
  color:var(--po-surface);
  border-color:rgba(255,255,255,.75);
}
.po-hero .po-btn--light:hover,
.po-pagehero .po-btn--light:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--po-surface);
}

/* ---------- arvonauha (heron sisalla) ---------- */

.po-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:72px;
  padding-inline:30px;
}
.po-value{display:grid;justify-items:center;gap:14px;text-align:center}
.po-value__icon{
  inline-size:64px;
  block-size:64px;
  border:3px solid var(--po-surface);
  border-radius:10px;
  background-color:var(--po-green);
  background-repeat:no-repeat;
  background-position:center;
  background-size:30px 30px;
}
.po-value__label{
  font-size:15px;
  font-weight:700;
  letter-spacing:1.5px;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}

/* Ikonit ovat data-URI-SVG:ta CSS:ssa, jotta sisaltoon ei tarvita <svg>-tageja
   eika ulkoista ikonifonttia (lahde kaytti Font Awesomea — ei tuoda). */
.po-value__icon--valittava{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3 4.2 12.5a4.9 4.9 0 0 1 6.9-6.9l.9.9.9-.9a4.9 4.9 0 1 1 6.9 6.9z'/%3E%3C/svg%3E")}
.po-value__icon--vastuullinen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.6 3.8 5.7 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E")}
.po-value__icon--luotettava{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.6 2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.2-4.1 5.8-.9z'/%3E%3C/svg%3E")}

/* ---------- sisasivun hero ---------- */

.po-pagehero{
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:center;
  min-block-size:420px;
  padding-block:clamp(3rem, 6vw, 80px);
  color:var(--po-surface);
  background:var(--po-ink);
  text-align:center;
}
.po-pagehero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  object-position:center right;
}
/* Lahteessa hinnaston "Hinnasto" on valkoisena vaalean kuvan paalla, kontrasti
   alle 2:1. Tama overlay nostaa sen yli 7:1:n. */
.po-pagehero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(20,30,16,.62) 0%, rgba(53,79,44,.9) 100%);
}
.po-pagehero__title{
  font-size:70px;
  font-weight:500;
  letter-spacing:1px;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
.po-pagehero__lead{
  display:grid;
  gap:6px;
  max-inline-size:46ch;
  margin-top:20px;
  margin-inline:auto;
  font-size:24px;
  font-weight:400;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}

/* ---------- palveluosiot ---------- */

/*
 * Lahteessa: taysleveä osio jonka taustakuva on CSS:ssa ja tekstipalsta on
 * puoliksi lapinakyva valkoinen laatikko (#FFFFFFD9) kuvan paalla.
 * Devellassa kuvaan viitataan vain <img data-dv-media>-elementilla, joten
 * taustakuva on absoluuttisesti sijoitettu <img> ja tekstipalsta sen paalla.
 * background-attachment:fixed (parallaksi) on jatetty pois tarkoituksella:
 * se nykii mobiilissa eika toimi iOS:lla.
 */
.po-services{display:grid}

.po-service{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-block-size:520px;
}
.po-service__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}
/*
 * Tekstipalstan ulkoreuna asettuu samaan linjaan .po-containerin (ja siten
 * headerin logon) kanssa. Palsta on grid-itemi puolikkaassa ruudukossa, joten
 * sen 100% = 50vw; container-marginaali on 50vw - 1140/2 + gutter.
 * Lahteessa arvo oli kiintea 100px, mika hajoaisi leveilla naytoilla.
 */
.po-service__panel{
  grid-column:1;
  display:grid;
  align-content:center;
  gap:20px;
  padding:60px 50px;
  padding-left:max(var(--po-gutter), calc(100% - var(--po-container) / 2 + var(--po-gutter)));
  background:rgba(255,255,255,0.85);
}
/* joka toinen osio: tekstipalsta oikealle, kuva vasemmalle */
.po-service--flip .po-service__panel{
  grid-column:2;
  padding-left:50px;
  padding-right:max(var(--po-gutter), calc(100% - var(--po-container) / 2 + var(--po-gutter)));
}
.po-service__title{color:var(--po-ink)}
/* max-inline-size: rivimitta. Palsta on tyopoydalla noin 500px eli jo valmiiksi
   sopiva, mutta tabletilla palsta levenee taydeksi ja rivi venyisi yli 100
   merkin. Ks. --po-measure. */
.po-service__text{
  display:grid;
  gap:18px;
  max-inline-size:var(--po-measure);
  color:var(--po-ink);
  line-height:1.7;
}
.po-service .po-btn{justify-self:start;margin-top:6px}

/* ---------- tietoa meista (vihrea osio) ---------- */

/*
 * Lahteen osiovari on #7DA071 ja teksti valkoista (2,9:1). Tassa vari sailyy
 * mutta teksti on tummaa (5,5:1). Ks. :root-lohkon kommentti.
 */
.po-about{background:var(--po-green-soft);color:var(--po-ink)}
.po-about__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.po-about__body{
  display:grid;
  align-content:center;
  gap:20px;
  padding:var(--po-sec-y) 50px;
  /* sama container-linjaus kuin .po-service__panel */
  padding-left:max(var(--po-gutter), calc(100% - var(--po-container) / 2 + var(--po-gutter)));
}
.po-about__title{font-size:32px}
.po-about__text{display:grid;gap:18px;max-inline-size:var(--po-measure);font-size:15px;line-height:1.7}
.po-about .po-btn{justify-self:start;margin-top:6px}
.po-about__media{margin:0;min-block-size:100%}
.po-about__media img{inline-size:100%;block-size:100%;object-fit:cover}

/* ---------- arvot laajennettuna ---------- */

.po-principles{background:var(--po-surface)}
.po-principles__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.po-principles__media{margin:0;min-block-size:100%}
.po-principles__media img{inline-size:100%;block-size:100%;object-fit:cover}
.po-principles__list{
  display:grid;
  align-content:center;
  gap:30px;
  padding:var(--po-sec-y) 50px;
  padding-right:max(var(--po-gutter), calc(100% - var(--po-container) / 2 + var(--po-gutter)));
}
.po-principle{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.po-principle__icon{
  inline-size:56px;
  block-size:56px;
  border:3px solid var(--po-surface);
  border-radius:10px;
  background-color:var(--po-green);
  background-repeat:no-repeat;
  background-position:center;
  background-size:26px 26px;
}
/* valkoisella pohjalla ikoni piirretaan vihrealla */
.po-principle__icon--valittava{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3 4.2 12.5a4.9 4.9 0 0 1 6.9-6.9l.9.9.9-.9a4.9 4.9 0 1 1 6.9 6.9z'/%3E%3C/svg%3E")}
.po-principle__icon--vastuullinen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.6 3.8 5.7 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E")}
.po-principle__icon--luotettava{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.6 2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.2-4.1 5.8-.9z'/%3E%3C/svg%3E")}
.po-principle__body{display:grid;gap:8px}
.po-principle__title{font-size:15px;font-weight:700;letter-spacing:1.5px}
.po-principle__text{font-size:15px;color:var(--po-muted)}

/* ---------- yhteystiedot ---------- */

.po-contact{background:var(--po-bg-soft)}
.po-contact__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:60px;
  align-items:start;
}
.po-contact__col{display:grid;gap:26px;align-content:start}
.po-contact__title{font-size:30px}
.po-contact__details{display:grid;gap:10px;font-size:15px;line-height:1.7}
.po-contact__lead{font-size:14px;color:var(--po-muted)}

.po-people{display:grid;gap:24px}
.po-person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.po-person__photo{
  margin:0;
  inline-size:90px;
  block-size:90px;
  border-radius:50%;
  overflow:hidden;
  background:var(--po-line);
}
.po-person__photo img{inline-size:100%;block-size:100%;object-fit:cover}
.po-person__body{display:grid;gap:4px;font-size:15px}
.po-person__name{font-size:17px;font-weight:700}
.po-person__link{color:var(--po-green-dark);text-decoration:none}
.po-person__link:hover{text-decoration:underline}

/* ---------- hinnasto ---------- */

/* Mitat lahteen omasta HTML-widgetista (po-dom-hinnasto.html, #hinnasto-modern):
   kortti 1px #e0e0e0, ylareuna 6px #095d02, radius 12px, padding 20px,
   varjo 0 4px 12px rgba(0,0,0,.08), ruudukko auto-fit minmax(250px,1fr) / 900px. */
.po-prices__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:20px;
  max-width:900px;
  margin:0 auto 30px;
}
.po-price{
  display:grid;
  align-content:start;
  gap:10px;
  padding:20px;
  border:1px solid var(--po-line);
  border-top:6px solid var(--po-green-dark);
  border-radius:var(--po-radius);
  background:#fefefe;
  box-shadow:var(--po-shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.po-price:hover{transform:translateY(-6px);box-shadow:var(--po-shadow-lg)}
.po-price__name{font-size:19px;font-weight:700;color:#000000}
.po-price__amount{font-size:18px;font-weight:600;color:var(--po-green-dark)}
.po-price__note{font-size:15px;color:var(--po-muted-2)}
.po-prices__note{
  max-width:600px;
  margin-inline:auto;
  text-align:center;
  font-size:15px;
  line-height:1.6;
  color:var(--po-muted);
}

/* ===================================================================
   PALVELUSIVUT, PALVELUHUBI JA KONVERSIO-OSIOT

   Kaikki tassa lohkossa olevat luokat on poimittu content/fi/page/*.html
   -tiedostoista (po-cro-contentin kirjoittamat), ei arvattu. Jokainen
   varipari on laskettu WCAG 2.1:n kaavalla ja luku on merkitty saannon
   viereen. Ei uusia varitokeneita — vain :root-lohkon --po-*-arvot.
   =================================================================== */

/* ---------- osion otsikon ja sisallon valys ---------- */

/*
 * Uusilla sivuilla osiot ovat muotoa
 *   <section class="po-section"><div class="po-container"><h2>…</h2><…>
 * ja h2:lla on `margin:0` perustyyleista. Ilman valia otsikko liimautuu
 * sisaltoon. Marginaali annetaan otsikolle eika sisallolle, jotta sama
 * sailyy riippumatta siita mika lohko otsikkoa seuraa.
 *
 * `:not([class])` rajaa saannon LUOKATTOMIIN otsikoihin. Luokalliset
 * (.po-contact-cta__title, .po-includes__title, .po-visually-hidden) tuovat
 * oman valistyksensa, eika niiden pida saada tata paalle.
 */
.po-section > .po-container > h2:not([class]){margin-bottom:24px}
.po-section > .po-container > h2:not([class]) + .po-prose{margin-top:-8px;margin-bottom:8px}

/* ---------- palvelukorttiruudukko (etusivu + palveluhubi) ---------- */

.po-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:26px;
  margin-top:34px;
}
.po-service-card{
  /* position:relative on venytetyn linkin (ks. .po-service-card__link) ankkuri */
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border:1px solid var(--po-line);
  border-top:5px solid var(--po-green);
  border-radius:var(--po-radius);
  background:var(--po-surface);
  box-shadow:var(--po-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.po-service-card:hover{transform:translateY(-4px);box-shadow:var(--po-shadow-lg)}
/* Kortin ylareunan 5px --po-green (#47953f) on EI-TEKSTIA: valkoista vasten
   3,72:1 eli yli ei-tekstin 3:1 rajan. Sama kaytto kuin .po-price. */
/*
 * KUVAKAISTA ON position:relative + ABSOLUUTTINEN KUVA.
 *
 * Alusta korvaa <img data-dv-media>:n <picture>-elementilla, jonka sisalla
 * on <source>-tageja ja <img>. <picture> on oletuksena inline, joten
 * `block-size:100%` ei periydy kuvaan asti eika kuva tayta kaistaa
 * — todennettu selaimessa: kaista jai tyhjaksi harmaaksi laatikoksi.
 * Absoluuttinen kuva tayttaa figuren korkeuden riippumatta siita mita
 * kaareita alusta valiin laittaa. Korkeuden maaraa figure itse
 * (aspect-ratio tyopoydalla, gridin rivi mobiilissa).
 */
.po-service-card__media{
  position:relative;
  margin:0;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--po-bg-soft);
}
.po-service-card__media picture{display:block}
.po-service-card__media img{
  position:absolute;
  inset:0;
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}
.po-service-card__body{
  display:grid;
  align-content:start;
  gap:10px;
  padding:20px 22px 22px;
}
.po-service-card__title{font-size:20px;line-height:1.25}
.po-service-card__title a{text-decoration:none;color:var(--po-ink)}          /* 16,29:1 */
.po-service-card:hover .po-service-card__title a{color:var(--po-green-dark)}         /*  8,03:1 */
.po-service-card__price{
  font-size:17px;
  font-weight:700;
  color:var(--po-green-dark);                                        /*  8,03:1 */
}
.po-service-card__lead{
  font-size:15px;
  line-height:1.65;
  color:var(--po-muted);                                             /* 12,63:1 */
}
/*
 * VENYTETTY LINKKI. "Lue lisaa" on kortin toinen linkki samaan osoitteeseen
 * kuin otsikko. ::after peittaa koko kortin, jolloin mobiilissa koko kortti
 * on kosketuskohde eika vain 60px leveä tekstilinkki. Otsikkolinkki nostetaan
 * peiton paalle, joten kumpikin on erikseen fokusoitavissa ja kumpikin vie
 * samaan paikkaan. Ruudunlukijalle mitaan ei muutu — DOM sailyy.
 */
.po-service-card__link{
  justify-self:start;
  margin-top:2px;
  color:var(--po-green-dark);                                        /*  8,03:1 */
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--po-green);
}
.po-service-card__link::after{content:"";position:absolute;inset:0}
.po-service-card__link:hover{border-bottom-color:var(--po-green-dark)}
.po-service-card__title a,
.po-service-card__link{position:relative;z-index:1}
.po-service-card__link:focus-visible{outline:2px solid var(--po-green-dark);outline-offset:3px}

/* ---------- heron puhelinrivi (etusivu) ---------- */

/*
 * Herossa on nyt YKSI nappi. Puhelin on tekstilinkkina sen alla: se on
 * tavoitettavissa mutta ei kilpaile napin kanssa samanpainoisena.
 */
.po-hero__phone{
  margin-top:14px;
  text-align:center;
  font-size:16px;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
.po-hero__phone a{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- luottamussignaalirivi ---------- */

/*
 * Lahteessa Luotettava Kumppani -tunnus ja Yrittajat 2025 olivat vain
 * footerissa. Rivi nostaa ne sivun ylaosaan ja lisaa perustamisvuoden ja
 * toiminta-alueen samaan nauhaan.
 */
.po-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px 34px;
  padding:18px 24px;
  border:1px solid var(--po-line);
  border-radius:var(--po-radius);
  background:var(--po-surface);
}
.po-trust__item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--po-muted);                                             /* 12,63:1 */
}
/* Alusta korvaa <img data-dv-media> <picture>-elementilla, joten luokka voi
   paatya joko kuvaan tai kaareeseen — sama kaksoisvalitsin kuin footerin
   .po-site-footer__badge-img. */

/* ---------- hintalaatikko palvelusivulla ---------- */

/* Sama muotokieli kuin hinnaston .po-price -kortilla, jotta luku nayttaa
   samalta tiedolta kummallakin sivulla. */
.po-pricebox{
  display:grid;
  gap:8px;
  max-inline-size:540px;
  padding:26px 28px;
  border:1px solid var(--po-line);
  border-top:6px solid var(--po-green-dark);
  border-radius:var(--po-radius);
  background:var(--po-surface);
  box-shadow:var(--po-shadow);
}
.po-pricebox__amount{
  font-size:46px;
  font-weight:700;
  line-height:1.1;
  color:var(--po-green-dark);                                        /*  8,03:1 */
}
.po-pricebox__unit{font-size:22px;font-weight:600}
.po-pricebox__note{
  font-size:15px;
  line-height:1.6;
  color:var(--po-muted-2);                                           /*  7,46:1 */
}
.po-pricebox + .po-actions{margin-top:22px}

/* ---------- hintakortin linkki ---------- */

.po-price__link{
  justify-self:start;
  margin-top:4px;
  color:var(--po-green-dark);                                        /*  7,96:1 (#fefefe) */
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--po-green);
}
.po-price__link:hover{border-bottom-color:var(--po-green-dark)}

/* ---------- UKK-accordion (<details>/<summary>, ei JS:aa) ---------- */

/*
 * Sama rakenne kuin kp-paljuvuokraus-projektin .kp-faq:ssa: natiivi
 * <details>, oma +/- merkki ja piilotettu selaimen oletuskolmio.
 * `list-style:none` + ::-webkit-details-marker kattaa seka Firefoxin/
 * Chromen etta vanhemman WebKitin.
 *
 * Ei JS:aa: <details> on natiivisti avattava ja se on nappaimiston ja
 * ruudunlukijan kannalta oikein ilman aria-attribuutteja.
 */
.po-faq{display:grid;gap:12px;max-inline-size:900px}
.po-faq__item{
  border:1px solid var(--po-line);
  border-radius:var(--po-radius);
  /* Vaalea taytto valkoisella osiolla: pelkka --po-line -reuna on valkoista
     vasten 1,32:1 eli kaytannossa nakymaton. Taytto tekee laatikosta
     erottuvan ilman uutta varia. */
  background:var(--po-bg-soft);
  overflow:hidden;
}
.po-faq__item[open]{
  background:var(--po-surface);
  border-color:var(--po-green);                                      /*  3,72:1 valk. — ei-teksti */
}
.po-faq__q{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:var(--po-ink);                                               /* 14,94:1 harmaalla */
  cursor:pointer;
  list-style:none;
}
.po-faq__q::-webkit-details-marker{display:none}
.po-faq__q::before{
  content:"+";
  flex:none;
  inline-size:1ch;
  font-size:22px;
  font-weight:700;
  line-height:1;
  color:var(--po-green-dark);                                        /*  7,37:1 */
}
.po-faq__item[open] .po-faq__q::before{content:"\2212"}
.po-faq__q:hover{color:var(--po-green-dark)}
.po-faq__q:focus-visible{outline:2px solid var(--po-green-dark);outline-offset:-3px}
.po-faq__a{
  display:grid;
  gap:12px;
  padding:0 24px 20px 55px;
  font-size:16px;
  line-height:1.7;
  color:var(--po-muted);                                             /* 12,63:1 */
}
.po-faq__a a{color:var(--po-green-dark);font-weight:600}

/* ===================================================================
   PALVELUALASIVUJEN OMA NIMISTO

   Palvelualasivut (kotisiivous, yrityssiivous, muuttosiivous,
   loppusiivous, palosiivous, veneiden-siivous) kayttavat naita luokkia.
   Etusivu, palveluhubi ja hinnasto kayttavat samoista kasitteista osin
   omia nimiaan (.po-pagehero, .po-services-grid, .po-service-card),
   joten molemmat nimistot ovat tassa tiedostossa.

   Sisallon luokkanimet vaihtuivat taman tyon aikana kahdesti. Tiedostosta
   on siksi POISTETTU seuraavat saannot, joiden luokkia ei enaa esiinny
   yhdessakaan content/- tai components/-tiedostossa (tarkistettu
   sanarajahaulla, ei osamerkkijonolla):
     .po-quickform*      -> korvaaja .po-contact-cta*
     .po-checklist*      -> korvaaja .po-includes*
     .po-pagehero__price -> korvaaja .po-service-hero__price
     .po-trust__badge    -> korvaaja .po-trust__logo
     .po-pricefacts*     -> osio poistettu sisallosta
     .po-endcta*         -> osio poistettu sisallosta

   Jos jokin naista osioista palaa sisaltoon, tyylit on kirjoitettava
   uudelleen. TARKISTA aina ennen poistoa etta luokka puuttuu seka
   content/- etta components/-hakemistosta.
   =================================================================== */

/* ---------- palvelualasivun hero ---------- */

/* Sama pohja kuin .po-pagehero: absoluuttinen taustakuva + tummennusliuku,
   jotta valkoinen teksti yltaa yli 4,5:1:een kuvasta riippumatta. */
.po-service-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:center;
  min-block-size:420px;
  padding-block:clamp(3rem, 6vw, 80px);
  color:var(--po-surface);
  background:var(--po-ink);
}
.po-service-hero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  object-position:center right;
}
.po-service-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(20,30,16,.62) 0%, rgba(53,79,44,.9) 100%);
}
.po-service-hero__inner{
  display:grid;
  justify-items:center;
  gap:0;
  text-align:center;
}
.po-service-hero__title{
  font-size:56px;
  font-weight:500;
  letter-spacing:1px;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
.po-service-hero__lead{
  max-inline-size:44ch;
  margin-top:18px;
  font-size:21px;
  line-height:1.45;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
/*
 * Hinta on brieffin mukaan iso yhteydenoton este, joten se nostetaan heroon.
 * EI pillerimuotoa eika tayttoa: se nayttaisi napilta ja kilpailisi heron
 * varsinaisen toiminnon kanssa. Reunattu laatikko lukee tiedoksi, ei
 * toiminnoksi.
 */
.po-service-hero__price{
  margin-top:20px;
  padding:6px 20px;
  border:2px solid rgba(255,255,255,.8);
  border-radius:var(--po-radius-sm);
  font-size:26px;
  font-weight:700;
  letter-spacing:.5px;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
.po-service-hero__area{
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(0,0,0,.35);
}
/* Sama nappirivi kuin .po-actions: soita hallitsee, tarjouspyynto on aave. */
.po-service-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:28px;
}
.po-service-hero__actions .po-btn--primary{
  padding:18px 46px;
  font-size:17px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.po-service-hero .po-btn--light{
  padding:15px 32px;
  background:transparent;
  border-color:rgba(255,255,255,.75);
  color:var(--po-surface);
}
.po-service-hero .po-btn--light:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--po-surface);
}

/* ---------- yhteydenotto ---------- */

.po-contact-cta{background:var(--po-bg-soft)}
.po-contact-cta__title{font-size:26px;line-height:1.3}
.po-contact-cta__text{
  max-inline-size:var(--po-measure);
  margin-top:14px;
  font-size:16px;
  line-height:1.7;
  color:var(--po-muted);                                             /* 11,59:1 harmaalla */
}
.po-contact-cta__text a{
  color:var(--po-green-dark);                                        /*  7,37:1 harmaalla */
  font-weight:700;
  text-underline-offset:3px;
}
.po-contact-cta__form{
  max-inline-size:640px;
  margin-top:26px;
  padding:26px 28px;
  border-radius:var(--po-radius);
  background:var(--po-surface);
  box-shadow:var(--po-shadow);
}

/* ---------- "mita palveluun kuuluu" -lista ---------- */

.po-includes{display:grid;align-content:start;gap:0}

/*
 * HINNASTOSSA KAKSI po-includes-LOHKOA ON SAMASSA po-containerissa
 * ("Mita hintaan sisaltyy" ja "Mika vaikuttaa hintaan"). Allekkain ne
 * tyontavat sivua pidemmaksi turhaan, koska kumpikin lista on lyhyt.
 *
 * :has() gridaa vain sen kontin jossa lohkoja on kaksi. Jos selain ei tunne
 * :has():ia, saanto pudotetaan ja lohkot jaavat allekkain — se on taysin
 * kelvollinen ulkoasu, ei rikkinainen. Siksi :has() on tassa turvallinen,
 * toisin kuin headerin mobiilivalikossa jossa sen puuttuminen olisi
 * jattanyt valikon toimimattomaksi.
 */
.po-container:has(.po-includes + .po-includes){
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:44px;
  align-items:start;
}
/* Rinnakkain palstat ovat kapeat, joten listat pakotetaan yhteen sarakkeeseen
   sisallaan — muuten auto-fit tekisi neljan palstan sekamelskan. */
.po-container:has(.po-includes + .po-includes) .po-includes__list{
  grid-template-columns:1fr;
}

.po-includes__title{font-size:26px;line-height:1.3}
.po-includes__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:12px 36px;
  margin-top:22px;
}
.po-includes__item{
  position:relative;
  padding-left:34px;
  font-size:16px;
  line-height:1.6;
  color:var(--po-muted);                                             /* 11,59:1 harmaalla */
}
/* Ympyra on EI-TEKSTIA: valkoinen vinkki #47953f:lla on 3,72:1 eli yli
   ei-tekstin 3:1 rajan. Merkitys valittyy aina viereisesta tekstista. */
.po-includes__item::before{
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  inline-size:21px;
  block-size:21px;
  border-radius:50%;
  background:var(--po-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}

/* ---------- luottamusrivin alasivuvariantti ---------- */

.po-trust__logo,
.po-trust__logo img{
  display:block;
  inline-size:auto;
  max-inline-size:150px;
  max-block-size:54px;
}
/* .po-trust__item on jo flex-rivi; teksti perii sen typografian. */
.po-trust__text{display:block}

/* ---------- hintalaatikon lista ---------- */

.po-pricebox__list{display:grid;gap:8px;margin-top:4px}
.po-pricebox__item{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.6;
  color:var(--po-muted);                                             /* 12,63:1 valkoisella */
}
.po-pricebox__item::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  inline-size:7px;
  block-size:7px;
  border-radius:50%;
  background:var(--po-green);
}

/* ---------- tarjouspyyntodialogi (":target", ei JS:aa) ---------- */

/*
 * Natiivi dialog-elementti ei aukea ilman showModal()-kutsua, ja skriptitagi
 * vaatisi trusted_html-oikeuden. Siksi tila on dokumentin :target.
 *
 * Kaare on position:fixed, joten selaimen ":target vieritetaan nakyviin"
 * -kaytos ei liikuta sivua lainkaan. Sulkeminen osoittaa erilliseen
 * nollakokoiseen ankkuriin (#tarjous-kiinni) samasta syysta — sama ratkaisu
 * kuin headerin mobiilivalikossa.
 *
 * MITA JAA PUUTTUMAAN (ei JS:aa): fokus ei siirry paneeliin avattaessa eika
 * palaa avanneeseen nappiin, fokusta ei ole vangittu paneeliin, eika Esc
 * sulje. Taustan sisalto ei ole inert. Siksi tassa EI ole aria-modal="true",
 * joka lupaisi juuri sen mita ei ole. Sulkupainikkeita on kaksi (paneelin
 * oma ja koko taustan peittava linkki), ja paneeli on DOM-jarjestyksessa
 * heti avaavan napin jalkeen, jotta seuraava sarkain vie sinne.
 */
.po-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  padding:var(--po-gutter);
  overflow-x:hidden;
  overflow-y:auto;
}
.po-modal:target{display:grid;place-items:center}
.po-modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}
.po-modal__panel{
  position:relative;
  inline-size:min(560px, 100%);
  display:grid;
  gap:18px;
  padding:36px 34px;
  border-radius:var(--po-radius);
  background:var(--po-surface);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.po-modal__title{font-size:26px}
.po-modal__text{font-size:15px;color:var(--po-muted)}
.po-modal__list{display:grid;gap:12px;font-size:15px}
.po-modal__list a{color:var(--po-green-dark);text-decoration:none;font-weight:600}
.po-modal__list a:hover{text-decoration:underline}
.po-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border-radius:50%;
  color:var(--po-ink);
  font-size:26px;
  line-height:1;
  text-decoration:none;
}
.po-modal__close:hover{background:var(--po-bg-soft)}
.po-modal__anchor{
  position:fixed;
  top:0;
  left:0;
  inline-size:0;
  block-size:0;
  overflow:hidden;
}

/* ---------- tekstisivu ---------- */

.po-prose{max-width:var(--po-measure);display:grid;gap:1rem}
.po-prose h1{font-size:40px;font-weight:700;letter-spacing:0;margin-bottom:.5rem}
.po-prose h2{font-size:22px;margin-top:1.5rem}
.po-prose h3{font-size:17px;margin-top:.75rem}
.po-prose p{font-size:16px;line-height:1.75;color:var(--po-muted)}
.po-prose em{color:var(--po-ink);font-style:normal;font-weight:700}
.po-prose strong{color:var(--po-ink)}
.po-prose a{color:var(--po-green-dark)}

/* ---------- alustan tuottama lomake (dv-form*) ---------- */

/*
 * SELEKTORIT ON ANKKUROITU LOMAKKEESEEN ITSEENSA, EI KAAREESEEN.
 *
 * Aiemmin nama saannot olivat muodossa `.po-form .dv-form__…`, eli ne
 * toimivat vain jos lomakelohkon ymparilla oli po-form-luokka. Sisalto on
 * toisen agentin omistuksessa, ja lomakelohko esiintyy nyt kolmessa eri
 * kaareessa, ja kaarteen nimi vaihtui kesken tyon kahdesti —
 * kaarelistan yllapitaminen tarkoitti etta jokainen uusi kaare tuotti
 * hiljaa tyylittelemattoman lomakkeen. Juuri sen lomakkeen, jonka pitaa
 * konvertoida.
 *
 * Ankkuri on nyt `.dv-form` ja `dv-form__*`-luokat, jotka alusta tuottaa
 * pelkastaan lomakelohkolle. VARMISTETTU esikatselun HTML:sta: jokainen
 * kentta saa luokan `dv-form__control` ja lahetysnappi `dv-form__submit`.
 * Hakulohko kayttaa eri nimiavaruutta (dv-search__*), joten se ei osu.
 *
 * Elementtivalitsimet (input/select/textarea/button) pidetaan `.dv-form`in
 * sisalla, jotta ne eivat vuoda sivun muihin lomakkeisiin tai
 * evastebannerin nappeihin.
 */

/* Kentat: lahteessa tausta #F5F5F5 ilman reunaa. Osio voi itsekin olla
   #f5f5f5, joten kentille annetaan valkoinen pohja ja ohut reuna. */
.dv-form{display:grid;gap:14px}
.dv-form__field{display:grid;gap:6px}
.dv-form__label{
  font-size:14px;
  font-weight:600;
  color:var(--po-muted);                                             /* 12,63:1 valk. */
}
/* Pakollisuuden tahti. */
.dv-form__label span{color:var(--po-green-dark)}                     /*  8,03:1 */

.dv-form__control,
.dv-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.dv-form select,
.dv-form textarea{
  inline-size:100%;
  padding:14px 16px;
  border:1px solid var(--po-line);
  border-radius:var(--po-radius-sm);
  background:var(--po-surface);
  font:inherit;
  font-size:16px;
  color:var(--po-ink);
}
/* #6b6b6b valkoisella on 5,33:1. Placeholder ei ole ainoa nimilappu —
   jokaisella kentalla on myos nakyva <label>. */
.dv-form ::placeholder{color:#6b6b6b;opacity:1}
.dv-form textarea{min-block-size:110px;resize:vertical}
.dv-form__control:focus,
.dv-form input:focus,
.dv-form select:focus,
.dv-form textarea:focus{
  outline:2px solid var(--po-green-dark);
  outline-offset:1px;
  border-color:transparent;
}

.dv-form__submit{
  justify-self:start;
  padding:15px 40px;
  border:0;
  border-radius:var(--po-radius-pill);
  background:var(--po-green-dark);
  color:var(--po-surface);                                           /*  8,03:1 */
  font-family:var(--po-font);
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:background-color .2s ease;
}
.dv-form__submit:hover{background:#084a01}                            /* 10,55:1 */

.dv-form__check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  color:var(--po-muted);
}
.dv-form__check input{inline-size:auto;margin-top:.3rem}
.dv-form__radio,
.dv-form__field--radio{display:grid;gap:8px}
.dv-form__captcha{margin-block:4px}
.dv-form__price,
.dv-form__reward{font-size:15px;font-weight:700;color:var(--po-green-dark)}
.dv-form__status,
.dv-form__full-message{
  padding:12px 16px;
  border-radius:var(--po-radius-sm);
  background:var(--po-surface);
  border:1px solid var(--po-line);
  font-size:15px;
  color:var(--po-ink);
}
/* koko leveydelle asettuva lomakevariantti (dv-form--full) */
.dv-form--full{grid-template-columns:1fr}

/* Alusta merkitsee tyhjan lohkon tulosteen. Ei saa jattaa nakyvaa aukkoa. */
.dv-empty{display:none}
.dv-block-error{
  padding:12px 16px;
  border:1px solid var(--po-line);
  border-radius:var(--po-radius-sm);
  background:var(--po-bg-soft);
  font-size:15px;
  color:var(--po-muted);
}

/* ---------- tabletti ---------- */

@media (max-width:1024px){
  h1,.po-hero__title,.po-pagehero__title{font-size:40px;letter-spacing:-1px}
  h2{font-size:26px}
  .po-hero__lead{font-size:22px}
  .po-pagehero__lead{font-size:18px}
  .po-about__title,.po-contact__title{font-size:26px}

  .po-hero{min-block-size:auto}
  .po-values{margin-top:48px;padding-inline:0;gap:16px}

  /*
   * Kapealla naytolla kuva ja teksti eivat mahdu rinnakkain. Taustakuva
   * nostetaan takaa normaaliin virtaan omaksi kaistakseen tekstin ylapuolelle
   * (se on DOM-jarjestyksessa ensimmaisena), ja tekstipalstasta tulee
   * lapinakymaton. Lapinakyva palsta kuvan paalla jattaisi kuvan
   * kaytannossa nakymattomiin ja heikentaisi tekstin kontrastia.
   * Lahde ratkaisi saman piilottamalla osiot mobiilissa kokonaan
   * (elementor-hidden-mobile) — sisaltoa ei haluta piilottaa.
   */
  .po-service{grid-template-columns:1fr;grid-template-rows:auto auto;min-block-size:auto}
  .po-service__bg{
    position:static;
    z-index:auto;
    inline-size:100%;
    block-size:auto;
    aspect-ratio:16/9;
  }
  .po-service__panel,
  .po-service--flip .po-service__panel{
    grid-column:1;
    padding:48px var(--po-gutter);
    padding-left:var(--po-gutter);
    padding-right:var(--po-gutter);
    background:var(--po-surface);
  }

  .po-about__grid,
  .po-principles__grid{grid-template-columns:1fr}
  .po-about__body,
  .po-principles__list{
    padding:48px var(--po-gutter);
    padding-left:var(--po-gutter);
    padding-right:var(--po-gutter);
  }
  /* kuva ei saa venya taysmittaiseksi kun palstat ovat allekkain */
  .po-about__media,
  .po-principles__media{min-block-size:0}
  .po-about__media img,
  .po-principles__media img{block-size:auto;aspect-ratio:16/10}
  /* kuva ensin, teksti sen alle */
  .po-principles__media{order:-1}

  .po-contact__grid{grid-template-columns:1fr;gap:44px}

  /* Lomake ja puhelinvaihtoehto allekkain: lomake ensin, koska se on
     DOM-jarjestyksessa ensimmainen ja osion ensisijainen toiminto. */

  .po-service-hero__title{font-size:40px;letter-spacing:-1px}
  .po-service-hero__lead{font-size:18px}
  .po-service-hero{min-block-size:auto}
  .po-contact-cta__title,.po-includes__title{font-size:22px}
}

/* ---------- mobiili ---------- */

@media (max-width:767px){
  body{font-size:15px}
  h1,.po-hero__title,.po-pagehero__title{font-size:32px;letter-spacing:0}
  h2{font-size:24px}
  .po-hero__lead{font-size:16px}
  .po-pagehero__lead{font-size:15px}
  .po-about__title,.po-contact__title{font-size:24px}

  .po-btn{padding:13px 28px;font-size:14px}

  /*
   * Lahteessa mobiilin napit olivat `flex:1 1 auto` eli ne jakoivat rivin
   * tasan — kaksi samanlevyista nappia vierekkain lukee "kaksi yhta hyvaa
   * vaihtoehtoa". Pinotaan sen sijaan, jolloin ensisijainen on ylimpana ja
   * koko rivin levyinen ja toissijainen sen alla kevyempana.
   * .po-actions on nyt kaytossa kaikilla sivuilla (26 esiintymaa,
   * tarkistettu greppaamalla content/fi/page/*.html), ja yhden napin
   * riveilla se tarkoittaa koko rivin levyista nappia. Se on mobiilissa
   * haluttu: leveampi kosketuskohde ja yksiselitteinen toiminto.
   */
  .po-actions{flex-direction:column;align-items:stretch;gap:10px}
  .po-actions .po-btn{inline-size:100%}
  .po-actions .po-btn--primary{padding:17px 28px;font-size:16px}
  .po-hero .po-btn--light,
  .po-pagehero .po-btn--light{padding:12px 28px;font-size:14px}

  .po-values{grid-template-columns:1fr;gap:22px;margin-top:40px}
  .po-value__icon{inline-size:56px;block-size:56px;background-size:26px 26px}

  /* Mobiilissa heron 80px alareunus + 90px ylareunus tyonsi kaiken muun
     sisallon nakyman ulkopuolelle. Sivun pituus on mitattu ongelma
     (7 675px iPhone 14:lla), joten heron pystytila kutistetaan. */
  .po-hero{padding-block:36px 44px}

  .po-pagehero{min-block-size:300px}

  .po-service__panel,
  .po-service--flip .po-service__panel{
    padding:36px var(--po-gutter);
    padding-left:var(--po-gutter);
    padding-right:var(--po-gutter);
  }

  .po-about__body,
  .po-principles__list{
    padding:40px var(--po-gutter);
    padding-left:var(--po-gutter);
    padding-right:var(--po-gutter);
  }

  .po-principle{grid-template-columns:1fr;gap:12px}

  .po-person{grid-template-columns:1fr;gap:12px;justify-items:start}

  /*
   * HINNASTON KUUSI KORTTIA KAHTEEN SARAKKEESEEN JO MOBIILISSA.
   *
   * Yhtena sarakkeena kuusi korttia vie n. 900px ja tyontaa sivun
   * yhteydenottolomakkeen noin 1,7 ruudun paahan. Kaksi saraketta pudottaa
   * ruudukon n. 450 pikseliin. Hinta on juuri se mita hinnastosivulle
   * tullaan katsomaan, joten korttien pitaa mahtua kerralla nakyviin.
   *
   * minmax(148px,...) ja auto-fit: 390px:n naytolla sarakkeeksi tulee 169px
   * eli kaksi palstaa; 320px:n naytolla 134px alittaa minimin ja ruudukko
   * palaa itsestaan yhteen palstaan. Ei erillista murtopistetta.
   */
  .po-prices__grid{grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));gap:12px}
  .po-price{padding:16px 14px;gap:6px}
  .po-price__name{font-size:16px}
  .po-price__amount{font-size:16px}
  .po-price__note{font-size:13px}
  .po-price__link{font-size:14px}
  .po-modal__panel{padding:28px 22px}
  .po-prose h1{font-size:30px}

  /* --- uudet osiot mobiilissa --- */

  .po-section > .po-container > h2:not([class]){margin-bottom:18px}

  /*
   * Osioiden pystyrytmi 48px -> 40px mobiilissa. Kahdeksan osiota kertaa
   * 16px on n. 130px lyhyempi sivu ilman etta mikaan osio ahtautuu: 40px on
   * yha yli kaksi kertaa leipatekstin rivivali, joten osiorajat erottuvat.
   * Sivun pituus on tassa projektissa MITATTU ongelma, joten pystytilaa
   * karsitaan kaikkialta missa se ei maksa luettavuutta.
   */
  .po-section{padding-block:40px}

  /*
   * PALVELUKORTIT VAAKAAN MOBIILISSA.
   *
   * Pystykortteina kuusi korttia veisi noin 2 100px pystytilaa, ja sivun
   * pituus on tassa projektissa mitattu ongelma (7 675px iPhone 14:lla).
   * Kuva pienenee 100px:n pikkukuvaksi tekstin viereen, jolloin sama kuusi
   * korttia vie noin 900px. Kuva ei ole informaatiota — nimi, hinta ja lupaus
   * ovat — joten pienentaminen ei havita mitaan.
   */
  .po-services-grid{grid-template-columns:1fr;gap:14px;margin-top:24px}
  .po-service-card{grid-template-columns:100px minmax(0,1fr);grid-template-rows:1fr}
  /* Vaakakortissa korkeuden maaraa tekstipalsta, joten kaistan oma
     kuvasuhde poistetaan ja kaista venyy gridin riviin. */
  .po-service-card__media{aspect-ratio:auto;block-size:100%;min-block-size:120px}
  .po-service-card__body{gap:6px;padding:14px 16px}
  .po-service-card__title{font-size:17px}
  .po-service-card__price{font-size:15px}
  .po-service-card__lead{font-size:14px;line-height:1.5}
  .po-service-card__link{font-size:14px}


  .po-hero__phone{font-size:15px}


  /* Lahetysnappi koko leveydelle: kosketuskohde ja selkein "tama on se
     toiminto" -signaali kapealla naytolla. */
  .dv-form__submit{justify-self:stretch;inline-size:100%}

  .po-trust{gap:12px 20px;padding:16px 14px}
  .po-trust__item{font-size:12px;letter-spacing:.06em}


  .po-pricebox{padding:22px 20px}
  .po-pricebox__amount{font-size:38px}
  .po-pricebox__unit{font-size:19px}

  .po-faq__q{padding:16px 18px;font-size:16px;gap:12px}
  .po-faq__a{padding:0 18px 18px 45px;font-size:15px}


  /* --- palvelualasivujen nimisto mobiilissa --- */

  .po-service-hero{padding-block:36px 40px}
  .po-service-hero__title{font-size:32px;letter-spacing:0}
  .po-service-hero__lead{margin-top:14px;font-size:16px}
  .po-service-hero__price{margin-top:16px;padding:5px 16px;font-size:22px}
  .po-service-hero__area{margin-top:12px;font-size:12px}
  /* Sama pinoaminen kuin .po-actions: yksi hallitseva nappi rivin levyisena,
     toissijainen sen alla. */
  .po-service-hero__actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:22px;
  }
  .po-service-hero__actions .po-btn{inline-size:100%}
  .po-service-hero__actions .po-btn--primary{padding:17px 28px;font-size:16px}
  .po-service-hero .po-btn--light{padding:12px 28px;font-size:14px}

  .po-contact-cta__title{font-size:22px}
  .po-contact-cta__text{font-size:15px}
  .po-contact-cta__form{margin-top:20px;padding:20px 18px}

  .po-includes__title{font-size:22px}
  .po-includes__list{grid-template-columns:1fr;margin-top:18px}
  /* Kapealla naytolla rinnakkaisuus puretaan takaisin allekkain. */
  .po-container:has(.po-includes + .po-includes){grid-template-columns:1fr;gap:36px}
  .po-includes__item{padding-left:30px;font-size:15px}
  .po-includes__item::before{inline-size:19px;block-size:19px;background-size:12px 12px}

  .po-trust__logo,
  .po-trust__logo img{max-inline-size:120px;max-block-size:44px}

  .po-pricebox__item{font-size:14px}
}

/* ---------- liikkeen vahentaminen ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .po-price:hover{transform:none}
  .po-service-card:hover{transform:none}
}

/* ==========================================================
   Evastebanneri mobiilissa
   Mitattu: banneri oli 377px = 57 % 664px:n ruudusta ja peitti
   heron molemmat CTA:t seka kiintean toimintopalkin. Mainosliikenne
   on maaritelmallisesti ensikavijoita, joten jokainen klikkaus
   laskeutui ruutuun jossa ei ollut yhtaan toimintoa.
   Tiivistetaan ILMAN etta hylkausnappia heikennetaan: molemmat
   napit pysyvat visuaalisesti yhdenvertaisina.
   Luokat varmennettu renderoidysta sivusta, ei arvattu.
   ========================================================== */
@media (max-width: 767px) {
  .dv-consent {
    padding: 12px;
  }
  .dv-consent__title {
    font-size: 1rem;
    margin-block-end: .25rem;
  }
  .dv-consent__text {
    font-size: .8125rem;
    line-height: 1.45;
    margin-block-end: .5rem;
  }
  .dv-consent__cats {
    margin-block: .5rem;
  }
  .dv-consent__cat-desc {
    display: none;
  }
  /* Napit riviin, ei pinoon: pinottuina ne veivat 153px bannerin 319px:sta.
     Molemmat valinnat pysyvat yhdenvertaisina — tama on tilan saastoa,
     ei hylkausnapin heikentamista. */
  .dv-consent__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .dv-consent__actions .dv-consent__btn--ghost,
  .dv-consent__actions .dv-consent__btn--primary {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  .dv-consent__btn {
    padding-block: .55rem;
    padding-inline: .5rem;
    font-size: .8125rem;
    min-block-size: 44px;
  }
}


/* ---------- Popos: selkeä, kantikas ilme ---------- */
h1,h2,h3{letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.15}
.po-hero__title,.po-pagehero__title,.po-service-hero__title{
  font-size:clamp(2.25rem,5.2vw,4.75rem);
  font-weight:650;
  line-height:1.08;
  letter-spacing:-.045em;
  text-shadow:none;
  text-align:left;
  margin-inline:0;
  max-inline-size:19ch;
}
.po-hero{padding-block:clamp(3rem,6vw,5.5rem) 3rem}
.po-hero__lead{
  margin-inline:0;
  margin-top:26px;
  max-inline-size:42ch;
  text-align:left;
  font-size:clamp(1rem,1.7vw,1.4rem);
  line-height:1.6;
  text-shadow:none;
}
.po-hero .po-actions{justify-content:flex-start;margin-top:30px}
.po-hero__phone{text-align:left}
.po-values{
  margin-top:48px;
  padding:26px 0 0;
  border-top:1px solid var(--po-green-soft);
  gap:24px;
}
.po-value{display:flex;align-items:center;justify-content:flex-start;gap:16px;text-align:left}
.po-value__icon,.po-principle__icon{border-radius:0;border-width:0;flex-shrink:0}
.po-value__icon{inline-size:48px;block-size:48px;background-size:26px}
.po-value__label{font-size:12px;letter-spacing:.12em;text-shadow:none}
.po-pagehero{text-align:left}
.po-pagehero__lead{margin-inline:0;text-align:left}
.po-pagehero .po-actions{justify-content:flex-start}
.po-service-hero__inner{justify-items:start;text-align:left}
.po-service-hero__actions{justify-content:flex-start}
.po-service-hero__price{border-width:1px}
.po-actions .po-btn--primary,.po-actions .po-btn--primary:hover,
.po-service-hero__actions .po-btn--primary{box-shadow:none}
.po-btn{min-block-size:48px}
.po-service-card,.po-price,.po-pricebox,.po-contact-cta__form{box-shadow:none}
.po-service-card{border-top-width:2px;transition:border-color .2s ease}
.po-service-card:hover,.po-price:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--po-green-dark);
}
.po-service-card:focus-within{border-color:var(--po-green-dark)}
.po-services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px}
.po-service-card__media{aspect-ratio:3/2}
.po-service-card__body{padding:26px;gap:12px}
.po-service-card__title{font-size:23px;letter-spacing:-.025em}
.po-service-card__link{margin-top:8px;justify-self:start}
.po-price,.po-pricebox{border-top-width:2px}
.po-trust{border-radius:0;border-inline:0;padding:24px 0;justify-content:space-between}
.po-hero + .po-section:has(.po-trust){padding-block:28px}
.po-about__title,.po-contact__title,.po-contact-cta__title{font-size:clamp(1.5rem,2.5vw,2.25rem);letter-spacing:-.035em}
.po-about__text{font-size:16px}
.po-about__media,.po-principles__media{position:relative;min-block-size:460px}
.po-about__media img,.po-principles__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.po-principle + .po-principle{padding-top:26px;border-top:1px solid var(--po-line)}
.po-principle__title{letter-spacing:.08em}
.po-person__photo{border-radius:0;inline-size:96px;block-size:112px}
.po-contact-cta__form{border:1px solid var(--po-line);border-top:2px solid var(--po-green-dark);padding:32px}
.po-faq{gap:0;border-top:1px solid var(--po-line)}
.po-faq__item{border:0;border-bottom:1px solid var(--po-line)}
.po-faq__item[open]{border-bottom-color:var(--po-green-dark)}
@media(min-width:1025px){
  .po-contact-cta > .po-container:has(.po-contact-cta__form){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:64px;
    grid-template-rows:auto auto 1fr;
    align-items:start;
  }
  .po-contact-cta__title,.po-contact-cta__text{grid-column:1}
  .po-contact-cta__form{grid-column:2;grid-row:1 / span 3;margin-top:0;max-inline-size:none}
}
@media(max-width:1024px){
  .po-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-about__media,.po-principles__media{min-block-size:0;aspect-ratio:16/9}
}
@media(max-width:767px){
  .po-hero{padding-block:40px 28px}
  .po-hero__title,.po-pagehero__title,.po-service-hero__title{font-size:clamp(2rem,8.5vw,3rem)}
  .po-values{grid-template-columns:1fr;gap:16px;margin-top:30px;padding-top:22px}
  .po-value__icon{inline-size:36px;block-size:36px;background-size:22px}
  .po-value__label{font-size:11px}
  .po-services-grid{grid-template-columns:1fr;gap:18px;margin-top:28px}
  .po-service-card__media{aspect-ratio:auto}
  .po-service-card__body{padding:18px 16px;gap:8px}
  .po-service-card__title{font-size:18px;overflow-wrap:anywhere}
  .po-price__name{overflow-wrap:anywhere}
  .po-contact-cta__form{padding:22px 18px}
  .po-contact__title{overflow-wrap:anywhere}
  .po-person{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .po-person__photo{inline-size:72px;block-size:88px}
  .po-trust{justify-content:flex-start;padding:20px 0}
}


/* ---------- Viimeistelty rytmi ja palvelukortit ---------- */
.po-container > .po-actions{margin-top:32px}
.po-contact-cta__text + .po-actions{margin-top:28px;justify-content:flex-start}
.po-service-card__body{grid-template-rows:auto auto 1fr auto;gap:12px;padding:28px}
.po-service-card__link{margin-top:12px;padding-block:8px;line-height:1.5}
.po-service-card{border:1px solid var(--po-line)}
.po-service-card__media{aspect-ratio:16/10}
.po-service-card__title{font-size:24px;font-weight:650}
.po-service-card__price{font-size:16px}
.po-service-card__lead{line-height:1.75}
.po-price__link{margin-top:12px;padding-block:6px}
.po-pricebox + .po-actions{margin-top:28px}
.po-prose + .po-actions{margin-top:28px}
.po-about__body > .po-actions{margin-top:8px}
.po-contact__col > .po-actions{margin-top:4px}
.po-contact__col{gap:22px}
.po-contact__lead{font-size:16px;line-height:1.7}
.po-principle__text{font-size:16px;line-height:1.75}
.po-btn{font-weight:650;line-height:1.35}
.po-actions{gap:14px}
.po-section{padding-block:clamp(48px,6vw,88px)}
.po-contact-cta + .po-contact-cta{padding-top:0}
.po-contact-cta + .po-contact{border-top:1px solid var(--po-line)}
.po-contact-cta__form{border-top-width:1px;padding:36px}
.dv-form{gap:20px}
.dv-form__field{gap:8px}
.dv-form__submit{margin-top:8px;min-block-size:48px}
.po-hero__title{max-inline-size:17ch;font-weight:600}
.po-hero__lead{margin-top:28px}
.po-hero .po-actions{margin-top:32px}
.po-about__title,.po-contact__title,.po-contact-cta__title{font-weight:650;line-height:1.2}
@media(max-width:767px){
  .po-container > .po-actions{margin-top:28px}
  .po-service-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .po-service-card__media{aspect-ratio:16/9;block-size:auto;min-block-size:0}
  .po-service-card__body{padding:24px;gap:10px}
  .po-service-card__title{font-size:24px;overflow-wrap:normal}
  .po-service-card__price{font-size:17px}
  .po-service-card__lead,.po-service-card__link{font-size:15px}
  .po-services-grid{gap:24px}
  .po-service-hero__actions{inline-size:100%}
  .po-contact-cta__form{padding:24px 20px;margin-top:28px}
  .po-about__body,.po-principles__list{padding-block:48px}
  .po-principle{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .po-principle__icon{inline-size:44px;block-size:44px}
  .po-principle__title{font-size:13px;letter-spacing:.08em}
  .po-principle__text{font-size:15px}
  .po-contact__title{font-size:23px}
  .po-hero__title{font-size:clamp(2rem,9vw,3rem)}
}

@media(max-width:767px){
 .po-prices__grid{grid-template-columns:1fr;gap:18px}
 .po-price{padding:24px;gap:10px}
 .po-price__name{font-size:21px;overflow-wrap:normal}
 .po-price__amount{font-size:20px}
}

/* Popos: oma ajanvaraussivu. Alustan lomake käyttää omaa natiivia rakennettaan. */
.po-booking-hero{padding-block:clamp(36px,5vw,64px);background:var(--po-bg-soft);border-bottom:1px solid var(--po-line)}
.po-booking-hero__eyebrow,.po-booking__eyebrow{font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--po-green-dark)}
.po-booking-hero__title{margin-top:18px;max-inline-size:20ch;font-size:clamp(2.25rem,4.7vw,4rem);font-weight:650;line-height:1.1;letter-spacing:-.045em}
.po-booking-hero__lead{margin-top:22px;max-inline-size:64ch;font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.75}
.po-booking-hero__details{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:26px;color:var(--po-muted);font-size:13px;font-weight:550}
.po-booking{padding-block:clamp(36px,5vw,64px) clamp(48px,7vw,88px)}
.po-booking__grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.po-booking__main,.po-booking__aside{min-inline-size:0}
.po-booking__intro{margin-bottom:28px}
.po-booking__intro h2{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:650;line-height:1.2}
.po-booking__intro p{margin-top:14px;max-inline-size:60ch;line-height:1.75;color:var(--po-muted)}
.po-booking__form{padding:28px;border:1px solid var(--po-line);background:var(--po-surface)}
.po-booking__privacy{margin-top:20px;font-size:13px;line-height:1.7;color:var(--po-muted)}
.po-booking__privacy a{color:var(--po-green-dark);text-underline-offset:3px}
.po-booking__aside{display:grid;gap:28px}
.po-booking__info{padding:28px;background:var(--po-bg-soft);border-top:3px solid var(--po-green-dark)}
.po-booking__subtitle{font-size:20px;font-weight:650;line-height:1.35;letter-spacing:-.025em}
.po-booking__eyebrow + .po-booking__subtitle{margin-top:14px}
.po-booking__includes{display:grid;gap:14px;margin-top:24px}
.po-booking__includes li{position:relative;padding-left:22px;font-size:14px;line-height:1.65}
.po-booking__includes li::before{content:"";position:absolute;left:1px;top:.5em;width:7px;height:11px;border:solid var(--po-green-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
.po-booking__text-link{display:inline-block;margin-top:22px;padding-block:8px;color:var(--po-green-dark);font-size:14px;font-weight:650;text-underline-offset:4px}
.po-booking__note,.po-booking__help{padding-inline:4px}
.po-booking__note p,.po-booking__help p{margin-top:12px;font-size:14px;line-height:1.75;color:var(--po-muted)}
.po-booking__help{padding-top:24px;border-top:1px solid var(--po-line)}
.po-booking__help .po-btn{margin-top:22px}
@media(max-width:900px){
  .po-booking__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .po-booking__aside{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .po-booking__info{grid-row:span 2}
}
@media(max-width:600px){
  .po-booking-hero{padding-block:32px}
  .po-booking-hero__title{font-size:clamp(2rem,8.5vw,3rem);margin-top:14px}
  .po-booking-hero__lead{margin-top:18px}
  .po-booking-hero__details{display:grid;gap:8px;margin-top:22px;font-size:12px}
  .po-booking__intro{margin-bottom:22px}
  .po-booking__form{padding:20px 16px}
  .po-booking__aside{grid-template-columns:minmax(0,1fr)}
  .po-booking__info{grid-row:auto;padding:24px}
  .po-booking__help .po-btn{inline-size:100%}
}

/* Native booking form: structure stays with Devella's step runtime. */
.po-booking__form .dv-form{min-inline-size:0;gap:24px}
.po-booking__form .dv-form__step{min-inline-size:0;margin:0;padding:0;border:0}
.po-booking__form .dv-form__step:not([hidden]){display:grid;gap:22px}
.po-booking__form .dv-form__step-title{padding:0;margin-bottom:24px;font-size:22px;font-weight:650;line-height:1.35;letter-spacing:-.025em}
.po-booking__form .dv-form__field{min-inline-size:0;gap:10px}
.po-booking__form .dv-form__control{min-inline-size:0;max-inline-size:100%;inline-size:100%;font-size:16px}
.po-booking__form [data-dv-booking-field] > .dv-form__label:not(:first-child){margin-top:18px}
.po-booking__form .dv-form__step-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px;padding-top:22px;border-top:1px solid var(--po-line)}
.po-booking__form .dv-form__step-progress{flex-basis:100%;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--po-muted)}
.po-booking__form .dv-form__step-prev,.po-booking__form .dv-form__step-next{inline-size:auto;min-block-size:48px;padding:12px 26px;border:1px solid var(--po-green-dark);border-radius:var(--po-radius-pill);font:600 15px/1.4 var(--po-font);cursor:pointer}
.po-booking__form .dv-form__step-prev{color:var(--po-green-dark);background:var(--po-surface)}
.po-booking__form .dv-form__step-next{margin-left:auto;color:var(--po-surface);background:var(--po-green-dark)}
.po-booking__form .dv-form__step-prev:disabled{opacity:.45;cursor:default}
.po-booking__form .dv-form__price{padding:20px;background:var(--po-bg-soft);border-top:2px solid var(--po-green-dark);font-size:14px;line-height:1.8}
.po-booking__form .dv-form__price strong{display:block;margin-top:8px;font-size:19px}
.po-booking__form .dv-form__addons{min-inline-size:0;margin:0;padding:0;border:0}
.po-booking__form .dv-form__addons-title{padding:0;margin-bottom:20px;font-size:20px;font-weight:650;line-height:1.45}
.po-booking__form .dv-form__addon:not([hidden]){display:flex;align-items:center;gap:14px;min-block-size:64px;margin-bottom:12px;padding:16px;border:1px solid var(--po-line);font-size:15px;line-height:1.6;cursor:pointer}
.po-booking__form .dv-form__addon:has(input:checked){border-color:var(--po-green-dark);background:var(--po-bg-soft)}
.po-booking__form input[type=checkbox]{flex:none;inline-size:20px;block-size:20px;accent-color:var(--po-green-dark)}
.po-booking__form [data-dv-field-type=checkbox]{grid-template-columns:20px minmax(0,1fr);align-items:start}
.po-booking__form [data-dv-field-type=checkbox] input{margin-top:3px}
.po-booking__form .dv-booking{min-inline-size:0;inline-size:100%;gap:16px}
.po-booking__form .dv-booking__bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-bottom:8px}
.po-booking__form .dv-booking__month{margin:0;text-align:center;font-size:18px;font-weight:650;letter-spacing:-.025em}
.po-booking__form .dv-booking__nav{display:grid;place-items:center;inline-size:44px;block-size:44px;padding:0;border:1px solid var(--po-line);border-radius:var(--po-radius-pill);background:var(--po-surface);color:var(--po-green-dark);font-size:26px;cursor:pointer}
.po-booking__form .dv-booking__nav:disabled{opacity:.35;cursor:default}
.po-booking__form .dv-booking__grid{display:block;min-inline-size:0;inline-size:100%}
.po-booking__form .dv-booking__weekdays,.po-booking__form .dv-booking__week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.po-booking__form .dv-booking__week{margin-top:6px}
.po-booking__form .dv-booking__weekday{padding-block:8px;text-align:center;color:var(--po-muted);font-size:12px;font-weight:600}
.po-booking__form .dv-booking__cell{min-inline-size:0}
.po-booking__form .dv-booking__day{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;inline-size:100%;min-inline-size:0;block-size:48px;padding:3px;border:1px solid transparent;border-radius:var(--po-radius-pill);background:var(--po-bg-soft);color:var(--po-ink);font:600 14px/1.25 var(--po-font);cursor:pointer}
.po-booking__form .dv-booking__day--free{color:var(--po-green-dark);border-color:var(--po-line)}
.po-booking__form .dv-booking__day--none{color:var(--po-muted);background:transparent;opacity:.45;cursor:default}
.po-booking__form .dv-booking__day--today{border-color:var(--po-green-dark)}
.po-booking__form .dv-booking__day--selected{color:var(--po-surface);background:var(--po-green-dark);border-color:var(--po-green-dark)}
.po-booking__form .dv-booking__dot{inline-size:4px;block-size:4px;border-radius:50%;background:currentColor}
.po-booking__form .dv-booking__day--none .dv-booking__dot{visibility:hidden}
.po-booking__form .dv-booking__times:not([hidden]){display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:10px;padding-top:20px;border-top:1px solid var(--po-line)}
.po-booking__form .dv-booking__times-title{grid-column:1/-1;margin:0 0 6px;font-size:15px;font-weight:650}
.po-booking__form .dv-booking__slot{min-inline-size:0;min-block-size:44px;padding:10px 8px;border:1px solid var(--po-line);border-radius:var(--po-radius-pill);color:var(--po-green-dark);background:var(--po-surface);font:600 14px/1.4 var(--po-font);cursor:pointer}
.po-booking__form .dv-booking__slot--selected{color:var(--po-surface);background:var(--po-green-dark);border-color:var(--po-green-dark)}
.po-booking__form .dv-booking__hint,.po-booking__form .dv-booking__status,.po-booking__form .dv-booking__selected{margin:0;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.po-booking__form .dv-booking__selected:not(:empty){padding:14px 16px;background:var(--po-bg-soft);border-left:3px solid var(--po-green-dark);font-weight:600}
.po-booking__form .dv-booking__status--error{color:var(--po-ink);padding:12px;border:1px solid currentColor}
.po-booking__form .dv-booking__retry{padding:12px 20px;border:1px solid var(--po-green-dark);border-radius:var(--po-radius-pill);color:var(--po-green-dark);background:var(--po-surface);font:600 14px var(--po-font);cursor:pointer}
.po-booking__form button:focus-visible,.po-booking__form .dv-form__addon:focus-within{outline:2px solid var(--po-green-dark);outline-offset:3px}
@media(hover:hover){
 .po-booking__form .dv-booking__day--free:not(.dv-booking__day--selected):hover,.po-booking__form .dv-booking__slot:not(.dv-booking__slot--selected):hover,.po-booking__form .dv-booking__nav:not(:disabled):hover{background:var(--po-bg-soft);border-color:var(--po-green-dark)}
}
@media(max-width:480px){
 .po-booking__form{padding:20px 12px}
 .po-booking__form .dv-form__step-title{font-size:20px}
 .po-booking__form .dv-booking__week,.po-booking__form .dv-booking__weekdays{gap:3px}
 .po-booking__form .dv-booking__day{block-size:44px;font-size:13px}
 .po-booking__form .dv-form__step-prev,.po-booking__form .dv-form__step-next{padding-inline:20px}
}

/* Etusivun heron slogan: selvasti alueriviä suurempi, alueriviin ei kosketa. */
.po-hero__slogan{
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin-bottom:8px;
}
.po-hero__lead:has(.po-hero__slogan){max-inline-size:none}
.po-hero__lead:has(.po-hero__slogan) > p:not(.po-hero__slogan){max-inline-size:42ch}
@media(max-width:767px){
  .po-hero__slogan{font-size:clamp(1.3rem,5.6vw,1.6rem);margin-bottom:4px}
}