/* ============================================================
   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:none; }

/* ------------------------------------------------------------
   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 .a-hero .a-nimi,
.r-liike .r-hero__kasi, .r-liike .r-hero__teksti, .r-liike .r-hero__alas,
.r-liike .a-hero__yla, .r-liike .a-slogan, .r-liike .a-alaotsikko, .r-liike .a-meta{ 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:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%;
  background:var(--puna); color:var(--kerma);
  display:grid; place-items:center;
  font-family:var(--f-otsikko); text-transform:uppercase; font-size:14px; 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; }
/* 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:.3em .04em .04em; margin:-.3em -.04em -.04em; vertical-align:top; }

.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; }
.r-hero__alas{ display:grid; justify-items:center; gap:.2em; color:var(--musta); }
.r-hero__alas .nuoli{ width:clamp(46px,4vw,70px); rotate:-30deg; }
.r-hero__alas .kasi{ font-size:clamp(20px,1.8vw,30px); }

/* 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,.72fr) minmax(0,1.6fr);
  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:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  column-gap:.9em; padding:.45em 0 .65em; position:relative; color:var(--musta);
  border-top:1px solid rgba(25,25,25,.18);
}
.pl__nro, .pl__maara{ font-family:var(--f-mono); font-size:clamp(10px,.75vw,12px); letter-spacing:.14em; opacity:.6; }
.pl__nimi{
  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; }
.pl[aria-pressed="true"] .pl__nro{ color:var(--puna); opacity:1; }
/* Edistymispalkki: kuinka pitkällä palvelun töissä ollaan. */
.pl__palkki{ position:absolute; left:0; right:0; bottom:0; height:2px; overflow:hidden; }
.pl__palkki span{ display:block; height:100%; background:var(--puna); transform:scaleX(0); transform-origin:left;
  transition:transform 700ms var(--ease); }
.nayttamo__laskuri{ color:var(--musta); min-width:7ch; text-align:center; }
.laskuri__nyt{ color:var(--puna); }

.nayttamo__oikea{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(14px,2vw,28px); }
/* Sivukortit eivät saa valua palvelulistan päälle: rajataan oma palsta
   ja häivytetään reunat, jolloin viereiset kortit kurkistavat pehmeästi. */
.rumpu{ overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.rumpu{
  position:relative; height:min(86svh, 50vw); min-height:460px;
  perspective:1600px; touch-action:pan-y; user-select:none; cursor:grab;
}
.rumpu:active{ cursor:grabbing; }
.kortti{
  position:absolute; left:50%; top:50%; width:min(88%, calc(min(86svh, 50vw) * .58 * 1.6));
  transform:translate(-50%,-50%);
  display:block; color:var(--kerma); backface-visibility:hidden;
  transition:transform 900ms var(--ease), opacity 600ms var(--ease);
  will-change:transform, opacity;
}
.kortti.ei-siirtymaa{ transition:none !important; }
.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; }
.kortti__kehys::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(25,25,25,.8), rgba(25,25,25,0) 55%);
}
.kortti__teksti{
  position:absolute; left:clamp(14px,1.8vw,30px); right:clamp(14px,1.8vw,30px); bottom:clamp(12px,1.6vw,26px);
  z-index:2; display:grid; gap:.4em; pointer-events:none;
}
.kortti__palvelu{ font-family:var(--f-mono); font-size:clamp(9px,.7vw,11px); letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
.kortti__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(30px,3.6vw,70px); line-height:.86; padding-top:.2em; }
.kortti__tagit{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.kortti__tagit li{
  font-family:var(--f-mono); font-size:clamp(10px,.72vw,12px); letter-spacing:.06em;
  padding:.35em .8em; border:1px solid rgba(228,222,208,.55); border-radius:999px;
}
.kortti__nro{
  position:absolute; top:clamp(12px,1.4vw,22px); right:clamp(14px,1.6vw,26px); z-index:2;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--kerma); opacity:.85;
}
.rumpu__ohjaus{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(14px,2vw,26px); }
.rumpu__nuoli{
  width:clamp(46px,3.6vw,60px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(25,25,25,.35); font-family:var(--f-mono); font-size:clamp(16px,1.3vw,22px);
  transition:background 260ms linear, color 260ms linear, border-color 260ms linear;
}
.rumpu__nuoli:hover, .rumpu__nuoli:focus-visible{ background:var(--puna); color:var(--kerma); border-color:var(--puna); }

/* ASIAKASLISTA */
.asiakkaat{ position:relative; padding:clamp(110px,14vw,240px) var(--reuna) clamp(80px,10vw,160px); }
.asiakkaat__yla{ display:grid; gap:clamp(10px,1.4vw,20px); margin-bottom:clamp(30px,4vw,70px); }
.asiakaslista{ list-style:none; border-bottom:1px solid rgba(25,25,25,.2); }
.al{
  position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.1fr) auto;
  align-items:center; gap:clamp(10px,2vw,30px);
  padding:clamp(14px,1.6vw,26px) clamp(6px,1vw,16px);
  border-top:1px solid rgba(25,25,25,.2); isolation:isolate; overflow:hidden;
}
.al::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--puna);
  transform:scaleY(0); transform-origin:bottom; transition:transform 560ms var(--ease);
}
.al:hover::before, .al:focus-visible::before{ transform:scaleY(1); transform-origin:top; }
.al:hover, .al:focus-visible{ color:var(--kerma); }
.al__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(28px,4vw,72px); line-height:.9;
  transition:translate 600ms var(--ease); }
