:root {
  --color-primary: #0e2841;
  --color-primary-dark: #091929;
  /* Kirkas turkoosi VAIN tummilla pinnoilla (hero, image-band, footer);
     siellä kontrasti on 7,1:1. Vaaleilla pinnoilla se jää 2:1 eli lukukelvottomaksi
     -> käytä --color-accent-ink. Se on sama sävy 0,62-kertaisena ja läpäisee
     WCAG AA:n kaikilla kolmella vaalealla pinnalla:
     valkoinen 5,10:1 · --color-bg 4,74:1 · --color-surface-soft 4,55:1. */
  --color-accent: #3cc3cd;
  --color-accent-ink: #25797f;
  --color-bg: #f4f7f9;
  --color-surface: #ffffff;
  --color-surface-soft: #edf3f6;
  --color-text: #1f2a33;
  --color-text-soft: #5a6a77;
  --color-border: #d7e2e8;

  /* Typografia: pääotsikot Gelasio Medium, sivuotsikot Poppins SemiBold,
     leipäteksti Poppins Regular. */
  --font-heading: 'Gelasio', Georgia, serif;
  --font-body: 'Poppins', Arial, Helvetica, sans-serif;

  --container: 1120px;
  --container-narrow: 760px;

  --radius: 14px;
  --shadow-soft: 0 14px 34px rgba(16, 38, 56, 0.08);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Herokuvien tummennus — sama sävy kaikkialla */
  --hero-tint: linear-gradient(180deg, rgba(14, 40, 65, 0.60), rgba(14, 40, 65, 0.70));
  --hero-tint-light: linear-gradient(180deg, rgba(14, 40, 65, 0.55), rgba(14, 40, 65, 0.65));

  /* Taustakuvat. WebP-versiot otetaan käyttöön alla olevassa @supports-lohkossa. */
  --img-hero: url('hero-runko-heijastus.jpg');
  --img-hero-yritys: url('hero-heinikko-heijastus.jpg');
  --img-hero-referenssit: url('hero-kalliosaari.jpg');
  --img-hero-yhteystiedot: url('hero-kaislikko.jpg');
  --img-hero-latu: url('hero-latu.jpg');
  --img-band: url('band-soutaja.jpg');
  --img-footer: url('footer-rantapuut.jpg');
  --img-proj-1: url('hero-syysranta.jpg');
  --img-proj-2: url('hero-suokasvit.jpg');
  --img-proj-3: url('hero-usvaranta.jpg');
  --img-proj-4: url('hero-kuusikko.jpg');
  --img-proj-5: url('hero-kaislikko.jpg');
  --img-heinavesi: url('hero-heinavesi.jpg');
}

