/* =========================================================================
   SIVUJUONI — tyylit
   Fontit: TAY High Beams (rakenne) + TAY Sundae (aksentit)
   Värit:  #fff9e3 #f7dd76 #f7d3cf #e1ecfa #ed4d2c #592135
   ========================================================================= */

/* ------------------------------------------------------------- fontit */
@font-face{
  font-family:"TAY High Beams";
  src:url("assets/fonts/TAYHighBeamsRegular.woff2") format("woff2"),
      url("assets/fonts/TAYHighBeamsRegular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"TAY High Beams";
  src:url("assets/fonts/TAYHighBeams-Italic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Clash Display";
  src:url("assets/fonts/ClashDisplay-500.woff2") format("woff2");
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:"Clash Display";
  src:url("assets/fonts/ClashDisplay-600.woff2") format("woff2");
  font-weight:600; font-display:swap;
}
@font-face{
  font-family:"Clash Display";
  src:url("assets/fonts/ClashDisplay-700.woff2") format("woff2");
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:"Gabarito";
  src:url("assets/fonts/Gabarito-Variable.woff2") format("woff2-variations"),
      url("assets/fonts/Gabarito-Variable.woff") format("woff");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("assets/fonts/DMSans-Regular.woff2") format("woff2"),
      url("assets/fonts/DMSans-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("assets/fonts/DMSans-Medium.woff2") format("woff2"),
      url("assets/fonts/DMSans-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("assets/fonts/DMSans-Bold.woff2") format("woff2"),
      url("assets/fonts/DMSans-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"TAY Sundae";
  src:url("assets/fonts/TAYSundaeRegular.woff2") format("woff2"),
      url("assets/fonts/TAYSundaeRegular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ------------------------------------------- animoitavat custom-propertyt */
@property --page-bg     { syntax:"<color>"; inherits:true; initial-value:#fff9e3 }
@property --peite       { syntax:"<number>"; inherits:true; initial-value:0 }
@property --page-ink    { syntax:"<color>"; inherits:true; initial-value:#592135 }
@property --page-accent { syntax:"<color>"; inherits:true; initial-value:#ed4d2c }
@property --page-soft   { syntax:"<color>"; inherits:true; initial-value:#f7d3cf }

/* -------------------------------------------------------------- tokenit */
:root{
  --cream:#fff9e3;
  --sun:#f7dd76;
  --blush:#f7d3cf;
  --sky:#e1ecfa;
  --tomato:#ed4d2c;
  --plum:#592135;

  --page-bg:var(--cream);
  --page-ink:var(--plum);
  --page-accent:var(--tomato);
  --page-soft:var(--blush);

  /* Otsikot */            --font-head:"Clash Display", "Gabarito", "Futura", system-ui, sans-serif;
  /* Leipäteksti ja UI */  --font-body:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Korostukset, tarrat */--font-label:"TAY High Beams", "Futura", "Trebuchet MS", system-ui, sans-serif;
  /* Käsialakorostukset */ --font-script:"TAY Sundae", "Brush Script MT", cursive;

  --shell: 1560px;
  --gut: clamp(1.15rem, 4.2vw, 4.5rem);
  --rhythm: clamp(3.4rem, 6.2vw, 6.4rem);

  /* hiuslinja: seuraa sivun tekstiväriä, mutta hillitysti */
  --line:rgba(89,33,53,.16);
  --line:color-mix(in srgb, var(--page-ink) 16%, transparent);

  --r-sm:.55rem;
  --r-md:.85rem;
  --r-lg:1.15rem;
  --r-pill:100rem;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);

  --header-h: clamp(116px, 22vh, 190px);
}
@media (max-width:860px){ :root{ --header-h:clamp(92px, 15vh, 132px) } }

/* --------------------------------------------------------------- pohja */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  background:var(--page-bg);
  transition:--page-bg 620ms var(--ease-out),
             --page-ink 520ms var(--ease-out),
             --page-accent 620ms var(--ease-out),
             --page-soft 620ms var(--ease-out);
}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--page-ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .26vw,1.12rem);
  line-height:1.66;
  letter-spacing:-.002em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden }
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,textarea,select{ font:inherit; color:inherit }
::selection{ background:var(--tomato); color:var(--cream) }
:focus-visible{ outline:3px solid var(--page-accent); outline-offset:3px; border-radius:4px }

/* Lenis */
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

/* --------------------------------------------------------- typografia */
/* --------------------------------------------------------- roolit
   Gabarito  = otsikot
   DM Sans   = leipäteksti, navigaatio, painikkeet, lomake
   High Beams= pienet korostustarrat ja kuvailulistat
   Sundae    = käsialakorostukset                                    */
h1,h2,h3,h4,
.d1,.d2,.d3,.d4,.statement,.cta__title,
.card h3,.price h3,.step h3,.member h3,.faq__q,.case h2,.case h3{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:-.022em;
}
.eyebrow,.tag,.small,.case__meta,.case__scope li,.detail dt,
.cmp thead th,.price__from,.member__role,
.footer h2,.footer__bot,.hero__scroll,.case__ph .small{
  font-family:var(--font-label);
}
.script,.step__n,.case__quote,.footer__tag,.menu__tag,
.pricetag,.price__badge,.case__ph b{
  font-family:var(--font-script);
}
.navlink,.btn,.menu__link,.lang a,.price__list li,.striplist li,.cmp tbody th{
  font-family:var(--font-body);
  font-weight:500;
}

h1,h2,h3,h4{ margin:0; line-height:1.04; letter-spacing:-.014em }
p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }

.d1{ font-size:clamp(2.7rem,9.4vw,10.5rem); line-height:.94; letter-spacing:-.024em }
.d2{ font-size:clamp(2.1rem,5.6vw,5.2rem); line-height:1.02; letter-spacing:-.02em }
.d3{ font-size:clamp(1.75rem,3.6vw,3.1rem); line-height:.98 }
.d4{ font-size:clamp(1.25rem,1.9vw,1.7rem); line-height:1.1 }

.lead{ font-size:clamp(1.05rem,1rem + .48vw,1.38rem); line-height:1.55; max-width:58ch;
  font-weight:400; letter-spacing:-.008em }
.small{ font-size:.86rem; letter-spacing:.06em; line-height:1.5 }

.script{ font-family:var(--font-script); letter-spacing:0; line-height:1.05 }
.accent{ color:var(--page-accent) }
.ital{ font-style:italic }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.8rem; letter-spacing:.22em; margin:0 0 1.4rem;
}
.eyebrow::before{
  /* Yksi piste raitapalkin sijaan: sivustolla ei ole enää raitoja. */
  content:""; width:.46em; height:.46em; flex:none; border-radius:50%;
  background:var(--page-accent);
}

/* --------------------------------------------------------------- layout */
.shell{ width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto }
.shell-wide{ width:min(100% - var(--gut), 1860px); margin-inline:auto }
.section{ padding-block:var(--rhythm); position:relative }
.section--tight{ padding-block:clamp(3rem,6vw,6rem) }
.stack>*+*{ margin-top:var(--s,1.4rem) }

/* --------------------------------------------------------------- raidat */
.stripe-rule{ height:1px; background:var(--line) }
.stripe-edge{ display:none }
.vanha-stripe-edge{
  position:absolute; inset-inline:0; height:2px; background:currentColor;
  opacity:.28; pointer-events:none;
}
.stripe-edge--top{ top:0 } .stripe-edge--bot{ bottom:0 }

/* -------------------------------------------------------------- painike */
.btn{
  --btn-bg:var(--page-accent); --btn-fg:var(--cream); --btn-hover:var(--plum);
  position:relative; display:inline-grid; place-items:center;
  padding:1.02em 2.1em .92em; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:clamp(.92rem,.88rem + .16vw,1.02rem); letter-spacing:-.004em;
  overflow:hidden; isolation:isolate; border:2px solid transparent;
  transition:color .38s var(--ease-out), border-color .38s var(--ease-out);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--btn-hover);
  transform:translate3d(0,101%,0); transition:transform .55s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translate3d(0,0,0) }
/* Teksti vaihtuu hoverissa: sama teksti odottaa tasan yhden rivin verran
   ikkunan alapuolella ja nousee tilalle. Kopio on asemoitava .btn__t:hen
   eikä .btn:iin — muuten se laskeutuu painikkeen pehmusteen alle ja
   hover vain vie tekstin pois näkyvistä. */
.btn__t{ display:block; overflow:hidden; position:relative }
.btn__t span{ display:block; transition:transform .5s var(--ease-out) }
.btn__t span::after{
  content:attr(data-t); display:block; position:absolute; left:0; right:0;
  top:100%; text-align:center;
}
.btn:hover .btn__t span,.btn:focus-visible .btn__t span{ transform:translateY(-100%) }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--page-ink); --btn-hover:var(--page-ink);
  border-color:currentColor }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--page-bg) }
.btn--ink{ --btn-bg:var(--page-ink); --btn-fg:var(--page-bg); --btn-hover:var(--page-accent) }
.btn--lg{ padding:1.25em 2.7em 1.12em; font-size:clamp(1rem,.95rem + .3vw,1.28rem) }
.hero--home .hero__cta .btn--lg{ font-size:clamp(1.2rem,1.14rem + .36vw,1.54rem) }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center }

/* tekstilinkki, jonka alleviivaus piirtyy */
.tlink{
  position:relative; display:inline-block; letter-spacing:.06em;
  padding-bottom:.12em;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{ transform:scaleX(1); transform-origin:0 50% }

/* --------------------------------------------------------------- badget */
.tag{
  display:inline-block; padding:.42em 1em .32em; border-radius:var(--r-pill);
  border:1px solid var(--line); font-size:.78rem; letter-spacing:.16em;
}
.pricetag{
  display:inline-block; font-family:var(--font-script);
  background:var(--sun); color:var(--plum);
  padding:.35em .8em .2em; border-radius:.7rem; font-size:1.35rem;
  transform:rotate(-3.5deg); transition:transform .4s var(--ease-out);
  box-shadow:.28rem .28rem 0 var(--plum);
}
a:hover .pricetag,.pricetag:hover{ transform:rotate(2.5deg) scale(1.06) }

/* ================================================================ HEADER */
.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:200;
  padding:.7em 1.2em; border-radius:var(--r-pill);
  background:var(--plum); color:var(--cream);
  transform:translateY(-160%); transition:transform .3s var(--ease-out);
}
.skip:focus{ transform:translateY(0) }

