/* ===========================================================================
   Let The Real You Shine — sivuston tyylit
   Käännetty design canvas -exportin inline-tyyleistä. Arvot (clamp-asteikot,
   värit, välistykset) on säilytetty sellaisenaan, jotta ulkoasu vastaa designia.
   =========================================================================== */

/* --- Kirjasimet ----------------------------------------------------------
   Omalta palvelimelta, ei Google Fontsista. Ulkoinen lataus olisi välittänyt
   kävijän IP-osoitteen Googlelle Yhdysvaltoihin joka sivulatauksella, mikä on
   tietosuojan kannalta tarpeeton siirto — ja ainoa ulkopuolinen yhteys tällä
   sivustolla. Molemmat kirjasimet ovat SIL Open Font License -lisenssillä,
   joten jakelu omalta palvelimelta on sallittua.

   font-display: swap säilyttää saman käyttäytymisen kuin Googlen versio:
   teksti näkyy heti varakirjasimella ja vaihtuu kun oma kirjasin latautuu. */
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/alex-brush-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/alex-brush-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/barlow-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://nrgfactory.fi/let-the-real-you-shine/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokenit ------------------------------------------------------------- */
:root {
  /* Värit — vaaleanpunainen paletti (aiempi liljakas luumu) */
  --ink:          #2E0F1F;  /* tumma viini — otsikot, tumma tausta */
  --ink-body:     #412A39;  /* leipäteksti vaalealla */
  --ink-muted:    #52384A;  /* pienempi leipäteksti */
  --berry:        #3E1629;  /* footerin tausta */
  --berry-deep:   #2A0C18;
  --berry-mid:    #4C1B33;
  --berry-rich:   #61082b;  /* kirkkaampi marja — headeri, video- ja footer-osiot */
  --berry-rich-deep: #4a0721;  /* syvempi sävy gradientteihin */
  --pink:         #A92870;  /* korostus, kuvatekstit */
  --pink-light:   #C25A94;  /* kevyempi vaaleanpunainen — kuvatekstit vaalealla */
  --pink-glow:    169, 40, 112;  /* radial-gradient-hehku, käytetään rgba():ssa */
  --gold:         #D6A45B;
  --gold-light:   #F1D6A7;
  --gold-frame:   1.5px solid rgba(214, 164, 91, 0.6);  /* kultainen kehys sisältökuvien ympärille */
  --cream:        #FBF2F8;  /* sivun perustausta — vaaleanpunainen */
  --cream-warm:   #F6E7F2;  /* vaihtoehtoinen vaalea osio */

  /* Typografia */
  --font-display: 'Avenir Next Condensed', 'Barlow Condensed', sans-serif;
  --font-body: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro',
               'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-script: 'Alex Brush', cursive;

  /* Mitat */
  --gutter: clamp(20px, 5vw, 48px);
  --wide: 1340px;

  /* Liike */
  --ease: cubic-bezier(.22, .7, .25, 1);
  /* Vahva ease-out: liike lähtee heti ja laskeutuu pitkällä jarrutuksella.
     Sisään- ja ulostuloihin, joissa vasteen pitää tuntua välittömältä. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Perusta ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Selaimen oma pehmennys jää päälle varamekanismiksi: jos JS ei jostain
   syystä siepaa klikkausta, vieritys pehmenee silti eikä hyppää. site.js
   kytkee tämän pois vain oman animaationsa ajaksi, koska muuten selain
   pehmentäisi myös animaation jokaisen scrollTo-askeleen. */
html { scroll-behavior: smooth; }

/* Ylätunniste on position:fixed, joten ankkurilinkki veisi osion ruudun
   ylälaitaan tunnisteen alle ja otsikko jäisi piiloon. Varaus on hieman
   tunnisteen korkeutta pienempi (tunniste 81–91 px): osion yläreuna saa
   mennä hivenen sen alle, koska osion oma yläpehmuste (44 px mobiilissa,
   86 px työpöydällä) nostaa otsikon näkyviin. Näin otsikko ei jää liian
   kauas tunnisteesta. */
section[id], main[id] { scroll-margin-top: 68px; }

/* Video-, kokemus- ja yhteysosioissa yläpehmuste on suurempi kuin
   tarinaosiossa, joten sama varaus jättäisi otsikon kauemmas tunnisteesta.
   Pienempi varaus tasoittaa välin samaksi kaikissa ankkureissa. Kohdistus
   luokkiin eikä id:hin, jotta sääntö kattaa molemmat kieliversiot.

   Arvot on mitattu laskeutumisesta, ei arvattu: mobiilissa tunniste on
   81 px ja otsikko jää 56 px osion yläreunasta, työpöydällä 91 px ja
   108 px. Näillä varauksilla otsikko laskeutuu 31 px (mobiili) ja 61 px
   (työpöytä) tunnisteen alapuolelle kaikissa ankkureissa. Ne ovat samat
   välit, jotka tarinaosiolla on aina ollut: yleinen varaus oli oikein,
   vain nämä neljä osiota olivat väärässä kohdassa. */
.video-section[id], .testimonials[id], .contact[id], .faq[id] { scroll-margin-top: 56px; }

@media (min-width: 860px) {
  .video-section[id], .testimonials[id], .contact[id], .faq[id] { scroll-margin-top: 44px; }
}

html, body { margin: 0; padding: 0; background: var(--cream); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--gold); text-decoration: none; transition: color 300ms ease; }
a:hover { color: var(--gold-light); }

input, textarea, select, button { font-family: inherit; }

::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3, p { margin: 0; }

/* Selaimen oletus figurelle on `margin: 1em 40px` — se kavensi kuvasarakkeita
   ja siirsi niitä sivusuunnassa. Marginaalit tulevat aina omista säännöistä. */
figure { margin: 0; }

/* Näppäimistökohdistus näkyviin — hiirikäyttöä ei häiritä. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ohita navigaatio -linkki: näkyy vain kun se saa kohdistuksen. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 10px;
  transition: top 200ms ease;
}
.skip-link:focus { top: 12px; color: var(--ink); }


.page-wrap { width: 100%; overflow-x: hidden; }

/* --- Sisääntuloanimaatiot ------------------------------------------------ */
/* Vain kun JS on käytössä: ilman sitä sisältö on heti näkyvissä. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Mobiilissa vieritys on nopeampaa kuin työpöydällä, joten pitkä siirtymä
   jättää sisällön puolinäkyväksi juuri silloin kun sitä luetaan. Hieman
   lyhyempi kesto saa sen asettumaan paikalleen aiemmin. Matkaa ei kannata
   pienentää paljoa: liike on ainoa asia, josta animaation ylipäätään
   huomaa, ja liian pieni siirtymä katoaa kokonaan. */
@media (max-width: 859px) {
  .js .reveal {
    transform: translateY(24px);
    transition: opacity 640ms var(--ease), transform 640ms var(--ease);
  }
}

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