@supports (background-image: image-set(url('hero-runko-heijastus.webp') type('image/webp'))) {
  :root {
    --img-hero: image-set(url('hero-runko-heijastus.webp') type('image/webp'), url('hero-runko-heijastus.jpg') type('image/jpeg'));
    --img-hero-yritys: image-set(url('hero-heinikko-heijastus.webp') type('image/webp'), url('hero-heinikko-heijastus.jpg') type('image/jpeg'));
    --img-hero-referenssit: image-set(url('hero-kalliosaari.webp') type('image/webp'), url('hero-kalliosaari.jpg') type('image/jpeg'));
    --img-hero-yhteystiedot: image-set(url('hero-kaislikko.webp') type('image/webp'), url('hero-kaislikko.jpg') type('image/jpeg'));
    --img-hero-latu: image-set(url('hero-latu.webp') type('image/webp'), url('hero-latu.jpg') type('image/jpeg'));
    --img-band: image-set(url('band-soutaja.webp') type('image/webp'), url('band-soutaja.jpg') type('image/jpeg'));
    --img-footer: image-set(url('footer-rantapuut.webp') type('image/webp'), url('footer-rantapuut.jpg') type('image/jpeg'));
    --img-proj-1: image-set(url('hero-syysranta.webp') type('image/webp'), url('hero-syysranta.jpg') type('image/jpeg'));
    --img-proj-2: image-set(url('hero-suokasvit.webp') type('image/webp'), url('hero-suokasvit.jpg') type('image/jpeg'));
    --img-proj-3: image-set(url('hero-usvaranta.webp') type('image/webp'), url('hero-usvaranta.jpg') type('image/jpeg'));
    --img-proj-4: image-set(url('hero-kuusikko.webp') type('image/webp'), url('hero-kuusikko.jpg') type('image/jpeg'));
    --img-proj-5: image-set(url('hero-kaislikko.webp') type('image/webp'), url('hero-kaislikko.jpg') type('image/jpeg'));
    --img-heinavesi: image-set(url('hero-heinavesi.webp') type('image/webp'), url('hero-heinavesi.jpg') type('image/jpeg'));
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}

h3 {
  font-weight: 600;
}

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

/* Suomen yhdyssanat ovat pitkiä: "Kaavaluonnosasiakirjat",
   "rantayleiskaavamuutos" ja "rakennusjärjestykseen" eivät mahdu 320px ruudun
   riville, ja ilman tätä ne työnsivät koko sivun vaakasuunnassa yli. Katkaisu
   tapahtuu vain kun sana ei muuten mahdu, joten normaali taitto ei muutu. */
body {
  overflow-wrap: break-word;
}

/* Näppäimistökäyttäjän oikotie navigaation ohi. Näkyy vain fokusoituna. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1100;
  transform: translate(-50%, -140%);
  padding: 0.7rem 1.25rem;
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 14px rgba(16, 38, 56, 0.25);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid var(--color-accent-ink);
  outline-offset: 2px;
}

/* Kiinteä yläpalkki on 76px korkea. Ilman tätä ankkurilinkin kohde jäisi
   sen taakse, koska scroll-behavior: smooth vierittää kohteen ylälaitaan. */
:target {
  scroll-margin-top: 92px;
}

/* Skip-linkin kohde ei ole luonnostaan fokusoituva, joten se saa
   tabindex="-1". Piilotetaan siitä syntyvä fokusreunus. */
main:focus {
  outline: none;
}

/* Piilottaa tekstin näkyvistä mutta jättää sen ruudunlukijoille ja hakukoneille. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
}

.container {
  width: min(92%, var(--container));
  margin: 0 auto;
}

.narrow {
  width: min(92%, var(--container-narrow));
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: box-shadow 0.3s ease;
}

/* Heron kopio palkin taustana -- ks. site.js. Laatikko on heron kokoinen,
   jotta cover ja background-position piirtävät kuvan täsmälleen samoin kuin
   herossa. translate siirtää oikean rivin palkin kohdalle ja clip-path rajaa
   näkyviin vain palkin korkeuden. clip-path eikä overflow: hidden, koska
   mobiilivalikko on palkin sisällä ja roikkuu sen alapuolelle. */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-h, 0px);
  background-image: var(--hero-bg, none);
  background-position: var(--hero-bg-pos, center);
  background-size: var(--hero-bg-size, cover);
  background-repeat: no-repeat;
  transform: translateY(calc(-1 * var(--hero-top, 0px)));
  clip-path: inset(var(--hero-top, 0px) 0
    calc(var(--hero-h, 0px) - var(--hero-top, 0px) - var(--header-h, 76px)) 0);
  z-index: -1;
  pointer-events: none;
}

.site-header.scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 0;
}

.logo img {
  height: 44px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.main-nav a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.98rem;
}

.main-nav a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-toggle {
  display: none;
}

/* Etusivun hero on pelkkä kuva — nimi luetaan yläpalkin logosta.
   Korkeus tulee min-heightista, koska sisältöä ei ole sitä venyttämässä.

   HUOM gradientin pikselirajat: margin-top -76px nostaa laatikon yläreunan
   76px näkyvän alueen yläpuolelle, ja yläpalkki peittää seuraavat 76px.
   Laatikon kohta 152px on siis vasta se kohta jossa kuva alkaa näkyä.
   Navigaatio on siis näkyvällä rivillä 0-76px eli laatikon rivillä 76-152px. */
