/* ==========================================================================
   OMATEEMA — palvelu.css
   Palvelusivun tyylit (single-palvelu.php).

   HUOM: Tämä tiedosto sisältää VAIN palvelusivukohtaiset tyylit.
   Palvelusivu käyttää myös main.css (design tokens + header + footer)
   ja front-page.css (.taso, .miksi, .alueet — jaetut osiot).

   Ladataan: inc/core/performance.php → is_singular('palvelu')
   ========================================================================== */


/* ==========================================================================
   YLEISET
   ========================================================================== */

.palvelu-page strong { font-weight: var(--font-medium); }


/* ==========================================================================
   TASO — palvelusivun overrideet
   Perustyylit: front-page.css (.taso, .taso__*)

   HUOM: Tummalla taustalla + wysiwyg-sisältö -yhdistelmän overrideet
   pitää viedä myös <p>-tasolle, koska main.css:n yleinen
   "p { color: var(--color-text-secondary); }" voittaa wrapperin
   color-säännön spesifisyydellä. Sama kaava käytössä myös .palvelu-cta:ssa.
   ========================================================================== */

.palvelu-page .taso__text {
  color: var(--color-text-inverse);
}
.palvelu-page .taso__text p {
  color: inherit;
}

/* Liidikone tason tummalla taustalla — heron rakenne, tumman taustan kontrasti */
.taso .liidikone .ob-widget {
  background: transparent;
}

.taso .liidikone .ob-subtitle {
  color: rgba(255, 255, 255, 0.75);
}

.taso .liidikone .ob-back {
  color: rgba(255, 255, 255, 0.7);
}

.taso .liidikone .ob-back:hover,
.taso .liidikone .ob-back:focus-visible {
  color: #fff;
}

.taso .liidikone .ob-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.taso .liidikone .ob-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.taso .liidikone .ob-field-wrap label {
  color: rgba(255, 255, 255, 0.6);
}

.taso .liidikone .ob-input:focus ~ label,
.taso .liidikone .ob-input:not(:placeholder-shown) ~ label {
  color: #fff;
}

/* Selaimen autofill — Chrome/Safari pakottaa oman vaalean taustan ja
   tumman tekstin -webkit-autofill-pseudoluokan kautta. Yliajetaan
   isolla box-shadow-temppulla joka peittää autofill-taustan, ja
   -webkit-text-fill-colorilla joka voittaa autofill-tekstivärin. */
.taso .liidikone .ob-input:-webkit-autofill,
.taso .liidikone .ob-input:-webkit-autofill:hover,
.taso .liidikone .ob-input:-webkit-autofill:focus,
.taso .liidikone .ob-input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

.taso .liidikone .ob-terms {
  color: rgba(255, 255, 255, 0.65);
}

.taso .liidikone .ob-terms a {
  color: #fff;
}

.taso .liidikone .ob-btn-primary {
  background: #fff;
  color: var(--color-primary);
}


/* ==========================================================================
   BREADCRUMB — sama container-kaava kuin muilla osioilla
   ========================================================================== */

.breadcrumb {
  padding: var(--space-6) var(--section-px) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: var(--space-2);
  color: var(--color-border-strong);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb li[aria-current="page"] { color: var(--color-text); }


/* ==========================================================================
   1. HERO SPLIT — oma osio palvelusivulle (omabot sen takia)
   ========================================================================== */

.palvelu-hero {
  padding: var(--space-10) var(--section-px) var(--space-20);
}

.palvelu-hero__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.palvelu-hero__left { display: flex; flex-direction: column; }

.palvelu-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-4);
}

.palvelu-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-snug);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.palvelu-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 34rem;
}

.palvelu-hero__lead strong {
  color: var(--color-text);
  font-weight: var(--font-medium);
}

.palvelu-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
  list-style: none;
}

.palvelu-hero__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.palvelu-hero__fact-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--font-medium);
}

.palvelu-hero__fact-value {
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
}

.palvelu-hero__image {
  position: relative;
  height: 100%;
  min-height: 34rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-ghost) 0%, var(--color-surface) 100%);
}

.palvelu-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.palvelu-hero__image-caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-primary);
}

/* Hero CTA-napit (korvaavat omabotin toistaiseksi) */
.palvelu-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.palvelu-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-base);
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.palvelu-hero__btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.palvelu-hero__btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.palvelu-hero__btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border-strong);
}

.palvelu-hero__btn--secondary:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary);
}

.palvelu-hero__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 63.999rem) {
  .palvelu-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .palvelu-hero__image { min-height: 20rem; order: -1; }
  .palvelu-hero__facts { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}


/* ==========================================================================
   2. SAAT — Iso kortti (drop shadow) + hintalaskuri-slider
   ========================================================================== */

.palvelu-saat {
  padding: var(--space-24) var(--section-px);
  background: var(--color-primary-light);
}

.palvelu-saat__inner {
  max-width: var(--container-2xl);
  margin: 0 auto;
}

/* ISO KORTTI — nostaa osion esiin off-white-taustan päältä */
.palvelu-saat__kortti {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-16);
  align-items: center;
}

/* --- Vasen: kuva --- */

.palvelu-saat__kuva {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-ghost) 0%, var(--color-surface) 100%);
  position: relative;
}

.palvelu-saat__kuva img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Oikea: teksti + slider + CTA --- */

.palvelu-saat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.palvelu-saat__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
  margin: 0 0 var(--space-2);
}

.palvelu-saat__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