/* --- Ylätunniste --------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 700ms ease, border-color 700ms ease;
}
.site-header.is-scrolled {
  background: linear-gradient(180deg, var(--berry-rich) 0%, var(--berry-rich-deep) 100%);
  border-bottom-color: rgba(214, 164, 91, 0.20);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: 0 auto;
  padding: clamp(16px, 2vw, 26px) var(--gutter);
}

.site-header__logo { flex: 0 0 auto; display: block; }
.site-header__logo img { height: clamp(26px, 2.8vw, 38px); width: auto; }
@media (max-width: 359px) {
  .site-header__logo img { height: 21px; }
}

.site-nav {
  display: flex;
  align-items: center;
  /* Viisi kohtaa mahtuu kapeammallakin työpöydällä, kun väli ja koko on
     hillitympi. Navigaatio ei ole sivun pääasia, joten se saa olla
     hienovarainen. */
  gap: clamp(16px, 2.4vw, 38px);
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: 0.01em;
}

.lang {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  /* Sama asteikko kuin .site-nav, jotta kielivalinta on työpöydällä
     samankokoinen kuin navigaatiolinkit. Mobiilipuolella on oma
     ylikirjoitus (.site-header__mobile .lang). */
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: 0.04em;
  color: var(--gold);
}
.lang__sep { opacity: 0.6; }
.lang__current { color: var(--gold-light); }

/* Mobiilipuoli: hampurilainen + pudotusvalikko */
.site-header__mobile { margin-left: auto; display: none; gap: 14px; align-items: center; }
/* Aavistuksen pienempi kuin mobiilivalikon linkit (19px): kielivalinta on
   tunnisteessa jatkuvasti näkyvissä, joten se saa jäädä hillitymmäksi kuin
   valikon linkit, jotka näkyvät vain avattuna. */
.site-header__mobile .lang { font-size: 17px; }
/* Kosketuskohde 45 px korkeaksi ilman että mikään siirtyy: pehmuste
   kasvattaa klikkausaluetta ja yhtä suuri negatiivinen marginaali
   kumoaa sen vaikutuksen asetteluun. Pelkkä teksti on 23 px korkea,
   mikä jää alle 44 px:n vähimmäismitan. */
.site-header__mobile .lang a {
  padding-block: 11px;
  margin-block: -11px;
}

.nav-toggle {
  /* Ei kehystä. Koko pysyy 48 pikselissä, koska se on kosketuskohteen
     vähimmäismitta — vain reunaviiva poistuu, ei klikkausalue. */
  width: 48px; height: 48px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--gold);
  transition: transform 300ms var(--ease), opacity 200ms ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  /* Hento läpikuultavuus: alla oleva sisältö aavistuksen läpi, sumennus
     pitää tekstin luettavana. Sumennuksen tukematta jäävissä selaimissa
     0.94 alfa riittää yksinään. */
  background: linear-gradient(180deg, rgba(46, 15, 31, 0.94) 0%, rgba(62, 22, 41, 0.94) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(214, 164, 91, 0.2);
  padding: 14px var(--gutter) 26px;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
}
.mobile-nav a {
  padding: 14px 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(214, 164, 91, 0.15);
}
.mobile-nav a:last-child { border-bottom: 0; }

@media (max-width: 859px) {
  .site-nav, .site-header__bar > .lang { display: none; }
  .site-header__mobile { display: flex; }

  /* Valikko rullaa auki tunnisteen alta clip-pathilla. Absoluuttinen
     asemointi on tässä välttämätön: normaalissa virtauksessa suljettukin
     valikko kasvattaisi kiinteän tunnisteen korkeutta. clip-path ja opacity
     eivät kosketa asettelua lainkaan, joten animaatio pyörii näytönohjaimella.

     Perustila on sulkeutuminen ja .is-open on avautuminen, joten sulkeminen
     on tarkoituksella nopeampi: käyttäjä on jo tehnyt päätöksensä. */
  .mobile-nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: clip-path 180ms var(--ease-out),
                opacity 140ms var(--ease-out),
                transform 180ms var(--ease-out);
  }
  .mobile-nav.is-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: clip-path 260ms var(--ease-out),
                opacity 180ms var(--ease-out),
                transform 260ms var(--ease-out);
  }

  /* Linkit porrastetaan sisään. Viive on lyhyt: pidempi tekisi valikosta
     hitaan. Sulkeutuessa porrastusta ei ole, koska poistuminen saa olla
     napakka. */
  .mobile-nav a {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .mobile-nav.is-open a { opacity: 1; transform: none; }
  .mobile-nav.is-open a:nth-child(1) { transition-delay: 40ms; }
  .mobile-nav.is-open a:nth-child(2) { transition-delay: 75ms; }
  .mobile-nav.is-open a:nth-child(3) { transition-delay: 110ms; }
  .mobile-nav.is-open a:nth-child(4) { transition-delay: 145ms; }
  .mobile-nav.is-open a:nth-child(5) { transition-delay: 180ms; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); }
.hero img { display: block; width: 100%; height: auto; }

.hero__claim {
  position: absolute;
  left: 7.5%;
  top: 22.5%;
  width: 48%;
  min-height: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 6.6vw, 124px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #ebc386;
  filter: drop-shadow(0 4px 18px rgba(18, 8, 20, 0.58));
  pointer-events: none;
  overflow: visible;
}
.hero__claim span {
  display: inline-block;
  overflow: visible;
  padding: 0.24em 0 0.08em;
  line-height: 1;
  background: linear-gradient(180deg, #ebc386 0%, #c99e59 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(46,15,31,0) 0%, rgba(46,15,31,0.85) 100%);
  pointer-events: none;
}

/* Yläreunan varjo — peili alareunan fade-vaaleannuksesta. Tummentaa heron
   yläosan, jotta kiinteän valikon (transparentti vierittämättömänä) kultainen
   teksti lukeutuu tasaisemmalla tummalla pohjalla. */
.hero__fade--top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(46,15,31,0.85) 0%, rgba(46,15,31,0) 100%);
  pointer-events: none;
}

.hero__cta-row {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(18px, 4vw, 52px);
  display: flex;
  justify-content: center;
}

@media (max-width: 760px) {
  .hero__claim {
    display: flex;
    left: 11.5%;
    top: 18%;
    width: 52%;
    min-height: 38%;
    align-items: center;
    justify-content: center;
    font-size: clamp(26px, 7.2vw, 32px);
    line-height: 1.08;
    filter: drop-shadow(0 3px 12px rgba(18, 8, 20, 0.55));
  }

  .hero__claim span {
    padding: 0.2em 0 0.08em;
    white-space: nowrap;
  }

  .hero__cta-row {
    box-sizing: border-box;
    padding: 0 16px;
  }

  .hero__cta-row .btn-outline {
    width: min(100%, 248px);
    padding: 13px 16px;
    font-size: clamp(11px, 3.4vw, 13px);
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: center;
    white-space: normal;
  }
}