.hero {
  /* Kaatuneen rungon heijastus. --t = kuvan kohta (osuutena korkeudesta),
     joka osuu näkyvän alueen yläreunaan. Vesi on keskisävyistä sinistä,
     joten valikon taakse (ei koko yläreunaan) pehmeä soikea varjo:
     keskikohta containerin oikeasta reunasta --nav-center verran
     vasemmalle, pystysuunnassa palkin keskellä (laatikon 76 + 38px).
     Leveys vähintään 780px: korkeus 0,45 * leveys, (1 - t) * korkeus >= 260. */
  --t: 0.25;
  --iw: max(100vw, 780px);
  --ih: calc(var(--iw) * 1816 / 4032);
  --nav-center: 145px;
  --nav-shadow-w: 470px;
  --nav-shadow: 0.55;
  background:
    radial-gradient(ellipse var(--nav-shadow-w) 72px
      at calc(100% - (100% - min(92%, var(--container))) / 2 - var(--nav-center)) 114px,
      rgba(9, 25, 41, var(--nav-shadow)), rgba(9, 25, 41, 0)),
    var(--img-hero) center calc(76px - var(--t) * var(--ih)) / var(--iw) auto no-repeat;
  color: #fff;
  /* 25 % matalampi kuin alasivujen herot (näkyvissä 260px, loput 76px jää
     näkyvän alueen yläpuolelle). */
  min-height: 336px;
  position: relative;
  overflow: hidden;
  margin-top: -76px;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d5e4ef;
}

.hero-text {
  margin: 0 0 var(--space-5);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 680px;
}

.section {
  padding: var(--space-8) 0;
}

.section-alt {
  background: var(--color-surface-soft);
}

.section-heading {
  margin-bottom: var(--space-6);
}

.section-kicker {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-ink);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.section h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-accent-ink);
  font-family: var(--font-heading);
  font-weight: 500;
  max-width: 760px;
}

.lead {
  font-size: 1.15rem;
  color: var(--color-text);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.card-grid--primary-top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--primary-top .service-card--primary {
  grid-column: 1 / -1;
}

.service-card--primary {
  border-color: var(--color-accent-ink);
  border-width: 2px;
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

/* Korttien kuvapinta: kuva kortin yläreunaan, teksti sen alle */
.card--media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-media {
  margin: 0;
  line-height: 0;
  overflow: hidden;
}

.card-media picture {
  display: block;
}

.card-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Referenssit-sivun kategoriakortit.
   .ref-category on määritelty vasta .card--media:n jälkeen ja samalla
   spesifisyydellä, joten sen padding voittaisi -> nollataan kahdella
   luokalla. Muuten kuva jäisi sisennetyksi ja teksti saisi tuplapaddingin. */
.ref-category.card--media {
  padding: 0;
}

/* Kuvatiedostot ovat eri suhteissa (1,77:1 ja 2,22:1), joten kuvapinta
   pakotetaan samaan — muuten kortit jäisivät eri korkuisiksi. */
.ref-category.card--media .card-media img {
  aspect-ratio: 16 / 10;
}

/* Palvelukorteissa kapea aksenttikaista */
.service-card.card--media .card-media img {
  aspect-ratio: 16 / 4;
}

/* Ensisijainen kortti näyttää siltakuvan kokonaan siinä rajauksessa jossa se on
   tiedostossa (3,58:1) — ei pakotettua kuvasuhdetta, joten mitään ei rajaudu
   pois kummallakaan näyttökoolla. Korkeus tulee kuvan omasta suhteesta. */
.service-card--primary.card--media .card-media img {
  aspect-ratio: auto;
}

.card-body {
  padding: 1.75rem;
}

/* Täysleveä kuvakaista osioiden väliin */
.image-band {
  position: relative;
  min-height: clamp(340px, 46vh, 520px);
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(9, 25, 41, 0.45), rgba(9, 25, 41, 0.60)),
    var(--img-band) center 62% / cover no-repeat;
  color: #fff;
}

.image-band-inner {
  max-width: 640px;
  padding: var(--space-7) 0;
}

.image-band .section-kicker {
  color: var(--color-accent);
}

.image-band p.image-band-lead {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.3;
  color: #fff;
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--color-accent-ink);
  font-size: 1.2rem;
}