.header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  height:var(--header-h); display:flex; align-items:center;
  transition:transform .55s var(--ease-io), background-color .4s linear;
}
.header::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--page-bg); opacity:0;
  transition:opacity .4s linear;
  /* Ei haivytysmaskia: teksti kuulsi haipuvan reunan lapi ja naytti
     sotkuiselta. Tasainen tausta ja teravä hiusviiva. */
  border-bottom:1px solid color-mix(in srgb, var(--page-ink) 14%, transparent);
}
.header.is-stuck::after{ opacity:1 }
.header.is-hidden{ transform:translateY(-104%) }

.header__in{
  position:relative;
  width:min(100% - var(--gut)*1.2, 1860px); margin-inline:auto;
  display:grid; align-items:center;
  /* Keskisarake varaa tilan logolle. Etusivulla logo on absoluuttisesti
     asemoitu eikä siis grid-elementti, joten ilman minmax:ia sarake
     kutistuisi nollaan ja oikea linkkiryhmä valuisi sen paikalle. */
  grid-template-columns:1fr minmax(clamp(72px,6vw,104px),auto) 1fr;
  gap:clamp(1.3rem,2.8vw,3rem);
}
/* valikkolinkit hakeutuvat logoa kohti molemmilta puolilta */
.header__side{ display:flex; align-items:center; gap:clamp(1rem,1.9vw,2.2rem) }
.header__side--l{ grid-column:1; justify-content:flex-end }
.header__side--r{ grid-column:3; justify-content:flex-start }
.header__lang{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:.5rem;
}

.navlink{
  position:relative; font-size:clamp(1.2rem,1.1rem + .45vw,1.5rem);
  letter-spacing:-.01em; padding:.35em 0;
  white-space:nowrap;
}
.navlink::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease-out);
}
.navlink:hover::after,.navlink:focus-visible::after,.navlink[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:0 50%;
}
.navlink[aria-current="page"]{ color:var(--page-accent) }

/* --- valikkolinkin hover: teksti lihavoituu ---
   Haamukappale (b) on samassa ruudukkoruudussa lihavoituna ja piilotettuna,
   joten ruutu on aina lihavoidun levyinen eikä hover siirrä naapureita. */
.navlink{ display:inline-grid; align-items:center }
.navlink > span,.navlink > b{ grid-area:1 / 1 }
.navlink > b{ font-weight:700; visibility:hidden; pointer-events:none }
.navlink > span{ transition:color .2s var(--ease-out) }
.navlink:hover > span,.navlink:focus-visible > span{ font-weight:700 }


/* --- logon reunusversio -------------------------------------------------
   Logosta on sivulla kaksi piirrosta päällekkäin samassa ruudussa:
   tavallinen (.logo--vaalea) ja reunusversio (.logo--tumma), jossa lintu
   on tumma ja sen ympärillä valkoinen reunus. Tummalla pohjalla näkyy
   reunusversio, vaalealla tavallinen; vaihto ristihäivytetään, jotta se
   osuu samaan tahtiin taustavärin vaihdon kanssa.
   Tumma pohja = plum- ja tomato-teemat, alatunniste, avattu valikko. */
.brand,.footer__logo,.preload__logo{ display:grid; place-items:center }
.brand svg,.footer__logo svg,.preload__logo svg{
  grid-area:1 / 1;
  transition:opacity 420ms var(--ease-out);
}
.logo--tumma{ opacity:0 }
.logo__reunus{ fill:currentColor }
.logo__runko { fill:var(--plum) }

[data-theme="plum"] .logo--vaalea,[data-theme="tomato"] .logo--vaalea,
.footer__logo .logo--vaalea,.preload__logo .logo--vaalea,
body.menu-open .brand .logo--vaalea{ opacity:0 }

[data-theme="plum"] .logo--tumma,[data-theme="tomato"] .logo--tumma,
.footer__logo .logo--tumma,.preload__logo .logo--tumma,
body.menu-open .brand .logo--tumma{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  .brand svg,.footer__logo svg,.preload__logo svg{ transition:none }
}

/* keskilogo */
.brand{ position:relative; grid-column:2; padding:.2rem .5rem }
.brand svg{ height:clamp(56px,6.4vw,84px); width:auto; fill:currentColor; display:block }
/* lintu istuu sanamerkin päällä — hyppy lähtee sen jaloista */
.brand__bird{ transform-origin:50% 33% }
.brand:hover .brand__bird{ animation:hop .62s var(--ease-out) }
@keyframes hop{
  0%{ transform:translateY(0) rotate(0) }
  35%{ transform:translateY(-24%) rotate(-9deg) }
  70%{ transform:translateY(3%) rotate(4deg) }
  100%{ transform:translateY(0) rotate(0) }
}

/* kielivalitsin */
.lang{
  display:inline-flex; align-items:center; position:relative;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:2px;
  isolation:isolate;
}
.lang__pill{
  position:absolute; z-index:-1; top:2px; bottom:2px; left:2px;
  border-radius:var(--r-pill); background:var(--page-ink);
  transition:transform .5s var(--ease-io), width .5s var(--ease-io);
}
.lang a{
  padding:.42em .95em .38em; font-size:.98rem; letter-spacing:.02em; border-radius:var(--r-pill);
  transition:color .4s var(--ease-out);
}
.lang a[aria-current="true"]{ color:var(--page-bg) }

/* Kirjautuminen sisallonhallintaan. Kielivalitsin on aariviivapilleri,
   joten tama on taytetty: sama korkeus ja sama pilleri, mutta se on
   toiminto eika valinta, ja ero nakyy ilman toista muotokielta. */
.cmslink{
  display:inline-flex; align-items:center; position:relative;
  padding:.42em 1.05em .38em; border-radius:var(--r-pill);
  border:1px solid var(--page-ink); background:var(--page-ink); color:var(--page-bg);
  font-size:.98rem; letter-spacing:.02em; white-space:nowrap; gap:.42em;
  transition:background-color .4s var(--ease-out), color .4s var(--ease-out),
             border-color .4s var(--ease-out);
}
/* Pilleri on palkin mittakaavassa 31 px korkea. Kosketusalue
   venytetaan nakymattomasti 45 px:iin, ettei sormella tarvitse osua
   tarkasti. */
a.cmslink::after{ content:""; position:absolute; inset:-7px -4px }
/* Pieni nuoli kertoo etta linkki avautuu uuteen valilehteen. */
.cmslink__uusi{
  width:.62em; height:.62em; flex:0 0 auto;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg) translate(-.06em,.06em);
}
a.cmslink:hover,a.cmslink:focus-visible{
  background:transparent; color:var(--page-ink);
}
/* Osoitetta odottava nappi: paikka varattu, mutta ei kohdistinta eika
   hoveria, ettei se lupaa klikkausta jota ei tapahdu. */
.cmslink--tyhja{ opacity:.45; cursor:default }

.burger{
  display:none; width:44px; height:44px; place-items:center;
  position:absolute; left:0; top:50%; transform:translateY(-50%);
}
.burger i{
  display:block; width:24px; height:2px; background:currentColor; position:relative;
  transition:transform .45s var(--ease-io), background-color .2s;
}
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:currentColor;
  transition:transform .45s var(--ease-io);
}
.burger i::before{ top:-7px } .burger i::after{ top:7px }
body.menu-open .burger i{ background:transparent }
body.menu-open .burger i::before{ transform:translateY(7px) rotate(45deg) }
body.menu-open .burger i::after{ transform:translateY(-7px) rotate(-45deg) }
body.menu-open .burger{ transform:translateY(-50%) }

/* mobiilivalikko */
/* valikko auki: otsikkopalkki kirkkaaksi tummaa taustaa vasten */
body.menu-open .header{ color:var(--cream) }
/* Avoin valikko on luumunvarinen, joten tumma taytetty pilleri katoaisi
   siihen. Valikon paalla nappi kaantyy aariviivaksi. */
body.menu-open .cmslink{
  background:transparent; color:var(--cream); border-color:var(--cream);
}
body.menu-open a.cmslink:hover,body.menu-open a.cmslink:focus-visible{
  background:var(--cream); color:var(--plum);
}
body.menu-open .header::after{ opacity:0 }
body.menu-open .header.is-hidden{ transform:none }

.menu{
  position:fixed; inset:0; z-index:95; background:var(--plum); color:var(--cream);
  display:flex; flex-direction:column; gap:.2rem;
  padding:calc(var(--header-h) + 2rem) var(--gut) 3rem;
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .8s var(--ease-io), visibility 0s linear .8s;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible; transition-delay:0s }
.menu__link{
  font-size:clamp(2.2rem,9.5vw,4.2rem); line-height:1.1; display:block; overflow:hidden;
  letter-spacing:-.03em;
}
.menu__link span{
  display:block; transform:translateY(105%);
  transition:transform .7s var(--ease-out), color .3s;
}
body.menu-open .menu__link span{ transform:translateY(0) }
.menu__link:hover span{ color:var(--sun) }
.menu__foot{ margin-top:auto; padding-top:2.4rem; display:flex; flex-wrap:wrap;
  gap:1rem 2rem; align-items:center; justify-content:space-between }
.menu .stripe-rule{ height:1px; background:var(--line) }
.menu__tag{
  font-family:var(--font-script); color:var(--sun);
  font-size:clamp(1.3rem,5.5vw,2rem); line-height:1.1; max-width:14ch;
  /* kasialafontin muste laatikon sisaan, sama resepti kuin otsikoissa */
  padding:.3em .25em; margin:calc(1.4rem - .3em) -.25em -.3em;
}
.menu__bird{
  position:absolute; right:-4%; bottom:16%; width:min(52vw,260px);
  fill:var(--cream); opacity:.10; pointer-events:none;
}

@media (max-width:1080px){
  .header__side--l .navlink,.header__side--r .navlink{ display:none }
  .burger{ display:grid }
  .header__in{ width:min(100% - var(--gut),100%); padding-inline:calc(var(--gut)*.6) }
  .header__lang{ right:calc(var(--gut)*.6) }
  .burger{ left:calc(var(--gut)*.6) }
}
@media (min-width:961px){ .menu{ display:none } }

