/*
 * Intentech – sivustopohjan tyylit
 * Ulkoasun lähde: design/etusivu.html, määrittely: docs/04-ulkoasu.md, tokenit: design/tokens.css
 * Koko sivusto tummalla pohjalla (P24): osiot vuorottelevat kahta tummaa sävyä.
 * Sisällön luokat (editorissa käytettävät): docs/kehitysymparisto.md → Teema
 */

/* ---------- Fontit (itse hostatut, latin = myös ä, ö, å) ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/archivo-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}

/* ---------- Tokenit (design/tokens.css) ---------- */
:root{
  /* Tummat pinnat (P25: selvemmät sävyerot, ero osioiden välillä 1,25:1) */
  --c-dark:#0E1112;            /* perusosio, yläpalkki, hero */
  --c-dark-alt:#20272A;        /* joka toinen osio */
  --c-dark-deep:#090B0C;       /* alatunniste */
  --c-surface:#1A2023;         /* kortit ja lomake perusosiossa */
  --c-surface-alt:#2B3437;     /* kortit ja lomake vaihtoehtoisessa osiossa */
  --c-dark-line:#343D40;       /* erotinviivat, korttien reunat */
  --c-dark-outline:#4A5254;    /* toissijaisen painikkeen reuna */
  --c-input-border:#7A847F;    /* lomakekenttien reuna: vähintään 3,3:1 kaikilla pinnoilla (WCAG 1.4.11) */

  /* Teksti tummalla (kontrasti heikoimmalla pinnalla #2B3437) */
  --c-on-dark-strong:#F4F6F2;  /* 11,7:1 – otsikot */
  --c-on-dark:#ECEFEA;         /* 11,0:1 – leipäteksti */
  --c-on-dark-link:#D3D9D5;    /*  8,9:1 – valikko ja linkit */
  --c-on-dark-muted:#B9C1BC;   /*  6,9:1 – ingressit ja kuvaukset */
  --c-on-dark-subtle:#A3ABA6;  /*  5,4:1 – pieni teksti */
  --c-on-dark-label:#9AA39E;   /*  4,9:1 – harmaat tunnisteet */

  /* Korostus: logon vihreä (P21) – toiminta: painikkeet, otsikoiden viiva, logo */
  --c-accent:#92D050;          /* 6,9:1 heikoimmalla pinnalla */
  --c-on-accent:#111416;       /* 10,0:1 vihreän päällä */

  /* Toinen tehosteväri: sininen (P25) – tekninen tieto: ikonit, prosessi, listamerkit, tunnisteet */
  --c-accent2:#0BACFF;         /* 5,1:1 – ikonit ja pisteet */
  --c-accent2-text:#5CC4FF;    /* 6,6:1 – sininen pieni teksti */
  --c-accent2-line:#2F5873;    /* ikonilaatikon reuna, prosessiviiva */

  /* Virheet lomakkeessa */
  --c-virhe:#FF9D94;

  /* Fontit */
  --f-display:"Archivo",Arial,sans-serif;
  --f-body:"IBM Plex Sans",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Typografia */
  --fs-h1:clamp(36px,5vw,64px);
  --fs-h2:clamp(30px,3.6vw,46px);
  --fs-h3:22px;
  --fs-h3-step:20px;
  --fs-lead:19px;
  --fs-body:17px;
  --fs-small:16px;
  --fs-list:15px;
  --fs-label:13px;
  --fs-label-sm:12px;
  --fs-contact:clamp(24px,2.6vw,32px);
  --lh-body:1.6;
  --ls-label:.12em;

  /* Asettelu */
  --content-max:1200px;
  --gutter:clamp(20px,4vw,48px);
  --section-pad:clamp(72px,9vw,128px);
  --hero-pad-top:clamp(56px,8vw,112px);
  --hero-pad-bottom:clamp(48px,6vw,88px);
  --gap-cards:20px;

  /* Muodot */
  --radius-card:4px;
  --radius-control:3px;
  --h-button:52px;
  --h-input:48px;
  --touch-min:44px;

  /* Osion mukaan vaihtuva korttien ja lomakkeen pinta */
  --pinta:var(--c-surface);
}