.service-card p {
  margin: 0;
  color: var(--color-text-soft);
}

.site-footer {
  margin-top: var(--space-7);
  background:
    linear-gradient(180deg, rgba(14, 40, 65, 0.68), rgba(14, 40, 65, 0.80)),
    var(--img-footer) center top / cover no-repeat;
  color: rgba(255, 255, 255, 0.88);
}


.footer-inner {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  text-align: right;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-kicker {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.footer-contact p {
  margin: 0;
  font-size: 1.05rem;
}

.footer-copy {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}


/* ---- Projekti-sivut ---- */

.status-badge {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-lainvoimainen {
  background: rgba(80, 200, 120, 0.18);
  /* Oli #2e9e58, joka jäi omaa pilleritaustaansa vasten 2,99:1 kontrastiin.
     Tämä on sama sävy tummempana: 5,49:1. */
  color: #1b6e3b;
  border: 1px solid rgba(80, 200, 120, 0.4);
}

.status-valmistelussa {
  background: rgba(15, 158, 213, 0.12);
  color: #0e6fa0;
  border: 1px solid rgba(15, 158, 213, 0.3);
}

/* Hyväksytty mutta ei vielä lainvoimainen: valtuuston päätös on tehty ja
   valitusaika kesken. Kolmas tila tarvittiin, koska "Valmistelussa" antoi
   väärän kuvan ja "Lainvoimainen" olisi ollut suoraan virheellinen. */
.status-hyvaksytty {
  background: rgba(214, 158, 46, 0.14);
  color: #8a5a00;
  border: 1px solid rgba(214, 158, 46, 0.4);
}

/* Samoja tilamerkkejä käytetään sekä vaaleilla korteilla että tumman
   herokuvan päällä. Herolla läpikuultava värillinen tausta sekoittuu kuvaan,
   jolloin tumma tekstiväri jää 1,4–2,8:1 kontrastiin. Virhe ei näy konsolissa
   eikä silmämääräisesti — se löytyi mittaamalla pillerin pikselit selaimesta.
   Herolla pilleri tehdään lähes läpinäkymättömäksi, jolloin sama tekstiväri
   toimii molemmilla pinnoilla. */
.page-hero .status-badge {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.8);
}

.project-section {
  padding-top: var(--space-7);
}

.project-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-7);
  align-items: start;
}

.project-sidebar {
  position: sticky;
  top: 96px;
}

.project-nav {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.project-nav-label {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-soft);
}

.project-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.project-nav ul li a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.93rem;
  color: var(--color-primary);
  font-weight: 500;
  transition: background 0.15s;
}

.project-nav ul li a:hover {
  background: var(--color-surface-soft);
}

.project-intro {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.project-block {
  margin-bottom: var(--space-7);
}

.project-block h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}

/* Timeline */

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-5);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 120px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
  transform: translateX(calc(var(--space-4) / 2 - 1px));
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-item--done .timeline-date {
  color: #2e9e58;
}

.timeline-item--done .timeline-body::before {
  background: #2e9e58;
  border-color: #2e9e58;
}

.timeline-date {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-soft);
  padding-top: 4px;
  text-align: right;
}

.timeline-body {
  position: relative;
  padding-left: calc(var(--space-4) + 12px);
}

.timeline-body::before {
  content: '';
  position: absolute;
  left: calc(var(--space-4) / 2 - 6px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent-ink);
  border: 2px solid var(--color-accent-ink);
}

.timeline-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--color-primary);
}

.timeline-body p {
  margin: 0 0 0.5rem;
  color: var(--color-text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Asiakirjakortit */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.doc-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s, box-shadow 0.15s;
}

.doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(16, 38, 56, 0.12);
}

.doc-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-ink);
  margin-bottom: 0.5rem;
}

.doc-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--color-primary);
}

.doc-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}


/* ---- Alasivut ---- */