/* --------------------------------------------------- vierityksen edistymä */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:110; pointer-events:none;
}
.progress__b{
  height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--tomato);
}

/* --------------------------------------------------------------- kohdistin */
.cursor{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none;
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--tomato); mix-blend-mode:multiply;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             margin .35s var(--ease-out),opacity .3s;
  opacity:0;
}
.cursor.is-on{ opacity:1 }
.cursor.is-hot{ width:52px; height:52px; margin:-26px 0 0 -26px }
@media (hover:none),(pointer:coarse),(max-width:900px){ .cursor{ display:none } }

/* --------------------------------------------------------------- lataus */
.preload{
  position:fixed; inset:0; z-index:300; background:var(--plum); color:var(--cream);
  display:grid; place-items:center;
}
.preload__logo{ width:min(46vw,320px) }
.preload__logo svg{ width:100%; height:auto; fill:var(--cream) }
.preload__bar{
  /* Ohut täyttyvä viiva raitapalkin sijaan: rauhallisempi ja sopii
     verhon väriin. */
  position:absolute; left:20%; right:20%; bottom:14vh; height:3px;
  border-radius:2px; background:var(--cream); opacity:.85;
  transform:scaleX(0); transform-origin:0 50%;
}
.preload.is-done{ pointer-events:none }
html.no-js .preload{ display:none }

/* ================================================================== HERO */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:calc(var(--header-h) + 5vh) clamp(2.4rem,5vw,4.5rem);
}
.hero__grid{ display:grid; gap:clamp(1.6rem,3.4vw,3.6rem) }
.hero__title{ position:relative; z-index:2 }
/* Klippilaatikko on padding-laatikko, joten ylä- ja alapidennyksille on
   varattava tilaa molempiin suuntiin — muuten K:n yläkaari ja j:n häntä
   leikkautuvat. */
.ln{ display:block; overflow:hidden; padding:.24em .34em .28em; margin:-.24em -.34em -.28em }
.ln>span{ display:block }


.hero__line--shift{ padding-inline-start:clamp(0px,9vw,13rem) }
.hero__line--end{ text-align:right }

.hero__bottom{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:clamp(1.6rem,3vw,3rem);
}
@media (max-width:860px){ .hero__bottom{ grid-template-columns:1fr } }

.hero__scroll{
  display:inline-flex; align-items:center; gap:.7rem; font-size:.78rem; letter-spacing:.22em;
}
.hero__scroll i{
  width:1px; height:2.6rem; background:currentColor; display:block; position:relative;
  overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--page-accent);
  animation:sdown 1.9s var(--ease-io) infinite;
}
@keyframes sdown{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }

/* statit */
@media (max-width:640px){       .stats div:nth-last-child(-n+2){ border-bottom:0 } }

/* =============================================================== PANEELIT */
.panel{ position:relative; padding-block:var(--rhythm) }
.panel--edge{ padding-block:calc(var(--rhythm) + 1.4rem) }
.panel[data-bg]{ }
.head{ max-width:22ch }
.head--wide{ max-width:30ch }
.sec-head{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,4rem); align-items:end; margin-bottom:clamp(1.8rem,3.2vw,3rem);
}
.sec-head--single{ grid-template-columns:1fr }
/* Osioiden rytmi: kaikki eivät ala vasemmalta. Vaihtelu tehdään
   tasauksella eikä sisällön järjestystä muuttamalla, jotta
   lukujärjestys ja ruudunlukijan kulku säilyvät. */
.sec-head--right{ grid-template-columns:1fr; justify-items:end; text-align:right }
.sec-head--right .eyebrow{ flex-direction:row-reverse }
.sec-head--center{ grid-template-columns:1fr; justify-items:center; text-align:center }
@media (max-width:860px){
  .sec-head--right,.sec-head--center{ justify-items:start; text-align:left }
  .sec-head--right .eyebrow{ flex-direction:row }
}
@media (max-width:860px){ .sec-head{ grid-template-columns:1fr; align-items:start } }

/* iso kokonaisuus: valtava tekstiplokki */
.statement{
  font-size:clamp(1.8rem,4.4vw,4.2rem); line-height:1.08; letter-spacing:-.02em;
  max-width:20ch;
}

/* ---------------------------------------------------------------- kortit */
.grid{ display:grid; gap:clamp(1rem,1.7vw,1.7rem) }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:980px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr } }

.card{
  position:relative; padding:clamp(1.45rem,2.2vw,2.1rem);
  /* Paksu reuna kortin omalla varilla: kortit erottuvat ilman hoveria. */
  border:3px solid var(--card-fill,var(--page-ink));
  border-radius:var(--r-lg);
  /* overflow:hidden poistettu: se leikkasi reunaa kiertavan juovan,
     joka piirtyy reunan paalle. Tayttoanimaatio jolle se oli, on poissa. */
  display:flex; flex-direction:column; gap:.85rem; isolation:isolate;
  /* Sävytys johdetaan sivun musteesta: pelkkä hiusviiva katosi tummalla
     viininpunaisella lähes kokonaan. Toimii yhtä lailla vaaleilla. */
  background:color-mix(in srgb, var(--page-ink) 8%, transparent);
}
.card p{ font-size:.97rem; opacity:.88; line-height:1.6 }

/* raidallinen luettelo */
.cmsgrid{
  /* Kaksi tasattua palstaa: vasen otsikko+lista, oikea teksti+kuva.
     Molemmat alkavat samalta korkeudelta ja kuva venyy tayttamaan
     oikean palstan loppuosan — kummankaan alle ei jaa tyhjaa. */
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);
  gap:clamp(1.8rem,3.5vw,4rem);
  align-items:stretch;
}
.cmsgrid__oikea{ display:flex; flex-direction:column; gap:clamp(1.4rem,2.4vw,2.2rem); min-height:0 }
.cmsgrid__oikea .lead{ margin:0 }
.cmsgrid__oikea figure{ flex:1; min-height:0 }
.cmsgrid__oikea .frame{ height:100%; aspect-ratio:auto }
.cmsgrid__oikea .frame img{ width:100%; height:100%; object-fit:cover }
@media (max-width:860px){
  .cmsgrid{ grid-template-columns:1fr }
  .cmsgrid__oikea .frame{ aspect-ratio:4/3; height:auto }
}

/* yhteyslomake + kuva: kuva tayttaa oikean palstan koko matkalta */
.formgrid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:stretch;
}
.formgrid__kuva{ min-height:0 }
.formgrid__kuva .frame{ height:100%; aspect-ratio:auto }
.formgrid__kuva .frame img{ width:100%; height:100%; object-fit:cover }
@media (max-width:900px){
  .formgrid{ grid-template-columns:1fr }
  .formgrid__kuva .frame{ aspect-ratio:4/3; height:auto }
}
.striplist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.striplist li{
  position:relative; display:flex; gap:1rem; align-items:baseline;
  padding:clamp(.9rem,1.5vw,1.35rem) 0; border-bottom:1px solid var(--line);
  overflow:hidden;
}
.striplist li::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--page-accent) 8%, transparent);
  transform:translate3d(-101%,0,0); transition:transform .55s var(--ease-out);
}
.striplist li:hover::before{ transform:translate3d(0,0,0) }
.striplist li>i{
  flex:none; width:.42em; height:.42em; border-radius:50%; align-self:center;
  background:var(--page-accent);
}

/* =============================================================== HINNAT */
.prices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,1.6vw,1.6rem) }
@media (max-width:900px){ .prices{ grid-template-columns:1fr } }
.price{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.6rem); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; isolation:isolate;
}
.price--hot{ background:var(--page-ink); color:var(--page-bg) }
.price--hot .price__eur{ color:var(--sun) }
.price__stripe{ background-image:none !important; background-color:var(--swatch,var(--line)) }
.price--hot .price__stripe{ background-color:var(--sun) }
.price__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:.6rem }
.price h3{ font-size:clamp(1.5rem,2.4vw,2.2rem) }
.price__eur{
  font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1; color:var(--page-accent);
  display:block; margin:.9rem 0 .2rem;
}
.price__from{ font-size:.74rem; letter-spacing:.2em; opacity:.7 }
.price__desc{ font-size:.97rem; opacity:.88; margin:1.1rem 0 1.4rem; line-height:1.6 }
.price__list{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.6rem;
  border-top:1px solid var(--line); padding-top:1.2rem }
.price__list li{ display:flex; gap:.7rem; font-size:.95rem; align-items:flex-start }
.price__list li::before{
  content:""; flex:none; width:.4em; height:.4em; margin-top:.62em; border-radius:50%;
  background:var(--page-accent);
}
.price--hot .price__list li::before{ background:var(--sun) }
.price .btn{ margin-top:auto }
.price__badge{
  position:absolute; top:1.5rem; right:1.5rem; font-family:var(--font-script);
  font-size:1.15rem; background:var(--sun); color:var(--plum);
  padding:.28em .8em .14em; border-radius:.6rem; transform:rotate(4deg);
}

/* ================================================================ CASET */
.cases{ display:grid; gap:clamp(2.6rem,6vw,7rem) }
.case{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.4rem,3.4vw,4rem); align-items:center;
}
.case:nth-child(even) .case__media{ order:2 }
@media (max-width:900px){
  .case{ grid-template-columns:1fr }
  .case:nth-child(even) .case__media{ order:0 }
}
.case__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/5; background:var(--page-soft);
}
.case__media img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  will-change:transform }
.case__ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:.6rem; text-align:center;
  padding:2rem;
  background:color-mix(in srgb, var(--page-soft) 55%, var(--page-bg));
}
.case__ph svg{ width:clamp(120px,18vw,210px); margin-inline:auto; fill:var(--page-ink); opacity:.65 }
.case__ph b{ display:block; font-family:var(--font-script); font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:var(--page-accent); font-weight:400; margin-top:.6rem }
.case__price{
  position:absolute; z-index:3; bottom:1.2rem; right:1.2rem;
}
.case__meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center;
  font-size:.78rem; letter-spacing:.16em; margin-bottom:1.1rem }
.case__meta span{ display:inline-flex; align-items:center; gap:.5rem }
.case__meta span+span::before{ content:""; width:.4rem; height:.4rem; border-radius:50%;
  background:var(--page-accent) }
.case h2,.case h3{ font-size:clamp(1.6rem,3.2vw,2.9rem); margin-bottom:1rem }
.case__scope{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 0;
  padding:0 }
