/* ============================================================
   REFERENSSIT — työt-sivu ja asiakassivut. Ladataan brandstein.css:n
   jälkeen. Liike: ks. CLAUDE.md "Motion style — Brandstein".
   ============================================================ */

/* Fontit fonts.css:stä (Jennan valinnat 8.10.): asiakkaiden nimet ja
   MENU Sunter Roughenilla (--f-otsikko), leima Boldeonilla (--f-nav),
   käsiala Mathew Rohasilla (--f-kasi). */

html:has(.sivu-ref){ overflow-x:clip; }
.sivu-ref{
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--kerma);
}
.kasi{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; }

/* ------------------------------------------------------------
   OIKEA YLÄNURKKA (sama kuin palvelut-sivulla)
   ------------------------------------------------------------ */
.p-kulma{
  position:fixed; top:var(--reuna); right:var(--reuna); z-index:70;
  display:grid; justify-items:end; gap:clamp(8px,.8vw,12px);
}
.p-kulma .leima-oikea{ position:static; font-family:var(--f-nav); letter-spacing:.01em; transition:color 400ms linear; }
body.tumma .leima-oikea{ color:var(--kerma); }
.p-menu{
  font-family:var(--f-otsikko); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(16px,1.45vw,24px); line-height:1;
  color:var(--kerma); background:var(--puna);
  padding:.7em 1.4em .65em; border-radius:999px;
  transition:background 260ms linear, color 260ms linear;
}
.p-menu:hover{ background:var(--musta); }
body.tumma .p-menu:hover{ background:var(--kerma); color:var(--puna); }
body.punainen .leima-oikea{ color:var(--kerma); }
body.punainen .p-menu{ background:var(--kerma); color:var(--puna); }
body.punainen .p-menu:hover{ background:var(--musta); color:var(--kerma); }

/* Ennen kuin JS on asettanut alkutilan: heron otsikko piiloon, ettei
   valmis teksti välähdä ennen sisääntuloa. JS poistaa luokan. */
.r-liike .r-hero .r-jatti, .r-liike .c-nimi,
.r-liike .r-hero__kasi, .r-liike .r-hero__teksti, .r-liike .r-poyta,
.r-liike .c-yla__meta{ visibility:hidden; }
/* Kansio pysyy piilossa kunnes JS on kääntänyt sen aloitusasentoon (ei välähdystä pystyssä). */
.r-liike .c-kansio, .r-liike .c-seuraava{ visibility:hidden; }

/* ------------------------------------------------------------
   KURSORIKUPLA — "Katso" seuraa hiirtä korttien ja rivien päällä.
   ------------------------------------------------------------ */
.kursori{
  position:fixed; left:0; top:0; z-index:200; pointer-events:none;
  width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%;
  background:var(--puna); color:var(--kerma);
  display:grid; place-items:center;
  font-family:var(--f-otsikko); text-transform:uppercase; font-size:12px; letter-spacing:.06em;
  transform:scale(0); opacity:0;
}
@media (hover:none), (pointer:coarse){ .kursori{ display:none; } }

/* ------------------------------------------------------------
   TYPO
   ------------------------------------------------------------ */
.r-jatti, .r-iso{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  color:var(--puna); line-height:.82; letter-spacing:0;
  white-space:nowrap; text-align:center; font-size:12vw;     /* JS tarkentaa (data-leveys) */
}
.r-iso{ font-size:9vw; }
.r-iso--vapaa{ white-space:nowrap; }
.r-iso--pitka{ white-space:normal; font-size:clamp(32px,4.6vw,84px); line-height:.95; max-width:22ch; text-wrap:balance; }
.r-iso--pitka .ik-maski{ display:inline; }
/* Kirjaimet erikseen hover-nousua ja tuloanimaatiota varten. */
.ik{ display:inline-block; will-change:transform; }
.ik-sana{ white-space:nowrap; }
/* Maski kirjainten nousua varten. Yläreunaan reilusti tilaa: Ä- ja
   Ö-pisteet nousevat Rockidsissa ~0.2 em versaalikorkeuden yli. */
.ik-maski{ display:inline-block; overflow:hidden; padding:.48em .2em .06em; margin:-.48em -.2em -.06em; vertical-align:top; }   /* Sunter Roughenin Ä-pisteet ovat korkealla */

.r-leipa{ font-family:var(--f-mono); font-size:clamp(13px,1.02vw,17px); line-height:1.55; max-width:62ch; }
.r-leipa--keski{ text-align:center; margin-inline:auto; }

.nuoli path{ stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* ------------------------------------------------------------
   PAINIKKEET
   ------------------------------------------------------------ */
.r-nappi{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--f-display); text-transform:uppercase; line-height:1;
  font-size:clamp(24px,3vw,52px); color:var(--kerma); background:var(--puna);
  padding:.55em 1.3em .5em; border-radius:999px; position:relative; overflow:hidden;
}
/* Täyttö nousee alhaalta hoverissa — sama ele kaikissa napeissa. */
.r-nappi::before{
  content:''; position:absolute; inset:0; background:var(--musta); border-radius:inherit;
  transform:translateY(101%); transition:transform 520ms var(--ease);
}
.r-nappi:hover::before, .r-nappi:focus-visible::before{ transform:translateY(0); }
.r-nappi > span{ position:relative; }

/* ============================================================
   TYÖT-SIVU
   ============================================================ */
.r-hero{
  min-height:100svh; display:grid; align-content:center; justify-items:center;
  gap:clamp(24px,3.4vw,56px); padding:clamp(130px,17vh,190px) var(--reuna) clamp(40px,6vh,80px);
  text-align:center; position:relative;
}
.r-hero__otsikko{ position:relative; width:100%; display:flex; justify-content:center; align-items:flex-start; gap:.1em; }
.r-hero__otsikko .r-jatti{ width:auto; }
.r-hero__kasi{
  /* Otsikon vasemmalla puolella ylhäällä — "meidän TYÖT" — ei osu kirjaimiin. */
  position:relative; z-index:2; flex:none;
  margin-top:.25em; font-size:clamp(30px,4.4vw,86px); line-height:1; color:var(--musta);
  rotate:-8deg;
}
.r-hero__teksti{ font-family:var(--f-mono); font-size:clamp(14px,1.15vw,19px); line-height:1.55; max-width:52ch; }
/* Pöytä: polaroidit ja sloganit otsikon ympärillä. Otsikko ja teksti pysyvät päällimmäisinä. */
.r-hero__otsikko, .r-hero__teksti{ position:relative; z-index:3; }
.r-poyta{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.r-poyta > *{ position:absolute; margin:0; rotate:var(--r); }
.r-pola{ width:clamp(120px,12vw,210px); }
.r-pola__sisa{ display:grid; gap:.3em; background:#FBF8F1; padding:clamp(7px,.6vw,11px) clamp(7px,.6vw,11px) 0;
  box-shadow:0 1px 2px rgba(25,25,25,.12), 0 22px 40px -22px rgba(25,25,25,.55); }
.r-pola img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; }
.r-pola figcaption{ font-size:clamp(17px,1.5vw,26px); line-height:1; padding:.25em 0 .45em; text-align:center; color:var(--musta); }
.r-slogan{ font-size:clamp(26px,2.7vw,50px); line-height:1; color:var(--puna); white-space:nowrap; }
.r-luku{ display:grid; justify-items:start; color:var(--musta); }
.r-luku__iso{ font-family:var(--f-nav); font-size:clamp(34px,3.6vw,66px); line-height:.9; color:var(--puna); }
.r-luku__ala{ font-family:var(--f-mono); font-size:clamp(11px,.85vw,14px); letter-spacing:.14em; text-transform:uppercase; margin-top:.4em; }

/* NÄYTTÄMÖ: palvelut vasemmalla, valitun palvelun työt karusellissa
   oikealla. Ei kiinnitystä eikä vierityksen kaappausta: palvelu
   valitaan klikkaamalla ja karuselli pyörähtää (referenssit.js). */
.nayttamo{
  position:relative;
  display:grid; grid-template-columns:minmax(0,25vw) minmax(0,1fr);
  align-items:center; gap:clamp(20px,3vw,60px);
  padding:clamp(60px,8vw,130px) var(--reuna);
  overflow:hidden;
}
.nayttamo__vasen{ display:grid; gap:clamp(16px,2.4vh,30px); align-content:center; position:relative; z-index:2; }
.palvelulista{ list-style:none; display:grid; gap:clamp(4px,1vh,12px); }
.pl{ width:100%; text-align:left; display:block; padding:.12em 0; color:var(--musta); }
.pl__nimi{
  display:block; font-family:var(--f-display); text-transform:uppercase; line-height:.95;
  font-size:clamp(28px,3.4vw,64px); transition:color 300ms linear, translate 700ms var(--ease);
}
.pl[aria-pressed="true"] .pl__nimi{ color:var(--puna); translate:.3em 0; }
.pl:hover .pl__nimi{ translate:.18em 0; }

.nayttamo__oikea{ position:relative; }
/* Pino kuten palvelut-sivun nettisivuissa: etummainen keskellä, edellinen
   kurkistaa yläpuolelta ja seuraava alapuolelta. Pino pysyy ruudun keskellä
   eikä ulotu oikean ylänurkan (leima + Menu) alle; koko mahtuu ruudun korkeuteen. */
.sivu-tyot{ --kortti-l:min(48vw, 96svh); }
.rumpu{
  position:relative; width:min(100%, 56vw);
  height:calc(var(--kortti-l) / 1.6 * 1.5); min-height:420px;
  touch-action:pan-y; user-select:none; cursor:grab;
}
.rumpu:active{ cursor:grabbing; }
.kortti{
  position:absolute; left:50%; top:50%; width:var(--kortti-l);
  display:block; will-change:transform;
}
.kortti__kehys{
  margin:0; position:relative; overflow:hidden; border-radius:clamp(10px,1.1vw,18px);
  aspect-ratio:16 / 10; background:var(--musta);
  box-shadow:0 30px 60px -30px rgba(25,25,25,.55);
}
.kortti__kuva{ width:100%; height:100%; object-fit:cover; transition:scale 900ms var(--ease); pointer-events:none; }
.kortti:hover .kortti__kuva{ scale:1.05; }

/* ASIAKASKANSIOT (esikuva mosbyfiles.com)
   Tumma kaista, jossa palvelut ovat värillisiä kansioita ja asiakkaat
   niiden välilehtiä. Kansiot pinoutuvat: seuraavan välilehdet istuvat
   edellisen otsikkokaistan päällä (negatiivinen margin + kasvava z). */