/* --- Painikkeet ---------------------------------------------------------- */
.btn-outline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(214, 164, 91, 0.55);
  border-radius: 10px;
  padding: 14px clamp(20px, 2.4vw, 34px);
  background: rgba(46, 15, 31, 0.35);
  cursor: pointer;
  transition: background 600ms ease, color 600ms ease, border-color 600ms ease;
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* Painalluksen vaste: napin pitää tuntua kuulevan kosketus. Skaala on pieni
   ja nopea, tätä ei ole tarkoitus huomata vaan tuntea. Siirtymä toistetaan
   kokonaisuudessaan, koska transition-lyhenne korvaisi muuten yllä olevat. */
.btn-outline {
  transition: background 600ms ease, color 600ms ease, border-color 600ms ease,
              transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-outline:active { transform: scale(0.97); }
/* video-play keskitetään translateX(-50%):lla (left: 50%), joten painalluksen
   skaalauksen pitää säilyttää se siirto — muuten nappi hyppää vaakasuunnassa. */
.video-play:active { transform: translateX(-50%) scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .btn-outline:active { transform: none; }
  .video-play:active { transform: translateX(-50%); }
}

.btn-solid {
  align-self: flex-start;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 12px;
  padding: 19px clamp(28px, 3vw, 46px);
  min-height: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 20px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 500ms ease;
}
.btn-solid:hover { background: var(--gold-light); }

/* --- Yleiset osiot ------------------------------------------------------- */
.section { padding-left: var(--gutter); padding-right: var(--gutter); }

.statement {
  background: var(--cream);
  /* Ylä- ja alaväli erikseen: designin 170 px molemmin puolin jätti liikaa
     tyhjää sekä heron alle että ennen tarinan aloitusta. */
  padding: clamp(30px, 4.2vw, 64px) var(--gutter) clamp(28px, 4vw, 58px);
  text-align: center;
}
.statement__inner { max-width: 900px; margin: 0 auto; }
.statement h2 {
  /* Käsinkirjoitusfontti renderöityy optisesti selvästi pienempänä kuin
     groteski, joten pistekoko on nostettu ja riviväliä väljennetty —
     Alex Brushin ylä- ja alapidennykset törmäisivät tiiviillä rivivälillä. */
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.16;
  letter-spacing: 0;
  color: var(--pink);
  text-wrap: pretty;
}

/* Tarinan aloitus */
.story-intro {
  background: #ffffff;
  padding: clamp(44px, 5.8vw, 86px) var(--gutter) clamp(26px, 3.2vw, 46px);
}
.story-intro__text { max-width: 720px; margin: 0 auto; text-align: center; }
.story-intro__text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: clamp(10px, 1.3vw, 16px);
}
.story-intro__heart {
  display: block;
  width: clamp(230px, 25vw, 340px);
  height: auto;
  margin: 0 auto clamp(20px, 2.5vw, 32px);
}
.story-intro__text p {
  font-size: clamp(15.5px, 1.35vw, 20px);
  line-height: 1.68;
  color: var(--ink-body);
  margin-bottom: 22px;
}
.story-intro__text p:nth-of-type(2) { margin-bottom: clamp(36px, 4vw, 52px); }
.story-intro__text .lead-out {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0;
}

.figure-wide { max-width: 820px; margin: clamp(32px, 4.6vw, 64px) auto 0; }
.figure-wide img {
  width: 100%;
  border-radius: clamp(20px, 2.6vw, 34px);
  border: var(--gold-frame);
}

.caption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-light);
  margin-top: 16px;
}

/* --- Tarinaosiot (kaksi palstaa) ----------------------------------------- */
.story {
  background: #ffffff;
  padding: 0 var(--gutter) clamp(56px, 7vw, 105px);
}
.story--cream {
  background: var(--cream);
  /* Värikartan sisätila: ylä- ja alaväli samassa skaalassa, jotta teksti ei
     koske kartan yläreunaan. Mobiilin pienemmät arvot ovat mediakyselyssä. */
  padding-top: clamp(52px, 6.5vw, 100px);
  padding-bottom: clamp(52px, 6.5vw, 100px);
}
.story--compact-bottom { padding-bottom: clamp(44px, 6vw, 88px); }
.story--top-space { padding-top: clamp(28px, 3.6vw, 54px); }
.story--tight-bottom { padding-bottom: clamp(60px, 8vw, 110px); }

@media (max-width: 760px) {
  .story--cream {
    padding-top: clamp(28px, 8vw, 42px);
    padding-bottom: clamp(30px, 8vw, 44px);
  }
  .story--choice { padding-top: clamp(42px, 12vw, 60px); }
  .story--compact-bottom { padding-bottom: clamp(28px, 8vw, 42px); }
}

.story__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
.story__inner--reverse { flex-direction: row-reverse; }

.story__text { flex: 1 1 400px; min-width: 280px; max-width: 600px; }
.story__text--narrow { max-width: 580px; }
.story__text--narrowest { flex-basis: 320px; min-width: 270px; max-width: 480px; }

.story__media { flex: 1.15 1 420px; min-width: 280px; max-width: 470px; }
.story__media--wide { flex: 1.7 1 480px; max-width: 520px; }
.story__media--even { flex: 1 1 380px; max-width: 480px; }
.story__media img {
  width: 100%;
  border-radius: clamp(18px, 2.2vw, 28px);
  border: var(--gold-frame);
}
.story__media--wide img { border-radius: clamp(18px, 2.4vw, 30px); }

@media (min-width: 900px) {
  .story__media--lower { margin-top: clamp(36px, 5vw, 72px); }
}

.story__text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.06;
  color: var(--pink);
  margin-bottom: 28px;
}
.story__text p {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.66;
  color: var(--ink-body);
  margin-bottom: 20px;
}
.story__text p:last-child { margin-bottom: 0; }

/* Designin omat poikkeavat väliarvot muutamassa kappaleessa. */
.story__text p.mb-md { margin-bottom: 30px; }
.story__text p.mb-lg { margin-bottom: 34px; }

/* Korostettu loppulause tarinaosiossa */
.pull {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.pull--rule {
  border-top: 1px solid rgba(214, 164, 91, 0.5);
  padding-top: 26px;
  margin-top: 30px;
}
/* Kun korostuslauseen jälkeen jatkuu tekstiä, se tarvitsee oman välinsä. */
.pull--rule:not(:last-child) { margin-bottom: 30px; }
.pull--rule p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 0;
}

/* Luvut-laatikko (100 000 €) */

/* Tarinaosion korostuslauseet ovat keskenään samalla typografisella tasolla. */
.story__text p.line--md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.35vw, 32px);
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 18px;
}
.story__text p.line--lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.35vw, 32px);
  line-height: 1.18;
  /* Kultainen: tämä on osion huipentuma. Luokka on käytössä sivulla vain
     tässä yhdessä kohdassa ("vapautta valita."). */
  color: var(--gold);
}
.story__text p.line--xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.35vw, 32px);
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 0;
}