.case__scope li{ font-size:.76rem; letter-spacing:.1em; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.34em .9em .24em }
.case__quote{
  font-family:var(--font-script); font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.15;
  color:var(--page-accent); margin-top:1.6rem; display:block;
}
.case__result{
  margin-top:1.2rem; display:inline-flex; align-items:center; gap:.6rem;
  font-size:.84rem; letter-spacing:.12em;
}
.case__result::before{
  content:""; width:.42em; height:.42em; border-radius:50%; flex:none;
  background:var(--page-accent);
}

/* ============================================================== PROSESSI */
.steps{ counter-reset:s; display:grid; gap:clamp(.55rem,1.1vw,.95rem) }
.step{
  counter-increment:s; position:relative; display:grid;
  /* isolation: ::before on z-index:-1, ja ilman omaa pinoamiskontekstia
     se painuisi koko osion taustan taakse eikä näkyisi lainkaan. */
  isolation:isolate;
  grid-template-columns:clamp(3.4rem,7vw,8rem) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,2.4vw,3rem); align-items:start;
  padding:clamp(1.4rem,2.6vw,2.3rem) clamp(1.2rem,2.4vw,2.1rem);
  /* Sävytys johdetaan sivun musteesta, jolloin lohko erottuu joka
     taustavärillä: pelkkä hiusviiva katosi keltaiselle. */
  background:color-mix(in srgb, var(--page-ink) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--page-ink) 15%, transparent);
  border-radius:clamp(14px,1.6vw,22px);
  overflow:hidden;
  /* Ei transform/translate-pohjaista nostoa: sisääntuloanimaatio kirjoittaa
     molemmat inline-tyyliin (GSAP asettaa translate:none), jolloin
     hover-sääntö ei koskaan pääsisi voimaan. Syvyys tulee varjosta. */
  transition:border-color .45s var(--ease-out), box-shadow .5s var(--ease-out);
}
.step::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--step-fill,var(--page-soft));
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .55s var(--ease-out);
}
.step:hover{
  border-color:transparent;
  box-shadow:0 18px 40px -22px rgba(89,33,53,.55);
}
.step:hover::before{ transform:scaleY(1) }
.step__n{ transition:translate .5s var(--ease-out) }
.step:hover .step__n{ translate:5px 0; color:var(--plum) }
@media (prefers-reduced-motion:reduce){
  .step,.step::before,.step__n{ transition:none }
}
.step__n{
  font-family:var(--font-script); font-size:clamp(2rem,4.4vw,3.6rem); line-height:.9;
  color:var(--page-accent);
}
.step__n::before{ content:"0" counter(s) }
.step h3{ font-size:clamp(1.25rem,2.4vw,2.1rem) }
.step p{ font-size:1rem; opacity:.88; line-height:1.6 }
@media (max-width:780px){
  .step{ grid-template-columns:clamp(2.6rem,10vw,4rem) minmax(0,1fr) }
  .step p{ grid-column:2 }
}

/* ============================================================== VERTAILU */
.cmp{ width:100%; border-collapse:collapse; text-align:left }
.cmp th,.cmp td{ padding:clamp(.85rem,1.5vw,1.25rem) clamp(.6rem,1.2vw,1.2rem);
  border-bottom:1px solid var(--line); font-size:clamp(.88rem,1.05vw,1rem);
  vertical-align:top; font-weight:400 }
.cmp tbody th{ font-weight:500 }
.cmp thead th{ font-size:.76rem; letter-spacing:.16em; border-bottom:1.5px solid currentColor }
.cmp tbody th{ letter-spacing:.06em }
.cmp .is-us{ background:var(--page-soft); color:var(--plum) }
.cmp thead .is-us{ background:var(--page-ink); color:var(--page-bg) }
.cmp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.cmp-wrap table{ min-width:640px }

/* =================================================================== FAQ */
.faq{ border-top:1px solid var(--line) }
.faq__i{ border-bottom:1px solid var(--line) }
.faq__q{
  width:100%; display:flex; gap:1.2rem; align-items:flex-start; justify-content:space-between;
  padding:clamp(1.1rem,2vw,1.7rem) 0; text-align:left;
  font-size:clamp(1.05rem,1.8vw,1.5rem); line-height:1.2;
  transition:color .35s var(--ease-out);
}
.faq__q:hover{ color:var(--page-accent) }
.faq__ic{ flex:none; position:relative; width:1.4em; height:1.4em; margin-top:.05em }
.faq__ic::before,.faq__ic::after{
  content:""; position:absolute; inset:50% 0 auto; height:2px; background:currentColor;
  transition:transform .5s var(--ease-io);
}
.faq__ic::after{ transform:rotate(90deg) }
.faq__i.is-open .faq__ic::after{ transform:rotate(0) }
.faq__a{ overflow:hidden; height:0 }
.faq__a>div{ padding-bottom:clamp(1.1rem,2vw,1.7rem); max-width:70ch; opacity:.88 }

/* ================================================================ TIIMI */
.team{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,3vw,3rem) }
@media (max-width:760px){ .team{ grid-template-columns:1fr } }
.member__media{
  position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line); background:var(--page-soft);
}
.member__media img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.member__media::after{
  content:""; position:absolute; inset:auto 0 0; height:clamp(8px,1vw,12px);
  background:var(--page-accent);
}
.member h3{ font-size:clamp(1.7rem,3.4vw,2.8rem); margin:1.3rem 0 .35rem }
.member__role{ font-family:var(--font-script); font-size:1.3rem; color:var(--page-accent) }
.member p{ margin-top:.9rem; opacity:.88 }
.member__loves{ margin-top:1rem; font-size:.8rem; letter-spacing:.13em; opacity:.72;
  display:flex; align-items:center; gap:.7rem }
.member__loves::before{
  content:""; width:.42em; height:.42em; border-radius:50%; flex:none;
  background:var(--page-accent);
}

/* ============================================================== LOMAKE */
.form{ display:grid; gap:clamp(1rem,1.8vw,1.6rem) }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.6rem) }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr } }
.field{ position:relative; display:block }
.field>span:first-child{
  display:block; font-size:.95rem; font-weight:600; margin-bottom:.5rem;
}
.field input,.field textarea,.field select{
  /* Nakyva laatikko hiusviivan sijaan: kentat erottuvat taustasta
     ja lomake hahmottuu yhdella silmayksella. */
  width:100%; border:1px solid var(--line); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--page-soft) 26%, var(--page-bg));
  padding:.85em 1em; outline:none; font-size:1.02rem;
  transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--page-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--page-accent) 22%, transparent);
}
.field textarea{ min-height:9rem; resize:vertical; line-height:1.55 }
.field select{ cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2rem }
.field select option{ color:var(--plum); background:var(--cream) }
.field select{ padding-right:2.4rem }
.field__u{ display:none }
.field input::placeholder,.field textarea::placeholder{ color:currentColor; opacity:.42 }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem }
.chip input{ position:absolute; opacity:0; pointer-events:none }
.chip span{
  display:inline-block; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.55em 1.2em; font-size:.95rem; font-weight:600; cursor:pointer;
  transition:background-color .35s var(--ease-out), color .35s var(--ease-out),
             transform .35s var(--ease-out);
}
.chip:hover span{ transform:translateY(-2px) }
.chip input:checked+span{ background:var(--page-ink); color:var(--page-bg) }
.chip input:focus-visible+span{ outline:3px solid var(--page-accent); outline-offset:3px }

.form__note{ font-size:.88rem; opacity:.75; max-width:52ch; line-height:1.55 }
.form__msg{ display:none; padding:1rem 1.2rem; border-radius:var(--r-md);
  border:2px solid currentColor; font-size:.95rem }
.form__msg.is-on{ display:block }

/* --------------------------------------------------------------- yhteys */
.details{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.4vw,2.4rem) }
@media (max-width:620px){ .details{ grid-template-columns:1fr } }
.detail{ border-top:1px solid var(--line); padding-top:1.1rem }
.detail dt{ font-size:.74rem; letter-spacing:.2em; opacity:.7; margin-bottom:.5rem }
.detail dd{ margin:0; font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.3 }

/* ================================================================= CTA */
.cta{ position:relative; text-align:center; padding-block:clamp(5rem,12vw,12rem);
  overflow:hidden }
.cta .btn{ margin-top:2.2rem }
.cta__title{ font-size:clamp(2.1rem,5.8vw,5.6rem); line-height:.98; max-width:17ch;
  margin-inline:auto; letter-spacing:-.022em }

/* ============================================================== FOOTER */
.footer{ background:var(--plum); color:var(--cream); position:relative;
  padding-block:clamp(3rem,6vw,6rem) 2rem }
.footer .stripe-edge{ display:none }
.vanha-stripe-edge{
  position:absolute; inset-inline:0; height:2px; background:currentColor;
  opacity:.28; pointer-events:none;
}
.footer__top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,3rem); padding-top:1.4rem }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr }
  .footer__brand{ grid-column:1/-1 } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr } }
.footer__logo svg{ width:min(74vw,300px); height:auto; fill:var(--cream) }
.footer__tag{ font-family:var(--font-script); font-size:1.5rem; color:var(--sun);
  margin-top:1.1rem }
.footer h2{ font-size:.76rem; letter-spacing:.2em; opacity:.66; margin-bottom:1rem }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.footer a:hover{ color:var(--sun) }
.footer__bot{ margin-top:clamp(2.6rem,5vw,4.5rem); padding-top:1.4rem;
  border-top:2px solid rgba(255,249,227,.24); display:flex; flex-wrap:wrap;
  gap:.6rem 1.6rem; justify-content:space-between; font-size:.78rem; letter-spacing:.1em;
  opacity:.72 }
.footer__bird{ position:absolute; right:2%; bottom:6%; width:clamp(90px,13vw,220px);
  fill:var(--cream); opacity:.09; pointer-events:none }

/* ========================================================== ANIMAATIOT */
[data-rv]{ will-change:transform,opacity }
.ln>span,[data-split] .w>span{ will-change:transform }
.hero__title .ln>span{ will-change:auto }
html.no-js [data-rv],html.no-js .ln>span{ opacity:1 !important; transform:none !important }
html.no-js .preload{ display:none }
/* ilman JS:ää: sisältö on silti luettavissa ja navigoitavissa */
html.no-js .faq__a{ height:auto }
html.no-js .faq__ic{ display:none }
html.no-js .burger{ display:none }
html.no-js .header__side .navlink{ display:inline-block }
html.no-js .header{ position:absolute }
html.no-js .lang__pill{ display:none }

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

