/* ============================================================
   PALVELUT — alasivu. Ladataan brandstein.css:n JÄLKEEN.
   Leiska: Canva "Brandstein palvelut sivu" (1366 px leveä).
   ============================================================ */

/* Kokeilufontit tältä sivulta: Boldeon leimaan, Mathew Rohas
   käsialaan (sama kuin etusivun "art of branding"). */
@font-face{ font-family:'Boldeon'; src:url('../fonts/testi/Boldeon.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Mathew Rohas'; src:url('../fonts/testi/MathewRohas-fi.woff2') format('woff2'); font-display:swap; }

.sivu-palvelut{
  --f-kasi:'Mathew Rohas','Hesteria Fallback',cursive;
  --f-leima:'Boldeon','Rockids Fallback',Impact,sans-serif;
  --ruskea: #3F2727;
  --oliivi: #BBA149;
  /* Taustat maalataan kiinteisiin kerroksiin (.taustat), joten bodyn
     oma tausta pois — muuten se peittäisi kerrokset. html pitää kerman. */
  background:transparent;
}

/* ------------------------------------------------------------
   TAUSTAKERROKSET
   Yksi kerros per [data-tausta]-osio. Läpinäkyvyys seuraa vieritystä,
   joten väri vaihtuu pehmeästi eikä osion reunalla. Myöhempi kerros on
   aina aiemman päällä, jolloin taaksepäin vieritys purkaa saman tien.
   ------------------------------------------------------------ */
.taustat{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.tausta{ position:absolute; inset:0; opacity:0; }

/* ------------------------------------------------------------
   OIKEA YLÄNURKKA — leima ja sen alla MENU
   ------------------------------------------------------------ */
.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-leima); letter-spacing:.01em; }
.leima-oikea{ transition:color 400ms linear; }
/* Tummalla pohjalla leima vaaleaksi. */
body.tumma .leima-oikea{ color:var(--kerma); }
.p-menu{
  font-family:var(--f-leima); 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, translate 420ms var(--e);
}
.p-menu:hover{ background:var(--musta); translate:0 -2px; }
body.tumma .p-menu:hover{ background:var(--kerma); color:var(--puna); }

/* ------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------ */
.p-hero{ align-content:center; grid-template-rows:1fr; }
.p-hero__keski{
  display:grid; justify-items:center; align-content:center;
  gap:clamp(40px,6vw,96px); min-width:0;
  padding-top:clamp(40px,7vh,110px);
}

.p-otsikko{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  color:var(--puna); line-height:.8; letter-spacing:0;
  white-space:nowrap; text-align:center; font-size:12vw;   /* JS tarkentaa */
  /* Pieni kallistus: leiskan otsikko nojaa oikealle. Ei italicia —
     Rockidsissa ei ole sitä, ja font-synthesis on estetty. */
  transform:skewX(-6deg);
}
/* Täristys: jokainen kirjain hyppii kolmen asennon välillä noin
   seitsemän kertaa sekunnissa, kuin käsin piirretty animaatio.
   rotate ja translate ovat omia ominaisuuksiaan, joten ne eivät
   kumoa GSAP:n intron transformia. */
.tk{
  display:inline-block;
  animation:taristys .6s steps(1,end) infinite;
}
.tk:nth-child(2){ animation-delay:-.11s; }
.tk:nth-child(3){ animation-delay:-.27s; animation-duration:.46s; }
.tk:nth-child(4){ animation-delay:-.05s; }
.tk:nth-child(5){ animation-delay:-.33s; animation-duration:.4s; }
.tk:nth-child(6){ animation-delay:-.19s; }
.tk:nth-child(7){ animation-delay:-.08s; animation-duration:.44s; }
.tk:nth-child(8){ animation-delay:-.3s; }
@keyframes taristys{
  0%  { rotate:-.25deg; translate:0 0; }
  33% { rotate:.2deg;   translate:.002em -.002em; }
  66% { rotate:-.1deg;  translate:-.002em .0015em; }
}

/* Palvelupillerit — ankkurilinkit osioihin. */
.p-pillerit{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px,1.7vw,26px); padding-inline:var(--reuna);
}
.p-pillerit li{ position:relative; }
.p-pilleri{
  display:inline-block; white-space:nowrap;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,2vw,34px); line-height:1; letter-spacing:.01em;
  color:var(--kerma); background:var(--oliivi);
  padding:.62em 1.05em .55em; border-radius:999px;
  transition:background 260ms linear, translate 420ms var(--e);
}
.p-pilleri:hover,
.p-pilleri:focus-visible{ background:var(--puna); translate:0 -3px; }

