/* ============================================================
   PALVELUSIVUT (Jenna 27.10.2026: "rakenteeltaan ja animaatioiltaan
   tylsät, pitäisi vastata nykysivujen fiilistä"). Generoidaan:
   tools/rakenna_laskeutumissivut.py (palvelusivut), tekstit Brandstein
   Muistiinpanoista. Osiot vuorottelevat beige / tumma / beige / punainen /
   beige; otsikot jättikokoisina (data-syvyys), kortit kuten Palvelut-sivun
   avatut kortit (iso punainen numero, viivoitettu lista), työt polaroideina
   käsialanimillä. Liike: laskeutumissivu.js. Mobiilissa ei pinnausta.
   ============================================================ */
.sivu-palvelu main{ overflow-x:clip; }
.ps-polku{ margin:0; font-family:var(--f-mono); font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase; }
.sivu-laskeutuminen main .ps-polku a{ color:var(--puna); text-decoration:none; }
.sivu-laskeutuminen main .ps-polku a:hover{ text-decoration:underline; }
.ps-hero{ padding-bottom:clamp(30px,4vw,60px); }
.ps-hero__ala{ max-width:30ch; }

/* Jättiotsikko osion alussa */
.ps-iso{
  margin:0 auto clamp(30px,4vw,70px); max-width:18ch; text-align:center;
  font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(44px,7.2vw,140px); line-height:1.05; color:var(--puna);   /* ääkkösten pisteet: 1.05 */
}
.ps-iso--kerma{ color:var(--kerma); }

/* 1. Johdanto: suora vastaus isona (AI SEO: vastaus sivun alussa) */
.ps-johdanto{ max-width:1300px; margin-inline:auto; padding:clamp(20px,3vw,50px) var(--reuna) clamp(80px,10vw,170px); text-align:center; }
.ps-johdanto p{ margin:0 auto; }
.ps-johdanto__iso{
  max-width:26ch; font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(22px,2.5vw,42px); line-height:1.2;
}
.ps-johdanto__palstat{ max-width:min(680px, 100%); margin:clamp(28px,3vw,50px) auto 0; }
.ps-johdanto__palstat--vasen{ text-align:left; }   /* pitkä teksti: yksi palsta, oikea liehu (Jenna 28.10.2026) */
.ps-johdanto__p{ margin:0 0 1em !important; font-size:clamp(16px,1.15vw,19px); line-height:1.65; }
.ps-korostus{ position:relative; isolation:isolate; display:inline-block; white-space:nowrap; color:var(--puna); }
.ps-korostus .tussi-el--alleviivaus{ left:-2%; width:104%; bottom:-.3em; height:.32em; color:var(--puna); z-index:-1; }   /* ohut viiva tekstin alla, ei peitä ylempiä rivejä */
.ps-napit{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(10px,1vw,16px); margin:clamp(28px,3vw,48px) 0 0 !important; }
.p-nappi--puna{ background:var(--puna); color:var(--kerma); }
.p-nappi--puna:hover{ background:var(--kerma); color:var(--musta); }
.p-nappi--puna.tussihover{ --tussi:var(--kerma); }
.p-nappi--puna.tussihover:hover{ background:var(--puna); color:var(--musta); }

/* 2. Kortit */
.ps-kortit{ padding:clamp(60px,8vw,140px) var(--reuna) clamp(80px,10vw,170px); border-top:1px solid rgba(25,25,25,.25); }
.ps-kortit__johdanto{ max-width:56ch; margin:-1em auto clamp(30px,4vw,60px); text-align:center; font-size:clamp(16px,1.25vw,21px); line-height:1.6; }
.ps-kortit__lista{ list-style:none; margin:0 auto; padding:0; max-width:1500px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,36px); align-items:start; }
.ps-kortit__lista--2, .ps-kortit__lista--4{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1100px; }
.ps-kortit__lista--4 .ps-kortti:nth-child(n){ margin-top:0; }
.ps-kortit__lista--4 .ps-kortti:nth-child(even){ margin-top:clamp(0px,4vw,70px); }
.ps-kortit__lista--4 .ps-kortti:nth-child(3){ margin-top:calc(clamp(0px,4vw,70px) * -1); }
.ps-kortit__lista--4 .ps-kortti:nth-child(4){ margin-top:0; }
.ps-kortti{
  position:relative; background:#F3EFE6; border-radius:clamp(14px,1.4vw,22px);
  padding:clamp(22px,2.2vw,38px); box-shadow:0 30px 50px -36px rgba(0,0,0,.55);
  display:grid; gap:clamp(12px,1.2vw,18px); align-content:start;
}
.ps-kortti:nth-child(3n+1){ rotate:-1.2deg; }
.ps-kortti:nth-child(3n+2){ rotate:.9deg; margin-top:clamp(0px,4vw,70px); }
.ps-kortti:nth-child(3n){ rotate:-.5deg; margin-top:clamp(0px,1.5vw,24px); }
.ps-kortti__nro{ font-family:var(--f-nimi); color:var(--puna); font-size:clamp(70px,8vw,150px); line-height:.78; letter-spacing:-.02em; }
.ps-kortti__ot{ margin:0; font-family:var(--f-nav); font-weight:400; font-size:clamp(22px,1.9vw,34px); line-height:1.05; }
.ps-kortti__p{ margin:0; font-size:clamp(15px,1.05vw,17px); line-height:1.65; }
.ps-kortti__lista{ list-style:none; margin:.4em 0 0; padding:0; border-top:1.5px solid var(--musta); counter-reset:kohta; }
.ps-kortti__lista li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1em; counter-increment:kohta;
  padding:.5em 0; border-bottom:1.5px solid var(--musta);
  font-family:var(--f-nav); font-size:clamp(15px,1.15vw,19px); line-height:1.15;
}
.ps-kortti__lista li::after{ content:'0' counter(kohta); font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; }

