*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:var(--font-body);color:var(--aic-neutral-900)}
a{color:var(--aic-blue-900);text-decoration:none;transition:color 150ms ease,opacity 150ms ease}
/* Hover vaalealla pohjalla on oranssi 900 ("oranssi tekstina", 4,8:1),
   ei 600 (2,1:1 valkoisella). Sinisella pohjalla (.navlinks, .contact .fb)
   600 on oikein, 6,2:1. Pienet nimiot (.lbl, .split .hd/.pn/.pl, .journey
   .lb.r) ovat neutral-600 (6,6:1), koska 500 jaa 12 px:n koossa 4,25:een.
   Mitattu 10.9.2026, sama muutos subpage.css ja garage-channel.css. */
a:hover{color:var(--aic-orange-900)}
/* Tekstikappaleen linkit erottuvat muullakin kuin värillä (WCAG 1.4.1,
   saavutettavuustesti havainto 3, 1.10.2026). Vain luokattomat linkit
   juoksevassa tekstissä; komponenttien linkeillä on omat tyylinsä. */
p.lead a:not([class]),p.note a:not([class]),dd a:not([class]),.dsec p a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950);border-radius:var(--radius-sm)}
section{scroll-margin-top:88px}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px}
.sec{padding:128px 0}
.eyb{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px;color:var(--aic-orange-900);display:flex;align-items:center;gap:12px}
.eyb:before{content:"";width:20px;height:2px;background:var(--aic-orange-600)}
h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0;text-wrap:pretty;font-size:46px;color:var(--aic-blue-900)}
h3{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.2}
p{margin:0;text-wrap:pretty}
.lead{font-size:18px;line-height:1.55;color:var(--aic-neutral-700)}
.lbl{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600)}
.idx{font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--aic-orange-900)}
.badge{display:inline-block;font-family:var(--font-display-narrow);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aic-orange-900);border:1px solid rgba(254,159,19,.6);border-radius:var(--radius-full);padding:4px 10px;white-space:nowrap}
.ph{background:repeating-linear-gradient(135deg,var(--aic-neutral-100) 0 12px,var(--aic-neutral-50) 12px 24px);border:1px solid var(--aic-neutral-200);display:flex;align-items:flex-end;padding:16px}
.ph span{font-family:var(--font-mono);font-size:12px;color:var(--aic-neutral-600);background:#fff;padding:4px 8px;border:1px solid var(--aic-neutral-200)}
.num{font-family:var(--font-display-black);line-height:1;letter-spacing:-.02em}

nav.sitenav{position:sticky;top:0;z-index:20;background:var(--aic-blue-900);border-bottom:1px solid rgba(255,255,255,.18);height:72px}
nav.sitenav .in{max-width:1140px;margin:0 auto;padding:0 32px;height:72px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:24px}
.mark{display:flex;align-items:center;gap:10px;height:33.3px;text-decoration:none;transition:opacity 150ms ease}
a.mark:hover{opacity:.85}
a.mark:hover .dsc{color:rgba(255,255,255,.9)}
.mark .mk{width:74.2px;height:33.3px;background:url(assets/logos/aio-brooklyn-white.svg) left center/100% 100% no-repeat;flex:none}
.mark .dsc{font-family:var(--font-display-narrow);font-weight:600;font-size:9.7px;line-height:10px;letter-spacing:.075em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.navlinks{display:flex;gap:22px;justify-content:center;min-width:0;flex-wrap:nowrap}
.navlinks a{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.navlinks a:hover{color:var(--aic-orange-600)}
.navlinks a.c{color:var(--aic-orange-600)}
/* Aktiivinen osio. Oranssi kertoo missa lukija on. Aiemmin Contact oli
   pysyvasti oranssi, mika luki aktiivisena tilana joka ei muuttunut ja
   kilpaili sivun ainoan oranssin painikkeen kanssa. */
.navlinks a.on{color:var(--aic-orange-600)}
.navlinks a{transition:color 150ms ease}
.navlinks .s{display:none}
.itee{justify-self:end;width:46px;height:46px;background:url(assets/logos/ITEE-logo-white.svg) right center/contain no-repeat}

/* ── Kielivalitsin ────────────────────────────────────────────────────
   Aktiivinen kieli merkitaan kolmella tavalla: aria-current, lihavuus ja
   oranssi alaviiva. Pelkka vari ei riita, koska se ei vality
   ruudunlukijalle eika erotu vareja erottamattomalle lukijalle.
   Korkeus pidetaan alle 36 pikselissa: kapealla naytolla ylarivin
   korkeuden maaraa ITEE-merkki (36 px). Heron min-height seuraa navin
   mitattua korkeutta (--nav-h, nav-height.js), joten rivin kasvu ei enaa
   tyonna heroa taitteen ali, mutta se lyhentaa heroa saman verran. */
.lang{display:flex;align-items:center;gap:7px;font-family:var(--font-display-narrow);
  font-size:12px;font-weight:600;letter-spacing:.1em;line-height:20px;height:20px}
.lang a{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid transparent;
  transition:color 150ms ease,border-color 150ms ease}
.lang a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.lang .cur{color:#fff;border-bottom:2px solid var(--aic-orange-600)}
.lang .off{color:rgba(255,255,255,.4)}
.lang .sep{color:rgba(255,255,255,.32)}
/* Kosketusalue (18.9.2026, iPad-havainto): 12 px:n teksti 20 px:n rivilla
   on noin 16 x 20 px:n osuma-alue. Pseudoelementti laajentaa sen noin
   36 x 44 px:iin muuttamatta tekstin, alleviivauksen tai asettelun mittoja
   (WCAG 2.5.8 vahintaan 24 x 24, Apple 44). Koskee myos valikon
   kielivalintaa puhelimella. */
.lang a{position:relative}
.lang a::before{content:"";position:absolute;inset:-12px -10px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --hero-layout kertoo hero-network.js:lle, miten tunnukset sijoitetaan:
   column (sarake tekstin oikealla puolella), band (kaista otsikon ylla)
   tai row (tunnusrivi merkkauksessa). Samat mediakyselyt asettavat seka
   taiton etta muuttujan, joten CSS ja skripti eivat voi olla eri mielta.
   Muutettu 10.9.2026; aiemmin skripti luki innerHeightin, joka muuttuu
   puhelimessa osoiterivin mukana, ja tunnukset hyppasivat vierityksessa. */
.hero{position:relative;color:#fff;background:var(--aic-blue-900);overflow:hidden;min-height:calc(100vh - var(--nav-h,72px));min-height:calc(100svh - var(--nav-h,72px));display:flex;align-items:flex-end;--hero-layout:column}
/* Valokuvahero ei ole enaa tuotannossa. Saannot jaavat, koska
   esikatselun A-versio kayttaa niita; se antaa kuvan itse. */
.hero .bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero .ov1{position:absolute;inset:0;background:linear-gradient(to right,rgba(23,7,169,.96) 0%,rgba(23,7,169,.90) 30%,rgba(23,7,169,.66) 56%,rgba(23,7,169,.40) 80%,rgba(23,7,169,.30) 100%)}
.hero .ov2{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,3,72,.94) 0%,rgba(9,3,72,.74) 26%,rgba(9,3,72,.24) 48%,rgba(9,3,72,0) 62%)}
.hero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:56px}
.hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.02;font-size:60px;color:#fff;max-width:19ch;margin:0 0 32px;text-wrap:balance}
/* "real-world" pidetaan yhtena: ilman tata rivi katkesi kohdasta "real-" ja
   naytti tavutukselta. Merkkijono sailyy tasmalleen samana. */
/* Ingressi on yksi kappale, ei kahta virketta erillisilla riveilla.
   Leveys on rajattu niin, etta tyopoydalla syntyy kaksi hallittua rivia.
   Mitattuna 20 pikselin koossa koko virke on englanniksi noin 1140 px ja
   suomeksi 1263 px, joten kahdelle riville riittaa 570 ja 632 px. 66ch on
   noin 690 px, eli molemmat taittuvat kahdeksi ja text-wrap:balance tasaa
   rivien pituudet. Palstaa on kaytettavissa 1076 px, joten varaa jaa.
   Korostus on virkkeen sisalla eika omalla rivillaan, joten se kestaa
   rivinvaihdon. */
.hero .lead{font-size:20px;line-height:1.5;color:rgba(255,255,255,.88);max-width:66ch;text-wrap:balance}
.hero .lead b{color:var(--aic-orange-600);font-weight:600}
.hero .verbs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid rgba(255,255,255,.32)}
.hero .verbs .v{padding:28px 32px 0;border-left:1px solid rgba(255,255,255,.22)}
.hero .verbs .v:first-child{border-left:none;padding-left:0}
.hero .verbs .vt{font-family:var(--font-display);font-weight:600;font-size:26px;
  line-height:1.3;color:#fff;margin:0 0 10px}
.hero .verbs .r{width:28px;height:3px;background:var(--aic-orange-600);margin-bottom:12px}
.hero .verbs p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);max-width:30ch}

.cat{padding:120px 0 0}
.cat .wrap{text-align:center;padding-bottom:72px}
.cat .eyb{justify-content:center;margin-bottom:24px}
.cat h2{max-width:22ch;margin:0 auto 20px}
.cat .lead{margin:0 auto;max-width:58ch}
.split{text-align:left;background:linear-gradient(to right,var(--aic-neutral-50) 0 50%,var(--aic-blue-900) 50% 100%);padding:56px 0}
.split .row{display:grid;grid-template-columns:1fr 1fr}
.split .cl,.split .cr{display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:baseline;padding:20px 40px}
.split .cl{border-top:1px solid var(--aic-neutral-200)}
.split .cr{border-top:1px solid rgba(255,255,255,.22)}
.split .hdr .cl,.split .hdr .cr{border-top:none;padding-top:0;padding-bottom:28px;display:block}
/* Taulukko sulkeutuu alareunasta. Ilman tata viimeinen rivi jaa auki ja
   lohko nayttaa kesken jaaneelta. Sama kuvio kuin .svc .row:last-child. */
.split .row:last-child .cl{border-bottom:1px solid var(--aic-neutral-200)}
.split .row:last-child .cr{border-bottom:1px solid rgba(255,255,255,.22)}
.split .hd{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600)}
.split .cr .hd{color:var(--aic-orange-600)}
.split .pn{font-family:var(--font-display-narrow);font-size:12px;letter-spacing:.1em;color:var(--aic-neutral-600)}
.split .cr .pn{color:var(--aic-orange-600)}
.split .cl p{font-size:19px;line-height:1.4;color:var(--aic-neutral-700)}
.split .cr p{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.3;color:#fff}
.split .pl{display:none}
/* Scope rule. Taustalla staattinen verkkokentta, sama kuvakieli kuin
   herossa. Lause puhuu yhteyksista, ja kentta on yhteyksia, joten kuva ei
   ole koriste vaan sisaltoa. Ei liiketta, ei canvasia, ei kuosia: kentta
   on generoitu SVG, jossa keskelle jaa vapaa vyohyke tekstille.
   Pystypadding on nyt symmetrinen. Aiemmin se oli 96 ylos ja 128 alas,
   mika jatti tekstin alle ison tyhjan alueen. */
.scope{position:relative;background:var(--aic-blue-950);color:#fff;padding:112px 0;overflow:hidden}
.scope:before{content:"";position:absolute;inset:0;
  background:url(assets/img/scope-field.svg) center/cover no-repeat;
  opacity:.5;pointer-events:none}
.scope .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.scope .lb{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-orange-600);margin-bottom:28px}
.scope .r{width:40px;height:3px;background:var(--aic-orange-600);margin:0 0 36px}
.scope p{font-family:var(--font-display);font-size:44px;font-weight:600;line-height:1.25;max-width:26ch;margin:0;letter-spacing:-.02em;text-wrap:balance}
.scope p b{color:var(--aic-orange-600);font-weight:600}

.oulu{background:var(--aic-neutral-50)}
.oulu .hd{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:72px}
.oulu .hd h2{max-width:20ch}
.oulu .hd .lead{justify-self:end;max-width:44ch}
.strands{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:1px solid var(--aic-neutral-300)}
.strands div{padding:32px 32px 32px 0;border-bottom:1px solid var(--aic-neutral-300)}
.strands h3{font-size:20px;color:var(--aic-blue-900);margin-bottom:10px;
  display:flex;align-items:center;gap:12px;min-width:0;text-wrap:balance}
/* Why Oulu -tunnukset. Oma perheensa, ei tutkimusaluetunnus: ohut oranssi
   rengas kehyksena, sininen merkki sisalla. Rengas on se, joka pitaa nama
   kaksi jarjestelmaa erillaan, joten sita ei saa poistaa.

   flex:none on pakollinen. Ilman sita SVG on kutistuva flex-alkio ja pisin
   otsikko ("Companies and industry") puristaisi sen muita pienemmaksi.
   1140 pikselin taitossa otsikolle jaa 253 px ja pisin on noin 229 px, eli
   kaikki mahtuvat yhdelle riville. Kapeammalla text-wrap:balance jakaa
   kaksiriviset otsikot tasan. */
.strands .ik{flex:none;width:40px;height:40px;background:center/contain no-repeat}
.strands .ik-research{background-image:url(assets/logos/aio-strand-research.svg)}
.strands .ik-industry{background-image:url(assets/logos/aio-strand-industry.svg)}
.strands .ik-talent{background-image:url(assets/logos/aio-strand-talent.svg)}
.strands .ik-environments{background-image:url(assets/logos/aio-strand-environments.svg)}
.strands .ik-public{background-image:url(assets/logos/aio-strand-public.svg)}
.strands .ik-funders{background-image:url(assets/logos/aio-strand-funders.svg)}
.strands p{font-size:15px;line-height:1.55;color:var(--aic-neutral-700);max-width:26ch}

.model .hd{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:56px}
.model h2{font-size:40px;max-width:26ch}
.model .hd .lead{justify-self:end;max-width:40ch}
.model .col{grid-column:span 6;padding-top:24px;border-top:3px solid var(--aic-orange-600)}
.lockup{display:flex;align-items:center;gap:18px;height:52px;margin-bottom:32px}
.lockup .logo{flex:none}
.lockup .aio{height:52px;width:115.7px;background:url(assets/logos/aio-brooklyn-fullcolour.svg) left center/100% 100% no-repeat}
.lockup .aic{height:42px;width:84.5px;display:block}
.lockup .desc{font-family:var(--font-display-narrow);font-weight:600;font-size:15px;line-height:16px;letter-spacing:.075em;text-transform:uppercase;color:var(--aic-blue-900)}
.model h3{font-size:22px;color:var(--aic-neutral-900);margin-bottom:18px}
.model ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.model li{font-size:16px;line-height:1.5;color:var(--aic-neutral-700);padding-left:18px;position:relative}
.model li:before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--aic-orange-600);border-radius:var(--radius-full)}
.pairnote{grid-column:1/13;margin-top:48px;padding-top:24px;border-top:1px solid var(--aic-neutral-300);display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px}
.pairnote .nm{grid-column:1/4;font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-blue-900)}
.pairnote p{grid-column:4/10;font-size:16px;line-height:1.6;color:var(--aic-neutral-700)}
.labline{grid-column:1/13;margin-top:32px;padding-top:24px;border-top:1px solid var(--aic-neutral-300);display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px}
.labline .nm{grid-column:1/4;font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-blue-900)}
.labline p{grid-column:4/10;font-size:16px;line-height:1.6;color:var(--aic-neutral-700)}

