/* ==========================================================================
   Master Renovation Oy — teematyylit
   Väripaletti on säilytetty ennallaan: logon vihreä #27973C ja sininen #3744C8.
   Tekstikäytössä niistä on tummennetut variantit, jotta kontrasti täyttää
   WCAG 2.2 AA:n valkoista pohjaa vasten (4.5:1 leipäteksti, 3:1 UI).
   ========================================================================== */

/* --- Fontit: itse isännöidyt, ei yhtään kutsua Google Fontsiin (GDPR) ----- */
@font-face{
  font-family:"Maven Pro";
  src:url("../fonts/maven-pro-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:400 900; font-style:normal; font-display:swap;
  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:"Maven Pro";
  src:url("../fonts/maven-pro-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    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:"Inter";
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
  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;
}
/* Osajoukotettu numeroihin, labeleihin ja hintoihin — 14 kB */
@font-face{
  font-family:"JBMono";
  src:url("../fonts/jetbrains-mono-subset.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* BRÄNDI — säilytetty ennallaan */
  --green:#27973C;            /* logon vihreä */
  --blue:#3744C8;             /* logon sininen */
  /* Tekstivariantit valkoiselle pohjalle (kontrasti mitattu) */
  --green-ink:#1B7A2F;        /* 4.9:1 */
  --blue-ink:#2B36A6;         /* 8.1:1 */
  --green-deep:#0F5A22;
  --green-tint:#EAF4EC;
  --blue-tint:#ECEEFA;

  /* NEUTRAALIT — tintattu vihreään, ei puhdasta valkoista tai mustaa */
  --ink:#12131A;
  --ink-2:#4C4F5C;
  --ink-3:#767A88;
  --paper:#FBFCFA;
  --surface:#F1F5F1;
  --surface-2:#E7EDE7;
  --line:rgba(18,19,26,.13);
  --line-soft:rgba(18,19,26,.07);
  --dark:#0E1520;

  /* PYÖRISTYS — kaksi arvoa, ei kahdeksaa */
  --r-sm:8px;
  --r-md:16px;
  --r-pill:999px;

  /* LIIKE — ei ease eikä ease-in-out */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-ui:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.87,0,.13,1);
  --d-fast:120ms; --d-base:200ms; --d-med:280ms; --d-slow:400ms; --d-reveal:760ms;

  --f-display:"Maven Pro","Segoe UI",system-ui,sans-serif;
  --f-text:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JBMono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --page:min(1180px, 100% - 2 * clamp(20px,5vw,64px));
  --shadow-1:0 1px 2px rgba(18,19,26,.05), 0 8px 24px -16px rgba(18,19,26,.28);
  --shadow-2:0 2px 4px rgba(18,19,26,.06), 0 24px 48px -24px rgba(18,19,26,.4);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-text); font-size:clamp(16.5px,.4vw+15.5px,17.5px); line-height:1.62;
  font-optical-sizing:auto; font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
img{max-width:100%; height:auto}
a{color:var(--blue-ink); text-underline-offset:3px}
::selection{background:var(--green); color:#fff}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}

.wrap{width:var(--page); margin-inline:auto}
.mono{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; font-variant-numeric:tabular-nums}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:200; border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(251,252,250,.88); backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow var(--d-med) var(--e-ui), background var(--d-med) var(--e-ui);
}
.site-header.scrolled{background:rgba(251,252,250,.97); box-shadow:var(--shadow-1)}
.header-top{
  background:var(--dark); color:#cfd6df;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
}
.header-top .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:space-between; padding:8px 0; min-height:34px}
.header-top a{color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.header-top a:hover{color:var(--green)}
.header-top svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.brand{display:inline-flex; align-items:center; text-decoration:none; flex:none}
.brand picture{display:block; line-height:0}
.brand img,.brand .logo-fallback{display:block; height:52px; width:auto; transition:height var(--d-med) var(--e-ui)}
.site-header.scrolled .brand img,.site-header.scrolled .brand .logo-fallback{height:40px}
/* Vara-asu, jos logokuvaa ei ole asetettu: sama massa ja suhde kuin logossa */
.logo-fallback{
  aspect-ratio:2.71/1; display:flex; flex-direction:column; justify-content:center;
  font-family:var(--f-display); line-height:1; padding-left:2px;
}
.logo-fallback b{font-size:1.34em; font-weight:800; color:var(--green); letter-spacing:.02em; display:block}
.logo-fallback span{font-size:.62em; font-weight:700; color:var(--blue); letter-spacing:.03em; display:block}

.main-nav ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.main-nav a{
  display:block; padding:10px 14px; border-radius:var(--r-sm);
  font-family:var(--f-display); font-weight:700; font-size:.94rem;
  color:var(--ink); text-decoration:none;
  transition:background var(--d-fast) var(--e-ui), color var(--d-fast) var(--e-ui);
}
.main-nav a:hover{background:var(--surface); color:var(--green-ink)}
.main-nav .current-menu-item > a,.main-nav a[aria-current="page"]{color:var(--green-ink); background:var(--green-tint)}
.nav-cta{display:flex; align-items:center; gap:10px; flex:none}

.nav-toggle{
  display:none; align-items:center; gap:8px; background:none; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px 12px; cursor:pointer; color:var(--ink);
  font-family:var(--f-display); font-weight:700; font-size:.88rem;
}
.nav-toggle svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:700; font-size:.98rem; line-height:1.1;
  padding:14px 24px; border-radius:var(--r-sm); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition-property:transform,background,border-color,color,box-shadow;
  transition-duration:var(--d-fast); transition-timing-function:var(--e-ui);
}
.btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.btn:hover{transition-duration:var(--d-base)}
.btn:active{transition-duration:90ms; transform:translateY(1px)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(39,151,60,.7)}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-ink); transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(55,68,200,.6)}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--green); color:var(--green-ink); background:var(--green-tint)}
.btn-ghost{padding:10px 14px; color:var(--ink)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:10px 16px; font-size:.9rem}