/* ---------- Perusta ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--c-dark);color:var(--c-on-dark);font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body)}
img,svg{max-width:100%}
img{height:auto;display:block}
h1,h2,h3{margin:0;overflow-wrap:break-word;hyphens:auto;color:var(--c-on-dark-strong)}
h1{font-family:var(--f-display);font-weight:700;font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.015em}
h2{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em}
h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);line-height:1.25}
p,ul,ol,dl,figure{margin:0}
a{color:var(--c-on-dark-link)}
a:hover{color:var(--c-accent)}
strong{font-weight:600}

:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
#sisalto:focus{outline:none}

.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--c-accent);color:var(--c-on-accent);padding:10px 14px;font-weight:600;border-radius:var(--radius-control)}
.skip:focus{left:8px}

/* Pieni mono-otsake (sivupaneelin ja yhteystietojen tunnisteet) */
.kicker{font-family:var(--f-mono);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-accent2-text);line-height:1.5}

/* Lyhyt vihreä viiva pääotsikon yläpuolella (P24: numeroitujen otsakkeiden tilalla) */
.osio-teksti > h1:first-child::before,
.osio-teksti > h2:first-child::before,
.sivu-in > h1:first-child::before,
.sivu .page-header h1::before,
.sivu .page-header h2::before{content:"";display:block;width:40px;height:3px;margin-bottom:24px;background:var(--c-accent);border-radius:2px}