.al:hover .al__nimi{ translate:.25em 0; }
.al__ala, .al__palvelut{ font-family:var(--f-mono); font-size:clamp(11px,.8vw,13px); letter-spacing:.04em; }
.al__nuoli{ font-family:var(--f-mono); font-size:clamp(18px,1.6vw,26px); transition:translate 600ms var(--ease), rotate 600ms var(--ease); }
.al:hover .al__nuoli{ translate:.3em 0; rotate:-45deg; }
.esikatselu{
  position:fixed; left:0; top:0; z-index:5; pointer-events:none;
  width:clamp(220px,22vw,380px); aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  opacity:0; transform:scale(.6); box-shadow:0 30px 60px -20px rgba(25,25,25,.5);
}
.esikatselu img{ width:100%; height:100%; object-fit:cover; }
@media (hover:none){ .esikatselu{ display:none; } }

/* 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
   ============================================================ */
.a-hero{ padding:clamp(90px,12vh,150px) var(--reuna) clamp(40px,5vw,80px); display:grid; gap:clamp(18px,2.4vw,40px); }
.a-hero__yla{ display:flex; justify-content:space-between; align-items:center; gap:16px; 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-takaisin:hover{ background:var(--musta); color:var(--kerma); border-color:var(--musta); }
.a-nimi{ margin-inline:calc(var(--reuna) * -1); font-family:var(--f-otsikko); }
.seuraava__nimi{ font-family:var(--f-otsikko); }
.a-slogan{ font-size:clamp(26px,3.4vw,62px); line-height:1.05; color:var(--musta); text-align:center;
  max-width:24ch; margin:-.1em auto 0; rotate:-2deg; text-wrap:balance; }
.a-alaotsikko{ font-family:var(--f-mono); text-align:center; font-size:clamp(13px,1vw,16px); letter-spacing:.06em; text-transform:uppercase; }
.a-meta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; gap:clamp(16px,3vw,50px); align-items:end;
  border-top:1px solid rgba(25,25,25,.2); padding-top:clamp(16px,1.6vw,26px); margin-top:clamp(10px,2vw,30px); }
