/* ============================================================================
   LEHMUS — Lappeenrannan OMT-Keskus Lehmus Oy
   Runko: pohjat/demo1 (moderni C). Teema: asiakkaan oma vihreä (#A1C728),
   valkoinen tausta, selvästi pyöristetyt muodot, otsikkofontti Nunito.
   ----------------------------------------------------------------------------
   TEEMA VAIHDETAAN VAIN TÄSTÄ :root-lohkosta. Kaikki muu perii muuttujat.
   Asiakaskohtaiset osiot (banneri, tiedote, kuvalliset palvelukortit,
   hinnastotaulukko) ovat tiedoston LOPUSSA omassa lohkossaan.
   ============================================================================ */

:root {
  /* ---- VÄRIT (Lehmus: valkoinen pohja + limetinvihreä aksentti) ----
     Aksentti #A1C728 on asiakkaan oma logo-/brändivihreä. Se on liian vaalea
     tekstiksi valkoisella (1,9:1), joten teksti-/linkkiaksentti on tummempi
     lehtivihreä #4F7A0F (4,7:1) ja limetti toimii pintana (napit, korostukset),
     jolloin sen päällä on tumma teksti #1B3205 (5,3:1). */
  --c-bg:        #FFFFFF;   /* sivun tausta — valkoinen (asiakkaan toive) */
  --c-surface:   #FFFFFF;   /* kortit, nav */
  --c-surface-2: #F5F9EC;   /* vuorotteleva osio-tausta (häivähdys limettiä) */
  --c-text:      #3D4636;   /* leipäteksti */
  --c-heading:   #17240B;   /* otsikot (syvä metsänvihreä-musta) */
  --c-muted:     #66705C;   /* haalea teksti */
  --c-border:    #E4EBD6;   /* ohuet rajat (vihertävä) */
  --c-primary:   #4F7A0F;   /* aksentti teksteissä/linkeissä — tumma lehtivihreä */
  --c-primary-2: #3D6009;   /* aksentti hover */
  --c-on-primary:#1B3205;   /* teksti limetin päällä (tumma!) */
  --c-dark:      #1E3A08;   /* tummat osiot (footer, CTA) — syvä metsänvihreä */
  --c-on-dark:   #EDF4DE;   /* teksti tummalla */
  --c-accent2:   #A1C728;   /* asiakkaan brändilimetti */

  /* Bannerien ja sivuherojen kuvapeitto — RGB-kanavat ilman alfaa, jotta sama
     sävy voidaan käyttää eri läpinäkyvyyksillä: rgba(var(--peitto), .9).
     🛑 TÄMÄ ON PEITON AINOA MÄÄRITTELY. Kaikki bannerit (etusivun .banner ja
     alasivujen .page-hero) lukevat sen täältä — älä kirjoita rgba-arvoja käsin,
     muuten bannerien sävyt eriytyvät.

     Muutoskierros 13: sävy oli syvä metsänvihreä (16,32,4), joka värjäsi koko
     valokuvan vihreäksi — juuri se sai bannerin näyttämään sumealta, vaikka
     kuva oli terävä. Nyt lähes neutraali tumma (aavistus vihreää), jolloin
     valokuvan omat värit ja kontrasti säilyvät. Sama periaate kuin HelpUpissa. */
  --peitto: 12, 16, 8;

  /* Bannerin peittoliuku — KAIKKI bannerit (etusivu + alasivut) käyttävät tätä.
     🛑 Suunta: KEVYIN YLHÄÄLLÄ, VAHVIN ALHAALLA. Kuva saa lukua ylhäältä ja
     teksti saa kontrastinsa alhaalta — kaikissa bannereissa teksti on alaosassa.
     Aiempi vino liuku (vahvin vasemmalla) peitti kuvan siitä kohtaa, joka
     katsojaa kiinnostaa, ja jätti tekstin kohdalle liian vähän tummuutta.
     Läpinäkyvyyttä säädetään VAIN täältä.
     🛑 Älä kirjoita bannerikohtaisia liukuja — silloin etusivu ja alasivut
     eriytyvät, mikä oli juuri se ongelma jonka tämä muuttuja poisti.

     Arvot on haettu mittaamalla, ei arvaamalla: neljä ehdokasliukua ajettiin
     livenä ja jokaisen bannneritekstin kontrasti mitattiin taustastaan (teksti
     piilotettuna, vaalein pikseli tekstin alta). Tämä oli ainoa, jolla sekä
     yläkicker (pientä versaalia, vaatii 4,5:1) että h1:n limettiaksentti
     (isoa tekstiä, vaatii 3:1) läpäisivät — ja silti .34 ylhäällä eli kuva
     näkyy paremmin kuin aiemmassa .46:ssa. Älä kevennä keskikohtaa. */
  --banneripeitto: linear-gradient(168deg,
    rgba(var(--peitto), .20) 0%,
    rgba(var(--peitto), .46) 32%,
    rgba(var(--peitto), .62) 64%,
    rgba(var(--peitto), .72) 100%);

  /* Vaalein taso: valmennus ja yrityksille. Näissä kuva saa näkyä eniten. */
  --banneripeitto-vaalea: linear-gradient(168deg,
    rgba(var(--peitto), .10) 0%,
    rgba(var(--peitto), .28) 32%,
    rgba(var(--peitto), .40) 64%,
    rgba(var(--peitto), .50) 100%);

  /* Etusivun banneri: teksti on omalla paneelillaan, joten kuvan päälle
     riittää hyvin kevyt tummennus pelkän yhtenäisen ilmeen vuoksi. */
  --banneripeitto-etusivu: linear-gradient(168deg,
    rgba(var(--peitto), .10) 0%,
    rgba(var(--peitto), .22) 45%,
    rgba(var(--peitto), .32) 100%);

  /* ---- LIUKUVÄRIT + TEKSTUURI ---- */
  /* --grad = tumma vihreäliuku (ikonit, merkit) → valkoinen ikoni erottuu (≥3:1).
     --grad-lime = kirkas brändiliuku (napit) → päällä tumma teksti. */
  --grad:      linear-gradient(125deg, #2F5A08 0%, #4F7A0F 55%, #689A16 100%);
  --grad-lime: linear-gradient(120deg, #A1C728 0%, #B7DB43 52%, #93BB1C 100%);
  /* hero-mesh: hillitty, jotta tausta pysyy selkeänä (ei sinistä ylenmäärin) */
  --grad-mesh: radial-gradient(38% 48% at 88% 6%, color-mix(in srgb, var(--c-accent2) 11%, transparent), transparent 70%),
               radial-gradient(36% 44% at 6% 16%, color-mix(in srgb, var(--c-primary) 9%, transparent), transparent 72%);
  /* pehmeä laaja gradient-huokua taustoille (.section--glow) — hyvin hillitty */
  --grad-glow: radial-gradient(55% 75% at 100% 0%, color-mix(in srgb, var(--c-accent2) 7%, transparent), transparent 60%),
               radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--c-primary) 6%, transparent), transparent 60%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- MUODOT (pyöreämmät kuin pohjassa — asiakkaan toive) ---- */
  --r-sm: 14px;
  --r:    20px;             /* perus kortti/painike */
  --r-lg: 32px;             /* isot lohkot/kuvat */
  --r-pill: 999px;

  /* ---- VARJOT (pehmeät, aksenttisävyiset — ei raskasta mustaa) ---- */
  --shadow-sm: 0 1px 2px rgba(18,19,23,.05), 0 2px 8px rgba(18,19,23,.04);
  --shadow:    0 4px 14px rgba(18,19,23,.07), 0 12px 32px rgba(18,19,23,.06);
  --shadow-lg: 0 18px 50px color-mix(in srgb, var(--c-primary) 18%, transparent);

  /* ---- TYPOGRAFIA ---- */
  --font-display: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, -apple-system, sans-serif;

  /* ---- MITAT ---- */
  --container: 1140px;
  --pad-x: clamp(18px, 5vw, 40px);
  --gap: clamp(20px, 3vw, 32px);
  --section-y: clamp(64px, 9vw, 120px);
}