/* -------------------------------------------- tekstin pilkkominen (JS) */
.w{
  display:inline-block; overflow:clip; vertical-align:top;
  /* Pehmuste joka suuntaan: Safari rasteroi transformoidun tekstilaatikon
     ja leikkaa laatikon yli ulottuvan musteen. Kun muste on laatikon
     sisalla, rasterointi ei voi katkaista sita. */
  padding:.2em .3em .18em; margin:-.2em -.3em -.18em;
}
.w>span{ display:inline-block; padding:.2em .3em .18em; margin:-.2em -.3em -.18em }

/* kuvakehykset */
.frame{ overflow:hidden; border-radius:var(--r-md); border:1px solid var(--line) }
.frame img{ width:100%; height:100%; object-fit:cover; object-position:center }
.frame--wide{ aspect-ratio:16/9 }
@media (max-width:700px){ .frame--wide{ aspect-ratio:4/3 } }
.storygrid .statement{ margin-bottom:clamp(1.4rem,2.6vw,2.4rem) }
.storygrid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  /* start: kuva ja teksti alkavat samalta korkeudelta. */
  gap:clamp(1.6rem,3.4vw,4rem); align-items:start }
@media (max-width:860px){ .storygrid{ grid-template-columns:1fr } }
/* Neliö: pystykuva jatkui pitkälle tekstin ohi ja jätti alle tyhjää. */
.storygrid .frame{ aspect-ratio:1/1; height:auto }

/* itsevärittyvä isokirjainkaista (ei sidottu sivun taustateemaan) */
.bigband 
/* ===================================================== VÄRISÄVYT
   Jokainen paletin väri saa oman roolinsa: caset, paketit, kortit ja
   luvut kierrättävät kaikki kuusi sävyä läpi sivuston.               */
.sw-cream  { --swatch:var(--cream);  --swatch-ink:var(--plum) }
.sw-sun    { --swatch:var(--sun);    --swatch-ink:var(--plum) }
.sw-blush  { --swatch:var(--blush);  --swatch-ink:var(--plum) }
.sw-sky    { --swatch:var(--sky);    --swatch-ink:var(--plum) }
.sw-tomato { --swatch:var(--tomato); --swatch-ink:var(--cream) }
.sw-plum   { --swatch:var(--plum);   --swatch-ink:var(--cream) }

/* --- caset (oletus tulee .sw-*-luokasta; ei omaa --swatch-arvoa tässä) --- */
.case .case__media::after{
  content:""; position:absolute; inset:auto 0 0; height:clamp(10px,1.3vw,16px);
  z-index:2; background-color:var(--swatch);
}
.case .pricetag{ background:var(--swatch); color:var(--swatch-ink);
  box-shadow:.28rem .28rem 0 var(--swatch-ink) }
.case__price{ bottom:calc(clamp(14px,1.9vw,26px) + 1rem) }
.case .case__meta span+span::before{ background:var(--swatch) }
.case .case__result::before{ background:var(--swatch) }
.case .case__scope li:hover{ background:var(--swatch); color:var(--swatch-ink);
  border-color:var(--swatch) }
.case__scope li{ transition:background-color .3s var(--ease-out),
  color .3s var(--ease-out), border-color .3s var(--ease-out) }
.case__ph{
  background:color-mix(in srgb, var(--swatch,var(--page-soft)) 30%, var(--page-bg));
  padding:0;
}
.case__ph>*{ position:relative; z-index:1 }
.case__ph::before{
  content:""; position:absolute; inset:clamp(1.4rem,3vw,2.6rem);
  background:var(--page-bg); border:2px solid var(--page-ink); border-radius:var(--r-md);
}
.case__ph svg{ opacity:.9 }
.case__ph b{ color:var(--page-ink) }
.case__ph .small{ opacity:.65 }

/* --- paketit --- */
.price__stripe{ background-color:var(--swatch); height:14px }
.price--hot .price__stripe{ background-color:var(--sun) }
.price__eur{ color:var(--page-accent) }
.price--hot .price__eur{ color:var(--sun) }

.price--hot .price__list li::before{ background:var(--sun) }
.price .btn{ --btn-hover:var(--swatch) }
.price .btn:hover,.price .btn:focus-visible{ color:var(--swatch-ink) }

/* --- kortit: hover kiertää koko paletin --- */
.card{ --card-fill:var(--page-ink); --card-fg:var(--page-bg) }
/* juovavari valitaan kontrastiksi kunkin kortin reunavarille */
.grid>.card:nth-child(4n+1){ --card-fill:var(--sky);    --card-fg:var(--plum); --card-juova:var(--tomato) }
.grid>.card:nth-child(4n+2){ --card-fill:var(--sun);    --card-fg:var(--plum); --card-juova:var(--tomato) }
.grid>.card:nth-child(4n+3){ --card-fill:var(--blush);  --card-fg:var(--plum); --card-juova:var(--tomato) }
.grid>.card:nth-child(4n+4){ --card-fill:var(--tomato); --card-fg:var(--cream); --card-juova:var(--cream) }


/* --- prosessiaskelmien hover kiertää sävyt --- */
.steps>.step:nth-child(4n+1){ --step-fill:var(--sky) }
.steps>.step:nth-child(4n+2){ --step-fill:var(--blush) }
.steps>.step:nth-child(4n+3){ --step-fill:var(--sun) }
.steps>.step:nth-child(4n+4){ --step-fill:var(--cream) }
.step::before{ background:var(--step-fill,var(--page-soft)) }
.step:hover{ color:var(--plum) }

.striplist li>i{
  flex:none; width:.42em; height:.42em; border-radius:50%; align-self:center;
  background:var(--page-accent);
}




/* ------------------------------------------------------- lisäpalvelut */
.extras{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.extras li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.35rem clamp(1rem,3vw,3rem);
  padding:clamp(1.1rem,2vw,1.6rem) 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.extra__n{ font-family:var(--font-head); font-weight:600; letter-spacing:-.018em;
  font-size:clamp(1.05rem,1.5vw,1.3rem) }
.extra__p{ font-family:var(--font-script); color:var(--page-accent);
  font-size:clamp(1.15rem,1.8vw,1.5rem); white-space:nowrap; justify-self:end }
.extra__d{ grid-column:1/-1; opacity:.78; font-size:.97rem; max-width:62ch }
@media (max-width:560px){
  .extras li{ grid-template-columns:1fr }
  .extra__p{ justify-self:start }
}

/* ================================================== ETUSIVUN HERO
   Logo on otsikkopalkin elementti; tähän varataan sille vain tila,
   ja JS siirtää sen paikalleen ja kutistaa vierityksen mukana.        */
/* Mittasuhteet asiakkaan esimerkistä (1366x770):
   logo 442 px = 57 vh · väli 64 px = 8 vh · iskulause 30 px
   Ensimmäisellä ruudulla vain logo ja iskulause; otsikko, leipäteksti ja
   painikkeet paljastuvat vieritettäessä. */
.hero--home{
  display:block; min-height:0; padding:0; text-align:center;
  /* Telakointi kestää 0.6 ruutua; loppu on vierityvaraa. Aiempi 200svh
     jätti 40 svh kuollutta vieritystä ennen seuraavaa osiota. */
  height:165svh;
}
.hero__stage{
  position:sticky; top:0; height:100svh;
  display:block;
  /* Koko palkin korkeus, ei 30 %: muuten iso logo nousi valikkolinkkien
     päälle ja peitti ne. */
  padding-block:var(--header-h) 4vh;
}
.hero__stage .hero__grid{ position:relative; height:100% }
/* Teksti irrotetaan taitosta: leipäteksti ja painikkeet ovat piilossa
   alkutilassa, mutta veivät silti pystytilaa ja työnsivät logon ylös. */
.hero__text{
  position:absolute; left:0; right:0; top:0;
  display:grid; justify-items:center; will-change:transform;
}
.hero__slogan{ margin-top:0 }
/* Korostus seuraa sivun teemaa, joten se pysyy kontrastisena myös
   kun tausta vaihtuu oranssista kermaan. */
.hero__hi{ font-style:normal; color:var(--plum) }
/* .ln vuotaa sivuille .34em sivupaksunnoksia varten. Gabarito ei niitä
   tarvitse, ja isolla iskulauseella vuoto työnsi sivun 2 px leveäksi. */
/* Ei maskia: yhdelle riville pakotettu iskulause on leveämpi kuin
   .ln-laatikko, ja overflow:hidden katkaisi sen kesken sanan (näkyi
   WebKitissä). Sisääntulo piilottaa opacityllä, joten maskia ei
   tarvita. */
.hero__slogan .ln{ overflow:visible; padding:0; margin:0 }
.hero__lead{ max-width:52ch; text-align:center; margin:3.2vh 0 0 }
.hero__cta{ justify-content:center; margin-top:3.4vh }
.hero__slogan{
  font-family:var(--font-head); font-weight:600; margin:0;
  /* min(vh, vw): pelkka vh kasvatti fontin 61 pikseliin kapealla
     pystypuhelimella, jossa korkeutta on paljon mutta leveytta ei. */
  font-size:clamp(2rem, min(7.2vh, 8.4vw), 4.8rem);
  line-height:1.04; letter-spacing:-.026em; max-width:19ch;
}
/* Työpöydällä iskulause kahdelle riville.

   Aiemmin se oli pakotettu yhdelle rivillä ja nowrapilla. Herossa se
   istuu nimilogon alla, ja yksi rivi mahtui sinne vain skaalaamalla
   koko lohko niin pieneksi että luumuosa jäi noin 30 pikseliin —
   luumu tomaatilla on 3,36:1, mikä riittää isolle tekstille muttei
   tuon kokoiselle. Kahdella rivillä sama leveys kantaa reilusti
   isomman kirjasimen.

   Rivitys on sama levossa ja telakoituna: lepotila on telakkataiton
   skaalattu versio, eikä riviväliä voi vaihtaa kesken animaation. */
@media (min-width:1000px){
  .hero__slogan{
    max-width:23ch;
    font-size:min(4.5vw, 5rem);
    text-wrap:balance;
  }
}


.hero__logoslot{ height:min(66vh, 64vw, 900px); width:100% }
/* Logon koko porrastetaan näytön KORKEUDEN mukaan: leveällä mutta
   matalalla ikkunalla 50 vh ei jätä tilaa otsikolle ja painikkeille. */

.hero__eyebrow{ margin:0 }
.hero__eyebrow::before{ display:none }
.hero__claim{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.6rem, 4.6vh, 3.2rem); line-height:1.12; letter-spacing:-.016em;
  max-width:20ch;
}
.hero--home .hero__claim .script{ display:inline-block; letter-spacing:0 }
.hero--home .hero__bottom{
  grid-template-columns:1fr; justify-items:center; gap:1.3rem; margin-top:.2rem;
}
.hero--home .lead{ max-width:50ch; text-align:center;
  font-size:clamp(1.18rem,1.2rem + .24vw,1.38rem) }