.research{background:var(--aic-neutral-50)}
.research .head{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:64px}
.research .head .rt{justify-self:end;text-align:right;max-width:40ch}
.research .head .rt .lead{margin-bottom:16px}
.areas{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--aic-neutral-300);background:#fff}
.areas .a{display:grid;grid-template-columns:1fr 160px;gap:32px;padding:48px 40px;border-right:1px solid var(--aic-neutral-300);border-bottom:1px solid var(--aic-neutral-300);min-height:300px}
.areas .a:nth-child(2n){border-right:none}
.areas .a:nth-child(n+3){border-bottom:none}
.areas .idx{display:block;margin-bottom:56px}
/* Nimi on erisnimi ja kirjoitetaan merkkauksessa muodossa AI/O Local.
   Versaali on esitystapa, ei osa nimea, joten se tehdaan taalla.
   Nain nimi kopioituu oikein ja ruudunlukija saa sen sanana.
   Huom: brand-rules.md sanoo "ALL CAPS ... never for a heading",
   joten tama on tietoinen poikkeus, ei unohdus. */
.areas h3{font-size:30px;color:var(--aic-blue-900);margin-bottom:14px;letter-spacing:-.01em;text-transform:uppercase}
.areas p{font-size:16px;line-height:1.55;color:var(--aic-neutral-700);max-width:34ch}
.areas .pic{width:160px;height:160px;background:center/contain no-repeat;align-self:end}

.svc .hd{grid-column:1/5}
.svc .hd .lead{margin-top:20px}
.svc .list{grid-column:5/13}
.svc .row{display:grid;grid-template-columns:56px 1fr 1.3fr;gap:24px;padding:32px 0;border-top:1px solid var(--aic-neutral-200);align-items:baseline}
.svc .row:last-child{border-bottom:1px solid var(--aic-neutral-200)}
.svc h3{font-size:24px;color:var(--aic-blue-900)}
.svc p{font-size:16px;line-height:1.55;color:var(--aic-neutral-700)}

.garage{display:grid;grid-template-columns:1fr 1fr;background:var(--aic-blue-900);color:#fff}
.garage .txt{padding:112px 64px 112px 32px;max-width:570px;margin-left:auto}
.garage .eyb{color:var(--aic-orange-600)}
.garage .eyb:before{background:var(--aic-orange-600)}
.garage h2{color:#fff;margin-bottom:20px;font-size:46px}
.garage .lead{color:rgba(255,255,255,.84);margin-bottom:48px}
.garage .ch{padding:22px 0;border-top:1px solid rgba(255,255,255,.22)}
.garage .cn{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-orange-600);margin-bottom:10px}
.garage .cd{font-size:17px;line-height:1.55;color:rgba(255,255,255,.88)}
.garage .ch .badge{color:var(--aic-orange-600);border-color:rgba(254,159,19,.5);margin-top:16px}
.garage .ph{min-height:100%;border:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 12px,rgba(255,255,255,.02) 12px 24px)}
.garage .ph span{background:rgba(9,3,72,.8);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2)}

.env{background:var(--aic-neutral-50)}
.env .top{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:end;margin-bottom:64px}
/* .num-luku (16) poistettiin merkkauksesta 14.9.2026 kokouksen paatoksella:
   ympariston lukumaaraa ei nosteta esiin. Saanto jaa palautusta varten;
   .top-ruudukon auto-sarake kantaa nyt otsikkolohkon yksin. */
.env .num{font-size:240px;color:var(--aic-blue-900);letter-spacing:-.05em}
.env .top h2{max-width:18ch}
.env .top .lead{margin-top:20px;max-width:52ch}
.env .top .badge{margin-top:20px}
.envs{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:40px;border-top:1px solid var(--aic-neutral-300)}
.envs .gn{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-neutral-600);margin-bottom:20px;
  /* Kahden rivin korkeus varataan aina. "Living labs and use environments"
     rivittyy, ja ilman varausta sen sarakkeen hiusviivat alkaisivat 16 px
     muita alempaa, jolloin nelja saraketta eivat lue yhtena taulukkona. */
  line-height:1.35;min-height:2.7em}

/* Ympariston nimet ovat luettelo, eivat painikkeita.
   ----------------------------------------------------
   Nimet olivat pillereita: valkoinen tausta, reunaviiva, pyorea muoto ja
   sinisen sininen teksti. Ne ovat kaikki painikkeen ja linkin merkkeja,
   joten lukija odotti niiden vievan eteenpain. Ne eivat vie: talla
   sivustolla ei ole alasivuja, ja osio kantaa Working model -merkintaa,
   eli kytkennan laajuutta ei ole viela sovittu.

   Nyt nimet ladotaan riveiksi hiusviivoin, kuten strategiaesityksen
   liitteessa C. Sama sisalto, sama jarjestys, sama neljan ryhman jako.
   Vari on leipatekstin musta eika brandin sininen, koska sininen on talla
   sivulla linkin vari.

   Rakenne kestaa linkit sellaisenaan kun alasivut joskus tulevat: rivista
   tulee <a>, jolloin vari vaihtuu siniseksi ja hover oranssiksi. Mitaan
   ei tarvitse ladota uudestaan. */
.tags{display:block;list-style:none;margin:0;padding:0}
.tag{display:block;font-size:16px;font-weight:400;color:var(--aic-neutral-900);
  line-height:1.35;padding:13px 0;border-top:1px solid var(--aic-neutral-300)}