/* 3. Tumma etulista */
.ps-edut{ background:var(--musta); color:var(--kerma); padding:clamp(80px,10vw,180px) var(--reuna); }
.ps-edut__johdanto{ max-width:56ch; margin:-1em auto clamp(30px,4vw,60px); text-align:center; font-size:clamp(16px,1.25vw,21px); line-height:1.6; opacity:.85; }
.ps-edut__lista{ list-style:none; margin:0 auto; padding:0; max-width:1300px; border-top:1px solid rgba(228,222,208,.3); }
.ps-etu{
  display:grid; grid-template-columns:clamp(60px,7vw,130px) minmax(0,5fr) minmax(0,6fr); gap:clamp(14px,2.4vw,44px); align-items:start; position:relative;
  padding:clamp(22px,2.6vw,44px) 0; border-bottom:1px solid rgba(228,222,208,.3);
}
.ps-etu__nro{ font-family:var(--f-mono); font-size:clamp(12px,.9vw,14px); letter-spacing:.14em; color:var(--puna); padding-top:.55em; }
.ps-etu__ot{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(28px,3.3vw,62px); line-height:1.05; }
.ps-etu__p{ font-size:clamp(15px,1.15vw,19px); line-height:1.6; opacity:.85; margin-top:-.2em; }   /* ensimmäisen rivin yläreuna otsikon kanssa samaan linjaan (Jenna 27.10.) */
/* HOVER-KUVAT (Jenna 27.10.2026): rivin päällä kuva nousee ja seuraa kursoria
   (laskeutumissivu.js). Vain hiirelle; kosketusnäytöillä ei kuvia. */