.palvelu-saat__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.palvelu-saat__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-base);
  background: var(--color-primary);
  color: var(--color-white);
  margin-top: var(--space-4);
  width: 100%;
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.palvelu-saat__btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.palvelu-saat__btn-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.palvelu-saat__btn:hover .palvelu-saat__btn-arrow {
  transform: translateX(4px);
}

/* Sykähdys kun slider-veto päättyy — huomion kiinnitys */
.palvelu-saat__btn.is-pulsing {
  animation: cta-sykahdys 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cta-sykahdys {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(201, 217, 98, 0.6);
  }
  40% {
    transform: scale(1.02);
    box-shadow: 0 0 0 12px rgba(201, 217, 98, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(201, 217, 98, 0);
  }
}

/* ==========================================================================
   HINTALASKURI — iso "flow"-komponentti: hinta ensin, slider sen alla
   ========================================================================== */

.hintalaskuri {
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* --- Tulos (hinta) — näkyy ensin, iso ja palkitseva --- */

.hintalaskuri__tulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hintalaskuri__tulos-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hintalaskuri__tulos-arvo {
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-snug);
  line-height: 1.05;
}

.hintalaskuri__tulos-prefix {
  font-size: 0.5em;
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  letter-spacing: 0;
  margin-right: 0.15em;
  vertical-align: 0.3em;
}

/* Rivi jossa hinta ja info-painike — painike EI ole hinta-elementin sisällä
   jottei scale-animaatio vääristä painiketta soikioksi */
.hintalaskuri__tulos-rivi {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}

/* --- Info-painike hinnan perässä (pyöreä pallo) --- */

.hintalaskuri__info {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  padding: 0;
  margin: 0;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  line-height: 0;
  flex: 0 0 22px;
  aspect-ratio: 1 / 1;
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.hintalaskuri__info svg {
  width: 12px;
  height: 12px;
  display: block;
  flex: none;
}

.hintalaskuri__info:hover,
.hintalaskuri__info:focus-visible {
  background: var(--color-primary-dark);
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(31, 61, 46, 0.3);
  outline: none;
}

.hintalaskuri__info[aria-expanded="true"] {
  background: var(--color-primary-dark);
  box-shadow: 0 3px 10px rgba(31, 61, 46, 0.3);
}

/* --- Info-paneeli (modaali keskellä näyttöä) --- */

.hintalaskuri__info-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(15, 31, 23, 0.6);
  backdrop-filter: blur(4px);
  animation: info-backdrop 180ms ease-out;
}

.hintalaskuri__info-panel[hidden] { display: none; }

.hintalaskuri__info-panel-inner {
  max-width: 32rem;
  width: 100%;
  padding: var(--space-8);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 20px 60px rgba(15, 31, 23, 0.5),
    0 8px 20px rgba(15, 31, 23, 0.3);
  animation: info-avaa 260ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* wpautop generoi <p>-tageja, joilla ei ole __info-text -luokkaa.
   Kohdistetaan tyyli suoraan paneelin sisällä oleviin elementteihin. */
.hintalaskuri__info-panel-inner p,
.hintalaskuri__info-panel-inner li,
.hintalaskuri__info-panel-inner span:not(.hintalaskuri__info-title) {
  color: var(--color-white);
}

.hintalaskuri__info-panel-inner p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.hintalaskuri__info-panel-inner p:last-child {
  margin-bottom: 0;
}

.hintalaskuri__info-close {
  box-sizing: border-box;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  line-height: 0;
  flex: none;
  aspect-ratio: 1 / 1;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}

.hintalaskuri__info-close:hover,
.hintalaskuri__info-close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  outline: none;
}

.hintalaskuri__info-close svg {
  width: 14px;
  height: 14px;
  display: block;
}

@keyframes info-backdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes info-avaa {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hintalaskuri__info-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-right: var(--space-8);
}

.hintalaskuri__info-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-white);
  margin: 0 0 var(--space-4);
}

.hintalaskuri__info-text:last-child { margin-bottom: 0; }

.hintalaskuri__info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hintalaskuri__info-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-white);
}

.hintalaskuri__info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .hintalaskuri__info-panel { animation: none; }
  .hintalaskuri__info-panel-inner { animation: none; }
}

.hintalaskuri__tulos-rivi.is-pulsing {
  animation: hinta-pulse 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
}

@keyframes hinta-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.hintalaskuri__tulos-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  background: var(--color-primary-ghost);
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.hintalaskuri__tulos-note-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Kontrollit (slider + label) --- */

.hintalaskuri__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hintalaskuri__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.hintalaskuri__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hintalaskuri__koko {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-snug);
}

/* --- Slider-wrap — yksinkertainen kontainer --- */

.hintalaskuri__slider-wrap {
  position: relative;
}

/* Etapit ovat erillinen elementti kokonaan sliderin alapuolella, eivät vaikuta slideriin.
   Tasainen jakauma flex + space-between — kompakti, suuntaa-antava. */

.hintalaskuri__etapit {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0 14px; /* = thumb/2, jotta tekstit asettuvat radan tosipäätepisteisiin */
}