.tag:last-child{border-bottom:1px solid var(--aic-neutral-300)}

.contact{padding:160px 0;background:var(--aic-blue-900);color:#fff}
/* Ylatunniste on sinisella pohjalla, joten se ei voi kayttaa sivun
   yleista orange-900:aa: kontrasti orange-900 vasten #1707a9 on noin 2,7:1,
   eli alle WCAG AA:n rajan 4,5:1 pienelle tekstille. Brandin oma
   orange-600 antaa 6,21:1. Sama ratkaisu on jo .garage .eyb -saannossa. */
.contact .eyb{color:var(--aic-orange-600)}
.contact h2{color:#fff}
.contact .lead{color:rgba(255,255,255,.84)}
.contact .g12{align-items:end}
.contact .hd{grid-column:1/9}
/* 48 px (--text-4xl), paino 600, ei negatiivista valistysta: CD 14.9.2026.
   Oli 80 px handoffin 72 px:n H1:n rinnalla; H1 on 9.9. alkaen 60, joten
   80 ylitti sen. Kirjataan kanoniin poikkeuksena (lopetusosion otsikko). */
.contact h2{font-size:var(--text-4xl);font-weight:600;letter-spacing:normal;margin-bottom:24px}
.contact .lead{max-width:48ch}
.contact .act{grid-column:9/13;justify-self:end;text-align:right}
.btn{display:inline-block;font-family:var(--font-display-narrow);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--aic-orange-600);color:var(--aic-neutral-900);padding:18px 36px;border-radius:var(--radius-md);transition:opacity 150ms ease}
.btn:hover{opacity:.85;color:var(--aic-neutral-900)}
.contact .fb{margin-top:20px;font-size:14px;color:rgba(255,255,255,.7)}
.contact .fb a{font-weight:600;color:#fff}
.contact .fb a:hover{color:var(--aic-orange-600)}
/* Osoite. Sanamuoto on paatetty 2026-09-07: "at the main entrance level",
   ei "first floor", koska britti lukee sen katutason ylapuolelta ja
   amerikkalainen katutasoksi. Tiedekunnasta kaytetaan lyhennetta ITEE. */
.contact .addr{margin-top:16px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.62)}

footer.sitefoot{background:var(--aic-blue-900);color:#fff;padding:48px 0;border-top:1px solid rgba(255,255,255,.18)}
footer.sitefoot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
footer.sitefoot p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.6}
footer.sitefoot .org{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-orange-600);display:inline-block;margin-top:12px}
footer.sitefoot .itee-f{display:block;width:72px;height:72px;background:url(assets/logos/ITEE-logo-white.svg) right center/contain no-repeat;flex:none}
footer.sitefoot .itee-f:hover{opacity:.85}
/* Paluu ylos. Ei kelluvaa painiketta: navigaatiopalkki on sticky myos
   mobiilissa, ja sen logo vie jo #top-ankkuriin, joten kelluva nappi
   toistaisi olemassa olevan toiminnon ja peittaisi sisaltoa kapealla
   ruudulla. Tama on tekstilinkki siella missa lukija on lopettanut.
   flex-basis:100% vie sen omalle rivilleen, koska footer .wrap rivittyy. */
footer.sitefoot .totop{flex-basis:100%;order:3;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--font-display-narrow);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);
  text-decoration:none;transition:color 150ms ease}
footer.sitefoot .totop:hover,footer.sitefoot .totop:focus-visible{color:var(--aic-orange-600)}
/* Somemerkit "takaisin ylos" -rivilla, oikeassa reunassa. Kolme kanavaa,
   ei nelja: Twitch oli vanhan WP-footerin rivissa mutta jaa pois, koska
   kuollut linkki lukee huolimattomuutena vahvemmin kuin puuttuva linkki.

   Nama ovat kolmannen osapuolen tavaramerkkeja, joten ne piirretaan
   virallisessa muodossaan eika niihin lisata Why Oulu -perheen oranssia
   rengasta. Silloin sivuston kaksi omaa ikoniperhetta pysyvat naista
   erillaan. Vanhan sivun sininen merkki oranssin ympyran paalla jatettiin
   pois: neljä oranssia ympyraa veisi huomion footerin ainoalta
   korostukselta, "Built in Oulu" -rivilta, ja ITEE-merkilta.

   Hover on peitto eika vari, kuten ITEE-merkissa. */
footer.sitefoot .futil{flex-basis:100%;order:3;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18)}
footer.sitefoot .futil .totop{flex-basis:auto;order:0;padding-top:0;border-top:none}
footer.sitefoot .social{display:flex;align-items:center;gap:20px;flex:none}
/* Alatunnisteen selostelinkit 21.9.2026 (ohjauksen paatos: saavutettavuus-
   ja tietosuojasivut). Sama asu kuin .totop; rivilla Alkuun-linkin ja
   some-kuvakkeiden valissa, kapealla kietoutuu omalle rivilleen. */
footer.sitefoot .flegal{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 auto 0 0}
footer.sitefoot .flegal a{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
footer.sitefoot .flegal a:hover,footer.sitefoot .flegal a:focus-visible{color:var(--color-fg-accent-on-brand)}
footer.sitefoot .flegal a[aria-current=page]{color:#fff}
footer.sitefoot .so{display:block;width:20px;height:20px;flex:none;opacity:.72;
  background:center/contain no-repeat;transition:opacity 150ms ease}
footer.sitefoot .so:hover,footer.sitefoot .so:focus-visible{opacity:1}
footer.sitefoot .so-li{background-image:url(assets/logos/social-linkedin.svg)}
footer.sitefoot .so-ig{background-image:url(assets/logos/social-instagram.svg)}
footer.sitefoot .so-yt{background-image:url(assets/logos/social-youtube.svg)}


@media(max-width:960px){
section{scroll-margin-top:116px}
.g12{grid-template-columns:1fr}
.svc .hd,.svc .list,.model .col,.model .hd,.pairnote .nm,.pairnote p,.labline .nm,.labline p,.contact .hd,.contact .act,.research .head,.areas,.oulu .hd,.strands{grid-column:1/-1}
.hero h1{font-size:44px}
.areas,.garage,.envs,.research .head,.env .top,.pairnote,.labline,.hero .verbs,.oulu .hd,.model .hd,.strands{grid-template-columns:1fr}
.envs .gn{min-height:0}
.hero .verbs{gap:0;margin-top:40px}
.hero .verbs .v{border-left:none;padding:24px 0 0}
.oulu .hd .lead,.model .hd .lead{justify-self:start;max-width:none;margin-top:20px}
.strands{border-top:none}
.strands div{padding:28px 0;border-top:1px solid var(--aic-neutral-300);border-bottom:none}
.strands p{max-width:none}
.split{background:none;padding:0}
.split .row{grid-template-columns:1fr;border-bottom:1px solid var(--aic-neutral-300)}
.split .hdr{display:none}
.split .cl,.split .cr{grid-template-columns:36px 1fr;border-top:none;align-items:start}
.split .cl{padding:24px 24px 22px;background:var(--aic-neutral-50)}
.split .cr{padding:22px 24px 26px;background:var(--aic-blue-900)}
.split .pl{display:block;font-family:var(--font-display-narrow);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-neutral-600);margin-bottom:8px}
.split .cr .pl{color:var(--aic-orange-600)}
.split .cl p,.split .cr p{font-size:17px}
.lockup{gap:14px;height:44px;margin-bottom:24px}
.lockup .aio{height:44px;width:97.9px}
.lockup .aic{height:35.6px;width:71.6px}
.lockup .desc{font-size:13px;line-height:14px}
.model .col+.col{margin-top:56px}
.areas .a{grid-template-columns:1fr;border-right:none!important;border-bottom:1px solid var(--aic-neutral-300)!important;min-height:0}
.areas .pic{width:96px;height:96px}
.svc .row{grid-template-columns:1fr;gap:8px}
.garage .txt{max-width:none;margin-left:0;padding:80px 32px}
.garage .ph{min-height:320px}
.env .top{gap:24px}
.env .num{font-size:140px}
.contact .act{justify-self:start;text-align:left;margin-top:32px}
.sec{padding:80px 0}
h2,.garage h2,.contact h2,.scope p,.model h2{font-size:32px}
.lang{grid-row:1;grid-column:2;margin-right:12px} /* vali ITEE-merkkiin: ruudukon 9-12 px luki liian ahtaana puhelimella (palaute 10.9.2026) */
.itee{grid-row:1;grid-column:3;width:36px;height:36px}
nav.sitenav{height:auto}
nav.sitenav .in{grid-template-columns:1fr auto auto;height:auto;padding:14px 20px;gap:12px}
.navlinks{grid-row:2;grid-column:1/-1;justify-content:flex-start;gap:20px;overflow-x:auto;padding-bottom:2px}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

.areas .pic-local{background-image:url(assets/logos/aio-theme-local-light.svg)}
.areas .pic-human{background-image:url(assets/logos/aio-theme-human-light.svg)}
.areas .pic-physical{background-image:url(assets/logos/aio-theme-physical-light.svg)}
.areas .pic-connected{background-image:url(assets/logos/aio-theme-connected-light.svg)}

/* Hero-canvas. Verkkokentta piirtaa oman pohjagradienttinsa ja hoitaa
   otsikon luettavuuden alfakertoimella, joten .ov1 ja .ov2 eivat ole
   kaytossa. Niiden saannot jaavat, koska esikatselun valokuvaversio
   kayttaa niita. */
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero .wrap{z-index:2}

/* ── Yrityksen polku ──────────────────────────────────────────────────────
   Porrastettu nuolipalkki strategiaesityksen sivun 2 mukaan. Savyt tulevat
   sinisen virallisesta asteikosta 100 -> 900, ja viimeinen vaihe on
   brandin oranssi, koska esityksessakin se on ainoa oranssi: jatkuva
   kehitys ei paaty. Ei keksittyja saveja.

   Nuolen muoto tehdaan clip-pathilla ja lomitus negatiivisella
   marginaalilla, jolloin karki asettuu seuraavan lovaan. Teksti saa
   vasempaan reunaan tilaa loven verran, joten mikaan ei ole kiinni
   reunassa. */
.journey{background:var(--aic-neutral-50)}
.journey .hd{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:56px}
.journey .hd h2{max-width:18ch}
.journey .hd .lead{justify-self:end;max-width:44ch}

.journey .rail{grid-column:1/13;display:flex;justify-content:space-between;gap:24px;margin-bottom:14px}
.journey .rail .lb{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-orange-900)}
.journey .rail .lb.r{color:var(--aic-neutral-600);text-align:right}
.journey .steps{grid-column:1/13;display:flex;align-items:stretch}
.journey .st{flex:1 1 0;min-width:0;display:flex;align-items:center;
  min-height:78px;padding:14px 34px 14px 36px;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%)}