.sivu-ref{ --oliivi:#BBA149; --lehti-k:clamp(40px,3.2vw,54px); --kaista:clamp(10px,1.1vw,18px); }
.asiakkaat{ position:relative; background:var(--musta); color:var(--kerma);
  padding:clamp(90px,11vw,180px) var(--reuna) clamp(90px,11vw,180px); }
.asiakkaat__yla{ display:grid; gap:clamp(14px,1.8vw,26px); margin-bottom:clamp(40px,5vw,90px); justify-items:center; text-align:center; }
.asiakkaat__teksti{ font-family:var(--f-mono); font-size:clamp(13px,1vw,16px); line-height:1.55; max-width:52ch; opacity:.85; }

/* Pino on suorassa sivuun nähden (Iines 21.10.2026; ennen rotateX(12deg) kuin pöydällä). */
.pino{ position:relative; max-width:1800px; margin-inline:auto; }
.kansio{ position:relative; z-index:var(--z); pointer-events:none; }
/* Seuraavan kansion runko alkaa heti edellisen alta: ei rakoa (Iines 21.10.2026). */
.kansio + .kansio{ margin-top:calc((var(--lehti-k) + 12px) * -1); }

/* Välilehdet: pyöreä yläreuna ja viistot kyljet (::before/::after). */
.kansio__lehdet{ display:flex; flex-wrap:nowrap; gap:0; padding-left:clamp(18px,2vw,34px);
  height:calc(var(--lehti-k) + 12px); padding-top:12px; align-items:flex-end; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.kansio__lehdet::-webkit-scrollbar{ display:none; }
/* Välilehdet oman rungon yläpuolelle: rungon varjo (edellisen kansion päälle)
   tummensi muuten oman välilehden alaosan (Iines 21.10.2026). */
.kansio__lehdet{ position:relative; z-index:1; }
/* Välilehdet 2 px kaistan päälle: vinojen kylkien ja kaistan väliin jäi sauma,
   josta tumma tausta näkyi (Iines 21.10.2026). Hoverin kurkistusarkki ja
   alempien kansioiden siirto poistettu samalla: ne rikkoivat pinon. */
.kansio__runko{ margin-top:-2px; }
.lehti{
  position:relative; flex:none; display:flex; align-items:center; height:calc(var(--lehti-k) - 4px);
  padding:0 clamp(16px,1.6vw,28px); background:var(--v); color:var(--t);
  border-radius:14px 14px 0 0; margin-inline:3px;   /* kyljet (22px) limittyvät naapurin kanssa; oikeanpuoleisempi edessä */
  font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(15px,1.35vw,24px); line-height:1; white-space:nowrap;
  transition:translate 450ms var(--ease); pointer-events:auto;
}
.lehti::before, .lehti::after{ content:''; position:absolute; bottom:0; width:22px; height:100%; background:var(--v); }
.lehti::before{ left:-11px; transform:skewX(-24deg); border-top-left-radius:10px; }
.lehti::after{ right:-11px; transform:skewX(24deg); border-top-right-radius:10px; }
/* Ei varjoa välilehdissä: limittyvien kylkien varjo teki tummia kiiloja naapurin päälle (Iines 21.10.2026). */
.lehti span{ position:relative; z-index:1; }
/* KOKEILU 2 (Jenna 22.10.2026, piirros): rivin ensimmäinen välilehti on kansion
   värinen ja edessä, seuraavat tummenevat 9 % askelin ja ovat edellisen takana.
   Kyljet lähes pystyt ja yläkulmat pyöreät. Koko kansio porrastuu: takimmainen
   (ylin) oikealla, etummainen (alin, auki) vasemmalla. */
.pino{ --porras:clamp(14px,2.2vw,40px); --porras-max:6; }
.lehti{ --lv:color-mix(in srgb, var(--v), #000 calc(var(--n, 0) * 9%)); background:var(--lv); z-index:var(--zi, 1);
  margin-inline:-4px; }
/* Kyljet levenevät vain alaosassa (kuten piirroksessa): ylhäällä pelkkä pyöreä kulma, ei kyttyrää. */
/* MUOTO JENNAN VEKTORISTA (tab.svg 22.10.2026): suorat kyljet, ei jalkaa, yläkulmien
   säde 48/90 korkeudesta. Seuraava välilehti on edellisen takana kulman verran. */
.lehti{ --r:calc((var(--lehti-k) - 4px) * .533); border-radius:var(--r) var(--r) 0 0; }
.lehti::before, .lehti::after{ display:none; }
.lehti + .lehti{ margin-left:calc(var(--r) * -1); padding-left:calc(var(--r) + clamp(10px,1vw,18px)); }
.kansio{ width:calc(100% - var(--porras) * var(--porras-max)); margin-left:calc(var(--porras) * var(--porras-n, 0)); }
/* Ensimmäinen välilehti alkaa kansion vasemmasta reunasta (jalan leveys sisään). */
.kansio__lehdet{ padding-left:0; }
/* Takimmainen kansio jatkuu avoimen kansion korkuisena (JS: --auki-h); edemmät peittävät
   sen, joten porrastuksen ansiosta oikeaan laitaan näkyy koko kansio. */
.kansio:not(:last-child) .kansio__runko::before{ content:''; position:absolute; left:0; right:0; top:0;
  height:var(--ext-h, 0px); z-index:-1; background:var(--v); border-radius:6px;
  box-shadow:0 4px 0 rgba(0,0,0,.35), 0 40px 70px -30px rgba(0,0,0,.9); pointer-events:none; }
.kansio__runko--auki{ height:auto !important; padding:clamp(18px,2.6vw,46px); }
/* Avoin kansio: valmiiksi näkyvä referenssi paperiarkilla (20.10.2026). */
.kansio__esikatselu{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(18px,3vw,56px);
  align-items:center; background:#F3EFE6; color:var(--musta); border-radius:3px;
  padding:clamp(16px,2.4vw,40px); box-shadow:0 24px 40px -26px rgba(0,0,0,.55);
  transition:translate 500ms var(--ease), box-shadow 500ms var(--ease); }
.kansio__esikatselu:hover{ translate:0 -4px; box-shadow:0 34px 50px -26px rgba(0,0,0,.6); }
.esik__kuva{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:2px; background:var(--musta); rotate:-1.2deg; }
.esik__kuva img, .esik__kuva video{ width:100%; height:100%; object-fit:cover; display:block; }
.esik__tiedot{ display:grid; gap:clamp(8px,1vw,16px); align-content:center; }
.esik__leima{ font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px); letter-spacing:.12em; text-transform:uppercase; opacity:.65; }
.esik__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(36px,4.4vw,84px); line-height:.9; }
.esik__slogan{ font-size:clamp(22px,2vw,36px); line-height:.85; color:var(--puna); rotate:-2deg; }
.esik__teksti{ font-family:var(--f-mono); font-size:clamp(12px,.95vw,15px); line-height:1.6; max-width:52ch; }
.esik__avaa{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(16px,1.3vw,22px); color:var(--puna); }
@media (max-width:900px){ .kansio__esikatselu{ grid-template-columns:1fr; } }
.lehti:focus-visible{ outline:2px solid var(--kerma); outline-offset:3px; }

/* Kansion runko: paperin paksuus alareunassa ja varjo edellisen päälle. */
/* --kaista: ylemmän kansion pohjaa näkyy alemman välilehtien yläpuolella (21.10.2026). */
.kansio__runko{ pointer-events:auto; background:var(--v); color:var(--t); border-radius:6px 6px 0 0; height:calc(var(--lehti-k) + var(--kaista));
  box-shadow:0 -6px 14px -10px rgba(0,0,0,.28); }   /* kevyt: tumma näkyi välilehtien välistä (21.10.2026) */
.kansio:last-child .kansio__runko{ border-radius:6px; min-height:clamp(70px,8vw,130px);
  box-shadow:0 -6px 14px -10px rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.35), 0 40px 70px -30px rgba(0,0,0,.9); }

/* Kaistan klikkaus avaa kansion ensimmäisen tiedoston (JS). Kansioiden nimet
   oikeassa reunassa poistettu (Iines 21.10.2026). */
.kansio__runko{ position:relative; cursor:pointer; }
.kansio__runko--auki{ cursor:auto; }

/* Hover: välilehti nousee, sen arkki kurkistaa kansion alta omassa
   värissään (--kurkku, JS) ja alemmat kansiot väistyvät hieman. */
.sivu-ref{ --kurkku-h:clamp(8px,.8vw,12px); }
.kansio{ transition:translate 500ms var(--ease); }
.kansio__runko::after{ content:''; position:absolute; left:0; right:0; top:100%; height:0;
  background:var(--kurkku, var(--v)); border-radius:0 0 4px 4px; transition:height 500ms var(--ease); }
.kansio:last-child .kansio__runko::after{ display:none; }
/* Välilehti kasvaa ylöspäin mutta pysyy kiinni kansiossa: siirto irrotti sen ja
   kyljet näyttivät katkeavan (Iines 21.10.2026). Tilaa on .kansio__lehdet-ylätäytteessä. */
.lehti{ transition:height 450ms var(--ease); }
.lehti:hover, .lehti:focus-visible{ height:calc(var(--lehti-k) + 4px); }

/* ============================================================
   PINO SELKEÄMMÄKSI (Jenna 22.10.2026, ehdotukset A, B ja C)
   A: jokaisella kansiolla yksi välilehti, kansion nimi.
   B: vain edessä oleva (alin) kansio on auki: asiakasvälilehdet ja kortit.
      Taaemman kansion klikkaus nostaa sen eteen (JS järjestää DOM:n).
   C: suljetut kermaa ja hiekkaa vuorotellen, avoin punainen.
   Väri, porrastus ja pinojärjestys tulevat paikasta, joten ne seuraavat
   kansiota sen vaihtaessa paikkaa.
   ============================================================ */
.kansio{ --v:var(--kerma); --t:var(--musta); }
.kansio:nth-last-child(even){ --v:var(--hiekka); }
.kansio.auki{ --v:#FF3600; --t:#E4DED0; }
.kansio:nth-last-child(1){ --porras-n:0; --z:8; }
.kansio:nth-last-child(2){ --porras-n:1; --z:7; }
.kansio:nth-last-child(3){ --porras-n:2; --z:6; }
.kansio:nth-last-child(4){ --porras-n:3; --z:5; }
.kansio:nth-last-child(5){ --porras-n:4; --z:4; }
.kansio:nth-last-child(6){ --porras-n:5; --z:3; }
.kansio:nth-last-child(7){ --porras-n:6; --z:2; }
.kansio:nth-last-child(n+8){ --porras-n:6; --z:1; }
.kansio__runko{ transition:background-color 180ms linear; }   /* ei height-siirtymää: GSAP animoi avauksen, CSS-liuku jätti jatkeet väärän mittaisiksi */
.lehti{ transition:background-color 180ms linear, height 450ms var(--ease); }   /* lyhyt: pitkä kerma->puna kulki vaaleanpunaisen kautta */
button.lehti{ border:0; font:inherit; font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(15px,1.35vw,24px);
  line-height:1; cursor:pointer; }
.kansio:not(.auki) .lehti--asiakas{ display:none; }
.kansio.auki .lehti--kategoria{ cursor:default; }
.kansio.auki .lehti--kategoria:hover{ height:calc(var(--lehti-k) - 4px); }
/* Suljetun kansion runko on pelkkä kaista; avoin kasvaa sisältönsä mittaiseksi. */
.kansio__sisalto{ display:none; }
.kansio.auki .kansio__runko{ height:auto; padding:clamp(18px,2.4vw,40px); cursor:auto; }
/* Keskellä pinoa avoimen kansion alaosan päälle tulee seuraavan välilehdet: tilaa niille. */
.kansio.auki:not(:last-child) .kansio__runko{ padding-bottom:calc(clamp(18px,2.4vw,40px) + var(--lehti-k) + 12px); }
.kansio__runko.kasvaa{ overflow:hidden; }
.kansio.auki .kansio__sisalto{ display:block; position:relative; }
.kansio__runko::after{ display:none; }   /* vanha kurkistus pois */
/* Asiakaskortti avoimessa kansiossa: kuva paperilla, nimi ja toimiala. */
.kansio__kortti{ display:grid; gap:8px; align-content:start; background:#F3EFE6; color:var(--musta);
  padding:10px 10px 14px; border-radius:3px; box-shadow:0 18px 30px -22px rgba(0,0,0,.6);
  transition:translate 450ms var(--ease), box-shadow 450ms var(--ease); }
.kansio__kortti:hover, .kansio__kortti:focus-visible{ translate:0 -4px; box-shadow:0 26px 40px -24px rgba(0,0,0,.65); }
.kk__kuva{ display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--musta); border-radius:2px; }
.kk__kuva img, .kk__kuva video{ width:100%; height:100%; object-fit:cover; display:block; }
.kk__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(18px,1.5vw,26px); line-height:1; padding-top:.1em; }
.kk__leima{ font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px); letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
@media (max-width:640px){
  .kansio__kortti{ padding:6px 6px 10px; gap:6px; }
  .kk__nimi{ font-size:15px; }
  .kk__leima{ font-size:9px; letter-spacing:.06em; }
}

/* CTA */
.r-cta{ display:grid; justify-items:center; gap:clamp(20px,3vw,44px); text-align:center;
  padding:clamp(120px,15vw,260px) var(--reuna); position:relative; }
.r-cta__kasi{ font-size:clamp(26px,3vw,52px); color:var(--musta); rotate:-4deg; margin-bottom:-.6em; z-index:1; }

/* ============================================================
   ASIAKASSIVU = AVATTU KANSIO (esikuva mosbyfiles.com/cases)
   Tumma pohja, kansio palvelun värissä, paperiarkki ja sen alla
   vapaa kollaasi kuvista ja lapuista.
   ============================================================ */
.c-alue{ background:var(--musta); color:var(--kerma); padding:clamp(96px,13vh,150px) var(--reuna) clamp(80px,9vw,150px); }
.c-yla{ display:grid; gap:clamp(14px,2vw,30px); margin-bottom:clamp(26px,3.4vw,60px); }
.c-yla__meta{ display:flex; align-items:center; gap:clamp(12px,1.6vw,24px); flex-wrap:wrap; padding-right:clamp(120px,14vw,220px); }
.a-takaisin{
  font-family:var(--f-mono); font-size:clamp(12px,.9vw,15px); letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; gap:.6em; align-items:center; padding:.7em 1.2em; border:1px solid rgba(25,25,25,.3); border-radius:999px;
  transition:background 300ms linear, color 300ms linear, border-color 300ms linear;
}
.a-linkki{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; color:var(--puna); }
.c-yla .a-takaisin{ border-color:rgba(228,222,208,.35); }
.c-yla .a-takaisin:hover{ background:var(--kerma); color:var(--musta); border-color:var(--kerma); }
.c-nimi{ font-family:var(--f-display); color:var(--kerma); text-align:left; }

/* Kansio: oikeaan laitaan jää tila pystyvälilehdille. */
.sivu-asiakas{ --lehti-l:clamp(38px,3.4vw,58px); }
.c-kansio{
  position:relative; max-width:2200px; margin-right:var(--lehti-l);
  background:var(--v); color:var(--t); border-radius:8px 0 8px 8px;
  padding:clamp(18px,2.6vw,46px) clamp(14px,2.6vw,46px) clamp(26px,3vw,50px);
  box-shadow:0 60px 140px -60px rgba(0,0,0,.9);
}
/* Leveällä kansio täyttää ruudun välilehtiä lukuun ottamatta (Iines 21.10.2026:
   oikealle jäi paljon tyhjää). Seuraava-nappi on kiinteä eikä tarvitse saraketta. */