/* ---------- Painikkeet ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h-button);padding:0 26px;border:1px solid transparent;border-radius:var(--radius-control);font-family:var(--f-body);font-size:var(--fs-body);font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.btn--paa{background:var(--c-accent);color:var(--c-on-accent)}
.btn--paa:hover{background:#A3D96A;color:var(--c-on-accent)}
.btn--toissijainen{background:transparent;border-color:var(--c-dark-outline);color:var(--c-on-dark);font-weight:500}
.btn--toissijainen:hover{border-color:var(--c-accent);color:var(--c-on-dark-strong)}
.painikkeet{display:flex;flex-wrap:wrap;gap:12px}
.ikoni-btn{width:var(--touch-min);height:var(--touch-min);display:inline-grid;place-items:center;padding:0;background:transparent;border:0;border-radius:var(--radius-control);color:var(--c-on-dark);cursor:pointer}
.ikoni-btn:hover{color:var(--c-accent)}

/* ---------- Yläpalkki ---------- */
.ylapalkki{background:var(--c-dark);border-bottom:1px solid var(--c-dark-line)}
.ylapalkki-in{display:flex;align-items:center;gap:12px 32px;padding-block:16px}
.logo{display:inline-flex;align-items:center;min-height:var(--touch-min);flex:none}
.logo img{height:28px;width:auto}
@media (min-width:768px){.ylapalkki .logo img{height:36px}}
.logo--pieni img{height:22px}
.valikko{display:none;margin-left:auto}
.valikko ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.valikko a{display:inline-block;padding:10px 0;color:var(--c-on-dark-link);text-decoration:none;font-size:15px}
.valikko a:hover,.valikko a[aria-current]{color:var(--c-on-dark-strong)}
.ylapalkki-toiminnot{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn--puhelin{min-height:var(--touch-min);padding:0 18px}
.btn--puhelin svg{flex:none}
.valikko-btn,.valikko-linkki{display:none}

/* Kapea näyttö: puhelinpainike pelkkänä kuvakkeena, ettei yläpalkki rivity */
@media (max-width:519px){
  .btn--puhelin{width:var(--touch-min);padding:0}
  .btn--puhelin .btn-teksti{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Tietokone: valikko yläpalkissa, puhelinpainike ilman kuvaketta (luonnos) */
@media (min-width:1024px){
  .valikko{display:block}
  .ylapalkki-toiminnot{margin-left:0}
  .btn--puhelin svg{display:none}
}
/* Mobiili: hampurilaisvalikko (P22) */
@media (max-width:1023px){
  .js .valikko-btn{display:inline-grid}
  /* Ilman JavaScriptiä valikkopainikkeen tilalla ankkurilinkki (#sivupaneeli → :target) */
  .no-js .valikko-linkki{display:inline-grid}
}

/* ---------- Sivupaneeli (mobiilivalikko) ---------- */
.paneeli-tausta{position:fixed;inset:0;z-index:60;background:rgba(8,10,11,.65);opacity:0;pointer-events:none;transition:opacity .3s}
.paneeli-tausta.auki{opacity:1;pointer-events:auto}
.sivupaneeli{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(88vw,380px);display:flex;flex-direction:column;overflow-y:auto;background:var(--c-dark);border-left:1px solid var(--c-dark-line);color:var(--c-on-dark);padding:calc(env(safe-area-inset-top,0px) + 16px) 28px calc(env(safe-area-inset-bottom,0px) + 28px);transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.sivupaneeli.auki{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sivupaneeli-yla{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-right:-10px}
.sulje-linkki{display:none}
/* Ilman JavaScriptiä: paneeli avautuu #sivupaneeli-ankkurilla, sulkeminen linkillä */
.no-js .sivupaneeli:target{transform:none;visibility:visible;transition:none}
.no-js #paneeli-sulje{display:none}
.no-js .sulje-linkki{display:inline-grid}
.sivupaneeli nav{margin-top:28px}
.sivupaneeli ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-dark-line)}
.sivupaneeli li{border-bottom:1px solid var(--c-dark-line)}
.sivupaneeli nav a,.sivupaneeli nav li > span{display:block;padding:14px 0;color:var(--c-on-dark-strong);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:24px;line-height:1.25}
.sivupaneeli nav a:hover,.sivupaneeli nav a[aria-current]{color:var(--c-accent)}
.sivupaneeli-yhteys{margin-top:auto;padding-top:40px}
.sivupaneeli-yhteys .kicker + .iso-linkki{margin-top:-6px}
.sivupaneeli-yhteys .iso-linkki + .kicker{margin-top:20px}
.sivupaneeli-yhteys .iso-linkki{font-size:22px}
@media (min-width:1024px){.sivupaneeli,.paneeli-tausta{display:none}}

/* Iso yhteystietolinkki (puhelin, sähköposti) */
/* Pehmuste ja sama negatiivinen marginaali: kosketusalue vähintään 44 px ilman, että ulkoasu muuttuu */
.iso-linkki{display:inline-block;padding-block:8px;margin-block:-8px;color:var(--c-on-dark-strong);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:var(--fs-contact);line-height:1.3;overflow-wrap:anywhere}
.iso-linkki:hover{color:var(--c-accent)}

/* ---------- Osiot (moduulikehys html/layouts/chromes/osio.php) ---------- */
.osio{padding-block:var(--section-pad);background:var(--c-dark)}
/* Joka toinen etusivun osio hieman vaaleampi, viiva välissä (P24) */
.osiot > .osio:nth-child(odd){background:var(--c-dark-alt);--pinta:var(--c-surface-alt)}
.osiot > .osio{border-top:1px solid var(--c-dark-line)}

/* Osion tekstin rytmi */
.osio-teksti > *{margin:0}
.osio-teksti > * + *{margin-top:24px}
.osio-teksti p{color:var(--c-on-dark-muted)}
.osio-teksti > p{max-width:600px}
.ingressi{color:var(--c-on-dark-muted)}
.osio-teksti > h1 + .ingressi{margin-top:28px;max-width:580px;font-size:var(--fs-lead)}
.osio-teksti > h2 + .ingressi{margin-top:20px;max-width:600px}
.osio-teksti > .painikkeet{margin-top:40px}

/* Kuva tekstin vieressä: osio--kuva-oikea / osio--kuva-vasen (+ osio--kuva-nelio) */
.osio--kuva-oikea .osio-in,.osio--kuva-vasen .osio-in{display:flex;flex-wrap:wrap;align-items:center;gap:48px 72px}
.osio--kuva-oikea .osio-teksti,.osio--kuva-vasen .osio-teksti{flex:1.3 1 480px;min-width:0}
.osio--kuva-vasen .osio-teksti{flex-basis:420px}
.osio-kuva{flex:1 1 340px;min-width:0}
.osio--kuva-vasen .osio-in{align-items:flex-start}
.osio--kuva-vasen .osio-kuva{order:-1}
.osio-kuva img,.kuvapaikka{width:100%;border-radius:var(--radius-card)}
/* osio--kuva-vapaa: kuva omissa mittasuhteissaan ilman rajausta. Sille ei saa asettaa aspect-ratio-arvoa,
   koska selain varaa tilan img-elementin width- ja height-arvoista jo ennen kuvan latausta. Muuten
   viivästetysti latautuva kuva siirtää sisältöä ja ankkurilinkit päätyvät väärään kohtaan. */
:where(.osio:not(.osio--kuva-vapaa)) .osio-kuva img,.kuvapaikka{aspect-ratio:4 / 5}
.osio-kuva img{object-fit:cover}
.osio--kuva-nelio .osio-kuva img,.osio--kuva-nelio .kuvapaikka{aspect-ratio:1 / 1}
/* Kuvan paikka ennen valokuvaa: vinoviivoitettu laatikko, jossa kuvan kuvaus (moduulin Note) */
.kuvapaikka{display:flex;align-items:flex-end;padding:24px;border:1px dashed #4A5558;background:repeating-linear-gradient(135deg,#20262A 0,#20262A 10px,#1A1F22 10px,#1A1F22 20px);color:#C2C9C4;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.5}

/* Hero: etusivun alku */
.osio--hero{padding-block:var(--hero-pad-top) var(--hero-pad-bottom)}
.osio--hero .osio-in{gap:48px 64px}
.osio--hero .osio-teksti{flex:1.35 1 520px}
/* Kuva saa herossa enemmän leveyttä, jotta se on lähes tekstin korkuinen */
.osio--hero.osio--kuva-vapaa .osio-teksti{flex-grow:1}
.osio--hero.osio--kuva-vapaa .osio-kuva{flex-grow:1.8}

/* Tietorivi heron alla (osio--tietorivi) */
.osio--tietorivi{padding-block:8px;border-top:1px solid var(--c-dark-line)}
/* <dl>:ssä pelkät dt/dd-parit ilman div-kääreitä: Joomlan editori (TinyMCE) purkaa kääreet */
.tietorivi{display:grid;grid-template-columns:minmax(0,1fr);padding-block:10px;text-align:center}
.tietorivi dt{padding-top:12px;font-family:var(--f-mono);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-accent2-text)}
.tietorivi dd{margin:6px 0 0;padding-bottom:4px;font-weight:500;color:var(--c-on-dark)}
.tietorivi dd + dt{margin-top:12px;padding-top:14px;border-top:1px solid var(--c-dark-line)}
@media (min-width:900px){
  /* Tietokone: parit rinnakkain sarakkeina (dt ylärivillä, dd alarivillä) */
  .tietorivi{grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:24px;padding-block:18px}
  .tietorivi dt,.tietorivi dd + dt{margin-top:0;padding-top:0;border-top:0}
  .tietorivi dd{padding-bottom:0}
}

/* Otsikko ja ingressi rinnakkain (osio--otsikkorivi, esim. Palvelut) */
@media (min-width:860px){
  .osio--otsikkorivi .osio-teksti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:64px}
  .osio--otsikkorivi .osio-teksti > *{grid-column:1 / -1}
  .osio--otsikkorivi .osio-teksti > h2{grid-column:1;grid-row:1}
  .osio--otsikkorivi .osio-teksti > h2 + .ingressi{grid-column:2;grid-row:1;align-self:end;margin-top:0}
}

/* Viivalista: listamerkkinä vihreä mono-viiva "—" */
.viivalista{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.viivalista li{display:flex;gap:10px;align-items:baseline;color:var(--c-on-dark)}
.viivalista li::before{content:"—";flex:none;font-family:var(--f-mono);color:var(--c-accent2-text)}
/* Sarakkeina viivoin erotettuna (Modernisointi) */
.osio-teksti > .viivalista--sarakkeet{margin-top:36px}
.viivalista--sarakkeet{flex-direction:row;flex-wrap:wrap;gap:0 32px;font-size:var(--fs-small)}
.viivalista--sarakkeet li{flex:1 1 260px;min-width:0;gap:12px;padding:14px 0;border-top:1px solid var(--c-dark-line)}

/* Prosessivaiheet (ol.vaiheet): numerot juoksevat automaattisesti */
.osio-teksti > .vaiheet{margin-top:64px}
.vaiheet{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:48px 24px;counter-reset:vaihe}
.vaiheet > li{flex:1 1 190px;min-width:0;position:relative;border-top:2px solid var(--c-accent2-line);padding-top:24px;counter-increment:vaihe}
.vaiheet > li::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--c-accent2);box-shadow:0 0 0 3px var(--c-dark)}
.osiot > .osio:nth-child(odd) .vaiheet > li::before{box-shadow:0 0 0 3px var(--c-dark-alt)}
.vaiheet h3{font-size:var(--fs-h3-step);line-height:1.3}
.vaiheet h3::before{content:counter(vaihe,decimal-leading-zero);display:block;margin-bottom:6px;font-family:var(--f-mono);font-weight:400;font-size:var(--fs-label);line-height:1.5;color:var(--c-accent2-text)}
.vaiheet p{margin-top:8px;font-size:var(--fs-small);color:var(--c-on-dark-muted)}

/* Tietolista (Yritys): mono-otsake ja arvo riveittäin */
.osio-teksti > .tietolista{margin-top:36px}
.tietolista{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--c-dark-line)}
.tietolista dt{padding-top:14px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent2-text)}
.tietolista dd{margin:0;padding:2px 0 14px;border-bottom:1px solid var(--c-dark-line);font-weight:500;color:var(--c-on-dark)}
@media (min-width:520px){
  /* Ei column-gapia, jotta rivien erotinviiva on yhtenäinen; väli dd:n vasempana pehmusteena */
  .tietolista{grid-template-columns:194px minmax(0,1fr)}
  .tietolista dt,.tietolista dd{padding-block:14px;border-bottom:1px solid var(--c-dark-line)}
  .tietolista dt{padding-right:24px}
  .tietolista dt{padding-top:17px}
}