.hintalaskuri__etappi {
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Reuna-etapit linjautuvat radan päihin — keski-etapit pysyvät keskellä */
.hintalaskuri__etapit > .hintalaskuri__etappi:first-child {
  text-align: left;
}
.hintalaskuri__etapit > .hintalaskuri__etappi:last-child {
  text-align: right;
}

/* --- Slider ---
 * Täytön kohdistus pallon keskipisteeseen:
 * Natiivin range-nupin keskipiste liikkuu välillä [thumb/2 … 100% − thumb/2].
 * Siksi taustagradientin täyttöraja lasketaan samalle akselille:
 * fillPx = thumb/2 + (value−min)/(max−min) * (trackWidth − thumb).
 * JS asettaa --fill -muuttujaksi pelkän prosentin (0..1), CSS hoitaa pikselimatematiikan.
 */

.hintalaskuri__slider {
  --track-height: 12px;
  --thumb-size: 28px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--thumb-size); /* varataan tilaa pallolle, ettei se leikkaudu */
  line-height: 0;
  font-size: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* --- Webkit rata + täyttö --- */
.hintalaskuri__slider::-webkit-slider-runnable-track {
  height: var(--track-height);
  border-radius: 9999px;
  background:
    linear-gradient(
      to right,
      var(--color-primary) 0,
      var(--color-primary) calc(var(--thumb-size) / 2 + (100% - var(--thumb-size)) * var(--fill, 0.45)),
      var(--color-primary-ghost) calc(var(--thumb-size) / 2 + (100% - var(--thumb-size)) * var(--fill, 0.45)),
      var(--color-primary-ghost) 100%
    );
  border: none;
}

/* --- Mozilla rata + täyttö --- */
.hintalaskuri__slider::-moz-range-track {
  height: var(--track-height);
  border-radius: 9999px;
  background: var(--color-primary-ghost);
  border: none;
}
.hintalaskuri__slider::-moz-range-progress {
  height: var(--track-height);
  border-radius: 9999px;
  background: var(--color-primary);
}

/* --- Webkit nuppi — valkoinen sisus + brändivihreä reunus = napattava "grip" --- */
.hintalaskuri__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
  background: #fff;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-full);
  cursor: grab;
  /* Moderni diffuusi varjo — suuri blur, matala opacity, kelluu radan yllä */
  box-shadow:
    0 1px 2px rgba(31, 61, 46, 0.08),
    0 8px 16px -4px rgba(31, 61, 46, 0.18),
    0 16px 32px -8px rgba(31, 61, 46, 0.12);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-width var(--transition-fast);
}

.hintalaskuri__slider::-webkit-slider-thumb:hover {
  transform: scale(1.08);
  box-shadow:
    0 1px 2px rgba(31, 61, 46, 0.1),
    0 12px 24px -4px rgba(31, 61, 46, 0.24),
    0 24px 48px -8px rgba(31, 61, 46, 0.16);
}

.hintalaskuri__slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.04);
  box-shadow:
    0 1px 2px rgba(31, 61, 46, 0.12),
    0 6px 12px -2px rgba(31, 61, 46, 0.22),
    0 12px 24px -6px rgba(31, 61, 46, 0.14);
}

/* --- Mozilla nuppi --- */
.hintalaskuri__slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: #fff;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-full);
  cursor: grab;
  box-shadow:
    0 1px 2px rgba(31, 61, 46, 0.08),
    0 8px 16px -4px rgba(31, 61, 46, 0.18),
    0 16px 32px -8px rgba(31, 61, 46, 0.12);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.hintalaskuri__slider::-moz-range-thumb:hover {
  transform: scale(1.08);
  box-shadow:
    0 1px 2px rgba(31, 61, 46, 0.1),
    0 12px 24px -4px rgba(31, 61, 46, 0.24),
    0 24px 48px -8px rgba(31, 61, 46, 0.16);
}

.hintalaskuri__slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.04);
  box-shadow:
    0 1px 2px rgba(31, 61, 46, 0.12),
    0 6px 12px -2px rgba(31, 61, 46, 0.22),
    0 12px 24px -6px rgba(31, 61, 46, 0.14);
}

.hintalaskuri__slider:focus-visible {
  outline: none;
}
.hintalaskuri__slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px var(--color-accent),
    0 1px 2px rgba(31, 61, 46, 0.08),
    0 8px 16px -4px rgba(31, 61, 46, 0.18);
}
.hintalaskuri__slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 4px var(--color-accent),
    0 1px 2px rgba(31, 61, 46, 0.08),
    0 8px 16px -4px rgba(31, 61, 46, 0.18);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hintalaskuri__tulos-rivi.is-pulsing { animation: none; }
  .palvelu-saat__btn.is-pulsing { animation: none; }
}

