:root {
  --dv-color-primary: #ff6900;
  --dv-color-primary-contrast: #14110e;
  --dv-color-secondary: #221c16;
  --dv-color-accent: #e35c00;
  --dv-color-bg: #faf6ef;
  --dv-color-surface: #ffffff;
  --dv-color-text: #14110e;
  --dv-color-muted: #6b6259;
  --dv-color-border: #e8e0d5;
  --dv-font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --dv-font-body: 'Manrope', system-ui, sans-serif;
  --dv-font-size-base: 17px;
  --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: 14px;
  --dv-spacing: 1rem;
  --dv-container-max: 1140px;
  --dv-container-gutter: clamp(1.25rem, 4vw, 2rem);
  --dv-shadow: 0 1px 2px rgba(20,17,14,0.07), 0 8px 24px rgba(20,17,14,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{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}
@media (max-width:480px){.dv-booking__grid{gap:1px}.dv-booking__slot{flex:1 1 40%}.dv-booking__month{font-size:1rem}}

/* --- customCss --- */
/* Keski-Pohjanmaan Paljuvuokraus — sivuston teema.
   :root-lohko on sopimus: komponenttien component.css kuluttaa naita propertyja. */

:root{
  --kp-ink:#14110e;
  --kp-ink-2:#221c16;
  --kp-cream:#faf6ef;
  --kp-cream-2:#f3ece0;
  --kp-surface:#ffffff;
  --kp-orange:#ff6900;
  --kp-orange-hover:#dd5a01;
  --kp-orange-wash:#fff1e6;
  --kp-orange-soft:#ffb27a;
  --kp-muted:#6b6259;
  --kp-muted-dark:#a89e91;
  --kp-line:#e8e0d5;
  --kp-line-dark:rgba(255,255,255,0.08);
  --kp-radius:14px;
  --kp-radius-sm:10px;
  --kp-radius-pill:999px;
  --kp-container:1140px;
  --kp-gutter:clamp(1.25rem, 4vw, 2rem);
  --kp-font-head:"Bricolage Grotesque", system-ui, sans-serif;
  --kp-font-body:"Manrope", system-ui, sans-serif;

  /* johdetut, vain taman tiedoston sisainen kaytto */
  --kp-radius-lg:20px;
  --kp-sec-y:clamp(3rem, 6vw, 64px);
  --kp-glow:0 10px 30px rgba(255,105,0,0.35);
}

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

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

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

h1,h2,h3,h4{
  margin:0;
  font-family:var(--kp-font-head);
  font-weight:800;
  line-height:1.13;
  letter-spacing:-0.02em;
}
h1{font-size:64px}
h2{font-size:44px}
h3,h4{line-height:1.3}
h3{font-size:20px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--kp-orange);outline-offset:3px;border-radius:4px}

/* sticky-header on 72px (mobiilissa 64px) -> ankkurihyppy ei saa jattaa
   otsikkoa sen alle. Header: components/header/component.css */
[id]{scroll-margin-top:88px}

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

.kp-container{
  width:100%;
  /* sisallon leveys on tasan --kp-container; gutter tulee sen ULKOPUOLELLE,
     jotta leveilla naytoilla sisalto asettuu 1140px:aan kuten lahteessa */
  max-width:calc(var(--kp-container) + 2 * var(--kp-gutter));
  margin-inline:auto;
  padding-inline:var(--kp-gutter);
}

.kp-section{padding-block:var(--kp-sec-y)}
.kp-section--cream{background:var(--kp-cream)}
.kp-section--cream-2{background:var(--kp-cream-2)}
.kp-section--dark{background:var(--kp-ink);color:var(--kp-cream)}

.kp-section__head{
  display:grid;
  gap:14px;
  justify-items:center;
  text-align:center;
  max-width:720px;
  margin:0 auto 46px;
}
.kp-section__title{font-size:44px}
.kp-section__lead{color:var(--kp-muted);font-size:17px}
.kp-section--dark .kp-section__lead{color:var(--kp-muted-dark)}

.kp-section__head--split{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px 40px;
  max-width:none;
  text-align:left;
}
.kp-section__head--split > div{display:grid;gap:14px}
.kp-section__aside{
  max-width:42ch;
  padding-top:6px;
  font-size:17px;
  color:var(--kp-muted-dark);
}

.kp-eyebrow{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.8px;
  color:var(--kp-orange-hover);
}
.kp-section--dark .kp-eyebrow,
.kp-hero .kp-eyebrow{color:var(--kp-orange-soft)}

.kp-card{
  background:var(--kp-surface);
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius-lg);
  padding:28px;
}
.kp-card--dark{
  background:var(--kp-ink-2);
  border-color:var(--kp-line-dark);
  color:var(--kp-cream);
}