.journey .st + .st{margin-left:-20px}
.journey .st:first-child{padding-left:24px;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%)}
/* Kuudes laatta on .s6, ei :last-child: 17.9.2026 alkaen paluureitti .back on
   .steps-kontin viimeinen lapsi (muutosloki 074), joten :last-child osuisi
   siihen eika laattaan, ja laatan oikea paa muuttuisi karjeksi. */
.journey .st.s6{padding-right:24px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%)}
.journey .st h3{font-size:15px;font-weight:600;line-height:1.25;letter-spacing:0;text-wrap:pretty}

/* Sinisen virallinen asteikko, vaaleasta tummaan, paatteena brandin oranssi. */
.journey .s1{background:var(--aic-blue-100)}
.journey .s2{background:var(--aic-blue-200)}
.journey .s3{background:var(--aic-blue-500)}
.journey .s4{background:var(--aic-blue-700)}
.journey .s5{background:var(--aic-blue-900)}
.journey .s6{background:var(--aic-orange-600)}
.journey .s1 h3,.journey .s2 h3{color:var(--aic-blue-900)}
.journey .s3 h3,.journey .s4 h3,.journey .s5 h3{color:#fff}
.journey .s6 h3{color:var(--aic-neutral-900)}

/* Paluureitin nimion typografia. Vari, sijainti ja reitti itse ovat tiedoston
   lopun PALUUSILMUKKA-lohkossa (17.9.2026). */
.journey .back p,.loop .back p{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-orange-900);margin:0}

/* ── AIC Loop ─────────────────────────────────────────────────────────────
   Kolme vaihetta. 3px oranssi ylareuna on sama kuvio kuin The model
   -osion kahdessa sarakkeessa, joten mitaan uutta ei keksita. */
.loop .hd{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:56px}
.loop .hd h2{max-width:20ch}
.loop .hd .lead{justify-self:end;max-width:44ch}
.loop .cyc{grid-column:1/13;display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;gap:24px;align-items:start}
.loop .flow{align-self:center;justify-self:center;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:11px solid var(--aic-orange-600)}
.loop .stage{border-top:3px solid var(--aic-orange-600);padding-top:24px}
.loop .stage h3{font-size:24px;color:var(--aic-blue-900);margin:14px 0 12px}
.loop .stage p{font-size:16px;line-height:1.55;color:var(--aic-neutral-700);max-width:32ch}
.loop .note{grid-column:1/13;margin-top:24px;font-size:15px;line-height:1.55;color:var(--aic-neutral-600)}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIIVISUUS
   Nama saannot ovat tarkoituksella tiedoston lopussa. Samalla
   spesifisyydella myohempi saanto voittaa, joten media-lohkojen on oltava
   kaikkien desktop-vastineidensa jalkeen. Aiemmin ne olivat ennen, jolloin
   osa mobiilisaannoista ei koskaan astunut voimaan.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kapea desktop ja tabletti vaakatasossa, 961-1180 px ─────────────────
   Ei omaa taittoa, vain tiukennuksia. Kuuden vaiheen nuolipalkki ja
   kolmen vaiheen Loop ovat ne kaksi kohtaa, jotka ahtautuvat ensin. */
@media(min-width:961px) and (max-width:1180px){
  .journey .st{padding:12px 26px 12px 30px}
  .journey .st:first-child{padding-left:18px}
  .journey .st.s6{padding-right:18px}
  .journey .st h3{font-size:14px}
  .loop .cyc{grid-template-columns:1fr 22px 1fr 22px 1fr;gap:18px}
  .loop .stage h3{font-size:21px}
  .hero h1{font-size:58px}
  .contact h2{font-size:var(--text-4xl)}
  .env .num{font-size:190px}
}

@media(max-width:960px){

  /* ── Ruudukon romahdus ────────────────────────────────────────────────
     Juurisyy, joka rikkoi The modelin, Two marks two roles -tekstit,
     AIC Labin ja How it worksin pystymobiilissa.

     .g12 on mobiilissa yksisarakkeinen, mutta lapsilla oli yha
     grid-column:1/13. CSS luo silloin yksitoista implisiittista saraketta,
     joissa on 32 pikselin valit. Se on 352 pikselia pelkkaa valia noin 350
     pikselin ruudulla, joten ruudukko kasvaa leveammaksi kuin naytto ja
     sisalto valuu ulos.

     Aiempi saanto luetteli lapset nimeltä ja unohti .pairnote, .labline ja
     .journey .rail. Nyt catch-all hoitaa kaikki, myos tulevat. */
  .g12{grid-template-columns:1fr;gap:0}
  .g12 > *{grid-column:1/-1}
  /* Kahden luokan valitsimet ovat spesifisempia kuin catch-all, joten
     ne on lueteltava erikseen. */
  .model .col,.model .hd,.svc .hd,.svc .list,.contact .hd,.contact .act,
  .research .head,.oulu .hd,.journey .hd,.journey .rail,.journey .steps,
  .loop .hd,.loop .cyc,.loop .note{grid-column:1/-1}

  /* Sisemmat 12-sarakkeiset ruudukot samasta syysta */
  .pairnote,.labline{grid-template-columns:1fr;gap:0}
  .pairnote .nm,.pairnote p,.labline .nm,.labline p{grid-column:1/-1}
  .pairnote .nm,.labline .nm{margin-bottom:8px}

  /* ── Navigaatio ───────────────────────────────────────────────────────
     Linkkirivi vieritetaan vaakasuunnassa, mutta selaimen oma
     vierityspalkki nakyi navigaation alla ja luki iframen reunana.
     Piilotetaan palkki ja kerrotaan vieritettavyys haivytyksella oikeassa
     reunassa. */
  /* ── Navigaatio ───────────────────────────────────────────────────────
     Yksi rivi, ei vieritysta eika hampurilaista.

     Vaakavieritys piilotti puolet linkeista ja haivytys leikkasi
     viimeisen kesken sanan. Kaksi rivia taas teki palkista korkean.
     Hampurilainen on tarkoitettu piilottamaan monta sivua, ja tassa on
     kuusi ankkuria yhdelle sivulle: se lisaisi napautuksen poistamatta
     mitaan ongelmaa.

     Ratkaisu: lyhyemmat nimet vain mobiilissa. Jokaisella linkilla on
     kaksi tekstiasua, ja aria-label kantaa oikean nimen, joten
     ruudunlukija ei lue molempia perakkain.

     Mitoitus 390 px naytolla: 41 merkkia noin 6,2 px levyisina on 254 px,
     plus viisi 11 px valia, yhteensa 309 px. Kaytettavissa 350 px.
     flex-wrap:wrap on tarkoituksellinen turvaverkko. Jos arvio leveydesta
     on pielessa jollain naytolla, linkit rivittyvat kahdelle riville
     eivatka aiheuta vaakavieritysta. Paras tapaus yksi rivi, pahin kaksi.
  */
  .navlinks{display:flex;flex-wrap:wrap;overflow:visible;
    gap:6px 11px;padding-bottom:0;justify-content:space-between;
    -webkit-mask-image:none;mask-image:none}
  .navlinks a{padding:0;font-size:10px;letter-spacing:.08em}
  .navlinks .l{display:none}
  .navlinks .s{display:inline}
  /* Palkki matalammaksi: logo ja linkkirivi lahemmas toisiaan. */
  nav.sitenav .in{padding:11px 20px;gap:9px}
  .lang{font-size:10px;gap:6px;letter-spacing:.08em;line-height:18px;height:18px}

  /* ── Hero ─────────────────────────────────────────────────────────────
     Vaakatasossa puhelimen korkeus on noin 390 px, jolloin
     calc(100vh - 72px) jattaisi herolle alle 320 pikselia eika otsikko
     mahdu. Pohja estaa sen. */
  .hero{min-height:max(560px,calc(100vh - var(--nav-h,72px)));min-height:max(560px,calc(100svh - var(--nav-h,72px)))}

  /* ── Scope rule ───────────────────────────────────────────────────────
     Verkkokentta on 1920 x 560. cover-skaalaus pystynaytolla rajaa kuvan
     keskelle, ja keskella on tarkoituksella tyhja vyohyke tekstille, joten
     taustaa ei nakynyt lainkaan. Siirretaan ikkuna vasemmalle, missa
     nodeja on tiheasti. */
  .scope{padding:72px 0}
  .scope:before{opacity:.42;background-position:18% 50%;background-size:auto 118%}

  /* ── Yrityksen polku ──────────────────────────────────────────────────
     Nuolipalkki kaantyy pystyyn. Karki osoittaa alas ja pesiytyy
     seuraavan loveen, joten porrastus ja suunta sailyvat. Aiemmin ne
     olivat pelkkia suorakaiteita, mika hukkasi koko idean. */
  .journey .hd,.loop .hd{grid-template-columns:1fr;margin-bottom:36px}
  .journey .hd .lead,.loop .hd .lead{justify-self:start;max-width:none;margin-top:16px}

  /* Research-osion oikea palsta jai handoffissa oikealle tasatuksi myos
     yhden palstan taitossa: .rt piti justify-self:end ja text-align:right
     -arvonsa, joten kappale ja Working model -merkinta valuivat ruudun
     oikeaan reunaan. Sama korjaus on jo tehty .oulu-, .model-, .contact-,
     .journey- ja .loop-osioille. Tama oli listalta unohtunut kuudes. */
  .research .head .rt{justify-self:start;text-align:left;max-width:none;margin-top:16px}
  .journey .rail{flex-direction:column;gap:6px;margin-bottom:16px}
  .journey .rail .lb.r{text-align:left}
  .journey .steps{flex-direction:column}
  .journey .st{min-height:0;padding:15px 22px 26px;margin-left:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px))}
  .journey .st + .st{margin-left:0;margin-top:-15px}
  .journey .st:first-child{padding-left:22px;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px))}
  .journey .st.s6{padding-right:22px;padding-bottom:15px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
  .journey .st h3{font-size:16px}

  /* ── AIC Loop ─────────────────────────────────────────────────────────
     Nuolet kaantyvat alaspain vaiheiden valiin. */
  .loop .cyc{grid-template-columns:1fr;gap:0}
  .loop .stage p{max-width:none}
  .loop .flow{margin:22px 0;justify-self:start;align-self:start;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:11px solid var(--aic-orange-600);border-bottom:none}

  /* ── Selite ───────────────────────────────────────────────────────────
     Alatunnisteen selite osuisi kapealla naytolla ruudun ulkopuolelle,
     koska se on ankkuroitu oikeaan reunaan. */
}