@media (min-width:1100px){
  .c-kansio{ width:calc((100% - var(--lehti-l) * 2) * .88); margin-right:0; }   /* hieman kapeampi (Iines 21.10.2026) */
}
/* Pystyvälilehdet kansion oikeassa reunassa */
.c-lehdet{ position:absolute; left:calc(100% - 1px); top:0; bottom:0; width:var(--lehti-l); }
/* Kaikki asiakkaat: nauha pysyy näkyvissä vierittäessä (ylänurkan alapuolella)
   ja vierii itse; avoin tiedosto keskitetään (JS). */
.c-lehdet__nauha{ position:sticky; top:var(--nauha-yla); display:grid; gap:calc(var(--kaari) * 2 + 4px);
  max-height:min(100%, calc(100svh - var(--nauha-yla) - 24px)); overflow:hidden;   /* ei vieritä itse: rulla vierittää sivua, avoin tiedosto keskitetään JS:llä */
  padding:calc(var(--kaari) + 6px) 0; }
.c-lehdet__nauha::-webkit-scrollbar{ display:none; }
.c-lehdet__nauha.kaantyy{ overflow:visible; max-height:none; }
.sivu-asiakas{ --nauha-yla:150px; }
/* VÄLILEHDET KUIN TYÖNÄYTESIVULLA, KÄÄNNETTYINÄ (Iines 21.10.2026): yksi rivi,
   vinot päädyt ja pyöristetyt ulkokulmat, hieman päällekkäin. Aiemmat kaksi
   riviä ja koverat kaaret jättivät välilehtien väliin tummia lovia.
   Muoto on maski kolmesta osasta: yläpääty, suora keskiosa ja alapääty, joten
   päädyt pysyvät samanlaisina nimen pituudesta riippumatta. */
/* MUOTO JENNAN PIIRROKSESTA (22.10.2026): lähes suorakaide, ulkonurkat
   pyöristetty noin välilehden paksuuden säteellä ja kansion reunassa pieni
   kovera jalka. Päädyn pituus = 0,92 x paksuus, jotta kaari pysyy pyöreänä. */
.sivu-asiakas{ --lehti-l:clamp(44px,3.9vw,64px); --kaari:calc(var(--lehti-l) * .92); }
.c-lehdet__nauha{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:8px 0;
  width:calc(100% + var(--veto) + 4px); }   /* hover-siirtymä mahtuu, ei leikkaudu */
.c-lehti{
  position:relative; display:flex; align-items:center; justify-content:center; flex:none;
  width:var(--lehti-l); margin:0;
  background:var(--lv); color:var(--lt);
  writing-mode:vertical-rl; font-family:var(--f-otsikko); text-transform:uppercase;
  font-size:clamp(14px,1.15vw,20px); line-height:1; white-space:nowrap;
  transition:filter 300ms linear, translate 450ms var(--ease);
}
.c-lehti:last-child{ margin-bottom:0; }
/* MUOTO JENNAN VEKTORISTA (tab.svg, 22.10.2026) kuten kansiopinossa, käännettynä:
   suora kylki, ulkokulmien säde 48/90 paksuudesta, ei jalkaa. Seuraava välilehti
   on edellisen takana kulman verran (--zi generaattorista). Teksti näkyvän osan keskelle. */
.c-lehti{ --r:calc(var(--lehti-l) * .533); border-radius:0 var(--r) var(--r) 0; z-index:var(--zi, 1);
  padding:calc(var(--r) * 1.6 + 8px) 0; }   /* kumpikin pää voi jäädä naapurin alle (avoin on edessä) */
.c-lehti:first-child{ padding-top:calc(var(--r) * .6 + 8px); }
.c-lehti span{ position:relative; z-index:1; }
/* HOVER (Jenna 22.10.2026): välilehti ei irtoa, vaan sen sivu liukuu kansion
   alta oikealle koko kansion korkeudelta ja tuo välilehden mukanaan. Sivu on
   välilehtien alla, joten se näkyy niiden väleistä. Väri tulee JS:ltä (--sv). */
.sivu-asiakas{ --veto:clamp(8px,.7vw,12px); }
.c-lehdet__sivu{ position:absolute; left:0; top:0; bottom:0; width:var(--veto); background:var(--sv, transparent);
  border-radius:0 0 6px 0; transform:scaleX(0); transform-origin:0 50%; transition:transform 450ms var(--ease); }
.c-lehdet.vetaa .c-lehdet__sivu{ transform:scaleX(1); }
.c-lehti:not([aria-current]):hover, .c-lehti:focus-visible{ translate:var(--veto) 0; z-index:99; background:var(--lv); }
/* Muut välilehdet ovat avoimen kansion takana: kansion reuna luo niihin
   kapean varjon, joten samanvärinen välilehti ei sulaudu kansioon. */
.c-lehti:not([aria-current]){ background:var(--lv); }   /* ei tummaa rajaa kansion reunassa (Jenna 22.10.2026) */
/* Välilehdet limittyvät jaloistaan, ettei tumma lovi ulotu kansion reunaan asti. */
.c-lehti{ margin-bottom:calc(var(--r) * -1); }
/* Nauhan reunassa leikkautuva välilehti häivytetään (JS: .yla-jatkuu / .ala-jatkuu). */
.c-lehdet__nauha{ -webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--ylaf, 0px), #000 calc(100% - var(--alaf, 0px)), transparent);
                          mask-image:linear-gradient(to bottom, transparent, #000 var(--ylaf, 0px), #000 calc(100% - var(--alaf, 0px)), transparent); }
.c-lehdet__nauha.yla-jatkuu{ --ylaf:56px; }
.c-lehdet__nauha.ala-jatkuu{ --alaf:56px; }
.c-lehdet__nauha.kaantyy{ -webkit-mask-image:none; mask-image:none; }
.c-lehti[aria-current]{ z-index:98; }

/* Arkki ja sen päällä aukeava kansi */
.c-kansio__arkki{ position:relative; perspective:3600px; }
.c-kansi{
  position:absolute; inset:calc(clamp(18px,2.6vw,46px) * -1) calc(clamp(14px,2.6vw,46px) * -1) -24px;
  z-index:5; background:var(--v); border-radius:8px; transform-origin:0 50%;
  box-shadow:inset -2px 0 0 rgba(0,0,0,.12), 0 30px 60px -30px rgba(0,0,0,.6);
  visibility:hidden;  /* JS näyttää kannen vain avausta varten */
}
.c-kansi::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(255,255,255,.05)); }

.c-arkki{
  --arkki-reuna:clamp(40px,5vw,96px);
  position:relative; background-color:#F3EFE6; color:var(--musta);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius:3px; padding:var(--arkki-yla) clamp(20px,4vw,80px) clamp(90px,10vw,190px) calc(var(--arkki-reuna) + clamp(22px,3vw,60px));
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 24px 40px -26px rgba(0,0,0,.55);
}
/* rei'itys: kansion väri näkyy reikien läpi; marginaaliviiva */
.c-arkki::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:var(--arkki-reuna);
  background:radial-gradient(circle at 50% 50%, var(--v) 0 clamp(5px,.45vw,8px), transparent calc(clamp(5px,.45vw,8px) + .5px)) 50% 40px / 100% clamp(90px,9vw,150px) repeat-y;
  border-right:1px solid rgba(25,25,25,.22);
}
.c-arkki__vasen{ display:grid; justify-items:start; gap:clamp(18px,2vw,32px); }
.c-arkki__yla{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(22px,4vw,80px); align-items:start; }
/* Kuva arkin yläreunan tuntumaan, jotta klemmari puristaa sekä arkkia että
   kuvaa ja nousee arkin reunan yli kuin oikeasti (Iines 21.10.2026, valokuva).
   --kuva-yla: kuvan yläreunan etäisyys arkin yläreunasta. */
.c-arkki{ --arkki-yla:clamp(28px,4vw,70px); --kuva-yla:12px; }
.c-arkki__kuva{ position:relative; margin:calc(var(--kuva-yla) - var(--arkki-yla)) 0 0; rotate:-1.8deg; background:#fff; padding:clamp(6px,.6vw,10px);
  box-shadow:0 14px 26px -16px rgba(0,0,0,.6); max-width:440px; }
