/* Astora-Rakennus Oy — referenssikirja
   Rakennusliikkeen paras todiste ovat valmiit rakennukset, joten sivusto
   näyttää ne kuin arkkitehtuurikirja: iso typografia pienaakkosin, kuvat
   ilman tummia peitteitä, hakemistot ja luettelot hiusviivoin.
   Väri on Astoran logon punainen (#990B05), ja sitä käytetään vain
   toiminnoissa, luvuissa ja yhteydenottokaistassa. Kirjasin on sama kuin
   astora.fi:ssä, Roboto Flex (paino- ja optisen koon akselit), jotta ehdotus
   jatkaa Astoran nykyistä ilmettä eikä tuo uutta kirjasinta. */

@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/fontit/RobotoFlex-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/fontit/RobotoFlex-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --muste:#16110F;
  --muste-2:#3A322F;
  --punainen:#990B05;
  --punainen-tumma:#6E0803;
  --paperi:#FFFFFF;
  --paperi-2:#F3F1EE;
  --viiva:#16110F;
  --viiva-ohut:#DCD6D1;
  --muted:#6B625E;
  --muted-tumma:#B3A9A4;

  --leveys:1320px;
  --reuna:clamp(18px,4vw,48px);
  --rytmi:clamp(44px,5vw,80px);
  --vali:clamp(20px,2.6vw,40px);

  --h1:clamp(2.1rem,1rem + 2.6vw,3.9rem);
  --h2:clamp(1.6rem,1.1rem + 1.4vw,2.6rem);
  --h3:clamp(1.18rem,1rem + .55vw,1.5rem);

  --ulos:cubic-bezier(.2,.8,.2,1);
  --nuoli:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");

  /* alkuperäisen pohjan inline-tyylit viittaavat näihin */
  --ink:var(--muste);
  --accent:var(--punainen);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paperi);color:var(--muste);
  font-family:"Roboto Flex",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em}
.sisus{width:100%;max-width:var(--leveys);margin-inline:auto;padding-inline:var(--reuna)}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--h1);line-height:.98;font-weight:780;letter-spacing:-.025em}
h2{font-size:var(--h2);line-height:1.02}
h3{font-size:var(--h3);line-height:1.2;letter-spacing:-.008em}
p{margin:0 0 1em;max-width:66ch}
.ingressi{font-size:clamp(1.05rem,1rem + .25vw,1.22rem);line-height:1.42;max-width:44ch;color:var(--muste-2)}
.mono{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--punainen);outline-offset:3px}

/* nuoli piirretään maskilla, koska kirjasimessa ei ole →-merkkiä */
.nuoli-ikoni,.kortti .maara::after,a.kohde .nimi::after,.nappi.reuna::after,.uutinen h3::after{
  content:"";display:inline-block;width:1em;height:.62em;background:currentColor;
  -webkit-mask:var(--nuoli) no-repeat center/contain;mask:var(--nuoli) no-repeat center/contain;
  transition:transform 300ms var(--ulos)}

/* pieni otsikko: reunahuomautus, ei huutava yläotsikko */
.lippu{font-size:.78rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muste);margin:0 0 1em}

/* ------------------------------------------------ ehdotusmerkintä */
.ehdotus{background:var(--muste);color:#E9E4E1;font-size:.8rem;line-height:1.45}
.ehdotus .sisus{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding-block:8px}
.ehdotus span:first-child{background:var(--punainen);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.04em;padding:.15em .5em}

/* ------------------------------------------------ navigaatio */
.navi{position:sticky;top:0;z-index:40;background:#fff;color:var(--muste);
  border-bottom:1px solid var(--viiva)}
.navi .sisus{display:flex;align-items:center;gap:18px;min-height:72px}
.merkki{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.merkki img{height:46px;width:auto}
.navi nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.navi nav a{font-size:.95rem;font-weight:500;text-decoration:none;color:var(--muste);padding:8px 10px}
.navi nav a:hover,.navi nav a:focus-visible{color:var(--punainen)}
.navi nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--punainen);
  text-decoration-thickness:2px;text-underline-offset:.45em}
.navi .tarjous{font-size:.92rem;font-weight:650;text-decoration:none;color:#fff;background:var(--punainen);
  padding:12px 18px;white-space:nowrap;transition:background-color 150ms}
.navi .tarjous:hover{background:var(--punainen-tumma)}
.valikko-nappi{display:none}

.alasveto{position:relative;display:flex;align-items:center}
.alasveto > a{padding-right:2px}
.nuoli{appearance:none;background:none;border:0;cursor:pointer;padding:0;color:var(--muste);line-height:1;
  min-width:26px;min-height:26px;display:inline-flex;align-items:center;justify-content:center}