/* =====================  VÄRI-PRESETIT  ============================
   Ota käyttöön kopioimalla arvot :root:iin (tai poista kommentti).

   TUMMA (sininen-musta):
     --c-bg:#0E1016; --c-surface:#171A22; --c-surface-2:#11141B;
     --c-text:#D6D8E0; --c-heading:#FFFFFF; --c-muted:#9AA0B0;
     --c-border:#262A35; --c-primary:#5B86FF; --c-primary-2:#7EA0FF;
     --c-on-primary:#0B0D12; --c-dark:#070810; --c-on-dark:#E8EAF2;

   MUSTA (mono, premium):
     --c-bg:#0A0A0A; --c-surface:#141414; --c-surface-2:#0F0F0F;
     --c-text:#D9D9D9; --c-heading:#FFFFFF; --c-muted:#8A8A8A;
     --c-border:#222; --c-primary:#FFFFFF; --c-primary-2:#D9D9D9;
     --c-on-primary:#0A0A0A; --c-dark:#000; --c-on-dark:#EDEDED;

   VÄRIKÄS (energinen):
     --c-bg:#FFF8F1; --c-surface-2:#FFEFE2; --c-primary:#FF5A1F;
     --c-primary-2:#E8460F; --c-dark:#1B0F0A;

   Toimialapaletit: ks. ../../CLAUDE.md (vaihda vain --c-primary/--c-dark/--c-bg).
   ================================================================== */

/* ===========================  RESET / BASE  ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  overflow-x: clip;            /* estää off-canvas-valikon ym. aiheuttaman vaakascrollin (ei riko sticky-navia kuten overflow:hidden) */
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-heading);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
  /* Tasaa otsikon rivit keskenään, jottei viimeiselle riville jää yhtä orpoa
     sanaa ("Sama erikoisosaaminen, nyt yrityksesi / käyttöön"). Selain laskee
     tasapainon itse, joten toimii myös silloin kun tekstiä myöhemmin muutetaan
     — käsin lisättyjä <br>-rivinvaihtoja EI saa käyttää, ne hajoavat mobiilissa.
     Vanhat selaimet ohittavat rivin ja rivittävät kuten ennenkin. */
  text-wrap: balance;
}
/* Leipätekstissä sama ongelma lievempänä: pretty estää yhden sanan viimeisen rivin
   mutta ei tasaa kaikkia rivejä (balance olisi pitkässä kappaleessa raskas). */
p, li, .lead, dt, summary { text-wrap: pretty; }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1rem; max-width: 66ch; }

:focus-visible { outline: 2.5px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* skip-link */
.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 200;
  background: var(--c-dark); color: var(--c-on-dark);
  padding: 10px 18px; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { left: 14px; }

/* ===========================  LAYOUT  ============================ */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--c-surface-2); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
/* hillitty gradient-huokua tavallisen taustan päälle (ettei loppu jää lattealle) */
.section--glow { background-image: var(--grad-glow); background-color: var(--c-bg); }
.section--tint.section--glow { background-image: var(--grad-glow); background-color: var(--c-surface-2); }
/* vahvempi hero-tyylinen liukuvärimesh kokonaiselle osiolle (lisää vaihtelua taustoihin) */
.section--mesh { background-color: var(--c-bg);
  background-image: radial-gradient(42% 56% at 92% 6%, color-mix(in srgb, var(--c-accent2) 13%, transparent), transparent 70%),
                    radial-gradient(40% 52% at 5% 96%, color-mix(in srgb, var(--c-primary) 11%, transparent), transparent 72%); }

.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-primary); margin-bottom: 14px;
}
.section--dark .eyebrow { color: #fff; opacity: .7; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--c-muted); }

/* section head — vasen-tasattu, editorial (ei keskitetty AI-look) */
.sec-head { max-width: 840px; margin-bottom: clamp(34px, 5vw, 56px); }  /* leveämpi → otsikot mahtuvat yhdelle riville desktopilla */
.sec-head .lead { max-width: 56ch; }  /* leipä silti luettavan kapea */
.sec-head--center { margin-inline: auto; text-align: center; max-width: 900px; }
.sec-head--center .lead { max-width: 58ch; margin-inline: auto; }

/* ===========================  PAINIKKEET  ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  border: 1.5px solid transparent;
  min-height: 48px; /* kosketuskohde */
  line-height: 1;
}
/* PÄÄPAINIKE — liukuväri + position-shift hoverissa + kerrostetut glow-varjot
   (sama efekti kuin kotisivut.fi:llä; perii väriteeman --c-primary/--c-accent2) */
.btn-primary {
  background: var(--grad); background-size: 200% 200%; background-position: 0% 50%;
  color: #fff; border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 4px 16px -2px color-mix(in srgb, var(--c-primary) 45%, transparent),
    0 10px 28px -6px color-mix(in srgb, var(--c-accent2) 42%, transparent);
  transition: background-position .5s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.btn-ghost   { background: transparent; color: var(--c-heading); border-color: var(--c-border); transition: transform .18s, box-shadow .25s, border-color .2s, color .2s; }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.28); }
.btn .arr { transition: transform .2s ease; }
@media (hover: hover) {
  .btn-primary:hover {
    background-position: 100% 50%; transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.3) inset,
      0 8px 22px -2px color-mix(in srgb, var(--c-primary) 55%, transparent),
      0 18px 36px -6px color-mix(in srgb, var(--c-accent2) 50%, transparent);
  }
  .btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
  .btn:hover .arr { transform: translateX(4px); }
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--c-primary) 40%, transparent); }
/* valkoinen variantti tummalla bannerilla (feature-band) — ei liukuväriä */
.btn-primary.on-light { background: #fff; color: var(--c-dark); box-shadow: 0 6px 20px -6px rgba(0,0,0,.4); }
@media (hover: hover) { .btn-primary.on-light:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(0,0,0,.5); } }

/* link with underline grow */
/* Linkki keskellä virkettä (esim. SYKE tiedotteessa). Erillinen .tlinkistä,
   joka on inline-flex eikä siksi käyttäydy leipätekstin seassa oikein. */
.inline-link {
  color: var(--c-primary); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
@media (hover: hover) { .inline-link:hover { color: var(--c-primary-2); } }
.tlink { color: var(--c-primary); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.tlink .arr { transition: transform .2s; }
@media (hover: hover) { .tlink:hover .arr { transform: translateX(4px); } }

/* "Soita"-painike (konversio) */
.btn-call { background: var(--c-surface); color: var(--c-heading); border-color: var(--c-border); }
.btn-call svg { color: var(--c-primary); }
@media (hover: hover) { .btn-call:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow); } }

/* ===========================  EFEKTIT (staattinen WAU + 1–2 kevyttä liikettä)  ============================ */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* otsikon SHINE-AALTO — kirkas kaista pyyhkäisee gradientin yli (kuten kotisivut.fi), nopea */
.hero h1 .grad-text {
  background: linear-gradient(100deg, var(--c-primary) 0%, var(--c-primary) 38%, #C7B8FF 50%, var(--c-accent2) 62%, var(--c-primary) 100%);
  background-size: 700px 100%; background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent;  /* uudelleen background-lyhenteen jälkeen! */
  animation: gradWave 3.2s linear infinite; }
/* Silmukan jakso KIINTEÄNÄ PIKSELIARVONA, ei prosenttina: prosenttijakso ei looppaa
   saumattomasti kun otsikko taittuu kahdelle riville (background-clip: text -laatikko
   pilkkoutuu riveittäin), jolloin kierroksen vaihtuessa näkyy välähdys. */
@keyframes gradWave { from { background-position: 0 center; } to { background-position: 700px center; } }
.glass {
  background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.75); box-shadow: var(--shadow);
}
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700;
  font-size: .82rem; letter-spacing: .03em; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent);
  padding: 7px 16px; border-radius: var(--r-pill); margin-bottom: 22px;
}
.pill-eyebrow .spark { color: var(--c-accent2); }
/* hienovarainen grain-overlay (lisää syvyyttä, ei hidasta) */
.grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 140px; opacity: .04; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
/* pari kevyttä jatkuvaa liikettä — VAIN fokuselementeissä */
@keyframes floaty  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes floaty2 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(9px) } }
@keyframes drift   { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(18px,-14px) scale(1.07) } }
.floaty  { animation: floaty 6s ease-in-out infinite; }
.floaty2 { animation: floaty2 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .floaty, .floaty2, .drift { animation: none !important; } }

/* ===========================  HERO (v2 — premium, liukuväri-mesh + lasi)  ============================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(50px, 8vw, 104px) clamp(56px, 8vw, 112px); }
.hero-bgfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grad-mesh); }
.hero-bgfx::before {  /* hitaasti ajelehtiva liukuväriblobi — yksi "cool" liike */
  content: ""; position: absolute; width: 44vw; height: 44vw; max-width: 580px; max-height: 580px;
  right: -10%; top: -16%; border-radius: 50%; background: var(--grad); filter: blur(120px); opacity: .08;
  animation: drift 18s ease-in-out infinite;
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 5vw, 72px); align-items: start;
}
/* kuva ja tekstipalsta tasataan yläreunasta → alaosan arvostelut eivät paina kuvaa alas.
   Pieni optinen tasaus h1:n yläreunaan (h1 line-height-poikkeama). */