.ps-etu__kuva{
  position:absolute; left:0; top:0; z-index:3; width:clamp(220px,22vw,380px); pointer-events:none;
  opacity:0; visibility:hidden;
}
.ps-etu__kuva img{ display:block; width:100%; height:auto;   /* oma kuvasuhde, ei rajausta (Jenna 27.10.) */
  border-radius:clamp(10px,1vw,16px); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
@media (hover:none){ .ps-etu__kuva{ display:none; } }
.ps-etu__p::first-letter{ text-transform:uppercase; }
.ps-edut--vaalea{ background:var(--kerma); color:var(--musta); border-top:1px solid rgba(25,25,25,.25); }
.ps-edut--vaalea .ps-edut__lista, .ps-edut--vaalea .ps-etu{ border-color:rgba(25,25,25,.25); }
.ps-edut--vaalea .ps-etu__p, .ps-edut--vaalea .ps-edut__johdanto{ opacity:1; }
.ps-edut .ps-napit{ margin-top:clamp(40px,5vw,80px) !important; }

.ps-teksti{ padding:clamp(80px,10vw,170px) var(--reuna) clamp(40px,5vw,80px); border-top:1px solid rgba(25,25,25,.25); }
.ps-teksti__p{ max-width:60ch; margin:0 auto 1.1em; font-size:clamp(16px,1.25vw,21px); line-height:1.65; text-align:center; }
.ps-edut__johdanto{ margin-top:0 !important; }

/* Lainaus ja allekirjoitus */
.ps-lainaus{ margin:0 auto; max-width:1300px; padding:clamp(70px,9vw,150px) var(--reuna); text-align:center; display:grid; justify-items:center; gap:clamp(18px,2vw,30px); }
.ps-lainaus__teksti{ margin:0; }
.ps-lainaus__teksti p{ margin:0 auto; max-width:40ch; font-size:clamp(19px,1.7vw,30px); line-height:1.45; }
/* Pitkä lainaus luettavalla fontilla; käsiala vain isossa lainausmerkissä (Jenna 28.10.2026). */
.ps-lainaus__teksti::before{ content:'”'; display:block; font-family:var(--f-eyebrow); font-size:clamp(90px,10vw,170px); line-height:.6; color:var(--puna); margin-bottom:.15em; }
.ps-lainaus__kuka{ display:grid; gap:.35em; }
.ps-lainaus__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(22px,2vw,34px); line-height:1; }
.ps-lainaus__rooli, .ps-allekirjoitus__rooli{ font-family:var(--f-mono); font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.ps-allekirjoitus{ display:grid; justify-items:center; gap:.3em; margin:clamp(20px,2.4vw,36px) 0 0; }
.ps-allekirjoitus__nimi{ font-family:var(--f-eyebrow); font-size:clamp(32px,3vw,54px); line-height:1; color:var(--puna); }
.ps-kortit__loppu{ margin:clamp(40px,5vw,80px) auto 0; }

/* Pitkä palvelun nimi (esim. Verkkosivujen suunnittelu ja uudistus) riveille myös desktopilla. */
.l-hero__ot--rivit .l-hero__r{ display:block; }

/* 4. Työt bento-ruudukkona (Jenna 27.10.2026: polaroidit pois). Kuusi
   ruutua: iso 2x2, leveitä 2x1 ja pieniä 1x1; nimi kermaisessa lapussa
   kuvan alakulmassa (ei punaista tekstiä kuvan päällä). */
.ps-tyot{ padding:clamp(80px,10vw,170px) var(--reuna) clamp(60px,8vw,140px); }
.ps-bento{
  list-style:none; margin:0 auto; padding:0; max-width:1500px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(170px,15vw,280px);
  gap:clamp(10px,1vw,16px); grid-auto-flow:dense;
}
.ps-bento__ruutu{ position:relative; min-width:0; }
.ps-bento--6 .ps-bento__ruutu:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.ps-bento--6 .ps-bento__ruutu:nth-child(2),
.ps-bento--6 .ps-bento__ruutu:nth-child(5),
.ps-bento--6 .ps-bento__ruutu:nth-child(6){ grid-column:span 2; }
.ps-bento--4 .ps-bento__ruutu:nth-child(1), .ps-bento--5 .ps-bento__ruutu:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.ps-bento--4 .ps-bento__ruutu:nth-child(2), .ps-bento--5 .ps-bento__ruutu:nth-child(2){ grid-column:span 2; }
.ps-bento--5 .ps-bento__ruutu:nth-child(5){ grid-column:span 4; }
.ps-bento--3 .ps-bento__ruutu:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.ps-bento--3 .ps-bento__ruutu:nth-child(n+2){ grid-column:span 2; }
.sivu-laskeutuminen main .ps-bento__a{ position:absolute; inset:0; display:block; overflow:hidden; border-radius:clamp(12px,1.2vw,20px); background:var(--musta); color:var(--musta); text-decoration:none; }
.ps-bento__kuva, .ps-bento__kuva img{ display:block; width:100%; height:100%; }
.ps-bento__kuva img{ object-fit:cover; transition:scale 1100ms var(--ease); }
.ps-bento__a:hover .ps-bento__kuva img{ scale:1.05; }
.ps-bento__lappu{
  position:absolute; left:clamp(10px,1vw,16px); bottom:clamp(10px,1vw,16px); display:grid; gap:.3em;
  background:var(--kerma); padding:.65em .9em .6em; border-radius:clamp(8px,.7vw,12px); max-width:calc(100% - 20px);
}
.ps-bento__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(18px,1.5vw,28px); line-height:1; transition:color 260ms linear; }
.ps-bento__a:hover .ps-bento__nimi{ color:var(--puna); }
.ps-bento__ala{ font-family:var(--f-mono); font-size:clamp(9px,.7vw,11px); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }

/* 5. Case (punainen) */
.ps-case{
  background:var(--puna); color:var(--kerma);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"luku luku" "sisalto kuva";
  gap:clamp(30px,5vw,90px); align-items:start;
  padding:clamp(70px,9vw,160px) max(var(--reuna), calc((100% - 1500px) / 2 + var(--reuna)));
}
.ps-case__luku{ grid-area:luku; display:flex; align-items:flex-end; gap:clamp(12px,1.5vw,24px); flex-wrap:wrap; }
.ps-case__numero{ font-family:var(--f-nimi); font-size:clamp(110px,20vw,380px); line-height:.78; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ps-case__selite{ font-family:var(--f-mono); font-size:clamp(11px,.9vw,14px); letter-spacing:.14em; text-transform:uppercase; padding-bottom:.6em; }
.ps-case__sisalto{ grid-area:sisalto; align-self:center; }   /* teksti kuvan pystykeskelle (Jenna 27.10.) */
.ps-case__ot{ margin:0 0 .6em; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; font-size:clamp(32px,3.6vw,64px); line-height:1.05; }
.ps-case__kappaleet{ font-size:clamp(15px,1.15vw,19px); line-height:1.7; max-width:58ch; }
.ps-case__kappaleet p{ margin:0 0 1em; }
.ps-case .ps-napit{ justify-content:flex-start; }
.ps-case .l-lue-lisaa{ text-decoration-color:var(--kerma); }
.ps-case__kuva{ grid-area:kuva; margin:0; }
.ps-case__kuva img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:clamp(14px,1.4vw,22px); }
.ps-case__kuva--irti{ align-self:center; }
.ps-case__kuva--irti img{ aspect-ratio:auto; object-fit:contain; border-radius:0; }
.ps-case .p-nappi--kerma.tussihover{ --tussi:var(--musta); }
.ps-case .p-nappi--kerma:hover{ background:var(--musta); color:var(--kerma); }

/* 6. Yhteydenotto */
.ps-cta{ padding:clamp(90px,11vw,190px) var(--reuna) clamp(60px,7vw,110px); text-align:center; display:grid; justify-items:center; }
.ps-cta__p{ margin:0 auto 1em; max-width:56ch; font-size:clamp(16px,1.25vw,21px); line-height:1.6; }
.ps-cta__posti{ margin:clamp(20px,2.4vw,40px) 0 0; }
.sivu-laskeutuminen main .ps-cta__posti a{
  font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(34px,5.6vw,110px); line-height:1;
  text-decoration:none; overflow-wrap:anywhere;
  background:linear-gradient(var(--puna),var(--puna)) left calc(100% - .02em) / 0 .08em no-repeat;
  transition:color 300ms linear, background-size 700ms var(--ease);
}
.sivu-laskeutuminen main .ps-cta__posti a:hover, .sivu-laskeutuminen main .ps-cta__posti a:focus-visible{ color:var(--puna); background-size:100% .08em; }
.ps-paivitetty{ margin:clamp(50px,6vw,100px) 0 0; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }

@media (max-width:860px){
  .ps-kortit__lista, .ps-kortit__lista--2, .ps-kortit__lista--4{ grid-template-columns:minmax(0,1fr); }
  .ps-kortti{ margin-top:0 !important; }
  .ps-etu{ grid-template-columns:minmax(0,1fr); gap:.5em; }
  .ps-case{ grid-template-columns:minmax(0,1fr); grid-template-areas:"luku" "kuva" "sisalto"; }
  .ps-case__kuva img{ aspect-ratio:4/3; }
  /* Puhelimella kaksi saraketta: iso ruutu koko leveys, viimeinen leveä. */
  .ps-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(130px,38vw,200px); }
  .ps-bento .ps-bento__ruutu:nth-child(n){ grid-column:auto; grid-row:auto; }
  .ps-bento .ps-bento__ruutu:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .ps-bento--6 .ps-bento__ruutu:nth-child(6), .ps-bento--5 .ps-bento__ruutu:nth-child(5){ grid-column:span 2; }
  .ps-bento__lappu{ left:8px; bottom:8px; padding:.5em .65em .45em; }
  .ps-bento__nimi{ font-size:15px; }
  .ps-bento__ala{ display:none; }   /* pienissä ruuduissa vain nimi */
}
@media (max-width:700px){
  .ps-johdanto{ text-align:left; }
  .ps-johdanto__iso{ font-size:clamp(22px,6.6vw,30px); }
  .ps-napit{ justify-content:flex-start; }
  .ps-korostus{ white-space:normal; display:inline; }
  .ps-korostus .tussi-el--alleviivaus{ display:none; }   /* rivittyvän korostuksen alle ei viivaa */
}
@media (prefers-reduced-motion:reduce){
  .ps-bento__kuva img{ transition:none; }
  .sivu-laskeutuminen main .ps-cta__posti a{ transition:none; }
}