.nuoli::after{content:"";display:block;width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.alasveto.auki .nuoli::after{transform:rotate(-135deg) translateY(-2px)}
.nuoli:hover,.alasveto.auki .nuoli{color:var(--punainen)}
.alasveto > ul{position:absolute;top:calc(100% + 12px);left:0;z-index:50;min-width:260px;margin:0;padding:8px 0;
  list-style:none;background:#fff;border:1px solid var(--viiva);box-shadow:0 18px 40px -20px rgba(22,17,15,.45)}
.alasveto > ul a{display:block;padding:9px 18px;font-size:.95rem}
.alasveto > ul a:hover,.alasveto > ul a:focus-visible{background:var(--paperi-2);color:var(--punainen)}
.alasveto > ul li:first-child a{border-bottom:1px solid var(--viiva-ohut);margin-bottom:6px;padding-bottom:11px}

/* ------------------------------------------------ osiot */
.osio{padding-block:var(--rytmi)}
.osio.tiivis{padding-block:calc(var(--rytmi) * .6)}
.vaalea-2{background:var(--paperi-2)}
.tumma{background:var(--muste);color:#F1EDEA}
.tumma p{color:#CFC6C2}

/* osion otsikko: pieni otsikko vasempaan sarakkeeseen, iso otsikko oikealle */
.osio-otsikko{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--vali);
  border-top:1px solid var(--viiva);padding-top:16px;margin-bottom:clamp(24px,2.8vw,40px)}
.osio-otsikko > *{grid-column:2}
.osio-otsikko > .lippu{grid-column:1;grid-row:1 / span 3;margin:0;padding-top:.35em}
.osio-otsikko h1,.osio-otsikko h2{max-width:18ch}
.osio-otsikko p:not(.lippu){margin:1em 0 0}

/* ------------------------------------------------ hero: otsikko, kuva, faktat */
.hero{max-width:var(--leveys);margin-inline:auto;padding:clamp(40px,6vw,96px) var(--reuna) 0;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--vali);align-items:start}
.hero > .sisus{display:contents}
.hero .lippu{grid-column:1 / -1;color:var(--muted)}
.hero h1{grid-column:1 / -1;max-width:15ch;margin-bottom:clamp(28px,4vw,56px);animation:nousu 900ms var(--ulos) both}
.hero .ingressi{grid-column:1 / 5;margin:0 0 1.4em;font-size:clamp(1.08rem,1rem + .35vw,1.28rem)}
.hero .napit{grid-column:1 / 5}
.hero .luvut{grid-column:1 / 5}
.hero-kuva{grid-column:5 / -1;grid-row:3 / span 4;overflow:hidden;background:var(--paperi-2);aspect-ratio:16/10;
  animation:avaus 1100ms var(--ulos) 150ms both}
.hero-kuva img{width:100%;height:100%;object-fit:cover}
.hero.ilman-kuvaa{padding-bottom:clamp(36px,4.6vw,64px);
  background:linear-gradient(var(--viiva),var(--viiva)) center bottom / calc(100% - 2 * var(--reuna)) 1px no-repeat}
.hero.ilman-kuvaa .ingressi,.hero.ilman-kuvaa .napit{grid-column:1 / 8}
.hero.ilman-kuvaa .luvut{grid-column:9 / -1;grid-row:3 / span 3;margin-top:0}
@keyframes nousu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes avaus{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

.luvut{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--viiva)}
.luku{padding:14px 0 15px;border-bottom:1px solid var(--viiva-ohut)}
.luku b{display:block;font-size:clamp(1.6rem,1rem + 1.4vw,2.4rem);font-weight:780;letter-spacing:-.02em;line-height:1;
  color:var(--punainen);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.luku span{display:block;margin-top:6px;font-size:.88rem;line-height:1.35;color:var(--muted)}

/* ------------------------------------------------ napit */
.napit{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,40px)}
.hero .napit{margin-top:0}
.nappi{display:inline-flex;align-items:center;gap:.7em;font-size:.95rem;font-weight:650;line-height:1.2;
  text-decoration:none;padding:.95em 1.35em;border:1.5px solid transparent;
  transition:background-color 150ms,color 150ms,border-color 150ms}
.nappi.paa{background:var(--punainen);color:#fff}
.nappi.paa:hover,.nappi.paa:focus-visible{background:var(--punainen-tumma)}
.nappi.reuna{border-color:var(--muste);color:var(--muste)}
.nappi.reuna:hover,.nappi.reuna:focus-visible{background:var(--muste);color:#fff}
.nappi.reuna:hover::after{transform:translateX(4px)}

/* ------------------------------------------------ etusivu: segmenttihakemisto */
.ruudukko.hakemisto{display:block;border-top:2px solid var(--viiva)}
.hakemisto .kortti{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,2fr) minmax(0,190px);
  column-gap:var(--vali);align-items:center;padding:16px 0;border-top:0;border-bottom:1px solid var(--viiva);
  text-decoration:none;color:inherit;transition:background-color 200ms}
.hakemisto .kortti .teksti{display:contents}
.hakemisto .kortti h3{grid-column:1;grid-row:1;margin:0;font-size:clamp(1.3rem,1rem + .7vw,1.8rem);letter-spacing:-.02em;
  transition:color 200ms}
.hakemisto .kortti p{grid-column:2;grid-row:1;margin:0;font-size:.98rem;color:var(--muted)}
.hakemisto .kortti .maara{grid-column:3;grid-row:1;display:flex;align-items:center;gap:.6em;justify-self:end;
  margin:0;padding:0;font-weight:700;color:var(--punainen);font-variant-numeric:tabular-nums;white-space:nowrap}
.hakemisto .kortti .kuva{grid-column:4;grid-row:1;order:0;margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--paperi-2)}
.hakemisto .kortti .kuva img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ulos)}
.hakemisto .kortti:hover{background:var(--paperi-2)}
.hakemisto .kortti:hover h3{color:var(--punainen)}
.hakemisto .kortti:hover .kuva img{transform:scale(1.06)}
.hakemisto .kortti:hover .maara::after{transform:translateX(5px)}
.hakemisto + .napit{margin-top:28px}

/* ------------------------------------------------ muut kortit (palvelut, arvot) */
.ruudukko{display:grid;gap:clamp(28px,3.4vw,48px) var(--vali)}
.ruudukko.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ruudukko.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kortti{display:flex;flex-direction:column;background:none;border:0;border-top:2px solid var(--viiva);
  padding-top:16px;text-decoration:none;color:inherit}
.kortti .kuva{order:-1;overflow:hidden;aspect-ratio:4/3;background:var(--paperi-2);margin:-16px 0 18px}
.kortti .kuva img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ulos)}
a.kortti:hover .kuva img{transform:scale(1.04)}
a.kortti:hover h3{color:var(--punainen)}
.kortti .teksti{display:flex;flex-direction:column;flex:1}
.kortti h3{margin-bottom:.45em}
.kortti p{font-size:.98rem;color:var(--muted);margin:0}
.kortti .maara{display:flex;align-items:center;gap:.6em;margin-top:auto;padding-top:14px;font-weight:700;color:var(--punainen)}

/* ------------------------------------------------ suositukset */
.sitaatit{grid-template-columns:repeat(3,minmax(0,1fr))}
.sitaatti{margin:0;display:flex;flex-direction:column;border-top:3px solid var(--punainen);padding-top:20px}
.sitaatti blockquote{margin:0;font-size:clamp(1.05rem,1rem + .3vw,1.22rem);line-height:1.5;font-weight:430}
.sitaatti figcaption{margin-top:auto;padding-top:22px;font-size:.9rem}
.sitaatti figcaption b{display:block;font-weight:700}
.sitaatti figcaption span{color:var(--muted)}

/* ------------------------------------------------ kuva + teksti */
.pari{display:grid;grid-template-columns:1fr 1fr;gap:var(--vali);align-items:center}
.pari.kapea-kuva{grid-template-columns:5fr 7fr}
.pari.kapea-kuva.kuva-oikealla{grid-template-columns:7fr 5fr}
.pari .osio-otsikko{grid-template-columns:minmax(0,1fr);margin-bottom:28px}
.pari .osio-otsikko > *{grid-column:1}
.pari .osio-otsikko > .lippu{grid-row:auto;margin-bottom:1em}
.pari .napit,.pari .merkit{margin-top:24px}
.pari .kuva{overflow:hidden}
.pari .kuva img{width:100%}

/* ------------------------------------------------ kaista: kuva ja lause kuvan alla */
.kaista{max-width:var(--leveys);margin-inline:auto;padding:var(--rytmi) var(--reuna) 0;display:grid}
.kaista img{width:100%;aspect-ratio:21/9;object-fit:cover}
.kaista .paalle .sisus{padding:24px 0 0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--vali)}
.kaista .lippu{margin:0;padding-top:.5em;color:var(--muted)}
.kaista h2{max-width:22ch}