.page-hero {
  background:
    var(--hero-tint),
    var(--page-hero-img, var(--img-hero)) center 50% / cover no-repeat;
  color: #fff;
  padding: calc(4.5rem + 76px) 0 3.5rem;
  margin-top: -76px;
  position: relative;
  overflow: hidden;
  /* Sama korkeus kuin etusivun .hero; lyhyt sisältö keskitetään pystysuunnassa.
     Pidempi sisältö (kaksirivinen otsikko + tilamerkki) saa kasvattaa heroa. */
  min-height: 422px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sivukohtaiset herokuvat — asetetaan sectionin luokalla */
/* Varianttien nimet viittaavat VALOKUVAAN, eivät sivuun johon ne on kytketty:
   --heinavesi tarkoittaa hero-heinavesi.jpg:tä ja on siksi yhtä lailla kelpo
   valinta Taipalsaaren sivulle. Kytkennät ovat HTML:ssä, joten kuvan vaihto
   sivulta toiselle tehdään luokkaa vaihtamalla — ei tätä lohkoa muokkaamalla,
   koska --heinavesi on kahden sivun yhteinen (heinitaryk ja suursaimaa) ja sen
   background-position kuuluu kuvaan, ei sivuun. */
.page-hero--yritys        { --page-hero-img: var(--img-hero-yritys); background-position: center;
                            /* Kevyempi sävy, jotta heijastusten syysvärit näkyvät */
                            --hero-tint: linear-gradient(180deg, rgba(14, 40, 65, 0.30), rgba(14, 40, 65, 0.45)); }
.page-hero--referenssit   { --page-hero-img: var(--img-hero-referenssit); }
.page-hero--yhteystiedot  { --page-hero-img: var(--img-hero-yhteystiedot); }
.page-hero--latu          { --page-hero-img: var(--img-hero-latu); background-position: center 12%; }
.page-hero--heinavesi     { --page-hero-img: var(--img-heinavesi); background-position: center 95%; }
.page-hero--proj-1        { --page-hero-img: var(--img-proj-1); }
.page-hero--proj-2        { --page-hero-img: var(--img-proj-2); }
.page-hero--proj-3        { --page-hero-img: var(--img-proj-3); }
.page-hero--proj-4        { --page-hero-img: var(--img-proj-4); }
.page-hero--proj-5        { --page-hero-img: var(--img-proj-5); }

/* Kickerin väri kahdella vaaleimmalla herokuvalla.

   .eyebrow on #d5e4ef ja 13,6px lihavoitua, eli AA:n normaalitekstiä jolle
   raja on 4,5:1 (18,66px lihavoitu olisi vasta isoa tekstiä). Kahden kuvan
   yläreuna on niin vaalea että raja jää alle -- mitattu piilottamalla tekstit
   ja ottamalla taustan 99. persentiilin luminanssi eli pahin kohta:

     hero-heinavesi.jpg    4,13:1 -> 5,36:1   (heinitaryk, suursaimaa)
     hero-kalliosaari.jpg  4,16:1 -> 5,40:1   (referenssit)

   Sääntö on sidottu herovarianttiin eikä sivuun, koska syy on kuvassa. Muut
   herokuvat ovat 5,66-9,74:1 eikä niiden ilmettä muuteta -- siksi
   tässä ei nosteta .eyebrow'n väriä globaalisti. */
.page-hero--heinavesi .eyebrow,
.page-hero--referenssit .eyebrow {
  color: #fff;
}

.page-hero h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-family: var(--font-heading);
  font-weight: 500;
}

.page-hero .hero-text {
  margin: 0;
  max-width: 600px;
}

.main-nav a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.button-secondary {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.18s ease, transform 0.18s ease;
}

.button-secondary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.button-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.button-text:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-list li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text-soft);
}

.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent-ink);
  font-weight: 700;
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.ref-category {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

.ref-category-label {
  display: inline-block;
  background: var(--color-surface-soft);
  color: var(--color-accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.ref-category h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  font-size: 1.2rem;
}

.ref-category p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ref-list li {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  padding-left: 1rem;
  position: relative;
}

.ref-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-accent-ink);
  font-weight: 900;
}

