/* Tilitoimisto N.M, site stylesheet. Look 1d Hygge (decision P11, 00-brief.md section Brandi).
   Base layout from the approved mockup (mallisivu/oma-tyyli.html) with the 1d theme rules of
   esimerkit/testisivusto.py flattened in. Every text colour passes WCAG AA on its surface:
   navy 12.4, text 10.2, muted 6.0, coral text 5.7 on white; muted 5.1 and coral text 4.8 on the
   card colour; on light coral only navy, text and muted (4.6) are used as text colours. */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/dm-sans-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: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/dm-sans-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; }

:root {
  --navy: #1d3557;          /* tummansininen: headings, buttons, links */
  --text: #33415c;          /* body text */
  --muted: #586479;         /* secondary text */
  --tausta: #faf6f0;        /* oat background bands */
  --pinta: #f2ebe1;         /* cards */
  --pinta2: #f9ddd3;        /* light coral: featured card, step numbers */
  --line: #ebe2d6;          /* lines */
  --gold: #e07a5f;          /* coral, decoration only, never text */
  --gold-text: #a54c35;     /* coral as text colour */
  --white: #ffffff;
  --r: 26px;                /* card radius */
  --font: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 17px/1.6 var(--font); overflow-wrap: anywhere; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; color: var(--navy); letter-spacing: -0.01em; overflow-wrap: anywhere; }
h1 em, h2 em { font-style: normal; }
a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 60; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Test build bar */
.testbar { background: var(--pinta2); color: var(--navy); font-size: 14px; text-align: center; padding: 6px 16px; }