/* Luettelo pystyviivoilla */
.ticks { display: flex; flex-direction: column; gap: 20px; }
.ticks p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0;
  padding-left: 18px;
  border-left: 1.5px solid var(--gold);
}
.ticks p:nth-child(2) { border-left-color: rgba(214, 164, 91, 0.55); }
.ticks p:nth-child(3) { border-left-color: rgba(169, 128, 172, 0.6); }
.ticks p:nth-child(4) { border-left-color: rgba(169, 128, 172, 0.35); }

/* Kolme kutsua peräkkäin */
.calls { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.calls p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.35vw, 32px);
  line-height: 1.2;
  margin-bottom: 0;
}
.calls p:nth-child(1) { color: var(--ink); }
.calls p:nth-child(2) { color: var(--ink); }
.calls p:nth-child(3) { color: var(--gold); }

/* --- Tummat välijulistukset --------------------------------------------- */
.glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 120%);
  height: 520px;
  background: radial-gradient(ellipse at center,
              rgba(var(--pink-glow), 0.32) 0%,
              rgba(var(--pink-glow), 0) 70%);
  pointer-events: none;
}
.rule {
  width: 120px; height: 1px;
  background: var(--gold);
  margin: clamp(32px, 4vw, 48px) auto 0;
  opacity: 0.8;
}


/* --- Allekirjoitus ------------------------------------------------------- */
.signature {
  background: var(--cream);
  padding: clamp(50px, 7vw, 100px) var(--gutter) clamp(42px, 5.8vw, 82px);
}
.signature__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.signature p {
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.62;
  color: var(--ink-body);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.signature p.signature__name {
  font-family: var(--font-script);
  font-size: clamp(46px, 6.2vw, 78px);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0 !important;
}

/* --- Video --------------------------------------------------------------- */
.video-section {
  position: relative;
  background: linear-gradient(150deg, var(--berry-rich-deep) 0%, var(--berry-rich) 100%);
  padding: clamp(56px, 7.5vw, 110px) var(--gutter);
  overflow: hidden;
}
.video-section .glow {
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 130%);
  height: 600px;
  background: radial-gradient(ellipse at center,
              rgba(var(--pink-glow), 0.30) 0%,
              rgba(var(--pink-glow), 0) 70%);
}
.video-section__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.video-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(29px, 3.6vw, 48px);
  line-height: 1.1;
  color: var(--cream);
  margin: 0 auto 24px;
  max-width: 900px;
  text-wrap: pretty;
}
.video-section__lead {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
  color: rgba(251, 242, 248, 0.72);
  margin: 0 auto clamp(40px, 5vw, 64px);
  max-width: 720px;
}

/* --- Videon kuvaus ------------------------------------------------------
   Sijoitettu alustuksen ja kansikuvan väliin, jolloin viimeinen lause
   ”katso video” johtaa suoraan toistopainikkeeseen. Osio on tumma, joten
   tekstit noudattavat samaa vaaleaa asteikkoa kuin alustus.            */
.video-about {
  max-width: 620px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: left;
}
.video-about p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(251, 242, 248, 0.75);
}
.video-about__lead-in {
  margin-top: 20px;
  color: var(--cream) !important;
  font-weight: 600;
}
.video-about__list {
  margin: 14px 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-about__list li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(251, 242, 248, 0.88);
}
/* Kultainen viiva luettelomerkin tilalle: pyöreä piste tekisi listasta
   raskaan, kun kohtia on kuusi. */
.video-about__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

.video-cover {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  border-radius: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
  border: var(--gold-frame);
  box-shadow: 0 30px 90px rgba(18, 8, 20, 0.55);
  background: var(--ink);
}
.video-cover img { width: 100%; }

.video-play {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vw, 34px);
  transform: translateX(-50%);
  width: clamp(74px, 7vw, 96px);
  height: clamp(74px, 7vw, 96px);
  border-radius: 50%;
  border: 1px solid rgba(214, 164, 91, 0.8);
  background: rgba(46, 15, 31, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: clamp(24px, 2.4vw, 30px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  transition: background 500ms ease, color 500ms ease;
}
.video-play:hover { background: var(--gold); color: var(--ink); }

.video-cta { margin: clamp(30px, 3.5vw, 44px) auto 0; }

.video-frame {
  max-width: 720px;
  margin: 0 auto;
  border-radius: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(214, 164, 91, 0.45);
  box-shadow: 0 30px 90px rgba(18, 8, 20, 0.55);
  background: #000;
}
.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.video-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-top: clamp(22px, 2.5vw, 32px);
}
.link-plain {
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 242, 248, 0.5);
  cursor: pointer;
  transition: color 300ms ease;
}
.link-plain:hover { color: var(--gold); }

/* --- Kokemukset ---------------------------------------------------------- */
.testimonials {
  background: #ffffff;
  padding: clamp(56px, 7.5vw, 110px) var(--gutter);
}
.testimonials__inner { max-width: 984px; margin: 0 auto; }
/* Sama mitoitus kuin Usein kysyttyä -osion alustuksessa, jotta osiot
   lukevat samalla rytmillä. */
.testimonials-lead {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* Keskitetty, koska karuselli on keskitetty sommitelma. */
.testimonials__head {
  max-width: 700px;
  margin: 0 auto clamp(46px, 6vw, 80px);
  text-align: center;
}
.testimonials__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(29px, 3.6vw, 48px);
  line-height: 1.08;
  color: var(--ink);
}

.testimonial img.pos-high { object-position: center 30%; }
.testimonial img.pos-higher { object-position: center 25%; }
.testimonial img.pos-anna { object-position: center 34%; }
.testimonial img.pos-susanna { object-position: center 32%; }

/* --- Yhteydenotto -------------------------------------------------------- */
.contact {
  position: relative;
  background: #ffffff;
  padding: clamp(56px, 7.5vw, 110px) var(--gutter) clamp(44px, 5.5vw, 80px);
  overflow: hidden;
}
.contact .glow {
  display: none;   /* tehty tummalle taustalle, sameuttaisi vaalean */
  top: auto;
  bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 130%);
  height: 620px;
  background: radial-gradient(ellipse at center,
              rgba(var(--pink-glow), 0.28) 0%,
              rgba(var(--pink-glow), 0) 70%);
}
.contact__inner { position: relative; max-width: 820px; margin: 0 auto; }
.contact__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.contact__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 24px;
}
.contact__head p {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 auto;
  max-width: 640px;
}
.contact__head p + p { margin-top: 14px; }

/* Kultainen sydän tekstin perässä samalla rivillä. Mitat em-yksikössä, jotta
   se skaalautuu ympäröivän tekstin mukana missä tahansa sitä käytetään. */