/* ---------------------------------------------------------------- hero */
.hero{position:relative; overflow:hidden; background:var(--paper); padding:clamp(36px,5vw,68px) 0 clamp(40px,5vw,74px)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% -10%, rgba(39,151,60,.13), transparent 62%),
    radial-gradient(620px 380px at 92% 6%, rgba(55,68,200,.10), transparent 60%);
}
/* Hienovarainen rakeisuus: poistaa litteän digitaalisen tunnun liukuväreistä */
.grain{position:fixed; inset:0; width:100%; height:100%; z-index:99; pointer-events:none; opacity:.035; mix-blend-mode:multiply}
.hero .wrap{position:relative; z-index:1}
.hero-text{display:flex; flex-direction:column}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:stretch}
.hero-eyebrow{color:var(--green-ink); display:flex; align-items:center; gap:10px; margin-bottom:18px}
.hero-eyebrow::before{content:""; width:26px; height:2px; background:var(--green); flex:none}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.02; letter-spacing:-.032em; margin:0 0 20px}
.hero h1 em{font-style:normal; color:var(--green-ink)}
.hero-lede{font-size:clamp(1.04rem,.5vw+.94rem,1.2rem); color:var(--ink-2); max-width:48ch; margin-bottom:28px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px}
.hero-trust{display:flex; flex-wrap:wrap; gap:9px 18px; padding-top:20px; margin-top:auto; border-top:1px solid var(--line-soft)}
.hero-trust li{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--ink-2); list-style:none}
.hero-trust svg{width:16px; height:16px; stroke:var(--green); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.hero-trust ul{display:contents}

.hero-media{position:relative; display:flex}
.hero-photo{
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-2);
  border:1px solid var(--line-soft); background:var(--surface-2);
  flex:1; min-height:clamp(320px,42vw,560px);
}
.hero-photo picture{display:contents}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hero-card{
  position:absolute; left:-22px; bottom:-26px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--shadow-2); max-width:240px;
}
.hero-card .mono{color:var(--ink-3); display:block; margin-bottom:6px}
.hero-card b{font-family:var(--f-mono); font-size:1.7rem; font-weight:700; color:var(--ink); display:block; line-height:1}
.hero-card small{color:var(--ink-2); font-size:.82rem; display:block; margin-top:5px}

