/* =========================================================
   Sulkasuunnittelu — mockupin design-systeemi Blocksylle
   Liitä tämä kokonaisuudessaan: Ulkoasu → Mukauta → Ylimääräinen CSS
   (tämä on WordPressin oma kenttä, toimii teemasta riippumatta)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,500;1,8..60,600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,500;1,9..144,600&family=Archivo:wght@700;800;900&family=Karla:wght@400;500;600&display=swap');

/* ---------- VÄRIT ---------- */
:root{
  --stone:#E9E3D4;
  --stone-2:#DFD8C6;
  --ink:#221F19;
  --ink-soft:#5B564A;
  --petrol:#23504A;
  --petrol-soft:#3E7269;
  --rust:#B75B33;
  --sand:#C9A46A;
  --line:#C9C0AA;
  --surface:#F4F0E6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stone:#171D1B; --stone-2:#1E2624; --ink:#EDE7D8; --ink-soft:#B8AF9C;
    --petrol:#6FB3A5; --petrol-soft:#4F8B80; --rust:#E08857; --sand:#D9BE8B;
    --line:#334340; --surface:#1B2320;
  }
}
:root[data-theme="dark"]{
  --stone:#171D1B; --stone-2:#1E2624; --ink:#EDE7D8; --ink-soft:#B8AF9C;
  --petrol:#6FB3A5; --petrol-soft:#4F8B80; --rust:#E08857; --sand:#D9BE8B;
  --line:#334340; --surface:#1B2320;
}

/* ---------- FONTTITYYLIT (tarkkoja custom-elementtejä varten) ---------- */
em{
  font-family:'Source Serif 4',Georgia,serif;
  font-style:italic; font-weight:500; color:var(--petrol);
}
.caps{
  font-family:'Archivo',ui-sans-serif,sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:0.01em;
}
.eyebrow{
  font-family:'Archivo',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.72rem; color:var(--rust);
}

/* ---------- LOGO: kiertyvä sulkamerkki ----------
   Lisää tämä luokka ("mark") siihen kuva/SVG-elementtiin, joka näyttää
   sulkaikonisi navigaatiossa. Jos käytät Blocksyn omaa Site Logo -kenttää,
   luokkaa ei voi lisätä suoraan sieltä — helpoin tapa on lisätä ikoni
   erillisenä pienenä kuvana (esim. mukautettu HTML- tai kuva-lohko
   otsikon vieressä) ja antaa sille class="mark" Gutenbergin
   Lisäasetukset-paneelista ("Extra CSS-luokka(t)"). */
.mark{
  width:30px; height:30px; display:inline-block;
  animation:spin 16s linear infinite;
  transform-origin:50% 52%;
}
@media (prefers-reduced-motion:reduce){ .mark{ animation:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- NAVIGAATIO: scrollatessa oikean reunan pystyvalikoksi ----------
   HUOM: Blocksyn oma valikko ei ole class="links" — tarkista oikea
   luokka Chromen "Tarkastele"-työkalulla omalta sivultasi (yleensä jotain
   tyyliin .header-menu-items tai .ct-header-menu-item) ja korvaa
   "nav.links" alla sillä. JS ei tarvitse muutosta — se vain lisää
   body-tagiin luokan "scrolled". */
nav.links{
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
body.scrolled nav.links{
  position:fixed;
  top:50%;
  right:22px;
  transform:translateY(-50%);
  flex-direction:column;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:18px 16px;
  border-radius:2px;
  box-shadow:0 6px 24px rgba(0,0,0,0.12);
  z-index:50;
}
body.scrolled nav.links a{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:0.78rem;
  letter-spacing:0.04em;
}

/* ---------- NAPIT ---------- */
.btn{
  font-family:'Archivo',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:0.03em; font-size:0.82rem;
  padding:14px 24px; text-decoration:none; display:inline-block;
  border:1px solid var(--ink);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{ background:var(--petrol); border-color:var(--petrol); color:var(--surface); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--stone); }

/* ---------- HERO-KUVA ---------- */
.hero-figure{ position:relative; }
.hero-figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--line);
}
.hero-figure .tag{
  position:absolute; left:-14px; bottom:24px;
  background:var(--rust); color:var(--surface);
  font-family:'Archivo',sans-serif; font-weight:800; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.06em; padding:9px 14px;
}
@media (max-width:900px){ .hero-figure .tag{ left:0; } }

/* ---------- SCROLL-ANIMAATIOT ---------- */
.fade-up{
  opacity:0; transform:translateY(16px); animation:fadeUp .7s ease forwards;
}
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){ .fade-up{ animation:none; opacity:1; transform:none; } }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- TILASTORIVI (130+ / 60+ / 20 vuotta) ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.stat{ padding:34px 28px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
@media (max-width:700px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:none; }
}
.stat .num{
  font-family:'Source Serif 4',serif; font-style:italic; font-weight:500;
  font-size:2.4rem; color:var(--petrol); display:block;
}
.stat .label{ margin-top:4px; font-size:0.86rem; color:var(--ink-soft); }

/* ---------- SULKA-BANDI (kapea kuvaraita osioiden välissä) ---------- */
.band{ position:relative; height:150px; overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9); }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--stone) 0%, transparent 22%, transparent 78%, var(--stone) 100%);
}
.band-caption{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
.band-caption span{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem;
  background:var(--stone); padding:6px 18px; color:var(--ink);
}

/* ---------- PALVELUKORTIT ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); background:var(--surface); }
.card .thumb{ aspect-ratio:5/4; overflow:hidden; border-bottom:1px solid var(--line); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .body{ padding:22px 22px 26px; }
.card h3{ font-size:1.12rem; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:0.96rem; margin:0; }

/* ---------- PROSESSIASKELEET (Kysy Tainalta) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:step; margin-top:44px; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:0 28px 0 0; border-right:1px solid var(--line); }
.step:last-child{ border-right:none; padding-right:0; }
@media (max-width:860px){
  .step{ border-right:none; border-bottom:1px solid var(--line); padding:0 0 28px; margin-bottom:28px; }
  .step:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
}
.step .num{
  counter-increment:step; font-family:'Fraunces',serif; font-style:italic;
  color:var(--petrol); font-size:2.1rem; display:block; margin-bottom:10px;
}
.step .num::before{ content: counter(step); }
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:0.94rem; margin:0; }

/* ---------- MINÄ-OSIO (about-teaser + "quirk"-tunniste) ---------- */
.about-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line); }
.quirk{
  display:inline-flex; align-items:center; gap:10px; margin-top:6px;
  font-size:0.86rem; color:var(--ink-soft);
}
.quirk img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }

/* ---------- FOOTER-CTA (petrolinvihreä kutsuosio) ----------
   Tämä on tarkoitettu OMAKSI Group-lohkokseen ennen Blocksyn oikeaa
   footeria — ei koko sivun footeria. Anna Group-lohkolle class="cta-footer". */
.cta-footer{ background:var(--petrol); color:var(--surface); padding:64px 0 40px; }
.cta-footer h2{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:1.8rem; max-width:16ch; color:var(--surface);
}
.cta-footer .btn-primary{ background:var(--rust); border-color:var(--rust); color:var(--surface); }
.cta-footer .meta{ font-size:0.85rem; opacity:0.75; max-width:32ch; }