.c-arkki__kuva img, .c-arkki__kuva video{ width:100%; height:auto; max-height:min(60vh,36vw); object-fit:cover; display:block; }
/* Klemmari kuvan yläreunan yli: SVG:n y=34 osuu kuvan reunaan (34/26 leveydestä). */
/* SVG:n y=34 (takasankojen piilotusraja) osuu arkin yläreunaan, ei kuvan. */
.c-klemmari{ --kl:clamp(24px,2.2vw,34px); position:absolute; top:calc(0px - var(--kuva-yla) - var(--kl) * 34 / 26); right:16%;
  width:var(--kl); height:auto; z-index:2; overflow:visible;
  stroke:#3a3a3a; stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(1px 2px 1px rgba(0,0,0,.3)); }
.c-tiedot{ display:grid; gap:clamp(14px,1.4vw,22px); margin:0; font-family:var(--f-mono); font-size:clamp(13px,1vw,16px); line-height:1.45; }
.c-tiedot dt{ font-weight:700; }
.c-tiedot dd{ margin:0; }
/* Mathew Rohasin kirjaimet ovat pieniä kokoonsa nähden: tiivis riviväli, ettei rivien väliin jää aukkoja. */
.c-slogan{ margin-top:0; margin-left:clamp(6px,1vw,18px); font-size:clamp(24px,2.3vw,40px); line-height:.78; color:var(--puna); rotate:-3deg; max-width:24ch; text-wrap:balance; }
.c-alaots{ margin-top:.8em; font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.c-arkki__teksti{ display:block; max-width:none; columns:2 32ch; column-gap:clamp(28px,4vw,80px);   /* koko arkin leveys (Iines 23.10.2026) */ margin-top:clamp(30px,4vw,70px);
  font-family:var(--f-mono); font-size:clamp(14px,1.1vw,18px); line-height:1.7; }
.c-arkki__teksti p{ margin:0 0 1.2em; }
.c-arkki__teksti p + p{ text-indent:0; }   /* ei sisennystä (Iines 26.10.2026) */

/* Kollaasi: palat vuorottelevat laidasta toiseen ja limittyvät */
.c-kollaasi{ position:relative; margin-top:calc(clamp(40px,7vw,130px) * -1); padding-bottom:clamp(20px,3vw,50px); }
.c-pala{ position:relative; z-index:1; width:calc(var(--w) * 1%); margin-left:calc(var(--x) * 1%); rotate:var(--r);
  margin-top:calc(clamp(30px,6vw,110px) * -1); }
.c-pala:first-child{ margin-top:0; }
.c-lappu, .c-lainaus, .c-tarra{ z-index:3; }
.c-selain, .c-puhelimet, .c-nippu, .c-tarra{ margin-top:clamp(50px,6vw,110px); z-index:2; }
.c-pala + .c-selain, .c-pala + .c-puhelimet, .c-pala + .c-nippu, .c-pala + .c-tarra,
.c-selain + .c-pala, .c-puhelimet + .c-pala, .c-nippu + .c-pala, .c-tarra + .c-pala{ margin-top:clamp(50px,6vw,110px); }
.c-vetava{ touch-action:pan-y; }
@media (hover:hover) and (pointer:fine){
  .c-vetava{ cursor:grab; }
  .c-vetava.vedetaan{ cursor:grabbing; }
}
.c-vetava img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }

.c-kuva{ margin-bottom:0; }
.c-kuva img, .c-kuva video{ width:100%; height:auto; display:block; }
.c-kuva--valkoinen{ background:#F3EFE6; padding:clamp(8px,.8vw,14px) clamp(8px,.8vw,14px) clamp(26px,2.6vw,48px); box-shadow:0 20px 40px -22px rgba(0,0,0,.7); }
.c-kuva--musta{ background:#111; padding:clamp(8px,.9vw,16px); box-shadow:0 20px 40px -22px rgba(0,0,0,.7); }
.c-kuva--paljas{ box-shadow:0 26px 50px -24px rgba(0,0,0,.75); }

.c-lappu, .c-lainaus{
  background:var(--lv); color:var(--lt); padding:clamp(22px,2.6vw,46px) clamp(20px,2.4vw,44px) clamp(26px,3vw,52px);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.7);
  /* repaleinen alareuna */
  /* top -40px: teippi saa näkyä lapun yläpuolella */
  clip-path:polygon(0 -40px,100% -40px,100% calc(100% - 6px),94% 100%,86% calc(100% - 5px),77% 100%,66% calc(100% - 4px),55% 100%,44% calc(100% - 6px),33% 100%,22% calc(100% - 3px),12% 100%,4% calc(100% - 5px),0 100%);
}
.c-lappu__ots{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(22px,2vw,36px); line-height:1; margin-bottom:.8em; }
.c-lappu p{ font-family:var(--f-mono); font-size:clamp(13px,.95vw,15px); line-height:1.6; }
.c-lappu p + p{ margin-top:1em; }
.c-lappu .a-linkki, .c-lainaus .a-linkki{ color:inherit; }
.c-teippi{ position:absolute; top:-14px; left:50%; width:clamp(80px,8vw,130px); height:28px; translate:-50% 0; rotate:-3deg;
  background:rgba(243,239,230,.55); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.c-lainaus{ display:grid; gap:.4em; }
.c-lainaus__merkki{ font-family:var(--f-display); font-size:clamp(70px,7vw,130px); line-height:.6; color:var(--puna); }
.c-lainaus blockquote{ margin:0; display:grid; gap:1.2em; }
.c-lainaus blockquote p{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(20px,1.9vw,34px); line-height:1.08; }
.c-lainaus footer{ display:grid; gap:.3em; }
.c-lainaus__nimi{ font-size:clamp(24px,2vw,36px); color:var(--puna); }
.c-lainaus__rooli{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }

/* Käsin kansioon kirjoitettu iso lause */
.c-tarra{ display:grid; gap:.3em; padding-block:clamp(20px,3vw,60px); text-align:center; justify-items:center; }
.c-tarra__tun{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.c-tarra__teksti{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(34px,4.6vw,88px); line-height:.95; text-wrap:balance; }
.c-tarra__ala{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; font-size:clamp(24px,2.4vw,44px); line-height:.8; rotate:-3deg; max-width:28ch; text-wrap:balance; }

/* Somepostausten nippu */
.c-nippu{ display:flex; flex-wrap:wrap; justify-content:center; padding-inline:2%; }
.c-vedos{ width:clamp(130px,17%,250px); margin:-1.2% -1%; rotate:var(--r); background:#F3EFE6;
  padding:clamp(5px,.5vw,8px) clamp(5px,.5vw,8px) clamp(16px,1.6vw,26px); box-shadow:0 16px 30px -18px rgba(0,0,0,.75); }
.c-vedos img, .c-vedos video{ width:100%; height:auto; display:block; }

.c-selain figcaption{ text-align:center; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; opacity:.7; }
/* align-items:flex-start: muuten flex venyttäisi vasemman puhelimen oikean (margin-top) korkuiseksi
   ja 9:19,5-mittasuhde hajoaisi. */
.c-puhelimet .puhelimet, .c-puhelimet{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(20px,5vw,90px); }

/* Kansion alareuna: arkistomerkintä ja mittakaava kuten piirustuksissa */
.c-kansio__ala{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(40px,5vw,90px);
  font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px); letter-spacing:.12em; text-transform:uppercase; }
.c-kansio__ala a:hover{ text-decoration:underline; text-underline-offset:.3em; }
.c-mittakaava{ display:flex; height:7px; border:1px solid currentColor; width:clamp(90px,10vw,160px); }
.c-mittakaava i{ flex:1; }
.c-mittakaava i:nth-child(odd){ background:currentColor; }

/* Seuraava kansio: kortti oikeassa alakulmassa */
.c-seuraava{
  position:fixed; right:var(--reuna); bottom:var(--reuna); z-index:60; display:grid; justify-items:end; gap:10px;
}
/* Kaikki työnäytteet Seuraavan yläpuolella (Jenna 22.10.2026): vie kansiopinoon,
   tumma ettei kilpaile punaisen kanssa. */
.c-alkuun{ display:inline-flex; gap:.5em; align-items:center; font-family:var(--f-otsikko); text-transform:uppercase;
  font-size:clamp(14px,1.05vw,18px); line-height:1; letter-spacing:.03em; background:var(--musta); color:var(--kerma);
  padding:.75em 1.2em .7em; border:1px solid rgba(228,222,208,.3); border-radius:999px; cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  transition:background 260ms linear, color 260ms linear, opacity 400ms linear, translate 600ms var(--ease); }
.c-alkuun:hover{ background:var(--kerma); color:var(--musta); }
/* Piilotus lapsiin: GSAP animoi itse korttia, eikä CSS-siirtymä saa kilpailla sen kanssa. */
.c-seuraava > *{ transition:opacity 400ms linear, translate 600ms var(--ease); }
.c-seuraava.piilossa{ pointer-events:none; }
.c-seuraava.piilossa > *{ opacity:0; translate:0 24px; }
.c-seuraava__nappi{ display:inline-flex; gap:.5em; align-items:center; font-family:var(--f-otsikko); text-transform:uppercase;
  font-size:clamp(17px,1.4vw,24px); line-height:1; letter-spacing:.03em; background:var(--puna); color:var(--kerma);
  padding:.8em 1.4em .75em; border-radius:999px; box-shadow:0 14px 30px -14px rgba(0,0,0,.8); transition:background 260ms linear, color 260ms linear; }
.c-seuraava__linkki:hover .c-seuraava__nappi{ background:var(--kerma); color:var(--puna); }

/* Selainikkuna: sivu rullaa ikkunassa vierityksen tai hoverin mukana */
.selain{ margin-block:0; display:grid; gap:12px; }
.selain__palkki{
  display:flex; align-items:center; gap:7px; background:var(--musta); color:var(--kerma);
  padding:12px 16px; border-radius:clamp(10px,1.2vw,18px) clamp(10px,1.2vw,18px) 0 0;
}
.selain__palkki > span{ width:11px; height:11px; border-radius:50%; background:rgba(228,222,208,.35); }
.selain__palkki > span:first-child{ background:var(--puna); }
.selain__osoite{ margin-left:12px; font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
  background:rgba(228,222,208,.12); padding:.35em 1em; border-radius:999px; }
.selain__ikkuna{
  height:min(72svh, 52vw); overflow:hidden; background:var(--musta);
  border-radius:0 0 clamp(10px,1.2vw,18px) clamp(10px,1.2vw,18px); margin-top:-12px;
  box-shadow:0 40px 80px -40px rgba(25,25,25,.6);
}
.selain__sivu{ width:100%; height:auto; display:block; will-change:transform; }
.selain figcaption{ text-align:center; opacity:.65; }

.puhelimet{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(20px,5vw,90px); padding-block:clamp(10px,2vw,30px); }
.puhelin{
  /* iPhone 15/16 -rungon mitat 71,6 x 147,6 mm (Iines 21.10.2026: 9/19,5 oli
     näytön suhde, rungoksi liian pitkulainen). */
  width:clamp(150px,21vw,330px); aspect-ratio:71.6 / 147.6; border-radius:clamp(24px,3.1vw,48px);
  background:var(--musta); padding:clamp(6px,.7vw,11px); position:relative;
  box-shadow:0 40px 80px -30px rgba(25,25,25,.55);
}
.puhelin:first-child{ rotate:-5deg; }
.puhelin:last-child{ rotate:4deg; margin-top:8%; }
.puhelin__naytto{ width:100%; height:100%; overflow:hidden; border-radius:clamp(20px,2.8vw,42px); background:#fff; }
.puhelin__naytto img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.puhelin::before{                       /* lovi */
  content:''; position:absolute; top:clamp(12px,1.3vw,20px); left:50%; translate:-50% 0; z-index:2;
  width:28%; height:clamp(8px,.9vw,14px); border-radius:999px; background:var(--musta);
}


/* ============================================================
   KAPEA RUUTU
   ============================================================ */
@media (max-width:900px){
  .p-menu{ font-size:13px; padding:.65em 1.2em .6em; }
  .r-hero__kasi{ font-size:24px; margin-top:.4em; }
  /* Puhelimessa pöytä reunoille: omat paikat (--ml/--mr/--mt), osa piiloon. */
  .r-poyta > *{ left:var(--ml,auto) !important; right:var(--mr,auto) !important; top:var(--mt) !important; }
  .r-ei-mob{ display:none; }
  .r-pola{ width:23vw; }
  .r-slogan{ font-size:19px; }

  /* Mobiilissa palvelut sirupalkiksi karusellin yläpuolelle. */
  .nayttamo{ display:block; padding:clamp(40px,8vw,70px) 0; }
  .nayttamo__vasen{ margin-bottom:14px; }
  .nayttamo__vasen > .meta{ display:none; }
  .palvelulista{ display:flex; gap:8px; overflow-x:auto; padding:2px var(--reuna) 4px; scrollbar-width:none; }
  .palvelulista::-webkit-scrollbar{ display:none; }
  .pl{ display:inline-flex; width:auto; white-space:nowrap; gap:.5em; border:1px solid rgba(25,25,25,.25);
    border-radius:999px; padding:.55em 1em .5em; }
  .pl__nimi{ font-size:16px; }
  .pl[aria-pressed="true"]{ background:var(--musta); border-color:var(--musta); }
  .pl[aria-pressed="true"] .pl__nimi{ color:var(--kerma); translate:none; }
  .nayttamo__oikea{ grid-template-columns:1fr; }
  .sivu-tyot{ --kortti-l:78vw; }
  .rumpu{ width:100%; height:calc(78vw * .75 * 1.5); min-height:0; cursor:auto; }
  .kortti__kehys{ aspect-ratio:4 / 3; }

  .sivu-ref{ --lehti-k:38px; }
  .lehti{ font-size:14px; padding:0 12px; margin-inline:-1px; }
  .pino{ --porras:8px; }
  /* Oikea reuna häivyttyy: näkyy, että välilehtirivi jatkuu vieritettäessä. */
  .kansio__lehdet{ -webkit-mask-image:linear-gradient(to right, #000 82%, transparent);
                           mask-image:linear-gradient(to right, #000 82%, transparent); }

  .c-yla__meta{ padding-right:0; margin-top:56px; }
  .sivu-asiakas{ --lehti-l:38px; --nauha-yla:84px; }
  .c-alue{ padding-inline:12px; }
  .c-kansio{ margin-right:var(--lehti-l); padding:14px 10px 22px; }
  .c-lehti{ font-size:13px; }
  .c-arkki{ --arkki-reuna:30px; --arkki-yla:26px; padding:var(--arkki-yla) 16px 64px 44px; }
  .c-arkki__yla{ grid-template-columns:1fr; }
  .c-arkki__kuva{ max-width:78%; }
  .c-pala{ width:calc(var(--wm) * 1%); margin-left:calc(var(--xm) * 1%); margin-top:-22px; }
  .c-kollaasi{ margin-top:-30px; }
  .c-vedos{ width:46%; margin:-2% -1.5%; }
  .selain__ikkuna{ height:62svh; }
  .puhelin{ width:40vw; }
  .c-kansio__ala{ flex-wrap:wrap; }
  .c-seuraava__nappi{ font-size:15px; }
}

/* ============================================================
   VÄHENNETTY LIIKE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .kortti__kuva, .r-nappi::before, .c-lehti, .c-seuraava > *, .lehti, .kansio, .kansio__runko::after{ transition:none; }
}

/* MENU YLÄREUNAN KESKELLE kuten etusivun pilleri (Jenna 19.10.2026).
   Nappi irrotetaan oikean ylänurkan ryhmästä kiinteäksi; leima jää
   kulmaan. margin-inline:auto keskittää, koska translate on hoverin
   käytössä. Yläreuna sama kuin etusivun .palkki. */
.p-kulma .p-menu{
  position:fixed; left:0; right:0; top:clamp(14px,1.8vw,26px);
  width:max-content; margin-inline:auto; z-index:70;
}

/* Leima pienemmäksi ja menun pystykeskelle (Jenna 20.10.2026). */
.p-kulma{ top:clamp(14px,1.8vw,26px); height:calc(clamp(16px,1.45vw,24px) * 2.35); display:flex; align-items:center; }
.p-kulma .leima-oikea{ font-size:clamp(11px,1.05vw,17px) !important; }
@media (max-width:700px){ .p-kulma{ height:calc(13px * 2.25); } }

/* ============================================================
   KAIKKI REFERENSSIT — kaikki asiakkaat kortteina
   ============================================================ */
.kaikki-linkki{ display:table; margin:clamp(50px,6vw,100px) auto 0; }
.sivu-kaikki{ background:var(--kerma); }
.kaikki{ padding:clamp(110px,14vh,160px) var(--reuna) clamp(80px,9vw,150px); }
.kaikki__takaisin{ font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.kaikki__takaisin:hover{ color:var(--puna); }
.kaikki__otsikko{ margin-top:clamp(14px,2vw,30px); color:var(--puna); }
.kaikki__maara{ font-family:var(--f-mono); font-size:clamp(12px,.9vw,15px); letter-spacing:.1em; text-transform:uppercase; margin:.6em 0 clamp(36px,5vw,80px); }
.kaikki__ruudukko{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,56px) clamp(16px,2vw,36px); }
.kk{ display:grid; gap:.5em; }
/* Kuvat omassa kuvasuhteessaan, ei rajausta (Jenna 23.10.2026). */
.kaikki__ruudukko{ align-items:start; }
.kk__kuva{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:clamp(10px,1vw,16px); background:var(--musta); }
.kk__kuva img, .kk__kuva video{ width:100%; height:100%; object-fit:cover; display:block; transition:scale 900ms var(--ease); }
.kaikki__ruudukko .kk__kuva{ aspect-ratio:auto; }
.kaikki__ruudukko .kk__kuva img, .kaikki__ruudukko .kk__kuva video{ height:auto; object-fit:initial; }
.kk:hover .kk__kuva img, .kk:hover .kk__kuva video{ scale:1.05; }
.kk__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(22px,2vw,36px); line-height:.95; margin-top:.3em; transition:color 260ms linear; }
.kk:hover .kk__nimi{ color:var(--puna); }
.kk__ala{ font-family:var(--f-mono); font-size:clamp(11px,.8vw,13px); letter-spacing:.04em; opacity:.7; }
@media (max-width:1100px){ .kaikki__ruudukko{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .kaikki__ruudukko{ grid-template-columns:1fr; } }
/* Suodatin (Jenna 23.10.2026): kansioiden kategoriat + Kaikki. Mobiilissa
   napit rivitetään, ei vaakavieritystä. */
.kaikki__suodatin{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,.7vw,12px); margin:0 auto clamp(40px,5vw,80px); max-width:1100px; }
.ks{ font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.01em; font-size:clamp(13px,1vw,16px); line-height:1;
  padding:.75em 1.2em .7em; border:1.5px solid var(--musta); border-radius:999px; background:transparent; color:var(--musta);
  cursor:pointer; transition:background-color 260ms linear, color 260ms linear, border-color 260ms linear; }
.ks:hover{ border-color:var(--puna); color:var(--puna); }
.ks[aria-pressed="true"]{ background:var(--puna); border-color:var(--puna); color:var(--kerma); }
.ks:focus-visible{ outline:2px solid var(--puna); outline-offset:3px; }
.kaikki__ruudukko > li[hidden]{ display:none; }

/* Hero (.sivu-hero, brandstein.css): koko ruudun korkuinen, kansiot alkavat sen alta. */
.asiakkaat{ padding-top:0; }
.asiakkaat__yla.sivu-hero{ margin-bottom:0; }
.asiakkaat__otsikko.sivu-hero__ot{ color:var(--kerma); }
/* Kaikki työt: hero (.sivu-hero), takaisin-linkki jää sen yläpuolelle. */
.kaikki__hero{ padding-inline:0; }
.kaikki__otsikko.sivu-hero__ot{ text-align:center; }
.kaikki__otsikko.sivu-hero__ot{ margin-top:0; }
.kaikki__maara.sivu-hero__ala{ font-family:var(--f-nav); font-size:clamp(16px,1.6vw,26px); letter-spacing:.01em; line-height:1.3; margin:0; }
.kaikki__hero + .kaikki__ruudukko, .kaikki__hero ~ ul{ margin-top:0; }
.kaikki{ position:relative; padding-top:0; }
.kaikki__takaisin{ position:absolute; top:clamp(70px,9vh,110px); left:var(--reuna); z-index:2; }

/* Asiakassivun yläosa (Jenna 22.10.2026): ei isoa heroa. Nimi on pieni ja
   kansion yläpuolella tummalla, jotta kansion avautuminen näkyy ruudulla. */
.c-alue{ padding-top:clamp(104px,13vh,140px); }
.c-yla{ display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:24px; row-gap:6px;
  margin-bottom:clamp(22px,2.4vw,40px); }
.c-yla .c-yla__meta{ display:block; padding-right:0; margin:0; }
.c-yla__ala{ grid-column:1 / -1; font-family:var(--f-eyebrow); font-size:clamp(22px,1.9vw,32px); line-height:1; color:var(--puna); }
.c-nimi{ margin:0; font-family:var(--f-otsikko); font-weight:400; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(80px,9.2vw,168px); line-height:1.05; padding-top:.08em; color:var(--kerma); text-align:left; text-wrap:balance; }   /* 2 x (Jenna 22.10.2026) */
.c-yla__nro{ font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.01em; font-size:clamp(13px,1vw,17px);
  line-height:1.3; padding-bottom:.6em; white-space:nowrap; }
@media (min-width:1100px){
  /* Sama leveys kuin kansiolla, jotta numero on kansion oikeaa reunaa vasten. */
  .c-yla{ width:calc((100% - var(--lehti-l) * 2) * .88); }
}
@media (max-width:640px){
  .c-alue{ padding-top:96px; }
  .c-yla{ grid-template-columns:1fr; margin-right:var(--lehti-l); }
  .c-nimi{ font-size:clamp(52px,15vw,96px); }
  .c-yla__nro{ padding-bottom:0; }
}

/* ============================================================
   ASIAKASSIVUN VÄLILEHDET KANSION YLÄREUNASSA (Jenna 22.10.2026,
   ehdotukset 1-3): kuten pinossa, vain oman kansion asiakkaat ja
   ensimmäisenä kansion nimi. Avoin välilehti edessä kansion värisenä,
   muut tummenevat. Korvaa pystyvälilehdet.
   ============================================================ */
.sivu-asiakas{ --c-lehti-k:clamp(40px,3.2vw,56px); }
.c-kansio{ margin-top:var(--c-lehti-k); border-radius:0 8px 8px 8px; }
.c-lehdet{ position:absolute; left:0; right:0; top:auto; bottom:100%; width:auto; height:calc(var(--c-lehti-k) + 8px);
  display:flex; align-items:flex-end; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; z-index:2; }
.c-lehdet::-webkit-scrollbar{ display:none; }
.c-lehti{ writing-mode:horizontal-tb; width:auto; min-height:0; height:var(--c-lehti-k); margin:0; padding:0 clamp(16px,1.6vw,28px);
  --r:calc(var(--c-lehti-k) * .533); border-radius:var(--r) var(--r) 0 0;
  --lv:color-mix(in srgb, var(--v), #000 calc(var(--n, 0) * 9%)); background:var(--lv); color:var(--t);
  font-size:clamp(15px,1.35vw,24px); z-index:var(--zi, 1); translate:none;
  transition:height 450ms var(--ease); }   /* ei värin liukumaa (välähdys) */
.c-lehti:first-child{ padding-top:0; }
.c-lehti + .c-lehti{ margin-left:calc(var(--r) * -1); padding-left:calc(var(--r) + clamp(10px,1vw,18px)); }
.c-lehti:last-child{ margin-bottom:0; }
.c-lehti[aria-current]{ z-index:98; background:var(--v); }
.c-lehti:not([aria-current]):hover, .c-lehti:focus-visible{ translate:none; height:calc(var(--c-lehti-k) + 4px); background:var(--lv); }
.c-lehti--kategoria{ font-family:var(--f-otsikko); }

/* Edellinen ja seuraava nimillä, keskellä järjestysnumero (ehdotukset 1 ja 2). */
.c-kansio__ala{ align-items:end; gap:clamp(12px,2vw,32px); }
.c-naapuri{ display:grid; gap:4px; max-width:42%; }
.c-naapuri--seur{ text-align:right; justify-items:end; }
.c-naapuri__leima{ font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.c-naapuri__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; letter-spacing:.02em; font-size:clamp(18px,1.6vw,28px); line-height:1.05; }
.c-naapuri:hover .c-naapuri__nimi{ text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:2px; }
.c-naapurit__nro{ font-family:var(--f-nav); font-size:clamp(13px,1vw,17px); letter-spacing:.02em; white-space:nowrap; padding-bottom:.2em; }

@media (max-width:640px){
  .sivu-asiakas{ --c-lehti-k:38px; }
  .c-kansio{ margin-right:0; }
  .c-yla{ margin-right:0; }
  .c-lehti{ font-size:14px; padding:0 12px; }
  .c-lehti + .c-lehti{ padding-left:calc(var(--r) + 8px); }
  /* Oikea reuna häivyttyy, kun välilehtirivi jatkuu (kuten pinossa). */
  .c-lehdet{ -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--vf, 0px), #000 calc(100% - var(--of, 0px)), transparent);
                     mask-image:linear-gradient(to right, transparent, #000 var(--vf, 0px), #000 calc(100% - var(--of, 0px)), transparent); }
  .c-lehdet.vasen-jatkuu{ --vf:40px; }
  .c-lehdet.oikea-jatkuu{ --of:48px; }
  .c-kansio__ala{ flex-wrap:nowrap; }
  .c-naapuri__nimi{ font-size:15px; }
  .c-naapurit__nro{ display:none; }
}
/* Avoin välilehti on edellisen päällä: edelliselle tilaa kulman verran, ettei nimi jää alle. */
.c-lehti:has(+ .c-lehti[aria-current]){ padding-right:calc(var(--r) + clamp(12px,1.2vw,20px)); }
.c-lehti + .c-lehti[aria-current]{ padding-left:clamp(16px,1.6vw,28px); }
@media (max-width:640px){ .c-lehti + .c-lehti[aria-current]{ padding-left:12px; } }
/* Ensimmäinen välilehti on kansion vasemmassa reunassa: rungon vasen yläkulma suoraksi,
   muuten välilehden ja rungon väliin jäi tumma lovi (Jenna 22.10.2026). */
.kansio__runko, .kansio:last-child .kansio__runko, .kansio:not(:last-child) .kansio__runko::before{ border-top-left-radius:0; }

/* SISÄLLYSLUETTELO (Jenna 22.10.2026): avoimen kansion asiakkaat listana, ei
   välilehtinä. Hoverilla rivin kansikuva ilmestyy osoittimen viereen (JS). */
.kansio__lista{ list-style:none; margin:0; padding:0; border-top:1px solid color-mix(in srgb, var(--t), transparent 65%); }
.kansio__rivi{ display:grid; grid-template-columns:3.2em minmax(0,1fr) auto 1.4em; align-items:baseline; column-gap:clamp(12px,1.6vw,28px);
  padding:clamp(5px,.55vw,9px) clamp(4px,.6vw,10px); color:var(--t);   /* tiivis (Jenna 22.10.2026) */
  border-bottom:1px solid color-mix(in srgb, var(--t), transparent 65%); }
.kr__nro{ font-family:var(--f-mono); font-size:clamp(11px,.8vw,13px); letter-spacing:.1em; opacity:.75; }
.kr__kuva{ display:none; }
.kr__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(22px,2.3vw,42px); line-height:1; padding-top:.08em;
  transition:translate 450ms var(--ease); }
.kr__leima{ font-family:var(--f-mono); font-size:clamp(10px,.8vw,13px); letter-spacing:.1em; text-transform:uppercase; opacity:.8; text-align:right; }
.kr__nuoli{ font-family:var(--f-otsikko); font-size:clamp(20px,1.8vw,30px); opacity:0; translate:-10px 0;
  transition:opacity 250ms linear, translate 450ms var(--ease); }
.kansio__rivi:hover .kr__nimi, .kansio__rivi:focus-visible .kr__nimi{ translate:clamp(8px,.8vw,14px) 0; }
.kansio__rivi:hover .kr__nuoli, .kansio__rivi:focus-visible .kr__nuoli{ opacity:1; translate:0 0; }
/* Hover-kansikuva: yksi elementti, johon JS vaihtaa rivin kuvan ja jota se liikuttaa. */
.kansio__kansikuva{ position:absolute; left:0; top:0; z-index:3; width:clamp(200px,22vw,340px); aspect-ratio:4 / 3; overflow:hidden;
  pointer-events:none; border-radius:3px; background:var(--musta); box-shadow:0 24px 40px -20px rgba(0,0,0,.6);
  opacity:0; scale:.9; rotate:-3deg; transition:opacity 250ms linear, scale 500ms var(--ease); }
.kansio__kansikuva.nakyy{ opacity:1; scale:1; }
.kansio__kansikuva img, .kansio__kansikuva video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:none), (max-width:640px){
  .kansio__kansikuva{ display:none; }
  .kansio__rivi{ grid-template-columns:auto minmax(0,1fr) 1.2em; grid-template-rows:auto auto; column-gap:12px; row-gap:2px; align-items:center; }
  .kr__nro{ display:none; }
  .kr__kuva{ display:block; grid-row:1 / 3; width:56px; aspect-ratio:4 / 3; overflow:hidden; border-radius:2px; background:var(--musta); }
  .kr__kuva img, .kr__kuva video{ width:100%; height:100%; object-fit:cover; display:block; }
  .kr__nimi{ font-size:19px; grid-column:2; }
  .kr__leima{ grid-column:2; text-align:left; font-size:9px; }
  .kr__nuoli{ grid-column:3; grid-row:1 / 3; opacity:1; translate:none; font-size:20px; }
}

/* KANSIOT RINNAKKAIN (Jenna 22.10.2026, piirros): kansiot tiiviisti päällekkäin
   samassa linjassa, jokaisesta näkyy kapea reuna, ja välilehdet ovat x-akselilla
   vierekkäin: etummaisen vasemmalla, taaemmat oikealle limittäin. JS lisää
   .rinnakkain vain jos välilehdet mahtuvat riviin (kapealla vanha porrastus). */
.pino.rinnakkain{ --askel:clamp(12px,1.2vw,18px); --peitto:calc(var(--lehti-k) + 12px + var(--lehti-k) + var(--kaista) - var(--askel)); }
.pino.rinnakkain .kansio{ width:100%; margin-left:0; }
.pino.rinnakkain .kansio + .kansio{ margin-top:calc(var(--peitto) * -1); }
.pino.rinnakkain .kansio__lehdet{ padding-left:var(--tab-x, 0px); overflow:visible; }
.pino.rinnakkain .kansio .kansio__runko::before{ display:none; }
.pino.rinnakkain .kansio.auki:not(:last-child) .kansio__runko{ padding-bottom:calc(clamp(18px,2.4vw,40px) + var(--peitto)); }

/* ARKIT A4-KOKOISIA (Jenna 22.10.2026): jokainen kansio on vaakasuuntainen A4
   (1,414 : 1) eikä lyhyt kaista. Avoimen kansion edessä olevat liukuvat sen
   alle, joten avoin arkki näkyy kokonaan (JS: FLIP). */
.pino.rinnakkain{ container-type:inline-size; --sivu-h:calc(100cqw / 1.414 * .64);   /* A4 -20 % -20 % (Jenna 22.10.2026) */
  --peitto:calc(var(--lehti-k) + 12px + var(--sivu-h) - var(--askel)); }
.pino.rinnakkain .kansio__runko, .pino.rinnakkain .kansio.auki .kansio__runko,
.pino.rinnakkain .kansio:last-child .kansio__runko{ height:var(--sivu-h); min-height:0; }
.pino.rinnakkain .kansio.auki:not(:last-child) .kansio__runko{ padding-bottom:clamp(18px,2.4vw,40px); }
/* Alemmat kansiot siirtyvät vain sen verran, että sisällysluettelo näkyy (JS: --nakyva). */
.pino.rinnakkain .kansio.auki + .kansio{ margin-top:calc(var(--nakyva, var(--sivu-h)) - var(--sivu-h)); }

/* SISÄLLYSLUETTELON HOVER (Jenna 22.10.2026, esikuva stefanobg.com): nimet
   himmeitä, hiiren alla olevalle riville liukuu täysleveä tumma nauha (JS),
   nimi kirkastuu ja levenee, nuoli kääntyy ↗ -> →, kansikuva osoittimen
   kohdalla Avaa-merkillä. Vain hiirellä; kosketuksella lista pysyy ennallaan. */
@media (hover:hover) and (min-width:641px){
  /* Esikuvan tapaan jokaisella rivillä oma nauha: kasvaa alareunasta ylös
     (scaleY 0 -> 1, 0,7 s) ja painuu poistuessa takaisin alas. */
  .kansio__lista{ position:relative; z-index:1; }
  .kansio__rivi{ position:relative; isolation:isolate; }
  .kansio__rivi::before{ content:''; position:absolute; z-index:-1; top:0; bottom:0;
    left:calc(clamp(18px,2.4vw,40px) * -1); right:calc(clamp(18px,2.4vw,40px) * -1);
    background:var(--musta); transform-origin:50% 100%; scale:1 0; transition:scale 700ms var(--ease); }
  .kansio__rivi:hover::before, .kansio__rivi:focus-visible::before{ scale:1 1; }
  /* Kuten esikuvassa: nimet himmenevät vain kun hiiri on listan päällä. */
  .kr__nimi{ transition:color 400ms linear, letter-spacing 800ms var(--ease), translate 800ms var(--ease); }
  .kansio__lista:hover .kr__nimi{ color:color-mix(in srgb, var(--t), transparent 50%); }
  .kansio__lista .kansio__rivi:hover .kr__nimi, .kansio__rivi:focus-visible .kr__nimi{ color:var(--kerma); letter-spacing:.03em; translate:clamp(6px,.6vw,10px) 0; }
  .kr__nro, .kr__leima{ transition:color 400ms linear; }
  .kansio__rivi:hover .kr__nro, .kansio__rivi:hover .kr__leima{ color:var(--kerma); }
  .kr__nuoli{ opacity:.8; translate:none; rotate:-45deg; transition:rotate 600ms var(--ease), color 400ms linear; }
  .kansio__rivi:hover .kr__nuoli, .kansio__rivi:focus-visible .kr__nuoli{ opacity:1; translate:none; rotate:0deg; color:var(--kerma); }
  .kansio__kansikuva{ rotate:0deg; scale:.85; transition:opacity 300ms linear, scale 700ms var(--ease); }
  .kk__kuvat{ position:absolute; inset:0; }
  .kk__kuvat img, .kk__kuvat video{ width:100%; height:100%; object-fit:cover; display:block; }
  .kk__avaa{ position:absolute; left:50%; top:50%; width:clamp(64px,5.5vw,90px); aspect-ratio:1; translate:-50% -50%; border-radius:50%;
    display:grid; place-items:center; background:#FF3600; color:var(--kerma); font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px);
    letter-spacing:.14em; text-transform:uppercase; scale:.6; transition:scale 600ms var(--ease); }
  .kansio__kansikuva.nakyy .kk__avaa{ scale:1; }
}

/* ÄÄRIVIIVA (Jenna 22.10.2026, piirros): välilehti ja kansion yläreuna yhtenä
   muotona ohuella tummalla viivalla, ettei kapea reunakaista näytä kuuluvan
   viereiseen välilehteen. Välilehti peittää viivan omalta kohdaltaan. */
.pino{ --viiva:rgba(25,25,25,.55); }
.pino .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), 0 -6px 14px -10px rgba(0,0,0,.28); }
.pino .kansio:last-child .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), 0 4px 0 rgba(0,0,0,.35), 0 40px 70px -30px rgba(0,0,0,.9); }
.pino .lehti{ box-shadow:inset 0 1px 0 var(--viiva), inset 1px 0 0 var(--viiva), inset -1px 0 0 var(--viiva); }
.pino .kansio.auki .lehti, .pino .kansio.auki .kansio__runko{ --viiva:transparent; }

/* KOKEILU: PINO KOKO NÄYTÖN LEVYINEN (Jenna 22.10.2026): mustat reunat pois.
   Pino ulottuu sivun reunasta reunaan, välilehdet ja sisältö pysyvät sivun
   reunuksen sisällä. Kulmat suoriksi reunoilla. */
.pino.rinnakkain{ max-width:none; margin-inline:calc(var(--reuna) * -1); }
.pino.rinnakkain .kansio__lehdet{ padding-left:calc(var(--reuna) + var(--tab-x, 0px)); }
.pino.rinnakkain .kansio__runko, .pino.rinnakkain .kansio:last-child .kansio__runko{ border-radius:0; }
.pino.rinnakkain .kansio.auki .kansio__runko{ padding-inline:var(--reuna); }

/* KLEMMARI JENNAN VEKTORISTA (assets/img/klemmari.svg, 22.10.2026), käytetään
   sellaisenaan. Jennan kuvan mukaan liitin on pujotettu arkin yläreunan yli:
   20 % liittimen korkeudesta arkin yläpuolella, kuvan yläreuna 45 %:n kohdalla. */
.c-arkki{ --kl:clamp(28px,2.6vw,40px); --kl-h:calc(var(--kl) * 241.35 / 79.39); --kuva-yla:calc(var(--kl-h) * .25); }
.c-klemmari{ top:calc(var(--kl-h) * -.45); width:var(--kl); height:var(--kl-h); stroke:none; filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,.3)); }