.kp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:16px 30px;
  border:0;
  border-radius:var(--kp-radius-pill);
  font-family:var(--kp-font-body);
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.kp-btn:hover{transform:translateY(-1px)}

.kp-btn--primary{background:var(--kp-orange);color:var(--kp-ink);box-shadow:var(--kp-glow)}
.kp-btn--primary:hover{background:var(--kp-orange-hover)}


.kp-btn--outline{
  background:var(--kp-surface);
  color:var(--kp-ink);
  border:1px solid rgba(20,17,14,0.12);
}
.kp-btn--outline:hover{border-color:rgba(20,17,14,0.3)}

.kp-btn--ghost{
  background:transparent;
  color:var(--kp-cream);
  border:1.5px solid rgba(250,246,239,0.3);
}
.kp-btn--ghost:hover{border-color:rgba(250,246,239,0.6)}

.kp-btn--soft{background:var(--kp-orange-wash);color:var(--kp-ink)}
.kp-btn--soft:hover{background:color-mix(in srgb, var(--kp-orange-wash) 86%, var(--kp-orange))}

.kp-btn--dark{background:var(--kp-ink);color:var(--kp-cream)}
.kp-btn--dark:hover{background:var(--kp-ink-2)}

.kp-actions{display:flex;flex-wrap:wrap;gap:12px}
.kp-actions--center{justify-content:center}

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

.kp-hero{
  background:var(--kp-ink);
  color:var(--kp-cream);
  padding-block:clamp(3rem, 5.5vw, 72px) var(--kp-sec-y);
}
.kp-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:52px;
  align-items:center;
}
.kp-hero__body{display:grid;justify-items:start;gap:22px}
.kp-hero__title{font-size:64px;line-height:1.02;max-width:12ch}
.kp-hero__lead{max-width:52ch;color:var(--kp-muted-dark)}
.kp-hero__media{margin:0;border-radius:var(--kp-radius);overflow:hidden}
/* Lahde nayttaa kuvan sen omassa kuvasuhteessa (1441x1754 = 0.822; renderoity
   509x619 = 0.822) eli EI rajaa sita lainkaan. Siksi ei aspect-ratiota
   tyopoydalla. Kapeilla naytoilla pystykuva olisi kohtuuttoman korkea, joten
   siella rajataan -- ks. 1024px-lohko. */
.kp-hero__media img{width:100%;height:auto}

.kp-rating{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--kp-muted-dark)}
.kp-rating__stars{color:var(--kp-orange);letter-spacing:2px}

/* sisasivun hero */
.kp-hero--page .kp-container{display:grid;justify-items:start;gap:20px}
.kp-hero--page .kp-hero__title{max-width:16ch}
.kp-breadcrumb{
  padding:7px 16px;
  border:1px solid rgba(250,246,239,0.18);
  border-radius:var(--kp-radius-pill);
  font-size:13px;
  font-weight:600;
  color:var(--kp-orange-soft);
}

/* ---------- etunauha ---------- */

.kp-strip{background:var(--kp-ink);border-top:1px solid var(--kp-line-dark);padding-block:24px}
.kp-strip__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px}
.kp-strip__item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  color:var(--kp-cream);
}
.kp-strip__tick{color:var(--kp-orange);font-weight:800}

/* ---------- nain se toimii ---------- */

.kp-steps__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kp-step{display:grid;align-content:start;gap:12px}
.kp-step__num{
  font-family:var(--kp-font-head);
  font-size:22px;
  font-weight:800;
  line-height:1;
  color:var(--kp-orange);
}
.kp-step__text{font-size:15px;color:var(--kp-muted)}

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

.kp-pricing__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-bottom:24px;
}
.kp-price{display:grid;align-content:start;gap:10px}
.kp-price__title{
  font-family:var(--kp-font-body);
  font-size:17px;
  font-weight:700;
  letter-spacing:0;
  color:var(--kp-orange-hover);
}
.kp-price__amount{
  font-family:var(--kp-font-head);
  font-size:52px;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
}
.kp-price__desc{font-size:15px;color:var(--kp-muted)}
.kp-price__cta{margin-top:12px;width:100%}