/* --- Mobiili & tabletti --- */
@media (max-width: 63.999rem) {
  /* Kortin layout pinottuna, kompaktimpi padding */
  .palvelu-saat__kortti {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  /* Body-osion sisäväli tiukempi */
  .palvelu-saat__body {
    gap: var(--space-2);
  }

  /* Kuva 16:10, max-korkeus rajoitettu jottei vie liikaa tilaa
     hinnalta ja CTA:lta. Pienillä laitteilla halutaan että hinta-arvio
     ja CTA mahtuvat saman näkymän alueelle. */
  .palvelu-saat__kuva {
    aspect-ratio: 16 / 10;
    max-height: 18rem;
  }

  /* Hintalaskurin osioiden sisäväli pienemmäksi */
  .hintalaskuri {
    gap: var(--space-4);
  }

  /* Hinta-arvon clamp: alaraja 2.5rem (40px), ei tipu liian pieneksi
     vaikka viewport olisi kapea. Päätöksentekohetkellä luvun pitää
     erottua selkeästi. */
  .hintalaskuri__tulos-arvo {
    font-size: clamp(2.5rem, 7vw, 3rem);
  }

  /* "Sisältää kaiken" -note: säilytetään pillin muoto, mutta annetaan
     tekstin wrapata sisältä. Pieni padding ja kapeampi border-radius
     jos teksti vie kaksi riviä. */
  .hintalaskuri__tulos-note {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    line-height: 1.4;
    border-radius: var(--radius-xl); /* pyöreä mutta ei täysi pill — sallii 2 riviä siististi */
  }

  /* Slider-row: jos label pitkä + arvo → annetaan rivin venyä */
  .hintalaskuri__row {
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .hintalaskuri__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* CTA: nappi kompaktimpi mobiilissa */
  .palvelu-saat__btn {
    padding: var(--space-4) var(--space-6);
    margin-top: var(--space-3);
  }

  /* Etapit mobiilissa: vain ensimmäinen ja viimeinen näkyvät.
     Ääripäät kertovat asiakkaalle sliderin skaalan, keskimmäiset
     ovat lisätietoa joka mahtuu desktopilla mutta ei pienelle näytölle.
     Yhdellä rivillä, ei rivityksiä. */
  .hintalaskuri__etapit {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 4px;
  }
  .hintalaskuri__etappi {
    font-size: 13px;
  }
  /* Piilota keskimmäiset etapit (kaikki paitsi ensimmäinen ja viimeinen) */
  .hintalaskuri__etapit > .hintalaskuri__etappi:not(:first-child):not(:last-child) {
    display: none;
  }

  /* Kampanja-pill mobiilissa: desktop-versio (kuvan päällä) piiloon,
     mobiili-versio (kuvan alapuolella) näkyviin.
     PHP renderöi kaksi kopiota — toinen kuvan sisällä (desktop),
     toinen kuvan ulkopuolella (mobiili). Tällä rakenteella mobiilin
     pill ei vaikuta kuvan aspect-ratio-laskelmaan. */
  .palvelu-saat__kampanja--desktop {
    display: none;
  }
  .palvelu-saat__kampanja--mobiili {
    display: flex;
    justify-content: flex-start;
    /* Ei omia margineja — kortin grid gap hoitaa symmetrisen tilan
       ylä- ja alapuolelle automaattisesti. */
  }
  .palvelu-saat__kampanja--mobiili .kampanja-pill {
    max-width: 100%;
    box-shadow: var(--shadow-sm);
  }
  .palvelu-saat__kampanja--mobiili .kampanja-pill__kuva {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .palvelu-saat__kampanja--mobiili .kampanja-pill__title {
    font-size: var(--text-sm);
  }
}

/* --- Pieni mobiili (kapeat puhelimet) --- */
@media (max-width: 39.999rem) {
  .palvelu-saat__kortti {
    padding: var(--space-5);
    border-radius: var(--radius-xl); /* hieman pienempi pyöristys pienissä kortissa */
  }

  /* Otsikko skaalataan vielä pienemmäksi */
  .palvelu-saat__title {
    font-size: var(--text-2xl);
  }

  /* Kuva voi olla matalampi, jotta hinta-CTA -kombo näkyy yhdellä silmäyksellä */
  .palvelu-saat__kuva {
    aspect-ratio: 4 / 3;
    max-height: 15rem;
  }

  /* Etapit: pienillä viewporteilla annetaan myös pinottua jos teksti on pitkä */
  .hintalaskuri__etapit {
    /* Kompaktimpi padding kun thumb pienenee suhteessa containeriin */
    padding: 0 8px;
  }

  /* Slider-thumb hieman suurempi tap-target (28→32px ei rikkonisi mitoitusta) */
  .hintalaskuri__slider {
    --thumb-size: 32px;
  }
}

/* --- Erittäin kapeat (iPhone SE & Android <375px) --- */
@media (max-width: 374px) {
  .palvelu-saat__kortti {
    padding: var(--space-4);
  }

  /* Etapit: kun on todella tiukkaa, vain reunaetapit näkyvät */
  .hintalaskuri__etapit {
    justify-content: space-between;
  }
  .hintalaskuri__etappi {
    font-size: 12px;
  }
}


/* ==========================================================================
   HINTA
   ========================================================================== */

.palvelu-hinta {
  padding: var(--space-16) var(--section-px) var(--space-24);
}

.palvelu-hinta__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.palvelu-hinta__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-6);
}

.palvelu-hinta__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-snug);
}

.palvelu-hinta__intro {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-12);
  max-width: 40rem;
}

.palvelu-hinta__examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  list-style: none;
  padding: 0;
}

.palvelu-hinta__example {
  padding: var(--space-8);
  background: var(--color-off-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  position: relative;
}

.palvelu-hinta__example--featured {
  background: var(--color-white);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}

.palvelu-hinta__example-badge {
  position: absolute;
  top: -0.75rem;
  left: var(--space-6);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.palvelu-hinta__example-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.palvelu-hinta__example-size {
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-4);
}

.palvelu-hinta__example-price {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-snug);
}

.palvelu-hinta__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.palvelu-hinta__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.palvelu-hinta__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 63.999rem) {
  .palvelu-hinta__examples { grid-template-columns: 1fr; }
}


/* ==========================================================================
   REFERENSSIT
   ========================================================================== */

.palvelu-referenssit {
  padding: var(--space-24) var(--section-px);
  background: var(--color-off-white);
}

.palvelu-referenssit__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.palvelu-referenssit__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-12);
  gap: var(--space-8);
  flex-wrap: wrap;
}

.palvelu-referenssit__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-4);
}