/* ── Tabletti ja puhelin vaakatasossa: 760-960 px ────────────────────────
   Sivun taitto on tassa jo yksisarakkeinen, mutta navigaatio ei ole
   mobiilinavigaatio. Se palautetaan yhdeksi riviksi taysilla nimilla.

   Mitoitus laskettuna, ei arvattuna. Kaytettavissa oleva keskisarake on
   naytonleveys miinus 314 px (reunapadding 64, tunnus ja kuvausteksti 156,
   ITEE 46, ruudukon valit 48). Kuusi taytta nimea 11 pikselin koossa ja
   12 pikselin valeilla vie 427 px.

     768 px  iPad mini pysty     tilaa 454   mahtuu
     820 px  iPad Air pysty      tilaa 506   mahtuu
     834 px  iPad Pro 11 pysty   tilaa 520   mahtuu
     844 px  iPhone vaaka        tilaa 530   mahtuu

   12 pikselin koossa tarve olisi 523 px, joka ei mahdu iPadin pystynaytolle.
   Siksi juuri tassa valissa kaytetaan 11 pikselia. 961 pikselista ylospain
   palataan handoffin 12 pikseliin.

   Tama tekee palkista myos matalamman: mobiilissa linkit ovat omalla
   rivillaan, joten palkki on noin 76 px. Yksirivinen on 72 px. */
@media(min-width:760px) and (max-width:960px){
  nav.sitenav{height:72px}
  nav.sitenav .in{grid-template-columns:auto 1fr auto auto;height:72px;padding:0 32px;gap:24px}
  .lang{grid-row:auto;grid-column:auto}
  .itee{grid-row:auto;grid-column:auto;width:46px;height:46px}
  .navlinks{grid-row:auto;grid-column:auto;flex-wrap:nowrap;justify-content:center;
    gap:12px;overflow:visible;padding-bottom:0}
  .navlinks a{font-size:11px;letter-spacing:.1em;padding:0}
  .navlinks .l{display:inline}
  .navlinks .s{display:none}
  section{scroll-margin-top:88px}

  /* Hero lahemmas tyopoytaa. Tilaa on vaakasuunnassa: otsikko vie 19ch eli
     noin 55 % leveydesta, joten oikea puolisko jaa kentalle ja tunnuksille
     kuten isolla naytolla. Verbit palaavat kolmeen sarakkeeseen, koska
     sarakkeeksi jaa noin 230 px eika teksti ahtaudu. */
  .hero h1{font-size:54px}
  .hero .wrap{padding-top:72px;padding-bottom:44px}
  .hero .verbs{grid-template-columns:repeat(3,1fr);margin-top:44px}
  .hero .verbs .v{border-left:1px solid rgba(255,255,255,.22);padding:24px 20px 0}
  .hero .verbs .v:first-child{border-left:none;padding-left:0}
  .hero .verbs .vt{font-size:20px}
  .hero .verbs p{font-size:14px}
}

/* ── Tabletti pystyssa ja iso puhelin vaakatasossa, 600-960 px ──────────
   Yhden palstan taitto ei tarkoita, etta jokainen ruutu sisallaan olisi
   yhden palstan. iPad mini pystyssa on 768 px, jolloin .wrap on 704 px ja
   Research-kortin sisalle jaa 624 px. Tunnus mahtuu hyvin oikeaan reunaan,
   ja alle pudotettuna se vain pidentaa sivua turhaan.

     tunnus 128 px  ->  tekstille 464 px
     tunnus 160 px  ->  tekstille 432 px

   128 px on valittu siksi, etta se on selvasti pienempi kuin desktopin
   160 px eika kilpaile otsikon kanssa kapeammassa kortissa.

   Why Oulu palaa samasta syysta kahteen palstaan: 704 px kahtena
   sarakkeena antaa tekstille 304 px, mika on sama kuin desktopin 305 px.
   Kolme palstaa antaisi 181 px, joka on liian kapea 40 pikselin tunnukselle
   ja otsikolle. */
@media(min-width:600px) and (max-width:960px){
  .areas .a{grid-template-columns:1fr 128px;gap:32px}
  .areas .pic{width:128px;height:128px;align-self:end}

  .strands{grid-template-columns:1fr 1fr;gap:0 32px}
  .strands div{padding:28px 24px 28px 0}

  /* Nelja saraketta on tassa leveydessa liian kapea nimille kuten
     PrintoCent Pilot Factory, mutta yksi sarake tekee kuudestatoista
     rivista pitkan pinon. Kaksi saraketta pitaa ryhmat luettavina. */
  .envs{grid-template-columns:repeat(2,1fr);gap:40px 40px}
  .envs .gn{min-height:2.7em}

  /* ── The model: kaksi saraketta takaisin ──────────────────────────────
     Yhden palstan romahdus alkoi 960:sta, joten iPad pystyssa (768) ja
     puhelin vaakatasossa (852) latoivat AI/O:n ja AIC:n allekkain vaikka
     tilaa oli 704 ja 788 px. Kaksi roolia rinnakkain on koko osion idea:
     allekkain ne lukevat perakkaisina vaitteina eivatka parina.

       704 px  ->  sarake 336 px   (tunnus 98 + vali 14 + kuvaus n. 102)
       627 px  ->  sarake 297 px   (pienin, 667 px:n puhelin vaakatasossa)

     Otsikot ovat eri pituisia, joten luettelot alkaisivat eri korkeudelta.
     Kahden rivin varaus emeina on sama tekniikka kuin .envs .gn:ssa. */
  .model .g12{grid-template-columns:1fr 1fr;gap:0 32px}
  .model .hd,.pairnote,.labline{grid-column:1/-1}
  .model .col{grid-column:auto}
  .model .col+.col{margin-top:0}
  .model h3{min-height:2.4em}

  /* Nimikko ja teksti rinnakkain kuten tyopoydalla. 168 px riittaa
     pisimmalle nimikolle ("KAKSI MERKKIA, KAKSI ROOLIA") kahdella
     rivilla myos kapeimmassa tapauksessa. */
  .pairnote,.labline{grid-template-columns:168px 1fr;gap:0 32px}
  .pairnote .nm,.pairnote p,.labline .nm,.labline p{grid-column:auto}
  .pairnote .nm,.labline .nm{margin-bottom:0}

  /* Ympariston luku otsikon viereen. Pystysuunnassa se saastaa noin
     170 px, ja luku on osion tunnistettava elementti: allekkain se
     luki irrallisena numerona otsikon ylapuolella. */
  .env .top{grid-template-columns:auto 1fr;gap:32px}

  /* Palvelurivit takaisin kolmeen sarakkeeseen. 704 px:sta jaa
     numerolle 56, nimelle 261 ja kuvaukselle 339 px. */
  .svc .row{grid-template-columns:56px 1fr 1.3fr;gap:24px}
}

/* ── Pieni puhelin pystyssa, alle 420 px ────────────────────────────────
   Vain kirjasinkokoja ja marginaaleja. Ei uutta taittoa. */
/* ── Heron tunnusrivi kapealla naytolla ─────────────────────────────────
   Nelja tutkimusaluetunnusta otsikon ylapuolella. Paikkamerkit ovat tyhjia:
   hero-network.js mittaa niiden sijainnin ja piirtaa animoidut tunnukset
   niiden paalle, joten rivi on osa tekstivirtaa mutta liike sailyy.
   28 px on pienin koko, jossa tunnuksen 2/56-viiva osuu tasan yhteen
   pikseliin eika haalene. */
.hero .tkrow{display:none}
/* 759.98 eika 760: tablettilohko alkaa 760:sta, ja tasan siina pisteessa
   molemmat osuisivat. Sama raja on hero-network.js:ssa (W < 760). */
@media(max-width:759.98px){
  /* Tunnusrivi on kiintea kaista, ei vaakarivi (11.9.2026, muutosloki
     029). Nelja tunnusta ovat samassa hajakuviossa kuin tabletin
     kaistassa (HERO_BAND: x .14/.62/.33/.93, y .12/.03/.95/.72), ja
     kaista on saman korkuinen molemmilla kielilla, joten EN ja FI
     latoutuvat samoin. Korkeus on mitattu: 375 px:n puhelimessa
     (375x629 avaajan kanssa) FI:n verbirivi paattyy 466/487, joten
     kaista + vali saa olla enintaan 64 px. Ala kasvata ilman uutta
     mittausta. hero-network.js lukee tunnusten paikat ja koon DOMista. */
  .hero .tkrow{display:block;position:relative;height:56px;margin:0 0 8px}
  .hero .tkrow .tk{position:absolute;width:28px;height:28px}
  .hero .tkrow .tk[data-area="local"]{left:calc((100% - 28px)*.14);top:3px}
  .hero .tkrow .tk[data-area="human"]{left:calc((100% - 28px)*.62);top:1px}
  .hero .tkrow .tk[data-area="physical"]{left:calc((100% - 28px)*.33);top:27px}
  .hero .tkrow .tk[data-area="connected"]{left:calc((100% - 28px)*.93);top:20px}
  /* 380 px:sta ylospain (iPhone 12-16, Pixel) tekstilohkon alle jaa
     393x660:ssa avaajan kanssa FI:lla 94 px, joten kaista voi olla
     korkeampi ja tunnukset 32 px kuten kaistassa. 375-luokka jaa ylla
     olevaan mittaan. */
  @media(min-width:380px){
    .hero .tkrow{height:76px;margin-bottom:12px}
    .hero .tkrow .tk{width:32px;height:32px}
    .hero .tkrow .tk[data-area="local"]{left:calc((100% - 32px)*.14);top:5px}
    .hero .tkrow .tk[data-area="human"]{left:calc((100% - 32px)*.62);top:1px}
    .hero .tkrow .tk[data-area="physical"]{left:calc((100% - 32px)*.33);top:42px}
    .hero .tkrow .tk[data-area="connected"]{left:calc((100% - 32px)*.93);top:32px}
  }

  /* Navin korkeus on kapealla 81 px, ei 72: linkit ottavat oman rivinsa.
     10.9.2026 alkaen vahennys tulee muuttujasta --nav-h, jonka
     nav-height.js mittaa navista (Kuvaa tarpeesi -avaaja tekee navista
     alle 600 px:n leveydella 142 px). 81 on varakoko ilman JavaScriptia,
     jolloin avaajaakaan ei ole.

     560 px:n lattia poistettiin 10.9.2026. Se oli tehty vaakatason
     puhelinta (667x375) varten, mutta tiedoston lopun vaakatasolohko
     (max-height:460px) ohittaa taman saannon ja mitoittaa heron itse.
     Pystyasennossa lattia vain tyonsi verbirivin taitteen alle lyhyilla
     nakymilla (375x629 ja 393x660 avaajan kanssa), koska sisalto
     keskitetaan ja 560 on enemman kuin nakymaan mahtuu. Heron minimi on
     nyt sisalto tai nakyma miinus navi, kumpi on suurempi.

     Sisalto keskitetaan pystysuunnassa. Kun se mahtuu min-heightin sisaan,
     flex-end kerryttaisi kaiken liian tilan ylareunaan. Nav on sticky ja
     pysyy ruudulla, joten heron ylatyhja ei suojaa mitaan. */
  .hero{min-height:calc(100vh - var(--nav-h,81px));min-height:calc(100svh - var(--nav-h,81px));
    align-items:center;--hero-layout:row}
  /* Skripti lisaa luokan band, kun otsikon ylle jaa vahintaan 100 px:n
     kaista heron omasta korkeudesta mitattuna: tunnusrivi pois ja teksti
     alareunaan, jolloin tunnukset levitetaan kaistaan kuten muissakin
     nakymissa. Ilman skriptia rivi nakyy. Paatos ei riipu ikkunan
     korkeudesta, joten se ei vaihdu vierityksessa. */
  .hero.band{align-items:flex-end}
  .hero.band .tkrow{display:none}
  .hero .wrap{padding-top:40px;padding-bottom:32px}
  .hero h1{margin-bottom:20px}
  .hero .verbs{margin-top:26px}
}

