/* ============================================================
   HAKUKONESIVUT (Jenna 27.10.2026): vanhan WordPress-sivun laskeutumissivut
   (/seo/…, /kuntamarkkinointi/, /mainostoimisto/, /palvelut/<palvelu>/)
   uudella ilmeellä. Generoidaan: tools/rakenna_laskeutumissivut.py.
   Hero (.sivu-hero) ja footer brandstein.css:stä; tausta beige (--kerma),
   case tumma (--musta). Liike: data-reveal / data-syvyys (motion.js,
   brandstein.js), ei pinnausta.
   ============================================================ */
html:has(.sivu-laskeutuminen), .sivu-laskeutuminen{ overflow-x:clip; }
.sivu-laskeutuminen{ --ease:cubic-bezier(.16,1,.3,1); --palsta:min(1500px, 100%); background:var(--kerma); color:var(--musta); }
.sivu-laskeutuminen main a:where(:not(.p-nappi):not(.l-tyo):not(.ps-pola__a)){ color:inherit; text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.2em; text-decoration-color:var(--puna); }
.sivu-laskeutuminen main a:where(:not(.p-nappi):not(.l-tyo):not(.ps-pola__a)):hover{ color:var(--puna); }

/* Oikea ylänurkka ja MENU keskellä ylhäällä kuten muilla alasivuilla. */
.p-kulma{
  position:fixed; top:var(--reuna); right:var(--reuna); z-index:70;
  display:grid; justify-items:end; gap:clamp(8px,.8vw,12px);
}
.p-kulma .leima-oikea{ position:static; font-family:var(--f-nav); letter-spacing:.01em; }
.p-menu{
  font-family:var(--f-otsikko); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(16px,1.45vw,24px); line-height:1;
  color:var(--kerma); background:var(--puna);
  padding:.7em 1.4em .65em; border-radius:999px;
  transition:background 260ms linear, color 260ms linear;
}
.p-menu:hover{ background:var(--musta); }
.p-kulma .p-menu{
  position:fixed; left:0; right:0; top:clamp(14px,1.8vw,26px);
  width:max-content; margin-inline:auto; z-index:70;
}
@media (max-width:700px){ .p-menu{ font-size:13px; padding:.65em 1.2em .6em; } }

/* Hero: otsikko punaisena kuten Ota yhteyttä -sivulla, lyhyempi kuin ruutu,
   jotta teksti alkaa heti alla. */
.l-hero{ min-height:auto; padding-top:clamp(130px,20vh,220px); padding-bottom:clamp(40px,7vw,110px); overflow-x:clip; }
.l-hero .l-hero__ot{ color:var(--puna); font-size:min(15vw, 30svh) !important; line-height:.95; position:relative; left:-.05em; }
.l-hero .sivu-hero__yla{ max-width:22ch; }
@media (max-width:700px){
  .l-hero__r{ display:block; }
  .l-hero .l-hero__ot{ line-height:.92; left:-.08em; }   /* koko: brandstein.js (data-rivit) */
}

/* ---- Tekstit ---- */
.l-johdanto, .l-osio, .l-lista, .l-lainaus, .l-tyot, .l-cta{ max-width:var(--palsta); margin-inline:auto; padding-inline:var(--reuna); }
.l-johdanto{ padding-block:0 clamp(70px,9vw,150px); }
.l-johdanto p{
  margin:0 auto; max-width:46ch; text-align:center;
  font-size:clamp(18px,1.55vw,28px); line-height:1.5;   /* pitkä johdanto: mono, ei versaalia (luettavuus) */
}
.l-johdanto p + p{ margin-top:1em; }

.l-osio{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,100px);
  padding-block:clamp(50px,6vw,100px); border-top:1px solid rgba(25,25,25,.25);
}
.l-osio--vain-teksti{ grid-template-columns:minmax(0,1fr); justify-items:center; }
.l-osio--vain-teksti .l-osio__teksti{ max-width:62ch; }
.l-osio__h2{
  margin:0; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; letter-spacing:-.005em;
  font-size:clamp(34px,4.2vw,76px); line-height:1.05;   /* ääkkösten pisteet eivät osu ylempään riviin */
  overflow-wrap:break-word; hyphens:manual;
}
.l-osio__teksti{ font-size:clamp(16px,1.2vw,20px); line-height:1.7; max-width:64ch; }
.l-osio__teksti p{ margin:0 0 1.1em; }
.l-osio__h3{
  margin:1.8em 0 .6em; font-family:var(--f-nav); font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(20px,1.7vw,30px); line-height:1.15; color:var(--puna);
}
.l-osio__h3:first-child{ margin-top:0; }
.l-allekirjoitus{ display:grid; gap:.2em; margin-top:1.6em !important; }
.l-allekirjoitus__nimi{ font-family:var(--f-eyebrow); font-size:clamp(30px,3vw,52px); line-height:1; color:var(--puna); }
.l-allekirjoitus__rooli{ font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }

/* ---- Napit (tussihover: brandstein.js liittää .p-nappiin) ---- */
.l-napit{ margin:clamp(24px,2.6vw,40px) 0 0 !important; }
.p-nappi{
  display:inline-block;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(18px,1.6vw,28px); line-height:1;
  color:var(--kerma); background:var(--musta);
  padding:.6em 1.3em .55em; border-radius:999px;
  transition:background 260ms linear, color 260ms linear, translate 420ms var(--ease);
}
.p-nappi:hover{ background:var(--puna); translate:0 -3px; }
.p-nappi--kerma{ background:var(--kerma); color:var(--musta); }
.p-nappi--kerma:hover{ background:var(--puna); color:var(--kerma); }
.p-nappi--kerma.tussihover{ --tussi:var(--puna); }
.p-nappi--kerma.tussihover:hover{ background:var(--kerma); color:var(--kerma); }