.hero-visual { margin-top: 6px; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: 1.04; margin-bottom: .32em; }
.hero h1 .accent { color: var(--c-primary); }
.hero-sub { font-size: clamp(1.1rem, 1.7vw, 1.36rem); color: var(--c-text); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: .95rem; color: var(--c-muted); flex-wrap: wrap; }
.hero-trust .stars { color: #F5A623; letter-spacing: 1px; }
.hero-trust b { color: var(--c-heading); }
.hero-trust .ava img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--c-bg); object-fit: cover; margin-left: -11px; vertical-align: middle; }
.hero-trust .ava img:first-child { margin-left: 0; }

/* visuaali: kuva pyöreässä paneelissa + liukuväri-glow + kaksi kelluvaa lasichippiä */
.hero-visual { position: relative; }
.hero-visual .frame { position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-visual .frame img { width: 100%; aspect-ratio: 5/5.3; object-fit: cover; display: block; }
.hero-visual::before { content: ""; position: absolute; inset: -10% -6% -6% -10%; background: var(--grad); filter: blur(64px); opacity: .16; z-index: -1; border-radius: 44px; }
.hero-chip { position: absolute; z-index: 3; border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.hero-chip b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--c-heading); }
.hero-chip span { font-size: .84rem; color: var(--c-muted); }
.hero-chip .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.hero-chip.c1 { left: -28px; top: 36px; }
.hero-chip.c2 { right: -22px; bottom: 44px; font-weight: 600; font-size: .96rem; color: var(--c-heading); }
.hero-chip.c2 .dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px color-mix(in srgb, #2ecc71 22%, transparent); }

/* ===========================  TRUST / MARQUEE  ============================ */
.trust { border-block: 1px solid var(--c-border); background: var(--c-surface); }
.trust-in { display: flex; align-items: center; gap: clamp(24px, 5vw, 60px); padding-block: 22px; flex-wrap: wrap; justify-content: space-between; }
.trust-in .t { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-weight: 600; font-size: .95rem; }
.trust-in .t svg { color: var(--c-primary); flex: none; }

/* ===========================  PALVELUT (kortit — 2×2, vaakasuunta)  ============================ */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.card {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 28px 30px; transition: transform .22s ease, box-shadow .28s ease, border-color .2s ease;
  position: relative;
}
.card h3 { margin: 2px 0 7px; font-size: 1.22rem; }
.card p { color: var(--c-muted); margin: 0 0 14px; font-size: .98rem; }
.card .ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--grad); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary) 28%, transparent);
}
.card .num { display: none; }  /* turhat 01/02-numerot pois */
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
}
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

/* ===========================  PALVELUT-SIVU (pinotut, ankkuroidut)  ============================ */
.svc-stack { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 100px); }
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 66px); align-items: center; scroll-margin-top: 96px; }
.svc-detail:nth-child(even) .svc-d-media { order: 2; }
.svc-d-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.svc-d-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 6px 0 14px; }
.svc-d-list { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 12px; }
.svc-d-list li { display: flex; gap: 11px; font-weight: 500; }
.svc-d-list li svg { color: var(--c-primary); flex: none; margin-top: 3px; }
@media (max-width: 860px) {
  .svc-detail { grid-template-columns: 1fr; }
  .svc-detail .svc-d-media { order: -1 !important; max-width: 520px; }
}

/* ===========================  MEISTÄ + LUVUT  ============================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.about-media { position: relative; }
.about-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
/* leijuva arvostelu-chip kuvan päällä (sama henki kuin hero-chipit) */
.about-media .float-chip { position: absolute; right: -14px; bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 16px; font-weight: 700; font-size: .96rem; color: var(--c-heading); }
.about-media .float-chip .stars { color: #F5A623; letter-spacing: 1px; }
@media (max-width: 640px) { .about-media .float-chip { right: 8px; bottom: 12px; padding: 10px 14px; font-size: .86rem; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.stat b { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--c-primary); display: block; line-height: 1; }
.stat span { font-size: .9rem; color: var(--c-muted); }

/* ===========================  PROSESSI (numeroidut askeleet)  ============================ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding-top: 26px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--c-primary);
  position: absolute; top: 0; left: 0;
}
.step::after { content: ""; position: absolute; top: 8px; left: 38px; right: -10px; height: 2px; background: var(--c-border); }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.18rem; margin: 6px 0 8px; }
.step p { color: var(--c-muted); font-size: .96rem; }
/* tiiviimpi pystyrytmi osioille joissa vähän sisältöä (esim. prosessi, FAQ) → ei isoa tyhjää */
.section--snug { padding-block: clamp(52px, 7vw, 88px); }
.sec-head--snug { margin-bottom: clamp(26px, 3.5vw, 38px); }
/* pystyrytmin tiukennus-apuluokat — määritelty .section--snug:n JÄLKEEN → voittaa padding-bottom/-top */
.pt-tight { padding-top: clamp(28px, 4vw, 52px); }
.pb-tight { padding-bottom: clamp(24px, 3.5vw, 44px); }

/* ===========================  TÖITÄ (neliögrid 4×2 + tekstit, staattinen)  ============================ */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery .g { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; display: block; box-shadow: var(--shadow-sm); aspect-ratio: 1 / 1; }
.gallery .g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .g figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; color: #fff;
  background: linear-gradient(transparent, rgba(12,13,24,.85)); }
.gallery .g figcaption b { display: block; font-weight: 700; font-size: .95rem; }
.gallery .g figcaption span { font-size: .82rem; opacity: .85; }

/* ===========================  REFERENSSIT (4 korttia, väljä väli, sivun tyyliin)  ============================ */
.quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 28px); }
.quote { margin: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 30px 28px; position: relative; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.quote .mark { font-family: var(--font-display); font-size: 3.4rem; line-height: .7; color: var(--c-primary); opacity: .2; height: 26px; }
.quote p { font-size: 1rem; line-height: 1.55; color: var(--c-heading); margin: 6px 0 0; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.quote .who .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.quote .who b { display: block; font-size: .94rem; }
.quote .who span { font-size: .82rem; color: var(--c-muted); }
@media (max-width: 980px) { .quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .quotes { grid-template-columns: 1fr; } }

/* ===========================  HINNASTO (yksi joustava paneeli)  ============================ */
.price-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(30px, 4vw, 54px); box-shadow: var(--shadow); }
.price-panel::before { content: ""; position: absolute; inset: 0; background: var(--grad-mesh); opacity: .55; pointer-events: none; }
.price-panel > * { position: relative; z-index: 2; }
.pp-label { font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); }
.pp-price { font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: 1; color: var(--c-heading); margin: 8px 0 14px; }
.pp-sub { color: var(--c-muted); max-width: 40ch; margin-bottom: 26px; }
.pp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 22px; }
.pp-list li { display: flex; gap: 11px; font-weight: 500; font-size: 1rem; }
.pp-list li svg { color: var(--c-primary); flex: none; margin-top: 2px; }

/* ===========================  VÄLI-HERO / FEATURE-BAND  ============================ */
.feature-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 76px); color: #fff;
  background: var(--c-dark); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.feature-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 130% at 12% 0%, color-mix(in srgb, var(--c-accent2) 60%, transparent), transparent 60%), radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent 60%); opacity: .9; }
.feature-band > * { position: relative; z-index: 2; }
.feature-band h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.feature-band p { color: rgba(255,255,255,.85); }
.fb-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.fb-stats .s b { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); display: block; line-height: 1; }
.fb-stats .s span { font-size: .9rem; color: rgba(255,255,255,.75); }

/* ===========================  FAQ  ============================ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--c-border); padding: 6px 0; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--c-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font-size: 1.6rem; color: var(--c-primary); transition: rotate .25s ease; line-height: 1; }
.faq details[open] summary::after { rotate: 45deg; }
.faq .a { padding: 0 44px 22px 0; color: var(--c-muted); }
.faq .a p { margin: 0; }

/* ===========================  CTA-strippi (vaalea premium-paneeli, ei tumma)  ============================ */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 76px); text-align: center;
  background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--grad-mesh); opacity: .8; pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--c-heading); }
.cta-band h2 .grad-text { display: inline; }
.cta-band p { color: var(--c-muted); margin-inline: auto; }
.cta-band .hero-cta { justify-content: center; }

