/* Aku & Iida Kodinpalvelut Oy - uudistusdemo
 * Layoutit: byq Babka -kokoelma (vanilla-kaannos). Brandi: TASTE-SKILL/brands/akujaiida.md
 * Fontit: Poppins 500/600 + Mulish 400-700, SIL OFL 1.1 (ks. fonts/fonts.css)
 */

/* ---------- fontit (sama sisalto kuin fonts/fonts.css, polut tasta tiedostosta) ---------- */
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/mulish-var-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/mulish-var-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokenit ---------- */
:root {
  --paper: #FFFFFF;
  --mist: #F2F5F0;
  --ink: #13241B;
  --muted: #4F5E55;
  --green: #007A2B;
  --green-dark: #00601F;
  --green-logo: #009634;
  --line: rgba(19, 36, 27, .14);
  --line-dark: rgba(255, 255, 255, .18);
  --on-dark: rgba(255, 255, 255, .78);
  --error: #A3241A;
  --scrim: 10, 20, 14;

  --r-btn: 10px;
  --r-card: 16px;
  --r-panel: 24px;
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --gap: clamp(20px, 2.4vw, 32px);

  --sec: clamp(64px, 7.5vw, 96px);
  --sec-lg: clamp(72px, 9vw, 120px);

  --f-display: 'Poppins', 'Segoe UI', sans-serif;
  --f-body: 'Mulish', 'Segoe UI', sans-serif;

  --fs-body: clamp(17px, 0.3vw + 15.8px, 18px);
  --fs-lead: clamp(18px, 0.6vw + 15px, 20px);
  --fs-h1: clamp(40px, 4.3vw, 66px);
  --fs-h2: clamp(30px, 3.3vw, 48px);
  --fs-h3: clamp(22px, 1.6vw, 26px);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 68px;
}

/* ---------- perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
main { display: block; }
[hidden] { display: none !important; }
main:focus { outline: none; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-btn);
  font-weight: 700;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hero :focus-visible, .site-footer :focus-visible, .cta-panel :focus-visible { outline-color: #fff; }

.icon { width: 16px; height: 16px; flex: none; }

/* ---------- typografia ---------- */
.h2 { font-size: var(--fs-h2); line-height: 1.15; }
.h2--md { font-size: clamp(30px, 2.9vw, 42px); }
.h2--narrow { max-width: 22ch; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
.muted { color: var(--muted); }
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; color: var(--muted); }
.prose--muted { color: var(--muted); }

.text-link {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .3s var(--ease-out);
}
.text-link:hover { color: var(--green-dark); text-decoration-thickness: 2px; }

/* Lehtiviiva: 2 px suora vihrea viiva H2:n ylla, piirtyy vasemmalta */
.leaf::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-bottom: 24px;
  background: var(--green-logo);
  border-radius: 0;
  transform-origin: left center;
}
.leaf--center::before { margin-inline: auto; transform-origin: center; }
.js .leaf::before { transform: scaleX(0); transition: transform .7s var(--ease-out) .1s; }
.js .leaf.is-in::before, .reveal-all .leaf::before { transform: scaleX(1); }

/* ---------- napit ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1.2;
  letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn__arrow { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--sm { min-height: 46px; padding: 0 18px; font-size: 15px; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); }
.btn--secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, .9); color: #fff; background: transparent; }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--mist); }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ---------- navi (byq babka-navigation-bar-1, kelluva) ---------- */
.site-header {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 60;
  pointer-events: none;
}
.navbar {
  pointer-events: auto;
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 24px;
  min-height: var(--nav-h);
  padding: 10px 12px 10px 12px;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: 0 8px 30px rgba(19, 36, 27, .10);
}
.brand { flex: none; border-radius: 8px; }
.brand__logo { height: 44px; width: auto; border-radius: 8px; }
.nav-links { margin-inline: auto; }
.nav-links ul { display: flex; align-items: center; gap: clamp(18px, 1.7vw, 30px); }
.nav-links a {
  position: relative; display: block; padding: 10px 0;
  font-weight: 600; font-size: 16px; line-height: 1.3; white-space: nowrap;
  color: var(--ink);
  transition: color .4s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--green); border-radius: 0;
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.nav-links a:hover { color: var(--green); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--ink);
  padding: 10px 0;
}
.nav-phone .icon { color: var(--green); }
.nav-phone:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.burger {
  display: none;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--paper); cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink);
  border-radius: 0; transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.nav-open .burger span:first-child { top: 21.5px; transform: rotate(45deg); }