/* "Kaikki alkaa tästä!" — nuoli osoittaa ensimmäiseen pilleriin. */
.p-ohje{
  position:absolute; left:48%; bottom:calc(100% + .2em);
  display:flex; align-items:flex-start; gap:.2em;
  color:var(--musta); pointer-events:none;
}
.p-ohje__nuoli{ width:clamp(46px,4.6vw,78px); height:auto; overflow:visible; margin-top:.35em; }
.p-ohje__nuoli path{ stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.p-ohje__teksti{
  font-family:var(--f-kasi); font-size:clamp(22px,2.8vw,48px); line-height:1;
  white-space:nowrap; translate:0 -.35em;
}

/* ------------------------------------------------------------
   OSIOT — yhteiset
   ------------------------------------------------------------ */
.p-osio{
  position:relative;
  /* Reilusti tilaa: taustaväri ehtii vaihtua kokonaan ennen kuin
     seuraavan osion sisältö alkaa. */
  padding:clamp(120px,15vw,260px) var(--reuna);
  /* Osiot ovat läpinäkyviä: väri tulee taustakerroksista. */
}
.p-iso{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  color:var(--puna); line-height:.84; letter-spacing:0;
  text-align:center; white-space:nowrap;
  font-size:10vw;                      /* JS tarkentaa, data-leveys */
  margin-inline:calc(var(--reuna) * -1);
}
.p-iso .rivi{ display:block; }
/* Rivit liukuvat toistensa ohi (data-liike="vasta"), joten alemman
   rivin Ä- ja Ö-pisteille tilaa: muuten ne osuvat ylärivin kirjaimiin. */
.p-iso .rivi + .rivi{ margin-top:.12em; }
.p-iso--varjo{ text-shadow:var(--varjo,.035em) var(--varjo,.035em) 0 rgba(0,0,0,.32); }
/* Kirjaimet erikseen elävöitystä varten (palvelut.js). */
.ik{ display:inline-block; }
.p-iso[data-liike]{ cursor:default; }
/* Kiinnostuitko?: kysymysmerkki keinuu hitaasti. */
.p-iso--tarisee .ik:last-child{ animation:heilu 5s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes heilu{
  0%,100%{ rotate:0deg; } 25%{ rotate:-7deg; } 50%{ rotate:0deg; } 75%{ rotate:5deg; }
}
.p-iso--musta{ color:var(--musta); text-shadow:.03em .03em 0 rgba(0,0,0,.14); }
.p-iso--vasen{ text-align:left; margin-inline:0; }

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

/* ------------------------------------------------------------
   2. BRÄNDI JA STRATEGIA
   ------------------------------------------------------------ */
.p-brandi{ color:var(--kerma); }
.p-brandi__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
  gap:clamp(24px,4vw,80px); align-items:center;
  margin-top:clamp(28px,3.4vw,56px);
}
.p-brandi__teksti{ display:grid; gap:clamp(28px,4vw,64px); align-content:start;
  /* Teksti heti otsikon alle, ei keskelle talon korkeutta. */
  align-self:start; margin-top:clamp(-16px,-1vw,-6px); }

.p-lista{ display:grid; gap:.08em; }
.p-lista li{
  position:relative; padding-left:1.15em;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  color:var(--puna); font-size:clamp(28px,3.4vw,58px); line-height:1.2;
}
/* Kursiivin tuntu vinoutuksella sisemmässä spanissa: li:n transformia
   käyttää paljastusanimaatio (data-reveal), eikä se saa kumota vinoutta. */
.vino{ display:inline-block; transform:skewX(-9deg); }
.p-lista li::before{
  content:''; position:absolute; left:.1em; top:.5em;
  width:.24em; height:.24em; border-radius:50%; background:var(--puna);
}

/* Bränditalo */
.talo{
  position:relative; margin:0; width:100%;
  aspect-ratio:800 / 506;
}
.talo__o{ position:absolute; height:auto; max-width:none; user-select:none; }

/* ------------------------------------------------------------
   3. VISUAALINEN IDENTITEETTI
   ------------------------------------------------------------ */
.p-ilme{ color:var(--musta); }
.p-ilme .p-leipa{ margin-top:clamp(18px,2vw,30px); }

.kortit{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:clamp(10px,2vw,36px);
  margin-top:clamp(30px,4vw,70px);
  min-height:clamp(320px,34vw,560px);
}
.kortit__pino{ position:relative; height:100%; min-height:inherit; }
.kortti{
  position:absolute; left:var(--x); top:var(--y);
  width:clamp(110px,13.5vw,230px); aspect-ratio:5 / 7;
  background:var(--kerma); border:3px solid var(--musta); border-radius:clamp(5px,.6vw,9px);
  box-shadow:0 14px 30px -14px rgba(25,25,25,.55);
  rotate:var(--r);
  display:grid; place-items:center;
  transition:translate 420ms var(--e), rotate 420ms var(--e), box-shadow 420ms var(--e);
}
.kortti:hover{ translate:0 -10px; rotate:calc(var(--r) * .6); box-shadow:0 26px 40px -16px rgba(25,25,25,.6); z-index:5; }
/* KULUMA: korttia on pelattu. Kolme kerrosta ::afterissa:
   naarmut (ohuet vaaleat viivat), likapilkut (kohina) ja reunojen
   tummuminen (inset-varjo). multiply, jotta kulumat näkyvät vain
   kerman päällä eivätkä peitä logoa. Sijainti vaihtelee kortittain,
   ettei kaikissa ole samaa naarmua samassa kohdassa. */
.kortti{ overflow:hidden; border-color:#241d1a; }
.kortti::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='300'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M12 120 L70 98' stroke-width='.6'/%3E%3Cpath d='M150 270 L210 250' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .1  0 0 0 -3 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(120,90,50,.10), transparent 55%);
  background-size:100% 100%, 160px 160px, 100% 100%;
  background-position:var(--naarmu,0 0), var(--lika,0 0), 0 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 18px rgba(90,60,30,.28);
  mix-blend-mode:multiply; opacity:.6;
}
/* Naarmut ovat vaaleita, joten ne tarvitsevat oman kerroksen
   ilman multiplyä. */
.kortti::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='300'%3E%3Cg fill='none' stroke='%23fffaf0' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M25 70 L150 30' stroke-width='.8'/%3E%3Cpath d='M120 260 L200 200' stroke-width='.7'/%3E%3Cpath d='M40 200 L75 190' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%;
  transform:var(--naarmu-k,none);
}
.kortti:nth-child(2){ --lika:40px 70px; --naarmu-k:scaleX(-1); }
.kortti:nth-child(3){ --lika:90px 20px; --naarmu-k:scaleY(-1); }
.kortti:nth-child(4){ --lika:15px 110px; --naarmu-k:scale(-1,-1); }