/* VÄLILEHDEN ÄÄRIVIIVA ERILLISENÄ KERROKSENA: viiva päättyy 2 px ennen
   välilehden alareunaa, joten se kohtaa kansion yläreunan viivan ilman piikkiä. */
.pino .lehti{ box-shadow:none; }
.pino .lehti::after{ display:block; content:''; position:absolute; left:0; right:0; top:0; bottom:2px; width:auto; height:auto;
  background:none; transform:none; clip-path:none; pointer-events:none;
  border:1px solid var(--viiva); border-bottom:0; border-radius:inherit; }

/* KATEGORIAN VAIHTO ILMAN VÄLÄHDYSTÄ (Jenna 22.10.2026): värit vaihtuvat heti
   (liuku kerma -> puna näkyi lohenpunaisena välähdyksenä); edessä olevat
   kansiot vain laskeutuvat pois. */
.pino .kansio__runko, .pino .lehti{ transition:height 450ms var(--ease); }
/* Korostusnauha kansion reunasta reunaan (padding = --reuna koko leveällä pinolla). */
.pino.rinnakkain .kansio__rivi::before{ left:calc(var(--reuna) * -1); right:calc(var(--reuna) * -1); }

/* Suljettu alin kansio on vain reuna (Jenna 22.10.2026): kun pinon keskeltä on
   auki kansio, alimmasta näkyi muuten tyhjä koko arkin kokoinen pinta. */