/* ---------------------------------------------------------------- sections */
.section{padding:clamp(56px,8vw,116px) 0}
.section-tight{padding:clamp(38px,5vw,64px) 0}
.section-wide{padding:clamp(72px,11vw,168px) 0}
.section-surface{background:var(--surface)}
.section-dark{background:var(--dark); color:#e6ebf1}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#aab6c4}

.sec-head{max-width:60ch; margin-bottom:clamp(30px,4vw,52px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head .mono{color:var(--green-ink); display:block; margin-bottom:14px}
.section-dark .sec-head .mono{color:#6fd287}
.sec-head h2{font-size:clamp(1.8rem,3.7vw,2.9rem); line-height:1.08; letter-spacing:-.026em; margin-bottom:14px}
.sec-head p{color:var(--ink-2); font-size:1.03rem}

/* ---------------------------------------------------------------- services */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:28px 24px 24px; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  box-shadow:var(--shadow-1);
  transition:transform var(--d-fast) var(--e-ui), box-shadow var(--d-fast) var(--e-ui), border-color var(--d-fast) var(--e-ui);
}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:rgba(39,151,60,.45); transition-duration:var(--d-base)}
.svc-icon{
  width:46px; height:46px; border-radius:var(--r-sm); background:var(--green-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:none;
}
.svc-icon svg{width:24px; height:24px; stroke:var(--green-deep); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.svc h3{font-size:1.12rem; margin-bottom:8px; letter-spacing:-.012em}
.svc p{color:var(--ink-2); font-size:.95rem; margin-bottom:16px}
.svc-price{margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.svc-price b{font-family:var(--f-mono); font-weight:700; font-size:1.05rem; color:var(--green-ink); font-variant-numeric:tabular-nums}
.svc-price span{font-size:.8rem; color:var(--ink-3)}

/* ---------------------------------------------------------------- calc band */
.calc-band{background:linear-gradient(135deg,var(--dark),#17233a); color:#fff; position:relative; overflow:hidden}
.calc-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 320px at 88% 20%, rgba(39,151,60,.28), transparent 62%),
             radial-gradient(520px 300px at 10% 90%, rgba(55,68,200,.3), transparent 60%);
}
.calc-band .wrap{position:relative; z-index:1}
.calc-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,60px); align-items:center}
.calc-inner h2{font-size:clamp(1.75rem,3.4vw,2.7rem); line-height:1.08; margin-bottom:14px; color:#fff}
.calc-inner p{color:#a9b6c6; margin-bottom:24px; max-width:46ch}
.calc-steps{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.calc-steps li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.calc-steps li:last-child{border-bottom:0}
.calc-steps .n{font-family:var(--f-mono); font-size:.72rem; font-weight:700; color:#6fd287; letter-spacing:.06em}
.calc-steps b{font-family:var(--f-display); font-weight:700; color:#fff; display:block; font-size:1rem}
.calc-steps span{color:#98a6b8; font-size:.9rem}

/* ---------------------------------------------------------------- prices */
.price-nav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.price-tab{
  font-family:var(--f-display); font-weight:700; font-size:.9rem; padding:9px 16px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; color:var(--ink-2);
  cursor:pointer; transition:all var(--d-fast) var(--e-ui);
}
.price-tab:hover{border-color:var(--green); color:var(--green-ink)}
.price-tab[aria-selected="true"]{background:var(--green); border-color:var(--green); color:#fff}

.price-panel{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.price-panel[hidden]{display:none}
.price-card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); padding:26px 24px; box-shadow:var(--shadow-1)}
.price-card h3{font-size:1.05rem; margin-bottom:4px}
.price-card > .mono{color:var(--ink-3); display:block; margin-bottom:16px}
.price-list{list-style:none; margin:0; padding:0}
.price-list li{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
.price-list li:last-child{border-bottom:0}
.price-list .lbl{color:var(--ink-2); font-size:.95rem}
.price-list .val{font-family:var(--f-mono); font-weight:700; font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.price-note{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:.85rem; color:var(--ink-3)}

/* ---------------------------------------------------------------- steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,44px); position:relative}
.step .n{font-family:var(--f-mono); font-size:.72rem; font-weight:700; color:var(--green-ink); letter-spacing:.09em; display:block; margin-bottom:14px}
.step h3{font-size:1.15rem; margin-bottom:8px}
.step p{color:var(--ink-2); font-size:.96rem}
.step{padding-top:20px; border-top:2px solid var(--green)}
.step:nth-child(2){border-top-color:var(--blue)}
.step:nth-child(3){border-top-color:var(--ink-3)}

/* ---------------------------------------------------------------- split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.split-narrow{grid-template-columns:.85fr 1.15fr}
.fact-row{display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px); margin-top:28px}
.fact b{font-family:var(--f-mono); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:700; color:var(--green-ink); display:block; line-height:1; font-variant-numeric:tabular-nums}
.fact span{font-size:.86rem; color:var(--ink-2); display:block; margin-top:7px; max-width:16ch}
.checklist{list-style:none; margin:0; padding:0}
.checklist li{position:relative; padding:10px 0 10px 32px; border-bottom:1px solid var(--line-soft); font-size:.97rem}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:""; position:absolute; left:4px; top:17px; width:13px; height:8px;
  border-left:2.4px solid var(--green); border-bottom:2.4px solid var(--green);
  transform:rotate(-45deg);
}

/* ---------------------------------------------------------------- cta band */
.cta-band{background:var(--green-tint); border-top:1px solid rgba(39,151,60,.22); border-bottom:1px solid rgba(39,151,60,.22)}
.cta-inner{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.cta-inner h2{font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1.12; max-width:20ch}
.cta-inner p{color:var(--ink-2); margin:8px 0 0; max-width:42ch}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--dark); color:#9fadbd; padding:clamp(48px,6vw,80px) 0 0; font-size:.93rem}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(22px,3vw,44px); padding-bottom:44px}
.site-footer h4{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#6d7f92; font-weight:600; margin-bottom:16px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.site-footer a{color:#cfd9e3; text-decoration:none}
.site-footer a:hover{color:var(--green); text-decoration:underline}
.footer-brand picture{display:block; line-height:0}
.footer-brand img,.footer-brand .logo-fallback{height:54px; width:auto; margin-bottom:16px}
.footer-brand p{color:#8d9cad; font-size:.9rem; max-width:34ch}
.footer-legal{border-top:1px solid rgba(255,255,255,.1); padding:18px 0 26px; display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#6d7f92}

/* ---------------------------------------------------------------- call bar */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  background:rgba(14,21,32,.97); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr; gap:9px;
}
.callbar .btn{width:100%; padding:13px 10px; font-size:.94rem}

/* ---------------------------------------------------------------- content */
.page-hero{background:var(--surface); border-bottom:1px solid var(--line-soft); padding:clamp(34px,5vw,64px) 0}
.page-hero .mono{color:var(--green-ink); display:block; margin-bottom:12px}
.page-hero h1{font-size:clamp(1.95rem,4.2vw,3rem); line-height:1.06; letter-spacing:-.026em}
.page-hero p{color:var(--ink-2); max-width:60ch; margin-top:14px}
.entry{max-width:68ch}
.entry h2{font-size:clamp(1.4rem,2.4vw,1.85rem); margin:1.8em 0 .5em; line-height:1.16}
.entry h3{font-size:1.15rem; margin:1.5em 0 .4em}
.entry ul,.entry ol{padding-left:1.2em}
.entry li{margin:.35em 0}
.entry table{width:100%; border-collapse:collapse; margin:1.4em 0; font-variant-numeric:tabular-nums}
.entry th{text-align:left; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:10px 12px 10px 0; border-bottom:1px solid var(--line)}
.entry td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line-soft)}
.table-wrap{overflow-x:auto}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0; transform:translateY(24px);
  transition:opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out)}
.reveal.visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1020px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:900px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-2); display:none; padding:8px 0 14px;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; align-items:stretch; gap:0; width:var(--page); margin-inline:auto}
  .main-nav a{padding:14px 12px; border-bottom:1px solid var(--line-soft); border-radius:0}
  .nav-toggle{display:inline-flex}
  .nav-cta .btn-desktop{display:none}
  .site-header{position:sticky}
  .nav-row{position:relative}
  .hero-grid,.calc-inner,.split,.split-narrow{grid-template-columns:1fr}
  .hero-media{order:-1}
  .hero-card{left:auto; right:12px; bottom:-20px; max-width:210px}
  .steps{grid-template-columns:1fr; gap:22px}
  .price-panel{grid-template-columns:1fr}
  .callbar{display:grid}
  body{padding-bottom:72px}
}
@media (max-width:600px){
  .svc-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .header-top .wrap{justify-content:center; gap:6px 18px; font-size:.62rem}
}

/* ==========================================================================
   Hintalaskuri — ohjattu kysymyssarja, joka laskee arvion omasta hinnastosta.
   Ei tekoälyä, ei palvelinta, ei evästeitä: koko logiikka on selaimessa.
   ========================================================================== */
.calc-launch{
  position:fixed; right:18px; bottom:18px; z-index:96;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:#fff; border:0; cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:.95rem;
  padding:14px 20px; border-radius:var(--r-pill); box-shadow:0 14px 30px -12px rgba(15,90,34,.75);
  transition:transform var(--d-fast) var(--e-ui), background var(--d-fast) var(--e-ui);
}
.calc-launch:hover{background:var(--green-deep); transform:translateY(-2px); transition-duration:var(--d-base)}
.calc-launch svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.calc-open .calc-launch{display:none}
/* Mobiilissa laskuri avataan alapalkista — kelluva nappi olisi sama toiminto kahdesti. */
@media (max-width:900px){ .calc-launch{display:none} }

.calc-panel{
  position:fixed; right:18px; bottom:18px; z-index:97; width:min(388px, calc(100vw - 24px));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 30px 70px -24px rgba(18,19,26,.55); display:none; overflow:hidden;
  max-height:calc(100vh - 36px); flex-direction:column;
}
.calc-open .calc-panel{display:flex}
@media (prefers-reduced-motion:no-preference){
  .calc-open .calc-panel{animation:calc-in var(--d-med) var(--e-out) both}
  @keyframes calc-in{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
}
@media (max-width:900px){ .calc-panel{right:8px; left:8px; bottom:76px; width:auto; max-height:calc(100vh - 110px)} }

.calc-head{flex:none; display:flex; align-items:flex-start; gap:12px; padding:16px 16px 13px; background:var(--dark); color:#fff}
.calc-head b{font-family:var(--f-display); font-size:1.02rem; display:block}
.calc-head span{color:#9db0c4; font-size:.79rem; display:block; margin-top:3px}
.calc-close{margin-left:auto; background:none; border:0; color:#9db0c4; cursor:pointer; padding:4px; line-height:0; border-radius:4px}
.calc-close:hover{color:#fff}
.calc-close svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.calc-bar{flex:none; height:3px; background:var(--surface-2)}
.calc-bar i{display:block; height:100%; background:var(--green); width:0; transition:width var(--d-med) var(--e-out)}
.calc-body{padding:18px 16px 16px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch}
.calc-step{font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:9px}
.calc-q{font-family:var(--f-display); font-weight:700; font-size:1.08rem; line-height:1.25; margin:0 0 14px; text-wrap:balance}
.calc-opts{display:grid; gap:8px}
.calc-opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; cursor:pointer; font-family:inherit; font-size:.95rem; color:var(--ink);
  transition:border-color var(--d-fast) var(--e-ui), background var(--d-fast) var(--e-ui), transform var(--d-fast) var(--e-ui);
}
.calc-opt:hover{border-color:var(--green); background:var(--green-tint); transform:translateX(2px); transition-duration:var(--d-base)}
.calc-opt em{font-style:normal; font-family:var(--f-mono); font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-back{margin-top:14px; background:none; border:0; padding:6px 0; color:var(--ink-3); font-family:inherit; font-size:.85rem; cursor:pointer}
.calc-back:hover{color:var(--green-ink)}

.calc-result{border:1px solid rgba(39,151,60,.35); background:var(--green-tint); border-radius:var(--r-sm); padding:16px; margin-bottom:14px}
.calc-result .mono{color:var(--green-deep); display:block; margin-bottom:6px}
.calc-result b{font-family:var(--f-mono); font-weight:700; font-size:1.85rem; color:var(--ink); display:block; line-height:1; font-variant-numeric:tabular-nums}
.calc-result small{display:block; margin-top:9px; color:var(--ink-2); font-size:.83rem; line-height:1.5}
.calc-sum{list-style:none; margin:0 0 14px; padding:0; border-top:1px solid var(--line-soft)}
.calc-sum li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:.87rem}
.calc-sum span{color:var(--ink-3)}
.calc-sum b{font-weight:600; text-align:right}
.calc-cta{display:grid; gap:8px}
.calc-cta .btn{width:100%}
.calc-note{margin-top:12px; font-size:.76rem; color:var(--ink-3); line-height:1.5}

/* ---------------------------------------------------- hinnastojen hakemisto */
.price-teaser{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:5px}
.price-teaser li{
  font-family:var(--f-mono); font-size:.82rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:8px;
}
.price-teaser li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--green); flex:none; transform:translateY(-2px)}

.price-terms{list-style:none; margin:clamp(22px,2.6vw,32px) 0 0; padding:16px 18px; display:grid; gap:8px;
  background:var(--surface-2,#f2f5f1); border:1px solid var(--line-soft); border-radius:var(--r-sm,10px);
  font-size:.86rem; line-height:1.55; color:var(--ink-2)}
.price-terms li{margin:0}
.price-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,38px)}
@media (max-width:600px){ .price-actions .btn{width:100%} }

.page-photo{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-soft);
  box-shadow:var(--shadow-1); aspect-ratio:3/1; background:var(--surface-2);
}
.page-photo picture{display:contents}
/* 3:1-kaistale leikkaa pystysuunnassa. Oletus painottaa yläosaa, koska
   työn kohde on kuvissa yleensä ylempänä kuin kuvan keskikohta. */
.page-photo img{width:100%; height:100%; object-fit:cover; object-position:center 36%; display:block}
.page-photo--high img{object-position:center 20%}
.page-photo--low img{object-position:center 62%}
@media (max-width:700px){ .page-photo{aspect-ratio:16/9} }

/* ------------------------------------------------------- yhteydenottosivu */
.contact-layout{display:grid; grid-template-columns:minmax(280px,.8fr) 1.2fr; gap:clamp(24px,4vw,52px); align-items:start}
@media (max-width:860px){ .contact-layout{grid-template-columns:1fr} }

.contact-card{background:var(--green-tint); border:1px solid rgba(39,151,60,.25); border-radius:var(--r-md);
  padding:22px; display:grid; gap:10px; margin-bottom:24px}
.contact-card h2{font-size:1.02rem; margin-bottom:4px}
.contact-card .btn{width:100%}

.contact-facts{margin:0; border-top:1px solid var(--line-soft)}
.contact-facts > div{display:grid; grid-template-columns:minmax(92px,.6fr) 1fr; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line-soft); align-items:baseline}
.contact-facts dt{color:var(--ink-3)}
.contact-facts dd{margin:0; font-size:.95rem}
.contact-facts a{text-decoration:none; border-bottom:1px solid var(--line)}
.contact-facts a:hover{border-color:var(--green)}

.form-panel{background:var(--card,#fff); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-1)}
.form-empty{color:var(--ink-3); font-size:.95rem; margin:0}

/* Lomakekenttien tyylit toimivat riippumatta siitä, mikä lisäosa lomakkeen tuottaa. */
.form-panel label,.form-panel .wpforms-field-label,.form-panel .frm_primary_label{
  display:block; font-family:var(--f-display); font-weight:700; font-size:.9rem; margin-bottom:6px; color:var(--ink)}
.form-panel input[type=text],.form-panel input[type=email],.form-panel input[type=tel],
.form-panel input[type=number],.form-panel input[type=date],.form-panel select,.form-panel textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; margin-bottom:16px;
  transition:border-color var(--d-fast) var(--e-ui), box-shadow var(--d-fast) var(--e-ui);
}
.form-panel textarea{min-height:130px; resize:vertical}
.form-panel select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size:6px 6px; background-repeat:no-repeat; padding-right:42px}
.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus{
  outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(39,151,60,.18)}
.form-panel input[type=submit],.form-panel button[type=submit]{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--green); color:#fff; border:0; border-radius:var(--r-sm);
  font-family:var(--f-display); font-weight:700; font-size:1rem; padding:15px 30px; cursor:pointer;
  transition:background var(--d-fast) var(--e-ui), transform var(--d-fast) var(--e-ui)}
.form-panel input[type=submit]:hover,.form-panel button[type=submit]:hover{
  background:var(--green-deep); transform:translateY(-2px); transition-duration:var(--d-base)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:560px){ .form-row{grid-template-columns:1fr} }
.form-legend{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green-ink); font-weight:600; margin:6px 0 14px; padding-top:16px; border-top:1px solid var(--line-soft)}
.form-legend:first-child{padding-top:0; border-top:0}
.form-consent{display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--ink-2);
  background:var(--surface); border-radius:var(--r-sm); padding:14px; margin:4px 0 18px}
.form-consent input{width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--green)}
.req{color:var(--green-ink)}

.preview-stub{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-md);
  padding:22px 24px; color:var(--ink-2); font-size:.96rem}