/* Header */
.header { background: var(--white); position: relative; z-index: 10; }
.header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 96px; gap: 24px; }
.logo { display: flex; flex: none; align-items: center; }
.logo img { display: block; height: 44px; width: auto; max-width: none; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav a { color: var(--navy); text-decoration: none; font-weight: 500; font-size: 17px; padding: 10px 12px; border-radius: 999px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--tausta); }
.actions { display: flex; align-items: center; gap: 18px; }
.phone { color: var(--navy); text-decoration: none; font-weight: 600; white-space: nowrap; }
.btn { display: inline-block; background: var(--navy); color: var(--white); text-decoration: none; font: 600 17px/1.2 var(--font); padding: 13px 24px; border-radius: 999px; white-space: normal; max-width: 100%; text-align: center; border: 0; cursor: pointer; }
.btn:hover { opacity: 0.9; }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); padding: 11.5px 22.5px; }
.btn.ghost:hover { background: var(--white); opacity: 1; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.menu-btn, .phone-icon { display: none; }
/* Header "Kysy" (chat) button: Christian 6.10.2026, audit a35e6b60 (next to the phone and the quote button, not floating) */
.kysy-yla { position: relative; padding: 11.5px 20px; }
.kysy-yla svg { display: none; }
/* Desktop: Kysy stays in the lower right corner while scrolling (Christian 5.11.2026, an exception to "no floating
   elements"). Phones keep it in the sticky header, so the floating one is hidden there and while the chat is open. */
.kysy-kelluva { display: none; }
@media (min-width: 601px) {
  .kysy-kelluva { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 24px; bottom: 24px; z-index: 45; box-shadow: 0 8px 24px rgba(29, 53, 87, 0.22); }
  .kysy-kelluva svg { width: 20px; height: 20px; }
  .kysy-auki .kysy-kelluva { display: none; }
}
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang a { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 7px 11px; line-height: 1; }
.lang a[aria-current="true"] { background: var(--navy); color: var(--white); }
.lang a:not([aria-current="true"]):hover { background: var(--tausta); }
.nav-lang { display: none; }

/* Rating pill (live value from the review endpoint, static fallback) */
.rating { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 10px; margin-top: 20px; padding: 9px 18px; background: var(--white); border-radius: 999px; color: var(--navy); text-decoration: none; font-size: 15.5px; }
.rating .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rating .stars svg { width: 16px; height: 16px; }
.rating b { font-weight: 700; }

/* Home: price band */
.band { background: var(--tausta); padding: 60px 0 52px; }
.intro { text-align: center; margin: 0 auto 46px; max-width: 860px; }
.rule { display: block; width: 44px; height: 2px; background: var(--gold); margin: 0 auto 22px; border: 0; }
.intro h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.015em; }
.intro p { margin: 0; font-size: 19px; color: var(--muted); }
.intro .en-rivi { font-size: 16px; margin-top: 18px; }
.intro .en-rivi a { font-weight: 600; color: var(--navy); text-underline-offset: 4px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.card { background: var(--pinta); border-radius: var(--r); padding: 52px 34px 46px; text-align: center; }
.card .icon { width: 50px; height: 50px; color: var(--gold); margin: 0 auto 24px; display: block; }
.card h2 { font-size: 26px; margin: 0; line-height: 1.2; }
.price { color: var(--navy); font-weight: 700; font-size: 52px; line-height: 1.1; margin: 10px 0 2px; letter-spacing: -0.01em; }
.price small { font-size: 20px; font-weight: 500; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.note { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
.list { list-style: none; padding: 0; margin: 0 auto; display: inline-grid; gap: 13px; text-align: left; }
.list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.list svg { width: 18px; height: 18px; margin-top: 4px; }
.list .ok { color: var(--navy); }
.list .extra { color: var(--gold-text); }
.card.featured { background: var(--pinta2); }
.fine { text-align: center; max-width: 900px; margin: 40px auto 0; font-size: 16px; color: var(--muted); }
.fine p { margin: 0 0 6px; }
.fine .more-link { margin-top: 14px; }
.fine a { font-weight: 600; color: var(--navy); text-underline-offset: 4px; }

/* Steps */
.steps { padding: 64px 0 8px; }
.steps h2 { font-size: 34px; text-align: center; margin: 0 0 34px; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step-list li { padding: 0 8px; text-align: center; }
.step-list .num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pinta2); color: var(--navy); font-weight: 700; font-size: 20px; margin-bottom: 14px; }
.step-list h3 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.step-list p { margin: 0 auto; max-width: 330px; font-size: 16px; color: var(--muted); }

/* Contact box */
.contact { padding: 72px 0 24px; }
.box { background: var(--pinta); color: var(--text); border-radius: calc(var(--r) + 2px); padding: 56px 64px; }
.box.two-col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: start; }
.box h2 { font-size: 34px; line-height: 1.2; margin: 0 0 26px; max-width: 760px; }
.rows { display: grid; gap: 14px; margin-bottom: 30px; }
.row { display: flex; align-items: center; gap: 14px; font-size: 18px; }
.row svg { width: 22px; height: 22px; color: var(--gold-text); flex: none; }
.row > * { min-width: 0; }
.row a { color: var(--navy); font-weight: 600; text-decoration: none; }
.row a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.box .btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.box .small { font-size: 15px; margin: 22px 0 0; max-width: 560px; color: var(--muted); }
.testnote { font-size: 14.5px; color: var(--navy); background: var(--pinta2); border-radius: 14px; padding: 10px 14px; margin: 12px 0 0; }

/* Trust row */
.trust { padding: 40px 0 8px; }
.trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; font-size: 15.5px; color: var(--navy); }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust svg { width: 20px; height: 20px; color: var(--gold); flex: none; }

/* Quote */
.quote { background: var(--tausta); margin-top: 56px; padding: 64px 0 60px; text-align: center; }
.quote .mark { display: block; width: 44px; height: 34px; margin: 0 auto 14px; color: var(--gold); }
.quote blockquote { margin: 0 auto; max-width: 700px; color: var(--navy); font-size: 22px; font-weight: 600; line-height: 1.45; }
.quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 14.5px; color: var(--muted); }

/* Footer */
.footer { background: var(--tausta); color: var(--muted); padding: 30px 0 34px; text-align: center; font-size: 14.5px; margin-top: 56px; }
.quote + .footer, main.no-gap + .footer { margin-top: 0; }
.footer a { color: var(--navy); }
.footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 12px; padding: 0; list-style: none; }
.footer .links a { text-decoration: none; }
.footer .links a:hover { text-decoration: underline; }
.footer p { margin: 0; }