/* ---- Case (tumma) ---- */
.l-case{
  background:var(--musta); color:var(--kerma);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,100px); align-items:start;
  padding:clamp(70px,9vw,160px) max(var(--reuna), calc((100% - 1500px) / 2 + var(--reuna)));
  margin-block:clamp(40px,5vw,80px);
}
.l-case__kuva{ margin:0; position:sticky; top:clamp(90px,10vh,140px); }   /* vain desktop, ks. alla */
.l-case__kuva img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }
.l-case__ot{
  margin:0 0 .6em; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,4.2vw,76px); line-height:1.05; color:var(--kerma);
}
.l-case__luku{ margin:0 0 .9em; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.l-case__numero{ font-family:var(--f-nimi); font-size:clamp(64px,8vw,150px); line-height:.9; color:var(--puna); }
.l-case__selite{ font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.l-case__kappaleet{ font-size:clamp(16px,1.2vw,20px); line-height:1.7; max-width:64ch; }
.l-case__kappaleet p{ margin:0 0 1.1em; }
.l-lue-lisaa{
  font:inherit; font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase;
  color:inherit; background:none; border:0; padding:.4em 0; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--puna); text-underline-offset:.3em;
}

/* ---- Mitä teimme ---- */
.l-lista{ padding-block:clamp(40px,5vw,80px); text-align:center; }
.l-lista__ot{ margin:0 0 .8em; font-family:var(--f-eyebrow); font-weight:400; font-size:clamp(30px,3.8vw,68px); line-height:1; color:var(--puna); }
.l-lista__ul{ list-style:none; margin:0 auto; padding:0; max-width:1100px; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,.9vw,14px); }
.l-lista__ul li{
  font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.01em; font-size:clamp(15px,1.3vw,22px); line-height:1;
  padding:.65em 1.1em .6em; border-radius:999px; box-shadow:inset 0 0 0 2px var(--musta);
}

/* ---- Lainaus ---- */
.l-lainaus{ margin:0 auto; padding-block:clamp(60px,8vw,140px); text-align:center; display:grid; justify-items:center; gap:clamp(18px,2vw,30px); }
.l-lainaus__teksti{ margin:0; width:100%; }
.l-lainaus__teksti p{ margin:0 auto; max-width:26em; font-family:var(--f-eyebrow); font-size:clamp(30px,3.6vw,64px); line-height:1.1; color:var(--puna); }
.l-lainaus__kuka{ display:grid; gap:.35em; }
.l-lainaus__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(22px,2vw,34px); line-height:1; }
.l-lainaus__rooli{ font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }

/* ---- Työnäytteet ---- */
.l-tyot{ padding-block:clamp(50px,6vw,110px); border-top:1px solid rgba(25,25,25,.25); }
.l-tyot__ot{
  margin:0 0 clamp(28px,3.5vw,60px); text-align:center; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,6vw,120px); line-height:1.05; color:var(--puna);
}
.l-tyot__lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,36px); }
.l-tyot__lista--2{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:1100px; margin-inline:auto; }
.l-tyo{ display:grid; gap:.5em; color:inherit; text-decoration:none; }
.l-tyo__kuva{ display:block; overflow:hidden; border-radius:4px; background:var(--kerma-2); aspect-ratio:16/10; }
.l-tyo__kuva img{ display:block; width:100%; height:100%; object-fit:cover; transition:scale 900ms var(--ease); }
.l-tyo:hover .l-tyo__kuva img{ scale:1.04; }
.l-tyo__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(24px,2.2vw,40px); line-height:1; margin-top:.3em; transition:color 260ms linear; }
.l-tyo:hover .l-tyo__nimi{ color:var(--puna); }
.l-tyo__ala{ font-size:clamp(11px,.85vw,13px); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }

/* ---- Yhteydenotto ---- */
.l-cta{ padding-block:clamp(70px,9vw,160px) clamp(100px,12vw,200px); text-align:center; display:grid; justify-items:center; gap:clamp(14px,1.6vw,24px); border-top:1px solid rgba(25,25,25,.25); }
.l-cta__ot{
  margin:0 0 .3em; max-width:16ch; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,6vw,120px); line-height:1.05; color:var(--puna);
}
.l-cta p{ margin:0; }
.l-cta__teksti, .l-cta__rivi{ font-size:clamp(15px,1.15vw,19px); line-height:1.6; }
.l-cta__posti a{
  font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(30px,4.6vw,90px); line-height:1;
  text-decoration:none !important; 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);
}
.l-cta__posti a:hover, .l-cta__posti a:focus-visible{ color:var(--puna); background-size:100% .08em; }

/* ---- Kapea: kaikki allekkain, ei stickyä ---- */
@media (max-width:860px){
  .l-osio, .l-case{ grid-template-columns:minmax(0,1fr); }
  .l-case__kuva{ position:static; }
  .l-tyot__lista, .l-tyot__lista--2{ grid-template-columns:minmax(0,1fr); }
  .l-osio__h2, .l-case__ot{ font-size:clamp(30px,8.4vw,48px); }
}
@media (max-width:700px){ .l-johdanto p{ text-align:left; } }
@media (prefers-reduced-motion:reduce){
  .l-tyo__kuva img, .l-cta__posti a{ transition:none; }
}