.preview-stub b{color:var(--ink)}

/* ------------------------------------------- laskurin tarjouspyyntölomake */
.calc-form label{display:block; font-family:var(--f-display); font-weight:700; font-size:.88rem; margin-bottom:6px; color:var(--ink)}
.calc-form input[type=email],.calc-form input[type=tel],.calc-form input[type=text]{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 13px; margin-bottom:14px;
  transition:border-color var(--d-fast) var(--e-ui), box-shadow var(--d-fast) var(--e-ui);
}
.calc-form input:focus{outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(39,151,60,.18)}
.calc-opt-label{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-left:7px}
.req{color:var(--green-ink)}
/* Hunajapurkki: pois näkyvistä, mutta ei display:none — osa roboteista ohittaa sen. */
.calc-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.calc-consent{display:flex; gap:10px; align-items:flex-start; background:var(--surface);
  border-radius:var(--r-sm); padding:12px; margin-bottom:14px}
.calc-consent input{width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--green)}
.calc-consent label{font-family:var(--f-text); font-weight:400; font-size:.85rem; color:var(--ink-2); margin:0; line-height:1.5}
.calc-error{background:rgba(178,53,32,.09); border:1px solid rgba(178,53,32,.3); color:#8f2a16;
  border-radius:var(--r-sm); padding:11px 13px; font-size:.87rem; margin-bottom:12px}