.heart-inline {
  display: inline-block;
  width: 1.75em;
  height: 1.75em;
  vertical-align: -0.5em;
  margin-left: 0.28em;
}

.form { display: flex; flex-direction: column; gap: clamp(34px, 4vw, 52px); }
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.field { display: flex; flex-direction: column; gap: 9px; }
.field__head { display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.field__label-caps {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
}
.field__label { font-size: 16px; line-height: 1.5; color: var(--ink-body); }

/* --- Numeroidut kysymykset --------------------------------------------- */
.q { border: 0; padding: 0; margin: 0; min-width: 0; }
.q__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
}
.q__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--pink);
  opacity: 0.75;
}
.q__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.22;
  color: var(--ink);
}
.q__sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 16px;
  padding-left: calc(13px + 12px);
}
.q__note {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(74, 55, 74, 0.7);
  margin: 0 0 14px;
  padding-left: calc(13px + 12px);
}
.q > textarea { margin-top: 4px; }

/* --- Valintavaihtoehdot ------------------------------------------------- */
.opts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.opts--single { grid-template-columns: 1fr; }
.opts--inline { display: flex; flex-wrap: wrap; }

.opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 17px;
  background: rgba(46, 15, 31, 0.03);
  border: 1px solid rgba(46, 15, 31, 0.14);
  border-radius: 12px;
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease;
}
.opt:hover { background: rgba(46, 15, 31, 0.06); border-color: rgba(169, 40, 112, 0.45); }
.opt:has(input:checked) {
  background: rgba(214, 164, 91, 0.18);
  border-color: var(--gold);
}
.opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Oikea input on paikallaan ruudunlukijaa ja näppäimistöä varten, mutta
   piilotettu — merkki piirretään .opt__box:iin. */
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

.opt__box {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin-top: 1px;
  border: 1px solid rgba(46, 15, 31, 0.28);
  background: rgba(46, 15, 31, 0.05);
  transition: border-color 250ms ease, background 250ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opt input[type='checkbox'] ~ .opt__box { border-radius: 6px; }
.opt input[type='radio'] ~ .opt__box { border-radius: 50%; }

/* Ruksi valintaruutuun */
.opt input[type='checkbox'] ~ .opt__box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px) scale(0.4);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms var(--ease);
}
/* Piste valintanappiin */
.opt input[type='radio'] ~ .opt__box::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0.3);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms var(--ease);
}
.opt input:checked ~ .opt__box { background: var(--gold); border-color: var(--gold); }
.opt input[type='checkbox']:checked ~ .opt__box::after {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.opt input[type='radio']:checked ~ .opt__box::after { opacity: 1; transform: scale(1); }

.opt__text {
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--ink-body);
}
.opt__emoji { margin-right: 9px; }

/* Kohdan 05 ikonit. 96 px:n tiedosto näytetään 26 pikselissä, mikä riittää
   kolminkertaiseen pikselitiheyteen. vertical-align keskittää ikonin
   tekstiriviin, jottei se roiku perusviivalla. */
.opt__icon {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  vertical-align: -11px;
  display: inline-block;
}


.field input,
.field textarea,
.field select,
.q > textarea {
  background: rgba(46, 15, 31, 0.03);
  border: 1px solid rgba(46, 15, 31, 0.14);
  border-radius: 12px;
  padding: 15px 16px;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: background 250ms ease, border-color 250ms ease;
  width: 100%;
}
.field textarea, .q > textarea { resize: vertical; }
.field select option { color: var(--ink); }
.field input:focus,
.field textarea:focus,
.field select:focus,
.q > textarea:focus { background: rgba(214, 164, 91, 0.18); border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder,
.q > textarea::placeholder { color: rgba(74, 55, 74, 0.45); }

/* Hunajapurkki: piilotettu kenttä, jonka vain botit täyttävät. */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}
.form-note a { color: var(--pink); border-bottom: 1px solid rgba(169,40,112,0.4); }

/* Lähetysvirhe. Näkyy vain jos palvelin ei ottanut viestiä vastaan, joten
   sen pitää erottua selvästi mutta ilman että se rikkoo lomakkeen sävyä. */
.form-error:empty { display: none; }
.form-error {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid #b0453f;
  background: rgba(176, 69, 63, 0.06);
  color: #8c332e;
  font-size: 15px;
  line-height: 1.55;
}

.form-thanks {
  text-align: center;
  border: 1px solid rgba(169, 40, 112, 0.35);
  border-radius: 24px;
  padding: clamp(40px, 6vw, 72px);
  background: var(--cream);
}
.form-thanks p.form-thanks__title {
  font-family: var(--font-script);
  font-size: clamp(40px, 4.5vw, 56px);
  color: var(--gold);
  margin-bottom: 18px;
}
.form-thanks p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-body);
}

[hidden] { display: none !important; }


/* --- Kokemukset: karuselli ------------------------------------------------
   Rata liikkuu transformilla, ei vasemmalla reunuksella: transform ei kosketa
   asettelua ja pyörii näytönohjaimella. Siirtymä eikä keyframe, jotta nopeat
   peräkkäiset klikkaukset jatkavat nykyisestä kohdasta eivätkä ala alusta.

   Kuvien rajaus tulee pos-*-luokista, jotka on säädetty kullekin kuvalle
   erikseen. Ympyrässä ne toimivat samoin kuin suorakaiteessa.              */
.quotes {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  --photo: clamp(150px, 38vw, 232px);
}

.quotes__viewport {
  overflow: hidden;
  /* pan-y kertoo selaimelle, että pystysuora ele on sivun vieritystä ja
     vaakasuora kuuluu tälle elementille. Ilman sitä selain tulkitsee vedon
     omakseen ja lähettää pointercancelin kesken eleen, jolloin pyyhkäisy
     katkeaa. Tämä on koko pyyhkäisyn tärkein rivi. */
  touch-action: pan-y;

  /* Korkeus seuraa aktiivista diaa, koska kokemukset ovat eri mittaisia.
     Ilman tätä lyhyen dian alle jäisi pisimmän dian verran tyhjää. */
  transition: height 420ms var(--ease-out);
}

.quotes.is-dragging .quotes__track { will-change: transform; }

.quotes.is-dragging .quotes__slide {
  user-select: none;
  -webkit-user-select: none;
}

.quotes__track {
  display: flex;
  /* Ilman tätä flex venyttää kaikki diat korkeimman mittaisiksi, jolloin
     jokainen raportoi saman korkeuden eikä viewport osaa kutistua. */
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Vahva ease-out: liike lähtee heti, jolloin painallus tuntuu
     rekisteröityneen, ja laskeutuu pehmeästi. */
  transition: transform 420ms var(--ease-out);
}
.quotes__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(4px, 3vw, 28px);
}

.quotes__photo {
  width: var(--photo);
  height: var(--photo);
  border-radius: 50%;
  object-fit: cover;
  border: var(--gold-frame);
  flex: 0 0 auto;
}