.hero--home .btn-row{ justify-content:center }
/* vieritysvihje ei vie tilaa pystysuunnassa */
.hero--home .hero__scroll{
  position:absolute; bottom:clamp(1rem,2.6vh,2.2rem); left:50%;
  transform:translateX(-50%); margin:0;
}
/* matalat näytöt: tiivistetään kaikki */
@media (max-height:690px){
  .hero__logoslot{ height:min(54vh, 340px) }
  .hero--home .hero__claim{ font-size:clamp(1.5rem,3.2vw,2.4rem) }
  .hero--home .hero__grid{ gap:.7rem }
  .hero--home .lead{ font-size:1rem }
}
@media (max-height:600px){
  .hero__logoslot{ height:min(46vh, 250px) }
  .hero--home .hero__claim{ font-size:clamp(1.3rem,4.4vw,1.9rem) }
  .hero--home .lead{ font-size:.95rem }
  .hero--home .btn--lg{ padding:.95em 1.9em .85em; font-size:.94rem }
  .hero--home .hero__scroll{ display:none }
}

/* logon telakointi: pehmeä ja ilman hyppyä */
/* Etusivulla logo piirretään heron kokoisena ja kutistetaan transformilla.
   Alaspäin skaalaus säilyttää terävyyden — ylöspäin skaalaus sumentaisi. */
body.is-home .brand{
  position:absolute; left:0; top:0; z-index:2;
  transform-origin:50% 0;
}
body.is-home .brand svg{
  height:var(--hero-logo, 260px);
  /* max-width:100% typisti logon kapealla näytöllä: SVG jäi kehyksensä
     sisään pienenä ja ympärille jäi tyhjää. Leveyden rajaa laskenta. */
  max-width:none;
}
.brand{ will-change:transform }
body.is-home .header::after{ transition:opacity .4s linear }
@media (max-width:700px){
  .hero__logoslot{ height:min(56vh, 78vw, 440px) }
}

/* peräkkäiset kermaosiot erottuvat hiuslinjalla, ei värillä */
main > section.panel[data-bg="cream"] + section.panel[data-bg="cream"]{
  border-top:1px solid var(--line);
}

/* ================================================== TYÖNÄYTTEET */
.workgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.2vw,2.2rem);
}
@media (max-width:900px){ .workgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .workgrid{ grid-template-columns:1fr } }

/* --swatch tulee .sw-*-luokasta; ei omaa oletusta tässä (kumoaisi sen) */
.work{ display:flex; flex-direction:column; gap:.85rem }
.work__media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--page-bg);
}
.work__media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top; display:block;
}
.work__media img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.work__media::after{
  content:""; position:absolute; inset:auto 0 0; height:clamp(7px,.9vw,11px);
  background:var(--swatch,var(--page-accent));
}
/* tyhjä paikka: brändinmukainen laatikko, joka odottaa sisältöä */
.work__ph{
  position:absolute; inset:0; display:grid; place-content:center;
  background:color-mix(in srgb, var(--swatch,var(--page-accent)) 12%, var(--page-bg));
}
.work__ph svg{
  width:clamp(52px,7vw,84px); fill:var(--page-ink); opacity:.22;
}
.work--empty .work__media{ border-style:dashed }
.work__meta{ font-family:var(--font-label); font-size:.74rem; letter-spacing:.16em;
  opacity:.7; margin:0 }
.work__title{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.18; margin:0 }
.work__desc{ font-size:.95rem; opacity:.82; margin:0 }

/* ---------------------------------------------- työkortin linkki */
.work__link{ font-family:var(--font-label); font-size:.78rem; letter-spacing:.14em;
  color:var(--page-accent); margin-top:.15rem; align-self:flex-start }

/* ============================================ HOUKUTTELEVA LOPETUS */
.cta{ position:relative; overflow:hidden }
.cta__bird{
  position:absolute; right:-2%; bottom:-14%; width:clamp(150px,24vw,360px);
  fill:currentColor; opacity:.09; pointer-events:none;
}
.cta .shell{ position:relative; z-index:1 }
.cta__lead{ margin:1.5rem auto 0; text-align:center; max-width:46ch; opacity:.9 }
.cta__actions{
  margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:center;
}
.cta__actions .btn{ margin-top:0 }
.cta__mail{ font-size:clamp(1rem,1.3vw,1.15rem); letter-spacing:-.004em }
.cta__points{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:center;
  font-family:var(--font-label); font-size:clamp(1rem,.95rem + .25vw,1.18rem);
  letter-spacing:.1em; opacity:.95;
}
.cta__points li{ display:flex; align-items:center; gap:.6rem }
.cta__points li::before{
  content:""; width:.4em; height:.4em; border-radius:50%; background:currentColor;
  flex:none; opacity:.6;
}
@media (max-width:560px){
  .cta__points{ flex-direction:column; align-items:center; gap:.6rem }
}

/* (raitaviiva poistettu) */
.ruler{ display:none }
/* oranssi hero: aavistus lisäkontrastia leipätekstiin */
.hero--home[data-bg="tomato"] .lead{ opacity:.95 }




/* ======================================== EROTTUMISTEKIJÄ-OSIO
   Kuva vasemmalle, otsikko oikealle pienempänä, avaava teksti alle
   ja lopuksi painikkeen näköiset nostot.                              */
.uspgrid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,4vw,4.5rem); align-items:center;
}
@media (max-width:860px){ .uspgrid{ grid-template-columns:1fr } }
.uspgrid__media{ margin:0 }
/* Neliö: 4:5-rajaus hukkasi vaakakuvasta niin paljon leveyttä, ettei
   jäljelle jäänyt riittävästi pikseleitä retinanäytölle. */
.frame--tall{ aspect-ratio:1/1 }
@media (max-width:860px){ .frame--tall{ aspect-ratio:4/3 } }
.uspgrid__head .d3{
  max-width:20ch;
  /* Pienempi ja ilmavampi: otsikko + kasialalause olivat yhdessa
     seitseman riskin huutavaa rivia. */
  font-size:clamp(1.8rem,3.4vw,3.2rem);
  line-height:1.12;
}
/* Osion kärki omalle rivilleen käsialafontilla — se on koko
   argumentin ydin, ja erottuu näin ilman lisäkoristeita. */
.usp__hi{
  display:block; font-style:normal; letter-spacing:.01em;
  font-family:var(--font-script); color:var(--page-accent);
  /* Käsialafontin yläkaari nousee rivilaatikkonsa yli ja osui
     edelliseen riviin — tila varataan marginaalilla. */
  /* Kevyt koroste, ei toinen otsikko: selvasti otsikkoa pienempi. */
  font-size:.82em; line-height:1.4; max-width:24ch;
  /* Käsialafontin muste nousee 17 px rivilaatikon yli (ink-ascent 78 px,
     fontin oma ascent 66 px) ja ulottuu myös vasemmalle tekstin
     alkupisteestä. Pehmuste laajentaa laatikkoa niiden yli ja marginaali
     kompensoi siirtymän, joten sijainti pysyy samana mutta muste on
     laatikon sisällä — silloin mikään rajaava esi-isä ei voi katkaista sitä. */
  padding:.22em 0 0 .12em; margin-top:.12em;
}
/* Sanamaski (.w) leikkaa vaakasuunnassa sanan laatikkoon, ja
   käsialafontin M ulottuu sen yli. Maskia ei tarvita: sisääntulo
   piilottaa sanan opacityllä ennen nousua. */
.usp__hi .w{ overflow:visible; padding:0; margin:0 }
.uspbody{
  margin:clamp(2.4rem,4.5vw,4rem) 0 0; max-width:none;
}
.uspbody p+p{ margin-top:1.1em }

/* ------------------------------------------- arvot: manifestirivit
   Koko leveyden rivit: iso otsikko vasemmalla, kuvaus oikealla.
   Mittakaava ja tyhja tila tekevat ilmeen — ei laatikoita. */
.vals{ list-style:none; margin:0; padding:0 }
.val{
  position:relative;
  display:grid; align-items:baseline;
  grid-template-columns:minmax(0,3.2rem) minmax(0,1.1fr) minmax(0,1fr);
  gap:0 clamp(1.4rem,3vw,3.5rem);
  padding:clamp(1.6rem,3vw,2.6rem) 0;
}
.val__viiva{
  position:absolute; inset-inline:0; top:0; height:1px;
  background:color-mix(in srgb, var(--cream) 26%, transparent);
  transform-origin:0 50%;
}
.val:last-child::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:color-mix(in srgb, var(--cream) 26%, transparent);
}
.val__n{
  font-family:var(--font-label); color:var(--sun);
  font-size:1rem; letter-spacing:.14em;
}
.val__t{
  margin:0; font-family:var(--font-head);
  font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.04;
  font-weight:700; letter-spacing:-.012em;
  transition:color .35s var(--ease-out), transform .35s var(--ease-out);
}
.val:hover .val__t{ color:var(--sun); transform:translateX(.18em) }
.val__d{ margin:0; max-width:44ch; opacity:.85; line-height:1.6 }
@media (max-width:860px){
  .val{ grid-template-columns:1fr; gap:.45rem 0; padding:1.4rem 0 }
  .val__t{ font-size:clamp(1.55rem,6.4vw,1.9rem) }
}