.pino.rinnakkain .kansio:last-child:not(.auki) .kansio__runko{ height:calc(var(--askel) * 2); }
/* Vähän väljyyttä kansioiden reunojen väliin. */
.pino.rinnakkain{ --askel:clamp(16px,1.6vw,24px); }
/* Klemmari on img: kuvan säännöt (width 100 %, max-height, object-fit) eivät koske sitä. */
.c-arkki__kuva img.c-klemmari{ position:absolute; right:16%; left:auto; top:calc(var(--kl-h) * -.45);
  width:var(--kl); height:var(--kl-h); max-height:none; object-fit:contain; display:block; z-index:2; }
.pino.rinnakkain{ --askel:clamp(22px,2.1vw,32px); }   /* lisää väljyyttä: reunat eivät kosketa (Jenna 22.10.2026) */

/* ============================================================
   KANSIOT OMIN VÄREIN, VARJOIN JA KAPEAMPINA (Iines 23.10.2026)
   - Jokaisella kansiolla oma väri projektin paletista (kerma, hiekka, oliivi,
     puna, musta), joka säilyy myös avattuna: väri kulkee kansion mukana.
   - Pino ei ole koko näytön levyinen: reunat näkyvät, kulmat pyöreät.
   - Kansioiden välissä ohut tumma raja.
   ============================================================ */
.kansio[data-kansio="0"]{ --v:var(--kerma); --t:var(--musta); }
.kansio[data-kansio="1"]{ --v:var(--hiekka); --t:var(--musta); }
.kansio[data-kansio="2"]{ --v:var(--oliivi); --t:var(--musta); }
.kansio[data-kansio="3"]{ --v:var(--kerma); --t:var(--musta); }
.kansio[data-kansio="4"]{ --v:var(--hiekka); --t:var(--musta); }
.kansio[data-kansio="5"]{ --v:var(--puna); --t:var(--kerma); }
.kansio[data-kansio="6"]{ --v:var(--oliivi); --t:var(--musta); }
.kansio.auki[data-kansio="0"]{ --v:var(--kerma); --t:var(--musta); }
.kansio.auki[data-kansio="1"]{ --v:var(--hiekka); --t:var(--musta); }
.kansio.auki[data-kansio="2"]{ --v:var(--oliivi); --t:var(--musta); }
.kansio.auki[data-kansio="3"]{ --v:var(--kerma); --t:var(--musta); }
.kansio.auki[data-kansio="4"]{ --v:var(--hiekka); --t:var(--musta); }
.kansio.auki[data-kansio="5"]{ --v:var(--puna); --t:var(--kerma); }
.kansio.auki[data-kansio="6"]{ --v:var(--oliivi); --t:var(--musta); }

.pino.rinnakkain{ max-width:min(1760px, calc(100% - 2 * clamp(0px, 1.5vw, 30px))); margin-inline:auto; }   /* hieman leveämpi (Iines 23.10.2026) */
.pino.rinnakkain .kansio__lehdet{ padding-left:calc(clamp(18px,2vw,34px) + var(--tab-x, 0px)); }
.pino.rinnakkain .kansio__runko, .pino.rinnakkain .kansio:last-child .kansio__runko{ border-radius:0 10px 10px 10px; }
.pino.rinnakkain .kansio.auki .kansio__runko{ padding-inline:clamp(20px,3vw,56px); }
.pino.rinnakkain .kansio__rivi::before{ left:calc(clamp(20px,3vw,56px) * -1); right:calc(clamp(20px,3vw,56px) * -1); }
/* Varjo hillitysti: vain ohut tumma raja kansion yläreunassa ja pehmeä
   varjo koko pinon alla (Iines 23.10.2026: isot varjot näyttivät köpöiltä). */
.pino .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), 0 -1px 0 rgba(0,0,0,.25); }
.pino .kansio:last-child .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), 0 24px 50px -30px rgba(0,0,0,.7); }

/* SISÄLLYSLUETTELO VAIKUTTAVAMMAKSI: isommat nimet, väljemmät rivit, ja
   hoverkuva omassa mittasuhteessaan ilman rajausta (Iines 23.10.2026). */
.kansio__rivi{ padding:clamp(10px,1vw,18px) clamp(4px,.6vw,10px); }
.kr__nimi{ font-size:clamp(28px,3.6vw,68px); line-height:.95; }
.kr__nro{ font-size:clamp(11px,.85vw,14px); }
@media (hover:hover) and (min-width:641px){
  .kansio__kansikuva{ width:clamp(240px,24vw,420px); aspect-ratio:auto; height:auto; overflow:visible; background:none;
    border-radius:0; box-shadow:none; }
  .kansio__kansikuva .kk__kuvat{ position:relative; inset:auto; display:block; }
  .kansio__kansikuva .kk__kuvat img, .kansio__kansikuva .kk__kuvat video{ width:100%; height:auto; max-height:60vh; object-fit:contain;
    display:block; box-shadow:0 30px 50px -24px rgba(0,0,0,.6); border-radius:3px; }
}
/* Avoin alin kansio kasvaa listansa mittaiseksi: pitkä asiakaslista leikkautui
   A4-korkeuteen (Iines 23.10.2026). */