.kp-price--featured{
  background:var(--kp-ink);
  border-color:var(--kp-ink);
  color:var(--kp-cream);
}
.kp-price--featured .kp-price__title{color:var(--kp-orange)}
.kp-price--featured .kp-price__desc{color:var(--kp-muted-dark)}
.kp-price__badge{
  justify-self:start;
  padding:6px 10px 5px;
  border-radius:var(--kp-radius-pill);
  background:var(--kp-orange);
  color:var(--kp-ink);
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.kp-extras{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px 28px;
  margin:0;
  padding:26px 30px;
}
.kp-extras__item{display:grid;gap:6px}
.kp-extras__label{font-size:14px;font-weight:600;color:var(--kp-muted)}
.kp-extras__value{
  margin:0;
  font-family:var(--kp-font-head);
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.kp-extras__link{color:var(--kp-orange-hover);font-size:17px;text-decoration:none}
.kp-extras__link:hover{text-decoration:underline}

/* ---------- varauslomake ---------- */

.kp-booking__grid{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.15fr);
  gap:52px;
  align-items:start;
}
.kp-booking__intro{display:grid;gap:18px}
.kp-contacts{display:grid;gap:14px;margin-top:12px}
.kp-contact{display:flex;align-items:center;gap:14px;padding:22px 26px}
.kp-contact__icon{font-size:20px;line-height:1;color:var(--kp-orange)}
.kp-contact__body{display:grid;gap:3px}
.kp-contact__label{font-size:14px;color:var(--kp-muted)}
.kp-contact__number{
  font-family:var(--kp-font-head);
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
  text-decoration:none;
}
.kp-contact__number:hover{color:var(--kp-orange-hover)}

.kp-booking__form{
  padding:34px 38px;
  border-radius:var(--kp-radius-lg);
  background:var(--kp-ink);
  color:var(--kp-cream);
}

/* alustan tuottama lomakemarkup (dv-form*) tummalla kortilla */
.kp-booking__form .dv-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
}
.kp-booking__form .dv-form__field{display:grid;gap:8px;grid-column:1 / -1}
/* aloitus- ja palautuspaiva vierekkain; jos :has() puuttuu, kentat ovat taysleveita */
.kp-booking__form .dv-form__field:has(input[type="date"]){grid-column:span 1}

.kp-booking__form .dv-form__label{font-size:14px;font-weight:700;color:var(--kp-cream)}
.kp-booking__form .dv-form__label span{color:var(--kp-orange)}

.kp-booking__form .dv-form__control,
.kp-booking__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.kp-booking__form select,
.kp-booking__form textarea{
  width:100%;
  padding:11px 15px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--kp-radius-sm);
  background:rgba(255,255,255,0.06);
  font:inherit;
  font-size:16px;
  color:var(--kp-cream);
  color-scheme:dark;
}
.kp-booking__form ::placeholder{color:#7f766b;opacity:1}
.kp-booking__form textarea{min-height:96px;resize:vertical}
.kp-booking__form .dv-form__control:focus,
.kp-booking__form input:focus,
.kp-booking__form select:focus,
.kp-booking__form textarea:focus{
  outline:2px solid var(--kp-orange);
  outline-offset:1px;
  border-color:transparent;
}

.kp-booking__form .dv-form__submit,
.kp-booking__form button{
  grid-column:1 / -1;
  width:100%;
  padding:16px 30px;
  border:0;
  border-radius:var(--kp-radius-pill);
  background:var(--kp-orange);
  color:var(--kp-ink);
  font-family:var(--kp-font-body);
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  transition:background-color .18s ease;
}
.kp-booking__form .dv-form__submit:hover,
.kp-booking__form button:hover{background:var(--kp-orange-hover);color:#ffffff}

.kp-booking__form .dv-form__check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  color:var(--kp-muted-dark);
}
.kp-booking__form .dv-form__status,
.kp-booking__form .dv-form__full-message{
  grid-column:1 / -1;
  padding:12px 16px;
  border-radius:var(--kp-radius-sm);
  background:rgba(255,255,255,0.06);
  font-size:15px;
  color:var(--kp-cream);
}

/* ---------- lisapalvelut ---------- */

.kp-services__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kp-service{display:grid;align-content:start;gap:14px;padding:26px}
.kp-service__title{font-size:18px}
.kp-service__text{font-size:15px;color:var(--kp-muted-dark)}
.kp-service__price{
  margin-top:4px;
  font-size:17px;
  font-weight:800;
  color:var(--kp-orange);
}
.kp-service__unit{font-weight:700}

/* ---------- UKK ---------- */

.kp-faq__list{display:grid;gap:12px;max-width:900px;margin-inline:auto}
.kp-faq__item{
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  background:var(--kp-surface);
  overflow:hidden;
}
.kp-faq__q{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.kp-faq__q::-webkit-details-marker{display:none}
.kp-faq__q::before{
  content:"+";
  flex:none;
  width:1ch;
  font-size:20px;
  font-weight:700;
  color:var(--kp-orange);
}
.kp-faq__item[open] .kp-faq__q::before{content:"\2212"}
.kp-faq__q:hover{color:var(--kp-orange-hover)}
.kp-faq__a{
  padding:0 24px 20px 51px;
  font-size:16px;
  color:var(--kp-muted);
}

/* ---------- some ---------- */

.kp-social__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-bottom:36px;
}
.kp-social__item{border-radius:var(--kp-radius);overflow:hidden;background:var(--kp-line)}
.kp-social__item img{width:100%;height:auto}

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

.kp-prose{max-width:70ch;display:grid;gap:1.25rem}
.kp-prose h2{font-size:26px;margin-top:1.5rem}
.kp-prose h3{font-size:19px}
.kp-prose p,.kp-prose li{font-size:17px;line-height:1.7}
.kp-prose ul{display:grid;gap:.5rem;padding-left:1.25rem;list-style:disc}
.kp-prose a{color:var(--kp-orange-hover)}
.kp-prose em{color:var(--kp-muted)}

/* ---------- tietoa meista ---------- */

.kp-stats{padding-bottom:0}
.kp-stats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kp-stat{display:grid;align-content:start;gap:10px}
.kp-stat__body{display:grid;gap:8px}
.kp-stat__num{
  font-family:var(--kp-font-head);
  font-size:44px;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--kp-orange);
}
.kp-stat__title{font-family:var(--kp-font-head);font-size:20px;font-weight:800;letter-spacing:-0.02em;line-height:1.3}
.kp-stat__text{font-size:15px;color:var(--kp-muted)}