/* Isot puhelimet ovat 428 tai 430 px, joten heron tiivistys alkaa 440:sta.
   Muu 420 px:n lohko jatetaan ennalleen. */
@media(max-width:440px){
  /* Valistys -.025 -> -.03em pudottaa otsikon kuudelta rivilta viidelle
     375 ja 390 pikselissa. Koko on jo alarajallaan (32 px), joten
     valistys on ainoa jaljella oleva keino vaikuttaa rivimaaraan. */
  .hero h1{font-size:32px;letter-spacing:-.03em}
  .hero .lead{font-size:16px}
}

/* Alle 400 px: verbi ja selite samalle riville, jolloin kolme lausetta
   mahtuvat ilman etta niita piilotetaan. Oranssi jaa erottimeksi. */
/* Verbi ja selite samalla rivilla kaikilla puhelimilla. Raja oli 400 px,
   jolloin 401-440 px:n puhelimet (Pro Max, Pixel) saivat pinotun version
   ja tekstilohko oli 544 px 367:n sijaan, eika otsikon ylle jaanyt
   kaistaa. Muutettu 440:een 10.9.2026, sama raja kuin heron tiivistyksella. */
@media(max-width:440px){
  .hero .verbs .v{padding:14px 0 0}
  .hero .verbs .vt{display:inline;font-size:16px;margin:0}
  /* Sitovat valilyonnit (\00A0) molemmin puolin. Tavallinen valilyonti
     pseudoelementin sisallon lopussa katoaa, kun heti perassa alkaa
     seuraava inline-elementti: WebKit kutistaa sen pois ja rivilla luki
     "Creates impact \00B7Makes results visible." */
  .hero .verbs .vt:after{content:"\00A0\00B7\00A0";color:var(--aic-orange-600)}
  .hero .verbs .r{display:none}
  .hero .verbs p{display:inline;font-size:14px;max-width:none}
}

@media(max-width:420px){
  .wrap{padding:0 20px}
  /* 320 px naytolla kaytettavissa on 280 px, joten kirjasin ja valistys
     tiukkenevat viela kerran. 41 merkkia noin 5,5 px levyisina on 226 px,
     plus viisi 8 px valia, yhteensa 266 px. */
  .strands .ik{width:34px;height:34px}
  .navlinks{gap:8px}
  .navlinks a{font-size:9.5px;letter-spacing:.04em}
  /* Heron otsikko ja ingressi tulevat 440 px:n lohkosta (32 ja 16 px).
     Ne olivat tassa 34 ja 17, ja koska tama lohko on tiedostossa
     myohemmin, se olisi voittanut ja kumonnut tiivistyksen juuri
     pienimmilla naytoilla, joita varten se tehtiin. */
  h2,.garage h2,.contact h2,.scope p,.model h2{font-size:27px}
  .contact h2{font-size:38px}
  .env .num{font-size:104px}
  .sec{padding:60px 0}
  .journey .st h3{font-size:15px}
  .loop .stage h3{font-size:21px}
  .split .cl,.split .cr{padding-left:18px;padding-right:18px}
}

/* ── ITEE-tunnuksen selite ────────────────────────────────────────────────
   Tunnus on pelkka symboli, joten sighted-kayttaja ei tieda mita ITEE
   tarkoittaa eika etta siita paasee eteenpain. Selite aukeaa seka hiirella
   etta nappaimistolta, koska pelkka :hover jattaisi nappaimistokayttajan
   ilman. Ei title-attribuuttia: se ei aukea nappaimistolta eika
   kosketuksella, ja ruudunlukija lukisi sen aria-labelin lisaksi.
   aria-hidden, koska sama teksti on jo linkin aria-labelissa. */
a.itee,footer.sitefoot a.itee-f{position:relative}
.tip{position:absolute;right:0;width:max-content;max-width:250px;
  background:var(--aic-blue-950);color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-md);
  padding:9px 12px;font-family:var(--font-body);font-size:12px;line-height:1.45;
  text-align:left;pointer-events:none;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity 150ms ease,transform 150ms ease,visibility 150ms}
.tip b{display:block;font-family:var(--font-display-narrow);font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aic-orange-600);margin-bottom:3px}
a.itee .tip{top:calc(100% + 12px)}
footer.sitefoot a.itee-f .tip{bottom:calc(100% + 12px)}
a.itee:hover .tip,a.itee:focus-visible .tip,
footer.sitefoot a.itee-f:hover .tip,footer.sitefoot a.itee-f:focus-visible .tip{
  opacity:1;visibility:visible;transform:none}

/* Kosketuslaitteilla hoveria ei ole, joten selite ei aukea koskaan.
   Se ei haittaa: linkki toimii ja aria-label on paikallaan. */
@media(hover:none){.tip{display:none}}
/* Alatunnisteen ITEE-logo siirtyy vasempaan reunaan vasta, kun rivi ei
   mahdu (EN alle noin 594 px, FI alle noin 485 px; mitattu 1.10.2026).
   Sääntö oli 960 px:n kyselyssä, jolloin 600–960 px:n näkymissä oikealla
   olevan logon vihje ulottui sivun reunan yli ja sivua sai vierittää
   vaakasuunnassa, vaikka vihje oli piilossa. overflow-x:clip estää
   piilotettua vihjettä leventämästä sivua missään leveydessä. */
@media(max-width:599.98px){footer.sitefoot a.itee-f .tip{right:auto;left:0;max-width:calc(100vw - 56px)}}
footer.sitefoot{overflow-x:clip}


/* ── Puhelin vaakatasossa, matala ikkuna ────────────────────────────────
   Vaakatasossa korkeutta on 375-430 px, ja pelkka otsikko vie siita yli
   puolet. Tayden ruudun heroa ei siksi yriteta: se leikkasi otsikon
   kesken rivin, ja ingressi seka verbit jaivat kokonaan taitteen alle.

   Ehto on korkeus eika leveys. Vaakataso ei ole leveysasia: 844x390 osuu
   tablettilohkoon (760-960) ja 667x375 puhelinlohkoon, mutta ongelma on
   molemmissa sama. Sama sailytys koskee myos matalaa selainikkunaa
   tyopoydalla.

   Hero on nyt sisaltonsa kokoinen. Otsikko ja ingressi mahtuvat taitteen
   ylapuolelle, verbit alkavat heti sen alta kolmessa sarakkeessa, koska
   leveytta on runsaasti vaikka korkeutta ei ole.

   Otsikon mitta on 30ch pienemmalla kirjasinkoolla, jolloin palsta pysyy
   noin 55 %:ssa leveydesta. Se on tarkeaa yli 760 pikselin leveydella,
   missa tunnukset piirtyvat kenttaan kohtiin x 0,58-0,90: leveampi palsta
   menisi niiden paalle.

   .tkrow jatetaan nakyviin alle 760 pikselin leveydella. Sita ei saa
   piilottaa CSS:lla, koska hero-network.js lukee sen sijainnin DOMista ja
   jattaisi tunnukset piirtamatta kokonaan. Vain alaväli tiukkenee. */
@media(max-height:460px) and (orientation:landscape){
  /* Hero taytti aiemmin vain sisaltonsa verran (min-height:0), mika
     naytti 852 x 393 -puhelimessa noin 160 pikselin valkoisena kaistana
     heron alla: seuraava osio on valkoinen eika sen sisaltoa nay viela.
     Nyt pohja on ruutu miinus navin korkeus. 81 px on kapean nayton
     kaksirivinen navi; 852 pikselissa navi on 72, joten sinistä jaa
     yhdeksan pikselia lyhyeksi eika se nay. Sisalto pysyy ylareunassa,
     koska ylimaarainen tila on heron pohjalla eika sen ylla. */
  .hero{min-height:calc(100vh - var(--nav-h,81px));min-height:calc(100svh - var(--nav-h,81px));
    align-items:flex-start}
  .hero .wrap{padding-top:14px;padding-bottom:12px}
  .hero h1{font-size:30px;max-width:30ch;margin-bottom:10px}
  /* Ingressin marginaali nollataan, jotta valit ovat luettavissa
     saannoista eivatka selaimen oletuksesta. Ilman tata p:n oletus
     (1em) romahtaa verbien margin-topin kanssa ja vie 6 px enemman. */
  /* Vaakatasossa ingressi saa koko palstan leveyden. 52ch taittoi
     suomenkielisen virkkeen kolmelle riville, ja kolmas rivi tyonsi
     verbirivin taitteen ali: mitattuna viimeinen rivi leikkautui.
     Koko leveydella virke on kaksirivinen molemmilla kielilla. */
  .hero .lead{font-size:15px;max-width:none;margin:0}

  /* Verbit kolmeen sarakkeeseen jakoviivoineen. Kapean nayton
     yhden rivin tiivistys (h3 inline + erotin) puretaan, koska
     sarakkeessa siihen ei ole syyta. */
  .hero .verbs{grid-template-columns:repeat(3,1fr);margin-top:12px}
  .hero .verbs .v{border-left:1px solid rgba(255,255,255,.22);padding:10px 16px 0}
  .hero .verbs .v:first-child{border-left:none;padding-left:0}
  .hero .verbs .vt{display:block;font-size:15px;margin:0 0 4px}
  .hero .verbs .vt:after{content:none}
  .hero .verbs .r{display:none}
  .hero .verbs p{display:block;font-size:13px;max-width:none}
}