.quotes__body {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 52ch;
}
.quotes__body p {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
  color: var(--ink-body);
}
.quotes__body p + p { margin-top: 14px; }
.quotes__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 28px) !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  margin-bottom: 6px;
}

/* Nimi heti kuvan alla, viiva sen alapuolella erottamassa sanoista. */
/* Paikkakunta kevyempänä kuin nimi: sama rivi, alisteinen paino. */
.quotes__place {
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.quotes__name {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-bottom: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid rgba(46, 15, 31, 0.16);
  width: min(320px, 78%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* Nuolet kuvan pystykeskikohdalle, tekstipalstan ulkopuolelle. */
.quotes__arrow {
  position: absolute;
  top: calc(var(--photo) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46, 15, 31, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  cursor: pointer;
  transition: background 300ms ease, border-color 300ms ease,
              transform 140ms var(--ease-out);
}
.quotes__arrow svg { width: 19px; height: 19px; display: block; }
.quotes__arrow--prev { left: 0; }
.quotes__arrow--next { right: 0; }
.quotes__arrow--next svg { transform: rotate(180deg); }
/* Painallus kutistaa napin: vasteen pitää tuntua välittömältä. */
.quotes__arrow:active { transform: translateY(-50%) scale(0.94); }

/* Päissä nuoli himmenee. Se jää paikalleen eikä katoa, jotta sommitelma
   pysyy vakaana ja käyttäjä näkee mistä suunnasta tie loppuu. */
.quotes__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.quotes__arrow:disabled:active { transform: translateY(-50%); }

@media (hover: hover) and (pointer: fine) {
  .quotes__arrow:not(:disabled):hover { background: #fff; border-color: rgba(46, 15, 31, 0.38); }
}

.quotes__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(30px, 4vw, 46px);
}
.quotes__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(46, 15, 31, 0.22);
  cursor: pointer;
  transition: width 300ms var(--ease-out), background 300ms ease;
}
.quotes__dot[aria-current="true"] { width: 26px; background: var(--gold); }
/* Kosketuskohde on 44 px vaikka pallo on 8 px. */
.quotes__dot::before {
  content: "";
  position: absolute;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.quotes__dots { position: relative; }
.quotes__dot { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .quotes__track { transition: none; }
}

/* --- Usein kysyttyä ---------------------------------------------------
   <details> on natiivi haitari: toimii ilman JS:ää, on ruudunlukijalle
   ymmärrettävä, ja vastaukset ovat HTML:ssä myös suljettuna — hakukoneet ja
   tekoälyvastaukset löytävät ne siis vaikka osio olisi kiinni.            */
.faq {
  background: var(--cream);
  padding: clamp(56px, 7.5vw, 110px) var(--gutter);
}
.faq__inner { max-width: 820px; margin: 0 auto; }

.faq__head { margin-bottom: clamp(38px, 5vw, 60px); text-align: center; }
.faq__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 14px;
}
.faq__head p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.faq__item { border-bottom: 1px solid rgba(46, 15, 31, 0.14); }
.faq__item:first-child { border-top: 1px solid rgba(46, 15, 31, 0.14); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* 48 px vähimmäiskorkeus: kysymysrivi on kosketuskohde. */
  min-height: 48px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.25;
  color: var(--ink);
  transition: color 300ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--pink); }

/* Plussa, joka kääntyy rastiksi. Kaksi taustaviivaa, ei kuvatiedostoa. */
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 15px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 15px no-repeat;
  transition: transform 260ms var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }

.faq__answer { padding-bottom: clamp(20px, 2.4vw, 30px); }
.faq__answer p {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-body);
}
.faq__answer p + p { margin-top: 14px; }
.faq__answer em { color: var(--pink); font-style: italic; }

/* <details> ei animoi korkeuttaan natiivisti. Sisällön pehmeä sisääntulo
   riittää peittämään hypyn, eikä vaadi JS:ää. */
.faq__item[open] .faq__answer { animation: faq-open 260ms var(--ease-out); }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
}

/* --- Lopetus -------------------------------------------------------------
   Lomakkeen jälkeinen kiitos. Oma kermakaista jatkaa sivun vuorottelua
   (valkoinen, kerma, valkoinen, kerma, tumma) ja erottaa hyvästit
   lomakkeesta, jotta ne eivät luo vaikutelmaa lisäkentistä.            */
.closing {
  background: var(--cream);
  padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(56px, 8vw, 110px);
}
/* Teksti vasemmalla, kokemus-kuva oikealla — sama rivirakenne kuin
   tarinaosioissa (.story__inner / .story__media). Pienellä ruudulla
   kuva taittuu tekstin alle. */
.closing__row {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(34px, 5vw, 80px);
}
.closing__inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.closing__row .closing__inner {
  margin: 0;
  flex: 1 1 420px;
  min-width: 280px;
}
.closing h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

/* Sama vaaleanpunainen sydänkoriste kuin tarinan alussa, hieman pienempänä:
   siellä se avaa osion, tässä se päättää sivun. */
.closing__heart {
  display: block;
  width: clamp(180px, 20vw, 260px);
  height: auto;
  margin: 0 auto clamp(20px, 2.5vw, 30px);
}
.closing p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--ink-body);
}
.closing p + p { margin-top: 16px; }
.closing__sign {
  margin-top: clamp(26px, 3vw, 36px) !important;
  color: var(--ink-muted) !important;
}

/* --- Alatunniste --------------------------------------------------------- */
.site-footer {
  background: var(--berry-rich);
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(34px, 4vw, 50px);
  color: rgba(251, 242, 248, 0.75);
}


.site-footer__legal { display: flex; gap: 22px; }
.site-footer__legal a { font-size: 14px; color: rgba(251, 242, 248, 0.45); }
.site-footer__legal a:hover { color: var(--gold); }

/* --- Alatunniste: etusivun täysi versio -----------------------------------
   Mobiili ensin. Vanhat __top/__col/__bottom/__mark-säännöt jäävät paikalleen,
   koska tietosuoja- ja evästesivut käyttävät niitä yhä (site-footer--slim).
   Työpöytäversio suunnitellaan erikseen, kun mobiili on hyväksytty; siihen
   asti sama pystysuora asettelu vain levenee hallitusti.                     */
.site-footer--full {
  position: relative;
  overflow: hidden;
  text-align: center;
  /* Perii saman liukuvärin jonka lomake luovutti vaihtaessaan valkoiseen.
     Kultaiset elementit vaativat tumman pohjan: kermalla kontrasti oli
      2,02:1, tässä ~5,9–7,1:1 riippuen liukuvärin kohdasta. */
  background: linear-gradient(160deg, var(--berry-rich) 0%, var(--berry-rich-deep) 100%);
  color: rgba(251, 242, 248, 0.75);
}

