/* ---- Fontit ---------------------------------------------------------- */
@font-face{font-family:'Familjen Grotesk';src:url('/fonts/FamiljenGrotesk-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/IBMPlexSans-Variable.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* Harppaus Kattopalvelut — tyylit. Tokenit: docs/DESIGN.md.
   Älä lisää uusia värejä suoraan sääntöihin; lisää token ja kirjaa se DESIGN.md:hen. */

/* ---- Tokenit: vaalea teema ------------------------------------------- */
:root{
  --surface-100:#f7f4ee; --surface-200:#efeae0; --surface-300:#e4dccd; --surface-syva:#10201c;
  --ink:#16211e; --ink-muted:#535f5c; --ink-inverse:#f7f4ee;
  --border:#dcd5c7; --border-vahva:#8f8878;
  --accent:#1f7a66; --accent-hover:#17604f; --accent-pehmea:#dceae3;
  --kupari:#a85c33; --kupari-teksti:#904f2b; --kupari-pehmea:#f3e3d7;
  --kunto-ok:#16705c; --kunto-seuranta:#8a5a05; --kunto-korjattava:#ab4110; --kunto-kiireellinen:#93131a;
  --kunto-ok-bg:#d5e8df; --kunto-seuranta-bg:#fbeed2; --kunto-korjattava-bg:#fde6da; --kunto-kiireellinen-bg:#f9d8d8;
  --shadow-sm:0 1px 2px rgba(22,33,30,.08);
  --ylatunniste-reuna:transparent;
  --logo:url('/logo/harppaus-logo-vaaka.svg');
  --font-display:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --r-sm:6px; --r-md:10px; --r-lg:18px; --r-pill:999px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface-100:#10201c; --surface-200:#182924; --surface-300:#22352f; --surface-syva:#0a1613;
    --ink:#f2efe8; --ink-muted:#a9b8b2; --ink-inverse:#10201c;
    --border:#2c3d37; --border-vahva:#6d827a;
    --accent:#4bb39a; --accent-hover:#63c4a9; --accent-pehmea:#1b3a32;
    --kupari:#d58f60; --kupari-teksti:#d58f60; --kupari-pehmea:#34231a;
    --kunto-ok:#5fcaad; --kunto-seuranta:#e8b44a; --kunto-korjattava:#f79a62; --kunto-kiireellinen:#fa7671;
    --kunto-ok-bg:#15332b; --kunto-seuranta-bg:#3b2d0c; --kunto-korjattava-bg:#452318; --kunto-kiireellinen-bg:#451a1a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --ylatunniste-reuna:var(--syva-border-heikko);
    --logo:url('/logo/harppaus-logo-vaaka-negatiivi.svg');
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface-100:#10201c; --surface-200:#182924; --surface-300:#22352f; --surface-syva:#0a1613;
  --ink:#f2efe8; --ink-muted:#a9b8b2; --ink-inverse:#10201c;
  --border:#2c3d37; --border-vahva:#6d827a;
  --accent:#4bb39a; --accent-hover:#63c4a9; --accent-pehmea:#1b3a32;
  --kupari:#d58f60; --kupari-teksti:#d58f60; --kupari-pehmea:#34231a;
  --kunto-ok:#5fcaad; --kunto-seuranta:#e8b44a; --kunto-korjattava:#f79a62; --kunto-kiireellinen:#fa7671;
  --kunto-ok-bg:#15332b; --kunto-seuranta-bg:#3b2d0c; --kunto-korjattava-bg:#452318; --kunto-kiireellinen-bg:#451a1a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --ylatunniste-reuna:var(--syva-border-heikko);
  --logo:url('/logo/harppaus-logo-vaaka-negatiivi.svg');
  color-scheme:dark;
}

/* ---- Tokenit: aina tumma kaista (ylä- ja alapalkki, band-dark) ---------
   Nämä eivät vaihdu teeman mukana, koska pohja on tumma molemmissa. */
:root{
  --syva-ink:#f7f4ee; --syva-ink-muted:#c8d4cf; --syva-ink-hiljainen:#8ca39b;
  --syva-accent:#4bb39a; --syva-accent-hover:#63c4a9; --syva-accent-teksti:#10201c;
  --syva-kupari:#d58f60; --syva-border:#6d827a; --syva-hover:rgba(255,255,255,.07);
  --syva-pinta:#182924; --syva-border-heikko:#2c3d37;
}

/* ---- Perusta --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
body{
  margin:0; background:var(--surface-100); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:26px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
section{padding-block:48px}
@media (min-width:820px){section{padding-block:72px}}

.eyebrow{
  font-size:13px; line-height:18px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--kupari-teksti); margin-bottom:12px;
}
.h1{font-size:clamp(30px,4.2vw,38px); line-height:1.15; font-weight:700; letter-spacing:-.015em}
.h2{font-size:clamp(24px,3.4vw,28px); line-height:1.2; font-weight:700; letter-spacing:-.01em}
.h3{font-size:21px; line-height:28px; font-weight:600}
.lead{font-size:18px; line-height:29px; color:var(--ink-muted)}
.small{font-size:14px; line-height:22px; color:var(--ink-muted)}

/* Pitkä teksti (tietosuojaseloste ym.): välit otsikoille, kappaleille ja listoille */
.teksti .lead{margin-top:16px}
.teksti > p, .teksti > ul{margin-top:12px; max-width:60ch}
.teksti > h2{margin-top:32px}
.teksti ul{padding-left:24px}
.teksti li + li{margin-top:8px}
.data{font-family:var(--font-mono); font-size:15px; line-height:22px; font-weight:500; font-variant-numeric:tabular-nums}
.data-sm{font-family:var(--font-mono); font-size:13px; line-height:18px; font-weight:500}

/* ---- Painikkeet ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 20px; border-radius:var(--r-md);
  font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:22px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--accent); color:var(--ink-inverse)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--border-vahva)}
.btn-secondary:hover{background:var(--surface-200)}
.btn-ghost{background:transparent; color:var(--accent); padding-inline:0; text-decoration:underline; text-underline-offset:3px}

/* ---- Ylätunniste ----------------------------------------------------- */
.topbar{
  background:var(--surface-syva); color:var(--syva-ink);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  /* Tummassa teemassa palkki (#0a1613) ja sivun tausta (#10201c) ovat lähes
     samat (1,1:1), joten alareuna erottaa ne. Varjona, ettei korkeus muutu. */
  box-shadow:0 1px 0 var(--ylatunniste-reuna);
}
.topbar .wrap{display:flex; align-items:center; gap:20px; min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{height:30px; width:auto; display:block}
.nav{display:none; gap:22px; margin-inline:auto}
@media (min-width:980px){.nav{display:flex}}
.nav a{color:var(--syva-ink-muted); text-decoration:none; font-size:15px}
.nav a:hover{color:var(--syva-ink)}
.topbar-phone{margin-left:auto; color:var(--syva-ink); text-decoration:none}
@media (min-width:980px){.topbar-phone{margin-left:0}}
/* Ylapalkki on aina tumma, joten painike käyttää tumman teeman accent-arvoja
   ja tummaa tekstiä. Kontrasti 6.6:1. */
.topbar .btn-primary{background:var(--syva-accent); color:var(--syva-accent-teksti)}
.topbar .btn-primary:hover{background:var(--syva-accent-hover)}
/* Kapealla näytöllä ylätunnisteeseen jäävät vain logo ja puhelinnumero:
   painike rivittyisi omalle rivilleen ja tuplaisi palkin korkeuden.
   Herossa on sama painike heti alla, ja puhelin on mobiilissa pääkanava. */
@media (max-width:599px){
  .topbar .btn-primary{display:none}
  .topbar .wrap{gap:12px; min-height:56px}
}

/* ---- Hero ------------------------------------------------------------ */
.hero .wrap{display:grid; gap:32px; align-items:center}
@media (min-width:900px){.hero .wrap{grid-template-columns:1fr 1fr; gap:56px}}
.hero h1{font-size:clamp(30px,5vw,46px); line-height:1.08; font-weight:700; letter-spacing:-.02em}
.hero .lead{margin-top:16px; max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-meta{margin-top:20px; font-size:14px; line-height:22px; color:var(--ink-muted)}

/* ---- Kuvapaikat ------------------------------------------------------ */
.photo{
  border:1px dashed var(--border-vahva); border-radius:var(--r-lg);
  background:var(--surface-200); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:28px 24px; color:var(--ink-muted);
}
.photo svg{opacity:.6}
.photo b{font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--ink-muted)}
.photo span{font-size:14px; line-height:20px; max-width:34ch}
.photo-hero{aspect-ratio:4/3; max-width:100%}
.photo-portrait{aspect-ratio:4/3}

/* ---- Valokuvat ---- */
.kuva{margin:0}
.kuva img{display:block; width:100%; height:auto; border-radius:var(--r-lg)}

/* ---- Palvelut -------------------------------------------------------- */
.band-200{background:var(--surface-200)}
.cards{display:grid; gap:16px; margin-top:28px}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--surface-100); border:1px solid var(--border);
  border-radius:var(--r-md); padding:24px; display:flex; flex-direction:column; gap:12px;
}
.card-icon{
  width:44px; height:44px; border-radius:var(--r-sm); background:var(--accent-pehmea);
  color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.card p{color:var(--ink-muted); font-size:15px; line-height:24px}
.card .price{margin-top:auto; padding-top:8px; color:var(--ink)}
.card .vahennys{font-size:13px; line-height:18px; color:var(--ink-muted)}

/* ---- Tarkastuksen sisältö -------------------------------------------- */
.split{display:grid; gap:32px; margin-top:28px}
/* min-width:0 estää raporttitaulukkoa venyttämästä sivua mobiilissa vaakavieritykseen */
.split > *{min-width:0}
@media (min-width:900px){.split{grid-template-columns:1.35fr 1fr; gap:48px; align-items:start}}
.steps{display:grid; gap:18px; margin:0; padding:0; list-style:none}
@media (min-width:620px){.steps{grid-template-columns:1fr 1fr; gap:18px 32px}}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}
.steps .n{font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--kupari-teksti); padding-top:3px}
.steps p{font-size:15px; line-height:23px}
.panel{
  background:var(--surface-300); border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:18px;
}
.panel-row{display:flex; flex-direction:column; gap:2px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.panel-row:last-of-type{border-bottom:0; padding-bottom:0}
.panel .label{font-size:13px; line-height:18px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted)}
.panel .btn{width:100%}