/* painikkeen näköiset nostot */
.pills{
  list-style:none; margin:clamp(2.4rem,4.5vw,4rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.4rem);
}
@media (max-width:860px){ .pills{ grid-template-columns:1fr } }
.pill{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:clamp(1.5rem,2.4vw,2.2rem) clamp(1.6rem,2.6vw,2.4rem);
  transition:color .38s var(--ease-out), border-color .38s var(--ease-out),
             transform .5s var(--ease-out);
}
.pill h3{ font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.2; margin:0 0 .5rem }
.pill p{ font-size:.95rem; opacity:.85; margin:0 }
@media (max-width:860px){ .pill{ border-radius:var(--r-lg) } }

/* ================================ ALASIVUJEN PÄÄOTSIKOT
   Sundaella ladottuna: pienempi koko kuin groteskilla, väljempi riviväli
   ja maskiin ylä- ja alapidennysten vaatima tila, ettei mikään leikkaudu. */
.hero__title{
  font-family:var(--font-script);
  font-weight:400; letter-spacing:0;
  font-size:clamp(1.9rem,4.2vw,4.2rem);
  line-height:1.12;
  /* Rivitys tulee merkkauksesta (kaksi .ln-riviä). Ei ch-rajausta eikä
     nowrapia: kumpikin sai tekstin vuotamaan oman laatikkonsa yli,
     jolloin kirjoittumisen peite ei ulottunut rivin päihin. */
  max-width:none;
}
/* Kirjoittuminen tehdään PEITTEELLÄ, ei tekstiä rajaamalla: taustanvärinen
   suorakaide vetäytyy oikealle ja paljastaa rivin. Näin mikään sääntö ei
   voi leikata käsialafontin kaaria tai pisteitä — teksti piirtyy aina
   kokonaisena, peite vain on hetken sen päällä. */
.hero__title .ln{ overflow:visible; padding:0; margin:0; position:relative }
/* Sanat nousevat nakyviin ilman maskia: mikaan ei voi leikata niita. */
/* kirjaimet ovat tavallisia inline-elementteja: ei laatikoita,
   ei transformia, ei rasterointia. GSAP hoitaa piilotuksen, jotta
   teksti ei jaa nakymattomiin jos animaatio ei kaynnisty. */
.hero__title .script{ font-family:var(--font-script) }
.hero__line--shift{ padding-inline-start:0 }
@media (max-width:700px){
  .hero__title{ font-size:clamp(1.55rem,7.4vw,3rem); max-width:none }
}

/* ============================ HIENOSTUNEEMPI HOVER
   Vino täyttö nousee alhaalta, kortti kohoaa hieman ja otsikko siirtyy
   — kolme pientä liikettä yhdessä lukee huolitellummalta kuin yksi.   */
.card,.pill{
  transition:color .4s var(--ease-out), border-color .4s var(--ease-out),
             transform .55s var(--ease-out);
}
.pill::before{
  content:""; position:absolute; inset:-1px; z-index:-1;
  background:var(--card-fill,var(--page-ink));
  transform:none;
  clip-path:polygon(0 100%, 100% 112%, 100% 100%, 0 100%);
  transition:clip-path .68s var(--ease-out);
}
.pill:hover::before,.pill:focus-within::before{
  clip-path:polygon(0 -12%, 100% 0, 100% 100%, 0 100%);
}
.pill:hover{
  color:var(--card-fg,var(--page-bg));
  border-color:transparent;
  transform:translateY(-5px);
}
.pill h3{ transition:transform .55s var(--ease-out) }
.pill:hover h3{ transform:translateX(7px) }
.pill p{ transition:opacity .4s var(--ease-out) }
.pill:hover p{ opacity:1 }

/* Kortin hover: valojuova kiertaa reunan ympari ja palaa lahtoon.
   Rengas piirretaan conic-gradientilla ja maskataan reunan levyiseksi;
   @property tekee kulmasta animoitavan. */
@property --kierto { syntax:"<angle>"; inherits:false; initial-value:0deg }
.card::after{
  /* Juova on reunaa paksumpi, pidempi ja hehkuu: pelkka reunan
     levyinen kaistale huikui tummalla taustalla. */
  content:""; position:absolute; inset:-5px; border-radius:inherit;
  padding:5px; pointer-events:none; opacity:0; z-index:1;
  background:conic-gradient(from var(--kierto),
    var(--card-juova,var(--page-ink)) 0 70deg, transparent 100deg 360deg);
  filter:drop-shadow(0 0 7px var(--card-juova,var(--page-ink)));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .2s var(--ease-out);
}
.card:hover::after{ opacity:1; animation:kortinkierto .95s ease-in-out 1 }
@keyframes kortinkierto{ from{ --kierto:0deg } to{ --kierto:360deg } }
@media (prefers-reduced-motion:reduce){
  .card:hover::after{ animation:none }
}

/* nostot kiertävät saman palettikierron kuin kortit */
.pill{ background:color-mix(in srgb, var(--page-ink) 8%, transparent);
  border-color:color-mix(in srgb, var(--page-ink) 16%, transparent) }
.pills>.pill:nth-child(3n+1){ --card-fill:var(--sky);    --card-fg:var(--plum) }
.pills>.pill:nth-child(3n+2){ --card-fill:var(--sun);    --card-fg:var(--plum) }
.pills>.pill:nth-child(3n+3){ --card-fill:var(--tomato); --card-fg:var(--cream) }

/* ================================ TYÖKORTIN VIERITYS
   Kehys on matalampi kuin kuva, ja hoverissa kuvaa vieritetään läpi
   kuin selaisi sivustoa.                                              */
.work__media{ aspect-ratio:4/3 }
.work__media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top; display:block;
}
.work__media img{
  position:absolute; top:0; left:0; width:100%; height:auto; object-fit:unset;
  /* Paluu nopeasti: hitaalla siirtymällä kuva ryömi takaisin 6-11 s ja
     esikatselu oli pitkään keskellä sivua — etusivua ei nähnyt. */
  transition:transform .55s cubic-bezier(.25,0,.2,1);
  will-change:transform;
}
.work:hover .work__media img,
.work:focus-within .work__media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top; display:block;
}
.work__media img{
  transform:translateY(var(--travel,-60%));
  /* Vieritys alkaa vasta pienen viiveen jälkeen, ettei kortin yli
     kulkeva osoitin käynnistä sitä. */
  transition:transform var(--travel-time,6s) cubic-bezier(.33,0,.25,1) .28s;
}
.work__media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 -34px 34px -30px rgba(89,33,53,.16);
}
.work__hint{
  position:absolute; z-index:3; right:.7rem; top:.7rem;
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.14em;
  background:var(--page-bg); color:var(--page-ink);
  padding:.42em .8em .32em; border-radius:var(--r-pill);
  opacity:0; transform:translateY(-4px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.work:hover .work__hint{ opacity:.92; transform:translateY(0) }
@media (hover:none){ .work__hint{ display:none } }

/* ================================ KELTAINEN HINTALOGIIKKA-OSIO */
.factors{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5.5rem); align-items:start;
}
@media (max-width:900px){ .factors{ grid-template-columns:1fr } }
.factors__intro .d2{ max-width:14ch; margin-bottom:1.4rem }
.factors__intro .lead{ max-width:42ch }
.factors__list{
  list-style:none; margin:0; padding:0; counter-reset:f;
  border-top:1px solid var(--line);
}
.factor{
  counter-increment:f; position:relative;
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:0 1.2rem;
  padding:clamp(1.3rem,2.4vw,1.9rem) 0; border-bottom:1px solid var(--line);
}
.factor::before{
  content:"0" counter(f); grid-row:1/3;
  font-family:var(--font-script); font-size:1.5rem; line-height:1;
  color:var(--page-accent);
}
.factor h3{ font-size:clamp(1.15rem,1.7vw,1.5rem); margin:0 0 .4rem }
.factor p{ margin:0; opacity:.85; font-size:.98rem }

/* etusivun sloganin maski: käsialarivin alapidennykset tarvitsevat tilaa */
.hero__claim .ln{
  padding:.08em .28em .34em;
  margin:-.06em -.28em -.3em;
}
.hero__claim .ln:last-child{ margin-bottom:-.24em }

/* =============================== APULUOKAT
   Nämä korvaavat inline-tyyliattribuutit, jotta CSP:hen ei tarvita
   'unsafe-inline'-lupaa style-src:iin.                                 */
.eyebrow--center{ justify-content:center }
.stack--lg{ --s:1.6rem }
.stack--md{ --s:1.5rem }
.mt-lg{ margin-top:2.2rem }
.m0{ margin:0 }
.note{ margin-top:2rem; max-width:60ch; opacity:.72 }
.note--tight{ margin-top:1.8rem; opacity:.7 }
.mb-section{ margin-bottom:clamp(1rem,1.7vw,1.6rem) }
.legend{ letter-spacing:.18em; opacity:.78; margin-bottom:.8rem }
.fieldset--bare{ border:0; padding:0; margin:0 }
.page--center{ min-height:100svh; display:grid; place-items:center; text-align:center }
.page--center main{ padding-block:6rem }
.nf-lead{ margin:1.4rem auto 2.4rem }
.nf-script{ font-size:clamp(1.4rem,4vw,2.6rem) }

/* Sundae kirjoittaa kirjaimet kiinni toisiinsa. Pieni positiivinen
   välistys avaa sanat ilman että käsialan luonne katoaa. */
.hero__title,.pricetag,.case__quote,.footer__tag,.menu__tag,
.step__n,.member__role,.price__badge,.extra__p,.case__ph b{
  letter-spacing:.012em;
}
.hero__title{ letter-spacing:.02em }

/* ====================================== ALASIVUJEN HERO
   Aiemmin otsikko istui vasemmassa alanurkassa ja oikea puoli jäi
   tyhjäksi, mikä näytti keskeneräiseltä. Nyt keskitetty ja tiiviimpi. */
.hero:not(.hero--home){
  min-height:0;
  align-items:center;
  text-align:center;
  padding-block:calc(var(--header-h) + clamp(4rem,10vh,8rem))
               clamp(3rem,7vh,6rem);
}
.hero:not(.hero--home) .hero__grid{
  justify-items:center; gap:clamp(1rem,1.8vw,1.6rem);
}
.hero:not(.hero--home) .eyebrow{ justify-content:center; margin-bottom:0 }
.hero:not(.hero--home) .hero__title{
  /* Ei ch-rajausta: rivitys tulee merkkauksesta, ja 15ch pakotti
     pisimmän rivin rivittymään toiseksi visuaaliseksi riviksi. */
  margin-inline:auto; max-width:none;
  font-size:clamp(2.2rem,5.4vw,5.6rem);
}
.hero:not(.hero--home) .hero__bottom{
  grid-template-columns:1fr; justify-items:center; margin-top:.4rem;
}
.hero:not(.hero--home) .lead{
  margin-inline:auto; text-align:center; max-width:54ch;
}
/* hiusviiva sulkee sommitelman, ettei alle jää irrallista tyhjää */
.hero:not(.hero--home)::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100% - var(--gut)*2, var(--shell)); height:1px; background:var(--line);
}
@media (max-width:700px){
  .hero:not(.hero--home) .hero__title{ font-size:clamp(2rem,9vw,3.2rem) }
}