/* Yhteystiedot: mono-otsake ja iso linkki */
.osio-teksti > .yhteystiedot{margin-top:44px}
.yhteystiedot dd + dt{margin-top:28px}
.yhteystiedot dt{font-family:var(--f-mono);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-accent2-text)}
.yhteystiedot dd{margin:4px 0 0;color:var(--c-on-dark-link)}

/* Yhteystieto-osio: teksti vasemmalla, lomake oikealla (osio--yhteys) */
.osio--yhteys .osio-teksti > .lomake-alue{margin-top:56px}
@media (min-width:860px){
  .osio--yhteys .osio-teksti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:72px;align-items:start}
  .osio--yhteys .osio-teksti > *{grid-column:1}
  .osio--yhteys .osio-teksti > .lomake-alue{grid-column:2;grid-row:1 / span 20;margin-top:0}
}

/* ---------- Palvelukortit ---------- */
.osio-teksti > .kortit{margin-top:56px}
.kortit{display:flex;flex-wrap:wrap;gap:var(--gap-cards)}
.kortti{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--pinta);border:1px solid var(--c-dark-line);border-radius:var(--radius-card)}
.kortti h3{margin-top:6px}
.kortti p{margin:0;font-size:var(--fs-small);color:var(--c-on-dark-muted)}
.kortti .viivalista{margin-top:auto;padding-top:16px;border-top:1px solid var(--c-dark-line);font-size:var(--fs-list)}
.kortti .lisarivi{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--c-on-dark-subtle)}
.kortti-tunniste{display:block;font-family:var(--f-mono);font-size:var(--fs-label-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent2-text)}
.kortti--levea{flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px 40px}
.kortti--levea .kortti-otsikko{flex:1 1 280px;min-width:0;display:flex;align-items:center;gap:20px}
.kortti--levea .kortti-otsikko > div{min-width:0}
.kortti--levea .kortti-otsikko h3{margin-top:2px}
/* Kapein näyttö: ikoni otsikon yläpuolelle, jotta pitkä sana (pörssisähköohjaukset) mahtuu riville */
@media (max-width:400px){
  .kortti{padding:24px 20px}
  .kortti--levea .kortti-otsikko{flex-direction:column;align-items:flex-start;gap:14px}
}
.kortti--levea .kortti-kuvaus{flex:1.4 1 320px;min-width:0}
.kortti--levea .kortti-kuvaus .lisarivi{margin-top:10px}
.kortti--levea .viivalista{flex:1 1 240px;min-width:0;margin:0;padding:0;border:0;gap:6px}