/* ---- Esimerkkiraportti ----------------------------------------------- */
.report{
  background:var(--surface-100); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.report-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface-200);
}
.report-head .rname{font-weight:600; font-size:15px}
.report-head .rid{margin-left:auto; color:var(--ink-muted)}
.report-scroll{overflow-x:auto}
.report table{width:100%; border-collapse:collapse; min-width:440px}
.report th{
  text-align:left; font-size:13px; line-height:18px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); padding:12px 20px; background:var(--surface-300);
}
.report td{padding:14px 20px; border-top:1px solid var(--border); font-size:15px; line-height:22px; vertical-align:top}
.report td.arvio{font-family:var(--font-mono); font-weight:500; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.report-foot{padding:14px 20px; border-top:1px solid var(--border); font-size:13px; line-height:20px; color:var(--ink-muted)}
.merkki{
  display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:12px; line-height:16px; font-weight:500; letter-spacing:.08em;
  white-space:nowrap;
}
.merkki svg{width:14px; height:14px; flex:0 0 auto}
.m-ok{background:var(--kunto-ok-bg); color:var(--kunto-ok)}
.m-seuranta{background:var(--kunto-seuranta-bg); color:var(--kunto-seuranta)}
.m-korjattava{background:var(--kunto-korjattava-bg); color:var(--kunto-korjattava)}
.m-kiireellinen{background:var(--kunto-kiireellinen-bg); color:var(--kunto-kiireellinen)}
.esimerkki-lippu{
  display:inline-block; margin-bottom:12px; padding:4px 12px; border-radius:var(--r-pill);
  background:var(--kupari-pehmea); color:var(--kupari-teksti);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; font-weight:500;
}

/* ---- Tumma kaista ---------------------------------------------------- */
.band-dark{background:var(--surface-syva); color:var(--syva-ink)}
.band-dark .wrap{display:grid; gap:24px; align-items:center}
@media (min-width:900px){.band-dark .wrap{grid-template-columns:1.35fr 1fr; gap:48px; align-items:center}}
.band-dark .eyebrow{color:var(--syva-kupari)}
.band-dark p{color:var(--syva-ink-muted)}
.band-dark .btn-secondary{color:var(--syva-ink); border-color:var(--syva-border)}
.band-dark .btn-secondary:hover{background:var(--syva-hover)}
.panel-syva{background:var(--syva-pinta); border:1px solid var(--syva-border-heikko)}
.panel-syva .label{color:var(--syva-ink-hiljainen)}
.panel-syva .data{color:var(--syva-ink)}
.panel-syva .small{color:var(--syva-ink-muted)}
.panel-syva .panel-row{border-bottom-color:var(--syva-border-heikko)}
.band-dark .btn-primary{background:var(--syva-accent); color:var(--syva-accent-teksti)}
.band-dark .btn-primary:hover{background:var(--syva-accent-hover)}

/* ---- Minä ------------------------------------------------------------ */
.about{display:grid; gap:32px; align-items:start}
@media (min-width:900px){.about{grid-template-columns:.8fr 1.2fr; gap:48px}}
.about-text p + p{margin-top:14px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.chip{
  background:var(--accent-pehmea); color:var(--ink); border-radius:var(--r-sm);
  padding:7px 12px; font-size:14px; line-height:20px;
}

/* ---- Alue ------------------------------------------------------------ */
.alue-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.alue-list span{
  border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 14px;
  font-size:15px; line-height:22px; background:var(--surface-100);
}

/* ---- Lomake ---------------------------------------------------------- */
.form-grid{display:grid; gap:16px; margin-top:24px}
@media (min-width:700px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; line-height:18px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted)}
.field input,.field select,.field textarea{
  font-family:var(--font-sans); font-size:16px; line-height:24px; color:var(--ink);
  background:var(--surface-100); border:1px solid var(--border-vahva); border-radius:var(--r-sm);
  padding:11px 12px; min-height:44px; width:100%;
}
.field textarea{min-height:110px; resize:vertical}
.form-note{margin-top:16px}
.hunaja{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.kiitos{
  background:var(--accent-pehmea); border-radius:var(--r-md); padding:24px; margin-top:24px;
  border:1px solid var(--accent);
}

/* ---- Alatunniste ----------------------------------------------------- */
.footer{background:var(--surface-syva); color:var(--syva-ink-muted); padding-block:48px}
.footer .wrap{display:grid; gap:32px}
@media (min-width:760px){.footer .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.footer img{height:30px; width:auto; display:block; margin-bottom:14px}
.footer h4{font-family:var(--font-sans); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--syva-ink-hiljainen); margin:0 0 12px}
.footer a{color:var(--syva-ink); text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px}
.footer .legal{font-size:13px; line-height:20px; color:var(--syva-ink-hiljainen); margin-top:14px}