/* --- Vaalean footerin värit ---------------------------------------------- */
.site-footer--full .site-footer__tagline { color: rgba(251, 242, 248, 0.72); }
.site-footer--full .site-footer__name    { color: rgba(251, 242, 248, 0.6); }
.site-footer--full .site-footer__contact a { color: rgba(251, 242, 248, 0.88); }
.site-footer--full .site-footer__contact a:hover { color: var(--gold); }
.site-footer--full .site-footer__legal a { color: rgba(251, 242, 248, 0.5); }
.site-footer--full .site-footer__legal a:hover { color: var(--gold); }
.site-footer--full .site-footer__copy    { color: rgba(251, 242, 248, 0.42); }

/* Koristesivallus oikeassa alakulmassa. aria-hidden + pointer-events:none,
   jottei se vie kosketusalueita linkeiltä. */
.site-footer__flourish {
  position: absolute;
  right: -20%;
  bottom: -4%;
  width: 82%;
  height: auto;
  transform: rotate(-10deg);
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

.site-footer__stack {
  position: relative;
  z-index: 1;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer__wordmark { width: min(300px, 82%); height: auto; }
.site-footer__brush    { width: min(200px, 56%); height: auto; margin-top: 6px; }
.site-footer__tagline  { margin-top: 20px; font-size: 17px; color: rgba(251, 242, 248, 0.72); }
.site-footer__shine    { width: min(330px, 92%); height: auto; margin-top: 22px; }

/* Mobiilissa kääre ei tee mitään: display:contents nostaa lapset suoraan
   pinoon, joten asettelu on täsmälleen entisellään. Työpöydällä kääre
   muuttuu flexiksi ja asettaa sarakkeet rinnakkain. */
.site-footer__middle { display: contents; }

.site-footer__group { width: 100%; margin-top: 30px; }
.site-footer__group h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__name { margin-top: 12px; font-size: 16px; color: rgba(251, 242, 248, 0.6); }

/* display:contents nostaa kuvan ja linkin suoraan gridiin, jolloin molempien
   rivien kuvakkeet asettuvat samaan sarakkeeseen tekstin pituudesta
   riippumatta. */
.site-footer__contact {
  display: inline-grid;
  grid-template-columns: 26px auto;
  align-items: center;
  gap: 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.site-footer__contact li  { display: contents; }
.site-footer__contact img { width: 26px; height: auto; }
.site-footer__contact a   { font-size: 17px; color: rgba(251, 242, 248, 0.88); }
.site-footer__contact a:hover { color: var(--gold); }

.site-footer__heart { width: min(300px, 84%); height: auto; margin-top: 30px; }

.site-footer__social {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.site-footer__social a   { display: block; transition: transform 400ms var(--ease); }
.site-footer__social a:hover { transform: translateY(-3px); }
.site-footer__social img { display: block; width: 42px; height: 42px; }

.site-footer__monogram { width: 88px; height: auto; margin-top: 32px; }

.site-footer--full .site-footer__legal {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.site-footer__copy { margin-top: 14px; font-size: 13px; color: rgba(251, 242, 248, 0.42); }

@media (min-width: 760px) {
  .site-footer__stack    { max-width: 520px; }
  .site-footer__wordmark { width: 340px; }
  .site-footer__brush    { width: 230px; }
  .site-footer__shine    { width: 380px; }
  .site-footer__contact a { font-size: 18px; }
  .site-footer__flourish { width: 46%; right: -6%; }
}

/* --- Alatunniste työpöydällä ---------------------------------------------
   Sama pystysuora rytmi kuin mobiilissa, mutta yhteystiedot ja some asettuvat
   rinnakkain ja sydänviiva siirtyy niiden alle. Katkaisukohta 860px vastaa
   ylätunnisteen valikkorajaa, jotta molemmat vaihtuvat samassa kohdassa.   */
@media (min-width: 860px) {
  .site-footer--full { padding-top: clamp(80px, 7vw, 110px); }

  .site-footer__stack    { max-width: 1000px; }
  .site-footer__wordmark { width: 400px; }
  .site-footer__brush    { width: 272px; margin-top: 10px; }
  .site-footer__tagline  { margin-top: 24px; font-size: 19px; }
  /* Marginaalit ovat pienet, koska shine- ja sydänkuvissa on oma pehmeä
     hehku reunoilla — se toimii jo optisena välinä. */
  .site-footer__shine    { width: 640px; margin-top: 14px; }

  /* flex-wrap + order:3 vie sydänviivan omalle rivilleen sarakkeiden alle,
     jolloin sitä ei tarvitse kääntää pystyyn. */
  .site-footer__middle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 16px clamp(70px, 9vw, 130px);
    width: 100%;
    margin-top: 22px;
  }
  .site-footer__middle .site-footer__group { width: auto; margin-top: 0; }
  .site-footer__group h2 { font-size: 19px; }

  .site-footer__contact { gap: 20px; margin-top: 24px; }
  .site-footer__contact img { width: 28px; }
  .site-footer__contact a { font-size: 19px; }

  .site-footer__social { gap: 30px; margin-top: 26px; }
  .site-footer__social img { width: 48px; height: 48px; }

  .site-footer__heart { order: 3; width: 440px; margin-top: 18px; }

  .site-footer__monogram { width: 112px; margin-top: 44px; }

  .site-footer--full .site-footer__legal { margin-top: 42px; gap: 34px; }
  .site-footer--full .site-footer__legal a { font-size: 15px; }
  .site-footer__copy { margin-top: 16px; font-size: 14px; }

  .site-footer__flourish { width: 40%; right: -4%; bottom: -8%; }
}

/* --- Tekstisivut (tietosuoja, evästeet) ---------------------------------- */
/* Valkoinen tausta koko sivulle. Luokka on html-elementissä, ei bodyssa,
   koska selain ottaa vieritysalueen ulkopuolelle jäävän värin juuri siitä:
   pelkkä body jättäisi kerman näkyviin iOS:n kumitusvierityksessä. */
html.doc-page, html.doc-page body { background: #ffffff; }

.doc {
  background: #ffffff;
  /* Yläpehmuste = kiinteän ylätunnisteen korkeus + oma väli, jotta otsikko
     ei jää tunnisteen alle. Väliä kasvatettu, koska otsikko oli aiemmin
     kiinni tunnisteessa. */
  padding: calc(clamp(16px, 2vw, 26px) * 2 + 60px + clamp(28px, 4vw, 56px)) var(--gutter) clamp(80px, 10vw, 130px);
}
.doc__inner { max-width: 760px; margin: 0 auto; }
.doc h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 14px;
}
.doc p.doc__meta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.doc h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.16;
  color: var(--ink);
  margin: clamp(38px, 4.5vw, 58px) 0 16px;
}
.doc h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  color: var(--ink);
  margin: 28px 0 10px;
}
.doc p, .doc li {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ink-body);
}
.doc p { margin-bottom: 16px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--pink); border-bottom: 1px solid rgba(169, 40, 112, 0.35); }
.doc a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.doc strong { color: var(--ink); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(46, 15, 31, 0.06);
  border-radius: 5px;
  padding: 2px 6px;
}