/* ===========================  YHTEYS + LOMAKE  ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 64px); }
.contact-info .row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.contact-info .row svg { color: var(--c-primary); flex: none; margin-top: 3px; }
.contact-info .row b { display: block; }
.contact-info .row span { color: var(--c-muted); }
.contact-info .map { margin-top: 22px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--c-border); }
.contact-info .map iframe { width: 100%; height: 220px; border: 0; display: block; }

.form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 16px; /* estää iOS-zoomin */
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--c-muted); margin-top: 4px; }
.form-msg { margin-top: 14px; font-weight: 600; display: none; }
.form-msg.ok { display: block; color: #1f9d55; }
.form-msg.err { display: block; color: #d64545; }

/* ===========================  ANIMAATIOT (reveal)  ============================ */
/* Scroll-reveal poistettu — häiritsi lukemista. Sisältö näkyy staattisesti.
   WAU tulee jatkuvista hero-animaatioista (ajelehtiva blobi + lasichipit + otsikon gradient-aalto). */
.reveal, html.js .reveal { opacity: 1 !important; transform: none !important; }

/* ===========================  RESPONSIIVISUUS  ============================ */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 440px; margin-inline: auto; width: 100%; }
  .hero-visual .frame img { aspect-ratio: 16/12; }
  .hero-chip.c1 { left: 10px; } .hero-chip.c2 { right: 10px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .price-panel, .feature-band { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .gallery { gap: 12px; }
  .pp-list { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta .btn, .cta-band .btn { width: auto; }
  .hero-chip { display: none; }  /* pidä mobiili siistinä */
}

/* liike-herkkyys */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   LEHMUS — asiakaskohtaiset osiot ja väriylikirjoitukset
   (kaikki mikä pohjassa oli kovakoodattu #fff / violettia)
   ============================================================================ */

/* ---- Painikkeet: limetti-pinta + tumma teksti (kontrasti 5,3:1) ---- */
.btn-primary {
  background: var(--grad-lime); background-size: 200% 200%; background-position: 0% 50%;
  color: var(--c-on-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 6px 18px -4px rgba(107,148,20,.45),
              0 14px 32px -10px rgba(47,90,8,.30);
}
@media (hover: hover) {
  .btn-primary:hover {
    background-position: 100% 50%; transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset,
                0 10px 24px -4px rgba(107,148,20,.55),
                0 20px 40px -10px rgba(47,90,8,.35);
  }
}
.btn-primary.on-light { background: #fff; color: var(--c-dark); }
.btn-call svg { color: var(--c-primary); }

/* ---- Ikonipinnat: tumma vihreäliuku, valkoinen ikoni ---- */
.card .ico, .hero-chip .ic { box-shadow: 0 8px 20px rgba(47,90,8,.25); }

/* ============================================================================
   BANNERI (leveä kuvabanneri pohjan split-heron tilalla)
   ============================================================================ */
.banner-wrap { padding: 14px var(--pad-x) 0; max-width: calc(var(--container) + 120px); margin-inline: auto; }
.banner {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: clamp(400px, 52vw, 560px);
  display: flex; align-items: flex-end;
  box-shadow: 0 20px 60px -24px rgba(30,58,8,.45);
}
.banner > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%; z-index: 0;
}
.banner::after {          /* luettavuusvarjostus tekstin alle */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--banneripeitto);
}
.banner-in {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(34px, 5vw, 60px);
}
.banner-in h1 {
  color: #fff; font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.06;
  margin: 0 0 .38em; max-width: 17ch; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.banner-in h1 .accent { color: var(--c-accent2); }
.banner-sub {
  color: rgba(255,255,255,.94); font-size: clamp(1.04rem, 1.6vw, 1.28rem);
  max-width: 52ch; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.banner .pill-eyebrow {
  color: var(--c-accent2);
  background: rgba(161,199,40,.16);
  border-color: rgba(161,199,40,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
@media (hover: hover) { .banner .btn-ghost:hover { border-color: #fff; color: var(--c-accent2); } }
@media (max-width: 640px) {
  .banner { min-height: 460px; }
  .banner > img { object-position: 66% 40%; }
}

/* ============================================================================
   TIEDOTE (perustiedote heti bannerin alla)
   ============================================================================ */
.notice-sec { padding-block: clamp(30px, 4.5vw, 54px) clamp(10px, 2vw, 20px); }
.notice {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 30px);
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: clamp(24px, 3.6vw, 40px);
}
.notice::before {         /* limetti-kaista vasemmassa reunassa */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--grad-lime);
}
.notice-ico {
  width: 54px; height: 54px; border-radius: 18px; flex: none;
  display: grid; place-items: center; background: var(--grad-lime); color: var(--c-on-primary);
}
.notice h2 { font-size: clamp(1.28rem, 2.2vw, 1.72rem); margin: 2px 0 12px; max-width: 26ch; }
.notice p { color: var(--c-text); margin: 0 0 12px; max-width: 74ch; font-size: 1rem; }
.notice p:last-child { margin-bottom: 0; }
.notice .notice-hi { font-weight: 700; color: var(--c-heading); }
@media (max-width: 640px) {
  .notice { grid-template-columns: 1fr; gap: 16px; }
  .notice-ico { width: 46px; height: 46px; border-radius: 15px; }
}

/* ============================================================================
   PALVELUT — kuva jokaisen palvelun yläpuolella
   ============================================================================ */
/* Palveluosio saa muita leveämmän kaistan, jotta kolme korttia ei jää kapeiksi:
   1140 px:llä kortti oli ~355 px, 1320 px:llä ~420 px. Sekä otsikko että
   luottamuspalkki levenevät mukana, jotta osio pysyy sisäisesti linjassa. */
.wrap--wide { max-width: 1320px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.4vw, 30px); }
.svc {
  position: relative;                 /* ankkuri koko kortin klikkialueelle (.svc-link::after) */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .28s ease, border-color .2s ease;
}
.svc-media { position: relative; }
.svc-media img { width: 100%; aspect-ratio: 10/7; object-fit: cover; display: block; }
.svc-body { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { font-size: clamp(1.16rem, 1.9vw, 1.42rem); margin: 0 0 10px; }
.svc-body p { color: var(--c-muted); font-size: .99rem; margin: 0 0 16px; }
.svc-meta {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-border);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.svc-meta span {
  font-size: .84rem; font-weight: 700; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-accent2) 20%, transparent);
  border-radius: var(--r-pill); padding: 6px 13px;
}
@media (hover: hover) {
  .svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 32%, var(--c-border)); }
}
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .svc-grid { grid-template-columns: 1fr; } }
/* "Lue lisää" -linkki palvelukortin pohjalla.
   HUOM: margin-top:auto on jo .svc-metassa — jos se toistetaan tässä, vapaa tila
   jakautuu kahtia ja kortin sisään syntyy outo rako. Älä lisää sitä. */
.svc-link {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; color: var(--c-primary);
}
.svc-link .arr { transition: transform .2s; }
/* Koko kortti klikattavaksi ilman että linkki kääritään otsikon ja kuvan ympärille:
   näkymätön kerros venytetään kortin päälle. Yksi linkki per kortti = ruudunlukija
   lukee vain yhden kohteen, ja tekstin voi yhä maalata hiirellä. */
.svc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) {
  .svc:hover .svc-link { color: var(--c-primary-2); }
  .svc:hover .svc-link .arr { transform: translateX(4px); }
}
/* Näppäimistöfokus näkyy koko kortin ympärillä, ei pelkän tekstirivin */
.svc:has(.svc-link:focus-visible) { outline: 2.5px solid var(--c-primary); outline-offset: 3px; }
.svc-link:focus-visible { outline: none; }

/* ============================================================================
   KENELLE — kuva + lista
   ============================================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.split--flip .split-media { order: 2; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1rem; }
.check-list li svg { color: var(--c-primary); flex: none; margin-top: 4px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split-media { order: -1; }
  .split-media { max-width: 560px; }
}

/* ============================================================================
   HINNASTO — ryhmitelty taulukko
   ============================================================================ */
/* auto-fit: kolme korttia menee työpöydällä rinnakkain eikä orpoa jää koskaan
   (2-sarakkeisella gridillä kolmas kortti jäisi yksin riville). */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(22px, 3vw, 32px); }
.price-card {
  /* relative on PAKOLLINEN: jos kortin sisällä on .svc-link, sen venytetty
     ::after-klikkikerros ankkuroituu tähän. Ilman tätä kerros leviäisi lähimpään
     positioituun esi-isään eli käytännössä koko sivun päälle. */
  position: relative;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm);
}
.price-card h3 { font-size: 1.2rem; margin: 0 0 4px; }
.price-card .pc-note { color: var(--c-muted); font-size: .92rem; margin: 0 0 16px; }
.price-card dl { margin: 0; display: grid; gap: 0; }
.price-card .pr { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px dashed var(--c-border); }
.price-card .pr:last-child { border-bottom: 0; padding-bottom: 0; }
.price-card .pr dt { font-size: .99rem; }
.price-card .pr dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--c-heading); white-space: nowrap; }
.price-card .pr.total dd { color: var(--c-primary); }
.price-foot { margin-top: 26px; color: var(--c-muted); font-size: .93rem; }
/* Kela-korvausmaininta hinnastokortin sisällä */
.price-card .pc-kela {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; padding: 13px 15px; border-radius: var(--r);
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  color: var(--c-text); font-size: .92rem; line-height: 1.5;
}
.price-card .pc-kela svg { color: var(--c-primary); flex: none; margin-top: 1px; }
.price-card .pc-kela b { color: var(--c-heading); }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   FEATURE-BAND — vihreä sävy pohjan violetin tilalle
   ============================================================================ */