/* Sub page hero */
.crumb { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.crumb li + li::before { content: "/"; margin-right: 6px; color: var(--muted); }
.crumb a { color: var(--muted); }
.hero-s { background: var(--tausta); padding: 44px 0 40px; }
.hero-s h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; max-width: 900px; letter-spacing: -0.015em; }
.hero-s .lead { font-size: 19px; color: var(--muted); margin: 0 0 22px; max-width: 760px; }
.row-btn { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pricepill { display: inline-block; background: var(--white); border-radius: 999px; padding: 9px 18px; font-weight: 600; color: var(--navy); }

/* Content sections */
.sec { padding: 52px 0; }
.sec.tiivis { padding-top: 12px; }
.sec h2, .sec-h { font-size: 30px; line-height: 1.2; margin: 0 0 18px; }
.teksti { max-width: 780px; }
.teksti h2 { font-size: 28px; line-height: 1.25; margin: 38px 0 12px; }
.teksti > h2:first-child, .teksti > .osio:first-child > h2:first-child { margin-top: 0; }
.teksti h3 { font-size: 21px; line-height: 1.3; margin: 26px 0 8px; }
.teksti h4 { font-size: 18px; margin: 20px 0 6px; }
.teksti p, .more .body p { margin: 0 0 14px; }
.teksti ul, .teksti ol, .more .body ul, .more .body ol { margin: 0 0 16px; padding-left: 24px; }
.teksti li, .more .body li { margin: 0 0 6px; }
.teksti blockquote, .more .body blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--navy); }
.teksti dl, .more .body dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; }
.teksti dt, .more .body dt { font-weight: 600; color: var(--navy); }
.teksti dd, .more .body dd { margin: 0; }
.tbl { overflow-x: auto; margin: 8px 0 18px; -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.tbl thead th, .tbl tr:first-child th { background: var(--pinta); color: var(--navy); }
.laatikko { background: var(--tausta); border-radius: 20px; padding: 20px 24px; margin: 0 0 18px; }
.laatikko > :last-child { margin-bottom: 0; }
.laatikko .otsake { font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.panel { background: var(--pinta); border-radius: var(--r); padding: 28px 30px; }
.panel h3 { font-size: 22px; margin: 0 0 14px; }
.panel .list { display: grid; }
.note-s { font-size: 15.5px; color: var(--muted); margin: 18px 0 0; }

/* Read more (details) and FAQ */
.more { max-width: 900px; margin: 0 auto; }
.more > h2, .faq-h { font-size: 28px; margin: 0 0 10px; }
.faq-intro { color: var(--muted); margin: 0 0 14px; }
.more details { border-top: 1px solid var(--line); }
.more details:last-of-type { border-bottom: 1px solid var(--line); }
.more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; }
.more summary::-webkit-details-marker { display: none; }
.more summary h2, .more summary h3, .more summary .q { font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.more summary::after { content: "+"; font-size: 26px; color: var(--gold-text); line-height: 1; flex: none; }
.more details[open] summary::after { content: "\2212"; }
.more .body { padding: 0 4px 20px; }
.more .body h3 { font-size: 18px; margin: 18px 0 6px; }
.more .body h4 { font-size: 17px; margin: 14px 0 4px; }
.more .body .guides { margin: 6px 0 14px; }
.faq-lisa { margin-top: 26px; }
.faq-lisa h3 { font-size: 19px; margin: 18px 0 6px; }
.more.ryhmat h2 { margin-top: 34px; }
.more.ryhmat h2:first-child { margin-top: 0; }

/* Guide cards (related links) */
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide { display: block; background: var(--pinta); border-radius: var(--r); padding: 22px 24px; text-decoration: none; color: var(--text); }
.guide:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
.guide b { display: block; color: var(--navy); font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
.guide .guide-kat { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.guide .guide-kuvaus { display: block; font-size: 15.5px; }
.linkit-jalki { margin: 16px 0 0; }

/* Pricing tiers and calculator */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.tier { background: var(--pinta); border-radius: var(--r); padding: 18px; text-align: center; }
.tier b { display: block; font-size: 34px; color: var(--navy); margin: 4px 0; letter-spacing: -0.01em; }
.tier span { font-size: 15px; color: var(--muted); }
.calc { background: var(--tausta); border-radius: calc(var(--r) + 2px); padding: 30px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 30px; }
.calc > *, .box.two-col > *, .two > *, .seg label { min-width: 0; }
.calc h2 { font-size: 28px; margin: 0 0 6px; }
.calc fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.calc legend { font-weight: 600; color: var(--navy); margin-bottom: 8px; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 500; color: var(--navy); background: var(--white); }
.seg input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.calc .def { font-size: 15px; color: var(--muted); margin-top: 8px; }
.calc .def summary { cursor: pointer; color: var(--navy); font-weight: 500; }
.calc .def ul { margin: 6px 0 0; padding-left: 22px; }
.result { background: var(--white); border-radius: calc(var(--r) - 4px); padding: 24px; align-self: start; }
.result .otsake { font-size: 15.5px; color: var(--muted); margin: 0; }
.result .big { font-size: 46px; font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -0.01em; }
.result .big small { font-size: 18px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.result dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 8px 14px; margin: 18px 0; font-size: 15.5px; }
.result dt { color: var(--muted); }
.result dd { margin: 0; text-align: right; color: var(--navy); font-weight: 600; }
.result .year { border-top: 1px solid var(--line); padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 6px 14px; align-items: baseline; }
.result .year b { font-size: 24px; color: var(--navy); }
.result .fine2 { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
/* "Get this price in writing" under the calculator result (5.11.2026) */
.laskelma-lomake { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.laskelma-lomake h3.otsake { font-size: 18px; margin: 0 0 4px; }
.result .laskelma-lomake .apu { margin: 0 0 16px; }
.result .laskelma-lomake .apu:last-child { margin: 12px 0 0; }
.result .btn { margin-top: 16px; white-space: normal; text-align: center; }

/* Article */
.article { max-width: 780px; margin: 0 auto; padding: 44px 24px 20px; }
.article h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.015em; }
.article .by { color: var(--muted); font-size: 15px; margin: 0 0 30px; }
.article .content { font-size: 18px; line-height: 1.75; }
.article .content h2 { font-size: 28px; line-height: 1.25; margin: 38px 0 12px; }
.article .content h3 { font-size: 21px; margin: 26px 0 8px; }
.article .content h4 { font-size: 18px; margin: 20px 0 6px; }
.article .content p { margin: 0 0 16px; }
.article .content ul, .article .content ol { padding-left: 24px; margin: 0 0 18px; }
.article .content li { margin: 0 0 6px; }
.article .content blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--navy); }
.article .content .laatikko { font-size: 17px; }
.article .content .palvelulaatikko { background: var(--pinta); border-radius: calc(var(--r) + 2px); padding: 24px 26px; margin: 8px 0 28px; font-size: 17px; }
.article .content .palvelulaatikko-otsikko { font-size: 20px; color: var(--navy); margin: 0 0 10px; }
.article .content .palvelulaatikko .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.endcta { max-width: 780px; margin: 10px auto 0; background: var(--pinta); color: var(--text); border-radius: calc(var(--r) + 2px); padding: 30px; }
.endcta h2 { font-size: 26px; margin: 0 0 8px; }
.endcta p { margin: 0 0 18px; }
.endcta .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Blog index */
.bloglist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blogkortti { background: var(--pinta); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; }
.blogkortti .meta { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.blogkortti h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.blogkortti h2 a { text-decoration: none; }
.blogkortti h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.blogkortti p { margin: 0 0 12px; font-size: 16px; }
.blogkortti .lue { margin-top: auto; font-weight: 600; }

/* Forms */
.lomake { max-width: 760px; }
.lomake .kentta { margin: 0 0 18px; }
.lomake label, .lomake .otsake { display: block; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
.lomake input[type="text"], .lomake input[type="email"], .lomake input[type="tel"], .lomake select, .lomake textarea { width: 100%; font: 400 17px/1.4 var(--font); color: var(--text); background: var(--white); border: 1.5px solid #c9bcaa; border-radius: 14px; padding: 11px 14px; }
.lomake textarea { min-height: 140px; resize: vertical; }
.lomake .apu { font-size: 15px; color: var(--muted); margin: 6px 0 0; }
.lomake .valinnat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.lomake .valinnat label { font-weight: 400; color: var(--text); display: flex; gap: 10px; align-items: center; margin: 0; }
.lomake .valinnat input { width: 18px; height: 18px; accent-color: var(--navy); }
.lomake .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lomake fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lomake .virhe { display: none; background: #fbe9e4; color: #7a2e1c; border-radius: 14px; padding: 10px 14px; margin: 0 0 16px; }
.lomake .virhe.nakyy { display: block; }
.lomake .suostumus { font-size: 15px; color: var(--muted); margin: 14px 0 0; }
.kiitos-viesti { background: var(--tausta); border-radius: 20px; padding: 24px; }
.lomake-laatikko { background: var(--white); border-radius: calc(var(--r) - 4px); padding: 28px; }
.merkit { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0 0 22px; font-size: 15px; color: var(--navy); }
.merkit li { display: flex; gap: 8px; align-items: center; }
.merkit svg { width: 16px; height: 16px; color: var(--gold-text); }

/* Contact page map (loads only on click) */
.tnm-kartta { min-height: 240px; border-radius: 20px; background: var(--tausta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; margin: 0 0 18px; }
.tnm-kartta p { margin: 0; }
.tnm-kartta .pieni { font-size: 14px; color: var(--muted); max-width: 420px; }
.kartta-iframe { width: 100%; height: 300px; border: 0; border-radius: 20px; }

/* Cookie banner (consent UI, shown until a choice is made) */
#cookieBanner { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin: 0 auto; background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 10px 30px rgba(29, 53, 87, 0.18); padding: 18px 20px; }
#cookieBanner p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
#cookieBanner .napit { display: flex; flex-wrap: wrap; gap: 10px; }
#cookieBanner button { font: 600 15px/1 var(--font); padding: 12px 18px; border-radius: 999px; cursor: pointer; }
#cookieBanner .hyvaksy { background: var(--navy); color: var(--white); border: 0; }
#cookieBanner .hylkaa { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }

/* Chat panel (opened from a "Kysy" button, never floating on its own) */
.kysy-paneeli { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 16px 40px rgba(29, 53, 87, 0.22); overflow: hidden; }
.kysy-paneeli header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--tausta); }
.kysy-paneeli header b { color: var(--navy); }
.kysy-paneeli .sulje { background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--navy); cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.kysy-viestit { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; }
.kysy-viestit .v { max-width: 88%; padding: 10px 14px; border-radius: 16px; line-height: 1.5; }
.kysy-viestit .v.bot { background: var(--pinta); align-self: flex-start; }
.kysy-viestit .v.me { background: var(--navy); color: var(--white); align-self: flex-end; }
.kysy-viestit .v.me a { color: var(--white); }
.kysy-viestit .ilmoitus { font-size: 13.5px; color: var(--muted); }
.kysy-lomake { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.kysy-lomake input { flex: 1; min-width: 0; font: 400 16px/1.3 var(--font); border: 1.5px solid #c9bcaa; border-radius: 999px; padding: 10px 14px; color: var(--text); }
.kysy-lomake .btn { padding: 10px 18px; font-size: 16px; }
.kysy-ehdotukset, .kysy-toiminnot { display: flex; flex-wrap: wrap; gap: 8px; }
.kysy-ehdotukset .btn, .kysy-toiminnot .btn { padding: 8px 14px; font-size: 15px; white-space: normal; text-align: left; line-height: 1.3; }
.kysy-pyynto { background: var(--tausta); border-radius: 16px; padding: 12px 14px; font-size: 15px; }
.kysy-pyynto p { margin: 0 0 10px; line-height: 1.45; }
.kysy-pyynto fieldset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.kysy-pyynto legend { font-weight: 600; color: var(--navy); margin: 0 0 4px; padding: 0; }
.kysy-pyynto .valinta { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.kysy-pyynto .valinta input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.kysy-pyynto .kentta { margin: 0 0 8px; }
.kysy-pyynto .kentta label { display: block; font-weight: 600; color: var(--navy); margin: 0 0 3px; }
.kysy-pyynto .kentta input { width: 100%; font: 400 16px/1.3 var(--font); color: var(--text); background: var(--white); border: 1.5px solid #c9bcaa; border-radius: 12px; padding: 9px 12px; }
.kysy-pyynto .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kysy-pyynto .ilmoitus { font-size: 13.5px; color: var(--muted); }
.kysy-pyynto .virhe:empty { display: none; }
.kysy-pyynto .virhe { background: #fbe9e4; color: #7a2e1c; border-radius: 12px; padding: 8px 12px; }
.kysy-pyynto .napit { display: flex; flex-wrap: wrap; gap: 8px; }
.kysy-pyynto .napit .btn { padding: 9px 16px; font-size: 15px; }

/* Review thank-you page */
.kiitos-kortti { max-width: 560px; margin: 0 auto; text-align: center; }
.tahdet { display: flex; justify-content: center; gap: 6px; margin: 0 0 20px; }
.tahdet button { background: transparent; border: 0; cursor: pointer; padding: 4px; color: #c9bcaa; }
.tahdet button svg { width: 34px; height: 34px; }
.tahdet button.on { color: var(--gold); }

/* With the Kysy button the full header needs about 70 px more: tighter gaps wherever the full nav shows, the content
   width stays the same above 1280 px (measured 6.10.2026, FI and EN) */
@media (min-width: 1280px) {
  .header .wrap { gap: 12px; }
  .nav a { padding: 10px 6px; }
  .actions { gap: 10px; }
  .kysy-yla { padding: 11.5px 16px; }
}
/* Wide screens: the full header does not fit below 1280px (measured 26.9.2026), so the menu button takes over */
@media (max-width: 1279px) {
  .nav, .actions .phone, .actions .lang { display: none; }
  .menu-btn, .phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); border-radius: 999px; cursor: pointer; }
  .menu-btn svg, .phone-icon svg { width: 26px; height: 26px; }
  .header .wrap { min-height: 72px; }
  .header.open .nav { display: flex; flex-wrap: nowrap; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--white); padding: 8px 16px 18px; border-bottom: 1px solid var(--line); gap: 2px; }
  .header.open .nav a { white-space: normal; padding: 14px 12px; font-size: 18px; border-radius: 14px; }
  .header.open .nav-lang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 12px 4px; margin-top: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
  .header.open .nav-lang a { padding: 6px 12px; font-size: 16px; }
  .header.open .nav-lang a[aria-current="true"] { background: var(--navy); color: var(--white); }
}
@media (max-width: 900px) {
  .actions .btn { display: none; }
  .actions .btn.kysy-yla { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; font-size: 16px; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .box, .box.two-col { grid-template-columns: 1fr; padding: 40px 26px 28px; gap: 28px; }
  .step-list { grid-template-columns: 1fr; gap: 26px; }
  .steps { padding-top: 48px; }
  .steps h2 { font-size: 30px; margin-bottom: 26px; }
  .two, .calc { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .guides, .bloglist { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .logo img { height: 32px; }
  /* Phones: a thin header stays in view while scrolling (Christian 7.10.2026, audit af89999f; 47 % of search clicks) */
  .header { position: sticky; top: 0; box-shadow: 0 1px 0 var(--line); }
  .header .wrap { min-height: 60px; }
  html { scroll-padding-top: 68px; }
  /* Phone header with Kysy: logo, Kysy, phone icon and menu button (measured 6.10.2026 at 390, 375 and 360 px) */
  .header .wrap { gap: 12px; }
  .actions { gap: 4px; }
  .menu-btn, .phone-icon { width: 40px; height: 40px; }
  .actions .btn.kysy-yla { height: 36px; padding: 0 12px; font-size: 15px; }
  .band { padding: 36px 0 38px; }
  .intro { margin-bottom: 28px; }
  .intro h1, .hero-s h1, .article h1 { font-size: 31px; }
  .intro p { font-size: 17px; }
  .card { padding: 40px 22px 38px; }
  .price { font-size: 46px; }
  .box h2 { font-size: 27px; }
  .row { font-size: 17px; }
  .contact { padding-top: 44px; }
  .quote blockquote { font-size: 20px; }
  .sec { padding: 40px 0; }
  .sec h2, .sec-h, .teksti h2, .article .content h2 { font-size: 25px; }
  .calc { padding: 22px 18px; }
  .article { padding: 32px 16px 16px; }
  .article .content { font-size: 17px; }
  .lomake .valinnat { grid-template-columns: 1fr; }
  .teksti dl, .more .body dl { grid-template-columns: 1fr; gap: 2px; }
  .teksti dd, .more .body dd { margin-bottom: 8px; }
  .lomake-laatikko { padding: 20px 16px; }
}
@media (max-width: 374px) {
  .logo img { height: 30px; }
}
/* Narrowest phones (320 px, 288 px of room): 26 px logo and Kysy as a chat icon; the label stays for screen readers */
@media (max-width: 359px) {
  .header .wrap { gap: 8px; }
  .logo img { height: 26px; }
  .actions .btn.kysy-yla { width: 40px; height: 40px; padding: 0; }
  .kysy-yla svg { display: block; width: 22px; height: 22px; }
  .kysy-yla span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Layout helpers used by the generator */
h1, .sec h2, .teksti h2, .box h2 { text-wrap: balance; }
.laskuri-intro { margin: 0 0 22px; }
.hinnat-osio { padding-bottom: 10px; }
.linkit .linkkiryhma + .linkkiryhma { margin-top: 44px; }
.linkkiryhma > p { max-width: 780px; }
.article + .sec .linkit, .article ~ .sec .linkit { max-width: 828px; }
.yhteys-lisa { margin-top: 24px; }
.box .oikea .lomake-laatikko { padding: 26px; }
.lomake-otsikko { font-size: 22px; margin: 0 0 8px; }
.lomake-otsikko.pieni { font-size: 18px; margin-top: 22px; }
.box .oikea p { margin: 0 0 12px; }
.box .oikea .small { color: var(--muted); font-size: 15px; }
.kiitos-osio { padding: 56px 0; }
.kiitos-kortti #feedbackSection { margin-top: 18px; }
.kiitos-kortti .takaisin { margin-top: 24px; }
.faq-ryhma + .faq-ryhma { margin-top: 40px; }
.lomakeosio .lomake-laatikko { background: var(--tausta); margin-top: 8px; max-width: 828px; }
.lomake-jalki { margin-top: 18px; }
#lomake .lomake-laatikko { background: var(--tausta); max-width: 828px; }
.kiitos-osio { margin-bottom: -56px; }
.tahdet button { color: var(--muted); }
.tahdet button.on { color: var(--gold-text); }
.virhekoodi { font-size: 15px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.kicker { font-size: 15px; font-weight: 600; color: var(--muted); margin: 0 0 6px; letter-spacing: 0; text-transform: none; }
.hero-s .kicker { margin-bottom: 8px; }
.box .box-intro { margin: -10px 0 18px; max-width: 700px; }
.endcta .small { font-size: 15px; margin: 14px 0 0; }
.teksti p.otsake, .article .content p.otsake, .more .body p.otsake { font-weight: 700; color: var(--navy); margin: 18px 0 6px; }
.box h3.box-intro, .box h4.box-intro { font-size: 19px; margin: 18px 0 6px; }
.box p.box-intro { color: var(--text); }
/* Home pages: quote buttons under the heading, and a quote button after each price card where the cards are
   stacked (head conductor decision 9.10.2026, audit e9cba55f) */
.intro .row-btn { justify-content: center; margin-top: 22px; }
.card-cta { display: none; margin: 26px 0 0; }
@media (max-width: 900px) {
  .card-cta { display: block; }
}
/* /tarjous: the rest of the introduction after the form */
#lomake .lomake-jalki { margin-top: 28px; }