.nav-open .burger span:last-child { top: 21.5px; transform: rotate(-45deg); }

.nav-panel {
  position: fixed; inset: -16px 0 0 0; z-index: 1;
  background: var(--paper);
  pointer-events: auto;
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
  overflow-y: auto;
}
.nav-open .nav-panel { visibility: visible; opacity: 1; transition: opacity .3s var(--ease-out); }
.nav-panel__inner {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding-top: calc(16px + var(--nav-h) + 40px);
  padding-bottom: 40px;
}
.nav-panel__list li { border-bottom: 1px solid var(--line); }
.nav-panel__list a {
  display: block; padding: 16px 0;
  font-family: var(--f-display); font-weight: 500; font-size: 28px; line-height: 1.2;
  letter-spacing: -0.02em;
}
.nav-panel__list a[aria-current="page"] { color: var(--green); }
.nav-panel__contact { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.nav-panel__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 500; font-size: 24px; color: var(--green);
}
.nav-panel__phone .icon { width: 20px; height: 20px; }
.nav-open { overflow: hidden; }

@media (max-width: 1239px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: block; }
  .nav-actions { margin-left: auto; gap: 10px; }
}
@media (max-width: 559px) {
  :root { --nav-h: 60px; }
  .site-header { top: 12px; }
  .navbar { padding: 8px 8px 8px 10px; }
  .brand__logo { height: 38px; }
  .nav-cta { display: none; }
}

/* ---------- hero (byq babka-hero-1) ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(640px, 100svh, 1080px);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero--sub { min-height: clamp(600px, 82svh, 860px); }
.hero--contact { min-height: clamp(460px, 60svh, 660px); }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media picture { height: 100%; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
}
.js .hero__img { transform: scale(1.05); transition: transform 1.4s var(--ease); }
.hero.is-loaded .hero__img, .reveal-all .hero__img { transform: none; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(var(--scrim), .25) 0, rgba(var(--scrim), 0) 180px),
    linear-gradient(to top, rgba(var(--scrim), .72) 0%, rgba(var(--scrim), .40) 30%, rgba(var(--scrim), 0) 62%),
    linear-gradient(to right, rgba(var(--scrim), .64) 0%, rgba(var(--scrim), .60) var(--scrim-x), rgba(var(--scrim), 0) calc(var(--scrim-x) + var(--scrim-fade, 10%)));
}
.hero__content {
  position: relative;
  padding-top: calc(16px + var(--nav-h) + 48px);
  padding-bottom: clamp(56px, 8vh, 96px);
}
/* Teksti pysyy vasemmassa puoliskossa (scrimin tasainen alue 0-49 %), kasvot oikealla kirkkaina */
.hero {
  --copy-w: min(700px, 45vw);
  /* scrimin tasainen alue paattyy tekstipalstan oikeaan reunaan (+16 px), myos leveilla naytoilla,
     joissa .wrap on keskitetty */
  --scrim-x: calc(max(var(--gutter), (100vw - var(--wrap)) / 2) + var(--copy-w) + 16px);
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: var(--copy-w); }
.hero__h1 {
  font-size: var(--fs-h1); line-height: 1.08; max-width: 20ch; color: #fff;
}
.hero--sub .hero__h1 { font-size: clamp(36px, 4.2vw, 62px); max-width: 21ch; }
.hero--contact { --copy-w: min(700px, 36vw); }
[data-page="piha"] .hero { --scrim-fade: 20%; }
/* Kasvot kuvan keskella (2026-10-14 kuvat, kuva taytetaan leveydelta eli x-rajausta ei ole):
   tekstipalsta kapeammaksi ja scrimin haivytys lyhyeksi, jotta kasvot eivat tummu */
[data-page="index"] .hero { --copy-w: min(620px, 41vw); --scrim-fade: 6%; }
[data-page="index"] .hero__h1 { font-size: clamp(40px, 3.85vw, 58px); }
[data-page="kodinpalvelut"] .hero { --copy-w: min(520px, 34vw); --scrim-fade: 5%; }
[data-page="kodinpalvelut"] .hero__h1 { font-size: clamp(34px, 3.3vw, 50px); }
.hero--contact .hero__h1 { font-size: clamp(34px, 3.5vw, 52px); max-width: 22ch; }
.hero__lede { font-size: clamp(18px, 0.6vw + 15px, 20px); line-height: 1.55; color: rgba(255, 255, 255, .92); max-width: 52ch; }