.feature-band::before {
  background: radial-gradient(70% 130% at 12% 0%, rgba(161,199,40,.42), transparent 62%),
              radial-gradient(60% 120% at 100% 100%, rgba(104,154,22,.5), transparent 62%);
}

/* ---- Yhteystietolohkon aukiolotiedot ---- */
.hours { margin-top: 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r); padding: 18px 22px; }
.hours b { display: block; margin-bottom: 6px; }
.hours p { margin: 0; color: var(--c-muted); font-size: .96rem; }

/* ---- Luottamuspalkki: tasajako, ei orpoja rivinlopussa ---- */
.trustbar {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between;
  gap: 18px clamp(20px, 4vw, 46px);
  padding-block: 22px;
  border-block: 1px solid var(--c-border);
}
.trustbar .t { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-weight: 600; font-size: .95rem; }
.trustbar .t svg { color: var(--c-primary); flex: none; }
@media (max-width: 900px) { .trustbar { grid-template-columns: repeat(2, 1fr); justify-content: stretch; } }
@media (max-width: 480px) { .trustbar { grid-template-columns: 1fr; } }

/* ---- Bannerin pilleri: tumma pohja → teksti erottuu kirkkaastakin kuvasta ---- */
.banner .pill-eyebrow {
  color: #EAF6C8;
  background: rgba(20,38,6,.62);
  border-color: rgba(161,199,40,.55);
}

/* ---- Hinnastokortit samalle korkeudelle, sisältö ylös ---- */
.price-card { display: flex; flex-direction: column; }

/* ============================================================================
   MUUTOSKIERROS 1 (13.8.2026, käyttäjän palaute)
   1) Hero kokolevyiseksi   2) Painikkeet: #A1C728 + valkoinen teksti (kuten
   nykysivustolla)   3) Palvelupillerit kirkkaammiksi   4) Haaleat taustat →
   sama tumma vihreä + limettihehku kuin "Fysioterapiapalvelut jatkuvat" -kaistassa
   ============================================================================ */