/* Täydennettävä tieto — erottuu selvästi, jotta se ei jää livesivulle. */
.todo {
  background: rgba(214, 164, 91, 0.18);
  border-bottom: 1px dashed var(--gold);
  padding: 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b4a18;
}

.doc__table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.doc__table th, .doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid rgba(46, 15, 31, 0.12);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink-body);
}
.doc__table th {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.doc__table tbody th { width: 38%; }
.doc__table thead th {
  width: auto;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--pink);
  border-bottom-color: rgba(214, 164, 91, 0.55);
}
.doc__table td:last-child { padding-right: 0; }
.doc__wrap { overflow-x: auto; }

/* Tekstisivujen kevyt alatunniste — vain merkki ja lakisääteiset linkit. */

.doc__back {
  display: inline-block;
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  border-bottom: 1px solid rgba(169, 40, 112, 0.4);
  padding-bottom: 3px;
}
.doc__back:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* --- Kuvakoot työpöydällä ------------------------------------------------
   1024 px on raja, jossa tarinarivit mahtuvat kahdelle palstalle. Sitä
   kapeammalla rivit ovat päällekkäin, ja siellä kuvat saavat jäädä
   leveämmiksi — muuten ne näyttäisivät postimerkeiltä tekstin alla. */
@media (min-width: 1024px) {
  .figure-wide { max-width: 620px; }

  .story__media { max-width: 360px; }
  .story__media--wide { max-width: 400px; }
  .story__media--even { max-width: 370px; }

  /* Videon kansi on toimintakehotus, ei kuvituskuva, joten se saa olla
     tarinan kuvia isompi. Soitin skaalataan mukana. */
  .video-cover { max-width: 560px; }
  .video-frame { max-width: 820px; }

  /* 2 × 360 px + 44 px väli = 764 px, jotta otsikko pysyy linjassa. */
  .testimonials__inner { max-width: 764px; }
  .testimonial { max-width: 360px; }
  .testimonial img { height: 250px; }
}

/* --- 404 ----------------------------------------------------------------- */
.error-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vw, 120px) var(--gutter);
  background: linear-gradient(160deg, var(--ink) 0%, var(--berry-mid) 60%, var(--berry-deep) 100%);
  overflow: hidden;
  text-align: center;
}
.error-page__inner { position: relative; max-width: 620px; }
.error-page__inner > img {
  width: min(300px, 70%);
  height: auto;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.error-page p.error-page__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(58px, 9.5vw, 108px);
  line-height: 0.9;
  color: var(--gold);
  margin-bottom: 18px;
}
.error-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 20px;
}
.error-page__lead {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
  color: rgba(251, 242, 248, 0.72);
  margin-bottom: clamp(32px, 4vw, 44px);
}
.error-page__actions { margin-bottom: 22px; }
.error-page__actions .btn-outline { display: inline-block; }
.error-page__alt a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 242, 248, 0.55);
}
.error-page__alt a:hover { color: var(--gold); }

/* Tekstisivuilla ylätunniste on aina tumma, koska tausta on vaalea. */
.site-header--solid {
  background: linear-gradient(180deg, var(--berry-rich) 0%, var(--berry-rich-deep) 100%);
  border-bottom-color: rgba(214, 164, 91, 0.20);
}

/* --- Evästebanneri --------------------------------------------------------
   Näkyy vain kun kävijä ei ole vielä valinnut. Rakennetaan consent.js:ssä,
   joten HTML:ssä ei ole mitään, mikä välähtäisi ennen JS:n latautumista.

   Alalaidassa eikä sisältöä peittävänä esteenä: sivun saa lukea ennen
   valintaa, koska mitään ei seurata ennen valintaa. Tumma luumu erottaa
   bannerin sisällöstä ja vastaa ylätunnisteen ja alatunnisteen pintaa. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--berry) 0%, var(--berry-deep) 100%);
  border-top: 1px solid rgba(214, 164, 91, 0.28);
  box-shadow: 0 -18px 44px rgba(42, 12, 24, 0.28);
  padding: clamp(20px, 2.6vw, 28px) var(--gutter);

  /* Alkutila: banneri odottaa ruudun alapuolella ja liukuu esiin, kun
     consent.js lisää is-open-luokan. */
  transform: translateY(102%);
  opacity: 0;
  transition: transform 420ms var(--ease-out), opacity 320ms ease;
}
.consent.is-open { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; transform: translateY(0); opacity: 1; }
}

.consent__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
}

.consent__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: 0.02em;
  color: var(--cream);
  margin-bottom: 8px;
}

.consent__body {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(251, 242, 248, 0.74);
  /* Mitta pidetään luettavana myös leveällä näytöllä: yli 70 merkin rivi
     hukkaa lukijan rivinvaihdossa. */
  max-width: 62ch;
}

.consent__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--gold);
  border-bottom: 1px solid rgba(214, 164, 91, 0.4);
}
.consent__link:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* Molemmat valinnat samalla rivillä, samankokoisina ja yhtä lähellä:
   kieltäytymisen pitää olla yhtä helppoa kuin hyväksymisen. Kapealla
   näytöllä ne venyvät koko leveydelle, jolloin ne ovat yhä samanarvoiset. */
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.consent__actions .btn-solid,
.consent__actions .btn-outline {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 50px;
  padding: 14px clamp(20px, 2.2vw, 30px);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .consent__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* Teksti saa jäljelle jäävän tilan, jotta banneri jää matalaksi eikä
     kappale kapene neljäksi riviksi leveänkään ruudun keskellä. Mitta
     pysyy silti luettavana: 76 merkkiä on yläraja, ei tavoite. */
  .consent__text { flex: 1 1 auto; }
  .consent__body { max-width: 76ch; }
  .consent__actions { flex: 0 0 auto; flex-wrap: nowrap; }
  .consent__actions .btn-solid,
  .consent__actions .btn-outline { flex: 0 0 auto; }
}

/* Evästekäytäntösivun painike, joka avaa bannerin uudelleen. Piilossa
   kunnes consent.js paljastaa sen: ilman JS:ää se ei tekisi mitään. */
.consent-change {
  display: inline-block;
  /* Ylä- ja alaväli erottavat painikkeen ympäröivistä kappaleista. Alaväli
     on sama 16 px kuin .doc p:llä, jotta rytmi jatkuu katkeamatta. */
  margin: 6px 0 16px;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.1em;
  padding: 12px 24px;
  min-height: 46px;
  color: var(--pink);
  border-color: rgba(169, 40, 112, 0.45);
  background: transparent;
}
.consent-change:hover {
  background: var(--pink);
  color: var(--cream);
  border-color: var(--pink);
}
.consent-change[hidden] { display: none; }