/* Yhteystiedot ovat herokuvan päällä, joten värit tummalle pinnalle.
   --color-accent jäi kaislikkokuvaa vasten 3,4-3,7:1:een (mitattu taustan
   99. persentiilin luminanssista), joten otsikoissa on sen vaalennettu sävy
   (#a6e8ec, väh. 5,2:1). Otsikot ovat H2 (sivun H1 on piilotettu), jotta
   otsikkotasoja ei hypätä. */
.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.contact-item h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a6e8ec;
}

.contact-item p {
  margin: 0;
  font-size: 1.15rem;
  color: #fff;
}

.contact-item a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.contact-item a:hover {
  text-decoration: underline;
}

.project-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.project-ref-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.project-ref-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16, 38, 56, 0.12);
}

/* Kortti on pystysuora flex-container, jonka align-items on oletuksena
   stretch. Se kumoaa pillereiden inline-blockin ja venytti ne kortin koko
   leveydelle — "HYVÄKSYTTY" näytti palkilta, ei merkiltä. Virhe ei näy
   konsolissa, vain kuvakaappauksesta. */
.project-ref-card .ref-category-label,
.project-ref-card .status-badge {
  align-self: flex-start;
}

.project-ref-card .ref-category-label {
  margin-bottom: var(--space-2);
}

.project-ref-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  color: var(--color-accent-ink);
  line-height: 1.3;
}

.project-ref-card .project-kunta {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-2);
}

.project-ref-card .project-desc {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-3);
  flex: 1;
}

.project-ref-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-ink);
}

/* Etusivun referenssinostot: kolme lukua otsikon ja projektikorttien väliin.
   auto-fit hoitaa taittumisen ilman omaa taitekohtaa — kolme saraketta mahtuu
   noin 600 px containeriin, sen alle kaksi ja lopuksi yksi. minmax-alaraja on
   180 px eikä 0, jotta "yli 3 500 km" ei jää kahdelle riville. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.stat {
  border-top: 2px solid var(--color-accent-ink);
  padding-top: var(--space-3);
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  /* Vaalea pinta (--color-bg) -> accent-ink, ei accent. Kirkas turkoosi jäisi
     tässä 2:1 kontrastiin. */
  color: var(--color-accent-ink);
}

.stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}


/* Nostolaatikko projektisivujen aikatauluille ja tiivistetyille tiedoille.
   Oli aiemmin inline-tyylinä heinlansi.html:ssä; kun sama laatikko toistuu
   seitsemällä projektisivulla, se kuuluu tyylitiedostoon. */
.info-box {
  margin-top: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.info-box .section-kicker {
  margin: 0 0 var(--space-3);
}

.info-box .feature-list {
  margin-top: 0;
}

/* Perustajalta-osio (yritys.html). */
/* Tumma osio sivuston perusvärillä (sama kuin yläpalkin ja alatunnisteen sävy).
   Otsikon perusväri --color-accent-ink on tarkoitettu vaaleille pinnoille,
   joten tässä otsikko on valkoinen. Painike käännetään vaaleaksi, koska tumma
   painike katoaisi taustaan. */
.section-founder {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.9);
}

.section-founder h2 {
  color: #fff;
}

.section-founder a {
  color: #fff;
}

.section-founder .founder-signature {
  color: #fff;
}

.section-founder .button-secondary {
  background: #fff;
  color: var(--color-primary);
}

.section-founder .button-secondary:hover {
  background: var(--color-surface-soft);
}

/* Alatunnisteen margin-top jättäisi tumman osion ja tumman alatunnisteen väliin
   vaalean kaistan. Poistetaan vain, kun tumma osio on sivun viimeinen. */
main:has(> .section-founder:last-child) + .site-footer {
  margin-top: 0;
}

/* Ei omaa korttipohjaa: valkoinen laatikko ei sopinut valokuvan kanssa
   yhteen, joten teksti on suoraan osion taustalla. */