/* ---- 1) BANNERI KOKOLEVYISEKSI (ei sisennystä, ei pyöristystä) ---- */
.banner-wrap { padding: 0; max-width: none; margin: 0; }
.banner { border-radius: 0; box-shadow: none; min-height: clamp(440px, 56vw, 640px); }
.banner-in { padding-block: clamp(40px, 6vw, 76px); }
/* badge pois → pelkkä tekstirivi */
.banner-kicker {
  color: var(--c-accent2); font-weight: 700; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 16px; max-width: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

/* ---- 2) PAINIKKEET: asiakkaan oma #A1C728, valkoinen teksti, EI hehkua ----
   Perustila tasainen väri, hover hieman vaaleampi vihreä liukuväri. */
.btn-primary, .nav-cta {
  background: #A1C728; background-image: none;
  color: #fff; border: 2px solid #A1C728;
  box-shadow: none;
  transition: background-image .25s ease, border-color .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .btn-primary:hover, .nav-cta:hover {
    background-color: #B5DB43;
    background-image: linear-gradient(120deg, #B5DB43 0%, #C6EC5C 52%, #A9D233 100%);
    border-color: #B5DB43; color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
  }
}
.btn-primary:active { box-shadow: none; }
.btn-primary.on-light { background: #fff; border-color: #fff; color: var(--c-dark); }
@media (hover: hover) { .btn-primary.on-light:hover { background: #fff; border-color: #fff; color: var(--c-dark); } }
.notice-ico { background: #A1C728; color: #fff; }
.brand .mark { background: #A1C728; color: #fff; }

/* ---- 3) PALVELUPILLERIT: kirkas limetti + tumma teksti ---- */
.svc-meta span {
  background: #A1C728;
  color: #26490a;
  font-weight: 700;
}

/* ---- 4) ISOT TAUSTAT: neutraali, lähes valkoinen (kierros 2) ----
   Liukuvärit pois isoista pinnoista. Väri tulee painikkeista, ikoneista ja
   pillereistä. Tummana säilyvät vain footer + "Fysioterapiapalvelut jatkuvat"
   -kaista (käyttäjän toive). */
.section--tint {
  background-color: #F6F6F8;
  background-image: none;
  color: var(--c-text);
  border-block: 1px solid #EAEAEE;
}
/* Ei liukuvärihuokuja missään isossa pinnassa */
.section--glow, .section--tint.section--glow, .section--mesh {
  background-image: none;
  background-color: var(--c-bg);
}
.section--tint.section--glow { background-color: #F6F6F8; }

/* Tiedote: sama neutraali pinta, väri tulee limettikaistasta ja -ikonista */
.notice { background: #F6F6F8; border-color: #EAEAEE; }

/* ---- Korjaukset kierroksen 1 renderistä ---- */
/* Bannerin vasen laita tummemmaksi → yläteksti erottuu kirkkaastakin kuvasta */
/* Etusivun banneri käyttää nyt SAMAA peittoa kuin alasivut (ei enää omaa
   pysty+vaaka-yhdistelmäänsä). Tummempi kuin ennen ylhäältä, kevyempi alhaalta. */
.banner::after { background: var(--banneripeitto); }

/* ============================================================================
   MUUTOSKIERROS 2 (13.8.2026) — tasainen pystyrytmi + neutraalit pinnat
   ============================================================================ */

/* ---- Yhtenäiset osiovälit: kaikilla osioilla sama tyhjä tila ---- */
:root { --section-y: clamp(58px, 7vw, 96px); }
.section, .section--snug, .notice-sec { padding-block: var(--section-y); }
.pt-tight { padding-top: var(--section-y); }
.pb-tight { padding-bottom: var(--section-y); }
.sec-head, .sec-head--snug { margin-bottom: clamp(30px, 4vw, 46px); }

/* ---- Luottamuspalkki nyt palveluiden alla, osion sisällä ---- */
.trustbar { margin-top: clamp(38px, 5vw, 58px); }

/* ---- Neutraalit rajat (vihertävän tilalle) ---- */
:root { --c-border: #E6E6EA; }

/* Mobiilissa banneri on kapea → teksti yltää kuvan vaaleaan laitaan: tummenna enemmän */
@media (max-width: 700px) {
  /* Mobiilissa banneri on kapea ja teksti täyttää sen lähes kokonaan, joten
     vino liuku ei enää osu "tekstin puolelle". Sama sävy, sama läpinäkyvyysalue,
     mutta suunta pystyyn — teksti pysyy vahvimman kohdan päällä. */
  .banner::after {
    background: linear-gradient(to top,
      rgba(var(--peitto), .90) 0%,
      rgba(var(--peitto), .70) 55%,
      rgba(var(--peitto), .46) 100%);
  }
  .banner-kicker { font-size: .82rem; letter-spacing: .06em; }
}

/* ============================================================================
   VÄRIKÄS OSIO (.section--brand) — yksi tasainen syvänvihreä lohko
   valkoisin tekstein. Ei liukuväriä (se ei toiminut isoilla pinnoilla).
   Rytmi sivulla: valkoinen → vaalea harmaa → SYVÄNVIHREÄ → valkoinen …
   Samaa vihreää käyttävät myös "Fysioterapiapalvelut jatkuvat" -kaista ja footer.
   ============================================================================ */
.section--brand {
  background: var(--c-dark);
  color: rgba(255,255,255,.88);
}
.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand .eyebrow { color: var(--c-accent2); opacity: 1; }
.section--brand p, .section--brand .lead { color: rgba(255,255,255,.86); }
.section--brand .check-list li { color: rgba(255,255,255,.92); }
.section--brand .check-list li svg { color: var(--c-accent2); }
.section--brand .tlink { color: var(--c-accent2); }
.section--brand .split-media img { box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }

/* Feature-band on jo tumma → poista sen liukuvärikerros, sama tasainen sävy */
.feature-band::before { background: none; }

/* ============================================================================
   MUUTOSKIERROS 3 (13.8.2026)
   ============================================================================ */

/* ---- Ei tuplaväliä kahden peräkkäisen valkoisen osion väliin ----
   Väri vaihtuu → molemmat padding-arvot tarvitaan. Väri EI vaihdu → ylempi riittää. */
.notice-sec + .section--plain,
.section--plain + .section--plain { padding-top: 0; }

/* ---- Feature-bandin liukuväri takaisin (käyttäjän toive) ---- */
.feature-band::before {
  background:
    radial-gradient(70% 130% at 12% 0%, rgba(161,199,40,.42), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(104,154,22,.50), transparent 62%);
}

/* ============================================================================
   MUUTOSKIERROS 4 (13.8.2026)
   Painikkeiden hover: MUUTTUU VAIN VÄRI. Ei liikettä, ei varjoa, ei nuolen
   siirtymää. Sama sääntö koskee sekä heron .btn-primary että headerin .nav-cta
   -painiketta → efekti on identtinen. shared.js hoitaa .nav-cta:sta vain mitat.
   (.btn-ghost "Katso palvelut" jätetty ennalleen — hyväksytty sellaisenaan.)
   ============================================================================ */
.btn-primary, .nav-cta {
  background-color: #A1C728;
  background-image: none;
  color: #fff;
  border: 2px solid #A1C728;
  box-shadow: none;
  transition: background-color .2s ease;
}
@media (hover: hover) {
  .btn-primary:hover, .nav-cta:hover {
    /* selvästi erottuva vihreä liukuväri — ainoa asia joka hoverissa muuttuu */
    background-image: linear-gradient(120deg, #C9EF62 0%, #A1C728 46%, #79A012 100%);
    background-color: #A1C728;
    border-color: #A1C728;
    color: #fff;
    transform: none;
    box-shadow: none;
  }
  .btn-primary:hover .arr, .nav-cta:hover .arr { transform: none; }
}
.btn-primary:active, .nav-cta:active { transform: none; box-shadow: none; }

/* ============================================================================
   ALASIVUT (20.8.2026) — sivuhero, murupolku, sisältöleipä, sivuhinnasto
   URL-polut peritty vanhalta lehmus.fi:ltä — ks. projekti.md → URL-kartta.
   ============================================================================ */
/* Sivuhero: kuvatausta tumman vihreän peiton alla.
   Kuva saa näkyä vain vähän — teksti on tärkein ja sen pitää erottua joka kuvalla.
   Peitto on läpinäkymätön (≥ .78) nimenomaan siksi, ettei kontrasti riipu siitä,
   miten vaalea kohta kuvasta osuu otsikon taakse. Ks. projekti.md, muutoskierros 7. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sama syvä metsänvihreä kuin etusivun bannerissa — ei --c-dark, joka on
     vaaleampi. Näin ylä- ja alasivun bannerit ovat samaa sävyä. */
  background: rgb(var(--peitto));
  color: var(--c-on-dark);
  padding-block: clamp(72px, 10vw, 142px) clamp(60px, 8vw, 112px);
}
.page-hero .ph-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--banneripeitto);   /* sama peitto kuin etusivun bannerissa */
}
.page-hero h1 { margin: 14px 0 18px; max-width: 22ch; color: #fff; }
.page-hero .lead { max-width: 60ch; margin: 0; color: rgba(237, 244, 222, .92); }

/* Murupolku — vaalea versio tummalla herolla */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .87rem; color: rgba(237, 244, 222, .72); }
.crumbs a { color: rgba(237, 244, 222, .72); }
.crumbs .sep { opacity: .45; }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }
@media (hover: hover) { .crumbs a:hover { color: var(--c-accent2); } }

/* Sisältöleipä — rajattu rivinpituus, jotta pitkä teksti pysyy luettavana */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 42px; margin-bottom: 0; }
.prose h3 { margin-top: 30px; margin-bottom: 0; font-size: 1.1rem; }
.prose p { color: var(--c-text); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* Sivun sisäinen hinnastolohko (yksi palvelu → yksi kortti, ei gridiä) */
.price-solo { max-width: 560px; }

/* Alasivun kaksipalstainen asettelu: leipä + tarttuva sivupalkki */
.page-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(30px, 4vw, 56px); align-items: start; }
.page-side { position: sticky; top: 96px; display: grid; gap: 18px; }
@media (max-width: 940px) { .page-cols { grid-template-columns: 1fr; } .page-side { position: static; } }

/* Kuvausteksti hinnastokortin sisällä (valmennuspaketit — ei hintarivejä) */
.price-card > p:not(.pc-note):not(.pc-kela):not(.pc-hinta) { color: var(--c-muted); font-size: .97rem; margin: 0; }

/* ============================================================================
   MUUTOSKIERROS 10 (20.8.2026) — otsikkojen mitoitus + tiivis hinnasto
   ============================================================================ */

/* Kapeassa palstassa (split/prose ≈ 460–500 px) h2 sai olla 3rem, jolloin yksi
   pitkä sana täytti rivin ja edellinen sana jäi yksin ensimmäiselle riville
   ("Sama / erikoisosaaminen, nyt / yrityksesi käyttöön"). text-wrap: balance ei
   auta siihen — se ei voi tehdä rivistä leveämpää kuin palsta. Ainoa korjaus on
   pienentää otsikkoa suhteessa palstan leveyteen. */
.split h2, .prose h2 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); }

/* Yhden palvelun hinnasto, jossa on vain pari riviä: täysi osiokorkeus ja
   560 px:n kortti jättivät ison tyhjän (hieronta = 2 riviä). */
.section--hinta-tiivis { padding-block: clamp(40px, 5vw, 64px); }
.section--hinta-tiivis .sec-head { margin-bottom: clamp(18px, 2.4vw, 26px); }
.section--hinta-tiivis .price-solo { max-width: 440px; }
.section--hinta-tiivis .price-card { padding: clamp(20px, 2.2vw, 26px); }

/* Mobiilissa otsikot pienemmiksi: suomen yhdyssanat ("yleisimpiin",
   "henkilöstönne", "hyvinvointia") ovat niin pitkiä, ettei kahta mahdu rinnakkain
   isolla kirjasinkoolla → joka rivi jää yhden sanan mittaiseksi. Koko on mitoitettu
   kokeellisesti niin, että yksikään sivuston otsikko ei jää yhden sanan riveiksi. */
@media (max-width: 520px) {
  h1 { font-size: clamp(1.72rem, 7.2vw, 2.4rem); }
  h2 { font-size: clamp(1.36rem, 5.7vw, 1.9rem); }
  .split h2, .prose h2 { font-size: clamp(1.3rem, 5.4vw, 1.8rem); }
  h3 { font-size: clamp(1.05rem, 4.4vw, 1.3rem); }
}

/* Hintaväli ei saa katketa ajatusviivan kohdalta ("76–" / "120 €").
   &nbsp; suojaa vain luvun ja €:n välin, joten koko väli kääritään tähän. */
.hintavali { white-space: nowrap; }

/* ============================================================================
   MUUTOSKIERROS 12 (20.8.2026, Jyrkin toimittamat tekstit ja hinnat)
   ============================================================================ */

/* Valmennuspaketin hinta kortin sisällä. Hinta on tällä sivulla se, mitä
   asiakas etsii, joten se erotetaan kuvaustekstistä omaksi riviksi eikä
   piiloteta kappaleen sisään. Sama typografia kuin hinnaston .pr dd:llä
   (näyttöfontti + brändivihreä), jotta sivut näyttävät samalta perheeltä.
   🛑 white-space: nowrap — "270 €/kk" ei saa katketa riviltä toiselle
   (sama sääntö kuin .hintavali, ks. muutoskierros 9). */
.pc-hinta {
  margin: 2px 0 16px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.1;
  color: var(--c-primary); white-space: nowrap;
}

/* ============================================================================
   MUUTOSKIERROS 13 (20.8.2026) — banneri terävämmäksi ja selkeämmäksi
   Malli: demo.kotisivut.fi/helpup — tumma, neutraali peitto ja kuva joka
   oikeasti näkyy. Korkeudet, fontit ja tekstien sijainnit pidettiin ennallaan.
   Peiton sävy ja liuku on vaihdettu :root-muuttujissa (--peitto, --banneripeitto),
   tässä lohkossa vain se, mikä ei mahdu niihin.
   ============================================================================ */

/* Kevyempi peitto = kuva näkyy, mutta teksti tarvitsee oman turvansa.
   Varjo on iso ja pehmeä (16–18 px), jotta se ei näy reunuksena vaan
   tummentaa kirjainten taustaa. Sama arvo kuin HelpUpin herossa. */
.banner-in h1,
.banner-sub,
.banner-kicker,
.page-hero h1,
.page-hero .lead,
.page-hero .crumbs { text-shadow: 0 2px 16px rgba(0,0,0,.5); }

/* (Alasivuille lisätty erillinen pohjatummennus poistettiin: --banneripeitto
   nousee nyt itsessään .70 → .96 alaosassa, joten toinen kerros olisi tehnyt
   alasivujen heroista tarpeettoman tummia. Yksi liuku, yksi totuuslähde.) */

/* Bannerin yläkicker oli brändilimetti (--c-accent2). Kevyemmän peiton alla se
   putosi 2,4:1 kontrastiin, koska kicker istuu bannerin VAALEIMMASSA kohdassa
   (liuku on siellä vasta .46) ja on pientä versaalitekstiä → vaatii 4,5:1.
   🛑 Ratkaisuksi EI pilleritaustaa: badge poistettiin herosta muutoskierros 1:ssä
   asiakkaan pyynnöstä ("näyttää AI:lta"). Kicker on nyt vaalea, ja limetti jää
   sinne missä se kestää: h1:n aksenttiin ja painikkeisiin. */
.banner-kicker { color: var(--c-on-dark); }

/* Kaksi pienen tekstin kontrastia jäi mittauksessa juuri alle 4,5:1 rajan
   (kicker 4,40 @390 px, murupolun linkki 4,36 @390 px). Molemmat korjattiin
   nostamalla tekstin omaa vaaleutta, ei tummentamalla peittoa lisää —
   peitto on säädetty niin kevyeksi kuin kuva sallii, eikä sitä kannata
   heikentää tekstin takia. */
.banner-kicker { color: #fff; }
.crumbs, .crumbs a { color: rgba(255, 255, 255, .88); }

/* ============================================================================
   MUUTOSKIERROS 14 (24.8.2026, Jyrkin vastaukset) — kuntotestauksen hinta
   ============================================================================ */

/* Paketin hinta sisältölistan perässä. Istuu .section--brandin tummalla
   vihreällä, joten teksti on vaalea ja korostus brändilimetillä.
   🛑 white-space: nowrap luvun ympärillä hoituu &nbsp;:llä HTML:ssä (sama
   sääntö kuin muutoskierros 9:ssä) — älä lisää tähän erillistä nowrapia,
   koska rivi sisältää myös selittävän sanan joka SAA rivittyä. */
.paketti-hinta {
  margin: clamp(26px, 3vw, 34px) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(255, 255, 255, .92);
}
.paketti-hinta b { color: var(--c-accent2); font-size: 1.25em; }

/* ============================================================================
   MUUTOSKIERROS 15 (24.8.2026) — Meistä-osion henkilöt
   ============================================================================ */

/* 🛑 Ympyrä tulee CSS:stä, EI leivottuna kuvatiedostoon. Syy: sama neliörajaus
   toimii silloin millä tahansa taustavärillä eikä valkoinen kulma paljastu, jos
   osion tausta joskus vaihtuu. Alfakanavaa ei siis tarvita, ja kuva pysyy
   tavallisena valokuvana (pienempi tiedosto, ei läpinäkyvyysreunan sahalaitaa). */
.henkilo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 4vw, 60px); max-width: 860px; margin-inline: auto;
}
/* Korteissa on eri määrä pätevyyksiä (7 vs 2), joten puhelinnumerot jäisivät
   eri korkeuksille. Flex + margin-top:auto pitää ne samalla rivillä. */
.henkilo { text-align: center; display: flex; flex-direction: column; }
.henkilo-kuva {
  width: clamp(150px, 19vw, 200px); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; display: block; margin-inline: auto;
  border: 4px solid var(--c-accent2);
  box-shadow: 0 14px 34px -14px rgba(30, 58, 8, .45);
}
/* Nimet saatiin 27.8.2026 → kortin otsikko on oikea <h3>, ja pätevyyslista
   on kokonaisuudessaan tasavertaista leipätekstiä (aiemmin ensimmäinen
   pätevyys jouduttiin nostamaan otsikoksi, koska nimeä ei ollut). */
.henkilo-nimi {
  margin: 18px 0 0; font-size: 1.18rem; line-height: 1.3;
}
.henkilo-patevyydet { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.henkilo-patevyydet li { color: var(--c-muted); font-size: .97rem; line-height: 1.45; }
/* 🛑 Yhteystiedot EIVÄT tasaudu kortin alareunaan (Valtterin päätös 28.8.2026).
   Aiemmin `margin-top: auto` piti numerot samalla rivillä, mutta koska korteissa
   on eri määrä pätevyyksiä, se jätti lyhyempään korttiin ison aukon tekstin ja
   numeron väliin. Numero kuuluu tekstin viereen, ei rivilinjaan. */
.henkilo-puh {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 0; padding-top: 18px;
  font-weight: 700; font-size: 1rem; color: var(--c-primary);
}
.henkilo-puh svg { flex: none; }
@media (hover: hover) { .henkilo-puh:hover { color: var(--c-primary-2); } }
@media (max-width: 640px) { .henkilo-grid { grid-template-columns: 1fr; } }

/* Valmennussivun PT-ohjaajat: kolme korttia rinnakkain ja kaksi yhteystietoa
   (sähköposti + puhelin) yhden sijaan. Yhteystiedot kääritään omaan lohkoonsa,
   joka hoitaa alareunaan tasauksen — muuten margin-top:auto olisi vain
   ensimmäisellä rivillä ja rivit jäisivät eri korkeuksille. */
.henkilo-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1040px; }
/* Yhteystiedot omassa boksissaan: sama vaalea pinta, hiusviivaraja ja pyöristys
   kuin hinnasto-/pakettikorteissa (.price-card), mutta tiiviimmällä padingilla.
   Molemmilla sivuilla sama lohko — etusivun kortissa sisältönä on vain puhelin. */
.henkilo-yhteys {
  margin-top: 16px; padding: 14px 16px;
  display: grid; gap: 7px; justify-items: center;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--r);
}
.henkilo-yhteys .henkilo-puh { padding-top: 0; }
.henkilo-yhteys .henkilo-puh { margin-top: 0; padding-top: 0; }
.henkilo-mail {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .95rem; color: var(--c-primary); overflow-wrap: anywhere;
}
.henkilo-mail svg { flex: none; }
.puh-lisa { font-weight: 500; color: var(--c-muted); font-size: .9rem; }
@media (hover: hover) { .henkilo-mail:hover { color: var(--c-primary-2); } }
@media (max-width: 900px) { .henkilo-grid--3 { grid-template-columns: 1fr 1fr; max-width: 700px; } }
@media (max-width: 640px) { .henkilo-grid--3 { grid-template-columns: 1fr; } }

/* ============================================================================
   MUUTOSKIERROS 16 (25.8.2026, Valtterin päätös) — etusivun banneri:
   VALOKUVA ALKUPERÄISENÄ, teksti omalle tummalle paneelilleen
   ============================================================================ */

/* 🛑 Etusivun banneri EI enää käytä --banneripeittoa. Syy on tietoinen valinta,
   ei drift: asiakas halusi valokuvan näkyvän alkuperäisenä. Mitattu ilman
   peittoa: valkoinen teksti kuvan päällä oli 1,00–1,07:1 eli lukukelvoton
   (vaadittu 4,5:1 pienelle, 3:1 isolle). Kontrasti siirrettiin siis kuvasta
   paneeliin: kuva ei tummene lainkaan, teksti saa oman pohjansa.
   ⚠️ ALASIVUJEN .page-hero pitää edelleen --banneripeiton — siellä teksti on
   suoraan kuvan päällä. Älä poista sitä sieltä tämän muutoksen perusteella. */
.banner::after { background: none; }

.banner-panel {
  max-width: 620px;
  padding: clamp(26px, 3.4vw, 42px) clamp(24px, 3.2vw, 40px);
  border-radius: var(--r-lg);
  /* .92 on mitoitettu niin, ettei kontrasti riipu takana olevasta kuvasta:
     vaaleimmallakin kohdalla valkoinen teksti on yli 16:1. */
  background: rgba(var(--peitto), .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
}
/* Paneelin päällä varjoa ei tarvita — pohja on jo umpinainen. */
.banner-panel .banner-kicker,
.banner-panel h1,
.banner-panel .banner-sub { text-shadow: none; }
.banner-panel .banner-sub { margin-bottom: 0; }

@media (max-width: 700px) {
  .banner-panel { max-width: none; padding: clamp(22px, 6vw, 30px) clamp(20px, 5.5vw, 26px); }
}

/* ============================================================================
   MUUTOSKIERROS 17 (25.8.2026, Valtterin pyyntö) — alasivujen bannerit kevyemmiksi
   ============================================================================ */

/* 🛑 TIETOINEN POIKKEUS SAAVUTETTAVUUSRAJASTA. Peittoa kevennettiin
   (.34/.70/.90/.96 → .28/.60/.78/.86), koska osa alasivujen bannereista oli
   asiakkaan mielestä liian tummia. Mitattu seuraus: pieni teksti putoaa
   4,93:1 → n. 3,8:1 eli alle WCAG AA:n 4,5:1 rajan. Valtterille kerrottiin
   luku ennen päätöstä ja hän valitsi kevennyksen — älä siis "korjaa" tätä
   takaisin huomaamatta, vaan kysy ensin.

   Kevennys maksettiin takaisin siltä osin kuin se on mahdollista ilman kuvan
   tummentamista: vahvempi tekstivarjo ja täysin valkoinen murupolku. Varjo ei
   näy taustamittauksessa, mutta se erottaa kirjaimen reunan taustasta siellä
   missä kontrasti on tiukin. */
.page-hero h1,
.page-hero .lead,
.page-hero .crumbs {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .78), 0 0 34px rgba(0, 0, 0, .5);
}
/* Murupolku on pienintä tekstiä bannerissa eli kaikkein tiukin kohta.
   Täysi valkoinen antaa sille kaiken mahdollisen kontrastin. */
.page-hero .crumbs,
.page-hero .crumbs a { color: rgba(255, 255, 255, .96); }

/* ============================================================================
   MUUTOSKIERROS 18 (25.8.2026, Valtterin pyyntö) — kaksi vaalennustasoa
   + kevyt tummennus takaisin etusivun kuvalle
   ============================================================================ */

/* Valmennus ja Yrityksille selvästi vaaleimmiksi, muut palvelusivut vaaleiksi
   mutta ei yhtä paljon. Taso valitaan sivulla luokalla, ei omalla liu'ulla —
   näin sävy tulee edelleen yhdestä paikasta eivätkä bannerit pääse eriytymään. */
.page-hero--vaalea::before { background: var(--banneripeitto-vaalea); }

/* Etusivun banneri: aiemmin tummennus oli kokonaan pois ja kontrasti tuli
   pelkästä tekstipaneelista. Nyt kuvan päälle tulee kevyt tummennus, jotta
   etusivu ja alasivut näyttävät samalta perheeltä. Paneeli jää paikalleen,
   joten tekstin luettavuus ei riipu tästä arvosta. */
.banner::after { background: var(--banneripeitto-etusivu); }
@media (max-width: 700px) {
  .banner::after { background: var(--banneripeitto-etusivu); }
}

/* ============================================================================
   MUUTOSKIERROS 19 (25.8.2026) — etusivun banneri samaksi kuin muut bannerit
   ============================================================================ */

/* Valtteri: "muuta myös etusivu samoin kuin muut bannerit."
   Tekstipaneeli purettiin ja etusivu käyttää nyt samaa perustason peittoa kuin
   palvelusivut, teksti suoraan kuvan päällä. Kumoaa muutoskierrokset 16 ja 18
   etusivun osalta — `--banneripeitto-etusivu` ja `.banner-panel` ovat siis
   poistuneet käytöstä, eikä niitä pidä palauttaa ilman uutta pyyntöä. */
.banner::after { background: var(--banneripeitto); }
@media (max-width: 700px) {
  .banner::after { background: var(--banneripeitto); }
}
/* Sama vahvistettu kaksoisvarjo kuin alasivujen heroissa (muutoskierros 17),
   jotta etusivun teksti käyttäytyy identtisesti muiden bannerien kanssa. */
.banner-in h1,
.banner-sub,
.banner-kicker { text-shadow: 0 2px 10px rgba(0, 0, 0, .78), 0 0 34px rgba(0, 0, 0, .5); }

/* ============================================================================
   MUUTOSKIERROS 20 (25.8.2026, Jyrkin pyyntö) — alasivujen heron alapuolinen
   osio boksiin, samalla tyylillä kuin etusivun palvelukortit
   ============================================================================ */

/* Jyrki: "Saisko Kuntotestauksesta, valmennuksesta ja yrityksille vielä pikkuboksit
   samaan tapaan kuin OMT-terapiasta, hieronnasta ja tukipohjallisista."
   Valtteri tarkensi: kyse on alasivujen heron alapuolisesta osiosta, ei etusivun
   korteista — etusivulla kuva on kortin päällä, alasivulla kuva on vieressä.
   Sama pinta ja reunus kuin .svc-kortissa, mutta vaakasuuntaisena. */
.split-boksi {
  gap: 0;                       /* kuva kiinni kortin reunaan, ei rakoa */
  align-items: stretch;         /* kuva täyttää kortin korkeuden */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;             /* rajaa kuvan kortin pyöristykseen */
  box-shadow: var(--shadow-sm);
}
.split-boksi .split-media { display: flex; max-width: none; }
/* Kuva täyttää oman puolikkaansa kokonaan — kiinteä kuvasuhde estäisi sen,
   koska kortin korkeuden määrää tekstipalsta. */
.split-boksi .split-media img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  border-radius: 0; box-shadow: none;
}
.split-boksi .prose { padding: clamp(26px, 3.2vw, 44px); align-self: center; }

@media (max-width: 860px) {
  /* Pystyssä kuva menee ylös kuten etusivun kortissa, ja tarvitsee taas
     kuvasuhteen — muuten sillä ei ole mitään mikä määrittäisi korkeuden. */
  .split-boksi .split-media img { aspect-ratio: 10/7; height: auto; }
}

/* ============================================================================
   MUUTOSKIERROS 21 (25.8.2026, Valtterin pyyntö) — leveämpi banneriteksti,
   matalampi banneri
   ============================================================================ */

/* Valtteri: "levennä tekstiä johon mahtuu se hero, jotta bannerin ei tarvitse
   olla niin korkea."
   🛑 Juurisyy oli tekstin kapeus, ei bannerin korkeus: h1 oli rajattu 17 merkkiin
   ja leipä 52:een, jolloin otsikko taittui kolmelle riville ja pakotti bannerin
   korkeaksi. Leventäminen vähentää rivejä, ja vasta se sallii matalamman bannerin.
   Pelkkä korkeuden pienentäminen olisi puskenut tekstin ulos. */
.banner-in h1 { max-width: 26ch; }
.banner-sub   { max-width: 66ch; }
.banner { min-height: clamp(420px, 47vw, 560px); }
@media (max-width: 700px) {
  /* Kapealla näytöllä leveysrajoilla ei ole merkitystä (palsta on kapeampi kuin
     26ch), mutta korkeutta ei voi pudottaa yhtä paljon: sama teksti vie siellä
     enemmän rivejä. */
  .banner { min-height: clamp(430px, 58vw, 560px); }
}

/* Otsikon alla oleva teksti puhtaan valkoiseksi kaikissa bannereissa
   (Valtteri 25.8.2026: "kaikissa ei ainakaan ollut"). Alasivujen lead oli
   vaalean vihreä rgba(237,244,222,.92) eli --c-on-dark -sävy, ja etusivun
   leipä 94 % valkoinen. Nyt molemmat #fff, jolloin ne erottuvat kuvasta
   parhaalla mahdollisella kontrastilla ilman että peittoa tarvitsee tummentaa. */
.page-hero .lead,
.banner-sub { color: #fff; }

/* ============================================================================
   MUUTOSKIERROS 22 (25.8.2026) — bannerin korkeus kaikilla näytöillä
   ============================================================================ */

/* 🛑 min-height ei riittänyt. Mitattu: korotus näkyi vain ≥1180 px leveydellä,
   koska sitä kapeammalla bannerin korkeuden määrää SISÄLTÖ (teksti + napit),
   joka on jo korkeampi kuin min-height. Oikea säädin on siis sisällön oma
   pystypadding, joka vaikuttaa joka leveydellä. Jos korkeutta säädetään
   jatkossa, säädä tätä eikä min-heightia. */
.banner-in { padding-block: clamp(58px, 7.2vw, 104px); }