.palvelu-referenssit__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  letter-spacing: var(--tracking-snug);
}

.palvelu-referenssit__all {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}

.palvelu-referenssit__all:hover { color: var(--color-primary-dark); }

.palvelu-referenssit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

.palvelu-referenssit__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.palvelu-referenssit__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.palvelu-referenssit__card-link { display: block; color: inherit; }

.palvelu-referenssit__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2 / 1;
  position: relative;
}

.palvelu-referenssit__img {
  background: linear-gradient(135deg, var(--color-primary-ghost), var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.palvelu-referenssit__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.palvelu-referenssit__img-label {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  z-index: 1;
}

.palvelu-referenssit__body { padding: var(--space-6); }

.palvelu-referenssit__meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
  font-weight: var(--font-medium);
  list-style: none;
  padding: 0;
}

.palvelu-referenssit__meta li:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-2);
  color: var(--color-border-strong);
}

.palvelu-referenssit__card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.palvelu-referenssit__card-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

@media (max-width: 63.999rem) {
  .palvelu-referenssit__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   ONGELMAT JA RATKAISUT
   ========================================================================== */

.palvelu-ongelmat {
  padding: var(--space-24) var(--section-px);
  background: var(--color-off-white);
}

.palvelu-ongelmat__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.palvelu-ongelmat__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-6);
}

.palvelu-ongelmat__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  margin-bottom: var(--space-16);
  max-width: 40rem;
  letter-spacing: var(--tracking-snug);
}

.palvelu-ongelmat__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

.palvelu-ongelmat__item {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.palvelu-ongelmat__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.palvelu-ongelmat__problem .palvelu-ongelmat__label {
  background: rgba(192, 57, 43, 0.1);
  color: #9A2B21;
}

.palvelu-ongelmat__solution .palvelu-ongelmat__label {
  background: var(--color-accent-tint-15);
  color: var(--color-accent-text);
}

.palvelu-ongelmat__heading {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

.palvelu-ongelmat__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.palvelu-ongelmat__solution {
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  margin-top: var(--space-4);
}

.palvelu-ongelmat__solution .palvelu-ongelmat__text:last-child {
  margin-bottom: 0;
}

@media (max-width: 63.999rem) {
  .palvelu-ongelmat__list { grid-template-columns: 1fr; }
}


/* ==========================================================================
   VIIMEINEN CTA — keskitetty tumma osio (omabot tulee myöhemmin erillisenä)
   ========================================================================== */

.palvelu-cta {
  padding: var(--space-24) var(--section-px);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
}

.palvelu-cta__inner {
  max-width: var(--container-md);
  margin: 0 auto;
}

.palvelu-cta__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.palvelu-cta__title {
  font-size: var(--text-4xl);
  color: var(--color-white);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

.palvelu-cta__text {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-10);
  line-height: var(--leading-relaxed);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* HUOM: .palvelu-cta__text sisältää wpautop():n tuottamia <p>-elementtejä.
   Color & line-height myös p-tasolle — muuten main.css:n "p { color: ... }"
   voittaa ja teksti näyttää tummanharmaalta tumman taustan päällä. */
.palvelu-cta__text p {
  color: inherit;
  line-height: inherit;
}

.palvelu-cta__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.palvelu-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-base);
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}

.palvelu-cta__btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.palvelu-cta__btn--primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

.palvelu-cta__btn--secondary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.palvelu-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.palvelu-cta__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.palvelu-cta__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

.palvelu-cta__trust li::before {
  content: '✓';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: var(--font-bold);
}

@media (max-width: 63.999rem) {
  .palvelu-cta__trust {
    flex-direction: column;
    align-items: center;
  }
}


/* ==========================================================================
   KOHDETYYPIT
   ========================================================================== */

.palvelu-kohdetyypit {
  padding: var(--space-24) var(--section-px);
  background: var(--color-bg);
}

.palvelu-kohdetyypit__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.palvelu-kohdetyypit__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-6);
}

.palvelu-kohdetyypit__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
  max-width: 40rem;
  letter-spacing: var(--tracking-snug);
}

.palvelu-kohdetyypit__intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 44rem;
  margin-bottom: var(--space-12);
}

.palvelu-kohdetyypit__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.palvelu-kohdetyyppi {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.palvelu-kohdetyyppi__title {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.palvelu-kohdetyyppi__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.palvelu-kohdetyyppi__link {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.palvelu-kohdetyyppi__link a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast),
              text-decoration-thickness var(--transition-fast),
              text-underline-offset var(--transition-fast);
}

.palvelu-kohdetyyppi__link a:hover {
  color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}


/* ==========================================================================
   FAQ — minimaalinen, nojaa olemassa olevaan .faq-item -luokkaan
   ========================================================================== */

.palvelu-faq {
  padding: var(--space-16) var(--section-px);
  background: var(--color-off-white);
}

.palvelu-faq__inner {
  max-width: 48rem;
  margin: 0 auto;
}

.palvelu-faq__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-6);
}

.palvelu-faq__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  margin-bottom: var(--space-8);
  letter-spacing: var(--tracking-snug);
}

.palvelu-faq__list {
  border-top: var(--border);
}


/* ==========================================================================
   NAAPURIPALVELUT
   ========================================================================== */

.palvelu-naapurit {
  padding: var(--space-20) var(--section-px);
  background: var(--color-bg);
  border-top: var(--border);
}

.palvelu-naapurit__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.palvelu-naapurit__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.palvelu-naapurit__intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 44rem;
  margin-bottom: var(--space-8);
}