.kortti__logo{ width:78%; height:auto; max-height:46%; object-fit:contain; }
.kortti__logo--iso{ width:70%; max-height:62%; }
/* Pelikortin kulma: A ja hertta. Serif tarkoituksella — pelikortti. */
.kortti__k{
  position:absolute; left:7%; top:4%; letter-spacing:-.06em;
  display:grid; justify-items:center; gap:.05em;
  font-family:Georgia,'Times New Roman',serif; font-size:clamp(14px,1.6vw,26px);
  line-height:1; color:var(--musta);
}
.kortti__k .maa{ font-size:.95em; line-height:.9; color:var(--musta); }
.kortti__k .maa--puna{ color:#C62A2A; }
.kortti__k--ala{ left:auto; top:auto; right:7%; bottom:4%; rotate:180deg; }

.p-napit{ display:grid; justify-items:center; gap:clamp(10px,1.3vw,20px); position:relative; z-index:6; }
.p-napit li{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; text-align:center;
  color:var(--kerma); background:var(--puna);
  font-size:clamp(17px,2.15vw,36px); line-height:1.05;
  padding:.5em 1.4em .45em; border-radius:999px; min-width:9.5em;
}

/* ------------------------------------------------------------
   4. NETTISIVUT
   ------------------------------------------------------------ */
.p-netti{ color:var(--musta); overflow-x:clip; }
.p-netti__grid{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,70px); align-items:center;
}
.p-netti__teksti{ display:grid; gap:clamp(20px,2.6vw,44px); justify-items:start; }
.p-sivujuoni{ display:flex; align-items:center; gap:clamp(6px,1vw,16px); flex-wrap:wrap; }
.p-sivujuoni__ohje{ display:grid; justify-items:start; color:var(--musta); }
.p-sivujuoni__teksti{
  font-family:var(--f-kasi); font-size:clamp(22px,2.6vw,44px); line-height:1;
  white-space:nowrap; margin-left:1.6em;
}
.p-sivujuoni__nuoli{ width:clamp(60px,6vw,104px); height:auto; overflow:visible; margin-top:.1em; }
.p-sivujuoni__nuoli path{ stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.p-sivujuoni img{ width:clamp(170px,20vw,300px); height:auto; transition:rotate 420ms var(--e); }
.p-sivujuoni:hover img{ rotate:-2deg; }
.p-sivujuoni__nuoli{ transition:translate 420ms var(--e); }
.p-sivujuoni:hover .p-sivujuoni__nuoli{ translate:-6px 0; }
.p-nappi{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(20px,2.4vw,40px); line-height:1;
  color:var(--kerma); background:var(--ruskea);
  padding:.55em 1.3em .5em; border-radius:999px;
  transition:background 260ms linear, translate 420ms var(--e);
}
.p-nappi:hover{ background:var(--puna); translate:0 -3px; }

.selaimet{ position:relative; aspect-ratio:1 / .95; }
.selain{
  position:absolute; margin:0; overflow:hidden;
  border-radius:clamp(4px,.5vw,8px);
  box-shadow:0 22px 50px -24px rgba(25,25,25,.55);
  background:var(--musta);
}
.selain img{ width:100%; height:auto; }
.selaimet{ cursor:pointer; }
.selain--1{ width:84%; left:12%; top:0; }
.selain--2{ width:96%; left:0;   top:30%; z-index:2; }
.selain--3{ width:84%; left:10%; top:64%; }

/* ------------------------------------------------------------
   5. MARKKINOINTI & SISÄLLÖNTUOTANTO
   ------------------------------------------------------------ */
.p-markkinointi{ color:var(--kerma); padding-inline:0; overflow:clip; }
.p-markkinointi > .p-iso{ margin-inline:0; }
.p-markkinointi > .p-leipa{ padding-inline:var(--reuna); margin-top:clamp(18px,2vw,30px); max-width:110ch; }
.p-aiheet{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; text-align:center;
  font-size:clamp(18px,2.9vw,50px); line-height:1.15;
  padding-inline:var(--reuna);
  margin-top:clamp(36px,5vw,80px);
}
.p-aiheet .vino span{ display:inline-block; margin-inline:.15em; }

/* Nauha: kaksi identtistä kopiota peräkkäin, rata liukuu -50 % -> 0,
   jolloin kuvat kulkevat vasemmalta oikealle ja silmukka on saumaton. */
.nauha{ margin-top:clamp(40px,5.5vw,90px); overflow:hidden; }
.nauha__rata{
  display:flex; gap:clamp(12px,1.4vw,24px); width:max-content;
  padding-inline:calc(clamp(12px,1.4vw,24px) / 2);
  animation:nauha 180s linear infinite;
}
.nauha:hover .nauha__rata{ animation-play-state:paused; }
.nauha__rata li{ flex:none; width:clamp(180px,23vw,380px); aspect-ratio:1; }
.nauha__rata img{ width:100%; height:100%; object-fit:cover; }
@keyframes nauha{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* ------------------------------------------------------------
   6. KIINNOSTUITKO?
   ------------------------------------------------------------ */
.p-cta{ color:var(--musta); display:grid; justify-items:center; gap:clamp(24px,3vw,48px); text-align:center; }
.p-nappi--puna{ background:var(--puna); font-size:clamp(24px,3vw,52px); }
.p-nappi--puna:hover{ background:var(--musta); }

/* ------------------------------------------------------------
   KAPEA RUUTU
   ------------------------------------------------------------ */
@media (max-width:860px){
  .p-ohje{ left:30%; }
  .p-brandi__grid,
  .p-netti__grid{ grid-template-columns:1fr; }
  .talo{ margin-inline:calc(var(--reuna) * -.5); width:auto; }
  .kortit{ grid-template-columns:1fr 1fr; grid-template-areas:"napit napit" "v o"; min-height:0; }
  .p-napit{ grid-area:napit; margin-bottom:clamp(20px,6vw,40px); }
  .kortit__pino{ min-height:clamp(260px,62vw,420px); }
  .kortit__pino--v{ grid-area:v; }
  .kortit__pino--o{ grid-area:o; }
  .kortti{ width:clamp(90px,26vw,170px); }
  .p-iso--vasen{ text-align:left; }
  .selaimet{ margin-top:clamp(20px,6vw,40px); }
}

/* ------------------------------------------------------------
   VÄHENNETTY LIIKE
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .tk, .p-iso--tarisee .ik{ animation:none; }
  .nauha{ overflow-x:auto; }
  .nauha__rata{ animation:none; }
}
html[data-motion="off"] .tk,
html[data-motion="off"] .nauha__rata{ animation:none; }