/* ------------------------------------------------ luettelot */
.merkit{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--viiva)}
.merkit li{padding:12px 0 12px 32px;position:relative;border-bottom:1px solid var(--viiva-ohut)}
.merkit li::before{content:"";position:absolute;left:0;top:1.35em;width:16px;height:2px;background:var(--punainen)}
.osio-otsikko + .merkit,.osio-otsikko + p,.osio-otsikko ~ p,.osio-otsikko ~ .merkit,
.osio-otsikko ~ .toimipisteet,.osio-otsikko ~ .tyopaikka,.osio-otsikko ~ p + .napit,.osio-otsikko ~ .merkit + .napit,
.osio-otsikko ~ .tiedot,
.osio-otsikko ~ .caption{margin-left:calc((100% - var(--vali)) * 3 / 12 + var(--vali))}
.pari .osio-otsikko ~ p,.pari .osio-otsikko ~ .merkit,.pari .osio-otsikko ~ .napit{margin-left:0}

/* ------------------------------------------------ kohdeluettelo */
.ryhma{margin-top:clamp(36px,4vw,60px)}
.ryhma:first-child{margin-top:0}
.ryhma > h3{font-size:clamp(1.3rem,1rem + .9vw,1.8rem);padding-bottom:12px;border-bottom:2px solid var(--viiva)}
.ryhma > h3 .maara{color:var(--punainen)}
.kohde{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,10em);
  gap:4px var(--vali);align-items:baseline;padding:13px 0;border-bottom:1px solid var(--viiva-ohut)}
.kohde .nimi{font-weight:650;font-size:1.04rem;display:inline-flex;align-items:center;gap:.5em}
.kohde .paikka,.kohde .tyyppi{font-size:.94rem;color:var(--muted)}
.kohde .meta{font-size:.94rem;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.kohde .meta b{color:var(--punainen);font-weight:650}
a.kohde{text-decoration:none;color:inherit;transition:background-color 150ms}
a.kohde:hover,a.kohde:focus-visible{background:var(--paperi-2)}
a.kohde:hover .nimi{color:var(--punainen)}
a.kohde .nimi::after{opacity:0;transform:translateX(-4px)}
a.kohde:hover .nimi::after{opacity:1;transform:none}
.vaalea-2 a.kohde:hover{background:#fff}

/* suodatin */
.suodatin{display:grid;gap:14px var(--vali);align-items:end;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) auto;
  padding:0 0 22px;margin-bottom:10px;border-bottom:1px solid var(--viiva)}
.suodatin label{display:flex;flex-direction:column;gap:6px}
.suodatin span{font-size:.8rem;font-weight:600;color:var(--muted)}
.suodatin input,.suodatin select{width:100%;min-width:0;font:inherit;font-size:1rem;padding:10px 2px;
  border:0;border-bottom:2px solid var(--viiva);background:transparent;color:var(--muste);border-radius:0}
.suodatin input:focus,.suodatin select:focus{outline:0;border-bottom-color:var(--punainen)}
.tyhjenna{font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;padding:11px 18px;border:1.5px solid var(--muste);
  background:transparent;color:var(--muste)}
.tyhjenna:hover{background:var(--muste);color:#fff}
.tulos{grid-column:1 / -1;margin:0;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* kohteen tiedot */
.tiedot{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));column-gap:var(--vali);
  border-top:2px solid var(--viiva);margin:0}
.tiedot > div{padding:14px 0 16px;border-bottom:1px solid var(--viiva-ohut)}
.tiedot dt{font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:4px}
.tiedot dd{margin:0;font-size:1.2rem;font-weight:620}
.caption{font-size:.93rem;color:var(--muted)}

/* ------------------------------------------------ työmaat */
.tyomaa{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--vali);
  padding:24px 0 28px;border-top:1px solid var(--viiva);margin:0;background:none}
.tyomaa:last-of-type{border-bottom:1px solid var(--viiva)}
.tyomaa > header{display:flex;flex-direction:column;gap:4px;padding:0;background:none;border:0}
.tyomaa .tunnus{order:-1;font-size:.9rem;font-weight:700;color:var(--punainen);font-variant-numeric:tabular-nums}
.tyomaa h3{font-size:clamp(1.3rem,1rem + .9vw,1.8rem)}
.tyomaa .aikataulu{font-size:.9rem;color:var(--muted);margin:0}
.tyomaa .aikataulu::first-letter{text-transform:uppercase}
.tyomaa .runko{padding:0}
.tyomaa .osoite{font-size:.98rem;color:var(--muste-2);margin:0 0 14px;padding-top:.3em}
.henkilot{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px var(--vali);margin:0;padding:0;list-style:none}
.henkilot li{font-size:.94rem;line-height:1.5}
.henkilot b{display:block;font-weight:700;font-size:1rem}
.henkilot a{color:var(--punainen);text-decoration:none}
.henkilot a:hover{text-decoration:underline}
.henkilot .mono{color:var(--muted)}
.ryhma > .henkilot{padding-top:6px}

/* ------------------------------------------------ uutiset */
.uutislista{display:grid;border-top:2px solid var(--viiva)}
.uutinen{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--vali);
  padding:24px 0 26px;border-bottom:1px solid var(--viiva-ohut);text-decoration:none;color:inherit}
.uutinen time{font-size:.9rem;color:var(--muted);white-space:nowrap;padding-top:.3em;grid-row:1 / span 2;
  font-variant-numeric:tabular-nums}
.uutinen h3{grid-column:2;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);transition:color 150ms}
.uutinen h3::after{margin-left:.4em;opacity:0;transform:translateX(-4px)}
.uutinen p{grid-column:2;font-size:.98rem;color:var(--muted);margin:8px 0 0}
.uutinen:hover h3{color:var(--punainen)}
.uutinen:hover h3::after{opacity:1;transform:none}
.artikkeli{max-width:66ch}
.artikkeli p{font-size:clamp(1.05rem,1rem + .25vw,1.2rem);line-height:1.65}
.s-uutinen .osio > .sisus > .lippu{color:var(--muted);font-weight:500}
.s-uutinen .osio > .sisus > .lippu a{text-decoration-color:var(--viiva-ohut)}
.s-uutinen h1{font-size:clamp(2.1rem,1rem + 3.6vw,4.6rem);line-height:1.02}