.palvelu-naapurit__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.palvelu-naapurit__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  height: 100%;
}

.palvelu-naapurit__link:hover,
.palvelu-naapurit__link:focus-visible {
  background: var(--color-white);
  border-color: var(--color-primary);
}

.palvelu-naapurit__link-title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-primary);
}

.palvelu-naapurit__link-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}


/* ==========================================================================
   HERON PÄIVITETTY-AIKALEIMA
   ========================================================================== */

.palvelu-hero__updated {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}


/* ==========================================================================
   CTA — TARKISTAJA
   ========================================================================== */

.palvelu-cta__reviewer {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.palvelu-cta__reviewer-label {
  font-weight: var(--font-medium);
  margin-right: var(--space-1);
}


/* ==========================================================================
   MOBIILI — uudet osiot
   ========================================================================== */

@media (max-width: 47.999rem) {
  .palvelu-kohdetyypit__list {
    grid-template-columns: 1fr;
  }
  .palvelu-naapurit__list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .palvelu-kohdetyypit__list {
    grid-template-columns: 1fr;
  }
  .palvelu-naapurit__list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   MOBIILIOPTIMOINTI — kokonaisvaltainen hienosäätö
   Tabletti (<64rem), pieni mobiili (<40rem), iPhone SE (<375px)
   ========================================================================== */

/* --- Tabletti ja alle (kaikki osiot kevyemmällä paddingilla) --- */
@media (max-width: 63.999rem) {

  /* Breadcrumb pieni mobiilissa */
  .breadcrumb {
    padding: var(--space-4) var(--section-px) 0;
    font-size: var(--text-xs);
  }

  /* Kaikkien palvelu-osioiden ylä/ala-padding supistetaan */
  .palvelu-hero {
    padding: var(--space-4) var(--section-px) var(--space-12);
  }
  .palvelu-saat {
    padding: var(--space-12) var(--section-px) var(--space-20);
  }
  .palvelu-kohdetyypit {
    padding: var(--space-14) var(--section-px);
  }
  .palvelu-hinta {
    padding: var(--space-14) var(--section-px);
  }
  .palvelu-referenssit {
    padding: var(--space-14) var(--section-px);
  }
  .palvelu-ongelmat {
    padding: var(--space-14) var(--section-px);
  }
  .palvelu-naapurit {
    padding: var(--space-12) var(--section-px);
  }
  .palvelu-cta {
    padding: var(--space-14) var(--section-px);
  }

  /* Hero — kuva 4:3 mobiilissa.
     Aspect-ratio 4:3 antaa kuvalle riittävästi korkeutta että henkilö-
     ja maisemakuvat näkyvät hyvin, mutta jättää H1:lle ja CTA:lle tilaa
     näytön yläosassa. object-fit: cover hoitaa rajauksen siististi. */
  .palvelu-hero__image {
    min-height: 0;
    aspect-ratio: 4 / 5;
    height: auto;
  }
  .palvelu-hero__title {
    font-size: var(--text-4xl);
  }
  .palvelu-hero__lead {
    font-size: var(--text-base);
  }
  /* Nappien täysi leveys kun ne eivät mahdu vierekkäin */
  .palvelu-hero__actions {
    flex-direction: column;
    gap: var(--space-3);
  }
  .palvelu-hero__btn {
    width: 100%;
  }

  /* Saat-osion otsikko ja hintalaskurin tulosarvon otsikkokoko */
  .palvelu-saat__title {
    font-size: var(--text-3xl);
  }
  .palvelu-saat__lead {
    font-size: var(--text-base);
  }

  /* Kohdetyypit */
  .palvelu-kohdetyypit__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
  }
  .palvelu-kohdetyypit__intro {
    margin-bottom: var(--space-8);
    font-size: var(--text-base);
  }
  .palvelu-kohdetyyppi {
    padding: var(--space-6);
  }

  /* Hinta */
  .palvelu-hinta__title {
    font-size: var(--text-2xl);
  }
  .palvelu-hinta__intro {
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
  }
  .palvelu-hinta__examples {
    margin-bottom: var(--space-8);
  }
  .palvelu-hinta__example {
    padding: var(--space-6);
  }
  .palvelu-hinta__cta {
    width: 100%;
    justify-content: center;
  }

  /* Referenssit */
  .palvelu-referenssit__header {
    margin-bottom: var(--space-8);
    align-items: flex-start;
  }
  .palvelu-referenssit__title {
    font-size: var(--text-2xl);
  }

  /* Ongelmat */
  .palvelu-ongelmat__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-10);
  }
  .palvelu-ongelmat__item {
    padding: var(--space-6);
  }

  /* UKK */
  .palvelu-faq {
    padding: var(--space-12) var(--section-px);
  }
  .palvelu-faq__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
  }
  /* Kysymyksen fontti pienemmäksi mobiilissa */
  .palvelu-faq .faq-item__question {
    font-size: var(--text-base);
    padding: var(--space-5) 0;
  }

  /* Naapuripalvelut — tiiviimpi otsikko */
  .palvelu-naapurit__title {
    font-size: var(--text-xl);
  }

  /* CTA-osio */
  .palvelu-cta__title {
    font-size: var(--text-3xl);
  }
  .palvelu-cta__text {
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
  }
  .palvelu-cta__actions {
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
  }
  .palvelu-cta__btn {
    width: 100%;
  }

  /* Heron päivitetty-aikaleima pieneksi */
  .palvelu-hero__updated {
    margin-top: var(--space-2);
  }

  /* Viimeinen CTA:n tarkistaja kompaktiksi */
  .palvelu-cta__reviewer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
  }
}