.calc-preview-note{margin-top:16px; padding:13px; background:var(--surface); border:1px dashed var(--line);
  border-radius:var(--r-sm); font-size:.8rem; color:var(--ink-2); line-height:1.55}
.calc-preview-note pre{margin:8px 0 0; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:4px; padding:10px; font-family:var(--f-mono); font-size:.7rem; overflow-x:auto; white-space:pre-wrap}

/* ------------------------------------------------------ toteuttajan logo */
/* Krediitti asettuu tasan kahden hiusviivan väliin: sama ilma ylä- ja alapuolella. */
.footer-credit{display:flex; align-items:center; justify-content:flex-end; gap:13px;
  padding:18px 0; border-top:1px solid rgba(255,255,255,.07)}
.credit-label{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:#5d6f82; white-space:nowrap}
.footer-credit picture{display:block; line-height:0}
.credit-logo{height:34px; width:auto; display:block; opacity:.85;
  transition:opacity var(--d-base) var(--e-ui)}
.footer-credit a:hover .credit-logo{opacity:1}
.footer-credit a{display:block; line-height:0; border-radius:3px}
/* Kelluva laskurinappi on oikeassa alanurkassa — jätetään sille tilaa. */
.site-footer{padding-bottom:0}
.footer-legal{padding-bottom:clamp(70px,7vw,86px)}
@media (max-width:700px){
  .footer-legal{flex-direction:column; align-items:flex-start; gap:14px; padding-bottom:24px}
  .footer-credit{justify-content:flex-start; padding-top:18px}
}

/* ------------------------------------------------------------ lakitekstit */
.entry .legal-updated{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--ink-3); border-bottom:1px solid var(--line-soft); padding-bottom:14px; margin-bottom:2em}
.entry .legal-note{background:var(--green-tint); border-left:3px solid var(--green);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:15px 18px; margin:0 0 2em; font-size:.95rem}
.entry .legal-note p{margin:0}
.entry h2{border-top:1px solid var(--line-soft); padding-top:1.4em}
.entry h2:first-of-type{border-top:0; padding-top:0}
.entry h3{color:var(--ink); font-size:1.06rem}
.entry p strong,.entry li strong{color:var(--ink)}

/* --- murupolku --- */
.crumbs{margin:0 0 clamp(14px,1.6vw,20px)}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 10px; font-size:.8rem; color:var(--ink-3)}
.crumbs li{display:flex; align-items:center; gap:6px 10px}
.crumbs li+li::before{content:'/'; opacity:.45}
.crumbs a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink); border-bottom-color:var(--line)}
.crumbs [aria-current]{color:var(--ink-2)}

/* --- usein kysyttyä --- */
.faq-block{margin-top:clamp(34px,4vw,56px)}
.faq-block h2{font-size:clamp(1.3rem,2.4vw,1.75rem); margin:0 0 clamp(14px,1.8vw,22px)}
.faq{border-top:1px solid var(--line-soft)}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px; padding:16px 2px; font-weight:600; line-height:1.45;
  transition:color var(--d-base) var(--e-out)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:''; flex:0 0 auto; width:11px; height:11px; margin-top:6px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform var(--d-med) var(--e-out)}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item summary:hover{color:var(--green-ink)}
.faq-a{padding:0 2px 18px; max-width:62ch; color:var(--ink-2); font-size:.95rem; line-height:1.65}
.faq-a p{margin:0}
@media (prefers-reduced-motion:reduce){ .faq-item summary::after{transition:none} }