/* ── Heron laatikko kahdessa erikoistapauksessa ──────────────────────────
   Molemmat korjaavat saman asian: kentan neljä keskusta on mitoitettu
   tyopoydan suhteille (teksti vasemmalla alhaalla, kentta oikealla ylhaalla),
   ja kun laatikko muuttaa muotoa, sama sommittelu on palautettava CSS:lla
   ennen kuin kentta voi asettua oikein. Kentan puoli on hero-network.js:n
   HERO_SHAPES. */

/* Puhelin vaakatasossa, 760 px ja leveampi. Teksti sai koko leveyden, joten
   kentalle ei jaanyt lainkaan omaa aluetta ja tunnukset piirtyivat ingressin
   ja verbirivin paalle. Nyt oikea kolmannes on varattu kentalle ja teksti on
   alareunassa kuten tyopoydalla.

     852 px  ->  tekstipalsta 513 px, kentalle 307 px
     932 px  ->  tekstipalsta 564 px, kentalle 336 px

   Alle 760 pikselin vaakataso (esim. 667 x 375) jaa ennalleen: siella
   tunnukset ovat merkkauksen rivissa eika teksti mahtuisi kapeampaan
   palstaan. */
@media(max-height:460px) and (orientation:landscape) and (min-width:760px){
  .hero{align-items:flex-end}
  .hero .wrap{padding-right:36%}
}

/* Aiempi lohko (max-width:759.98px) and (min-height:760px) piilotti
   tunnusrivin korkeilla puhelimilla. Poistettu 10.9.2026: mediakysely
   mittasi ikkunan ison korkeuden, mutta hero on 100svh-pohjainen, joten
   kaista ei oikealla laitteella ollut olemassa ja tunnukset osuivat
   otsikon paalle. Sama asia tehdaan nyt skriptissa heron omasta
   korkeudesta, ks. .hero.band ylla. */

/* Tabletti pystyssa: hero ei ole ruudun korkuinen vaan sisalto plus kaista.
   ------------------------------------------------------------------------
   768 x 1024 -naytolla taytta korkeutta noudattava hero on 950 px, josta
   teksti vie 452. Ylle jaa 500 pikselia kenttaa, ja se luki tyhjana
   vaikka tunnukset siirrettiin sinne. Ongelma on maara, ei sijoittelu:
   tyopoydalla vastaava kaista on noin 364 px, eli tabletilla sita oli
   puolitoista kertaa enemman.

   Nyt kaista on kiinnitetty 340 pikseliin ja hero on sen plus sisalto.
   Kaista on siis sama joka laitteessa, ja kentta nayttaa samalta.

     768 x 1024   hero 792, taitteen alle jaa 160 px seuraavaa osiota
     820 x 1180   hero 792, taitteen alle jaa 316 px
     1024 x 1366  hero 680, taitteen alle jaa 614 px

   Tama on tietoinen poikkeus saantoon, jonka mukaan hero ulottuu
   taitteeseen. Poikkeus koskee vain pystyasentoa vahintaan 760 pikselin
   leveydella: siella suhde on niin korkea, etta taysi korkeus tuottaa
   tyhjaa eika tunnelmaa. Vaakatasossa ja puhelimessa saanto patee
   entiseen tapaan.

   Kentan puolella --hero-layout:band kertoo hero-network.js:lle, etta
   tunnukset sijoitetaan otsikon ylapuoliseen kaistaan. */
@media(orientation:portrait) and (min-width:760px){
  .hero{min-height:0;--hero-layout:band}
  .hero .wrap{padding-top:340px}
}

/* Puhelin vaakatasossa: hero on noin 300 px, joten hajakaistaan ei ole
   varaa. Tunnusrivi palaa tiiviiksi vaakariviksi (28 px, vali 22 px).
   Leveysehto on pakollinen: ilman sita saanto nayttaisi rivin myos
   852 x 393 -nakymassa, jossa tunnukset ovat sarakkeessa (column). */
@media(max-width:759.98px) and (max-height:460px) and (orientation:landscape){
  .hero .tkrow{display:flex;position:static;height:auto;gap:22px;margin:0 0 8px}
  .hero .tkrow .tk{position:static;width:28px;height:28px;flex:none}
}