.pino.rinnakkain .kansio.auki:last-child .kansio__runko{ height:auto; min-height:var(--sivu-h); }

/* PORRASTUS JENNAN/IINEKSEN PIIRROKSEN MUKAAN (IMG_6899, 23.10.2026): kukin
   taaempi kansio on edellistä ylempänä ja sivussa, joten kansioiden
   sivureuna näkyy portaina kuten yläreunakin. Etummainen (alin) on punainen
   (data-kansio 5 = alkuasetelman etummainen). */
/* Toisin päin (Iines 23.10.2026): taaemmat ylös ja OIKEALLE. */
.pino.rinnakkain{ --sx:clamp(14px,1.6vw,28px); padding-left:0; }
.pino.rinnakkain .kansio{ width:calc(100% - var(--sx) * 5); margin-left:calc(var(--porras-n, 0) * var(--sx)); }
/* Kaikki kulmat pehmeiksi. */
.pino.rinnakkain .kansio__runko, .pino.rinnakkain .kansio:last-child .kansio__runko,
.pino.rinnakkain .kansio:last-child:not(.auki) .kansio__runko{ border-radius:14px; }
/* Ohut tumma raja aina, myös avatussa kansiossa (Iines 23.10.2026), ja
   pieni varjo oikeaan reunaan siihen kohtaan, jossa kansiot ovat limittäin. */
.pino .kansio.auki .lehti, .pino .kansio.auki .kansio__runko{ --viiva:rgba(25,25,25,.55); }
.pino .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), inset -1px 0 0 var(--viiva), 0 -1px 0 rgba(0,0,0,.25), 6px 0 10px -6px rgba(0,0,0,.45); }
.pino .kansio:last-child .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), inset -1px 0 0 var(--viiva), inset 1px 0 0 var(--viiva), 6px 0 10px -6px rgba(0,0,0,.45), 0 24px 50px -30px rgba(0,0,0,.7); }
/* Sisällysluettelon erottimet pisteviivaksi, ylin pois (Iines 23.10.2026). */
.kansio__lista{ border-top:0; }
.kansio__rivi{ border-bottom:0; position:relative; }
.kansio__lista > li:not(:last-child) .kansio__rivi::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--t), transparent 25%) 1.4px, transparent 1.9px) left center / 9px 4px repeat-x; }
/* Lapun repaleinen alareuna leikkasi tekstin: tilaa alas (Iines 23.10.2026). */
.c-lappu, .c-lainaus{ padding-bottom:clamp(40px,4.4vw,70px); overflow:visible; }

/* Asiakassivun välilehdet omissa väreissään (generaattori: --ov/--ot), avattu = kansion väri. */
.c-lehti--oma, .c-lehti--oma:not([aria-current]):hover, .c-lehti--oma:focus-visible{ --lv:var(--ov); background:var(--ov); color:var(--ot); }
.c-lehti{ box-shadow:inset 0 1px 0 rgba(25,25,25,.45), inset 1px 0 0 rgba(25,25,25,.45), inset -1px 0 0 rgba(25,25,25,.45); }

/* Avatun kansion yläreunassa aina ohut tumma reuna, jotta välilehdet erottuvat;
   avoin välilehti peittää reunan omalta kohdaltaan (Iines 23.10.2026). */
.c-kansio{ box-shadow:inset 0 1px 0 rgba(25,25,25,.55), 0 60px 140px -60px rgba(0,0,0,.9); }
.c-lehdet{ bottom:100%; }
.c-lehti:not([aria-current]){ margin-bottom:0; }
.c-lehti[aria-current]{ margin-bottom:0; height:var(--c-lehti-k); box-shadow:inset 0 1px 0 rgba(25,25,25,.45), inset 1px 0 0 rgba(25,25,25,.45), inset -1px 0 0 rgba(25,25,25,.45); }

/* ISOMMAT VÄLILEHDET, KOKO KANSIO NOUSEE HOVERILLA, PIENEMPI LUETTELO (Iines 23.10.2026) */
.sivu-ref{ --lehti-k:clamp(46px,3.8vw,66px); }
.pino button.lehti, .pino .lehti{ font-size:clamp(20px,1.9vw,34px) !important; padding-inline:clamp(20px,2vw,38px) !important; }
.pino .lehti:hover, .pino .lehti:focus-visible{ height:var(--lehti-k); }
.pino .kansio{ transition:translate 450ms var(--ease); }
.pino .kansio:not(.auki):has(.lehti--kategoria:hover){ translate:0 -10px; }
.kr__nimi{ font-size:clamp(24px,2.8vw,52px); }

/* VÄLILEHTIEN REUNAT KAARTA SEURATEN (Iines 23.10.2026: "reunat menevät oudosti"):
   ohut ääriviiva välilehden ympäri (seuraa pyöreitä kulmia), alareuna
   rajattu pois, joten välilehti jatkuu kansioon. Vasen peittää oikean. */
.c-lehti, .c-lehti[aria-current]{ box-shadow:none; clip-path:none; }
.c-lehti::before{ content:''; position:absolute; inset:0; border:1px solid rgba(25,25,25,.55); border-bottom:0;
  border-radius:inherit; pointer-events:none; }
/* Kansion yläviiva piirretään kahtena palana avoimen välilehden molemmin puolin
   (JS: --aukko-x, --aukko-w), joten avoin välilehti jatkuu kansioon saumatta. */
.c-kansio{ box-shadow:0 60px 140px -60px rgba(0,0,0,.9);
  background-image:linear-gradient(rgba(25,25,25,.55),rgba(25,25,25,.55)), linear-gradient(rgba(25,25,25,.55),rgba(25,25,25,.55));
  background-repeat:no-repeat;
  background-size:var(--aukko-x,0px) 1px, calc(100% - var(--aukko-x,0px) - var(--aukko-w,0px)) 1px;
  background-position:0 0, calc(var(--aukko-x,0px) + var(--aukko-w,0px)) 0; }
/* Alin kansio (Kuluttajamarkkina) pysyy aina täysikokoisena, vaikka jokin
   muu kansio avataan: se ei kutistu pelkäksi reunaksi (Iines 23.10.2026). */
.pino.rinnakkain .kansio:last-child:not(.auki) .kansio__runko{ height:var(--sivu-h); }
/* Kunnat ruskeana (Iines 23.10.2026). */
.kansio[data-kansio="3"], .kansio.auki[data-kansio="3"]{ --v:var(--ruskea); --t:var(--kerma); }
/* Asiakassivun välilehti vain nousee hoverilla, ei nouse muiden päälle;
   ei liukuvaa taustasivua (Iines 23.10.2026). */
.c-lehti:not([aria-current]):hover, .c-lehti:focus-visible{ z-index:var(--zi, 1); }
.c-lehdet .c-lehdet__sivu{ display:none; }
/* Leipäteksti yhtenä palstana (Iines 23.10.2026). */
.c-arkki__teksti{ columns:auto; column-count:1; max-width:none; }
/* Kansikuva vähän alemmas arkilla (Iines 23.10.2026). Marginaalilla, ei
   translatella, jotta slogan siirtyy mukana eikä jää kuvan alle. */
.c-arkki__kuva{ margin-top:calc(var(--kuva-yla) - var(--arkki-yla) + clamp(24px,3vw,56px)); }
/* Klemmarit poistettu koko sivustolta (Iines 26.10.2026). */
.c-klemmari{ display:none !important; }
.c-arkki__kuva + .c-slogan{ margin-top:clamp(6px,1vw,16px); }
/* Taustattomat kuvat (Iines 23.10.2026): esineet ja logot irrallaan ilman
   kehystä tai suorakaiteen varjoa; varjo seuraa kuvan muotoa. */
.c-kuva--irti{ background:none; padding:0; box-shadow:none; }
.c-kuva--irti img{ filter:none; }   /* ei varjoa taustattomiin kuviin (Iines 23.10.2026) */
.c-arkki__kuva--irti{ background:none; padding:0; box-shadow:none; rotate:0deg; }
.c-arkki__kuva--irti img{ object-fit:contain; width:auto; max-width:100%; max-height:min(46vh,26vw); margin-inline:auto;
  filter:none; }
.c-arkki__kuva.c-arkki__kuva--irti img.c-klemmari{ display:none; }
/* Todenmukaisempi puhelin (Iines 23.10.2026): iPhone 16 Pro -mittasuhteet,
   titaanireuna, ohut musta kehys, Dynamic Island, sivunapit ja heijastus. */
.puhelin{ --pw:clamp(150px,21vw,330px); width:var(--pw); aspect-ratio:71.5 / 149.6;
  padding:calc(var(--pw) * .042); border-radius:calc(var(--pw) * .175); background:#0a0a0b;
  box-shadow:0 0 0 calc(var(--pw) * .011) #9a9a9f, 0 0 0 calc(var(--pw) * .015) #48484c,
    inset 0 0 0 1px rgba(255,255,255,.07), 0 50px 70px -36px rgba(0,0,0,.6), 0 18px 26px -18px rgba(0,0,0,.4); }