.kp-showcase__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.kp-showcase__card{padding:0;overflow:hidden;display:grid;align-content:start}
.kp-showcase__media{margin:0}
.kp-showcase__media img{width:100%;height:auto}
.kp-showcase__body{display:grid;gap:12px;padding:26px 30px 30px}
.kp-showcase__title{font-size:22px}
.kp-showcase__text{font-size:16px;color:var(--kp-muted)}

.kp-setup__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.kp-setup__step{display:flex;align-items:flex-start;gap:16px;padding:24px 26px}
.kp-setup__num{
  flex:none;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:var(--kp-radius-pill);
  background:var(--kp-orange);
  color:var(--kp-ink);
  font-family:var(--kp-font-head);
  font-size:16px;
  font-weight:800;
  line-height:1;
}
.kp-setup__step > div{display:grid;gap:8px}
.kp-setup__title{font-size:18px}
.kp-setup__text{font-size:15px;color:var(--kp-muted-dark)}

.kp-holiday__card{
  display:grid;
  gap:16px;
  justify-items:center;
  max-width:760px;
  margin-inline:auto;
  padding:40px;
  text-align:center;
}
.kp-holiday__title{font-size:22px}
.kp-holiday__text{color:var(--kp-muted);font-size:16px}

.kp-season__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kp-season__item{display:grid;align-content:start;gap:12px}
.kp-season__icon{font-size:26px;line-height:1}
.kp-season__text{font-size:15px;color:var(--kp-muted)}

.kp-cta__card{
  display:grid;
  gap:18px;
  justify-items:center;
  padding:60px 40px;
  border-radius:24px;
  background:var(--kp-ink);
  color:var(--kp-cream);
  text-align:center;
}
.kp-cta__title{font-size:44px}
.kp-cta__text{color:var(--kp-muted-dark);max-width:52ch}

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

@media (max-width:1024px){
  h1,.kp-hero__title{font-size:44px}
  h2,.kp-section__title,.kp-cta__title{font-size:34px}

  .kp-hero__grid{grid-template-columns:1fr;gap:36px}
  .kp-hero__title{max-width:none}
  .kp-hero__media img{aspect-ratio:1/1;object-fit:cover}

  .kp-strip__list{grid-template-columns:repeat(2,minmax(0,1fr))}

  .kp-steps__grid,
  .kp-pricing__grid,
  .kp-services__grid,
  .kp-setup__grid,
  .kp-season__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .kp-extras{grid-template-columns:repeat(3,minmax(0,1fr))}

  .kp-booking__grid{grid-template-columns:1fr;gap:36px}

  .kp-stats__grid{grid-template-columns:1fr}
  .kp-showcase__grid{grid-template-columns:1fr}
  .kp-social__grid{gap:16px}

  .kp-section__head--split{flex-direction:column;align-items:flex-start}
  .kp-section__aside{padding-top:0}
}

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