/* Rivinousu: JS jakaa H1:n riveihin vasta kun fontit ovat valmiit */
.js .hero__h1[data-split] { visibility: hidden; }
.js .hero__h1.is-split, .reveal-all .hero__h1[data-split] { visibility: visible; }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line__in { display: block; transform: translateY(105%); transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.hero.is-loaded .line__in { transform: none; }
.js .hero [data-rise] { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero.is-loaded [data-rise] { opacity: 1; transform: none; transition-delay: var(--rise-delay, .45s); }
.hero.is-loaded [data-rise] + [data-rise] { transition-delay: calc(var(--rise-delay, .45s) + .12s); }
.reveal-all .hero [data-rise] { opacity: 1; transform: none; }

/* Kapea nakyma: kuva ylos, teksti tummalle pohjalle kuvan haivytyksen paalle (kasvot jaavat nakyviin) */
@media (max-width: 899px) {
  .hero, .hero--sub, .hero--contact { min-height: 0; justify-content: flex-start; }
  .hero__media { position: relative; inset: auto; height: clamp(340px, 60svh, 560px); z-index: 0; }
  .hero--contact .hero__media { height: clamp(300px, 46svh, 440px); }
  .hero__img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .hero__scrim {
    background: linear-gradient(to bottom, rgba(19, 36, 27, 0) 45%, rgba(19, 36, 27, .7) 78%, rgb(19, 36, 27) 100%);
  }
  .hero__content { margin-top: -72px; padding-top: 0; padding-bottom: 56px; z-index: 1; }
  .hero__copy, .hero--contact .hero__copy { gap: 20px; max-width: 640px; }
}
@media (max-width: 479px) {
  .hero .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------- osiot ---------- */
.section { padding-top: var(--sec); padding-bottom: var(--sec); }
.section--lg { padding-top: var(--sec-lg); padding-bottom: var(--sec-lg); }
.section--mist { background: var(--mist); }

/* Kolme kuvakorttia (byq babka-cms-grid-1) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 18px; color: var(--ink); }
.card__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.card__media picture, .card__img { width: 100%; height: 100%; }
.card__img { object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .6s var(--ease-out); }
.card:hover .card__img { transform: scale(1.03); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card__title { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -0.015em; text-wrap: pretty; }
.card__arrow { width: 28px; height: 28px; flex: none; color: var(--green); transition: transform .4s var(--ease-out); }
.card:hover .card__arrow { transform: translateX(4px); }
.card:hover .card__title { color: var(--green); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .cards { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Yritysesittely (byq babka-intro-text-2) */
.intro2 {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start;
}
.intro2__head { grid-column: 1 / span 5; }
.intro2__body { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 20px; color: var(--muted); }
.intro2__body .btn-row { margin-top: 12px; }
@media (max-width: 991px) {
  .intro2 { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .intro2__head, .intro2__body { grid-column: auto; }
}

/* Kuva + teksti -rivit (byq babka-value-features-2) */
.features { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); }
.feature {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center;
}
.feature__media { grid-column: 1 / span 6; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 2; background: var(--mist); }
.feature__media picture, .feature__img { width: 100%; height: 100%; }
.feature__img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.feature__copy { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 24px; }
.feature__copy .btn-row { margin-top: 8px; }
.feature--flip .feature__media { grid-column: 7 / span 6; grid-row: 1; }
.feature--flip .feature__copy { grid-column: 1 / span 5; grid-row: 1; }
@media (max-width: 1199px) {
  .feature__copy { grid-column: 7 / span 6; }
  .feature--flip .feature__copy { grid-column: 1 / span 6; }
}
@media (max-width: 899px) {
  .feature { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .feature__media, .feature__copy, .feature--flip .feature__media, .feature--flip .feature__copy { grid-column: auto; grid-row: auto; }
}

/* CTA-paneeli (byq babka-cta-3) */
.section--cta { padding-top: var(--sec); padding-bottom: var(--sec); }
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-panel);
  min-height: clamp(420px, 52vw, 620px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
  background: var(--ink);
}
.cta-panel picture { position: absolute; inset: 0; z-index: -2; }
.cta-panel__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.cta-panel__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(19, 36, 27, .16) 0%, rgba(19, 36, 27, 0) 55%),
    rgba(19, 36, 27, var(--cta-scrim, .63));
}
.cta-panel__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.cta-panel__title {
  font-size: clamp(28px, 3.4vw, 50px); line-height: 1.12; max-width: 22ch; color: #fff;
}
.cta-panel--long .cta-panel__title { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.25; max-width: 34ch; }

/* Palvelulista (byq babka-cms-grid-2) */
.list-head { display: flex; flex-direction: column; gap: 20px; max-width: 62ch; color: var(--muted); }
.list-head .h2 { color: var(--ink); }
.list-head__body { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .list-head--split {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    max-width: none; align-items: start;
  }
  .list-head--split .list-head__title { grid-column: 1 / span 5; }
  .list-head--split .list-head__body { grid-column: 7 / span 6; max-width: 62ch; }
}
.list-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(48px, 6vw, 80px); align-items: start;
}
.list-head:not(.list-head--split) + .list-grid { margin-top: clamp(32px, 4vw, 48px); }
.list-grid__media { grid-column: 1 / span 5; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--mist); }
.list-grid__media picture, .list-grid__img { width: 100%; height: 100%; }
.list-grid__img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.list-grid__list { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 0; }
.list-grid__list .h3 { margin-bottom: 20px; }
.list-grid--flip .list-grid__list { grid-column: 1 / span 6; grid-row: 1; }
.list-grid--flip .list-grid__media { grid-column: 8 / span 5; grid-row: 1; }
.rows { border-bottom: 1px solid var(--line); }
.rows li { border-top: 1px solid var(--line); padding: 18px 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.list-grid__after { margin-top: 28px; color: var(--muted); }
.list-grid__list .btn-row { margin-top: 20px; }
@media (max-width: 899px) {
  .list-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .list-grid__media, .list-grid__list, .list-grid--flip .list-grid__list, .list-grid--flip .list-grid__media { grid-column: auto; grid-row: auto; }
  .list-grid__media { aspect-ratio: 4 / 3; }
}

/* Hinnasto (byq babka-pricing-1) */
.pricing {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pricing__copy { display: flex; flex-direction: column; gap: 24px; }
.pricing__copy .prose { font-size: 17px; }
.pricing__copy .btn-row { margin-top: 8px; }
.price-card {
  background: var(--paper); border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column;
}
.price-card .h3 { margin-bottom: 16px; }
.price-list { border-bottom: 1px solid var(--line); }
.price-list li {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 4px 24px;
  border-top: 1px solid var(--line); padding: 16px 0;
}
.price-list .when { font-weight: 700; color: var(--ink); }
.price-list .price { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.price__part { display: block; white-space: nowrap; }
.price-card__strong { margin-top: 24px; font-weight: 700; font-size: 17px; }
.price-card__note { margin-top: 6px; font-size: 17px; color: var(--muted); }
@media (max-width: 991px) {
  .pricing { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
}
@media (max-width: 559px) {
  .price-list li { grid-template-columns: minmax(0, 1fr); }
  .price-list .price { text-align: left; }
}

/* Kotitalousvahennys (byq babka-intro-text-1) */
.center-col {
  max-width: 760px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.center-col__text { color: var(--muted); max-width: 65ch; }

/* Yhteystiedot + lomake (byq babka-contact-1) */
.contact {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start;
}
.contact__info { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 20px; }
.contact-rows { margin-top: 20px; border-bottom: 1px solid var(--line); }
.contact-rows li { border-top: 1px solid var(--line); padding: 16px 0; overflow-wrap: anywhere; }
.contact-rows__name { font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
.contact-rows__phone {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -0.02em; color: var(--green); white-space: nowrap;
}
.contact-rows__phone:hover { color: var(--green-dark); }
.form-card {
  grid-column: 7 / span 6;
  background: var(--mist); border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 40px);
}
.h2--form { font-size: 28px; line-height: 1.2; margin-bottom: 28px; }
@media (max-width: 991px) {
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .contact__info, .form-card { grid-column: auto; }
}

/* Lomake */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .checks legend { font-weight: 700; font-size: 16px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; min-height: 52px;
  padding: 13px 16px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font-size: 17px; line-height: 1.4;
  transition: border-color .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 1px var(--green); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.checks { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checks legend { padding: 0; margin-bottom: 12px; line-height: 1.45; }
.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 17px; }
.check input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 24px; height: 24px; flex: none;
  border: 1px solid var(--muted); border-radius: 4px; background: var(--paper);
  display: grid; place-content: center; cursor: pointer;
}
.check input::after {
  content: ""; width: 12px; height: 7px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.check input:checked { background: var(--green); border-color: var(--green); }
.check input:checked::after { opacity: 1; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form__submit { margin-top: 4px; }
.form-msg { font-weight: 700; font-size: 17px; }
.form-msg--error { color: var(--error); }
.form-success {
  background: var(--paper); border-radius: var(--r-card);
  padding: 28px; border: 1px solid var(--line);
}
.form-success p { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.35; letter-spacing: -0.015em; }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 2px solid var(--green); }

/* 404 (byq babka-utility-page-1) */
.notfound { padding-top: 200px; padding-bottom: clamp(96px, 12vw, 160px); }
.notfound__col { max-width: 720px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.notfound__code { font-family: var(--f-display); font-weight: 500; font-size: 20px; color: var(--muted); margin-bottom: -12px; }
.notfound__title { font-size: clamp(40px, 6vw, 80px); line-height: 1.05; }

/* ---------- footer (byq babka-footer-5) ---------- */
.site-footer { background: var(--ink); color: #fff; padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(32px, 4vw, 48px); }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; color: var(--on-dark); }
.footer-brand__logo { align-self: flex-start; margin-bottom: 12px; border-radius: 8px; }
.footer-brand__logo img { height: 56px; width: auto; border-radius: 8px; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer-list { display: flex; flex-direction: column; gap: 12px; }
.footer-list a { color: var(--on-dark); transition: color .4s var(--ease-out); overflow-wrap: anywhere; }
.footer-list a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-list a[href^="tel:"] { color: #fff; font-weight: 700; }
.footer-label { font-weight: 700; color: #fff; }
.footer-mark {
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(16px, 2vw, 28px);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(72px, 17vw, 260px); line-height: 1; letter-spacing: -0.035em;
  white-space: nowrap; color: #fff;
  overflow: hidden;
}
.footer-bottom {
  margin-top: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
  color: var(--on-dark); font-size: 16px;
}
@media (max-width: 767px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 419px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobiilin soittopalkki ---------- */
.callbar { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: 76px; }
  .callbar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .callbar a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 12px; border-radius: var(--r-btn);
    font-family: var(--f-display); font-weight: 500; font-size: 16px; white-space: nowrap;
  }
  .callbar__call { background: var(--green); color: #fff; }
  .callbar__cta { border: 1px solid var(--ink); color: var(--ink); }
}
@media (max-width: 359px) {
  .callbar a { font-size: 15px; padding: 0 8px; }
}

/* ---------- reveal (vain JS:n kanssa piilotettu) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in, .reveal-all .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero [data-rise], .js .hero__img, .line__in { opacity: 1 !important; transform: none !important; }
  .js .leaf::before { transform: none !important; }
  .js .hero__h1[data-split] { visibility: visible; }
}

@media print {
  .site-header, .callbar, .hero__scrim { display: none; }
  .hero { color: var(--ink); background: none; }
}

/* ---------- go-live 26.10.2026: palveluajat, lomakkeen ohjeet, tietosuojaseloste ---------- */
.contact-hours { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.contact-hours .h3 { margin-bottom: 2px; }
.form-note { font-size: 16px; line-height: 1.5; color: var(--muted); }
.form-note--top { margin-top: -12px; margin-bottom: 24px; }
.form .form-success { margin-top: 4px; font-size: 17px; }
.price-card__note--vat { margin-top: 14px; color: var(--ink); font-weight: 600; }
.footer-label--gap { margin-top: 12px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer-bottom a { color: var(--on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-bottom a:hover { color: #fff; }
.legal { padding-top: clamp(140px, 14vw, 200px); padding-bottom: clamp(80px, 10vw, 128px); }
.legal__col { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.legal__title { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06; }
.legal__date { color: var(--muted); margin-bottom: 8px; }
.legal .h3 { margin-top: 20px; }
.legal p { color: var(--muted); max-width: 65ch; }