/* Viivaikonit (24×24, viiva 1.5) – sisällössä <span class="ikoni ikoni-plc"></span> */
.ikoni-laatikko{flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-accent2-line);border-radius:var(--radius-control);background:rgba(11,172,255,.08);color:var(--c-accent2)}
.ikoni{display:inline-block;width:26px;height:26px;background:currentColor;-webkit-mask:var(--ikoni) center / contain no-repeat;mask:var(--ikoni) center / contain no-repeat}
.ikoni-sahkosuunnittelu{--ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Cpath d='M6 12h3l1.5-3 3 6 1.5-3h3'/%3E%3C/svg%3E")}
.ikoni-plc{--ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M9 7h6M9 11h1M9 14h1M9 17h1M14 11h1M14 14h1M14 17h1'/%3E%3C/svg%3E")}
.ikoni-sahkoasennus{--ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='9' cy='12' r='1.2'/%3E%3Ccircle cx='15' cy='12' r='1.2'/%3E%3C/svg%3E")}
.ikoni-verkot{--ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/svg%3E")}
.ikoni-kotisivut{--ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Cpath d='M3 8.5h18M6 6.25h.01M8.5 6.25h.01M11 6.25h.01M7 13h6M7 16h10'/%3E%3C/svg%3E")}
.ikoni-koti{--ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M8 16.5l2.5-3 2.5 2 3-4'/%3E%3C/svg%3E")}

/* ---------- Lomake (yhteydenottolomake, vaihe 4) ---------- */
.lomake{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,40px);background:var(--pinta);border:1px solid var(--c-dark-line);border-radius:var(--radius-card)}
.lomake .kentta{display:flex;flex-direction:column;gap:8px;min-width:0}
.lomake .kentat-rivi{display:flex;flex-wrap:wrap;gap:20px}
.lomake .kentat-rivi > .kentta{flex:1 1 200px}
.lomake label{font-size:14px;color:var(--c-on-dark-link)}
.lomake input,.lomake textarea{width:100%;min-height:var(--h-input);padding:0 14px;background:var(--c-dark);border:1px solid var(--c-input-border);border-radius:var(--radius-control);color:var(--c-on-dark-strong);font-family:var(--f-body);font-size:16px}
.lomake textarea{padding:12px 14px;resize:vertical;min-height:140px;line-height:1.5}
.lomake input:focus-visible,.lomake textarea:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
.lomake .btn{align-self:flex-start;min-height:50px;font-size:16px}
.lomake .pienteksti{font-size:13px;color:var(--c-on-dark-subtle)}
.lomake .kentat-ryhma{display:flex;flex-direction:column;gap:10px}
.lomake .kentat-ohje{font-size:14px;color:var(--c-on-dark-link)}
.lomake .pakollinen{color:var(--c-accent)}
.lomake .kentta-virhe{font-size:14px;color:var(--c-virhe)}
.lomake .kentta--virhe input,.lomake .kentta--virhe textarea{border-color:var(--c-virhe)}
.lomake-virheet{padding:14px 16px;background:rgba(255,157,148,.1);border-left:3px solid var(--c-virhe);border-radius:var(--radius-control);color:var(--c-on-dark)}
.lomake-virheet p{color:var(--c-on-dark)}
.lomake-virheet ul{margin:6px 0 0;padding-left:1.2em;font-size:var(--fs-small)}
.lomake-virheet a{color:var(--c-on-dark-strong)}
#lomake-ilmoitus{scroll-margin-top:24px}
.lomake-kiitos{gap:8px}
.lomake-kiitos p{color:var(--c-on-dark-muted)}
/* Ansakenttä: piilossa ihmisiltä, robotit täyttävät sen */
.ansa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Alasivut (artikkelit, esim. tietosuojaseloste) ---------- */
.sivu{padding-block:clamp(56px,7vw,96px) var(--section-pad)}
.sivu-in > *{max-width:760px}
.sivu h1{font-size:clamp(32px,4vw,48px);line-height:1.1}
.sivu h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin-top:48px}
.sivu .page-header h2{margin-top:0}
.sivu h3{margin-top:32px}
.sivu p,.sivu ul,.sivu ol{margin-top:16px;color:var(--c-on-dark-muted)}
.sivu .ingressi{margin-top:20px;font-size:var(--fs-lead)}
.sivu .painikkeet{margin-top:32px}
.sivu ul,.sivu ol{padding-left:1.4em}
.sivu li + li{margin-top:6px}
.sivu .page-header + *{margin-top:24px}

/* ---------- Alatunniste ---------- */
.alatunniste{background:var(--c-dark-deep);color:var(--c-on-dark-subtle);border-top:1px solid var(--c-dark-line);font-size:14px}
.alatunniste-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:28px}
.alatunniste nav{display:flex;flex-wrap:wrap;gap:0 24px}
.alatunniste nav a{display:inline-block;padding:12px 0;color:var(--c-on-dark-link)}
.alatunniste nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}

/* ---------- Joomlan järjestelmäilmoitukset ---------- */
#system-message-container:not(:empty){max-width:var(--content-max);margin:24px auto 0;padding-inline:var(--gutter)}
.alert{padding:14px 18px;border-radius:var(--radius-card);border:1px solid var(--c-dark-outline);background:var(--c-surface);color:var(--c-on-dark)}
.alert-danger{border-color:#E5776F}
.alert-success{border-color:var(--c-accent)}

/* ---------- Liike (P23): osion sisältö ilmestyy vierittäessä, vain CSS ---------- */
@keyframes ilmesty{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .osiot .osio-teksti > *,.osiot .osio-kuva,.osiot .kortti,.osiot .vaiheet > li{animation:ilmesty linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation:none !important}
}

/* ---------- Tulostus: musta teksti valkoisella, ei valikkoja eikä lomaketta ---------- */
@media print{
  *,*::before,*::after{color:#000 !important;background:transparent !important;box-shadow:none !important;animation:none !important;opacity:1 !important}
  /* Logo pois: sen valkoinen osa katoaisi paperilla */
  .ylapalkki,.sivupaneeli,.paneeli-tausta,.skip,.logo,.painikkeet,.lomake-alue,.alatunniste nav,.ikoni-laatikko{display:none !important}
  .osio,.osio--hero,.sivu{padding-block:16px}
  .osiot > .osio,.osio--tietorivi,.alatunniste{border-top:1px solid #999}
  .osio-kuva{flex:0 0 auto;max-width:9cm}
  .osio-kuva img{max-height:9cm;width:auto}
  h1,h2,h3{break-after:avoid}
  .kortti,.vaiheet > li,.osio-kuva{break-inside:avoid}
  .kortti{border-color:#999}
}

/* ---------- Heron otsikko: loogiset rivit ---------- */
/* Otsikko on jaettu sisällössä riveihin (span.h1-rivi). Kaksipalstaisessa herossa jokainen rivi alkaa
   omalta riviltään, ja koko on mitoitettu niin, että pisin rivi ("automaatiosuunnittelu,") mahtuu
   tekstipalstaan tavuttamatta. Kapeammilla näytöillä teksti rivittyy vapaasti ja tavuttuu &shy;-kohdista. */
.osio--hero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.08}
.nobr{white-space:nowrap}
@media (min-width:900px){
  .osio--hero h1{font-size:clamp(34px,calc(4.6vw - 4px),52px)}
  .h1-rivi{display:block}
}