/* =========================================================================
   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:"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:"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,
.field label,.chip span,.cmp thead th,.price__from,.member__role,
.footer h2,.footer__bot,.hero__scroll,.form__note,.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) }
.btn__t{ display:block; overflow:hidden }
.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;
  transform:translateY(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;
  -webkit-mask-image:linear-gradient(#000 62%,transparent);
  mask-image:linear-gradient(#000 62%,transparent);
}
.header.is-stuck::after{ opacity:.97 }
.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%);
}

.navlink{
  position:relative; font-size:.94rem; letter-spacing:-.006em; 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 }


/* keskilogo */
.brand{ display:block; 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:.34em .8em .3em; font-size:.78rem; letter-spacing:.02em; border-radius:var(--r-pill);
  transition:color .4s var(--ease-out);
}
.lang a[aria-current="true"]{ color:var(--page-bg) }

.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) }
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; margin:1.4rem 0 0; max-width:14ch;
}
.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);
  border:1px solid color-mix(in srgb, var(--page-ink) 16%, transparent);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:.85rem; overflow:hidden; 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::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--page-ink);
  transform:translate3d(0,101%,0); transition:transform .6s var(--ease-out);
}
.card:hover{ color:var(--page-bg) }
.card:hover::before{ transform:translate3d(0,0,0) }
.card:hover .card h3{ font-size:clamp(1.2rem,1.7vw,1.6rem) }
.card p{ font-size:.97rem; opacity:.88; line-height:1.6 }

/* raidallinen luettelo */
.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 label{
  display:block; font-size:.76rem; letter-spacing:.18em; margin-bottom:.55rem; opacity:.78;
}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.7em 0; border-radius:0; outline:none; font-size:1.02rem;
  transition:border-color .35s var(--ease-out);
}
.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% - 12px) 55%, calc(100% - 6px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2rem }
.field select option{ color:var(--plum); background:var(--cream) }
.field__u{
  position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--page-accent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease-out);
}
.field:focus-within .field__u{ transform:scaleX(1) }
.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:.5em 1.15em .38em; font-size:.85rem; letter-spacing:.08em; 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:.82rem; opacity:.7; max-width:52ch }
.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;
  padding:.2em 0 .18em; margin:-.2em 0 -.18em;
}
.w>span{ display:inline-block; will-change:transform }

/* 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{ 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) }
.grid>.card:nth-child(4n+1){ --card-fill:var(--sky);    --card-fg:var(--plum) }
.grid>.card:nth-child(4n+2){ --card-fill:var(--sun);    --card-fg:var(--plum) }
.grid>.card:nth-child(4n+3){ --card-fill:var(--blush);  --card-fg:var(--plum) }
.grid>.card:nth-child(4n+4){ --card-fill:var(--tomato); --card-fg:var(--cream) }
.card::before{ background:var(--card-fill) }
.card:hover{ color:var(--card-fg); border-color:var(--card-fill) }

/* --- 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 yhdelle riville. Koko vw:nä ja nowrap yhdessä
   pitävät suhteen vakiona: jos rivi mahtuu yhdellä leveydellä, se
   mahtuu kaikilla. Mobiilissa rivittyy normaalisti. */
@media (min-width:1000px){
  .hero__slogan{
    /* width:100% on olennainen: justify-items:center kutistaa
       elementin sisältönsä levyiseksi, ja nowrap teki tekstistä
       laatikkoaan leveämmän -> ylivuoto ja vaakavieritys. */
    width:100%; max-width:none; white-space:nowrap;
    font-size:min(4.5vw, 5rem);
  }
}


.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);
}
/* kortin täyttö hillitymmäksi: reunaviiva seuraa täyttöä */
.card:hover{ border-color:transparent }

/* ================================================== 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:.8rem; letter-spacing:.12em; opacity:.85;
}
.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:18ch;
  font-size:clamp(2.1rem,4.6vw,4.4rem);
  line-height:1.02;
}
/* 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. */
  font-size:1.55em; line-height:1.1;
  /* 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 }

/* 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. */
.hero__title .sana{ display:inline-block; will-change:transform }
.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);
}
.card::before,.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);
}
.card:hover::before,.pill:hover::before,
.card:focus-within::before,.pill:focus-within::before{
  clip-path:polygon(0 -12%, 100% 0, 100% 100%, 0 100%);
}
.card:hover,.pill:hover{
  color:var(--card-fg,var(--page-bg));
  border-color:transparent;
  transform:translateY(-5px);
}
.card h3,.pill h3{ transition:transform .55s var(--ease-out) }
.card:hover h3,.pill:hover h3{ transform:translateX(7px) }
.card p,.pill p{ transition:opacity .4s var(--ease-out) }
.card:hover p,.pill:hover p{ opacity:1 }

/* 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) }
}