.puhelin__naytto{ position:relative; border-radius:calc(var(--pw) * .135); background:#000; }
.puhelin__naytto::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 34%); }
.puhelin::before{ top:calc(var(--pw) * .068); width:31%; height:calc(var(--pw) * .085); background:#000; }
.puhelin::after{ content:''; position:absolute; right:calc(var(--pw) * -.026); top:30%; width:calc(var(--pw) * .016); height:14%;
  border-radius:0 3px 3px 0; background:linear-gradient(90deg,#55555a,#a4a4a9); }
.puhelin__napit, .puhelin__napit::before, .puhelin__napit::after{ position:absolute; left:calc(var(--pw) * -.026);
  width:calc(var(--pw) * .016); border-radius:3px 0 0 3px; background:linear-gradient(90deg,#a4a4a9,#55555a); }
.puhelin__napit{ top:19%; height:4.5%; }
.puhelin__napit::before, .puhelin__napit::after{ content:''; left:0; width:100%; height:200%; }
.puhelin__napit::before{ top:220%; }
.puhelin__napit::after{ top:460%; }
@media (max-width:900px){ .puhelin{ --pw:40vw; } }
/* KANSIOPINO MOBIILISSA (Iines 23.10.2026): kansiot koko levyisiä ilman
   porrastusta, jottei oikeaan reunaan jää rosoista porrasta; välilehdet
   porrastuvat taaempana oikealle kuin kortiston hakemistossa. */
@media (max-width:860px){
  .pino:not(.rinnakkain){ --porras:0px; }
  .pino:not(.rinnakkain) .kansio{ width:100%; margin-left:0; }
  .pino:not(.rinnakkain) .kansio__lehdet{ padding-left:calc(var(--porras-n, 0) * min(4vw, 22px)); -webkit-mask-image:none; mask-image:none; }
  .pino:not(.rinnakkain) .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), 0 -1px 0 rgba(0,0,0,.25); border-radius:0 10px 10px 10px; }
  .pino:not(.rinnakkain) .kansio:last-child .kansio__runko{ box-shadow:inset 0 1px 0 var(--viiva), 0 24px 50px -30px rgba(0,0,0,.7); }
  .pino .kansio:not(.auki):has(.lehti--kategoria:hover){ translate:none; }
}
@media (max-width:640px){
  .pino button.lehti, .pino .lehti{ font-size:18px !important; padding-inline:16px !important; }
  .kansio.auki .kansio__runko{ padding:14px 16px; }
  .kr__nimi{ font-size:clamp(20px,6vw,26px); }
}
/* Läpinäkyvä kansikuva (logo) hover-esikatselussa: ei suorakaiteen varjoa,
   varjo seuraa kuvan muotoa (Iines 23.10.2026). */
.kansio__kansikuva .kk__kuvat img.kk-irti{ box-shadow:none; border-radius:0; filter:none; }
/* Pitkät tekstit mobiilissa: lyhennetty lohko häivytetään alareunasta, ja
   Lue lisää -painike avaa loput (referenssit.js, lyhennaTekstit). */
.lyh{ overflow:hidden; -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent); }
.lyh.auki{ -webkit-mask-image:none; mask-image:none; }
.lue-lisaa{ display:inline-block; margin-top:.9em; padding:.2em 0; background:none; border:0; color:inherit; cursor:pointer;
  font-family:var(--f-mono); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:.35em; text-decoration-thickness:1px; }
.lue-lisaa:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
/* Kuva ei mene toisen kuvan päälle (Iines 23.10.2026, Potma): peräkkäiset
   kuvat erillään, vain laput ja lainaukset limittyvät kuvien kanssa. */
.c-kuva + .c-kuva{ margin-top:clamp(16px,2.4vw,40px); }

/* PUHELIMELLA (Jenna 23.10.2026): tekstit luettaviksi, ja asiakassivun
   kelluvat napit yhdeksi matalaksi riviksi alareunaan: allekkain ne
   peittivät puolet ruudun leveydestä tekstin päältä. */
@media (max-width:700px){
  .r-leipa, .c-tiedot, .c-lappu p{ font-size:15px; }
  .kk__ala{ font-size:13px; }
  .c-naapuri__leima, .c-kansio__ala{ font-size:11px; }
  .c-seuraava{ left:12px; right:12px; bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .c-alkuun, .c-seuraava__nappi{ font-size:13px; padding:.95em 1.1em .9em; }
}
/* Nettisivun videotallenne selainikkunassa (Iines 23.10.2026): video koko
   ikkunan kokoisena, ikkunan mittasuhde videon mukainen. */
.selain:has(video){ width:100%; }
.selain__ikkuna:has(video){ width:100%; height:auto; aspect-ratio:16 / 10; }
.selain__ikkuna video.selain__sivu{ width:100%; height:100%; object-fit:cover; object-position:top; }
/* SOMEPOSTAUSTEN NIPPU (Iines 23.10.2026: "rajattu huonosti"): vedokset
   eivät enää mene toistensa päälle, joten mikään postaus ei peity toisen
   alle; ei paperikehystä, koska kuvissa on oma pyöreäkulmainen
   puhelinnäkymä – varjo seuraa pyöristystä. */
.c-nippu{ gap:clamp(14px,2vw,30px); padding-inline:0; }
.c-vedos{ margin:0; padding:0; background:none; box-shadow:none; border-radius:clamp(14px,1.6vw,24px); }
.c-vedos img, .c-vedos video{ border-radius:inherit; box-shadow:0 18px 30px -18px rgba(0,0,0,.6); }
@media (max-width:900px){
  .c-nippu{ gap:14px; }
  .c-vedos{ width:calc(50% - 7px); margin:0; }
}
/* KANSIOT PUHELIMELLA (Iines 23.10.2026): pehmeämmät reunat – runko ja
   välilehdet pyöreämmiksi, ei terävää tummaa reunaviivaa. */
@media (max-width:860px){
  .pino:not(.rinnakkain) .kansio__runko,
  .pino:not(.rinnakkain) .kansio:last-child .kansio__runko{ border-radius:0 22px 22px 22px; }
  .pino:not(.rinnakkain) .kansio:not(:last-child) .kansio__runko::before{ border-top-right-radius:22px; }
  .pino:not(.rinnakkain) .lehti{ --r:22px; border-radius:22px 22px 0 0; }
  .pino:not(.rinnakkain){ --viiva:rgba(25,25,25,.18); }
}
/* Vasen yläkulma yhtä pyöreä kuin oikea, kun välilehti ei ole kulmassa
   (Iines 23.10.2026). Alimman kansion välilehti on vasemmassa reunassa. */
@media (max-width:860px){
  .pino:not(.rinnakkain) .kansio:not(:last-child) .kansio__runko,
  .pino:not(.rinnakkain) .kansio:not(:last-child) .kansio__runko::before{ border-top-left-radius:22px; }
  .pino:not(.rinnakkain) .kansio:last-child .kansio__runko{ border-top-left-radius:0; }
}

/* Kelluvat napit kotipalkin yläpuolelle (viewport-fit=cover, Jenna 26.10.2026). */
@media (max-width:700px){
  .c-seuraava{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* KAIKKI TYÖT: kortit samankokoisia, 1600 x 1080 (Iines 26.10.2026).
   Vaakakuva täyttää kortin; kapeampi kuva (logo, juliste) näkyy kokonaan
   oman reunavärinsä päällä (--kk-tausta, generaattori). */
.kaikki__ruudukko .kk__kuva{ aspect-ratio:1600 / 1080; }
.kaikki__ruudukko .kk__kuva img, .kaikki__ruudukko .kk__kuva video{ height:100%; object-fit:cover; }
.kaikki__ruudukko .kk__kuva--sovita{ background:var(--kk-tausta, var(--musta)); }
.kaikki__ruudukko .kk__kuva--sovita img{ object-fit:contain; padding:4%; }
/* Railway Gank (26.10.2026): pienillä kirjaimilla on alapidennykset (y, p, g),
   joten slogan tarvitsee väljemmän rivivälin kuin Mathew Rohasin isot kirjaimet. */
.c-slogan{ line-height:.95; }
/* Avoimella välilehdellä ei tummaa ääriviivaa puhelimella (Iines 26.10.2026):
   välilehti jatkuu kansioon saumatta. */
@media (max-width:860px){
  .c-lehti[aria-current]::before{ border-color:transparent; }
}
/* SIVUN KÄÄNTÖ (referenssit.js, vaihda): valaistus sivun päällä, takapuolella
   tyhjä paperi, uusi kansion väri verhona sivun reunan perässä. */
.c-arkki__valo{ position:absolute; inset:0; z-index:20; pointer-events:none; border-radius:inherit; opacity:0;
  background:linear-gradient(90deg, rgba(25,20,15,.15), rgba(25,20,15,.75)); }
.c-arkki.kaannetty > :not(.c-arkki__valo){ visibility:hidden; }
.c-arkki.kaannetty::before{ opacity:0; }
.c-arkki.kaannetty .c-arkki__valo{ background:linear-gradient(270deg, rgba(25,20,15,.1), rgba(25,20,15,.6)); }
.c-kansio__verho{ position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; }
/* Koko kansionlehti (pohja + paperi) kääntyy vasemmalle vaihdossa. */
.c-kaantyva{ position:absolute; left:0; top:0; z-index:400; border-radius:inherit; pointer-events:none; overflow:visible; backface-visibility:visible; }
.c-kaantyva > .c-arkki{ position:absolute; }
.c-kaantyva.kaannetty > :not(.c-arkki__valo){ visibility:hidden; }
.c-kaantyva.kaannetty .c-arkki__valo{ background:linear-gradient(270deg, rgba(25,20,15,.1), rgba(25,20,15,.6)); }
/* KLEMMARI AINA SAMASSA KOHDASSA KUVAAN NÄHDEN (Iines 26.10.2026): koko
   prosentteina kuvan leveydestä (ennen ruudun leveydestä, jolloin paikka
   vaihteli näyttökoon mukaan), pystysiirto klemmarin omasta korkeudesta. */
.c-arkki__kuva img.c-klemmari{ width:9%; height:auto; aspect-ratio:79.39 / 241.35; right:16%;
  top:0; translate:0 -45%; }
/* Puhelimella välilehtirivi kulkee kansion koko leveydeltä ja avoin välilehti
   voi olla kummassakin päässä: yläkulmat suoriksi, ettei pyöristys jää
   välilehden alle loveksi (Iines 26.10.2026). */
@media (max-width:860px){ .c-kansio{ border-top-left-radius:0; border-top-right-radius:0; } }
/* Välilehden vaihto paikallaan: leveys ja kerros liukuvat. */
.c-lehti{ transition:height 450ms var(--ease), padding 450ms var(--ease); }
/* Avoimen välilehden ja kansion väliin jäi puolikkaan pikselin sauma, josta
   tumma tausta kuulsi haaleana viivana (Iines 26.10.2026, erit. puhelimella).
   Välilehtirivi ulottuu 2 px kansion päälle, ja vain avoin välilehti jatkuu
   sinne asti; muiden alla kansion yläviiva näkyy kuten ennenkin. */
.c-lehdet{ bottom:calc(100% - 2px); padding-bottom:2px; height:calc(var(--c-lehti-k) + 10px); }
.c-lehti[aria-current]{ margin-bottom:-2px; height:calc(var(--c-lehti-k) + 2px); }
.c-lehti[aria-current]::before{ bottom:2px; }
/* Sivun mukana kääntyvä välilehti (referenssit.js): takapuolella pelkkä väri. */
.c-kaantyva.kaannetty > .c-lehti--kaantyva{ visibility:visible; color:transparent; }
.c-lehti--kaantyva::before{ border-color:transparent; }
/* Puhelimella kansiot lähemmäs heroa, jotta ne huomaa heti (Iines 26.10.2026). */
@media (max-width:640px){ .asiakkaat__yla.sivu-hero{ min-height:0; padding-bottom:52px; } }
/* PAPERILAPUT (Iines 26.10.2026): osa tekstilapuista näyttää enemmän paperilta:
   kuitu ja rae, kevyt taitekohta ja reunoilta hieman tummuva pinta. Oma kerros
   soft-light-sekoituksella, jotta tekstuuri näkyy sekä vaaleilla että tummilla
   lapuilla. Joka toinen lappu (generaattori: c-lappu--paperi). */
.c-lappu--paperi::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; mix-blend-mode:soft-light; opacity:.75;
  background-image:
    linear-gradient(176deg, transparent 0 45%, rgba(255,255,255,.55) 47%, rgba(0,0,0,.35) 48.6%, transparent 51%),
    radial-gradient(130% 95% at 50% 42%, transparent 50%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.1' intercept='-0.05'/%3E%3CfeFuncG type='linear' slope='1.1' intercept='-0.05'/%3E%3CfeFuncB type='linear' slope='1.1' intercept='-0.05'/%3E%3CfeFuncA type='linear' slope='0' intercept='.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:100% 100%, 100% 100%, 320px 320px, 180px 180px;
}
.c-lappu--paperi > *:not(.c-teippi){ position:relative; z-index:1; }
/* VÄLILEHDET EIVÄT RÄPSÄHDÄ (Iines 26.10.2026): leveys ei saa riippua siitä,
   mikä välilehti on auki, muuten koko rivi nytkähtää vaihdossa. Kaikilla sama
   oikea reunus (vasemman kulman verran, ettei edessä oleva avoin välilehti
   peitä nimeä) ja sama vasen reunus kuin muillakin. */
.c-lehti, .c-lehti:has(+ .c-lehti[aria-current]){ padding-right:calc(var(--r) + 6px); }
.c-lehti + .c-lehti[aria-current]{ padding-left:calc(var(--r) + clamp(10px,1vw,18px)); }
@media (max-width:640px){
  .c-lehti, .c-lehti:has(+ .c-lehti[aria-current]){ padding-right:calc(var(--r) + 4px); }
  .c-lehti + .c-lehti[aria-current]{ padding-left:calc(var(--r) + 8px); }
}
/* Ei klemmaria puhelimella (Iines 26.10.2026). */
@media (max-width:860px){ .c-klemmari, .c-arkki__kuva img.c-klemmari{ display:none; } }
/* PUHELIMELLA EI KIINTEITÄ NAPPEJA ALAREUNASSA (Iines 26.10.2026: sisällön pitää
   jatkua iOS:n osoitepalkin alle). Safari värjää palkin alueen umpeen, kun
   ruudun alareunassa on kiinteä elementti, joten Kaikki työnäytteet / Seuraava
   kategoria ovat puhelimella sivun lopussa, eivät kiinni ruudussa. */
@media (max-width:700px){
  .c-seuraava{ position:static; margin:-24px 12px 40px; }
  .c-seuraava.piilossa{ pointer-events:auto; }
  .c-seuraava.piilossa > *{ opacity:1; translate:none; }
}

/* ASIAKASSIVUN NIMI ISOMMAKSI (Jenna 26.10.2026): nimi ja eyebrow isommiksi,
   ja Asiakaskansio x / x -rivin ja välilehtien väliin enemmän tilaa. */
.c-yla__ala{ font-size:clamp(30px,2.6vw,46px); }
.c-nimi{ font-size:clamp(96px,11.2vw,206px); }
.c-yla{ margin-bottom:clamp(40px,4.2vw,76px); }
@media (max-width:640px){
  .c-yla__ala{ font-size:30px; }
  .c-nimi{ font-size:clamp(56px,15.5vw,104px); }
  .c-yla{ margin-bottom:36px; }
}
/* Puhelimella napit allekkain koko leveydeltä, Kaikki työnäytteet ylempänä
   ja Seuraava kategoria alla, isommalla fontilla (Jenna 26.10.2026). */
@media (max-width:700px){
  .c-seuraava{ display:grid; grid-template-columns:1fr; justify-items:stretch; gap:10px; }
  .c-alkuun, .c-seuraava__nappi{ font-size:19px; padding:1em 1.2em .95em; justify-content:center; width:100%; }
  .c-seuraava__linkki{ display:block; }
}
@media (max-width:700px){
  /* Napit kokonaan tumman alueen sisällä, eivät vaalean CTA:n päällä. */
  .c-seuraava{ margin:0; padding:0 12px 48px; background:var(--musta); }
}
/* Väli Asiakaskansio-rivin ja välilehtien väliin paddingina: marginaali yhdistyi
   kansion ylämarginaaliin (välilehtien korkeus), eikä tilaa syntynyt. */
.c-yla{ margin-bottom:0; padding-bottom:clamp(28px,2.8vw,48px); }
@media (max-width:640px){ .c-yla{ margin-bottom:0; padding-bottom:28px; } }