@media (max-width:767px){
  [id]{scroll-margin-top:80px}
  body{font-size:16px}
  .kp-eyebrow{font-size:12px;letter-spacing:1.4px}
  h1,.kp-hero__title{font-size:36px}
  h2,.kp-section__title,.kp-cta__title{font-size:28px}
  h3{font-size:19px}

  .kp-btn{font-size:16px;padding:14px 24px}
  .kp-card{padding:22px}
  .kp-section__head{margin-bottom:32px}

  .kp-strip__list,
  .kp-steps__grid,
  .kp-pricing__grid,
  .kp-services__grid,
  .kp-season__grid,
  .kp-setup__grid,
  .kp-social__grid{grid-template-columns:1fr}

  .kp-extras{grid-template-columns:repeat(2,minmax(0,1fr));padding:22px}

  .kp-hero__body{gap:18px}
  .kp-actions .kp-btn{flex:1 1 auto}

  .kp-booking__form{padding:24px 20px}
  .kp-booking__form .dv-form{grid-template-columns:1fr}
  .kp-booking__form .dv-form__field:has(input[type="date"]){grid-column:1 / -1}

  .kp-stat__num{font-size:38px}
  .kp-faq__q{padding:16px 18px;font-size:16px}
  .kp-faq__a{padding:0 18px 18px 43px}
  .kp-holiday__card{padding:28px 22px}
  .kp-cta__card{padding:40px 24px}
}

/* ---------- 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;
  }
  .kp-btn:hover{transform:none}
}


/* CLS-korjaus: varaa hero-kuvalle sen luonnollinen kuvasuhde (1441x1754)
   jo ennen latausta, jotta sivun yläosa ei hyppää alaspäin kuvan latautuessa.
   Scopattu työpöydälle: mobiili/tabletti (<=1024px) saa kuvasuhteen omasta
   media querystään. */
@media (min-width: 1025px) {
  .kp-hero__media {
    aspect-ratio: 1441 / 1754;
  }
}

/* Saavutettavuus (WCAG AA): riittävä kontrasti vaaleilla pinnoilla
   (cream, cream-2, surface) oleville pienille oransseille teksteille.
   --kp-orange-hover (#e35c00) jää nappien hover-taustaksi; nämä tekstit
   saavat tummemman sävyn, joka ylittää 4,5:1 kaikilla vaaleilla taustoilla.
   Tummilla pinnoilla (kp-section--dark, kp-hero) oranssit tekstit pysyvät
   edelleen vaaleana accenttina (--kp-orange-soft). */
:root {
  --kp-orange-text: #b24400;
}

.kp-eyebrow      { color: var(--kp-orange-text); }
.kp-price__title { color: var(--kp-orange-text); }
.kp-extras__link { color: var(--kp-orange-text); }
.kp-step__num    { color: var(--kp-orange-text); }

/* Saavutettavuus- ja CLS-korjaukset */

/* CLS: varaa hero-kuvalle tila ennen latausta (luonnollinen kuvasuhde 1441x1754) */
@media (min-width: 1025px) {
  .kp-hero__media { aspect-ratio: 1441 / 1754; }
  .kp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* Kontrasti (WCAG AA): oranssi otsikko on liian vaalea vaalealla kerman taustalla */
#hinnasto .kp-eyebrow { color: var(--kp-ink); }
.kp-price:not(.kp-price--featured) .kp-price__title { color: var(--kp-ink); }

/* Kontrastin viimeistely: sama oranssi-vaalealla-ongelma muissa vaaleissa osioissa */

/* Silmäkekorostus (13px pientä tekstiä) vaaleilla osioilla: tumma täyttää WCAG AA 4.5:1.
   Tummissa osioissa (hero, services) säilyy orange-soft korkeamman spesifisyyden säännöllä. */
.kp-eyebrow { color: var(--kp-ink); }

/* Hinnaston "Kysy tarjous →" -linkki vaalealla kortilla (17px normaalia tekstiä) */
.kp-extras__link,
.kp-extras__link:hover { color: var(--kp-ink); }

/* Vaihenumero (22px iso teksti): tummempi oranssi riittää AA-tasoon 3:1 */
.kp-step__num { color: var(--kp-orange-hover); }

.dv-consent__link {
  color: #000;
}