/* ------------------------------------------------ yhteystiedot ja työpaikat */
.toimipisteet{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--vali)}
.toimipiste{border-top:2px solid var(--viiva);padding-top:16px}
.toimipiste h3{font-size:clamp(1.3rem,1rem + .8vw,1.8rem);margin-bottom:4px}
.toimipiste .rooli{font-size:.9rem;font-weight:600;color:var(--punainen);margin:0 0 12px}
.toimipiste p{margin:0 0 6px}
.toimipiste a{color:var(--muste);font-weight:650;font-variant-numeric:tabular-nums}

.tyopaikka{border-top:1px solid var(--viiva);padding:22px 0 24px;margin:0}
.tyopaikka:last-of-type{border-bottom:1px solid var(--viiva)}
.tyopaikka header{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:10px}
.tyopaikka h3{font-size:clamp(1.3rem,1rem + .9vw,1.8rem)}
.tyopaikka .alue{font-size:.92rem;color:var(--muted)}
.tyopaikka .tyyppi{font-size:.82rem;font-weight:650;color:var(--punainen);border:1.5px solid var(--punainen);padding:2px 10px;margin-left:auto}
.tyopaikka p{margin:0}

/* ------------------------------------------------ punainen yhteydenottokaista */
.punainen{background:var(--punainen);color:#fff}
.punainen .osio-otsikko{border-top-color:rgba(255,255,255,.5);grid-template-columns:minmax(0,1fr)}
.punainen .osio-otsikko > *{grid-column:1}
.punainen h2{font-size:clamp(1.9rem,1rem + 2.2vw,3.4rem);max-width:16ch;letter-spacing:-.028em}
.punainen p,.punainen .ingressi{color:#F9E4E2;max-width:48ch}
.punainen .osio-otsikko ~ .napit{margin-left:0}
.punainen .nappi.paa{background:#fff;color:var(--punainen)}
.punainen .nappi.paa:hover{background:var(--muste);color:#fff}
.punainen .nappi.reuna{border-color:#fff;color:#fff}
.punainen .nappi.reuna:hover{background:#fff;color:var(--punainen)}
.punainen :focus-visible{outline-color:#fff}
.punainen a:not(.nappi){color:#fff}

/* ------------------------------------------------ alatunniste */
.alatunniste{background:var(--muste);color:var(--muted-tumma);padding-block:clamp(48px,6vw,88px) 32px;font-size:.95rem}
.alatunniste a{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.alatunniste a:hover{text-decoration-color:#fff}
.alatunniste .ylapuoli{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:var(--vali);
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.18)}
.alatunniste .alaotsikko{font-size:.86rem;font-weight:600;color:var(--muted-tumma);margin:0 0 14px;letter-spacing:0}
.alatunniste ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alatunniste ul a{text-decoration:none}
.alatunniste ul a:hover{text-decoration:underline}
.alatunniste .alapuoli{padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.86rem}
.alatunniste img{height:52px;width:auto;margin-bottom:20px}

.ohita{position:absolute;left:-9999px}
.ohita:focus{left:var(--reuna);top:8px;z-index:60;background:var(--punainen);color:#fff;padding:10px 16px}

/* ------------------------------------------------ etusivun halli (3D) */
.s-etusivu .hero{padding-top:clamp(28px,3.6vw,56px)}
.s-etusivu .hero h1{max-width:22ch;margin-bottom:clamp(22px,2.6vw,40px)}
.hero-halli{position:relative;animation:none;aspect-ratio:16/9;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,#fff 0%,#fff 45%,var(--paperi-2) 100%)}
.hero-halli > img{transition:opacity 400ms}
.js .hero-halli:not(.ei-3d) > img{opacity:0}
.halli,.halli-aikajana{display:none}
.js .hero-halli:not(.ei-3d) .halli{display:block;position:absolute;inset:0}
.js .hero-halli:not(.ei-3d) .halli-aikajana{display:block}
.halli-kangas{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.halli-kangas:active{cursor:grabbing}
.halli-kangas canvas{display:block;width:100%;height:100%}
.halli-aikajana{position:absolute;left:18px;right:18px;bottom:14px;pointer-events:none}
.halli-edistys{height:2px;background:var(--viiva-ohut);overflow:hidden}
.halli-edistys i{display:block;height:100%;background:var(--punainen);transform:scaleX(0);transform-origin:left}
.halli-vaiheet{list-style:none;margin:8px 0 0;padding:0;display:flex;justify-content:space-between;gap:8px;
  font-size:.74rem;font-weight:600;color:var(--muted-tumma);letter-spacing:.02em}
.halli-vaiheet li{transition:color 250ms}
.halli-vaiheet li.tehty{color:var(--muste)}
.halli-vaiheet li.nyt{color:var(--punainen)}
.halli-vaiheet li:last-child.tehty{color:var(--punainen)}
.halli-uudelleen{position:absolute;top:14px;right:14px;font:inherit;font-size:.82rem;font-weight:650;cursor:pointer;
  padding:7px 12px;background:rgba(255,255,255,.92);color:var(--muste);border:1.5px solid var(--muste)}
.halli-uudelleen:hover{background:var(--muste);color:#fff}

/* ------------------------------------------------ 3D-kartta (etusivu) */
.kartta{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:var(--vali);align-items:start}
.kartta-alue{position:relative;aspect-ratio:16/10;border-top:2px solid var(--viiva);
  background:radial-gradient(ellipse 70% 60% at 45% 55%,#fff 0%,#fff 55%,var(--paperi-2) 100%)}
.kartta-alue[hidden] + .kartta-sivu{grid-column:1 / -1}
.kartta-kangas{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.kartta-kangas:active{cursor:grabbing}
.kartta-kangas canvas{display:block;width:100%;height:100%}
.kartta-nimet{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kartta-nimi{position:absolute;left:0;top:0;white-space:nowrap;font-size:.76rem;font-weight:600;line-height:20px;
  padding:0 6px;background:rgba(255,255,255,.9);color:var(--muste);opacity:0;transition:opacity 250ms;will-change:transform}
.kartta-nimi b{margin-left:.4em;color:var(--punainen);font-weight:750;font-variant-numeric:tabular-nums}
.kartta-nimi.toimipiste{font-weight:750;box-shadow:inset 0 -2px 0 var(--punainen)}
.kartta-vihje{position:absolute;left:0;top:0;z-index:3;max-width:270px;background:var(--muste);color:#fff;
  padding:10px 13px 11px;font-size:.86rem;line-height:1.4;pointer-events:none}
.kartta-vihje b{display:block;font-size:1.05rem;font-weight:750}
.kartta-vihje > span{color:var(--muted-tumma)}
.kartta-vihje ul{list-style:none;margin:.5em 0 0;padding:.5em 0 0;border-top:1px solid rgba(255,255,255,.2);font-size:.8rem}
.kartta-vihje li + li{margin-top:.35em}
.kartta-vihje li span{display:block;color:var(--muted-tumma)}
.kartta-vihje em{display:block;margin-top:.5em;font-style:normal;font-weight:650;color:#F4B9B5}
.kartta-selite{position:absolute;left:0;bottom:0;margin:0;padding:10px 0;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:.8rem;color:var(--muted);pointer-events:none}
.kartta-selite span{display:inline-flex;align-items:center;gap:7px}
.s-pylvas{display:inline-block;width:7px;height:15px;background:var(--punainen)}
.s-rengas{display:inline-block;width:11px;height:11px;border:2px solid var(--muste);border-radius:50%}
.kartta-sivu{border-top:2px solid var(--viiva);padding-top:14px}
.kartta-sivu h3{font-size:.78rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.kartta-lista{list-style:none;margin:10px 0 0;padding:0}
.kartta-lista a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--viiva-ohut);
  text-decoration:none}
.kartta-lista b{color:var(--punainen);font-weight:750;font-variant-numeric:tabular-nums}
.kartta-lista a:hover span{color:var(--punainen)}
.kartta-lista li:last-child span{color:var(--muted)}

/* ------------------------------------------------ etusivu 2: iso kuva, lukunauha, kuvakortit
   Etusivu avautuu valmiilla rakennuksella koko leveydeltä. Kuvan päällä on vain
   alareunan varjostus, jotta teksti erottuu ja rakennus näkyy. */
.suurhero{position:relative;min-height:max(380px,calc(100svh - 260px));display:flex;align-items:flex-end;color:#fff;
  background:var(--muste);overflow:hidden;isolation:isolate}
.suurhero-kuva{position:absolute;inset:0;z-index:-1}
.suurhero-kuva img{width:100%;height:100%;object-fit:cover;animation:veto 1600ms var(--ulos) both}
.suurhero-kuva::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,17,15,.05) 0%,rgba(22,17,15,.18) 38%,rgba(22,17,15,.82) 100%),
             linear-gradient(90deg,rgba(22,17,15,.55) 0%,rgba(22,17,15,0) 62%)}
.suurhero .sisus{padding-block:clamp(72px,10vh,140px) clamp(40px,5vh,64px)}
.suurhero .lippu{color:rgba(255,255,255,.82)}
.suurhero h1{max-width:16ch;color:#fff;font-size:clamp(2.2rem,1rem + 3vw,4.4rem);animation:nousu 900ms var(--ulos) both}
.suurhero .ingressi{color:rgba(255,255,255,.9);max-width:46ch;margin:clamp(20px,2.4vw,32px) 0 0}
.suurhero .napit{margin-top:clamp(24px,3vw,36px)}
.suurhero .nappi.reuna{border-color:#fff;color:#fff}
.suurhero .nappi.reuna:hover,.suurhero .nappi.reuna:focus-visible{background:#fff;color:var(--muste)}
.suurhero :focus-visible{outline-color:#fff}
.suurhero-kuvateksti{position:absolute;right:var(--reuna);bottom:18px;font-size:.78rem;color:rgba(255,255,255,.75);
  text-decoration:none;max-width:70ch;text-align:right}
.suurhero-kuvateksti:hover{color:#fff;text-decoration:underline}
@keyframes veto{from{transform:scale(1.06)}to{transform:none}}

.lukunauha{background:var(--muste);color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.lukunauha .luvut{margin:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lukunauha .luku{padding:clamp(16px,1.6vw,22px) var(--vali) clamp(16px,1.6vw,22px) 0;border:0;
  border-right:1px solid rgba(255,255,255,.14)}
.lukunauha .luku + .luku{padding-left:var(--vali)}
.lukunauha .luku:last-child{border-right:0}
.lukunauha .luku b{color:#fff;font-size:clamp(1.8rem,1rem + 1.6vw,2.8rem)}
.lukunauha .luku span{color:var(--muted-tumma);font-size:.9rem;margin-top:4px}

.segmentit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) var(--vali)}
.segkortti{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.segkortti .kuva{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paperi-2)}
.segkortti .kuva img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ulos)}
.segkortti .paalla{position:absolute;inset:auto 0 0 0;padding:56px 20px 18px;display:flex;flex-direction:column;
  align-items:flex-start;gap:4px;color:#fff;background:linear-gradient(180deg,rgba(22,17,15,0),rgba(22,17,15,.78))}
.segkortti h3{font-size:clamp(1.2rem,1rem + .5vw,1.5rem);letter-spacing:-.02em}
.segkortti .maara{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:700;white-space:nowrap}
.segkortti .maara::after{content:"";width:1em;height:.62em;background:currentColor;
  -webkit-mask:var(--nuoli) no-repeat center/contain;mask:var(--nuoli) no-repeat center/contain;transition:transform 300ms var(--ulos)}
.segkortti p{margin:14px 0 0;font-size:.97rem;color:var(--muted)}
.segkortti:hover .kuva img,.segkortti:focus-visible .kuva img{transform:scale(1.05)}
.segkortti:hover .maara::after{transform:translateX(5px)}
.segkortti:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

.nostot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.6vw,36px) var(--vali)}
.nosto{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.nosto .kuva{overflow:hidden;aspect-ratio:4/3;background:#fff}
.nosto .kuva img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ulos)}
.nosto.iso{grid-column:span 2;grid-row:span 2}
.nosto.iso .kuva{aspect-ratio:auto;flex:1;min-height:320px}
.nosto-meta{margin:14px 0 6px;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.nosto h3{transition:color 150ms}
.nosto.iso h3{font-size:clamp(1.35rem,1rem + .8vw,1.85rem);letter-spacing:-.02em}
.nosto > p:last-child:not(.nosto-meta){margin:10px 0 0;color:var(--muste-2);max-width:56ch}
.nosto:hover .kuva img{transform:scale(1.04)}
.nosto:hover h3{color:var(--punainen)}

.pari.prosessi{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.prosessi-halli{aspect-ratio:16/10;border-top:2px solid var(--viiva)}
.prosessi-halli > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.tumma .osio-otsikko{border-top-color:rgba(255,255,255,.3)}
.tumma .lippu{color:var(--muted-tumma)}
.tumma .ingressi{color:#D9D1CD}
.tumma .nappi.reuna{border-color:#fff;color:#fff}
.tumma .nappi.reuna:hover,.tumma .nappi.reuna:focus-visible{background:#fff;color:var(--muste)}
.tumma :focus-visible{outline-color:#fff}
.tyomaakortit{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.tk{background:var(--muste);padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;margin:0}
.tk-yla{margin:0;display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--muted-tumma)}
.tk-yla .tunnus{color:#F4B9B5;font-weight:700;font-variant-numeric:tabular-nums}
.tk h3{color:#fff;font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
.tk .aikataulu{margin:0;font-size:.9rem;color:var(--muted-tumma)}
.tk .aikataulu::first-letter{text-transform:uppercase}
.yhteys-h{margin:auto 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:.9rem;line-height:1.45;color:#E9E4E1}
.yhteys-h span{display:block;font-size:.78rem;color:var(--muted-tumma)}
.yhteys-h b{display:block;font-weight:650;color:#fff}
.yhteys-h a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.tk .yhteys-h{margin-top:auto}
.tk > p.aikataulu + .yhteys-h,.tk > h3 + .yhteys-h{margin-top:14px}

.s-etusivu .sitaatti{border-top:0;padding-top:0}
.s-etusivu .sitaatti::before{content:"\201D";display:block;font-size:5.4rem;line-height:.8;height:.5em;font-weight:800;color:var(--punainen)}
.s-etusivu .sitaatti blockquote{font-size:clamp(1.12rem,1rem + .45vw,1.36rem);line-height:1.45;font-weight:460;letter-spacing:-.005em}
.s-etusivu .sitaatti figcaption{border-top:1px solid var(--viiva);margin-top:auto;padding-top:14px}
.s-etusivu .sitaatti blockquote{margin-bottom:24px}

/* alasivujen kuvallinen hero samaan ilmeeseen: kuva koko leveydelle, teksti ja luvut kuvan päällä */
.hero:has(> .hero-kuva){max-width:none;position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--muste);
  min-height:min(78vh,780px);align-content:end;
  padding:clamp(120px,20vh,240px) max(var(--reuna),calc((100% - var(--leveys)) / 2 + var(--reuna))) clamp(36px,5vh,60px)}
.hero:has(> .hero-kuva) > .hero-kuva{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;grid-column:auto;grid-row:auto;
  margin:0;background:var(--muste);animation:none}
.hero:has(> .hero-kuva) > .hero-kuva img{animation:veto 1600ms var(--ulos) both}
.hero:has(> .hero-kuva) > .hero-kuva::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,17,15,.08) 0%,rgba(22,17,15,.25) 40%,rgba(22,17,15,.86) 100%),
             linear-gradient(90deg,rgba(22,17,15,.5) 0%,rgba(22,17,15,0) 65%)}
.hero:has(> .hero-kuva) .lippu{color:rgba(255,255,255,.82)}
.hero:has(> .hero-kuva) h1{color:#fff;max-width:17ch;margin-bottom:clamp(18px,2vw,28px)}
.hero:has(> .hero-kuva) .ingressi{grid-column:1 / 8;color:rgba(255,255,255,.9);max-width:50ch}
.hero:has(> .hero-kuva) .napit{grid-column:1 / 8}
.hero:has(> .hero-kuva) .nappi.reuna{border-color:#fff;color:#fff}
.hero:has(> .hero-kuva) .nappi.reuna:hover,.hero:has(> .hero-kuva) .nappi.reuna:focus-visible{background:#fff;color:var(--muste)}
.hero:has(> .hero-kuva) :focus-visible{outline-color:#fff}
.hero:has(> .hero-kuva) .luvut{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:clamp(28px,4vh,48px);border-top:1px solid rgba(255,255,255,.3)}
.hero:has(> .hero-kuva) .luku{border:0;padding:14px var(--vali) 0 0}
.hero:has(> .hero-kuva) .luku b{color:#fff}
.hero:has(> .hero-kuva) .luku span{color:rgba(255,255,255,.72)}

/* alasivujen kuvallinen hero matalammaksi, jotta otsikko ei valu kauas navigaatiosta */
.hero:has(> .hero-kuva){min-height:min(60vh,600px);padding-top:clamp(64px,9vh,120px)}

/* yritys: lupaukset isoina lauseina, arvot numeroituina tummalla */
.lupaukset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) var(--vali)}
.lupaus{border-top:2px solid var(--viiva);padding-top:16px}
.lupaus .lippu{color:var(--punainen)}
.lupaus p:not(.lippu){margin:0;font-size:clamp(1.2rem,1rem + .6vw,1.6rem);font-weight:600;line-height:1.28;letter-spacing:-.015em;
  max-width:30ch}
.arvot{list-style:none;margin:0;padding:0;counter-reset:arvo;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--vali)}
.arvot li{counter-increment:arvo;border-top:1px solid rgba(255,255,255,.3);padding-top:18px}
.arvot li::before{content:"0" counter(arvo);display:block;font-size:clamp(2rem,1rem + 1.6vw,2.8rem);font-weight:800;
  line-height:1;letter-spacing:-.03em;color:var(--punainen);margin-bottom:18px;font-variant-numeric:tabular-nums}
.arvot h3{color:#fff;margin-bottom:.5em}
.arvot p{margin:0;font-size:.97rem;color:#CFC6C2}

/* uutisartikkeli: tumma otsikko, kapea tekstipalsta, sivulla muut uutiset */
.uutis-yla{background:var(--muste);color:#fff;padding-block:clamp(48px,6vw,96px) clamp(40px,5vw,72px)}
.uutis-yla .lippu{color:var(--muted-tumma)}
.uutis-yla .lippu a{color:inherit;text-decoration-color:rgba(255,255,255,.35)}
.uutis-yla .lippu a:hover{color:#fff}
.uutis-yla h1{color:#fff;font-size:clamp(1.9rem,1rem + 2.2vw,3.2rem);line-height:1.05;max-width:24ch}
.uutis-yla :focus-visible{outline-color:#fff}
.uutis-runko .sisus{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:start}
.uutis-runko .artikkeli{max-width:68ch}
.uutis-runko .artikkeli p{font-size:clamp(1.05rem,1rem + .2vw,1.16rem);line-height:1.72;color:var(--muste-2);margin-bottom:1.15em}
.uutis-runko .artikkeli p.johdanto{font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.45;color:var(--muste);font-weight:450;
  margin-bottom:1.3em}
.uutis-runko .artikkeli p.lainaus{border-left:3px solid var(--punainen);padding:4px 0 4px 22px;margin:1.6em 0;
  font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.55;color:var(--muste);font-weight:500}
.uutis-runko .artikkeli .napit{margin-top:40px}
.uutis-sivu{position:sticky;top:100px;border-top:2px solid var(--viiva);padding-top:14px}
.uutis-muut{list-style:none;margin:6px 0 0;padding:0}
.uutis-muut a{display:block;padding:14px 0;border-bottom:1px solid var(--viiva-ohut);text-decoration:none}
.uutis-muut time{display:block;font-size:.8rem;color:var(--muted);margin-bottom:3px}
.uutis-muut span{font-weight:650;line-height:1.3;transition:color 150ms}
.uutis-muut a:hover span{color:var(--punainen)}
.uutis-yhteys{margin-top:28px;background:var(--paperi-2);padding:22px}
.uutis-yhteys p{font-weight:650;margin:0 0 14px}
@media (max-width:1000px){
  .arvot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uutis-runko .sisus{grid-template-columns:1fr}
  .uutis-sivu{position:static}
}
@media (max-width:760px){
  .lupaukset,.arvot{grid-template-columns:1fr}
}

/* yhteystiedot: tumma yläosa, vaihde isona, toimipisteet kortteina */
.piilota{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.yhteys-yla{background:var(--muste);color:#fff;padding-block:clamp(36px,4.5vw,64px) clamp(40px,4.5vw,64px)}
.yhteys-yla .lippu{color:var(--muted-tumma)}
.yhteys-yla :focus-visible{outline-color:#fff}
.yhteys-paa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--vali);align-items:end;
  padding-bottom:clamp(28px,3.5vw,48px)}
.yhteys-paa h1{color:#fff;max-width:18ch;font-size:clamp(2rem,1rem + 2.4vw,3.4rem)}
.yhteys-paa .ingressi{color:#D9D1CD;margin:clamp(18px,2vw,28px) 0 0}
.vaihde{border-top:2px solid var(--punainen);padding-top:16px}
.vaihde-numero{display:block;font-size:clamp(1.7rem,1rem + 1.5vw,2.5rem);font-weight:780;letter-spacing:-.02em;line-height:1.05;
  color:#fff;text-decoration:none;font-variant-numeric:tabular-nums;margin-bottom:14px}
.vaihde-numero:hover{color:#F4B9B5}
.vaihde p:not(.lippu){color:#D9D1CD;font-size:.98rem}
.vaihde b{color:#fff;font-weight:600}
.vaihde .nappi.reuna{border-color:#fff;color:#fff;margin-top:6px}
.vaihde .nappi.reuna:hover,.vaihde .nappi.reuna:focus-visible{background:#fff;color:var(--muste)}
.yhteys-yla .toimipisteet{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14)}
.yhteys-yla .toimipiste{background:var(--muste);border:0;padding:24px 24px 26px;display:flex;flex-direction:column}
.yhteys-yla .toimipiste .rooli{order:-1;color:#F4B9B5;font-size:.84rem;margin:0 0 6px}
.yhteys-yla .toimipiste h3{color:#fff;margin-bottom:10px;font-size:clamp(1.25rem,1rem + .6vw,1.6rem)}
.yhteys-yla .toimipiste{padding:20px 22px 22px}
.yhteys-yla .toimipiste p{font-size:.98rem;margin-bottom:4px}
.yhteys-yla .toimipiste p{color:#D9D1CD}
.yhteys-yla .toimipiste a{color:#fff;font-weight:650;text-decoration-color:rgba(255,255,255,.4)}
.yhteys-yla .kartalle{margin-top:auto;padding-top:12px}
.yhteys-yla .kartalle a{font-weight:500;font-size:.92rem;color:var(--muted-tumma)}
.yhteys-yla .kartalle a:hover{color:#fff}
@media (max-width:1000px){
  .yhteys-paa{grid-template-columns:1fr;align-items:start}
  .yhteys-yla .toimipisteet{grid-template-columns:1fr}
}

/* tarjouspyyntölomake */
.lomake{display:grid;gap:18px;max-width:900px}
.osio-otsikko ~ .lomake{margin-left:calc((100% - var(--vali)) * 3 / 12 + var(--vali))}
.lomake-rivi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px var(--vali)}
.lomake-rivi.kolme{grid-template-columns:repeat(3,minmax(0,1fr))}
.lomake label{display:flex;flex-direction:column;gap:6px}
.lomake label > span{font-size:.85rem;font-weight:600;color:var(--muste-2)}
.lomake input,.lomake select,.lomake textarea{font:inherit;font-size:1rem;color:var(--muste);background:#fff;
  border:1.5px solid var(--viiva-ohut);border-radius:0;padding:11px 12px;width:100%;min-width:0}
.lomake textarea{resize:vertical;min-height:140px}
.lomake input:focus,.lomake select:focus,.lomake textarea:focus{outline:0;border-color:var(--punainen)}
.lomake .ansa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lomake-tietosuoja{margin:0;font-size:.86rem;color:var(--muted)}
.lomake-lopetus{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.lomake button{cursor:pointer;border:0;font-family:inherit}
.lomake button:disabled{opacity:.6;cursor:wait}
.lomake-tila{margin:0;font-size:.95rem;font-weight:600}
.lomake-tila.ok{color:#1F6B3A}
.lomake-tila.virhe{color:var(--punainen)}
@media (max-width:760px){
  .lomake-rivi,.lomake-rivi.kolme{grid-template-columns:1fr}
}

/* kuvaton kohde: sama tumma pohja ilman kuvaa, luvut oikealla */
.hero.ilman-kuvaa{max-width:none;background:var(--muste);color:#fff;
  padding:clamp(56px,8vw,112px) max(var(--reuna),calc((100% - var(--leveys)) / 2 + var(--reuna))) clamp(48px,6vw,88px)}
.hero.ilman-kuvaa .lippu{color:var(--muted-tumma)}
.hero.ilman-kuvaa h1{color:#fff}
.hero.ilman-kuvaa .ingressi{color:#D9D1CD}
.hero.ilman-kuvaa .luvut{border-top-color:rgba(255,255,255,.3)}
.hero.ilman-kuvaa .luku{border-bottom-color:rgba(255,255,255,.14)}
.hero.ilman-kuvaa .luku b{color:#fff}
.hero.ilman-kuvaa .luku span{color:var(--muted-tumma)}
.hero.ilman-kuvaa .nappi.reuna{border-color:#fff;color:#fff}
.hero.ilman-kuvaa .nappi.reuna:hover,.hero.ilman-kuvaa .nappi.reuna:focus-visible{background:#fff;color:var(--muste)}
.hero.ilman-kuvaa :focus-visible{outline-color:#fff}

/* kohdelistat: pieni kuva rivin alussa, kuvattomalla tyhjä ruutu samassa kohdassa */
.kohde{grid-template-columns:96px minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,10em);align-items:center;padding:10px 0}
.pikkukuva{display:block;width:96px;aspect-ratio:4/3;overflow:hidden;background:var(--viiva-ohut)}
.vaalea-2 .pikkukuva{background:#E4DFDA}
.pikkukuva img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ulos)}
a.kohde:hover .pikkukuva img{transform:scale(1.08)}
.ryhma > .kohteet:first-child{border-top:2px solid var(--viiva)}
.suodatin{border-bottom:0;padding-bottom:18px;margin-bottom:0}
.suodatin + .ryhma{margin-top:12px}

/* kohdesivu: kuvaus ja tiedot rinnakkain */
.kohde-runko.vain-teksti{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.kohde-teksti p:not(.lippu) + p{margin-top:1em}
.kohde-runko{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--vali);align-items:start}
.kohde-runko.vain-tiedot{grid-template-columns:minmax(0,1fr)}
.kohde-teksti{border-top:2px solid var(--viiva);padding-top:16px}
.kohde-teksti p:not(.lippu){font-size:clamp(1.12rem,1rem + .45vw,1.38rem);line-height:1.5;color:var(--muste-2);max-width:40ch}
.kohde-runko .tiedot{grid-template-columns:repeat(2,minmax(0,1fr))}
.kohde-runko.vain-tiedot .tiedot{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.nostot.pienet{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(40px,5vw,72px)}

@media (max-width:1000px){
  .hero:has(> .hero-kuva){display:grid;grid-template-columns:minmax(0,1fr);min-height:72svh}
  .hero:has(> .hero-kuva) > .sisus > *{grid-column:1 / -1}
  .hero:has(> .hero-kuva) .ingressi,.hero:has(> .hero-kuva) .napit{grid-column:1 / -1}
  .kohde-runko,.kohde-runko.vain-teksti{grid-template-columns:1fr}
  .nostot.pienet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .segmentit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nostot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nosto.iso{grid-column:1 / -1;grid-row:auto}
  .nosto.iso .kuva{aspect-ratio:16/10;flex:none;min-height:0}
  .pari.prosessi{grid-template-columns:1fr}
}
@media (max-width:760px){
  .suurhero{min-height:auto}
  .suurhero .sisus{padding-block:40px 56px}
  .suurhero-kuvateksti{left:var(--reuna);right:auto;text-align:left;bottom:14px}
  .suurhero-kuva::after{background:linear-gradient(180deg,rgba(22,17,15,.1) 0%,rgba(22,17,15,.35) 35%,rgba(22,17,15,.9) 100%)}
  .lukunauha .luku{padding:12px 10px 12px 0}
  .lukunauha .luku + .luku{padding-left:10px}
  .lukunauha .luku b{font-size:1.45rem}
  .lukunauha .luku span{font-size:.72rem;line-height:1.3}
  .segmentit,.nostot,.kohde-runko .tiedot{grid-template-columns:1fr}
  .nostot.pienet{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .nostot.pienet h3{font-size:1rem}
  .nostot.pienet .nosto-meta{font-size:.72rem;margin-top:8px}
  .tyomaakortit{grid-template-columns:1fr}
}

/* ------------------------------------------------ leveydet */
@media (max-width:1180px){
  .valikko-nappi{display:inline-flex;align-items:center;font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;
    background:none;border:1.5px solid var(--muste);color:var(--muste);padding:9px 14px}
  .navi .sisus{position:relative;flex-wrap:nowrap}
  .navi nav{display:none}
  .navi nav.auki{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--viiva);padding:8px var(--reuna) 20px;margin-top:1px;
    max-height:calc(100vh - 90px);overflow:auto}
  .navi nav.auki > a,.navi nav.auki .alasveto > a{font-size:1.35rem;font-weight:650;letter-spacing:-.02em;padding:12px 0}
  .navi nav.auki > a,.navi nav.auki .alasveto{border-bottom:1px solid var(--viiva-ohut)}
  .alasveto{flex-wrap:wrap;justify-content:space-between}
  .alasveto > ul{position:static;width:100%;min-width:0;border:0;box-shadow:none;background:var(--paperi-2);margin:0 0 10px}
}
@media (max-width:1000px){
  .hero{display:flex;flex-direction:column}
  .hero-kuva{order:0;width:100%;margin-bottom:28px}
  .hero .lippu{order:-3}
  .hero h1{order:-2}
  .hero .ingressi,.hero .napit,.hero .luvut{max-width:none}
  .hero.ilman-kuvaa .luvut{margin-top:28px}
  .ruudukko.k3,.sitaatit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pari,.pari.kapea-kuva,.pari.kapea-kuva.kuva-oikealla{grid-template-columns:1fr}
  .alatunniste .ylapuoli{grid-template-columns:1fr 1fr}
  .alatunniste .ylapuoli > div:first-child{grid-column:1 / -1}
  .suodatin{grid-template-columns:1fr 1fr}
  .suodatin label:first-child{grid-column:1 / -1}
  .tyhjenna{grid-column:1 / -1;justify-self:start}
}
@media (max-width:760px){
  .osio-otsikko,.tyomaa,.uutinen,.kaista .paalle .sisus{grid-template-columns:minmax(0,1fr)}
  .osio-otsikko > *,.uutinen h3,.uutinen p{grid-column:1}
  .osio-otsikko > .lippu{grid-row:auto;margin-bottom:.8em;padding-top:0}
  .uutinen time{grid-row:auto;margin-bottom:4px}
  .osio-otsikko ~ *{margin-left:0!important}
  .tyomaa > header{margin-bottom:12px}
  .hakemisto .kortti{grid-template-columns:minmax(0,1fr) 110px;row-gap:6px;padding:16px 0}
  .hakemisto .kortti h3{grid-column:1;grid-row:1;font-size:1.35rem}
  .hakemisto .kortti p{grid-column:1;grid-row:2}
  .hakemisto .kortti .maara{grid-column:1;grid-row:3;justify-self:start}
  .hakemisto .kortti .kuva{grid-column:2;grid-row:1 / span 3;align-self:start}
  .ruudukko.k2,.ruudukko.k3,.sitaatit{grid-template-columns:1fr}
  .kohde{grid-template-columns:72px minmax(0,1fr) auto;gap:2px 14px;align-items:start}
  .pikkukuva{width:72px;grid-column:1;grid-row:1 / span 3}
  .kohde .nimi{grid-column:2;grid-row:1}
  .kohde .meta{grid-column:3;grid-row:1}
  .kohde .paikka{grid-column:2 / -1;grid-row:2;font-size:.9rem}
  .kohde .tyyppi{grid-column:2 / -1;grid-row:3;font-size:.9rem}
  .kaista img{aspect-ratio:4/3}
  .kartta{grid-template-columns:minmax(0,1fr)}
  .hero-halli{aspect-ratio:4/3}
  .halli-vaiheet{font-size:.66rem;gap:4px}
  .halli-aikajana{left:12px;right:12px}
  .kartta-alue{aspect-ratio:4/5}
  .s-ohje{display:none}
  .alatunniste .ylapuoli{grid-template-columns:1fr}
  .merkki img{height:38px}
  .navi .tarjous{padding:10px 12px;font-size:.85rem}
}
@media (max-width:420px){
  .navi .tarjous{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}