.founder {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.founder-photo {
  display: block;
}

.founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.founder-text p:first-child {
  margin-top: 0;
}

.founder-text p:last-child {
  margin-bottom: 0;
}

.founder-signature {
  color: var(--color-primary);
  font-size: 1.05rem;
}

/* Yhteystiedot-sivu on pelkkä hero: yhteystiedot kuvan päällä, ei alatunnistetta.
   Hero täyttää ruudun. Laatikko alkaa 76 px näkyvän alueen yläpuolelta
   (margin-top: -76px), joten korkeuteen lisätään 76 px. svh, jotta mobiilin
   osoitepalkki ei aiheuta turhaa vieritystä; vh varalle. */
.page-hero--contact {
  min-height: calc(100vh + 76px);
  min-height: calc(100svh + 76px);
  text-align: center;
}

/* Ansioluettelo (markus-hytonen.html) */
/* Huomautus Kokemus-sivun korttien alla: erottaa yrityksen referenssit henkilön CV:stä */
.ref-note {
  margin: var(--space-5) 0 0;
  max-width: 760px;
  color: var(--color-text-soft);
}

/* Profiilikuva Profiili-otsikon oikealla puolella valkoisella pohjalla.
   Kuvan reunat on häivytetty läpinäkyviksi tiedostoon
   (tyokalut/tee-profiilikuva.py), joten pohjan on oltava sama valkoinen
   kuin häivytyksen oletus — siksi osio on .section-white eikä --color-bg. */
.section-white {
  background: #fff;
}

/* Kuva nostettu lähemmäs heroa. Kahden luokan valitsin, jotta sääntö voittaa
   myös mobiilitaitekohdan .section-paddingin, joka tulee lähdejärjestyksessä
   myöhemmin. */
.section.profile-section {
  padding-top: var(--space-5);
}

/* Otsikko vasemmalle, kuva keskelle leipätekstin palstaa sen yläpuolelle.
   Tasaleveät sivusarakkeet (1fr auto 1fr) keskittävät kuvan palstaan otsikon
   leveydestä riippumatta. */
.profile-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.profile-heading .section-heading {
  margin-bottom: 0;
}

.profile-photo {
  width: 200px;
}

.profile-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.page-hero .hero-text a {
  color: #fff;
  white-space: nowrap;
}

/* Pitkät hankelistat avattavina ryhminä. Summary on oma painikkeensa,
   joten se saa näkyvän focus-renkaan näppäimistökäyttöä varten. */
.cv-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cv-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cv-group summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  border-radius: var(--radius);
}

.cv-group summary:focus-visible {
  outline: 3px solid var(--color-accent-ink);
  outline-offset: 2px;
}

.cv-group summary::marker {
  color: var(--color-accent-ink);
}

.cv-group[open] summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.cv-list {
  padding: 1rem 1.25rem 1.25rem;
  gap: 0.6rem;
}

.cv-list a {
  color: var(--color-accent-ink);
}

.cv-years {
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text);
}

.cv-note {
  margin: 0.35rem 0 0;
}

.cv-sublist {
  list-style: disc;
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
}

.ref-list .cv-sublist li {
  padding-left: 0;
}

.ref-list .cv-sublist li::before {
  content: none;
}

/* Linkit nostolaatikon feature-listassa. Ilman tätä ne perisivät listan
   harmaan tekstivärin (--color-text-soft) ja selaimen oletusalleviivauksen,
   eli näyttäisivät leipätekstiltä. Sivuston linkkityyli on tumma ja lihavoitu
   ilman alleviivausta (vrt. .contact-item a ja .button-text); nuolimerkki
   listan alussa kertoo jo että kyse on linkeistä. */