/* --- Pieni mobiili (<640px, enin osa puhelimista) --- */
@media (max-width: 39.999rem) {

  /* Otsikot vielä pienemmiksi — text-5xl on liian iso */
  .palvelu-hero__title {
    font-size: var(--text-3xl);
    line-height: 1.1;
  }

  /* Hero factit yksinkertaisempana — rivinvaihdot ei ylitä 2x2 */
  .palvelu-hero__facts {
    padding: var(--space-4) 0;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  .palvelu-hero__fact-value {
    font-size: var(--text-base);
  }

  /* Taso — badge ei saa rikkoa otsikkoa */
  .taso__subtitle {
    font-size: var(--text-lg);
  }

  /* Kohdetyyppi-kortit tiukemmalla padding */
  .palvelu-kohdetyyppi {
    padding: var(--space-5);
  }
  .palvelu-kohdetyyppi__title {
    font-size: var(--text-lg);
  }

  /* Ongelmat-kortti — sisäinen ratkaisu-boxi näkyy selkeämmin */
  .palvelu-ongelmat__item {
    padding: var(--space-5);
  }

  /* Referenssi-kortin ennen/jälkeen-label pienempi ja kevyempi */
  .palvelu-referenssit__img-label {
    font-size: 0.625rem;
    padding: 2px 6px;
  }
  .palvelu-referenssit__body {
    padding: var(--space-5);
  }

  /* Hinta-esimerkit tiiviimmät */
  .palvelu-hinta__example {
    padding: var(--space-5);
  }

  /* Breadcrumb ei saa kahdelle riville turhia aukkoja */
  .breadcrumb ol {
    gap: var(--space-1);
  }
}


/* --- iPhone SE ja kapeat Android (<375px) --- */
@media (max-width: 374px) {

  /* Section padding vielä tiukempi */
  :root {
    /* Ei voi muokata --section-px täällä (juuridefinioitu clamp) — mutta
       palvelusivu-osiot voivat saada oman kapeamman paddingin */
  }

  .palvelu-hero__title {
    font-size: var(--text-2xl);
  }

  /* Hero factit — 2x2 grid liian ahdas, vaihdetaan 1x4:een */
  .palvelu-hero__facts {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
  }

  /* TASO steps-numero pienempi */
  .taso__step-num {
    font-size: var(--text-4xl);
  }

  /* Hintalaskurin info-paneeli koko ruudulle */
  .hintalaskuri__info-panel-inner {
    padding: var(--space-6);
  }
}



/* ==========================================================================
   KUVAPAIKAT — img-ph
   Näytetään kun kuvaa ei ole asetettu (hero_kuva, saat_kuva tyhjät).
   Tuotannossa kuvat tulevat oikeista attachmenteista → näitä käytetään
   lähinnä kehitysvaiheessa ja fallbackina.
   ========================================================================== */

.img-ph {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(31, 61, 46, 0.05) 0%, rgba(201, 217, 98, 0.12) 100%),
    radial-gradient(circle at 30% 30%, rgba(31, 61, 46, 0.08) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 20px, rgba(31, 61, 46, 0.03) 20px 40px);
}
.img-ph__icon {
  width: 8rem; height: 8rem;
  color: var(--color-primary);
  opacity: 0.25;
  position: relative; z-index: 1;
}
.img-ph__icon--sm { width: 3rem; height: 3rem; }
.img-ph__label {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  font-style: italic;
  white-space: nowrap;
}

/* ==========================================================================
   KAMPANJA-PILL
   ==========================================================================
   Containeri-rakenne (outer + inner) noudattaa muiden osioiden mallia
   (vrt. .breadcrumb / .palvelu-hero). Outer hoitaa section-paddingin,
   inner rajaa max-widthin → pill linjautuu hero-sisällön kanssa.

   Pill itsessään: valkoinen, pyöreä kuva vasemmalla, eyebrow + otsikko
   oikealla. Hillitty, ei klikattava.
   ========================================================================== */

.kampanja {
  padding: var(--space-4) var(--section-px) 0;
}

.kampanja__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.kampanja-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-primary-ghost);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  max-width: max-content;
}

.kampanja-pill__kuva {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-ghost);
  flex-shrink: 0;
}

.kampanja-pill__kuva-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kampanja-pill__teksti {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.kampanja-pill__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.kampanja-pill__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  letter-spacing: var(--tracking-snug);
}

/* Mobiili: pill saa olla täysleveä jos sisältö on pitkä */
@media (max-width: 39.999rem) {
  .kampanja-pill {
    max-width: 100%;
    width: auto;
  }
  .kampanja-pill__title {
    font-size: var(--text-xs);
  }
}

/* --- Hero-osion kampanja-pill: kuvan oikeaan yläkulmaan absoluuttisesti
       sekä mobiilissa että desktopilla. Partial tulostaa .kampanja > .kampanja-pill
       -rakenteen, joten ohitetaan partialin oma padding wrapperilla. --- */

.palvelu-hero__kampanja {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  pointer-events: none;
}

.palvelu-hero__kampanja .kampanja {
  padding: 0; /* ohitetaan partialin oma .kampanja-padding */
}

.palvelu-hero__kampanja .kampanja-pill {
  pointer-events: auto;
  box-shadow: var(--shadow-md);
}