/* Ohituslinkki (WCAG 2.4.1): nakyy vain kohdistettuna. Lisatty 10.9.2026. */
.skip{position:absolute;left:-9999px;top:16px;z-index:40;background:#fff;color:var(--aic-blue-900);font-family:var(--font-body);font-size:15px;font-weight:600;padding:10px 14px;border:2px solid var(--aic-orange-600);border-radius:var(--radius-md);text-decoration:none}
.skip:focus{left:16px;outline:none}

/* ═══════════════════════════════════════════════════════════════════════
   PALUUSILMUKKA · .journey ja .loop
   Liitettäväksi styles.css:n loppuun, responsiivisten lohkojen jälkeen.
   17.9.2026. Korvaa rivien 431-433 ja 448 .back-toteutuksen.

   Miksi näin: nykyinen .back on border-top koko 12 sarakkeen yli, eli se on
   määritelmällisesti vaakaviiva reunasta reunaan riippumatta siitä mitä sen
   alle kirjoitetaan. Paluun on päätyttävä kesken leveyttä, kohteen alle,
   jotta se ei voi lukea sivun jakajana. Journeyssä kohde on askel 2
   (Research), Loopissa vaihe 02 (Frontier research).

   Reitti on yksi elementti: kolme reunaa yhdessä laatikossa, pyöristetyt
   kulmat, kärki päätepisteessä ja nimiö alajuoksun päällä. Ei kuvia, ei
   skriptejä, ei liukuväriä. Kaari on puoliympyrä (säde = puoli korkeutta),
   eli se ei mint uutta muotokieltä vaan pyöristää saman suorakulmaisen
   reitin kulmat.

   Poikkeama ruudukosta: .back siirtyy .g12:n lapsesta .steps- ja
   .cyc-ruudukon lapseksi, koska vain siellä se voi mitoittua laattojen ja
   palstojen mukaan. .g12 ja grid-column:1/13 pysyvät muuten ennallaan.

   Toteutuksen kolme sovitusta luovutukseen (CD/AIO Silmukka, 17.9.2026,
   muutosloki 074), mitattu qlmanage-rigillä 2x-koossa:
   1. Kärki left:-6px, ei -4px. Absoluuttinen lapsi mittaa vasemman reunan
      .back-laatikon padding-reunasta, joka on 2 px viivan sisäpuolella, joten
      -4px jätti kärjen keskiviivan 2 px viivan oikealle puolelle.
   2. Kärjen SVG:llä on osion taustaväri (--back-bg). Viiva alkaa laatikon
      yläreunasta kärjen alta, ja 2 px viiva on kärjen tyvestä 2,4 px matkalla
      kärkeä leveämpi, joten viivan pää näkyi kärjen ohi tylppänä. Tausta
      peittää viivan kärjen alueella, ja viiva alkaa tasan kärjen tyvestä.
   3. Pinotun reitin :before on box-sizing:border-box. Sivuston *-sääntö ei
      koske pseudoelementtejä, joten width:26px + 2 px reuna oli 28 px, ja
      viiva ulottui 2 px kujan ohi laatan tai oranssin yläviivan päälle.
   ═══════════════════════════════════════════════════════════════════════ */

/* Yksi sävy koko reitille, kaikissa leveyksissä: paluu on kaavioviiva eikä
   aksentti. Brändisääntö varaa oranssin aksenteille (reunat, fokusrenkaat,
   yksittäinen CTA) ja kieltää sen vuodattamisen, ja työpöydällä reitti on
   1076 pikselin leveydellä 717 px pitkä. Lisäksi pinotussa taitossa reitin
   yläreuna on samalla linjalla Loopin vaiheen 02 oranssin yläviivan kanssa,
   ja samassa sävyssä ne lukivat yhtenä viivana. Oranssi jää vaiheiden
   yläviivoihin ja kiskon nimiöihin.

   Jos reitti halutaan takaisin oranssiksi, se on yksi rivi:
   --color-loop-line: var(--aic-orange-600) ja nimiölle
   --color-loop-label: var(--aic-orange-900). */
.journey,.loop{--color-loop-line:var(--aic-blue-900);--color-loop-label:var(--aic-blue-900)}
.journey{--back-bg:var(--aic-neutral-50)}
.loop{--back-bg:#fff}

/* Nimiön rivinvaihto on merkkauksessa mutta voimassa vain pinotussa
   taitossa: työpöydällä nimiö katkaisee reittiviivan ja on yksirivinen,
   ja kaksirivisenä se straddlaisi viivan. Yksi sääntö on parempi kuin
   kaksi merkkausversiota. */
@media(min-width:961px){.journey .steps > .back p br,.loop .cyc > .back p br{display:none}}

/* Nimiö ja kärki, yhteiset. Nimiö on oikeaa tekstiä, kärki koriste. */
.journey .steps > .back p,.loop .cyc > .back p{position:absolute;left:50%;top:calc(100% - 1px);transform:translate(-50%,-50%);margin:0;padding:0 14px;background:var(--back-bg);white-space:nowrap;color:var(--color-loop-label)}
.journey .steps > .back .ar,.loop .cyc > .back .ar{position:absolute;width:10px;height:12px;border:0;fill:var(--color-loop-line);background:var(--back-bg)}

/* ── Työpöytä ja tabletti vaakatasossa, 961 px ylöspäin ────────────────── */
@media(min-width:961px){

  /* Askelrivi flexistä ruudukoksi. Laatat ovat kuusi yhtä leveää saraketta
     ja lomitus on yhä .st + .st{margin-left:-20px}, joten laatan n
     keskiviiva on (n-1)·W/6 + W/12 - 10px. Reitti alkaa laatan 6
     keskiviivalta (91,667 % - 10px) ja päättyy laatan 2 keskiviivalle
     (25 % - 10px), eli sen leveys on tasan 66,667 %. Prosentit lasketaan
     askelrivin leveydestä, joten reitti seuraa laattoja jokaisessa
     leveydessä ilman omia katkaisukohtia. */
  .journey .steps{display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch}
  .journey .steps > .st{grid-row:1}
  .journey .steps > .back{grid-column:1/-1;grid-row:2;position:relative;display:block;width:66.667%;height:38px;margin:0 0 0 calc(25% - 10px);padding:0;border:2px solid var(--color-loop-line);border-top:0;border-radius:0 0 19px 19px}
  .journey .steps > .back .ar{left:-6px;top:0}

  /* Loop: sama kielioppi, lyhyempi reitti. Vaiheet ovat tekstipalstoja
     eivätkä laattoja, joten reitti mitoittuu palstan reunoihin: se alkaa
     vaiheen 03 oikeasta reunasta ja päättyy vaiheen 02 vasempaan reunaan,
     samaan pystylinjaan jossa vaiheen oranssi yläviiva alkaa. Siksi kaksi
     osiota lukevat samasta järjestelmästä mutta eivät ole sama kuva. */
  .loop .cyc{row-gap:0}
  .loop .cyc > .stage,.loop .cyc > .flow{grid-row:1}
  .loop .cyc > .back{grid-column:3/6;grid-row:2;position:relative;display:block;height:38px;margin:0;padding:0;border:2px solid var(--color-loop-line);border-top:0;border-radius:0 0 19px 19px}
  .loop .cyc > .back .ar{left:-6px;top:0}
}

/* ── Pinottu taitto, 960 px ja alle ────────────────────────────────────
   Huom: pinoutuminen alkaa 960 pikselistä, ei 760:stä (styles.css rivit
   562-582 ovat @media(max-width:960px) -lohkossa). Pystyreitti on siis
   voimassa myös tabletin pystynäytöllä (768) ja puhelimen vaakanäytöllä
   (667 ja 852).

   Reitti kääntyy 90°: sama laatikko, sama kaari, avoin reuna vasemmalle.
   Kuja on laattojen oikealla puolella omana 26 pikselin sarakkeenaan, joten reitti ei
   kulje laattojen päällä eikä sisältö siirry sivun vasemmasta reunasta.
   Nimiö ei voi katkaista pystyviivaa, joten se asettuu pinon alle oikeaan
   reunaan, eli reitin alapään viereen, ja saa kiertyä kahdelle riville;
   tila varataan kontin 62 pikselin alapehmusteella. Keskitys kokeiltiin
   17.9.2026 ja hylättiin: leveässä pinotussa näkymässä nimiö jäi liian
   kauaksi reitistä. */
@media(max-width:960px){
  /* Kuja on oikealla (päätös 17.9.2026, vaihtoehto C). Teksti ja laatat
     alkavat sivun vasemmasta reunasta kuten muissa osioissa, eikä pinoa
     siirretä sisään. Kärki osoittaa vasemmalle eli sisään kohteeseen.

     Reitti piirretään :before-kerroksella ja .back levittyy koko
     leveydelle. Syy on nimiö: kun se keskitetään, sen on keskityttävä
     pinoon eikä 20 pikselin kujaan, ja absoluuttinen lapsi keskittyy
     aina lähimpään sijoitettuun esivanhempaansa. Reitti on siis yhä
     yksi elementti, mutta sen viiva on elementin oma kerros.

     Sävy tulee tiedoston alun --color-loop-line -muuttujasta, eli se on
     sama kaikissa leveyksissä.

     Kuja on 26 px ja kaaren säde 8 px, ei kujan puolikas. Syy on kärjen
     luettavuus: kun kaari ja kärki täyttävät kujan kokonaan, kärki näyttää
     kasvavan kaaresta eikä päättävän viivaa. Nyt yläreunassa on suoraa
     26 − 8 = 18 px, josta kärki peittää 10 px, eli kärjen tyven ja kaaren
     väliin jää 8 px suoraa viivaa. Kärki on 8 × 10 (työpöydällä 10 × 12).

     Rivit annetaan eksplisiittisesti, koska reitti varaa molemmat sarakkeet.
     Ruudukko sijoittaa eksplisiittiset kohteet ensin, joten automaattisesti
     sijoitetut laatat väistivät reitin alapuolelle ja reitin oma alue jäi
     nollan korkuiseksi. */
  .journey .steps{display:grid;grid-template-columns:1fr 26px;padding-bottom:62px}
  .journey .steps > .st{grid-column:1}
  .journey .steps > .st:nth-of-type(1){grid-row:1}
  .journey .steps > .st:nth-of-type(2){grid-row:2}
  .journey .steps > .st:nth-of-type(3){grid-row:3}
  .journey .steps > .st:nth-of-type(4){grid-row:4}
  .journey .steps > .st:nth-of-type(5){grid-row:5}
  .journey .steps > .st:nth-of-type(6){grid-row:6}
  .journey .steps > .back{grid-row:2/7}

  /* .loop .cyc on align-items:start, joten reitin on pyydettävä venytys
     erikseen. Ilman sitä laatikko on 4 px korkea, koska sillä ei ole
     sisältöä, ja reitti näyttää olevan vaiheen 02 yläviivan päällä. */
  .loop .cyc{grid-template-columns:1fr 26px;padding-bottom:62px}
  .loop .cyc > .stage,.loop .cyc > .flow{grid-column:1}
  .loop .cyc > .stage:nth-of-type(1){grid-row:1}
  .loop .cyc > .flow:nth-of-type(1){grid-row:2}
  .loop .cyc > .stage:nth-of-type(2){grid-row:3}
  .loop .cyc > .flow:nth-of-type(2){grid-row:4}
  .loop .cyc > .stage:nth-of-type(3){grid-row:5}
  .loop .cyc > .back{grid-row:3/6}

  .journey .steps > .back,.loop .cyc > .back{grid-column:1/-1;align-self:stretch;position:relative;display:block;width:auto;height:auto;margin:0;padding:0;border:0;background:none;pointer-events:none}
  .journey .steps > .back:before,.loop .cyc > .back:before{content:"";box-sizing:border-box;position:absolute;top:0;bottom:0;right:0;width:26px;border:2px solid var(--color-loop-line);border-left:0;border-radius:0 8px 8px 0}
  .journey .steps > .back .ar,.loop .cyc > .back .ar{width:8px;height:10px;left:auto;right:17px;top:-4px;transform:rotate(-90deg)}
  .journey .steps > .back p,.loop .cyc > .back p{left:auto;right:0;top:100%;bottom:auto;transform:none;width:max-content;max-width:100%;padding:14px 0 0;background:none;white-space:normal;text-align:right;line-height:1.5}
}

/* ═══════════════════════════════════════════════════════════════════════
   PUHELINTAITTO · .journey ja .loop, 560 px ja alle
   Ehdotus 17.9.2026, vaihtoehto D. Erillinen tiedosto, koska tämä ei ole
   paluusilmukkaa vaan laattojen ja vaiheiden taittoa puhelimessa. Se on
   oma päätöksensä: lohko voidaan ottaa tai jättää silmukasta riippumatta.

   Yksi rakenteellinen muutos ja loput tilaa. Yhtään kirjainkokoa ei
   pienennetä.

   1. Journeyn laatoista pois nuolilovi ja -15 px lomitus. Lovi vei 15 px
      joka laatasta ja pakotti alapehmusteen ylapehmustetta suuremmaksi,
      mikä luki ahtautena. Kuusi tasaista väripalkkia peräkkäin, korkeus
      46 px, otsikko pystysuunnassa keskellä. Suunta tulee väriasteikosta
      (vaalea → oranssi) ja lukujärjestyksestä, ei laatan muodosta.
   2. Loopista pois kolmiot. Järjestys tulee numeroista 01-03 ja vaiheen
      oranssista yläviivasta. Kolmio vei pystytilaa ja jäi kiinni sekä
      otsikkoon että leipätekstiin. Vaiheiden väli on 26 px.

   Kolmion poisto poikkeaa briefin nykytilakuvauksesta, joten se on päätös
   eikä korjaus. Journeyn nuolilovi jätettiin ennalleen; peruste ja
   vaihtoehtoinen lohko ovat alempana kommentissa.
   ═══════════════════════════════════════════════════════════════════════ */

@media(max-width:560px){
  /* Otsikkolohko ja kisko */
  .journey .hd,.loop .hd{margin-bottom:30px}
  .journey .hd .lead,.loop .hd .lead{margin-top:18px}
  .journey .rail{gap:10px;margin-bottom:20px}

  /* Journeyn nuolilovi JÄTETTIIN puhelimeen (päätös 17.9.2026). Lovi on
     Journeyssä ainoa suunnan merkki, koska Journeyssä ei ole numeroita
     (tarkoituksellinen ero Loopiin), ja ilman sitä kuusi palkkia lukee
     värilistana. Alkuperäinen peruste poistolle oli ahtaus, ja se
     osoittautui katselukoon asiaksi.

     Jos tasaiset palkit halutaan silti, tämä on se lohko:

     .journey .steps > .st,
     .journey .steps > .st:first-child,
     .journey .steps > .st.s6{clip-path:none;min-height:46px;
       padding:14px 20px;margin-top:0;align-items:center}
     .journey .steps > .st + .st{margin-top:0}
     .journey .st h3{font-size:16px;line-height:1.3}

     Vedos tasaisista palkeista: archive/puhelin-D.html */

  /* Loop: kolmio pois näkyvistä, mutta EI display:none. Kolmio on oma
     ruudukkorivinsä, ja jos se poistetaan ruudukosta, vaiheet siirtyvät
     riveille 1-3 ja paluureitin rivinumerot menevät väärin. Se jää siis
     26 pikselin korkuiseksi näkymättömäksi väliksi, jolloin rivirakenne
     on sama koko pinotussa taitossa. */
  .loop .cyc > .flow{visibility:hidden;width:0;height:26px;margin:0;border:0}
  .loop .cyc > .stage{padding-top:22px}
  .loop .stage h3{margin:12px 0 10px}
  .loop .stage p{line-height:1.6}
  .loop .note{margin-top:30px}
}