.info-box .feature-list a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.info-box .feature-list a:hover,
.info-box .feature-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Avaintiedot kaava-alueesta: nimi–arvo-pareja kahdessa sarakkeessa. */
.fact-grid {
  display: grid;
  /* 260px pakottaa neljä avaintietoa 2x2-ruudukkoon 3+1:n sijaan. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.fact-grid dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.fact-grid dd {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  color: var(--color-text);
}

/* Karttalehtijaon esittely: selite ja indeksikartta rinnakkain.

   Asettelu oli aiemmin sivun sisäisinä tyyleinä flex-wrapissa, jossa selite
   sai `flex: 1 1 260px` ja kartta kiinteän 320px leveyden. 1440px ruudulla
   selite venyi 768px leveäksi mutta oli vain 53px korkea, joten kartta jäi
   roikkumaan oikeaan reunaan ja tekstin alle jäi 250px tyhjää — kartta näytti
   irralliselta selitteestään. Korjaus on kaksiosainen: kaista on rajattu
   860px:iin niin että sarakkeet pysyvät vierekkäin, ja align-items: center
   keskittää lyhyen selitteen kartan korkeudelle tyhjän tilan sijaan. */
.index-map-band {
  display: grid;
  /* minmax(0, ...) molemmille radoille eikä 1fr/auto: 1fr-radan automaattinen
     minimi on sisällön min-content, joka vuotaa kapealla ruudulla ulos
     containerista (vrt. .project-layout ja .timeline-item). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: center;
  gap: var(--space-5);
  max-width: 860px;
  margin-bottom: var(--space-5);
}

.index-map-band p {
  margin: 0;
  color: var(--color-text-soft);
}

.index-map-figure {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* width/height ovat img-elementissä vain varaamassa tilan latauksen ajaksi;
   näytettävän koon määrää sarakkeen leveys. Kuva on luontaisesti 281x256px,
   eli sitä venytetään — 360px on raja jonka yli karttalehtien numerot alkavat
   sumentua. Tarkemmalla vedoksella rajaa voi nostaa. */
.index-map-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.index-map-figure figcaption {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

/* Suunnittelualueen kartta omalla sivullaan: ei venytetä yli luontaisen
   896px leveyden. */
.area-map-figure {
  max-width: 896px;
}

.area-map-figure figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

/* ---- Taitekohdat ----
   Nämä ovat tiedoston lopussa tarkoituksella: media query ei lisää
   spesifisyyttä, joten sääntöjen on tultava LÄHDEJÄRJESTYKSESSÄ niiden
   perussääntöjen jälkeen joita ne kumoavat. Kapeampi taitekohta viimeisenä. */

/* Yksi 900px-taitekohta. Oli aiemmin neljänä erillisenä lohkona
   eri puolilla tiedostoa, mikä teki ylläpidosta hankalaa. */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* Kapeassa ruudussa aksenttikaista jäisi liian ohueksi.
     Ensisijainen kortti on rajattu ulos: sen siltakuva näytetään kokonaan. */
  .service-card.card--media:not(.service-card--primary) .card-media img {
    aspect-ratio: 16 / 6;
  }

  .card-body {
    padding: 1.5rem;
  }

  /* minmax(0, 1fr) eikä 1fr: 1fr-radan automaattinen minimi on sisällön
     min-content, joka työnsi sivupalkin 336px leveäksi 294px containerissa
     ja rikkoi sivun vaakasuunnassa 320px ruudulla. */
  .project-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sidebar {
    position: static;
  }

  .doc-grid {
    grid-template-columns: 1fr;
  }

  /* Sama syy kuin .project-layoutissa: 1fr-radan automaattinen minimi on
     min-content, joka vuoti 320px ruudulla ulos containerista. */
  .timeline-item {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .project-ref-grid {
    grid-template-columns: 1fr;
  }

  .ref-grid {
    grid-template-columns: 1fr;
  }

  /* Kartta selitteen alle. Kuva ei saa täyttää koko riviä: 900px ruudulla se
     venyisi kolminkertaiseksi luontaisesta 281px leveydestään. */
  .index-map-band {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .index-map-figure {
    max-width: 360px;
  }
}

@media (max-width: 760px) {
  /* Varjo valikkokuvakkeen taakse */
  .hero {
    --nav-center: 22px;
    --nav-shadow-w: 90px;
  }


  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }

  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .header-inner {
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(14, 40, 65, 0.97);
    padding: 1rem 1.5rem 1.5rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .main-nav.open {
    display: flex;
  }

  .section {
    padding: 4.5rem 0;
  }

  /* Kuva tekstin yläpuolelle */
  .founder {
    grid-template-columns: minmax(0, 1fr);
  }

  .founder-photo {
    max-width: 240px;
  }

  /* Kuva pysyy otsikon vierellä, mutta pienempänä */
  .profile-photo {
    width: 140px;
  }
}