/* Desktopilla pill kutistuu sisältönsä mukaan ja pysyy oikeassa yläkulmassa */
@media (min-width: 64rem) {
  .palvelu-hero__kampanja {
    left: auto;
  }
}

/* --- Saat-osion sijoittelu: pill kuvan päälle yläreunaan --- */

.palvelu-saat__kuva {
  position: relative; /* anchor pillin absoluuttiselle sijoittelulle */
}

/* Desktop-versio: kuvan päällä absoluuttisesti.
   Käytetään min-width media-queryä, jotta sääntö ei ole voimassa mobiilissa
   riippumatta CSS-cascade-järjestyksestä. */
@media (min-width: 64rem) {
  .palvelu-saat__kampanja--desktop {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    pointer-events: none; /* ei häiritse kuvan klikkauksia tulevaisuudessa */
  }

  .palvelu-saat__kampanja--desktop .kampanja-pill {
    pointer-events: auto;
    /* Pieni kuva-päälle-säätö: tausta hieman vahvempi, koska kuvasta voi
       vuotaa kontrastia tekstiin */
    box-shadow: var(--shadow-md);
  }

  /* Mobiili-versio piilossa desktopilla */
  .palvelu-saat__kampanja--mobiili {
    display: none;
  }
}


/* ==========================================================================
   SECTION DIVIDER — sama kuin etusivulla
   ========================================================================== */

.section-divider {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  margin-top: -3rem;
  margin-bottom: -3rem;
  padding: 0;
  line-height: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--color-bg-dark) 50%);
}

.section-divider__icon {
  width: 6rem;
  height: 6rem;
}

/* ============================================================================
   PALVELU-CTA — yhteydenottolomake + myyjäkortti
   ============================================================================
   Palvelusivun viimeisen CTA-osion sisäinen rakenne. Mobiili-first, desktop-
   breakpoint 64rem (1024px) → kaksi saraketta (myyjäkortti + lomake).
   Käyttää nykyisen .palvelu-cta:n tummanvihreää taustaa pohjana.
   ============================================================================ */

.palvelu-cta__form-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 36rem;
  margin: var(--space-10) auto var(--space-12);
  text-align: left;
}

/* ─── Myyjäkortti — valkoinen pill-laatikko ──────────────────────────── */

.palvelu-cta__sales {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-2xl, 1.5rem);
  padding: var(--space-6);
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: var(--space-4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.palvelu-cta__sales-photo {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-bg-muted, #f3f4f6);
  flex-shrink: 0;
}

.palvelu-cta__sales-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.palvelu-cta__sales-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.palvelu-cta__sales-name {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

.palvelu-cta__sales-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}

.palvelu-cta__sales-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.palvelu-cta__sales-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
  word-break: break-word;
}

.palvelu-cta__sales-link:hover,
.palvelu-cta__sales-link:focus-visible {
  color: var(--color-primary);
}

.palvelu-cta__sales-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted, #f3f4f6);
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ─── Lomakelaatikko ─────────────────────────────────────────────────── */

.palvelu-cta__form {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-2xl, 1.5rem);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

@media (min-width: 48rem) {
  .palvelu-cta__form {
    padding: var(--space-10) var(--space-8);
  }
}

.palvelu-cta__form-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.palvelu-cta__form-title {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

.palvelu-cta__form-intro {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ─── Lomakkeen kentät ───────────────────────────────────────────────── */

.palvelu-cta__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.palvelu-cta__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.palvelu-cta__required {
  color: var(--color-accent-text, var(--color-primary));
}

.palvelu-cta__optional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-xs);
}

.palvelu-cta__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.5rem);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.palvelu-cta__input:hover {
  border-color: var(--color-border-strong, #cbd5e1);
}

.palvelu-cta__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.palvelu-cta__input.has-error {
  border-color: var(--color-error, #dc2626);
}

.palvelu-cta__textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: var(--leading-relaxed);
}

.palvelu-cta__error {
  font-size: var(--text-xs);
  color: var(--color-error, #dc2626);
  margin: 0;
  min-height: 1em;
}

.palvelu-cta__error:empty {
  display: none;
}

/* ─── Honeypot — piilotetaan käyttäjältä, näkyy boteille ────────────── */

.palvelu-cta__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── GDPR-maininta — submit-napin alla ──────────────────────────────── */

.palvelu-cta__consent-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.palvelu-cta__consent-note a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.palvelu-cta__consent-note a:hover {
  color: var(--color-primary);
}

/* ─── Submit-rivi ────────────────────────────────────────────────────── */

.palvelu-cta__submit-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.palvelu-cta__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 0;
  cursor: pointer;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}

.palvelu-cta__submit:hover:not(:disabled) {
  background: var(--color-primary-dark, var(--color-primary));
  transform: translateY(-1px);
}

.palvelu-cta__submit:focus-visible {
  outline: 2px solid var(--color-accent, var(--color-primary));
  outline-offset: 3px;
}

.palvelu-cta__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.palvelu-cta__submit-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
  line-height: var(--leading-snug);
}

/* ─── Onnistumis-tila ────────────────────────────────────────────────── */

.palvelu-cta__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
}

.palvelu-cta__success-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted, #f0fdf4);
  color: var(--color-success, #16a34a);
}

.palvelu-cta__success-title {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  margin: 0;
}

.palvelu-cta__success-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 22rem;
  line-height: var(--leading-relaxed);
}

/* ─── [hidden] override — flex/grid voittaisi muuten hidden-attribuutin ── */

.palvelu-cta__form [hidden],
.palvelu-cta__form-wrap [hidden] {
  display: none !important;
}