/* Hero-lintu: iso, rajattu, kursoria seuraava.

   Vain testisivun /lintu-testi.html käytössä — etusivuun ei kosketa.
   Kaksi säädintä riittää asemointiin:

     --lintu-koko  linnun leveys suhteessa ikkunaan
     --lintu-alle  kuinka paljon jalat jäävät alareunan alle

   Alle-arvo ei ole vain rajaus: se on myös pään ilmatila. Kääntyessään
   ja kurottaessaan pää nousee noin 90 yksikköä viewBoxin yläreunan yli,
   eli 13,5 % linnun korkeudesta. Jos lintu istuu liian ylhäällä, pää
   leikkaantuu — mitattu 1280x820:ssä, jossa 16vh riitti tasan eikä
   yhtään enempää.

   Lintu piirretään reunusversiona: kermanvärinen reunus, luumunvärinen
   runko ja kermanvärinen silmäsirppi. Reunus ja runko vääntyvät samalla
   muunnoksella, joten reunus pysyy rungon ympärillä. */

.lintuhero{
  position:relative;
  min-height:100dvh;
  overflow:hidden;                 /* tästä syntyy rajaus alareunassa */
  background:var(--tomato);
  color:var(--cream);
  isolation:isolate;
}

.lintu{
  position:absolute;
  left:var(--lintu-x, 29%);
  bottom:calc(-1 * var(--lintu-alle, 0vh));
  translate:-50% 0;
  width:var(--lintu-koko, 46vw);
  height:auto;
  display:block;
  overflow:visible;                /* pää saa nousta viewBoxin ulkopuolelle */
  pointer-events:none;
}

/* Reunus on rungon ääriviiva paksuna viivana, ei oma muotonsa. Viiva on
   keskitetty polulle, joten näkyvä kaista on puolet paksuudesta. Runko
   täytetään sen päälle, jolloin sisäpuoli jää piiloon. */
.lintu__reunus{
  fill:none;
  stroke:var(--cream);
  stroke-width:36;
  /* Pyöristetty liitos teki pyrstön kärkeen pallon ja tylsytti varpaat.
     Alkuperäisessä logossa ne ovat teräviä, joten liitos on kulmikas.

     Miter-raja 2,6 on mitattu, ei arvattu. Terävimmät liitokset ovat
     pyrstön kärki 41,6° (vaatisi 2,8) ja räpylän lovi 43,3° (2,7);
     seuraavaksi terävin on 60° (2,0). Rajan 8 kanssa pyrstön kärkeen
     kasvoi 50 yksikön piikki, jota logossa ei ole — logon reunus on
     siinä tylppä. 2,6 katkaisee kaksi terävintä ja jättää loput
     kulmikkaiksi, eli varpaat pysyvät terävinä. */
  stroke-linejoin:miter;
  stroke-miterlimit:2.6;
}
.lintu__runko { fill:var(--plum) }
/* Silmä on alkuperäisessä piirroksessa reikä rungossa, jolloin sen läpi
   näkyy reunus. Omana polkunaan se saa siis reunuksen värin. */
.lintu__silma { fill:var(--cream) }

/* Kapealla näytöllä lintu suurenee suhteessa ja siirtyy hieman oikealle,
   jotta nokka ja silmä pysyvät näkyvissä pystykuvassa. */
@media (max-width:860px){
  .lintu{
    --lintu-koko: 112vw;
    --lintu-x: 32%;
    --lintu-alle: 20vh;
  }
}

/* Sanamerkki linnun oikealle puolelle. Leikattu pystylogosta ilman sen
   päällä seisovaa lintua — lintuja on näkymässä vain yksi, ja se on se
   iso elävä. Lintu ulottuu noin 66 %:iin leveydestä, joten sanamerkki
   mahtuu oikeaan laitaan koskematta siihen. */
.sana{
  position:absolute;
  right:var(--sana-oikea, 15vw);
  top:var(--sana-ylin, 50%);
  translate:0 -50%;
  width:var(--sana-koko, 28vw);
  height:auto;
  display:block;
  fill:var(--cream);
  z-index:1;
  pointer-events:none;
}

@media (max-width:860px){
  .sana{
    --sana-koko: 56vw;
    --sana-oikea: 8vw;
    --sana-ylin: 30%;
  }
}

/* Testisivun oma kevyt kehys: otsikko ja paluulinkki linnun päällä. */
.lintuhero__ui{
  position:relative; z-index:2;
  padding:clamp(1.4rem, 4vh, 3rem) var(--gut);
  display:flex; gap:1.2rem; align-items:baseline; flex-wrap:wrap;
}
.lintuhero__ui p{ margin:0; font-size:.86rem; opacity:.82 }
.lintuhero__ui a{ color:var(--cream); font-size:.86rem }

/* ---------------------------------------------------------- säätimet
   Vain testisivulla. Paneeli on kiinteä oikeassa laidassa, jotta lintu
   ja sanamerkki näkyvät sen vierellä koko ajan. */
.saadin{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:9;
  width:min(360px, 92vw);
  display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--plum) 94%, black);
  color:var(--cream);
  font-family:var(--font-body); font-size:.8rem;
  box-shadow:-18px 0 44px -28px rgba(0,0,0,.7);
  transition:translate 260ms var(--ease-out);
}
.saadin--kiinni{ translate:calc(100% - 2.9rem) 0 }

.saadin__nappi{
  appearance:none; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--tomato); color:var(--cream);
  font-family:var(--font-body); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.7rem 1rem; text-align:start;
}
.saadin__nappi:focus-visible{ outline:3px solid var(--cream); outline-offset:-5px }

.saadin__sisus{ overflow-y:auto; padding:1rem 1.1rem 1.4rem; display:grid; gap:1.1rem }
.saadin__ryhma{ display:grid; gap:.55rem }
.saadin__ryhma + .saadin__ryhma{
  border-top:1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  padding-top:1rem;
}

.saadin__rivi{
  display:grid; grid-template-columns:1fr auto; gap:.1rem .6rem; align-items:baseline;
}
.saadin__nimi{ opacity:.9 }
.saadin__arvo{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.75rem; color:var(--sun); font-variant-numeric:tabular-nums;
}
.saadin__rivi input[type=range]{
  grid-column:1/-1; width:100%; accent-color:var(--sun); margin:.15rem 0 0;
}
.saadin__rivi input:focus-visible{ outline:2px solid var(--sun); outline-offset:2px }

.saadin__jalka{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.saadin__btn{
  appearance:none; cursor:pointer; font-family:var(--font-body);
  font-size:.75rem; font-weight:700; padding:.4rem .75rem;
  border:1px solid var(--cream); border-radius:100rem;
  background:transparent; color:var(--cream);
}
.saadin__btn:hover{ background:var(--cream); color:var(--plum) }
.saadin__btn:focus-visible{ outline:3px solid var(--sun); outline-offset:2px }
.saadin__vihje{ font-size:.72rem; color:var(--sun) }

.saadin__tuloste{
  margin:0; white-space:pre; overflow-x:auto;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.68rem; line-height:1.65;
  background:rgba(0,0,0,.28); padding:.7rem .8rem; border-radius:.2rem;
  max-height:34vh; overflow-y:auto;
}

/* Paneeli vie tilaa oikealta, joten sanamerkki siirtyy sen verran. */
@media (min-width:861px){
  .lintuhero:has(.saadin:not(.saadin--kiinni)) .sana{ --sana-oikea:26vw }
}

.saadin__raja{
  margin:0; padding:.6rem .75rem; font-size:.74rem; line-height:1.5;
  border:1px solid var(--sun); border-radius:.2rem;
  background:color-mix(in srgb, var(--sun) 14%, transparent);
  color:var(--cream);
}
.saadin__raja b{ color:var(--sun) }

/* ------------------------------------------------- etusivun hero
   Sama lintu ja sanamerkki kuin testisivulla, mutta hero-osion sisällä.
   Tausta ja korkeus tulevat herolta, joten ne nollataan täältä. */
.lintuhero--hero{
  position:absolute; inset:0;
  min-height:0;
  background:none;
  overflow:visible;          /* pää saa nousta, hero hoitaa rajauksen */
  pointer-events:none;
  z-index:1;
}
/* Telakoinnin aikana lintu ja sanamerkki kutistuvat valikkoon ja
   luovuttavat paikkansa oikealle logolle. GSAP hoitaa liikkeen; tässä
   varmistetaan vain että ne skaalautuvat keskipisteestään. */
.lintuhero--hero .lintu,
.lintuhero--hero .sana{ transform-origin:50% 50% }

/* Etusivulla logo tulee näkyviin vasta telakoinnin lopussa, kun lintu
   ja sanamerkki ovat jo kutistuneet sen kokoisiksi. */
body.is-home .brand{ opacity:0 }

/* Kapealla naytolla etusivun hero pinotaan: sanamerkki aukon ylareunaan
   ja lintu sen alle, molemmat keskitettyina. Pystysijainnit ja linnun
   leveysraja tulevat app.js:sta, koska ne riippuvat logoaukon mitasta. */
@media (max-width:860px){
  .lintuhero--hero .lintu{ --lintu-x:50% }
  .lintuhero--hero .sana{ --sana-koko:58vw; --sana-oikea:21vw }
}

/* Sivuston globaali svg{max-width:100%} kutistaisi linnun hero-kääreen
   levyiseksi. Lintu asemoidaan ruudun mitoilla, joten raja poistetaan. */
.lintuhero .lintu,
.lintuhero .sana{ max-width:none }