.a-meta .meta{ margin-bottom:.8em; }
.a-palvelut, .a-tagit{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.a-palvelut a, .a-tagit li{
  display:inline-block; font-family:var(--f-mono); font-size:clamp(11px,.8vw,13px); letter-spacing:.04em;
  padding:.45em .9em; border-radius:999px; border:1px solid rgba(25,25,25,.28);
}
.a-palvelut a{ background:var(--musta); color:var(--kerma); border-color:var(--musta); transition:background 260ms linear; }
.a-palvelut a:hover{ background:var(--puna); border-color:var(--puna); }
.a-vierailu{
  display:inline-flex; gap:.4em; align-items:center; white-space:nowrap;
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(18px,1.6vw,28px); line-height:1;
  color:var(--kerma); background:var(--puna); padding:.65em 1.2em .6em; border-radius:999px;
}

.a-kansi{
  margin:0 var(--reuna); border-radius:clamp(12px,1.4vw,22px); overflow:hidden;
  height:min(86svh, 62vw); background:var(--musta); position:relative;
}
.a-kansi img, .a-kansi video{ width:100%; height:100%; object-fit:cover; }

.a-sisalto{ display:grid; gap:clamp(70px,9vw,160px); padding:clamp(70px,9vw,160px) 0 0; }
.a-sisalto > *{ margin-inline:var(--reuna); }
.a-intro{
  font-family:var(--f-mono); font-size:clamp(19px,2.1vw,38px); line-height:1.32; letter-spacing:-.01em;
  max-width:36ch; margin-left:max(var(--reuna), 18vw) !important;
}
.a-teksti{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(20px,4vw,80px); align-items:start; }
.a-teksti__ots{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; color:var(--puna);
  font-size:clamp(34px,4.4vw,84px); line-height:.9; position:sticky; top:clamp(90px,14vh,140px);
}
.a-teksti__kpl{ display:grid; gap:1.1em; font-size:clamp(14px,1.1vw,18px); line-height:1.65; max-width:60ch; }
.a-linkki{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; color:var(--puna); }

.a-media{ margin:0; border-radius:clamp(10px,1.2vw,20px); overflow:hidden; background:rgba(25,25,25,.06); }
.a-media img, .a-media video{ width:100%; height:auto; display:block; }
.a-media--pysty{ width:min(100%, 62vw); justify-self:center; }
.a-pari{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,26px); align-items:start; }

/* Vedettävä nauha somepostauksille */
.veto{ margin-inline:0 !important; display:grid; gap:14px; }
.veto__ohje{ padding-inline:var(--reuna); }
.veto__rata{
  list-style:none; display:flex; gap:clamp(12px,1.4vw,22px); overflow-x:auto; overscroll-behavior-x:contain;
  padding:6px var(--reuna) 18px; scroll-snap-type:x proximity; cursor:grab; scrollbar-width:thin;
}
.veto__rata.vedetaan{ cursor:grabbing; scroll-snap-type:none; }
.veto__rata li{ flex:none; width:clamp(200px,22vw,360px); scroll-snap-align:start; }
.veto__rata img{ width:100%; height:auto; border-radius:12px; pointer-events:none; user-select:none; }

/* Lainaus: tumma, filmirakeinen osio */
.a-lainaus{
  margin-inline:0 !important; position:relative; overflow:hidden;
  background:var(--musta); color:var(--kerma);
  padding:clamp(90px,12vw,200px) var(--reuna);
  display:grid; justify-items:center; text-align:center;
}
.a-lainaus::after{                     /* hienojakoinen rae, nykii askelin */
  content:''; position:absolute; inset:-50%; pointer-events:none; opacity:.09;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:rae 1s steps(6) infinite;
}
@keyframes rae{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-4%,3%); } 40%{ transform:translate(3%,-5%); }
  60%{ transform:translate(-2%,6%); } 80%{ transform:translate(5%,-2%); } 100%{ transform:translate(0,0); }
}
.a-lainaus__merkki{ font-family:var(--f-display); color:var(--puna); font-size:clamp(90px,12vw,220px); line-height:.6; }
.a-lainaus blockquote{ margin:0; display:grid; gap:clamp(20px,2.4vw,40px); max-width:min(1100px,100%); position:relative; z-index:1; }
.a-lainaus__teksti{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px,3.3vw,60px); line-height:1.02; }
.a-lainaus__teksti .sana{ display:inline-block; }
.a-lainaus footer{ display:grid; gap:.3em; }
.a-lainaus__nimi{ font-family:var(--f-kasi); font-size:clamp(26px,2.6vw,46px); color:var(--puna); }
.a-lainaus__rooli{ font-family:var(--f-mono); font-size:clamp(11px,.8vw,13px); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }

.a-iso{ display:grid; justify-items:center; gap:.4em; }
.a-iso__ala{ font-size:clamp(24px,2.6vw,46px); color:var(--musta); rotate:-3deg; }

/* Osion väliotsikko punaisella kaistalla */
.a-osio{
  margin-inline:0 !important; background:var(--puna); color:var(--kerma);
  padding:clamp(70px,9vw,150px) var(--reuna); display:grid; justify-items:center; gap:clamp(10px,1.4vw,22px); text-align:center;
}
.a-osio .r-iso{ color:var(--kerma); }
.a-osio__ala{ font-size:clamp(24px,2.6vw,46px); rotate:-2deg; max-width:30ch; }

/* 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; gap:clamp(20px,5vw,90px); padding-block:clamp(10px,2vw,30px); }
.puhelin{
  width:clamp(150px,21vw,330px); aspect-ratio:9 / 19.5; border-radius:clamp(26px,3.4vw,52px);
  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);
}

/* Seuraava työ */
.seuraava{ padding:clamp(110px,14vw,240px) 0 0; }
.seuraava__linkki{ display:grid; justify-items:center; gap:clamp(10px,1.6vw,24px); position:relative; padding-inline:var(--reuna); }
.seuraava__nimi{ transition:color 300ms linear; }
.seuraava__linkki:hover .seuraava__nimi{ color:var(--musta); }
.seuraava__kuva{
  position:absolute; left:50%; top:55%; width:clamp(200px,24vw,420px); aspect-ratio:4/3; z-index:-1;
  border-radius:14px; overflow:hidden; translate:-50% -50%;
  clip-path:inset(50% 50% 50% 50% round 14px); transition:clip-path 800ms var(--ease), rotate 800ms var(--ease);
}
.seuraava__kuva img{ width:100%; height:100%; object-fit:cover; }
.seuraava__linkki:hover .seuraava__kuva{ clip-path:inset(0 0 0 0 round 14px); rotate:-4deg; }
.seuraava{ position:relative; z-index:0; }

/* ============================================================
   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; }

  /* 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; }
  .pl__nro, .pl__palkki{ display:none; }
  .nayttamo__oikea{ grid-template-columns:1fr; }
  .rumpu{ height:calc(84vw * .75 * 1.9); min-height:0; perspective:1000px; cursor:auto; }
  .kortti{ width:84vw; }
  .kortti__kehys{ aspect-ratio:4 / 3; }
  .rumpu__ohjaus{ flex-direction:row; }
  .kortti__nimi{ font-size:clamp(32px,10vw,54px); }

  .al{ grid-template-columns:1fr auto; row-gap:4px; }
  .al__ala{ grid-column:1; }
  .al__palvelut{ display:none; }
  .al__nuoli{ grid-row:1; grid-column:2; }

  .a-hero__yla{ padding-right:0; margin-top:56px; }
  .a-meta{ grid-template-columns:1fr; }
  .a-intro{ margin-left:var(--reuna) !important; }
  .a-teksti{ grid-template-columns:1fr; }
  .a-teksti__ots{ position:static; }
  .a-pari{ grid-template-columns:1fr; }
  .a-media--pysty{ width:100%; }
  .a-kansi{ height:62svh; }
  .selain__ikkuna{ height:62svh; }
  .puhelin{ width:40vw; }
  .seuraava__kuva{ display:none; }
}

/* ============================================================
   VÄHENNETTY LIIKE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .a-lainaus::after{ animation:none; }
  .kortti__kuva, .al::before, .al__nimi, .seuraava__kuva, .r-nappi::before{ transition:none; }
}