/* Every colour of the site is set here, named for what it does, so that a
   palette is this block alone. Roles that share a value now can each be
   changed on their own. A *-rgb token is "r, g, b", for the see-through
   uses in rgba(). */
:root {
  /* Text, the page, cards */
  --ink: #2e2622;
  --ink-soft: #5a4c45;
  --heading: #2e2622;
  --page-rgb: 255, 252, 247;       /* also the header, see-through */
  --page: rgb(var(--page-rgb));
  --surface: #ffffff;              /* cards, form fields, the menu panel */
  --line: #eadccf;                 /* hairlines and card borders */
  --field-line: #a08a7b;           /* form fields and radios */
  --focus: #1f5a96;
  --error: #a8173a;

  /* Links and accents */
  --link: #b33a2b;                 /* also text buttons and outline buttons */
  --link-hover: #8e2a1f;
  --accent: #b33a2b;               /* the stressed word in the name and the front page's heading */
  --accent-ink: #9a2a1e;           /* prices, chips, the form's status */
  --accent-line: #de5d4c;          /* underlines, quote bars, hover borders, dashed boxes */

  /* Buttons */
  --primary: #b33a2b;              /* solid buttons, the skip link */
  --primary-hover: #8e2a1f;
  --on-primary: #ffffff;
  --soft: #f6d6c3;                 /* the soft button */
  --soft-hover: #f0c3a9;
  --on-soft: #2e2622;

  /* Hover and selected */
  --hover: #f8ebe2;                /* menu links, outline buttons, chips, a checked radio */
  --hover-alt: #fbeee6;            /* the cleaning services' menu column */
  --selected: #b33a2b;             /* a checked radio's border, a focused field, checkboxes */

  /* Sections that alternate with the page */
  --tint: #f7efe4;
  --tint-alt: #f9ece3;

  /* Highlight boxes: cleaning tiles, price chips and cards, notes */
  --notice: #fbeae0;
  --notice-line: #efcdbb;
  --notice-rule: #f2dace;          /* above a price card's details */
  --notice-dots: #e7c9b9;          /* between a price card's rows */
  --notice-ink: #7f2a1e;
  --draft-line: #efd3c4;           /* under the draft banner, otherwise a notice */

  /* Warnings: the registration notice's bar, "!" and popover. Yellow, so
     they stand out and don't read as the peach draft banner. Contrast:
     --warn-ink on --warn-bg 12.1:1, on --warn-mark 8.4:1; --warn-edge
     against white 3.9:1, against --warn-bg 3.4:1; --focus on --warn-bg
     6.3:1. */
  --warn-bg: #fff1bf;              /* the bar, the popover */
  --warn-mark: #f5c542;            /* the "!" badges */
  --warn-edge: #a87a00;            /* the bar's rule, the badges' and popover's edges */
  --warn-ink: #3a2c05;             /* text, the "!", "Lue lisää" and "Sulje" */

  /* Dark bands (the call to action, the contact details) and the footer */
  --band: #ffbf99;
  --band-ink: #de5d4c;             /* on the band's light button */
  --footer: #ffbf99;
  --on-dark-rgb: 26, 20, 17;       /* also the rules and outline buttons, see-through */
  --on-dark: rgb(var(--on-dark-rgb));
  --on-dark-soft: #3d322c;         /* running text */
  --on-dark-label: #4f413a;        /* labels and hours in the contact details */
  --on-dark-faint: #5a4c45;        /* the footer's credits */
  --on-dark-hover: #8e2a1f;        /* links */

  /* Decoration: blobs, icon circles, behind photos */
  --deco: #e3ebdf;                 /* icon and tick circles, the about blob, behind photos */
  --deco-alt: #f4d3c0;             /* icon circles in highlight boxes, the shape by the hero photo */
  --deco-pale: #f1f4ec;            /* the hero blob, the eyebrow, a price card's arrow, the model form */
  --deco-pale-alt: #f9e8de;        /* the other blobs */
  --icon: #4d7253;                 /* icons in circles, ticks, arrows */
  --icon-strong: #3d6244;          /* the service tiles' icons, the medicines note */

  /* The area map */
  --map-area: #7a9e7e;
  --map-border: #2c4a32;
  --map-edge: #ffffff;
  --map-water: #c8dce1;
  --map-land: #e7e2db;
  --map-land-text: #5f5650;

  /* Shadows */
  --shadow-rgb: 122, 62, 40;       /* cards and forms */
  --shadow-menu-rgb: 46, 34, 28;   /* the menu panel */

  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { line-height: 1.2; color: var(--heading); margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 7.5vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--primary); color: var(--on-primary);
  padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; color: var(--on-primary); }

/* ---------- demo banner ---------- */
.demo-bar {
  background: var(--notice);
  border-bottom: 1px solid var(--draft-line);
  color: var(--notice-ink);
  font-size: .85rem;
  text-align: center;
  padding: 6px 16px;
}
.demo-bar a { color: var(--notice-ink); font-weight: 600; white-space: nowrap; }

/* ---------- registration notice ---------- */
/* While an application to a register is pending (site.registrations). It
   stays after launch, so it is warning yellow and left-aligned, unlike the
   peach, centred draft banner above it, and hard to miss. */
.reg-bar {
  background: var(--warn-bg);
  border-bottom: 2px solid var(--warn-edge);
  color: var(--warn-ink);
  font-size: .9rem;
  line-height: 1.45;
}
.reg-bar .wrap { padding-top: 8px; padding-bottom: 8px; }
.reg-bar summary, .reg-line { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.reg-bar summary { list-style: none; cursor: pointer; }
.reg-bar summary::-webkit-details-marker { display: none; }
.reg-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--warn-mark); color: var(--warn-ink);
  border: 1px solid var(--warn-edge);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; line-height: 1;
}
.reg-more { color: var(--warn-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.reg-more::after {
  content: ""; display: inline-block; width: .5em; height: .5em; margin: 0 0 .2em .45em;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform .15s ease;
}
.reg-bar details[open] .reg-more::after { transform: translateY(.25em) rotate(-135deg); }
.reg-bar summary:hover .reg-more { text-decoration-thickness: 2px; }
.reg-bar details p { margin: 6px 0 4px 32px; max-width: 46em; color: var(--warn-ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--page-rgb), .94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(6px)) {
  .site-header { backdrop-filter: blur(6px); background: rgba(var(--page-rgb), .85); }
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--ink); }
/* The round logo, as in the footer. On a wide screen it is big enough for
   the name along its top to be read, and the header grows to fit it; below
   900px it is as big as the row leaves room for. */
.brand-mark { flex: none; width: 56px; height: 56px; }
@media (min-width: 900px) {
  .brand-mark { width: 80px; height: 80px; }
  .site-header .wrap { padding-top: 6px; padding-bottom: 6px; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand-name span { color: var(--accent); }
.brand-tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 3px;
}

/* One <details> menu serves both widths: "Valikko" holding everything on a
   phone, "Palvelut" next to the plain links on a wide screen. It opens
   without JavaScript; sivu.js only closes it on an outside click or Esc. */
.site-header .wrap { position: relative; }
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-link {
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: .98rem;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--link-hover); border-bottom-color: var(--accent-line); }

.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--ink);
  padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px;
}
.menu > summary::-webkit-details-marker { display: none; }
/* The arrows and ticks drawn in CSS are masks over a background colour, so
   that they take theirs from the tokens; an image can't. */
.menu > summary::after {
  content: ""; width: 16px; height: 16px;
  background: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .15s ease;
}
.menu[open] > summary::after { transform: rotate(180deg); }
.menu > summary:hover, .menu[open] > summary { border-color: var(--accent-line); background: var(--hover); }

.menu-panel {
  position: absolute; z-index: 60; top: calc(100% + 1px); left: 12px; right: 12px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 18px 40px rgba(var(--shadow-menu-rgb), .16);
  padding: 18px 20px 20px;
  display: grid; gap: 18px;
  max-height: calc(100dvh - 80px); overflow: auto;
}
@media (min-width: 900px) {
  .menu-panel { max-height: calc(100dvh - 100px); }
}
.menu-head {
  margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-panel a {
  display: block; padding: 8px 12px; margin: 0 -12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.menu-panel a:hover { background: var(--hover); color: var(--link-hover); }
.menu-panel a[aria-current="page"] { background: var(--hover); font-weight: 700; color: var(--link-hover); }
.menu-group.clean a:hover, .menu-group.clean a[aria-current="page"] { background: var(--hover-alt); }
.menu-more { border-top: 1px solid var(--line); padding-top: 12px !important; }

.when-wide { display: none; }
@media (min-width: 640px) {
  .menu-panel { grid-template-columns: 1fr 1fr; }
  .menu-panel.single { grid-template-columns: none; }
  .menu-more { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .when-wide { display: revert; }
  .when-narrow, .menu-panel .when-narrow { display: none; }
  /* The nav spans the header's height, so the panel still drops from the
     header's bottom edge, but lines up with the nav: two columns end under
     its last link, a single column starts under "Palvelut". */
  .site-nav { position: relative; align-self: stretch; }
  .menu-panel { left: auto; right: 0; width: 600px; }
  .menu-panel.single { left: 0; right: auto; width: 320px; }
}
/* The header is one row: the logo with the name and tagline, the menu, and
   the call button. Below 900px the menu is a three-line icon, and below
   442px the call button is only the phone icon (both keep their words for
   screen readers), so that the name fits on one line with the tagline under
   it. Narrower still, the gaps tighten, then the name gets smaller and the
   tagline's letters closer together. */
.brand-name { white-space: nowrap; }
@media (max-width: 899px) {
  .menu > summary { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .menu > summary::after { display: none; }
  .menu > summary svg { width: 22px; height: 22px; }
}
@media (max-width: 441px) {
  .site-header .call { padding: 12px; }
  .call-text { display: none; }
}
@media (max-width: 381px) {
  .site-header .wrap { gap: 6px; }
}
@media (max-width: 361px) {
  .brand-name { font-size: 1rem; }
  .brand-tag { letter-spacing: .08em; }
}
@media (max-width: 341px) {
  .brand-name { font-size: .875rem; }
  .brand { gap: 8px; }
  .brand-tag { letter-spacing: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--on-primary);
  border: 2px solid var(--primary);
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-soft {
  background: var(--soft); border-color: var(--soft); color: var(--on-soft);
}
.btn-soft:hover { background: var(--soft-hover); border-color: var(--soft-hover); color: var(--on-soft); }
.btn-line {
  background: transparent; color: var(--link); border-color: var(--accent-line);
}
.btn-line:hover { background: var(--hover); color: var(--link-hover); border-color: var(--link); }
.btn-small { padding: 9px 16px; font-size: .95rem; white-space: nowrap; }

.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--link);
  text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.textlink:hover { color: var(--link-hover); }
/* A link standing on its own, with an icon or an arrow, is underlined only on
   hover and focus, like the footer's. Links inside running text keep theirs. */
.textlink:hover, .textlink:focus-visible { text-decoration: underline; }
.textlink svg { width: 18px; height: 18px; flex: none; }

/* ---------- blobs ---------- */
.blobbed { position: relative; overflow: hidden; }
.blobbed > .wrap { position: relative; z-index: 1; }
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 62% 38% 54% 46% / 45% 57% 43% 55%;
}

/* ---------- hero ---------- */
.hero { padding: 44px 0 56px; background: var(--page); }
.hero .blob-a { width: 460px; height: 400px; background: var(--deco-pale); top: -150px; right: -170px; }
.hero .blob-b { width: 260px; height: 240px; background: var(--deco-pale-alt); bottom: -120px; left: -110px;
                border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%; }

.hero-grid { display: grid; gap: 36px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--deco-pale); color: var(--accent-ink);
  font-size: .9rem; font-weight: 600;
  padding: 5px 14px; border-radius: 999px; margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; background: var(--accent-line);
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 36em; }
.hero .lead strong { color: var(--ink); }
.hero .buyers { color: var(--ink-soft); max-width: 36em; }
.hero .buyers strong { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 10px; }
.call-note { font-size: .95rem; color: var(--ink-soft); margin: 0 0 28px; }
.call-note a { font-weight: 600; }

.hero-photo { position: relative; max-width: 440px; width: 100%; margin: 0 auto; }
.hero-photo .frame {
  aspect-ratio: 1 / 1.08; overflow: hidden;
  background: var(--deco);
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero-photo::before {
  content: ""; position: absolute; right: -14px; top: -10px; z-index: 0;
  width: 36%; height: 36%;
  background: var(--deco-alt);
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
}
.hero-photo .frame { position: relative; z-index: 1; }

.highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.highlights li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
}
/* The icon in a .dot or a tile's .icon is drawn in currentColor. */
.dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--deco); color: var(--icon); display: grid; place-items: center; margin-top: 2px;
}
.dot svg { width: 17px; height: 17px; }
.highlights strong { display: block; color: var(--ink); line-height: 1.3; }
.highlights span { color: var(--ink-soft); font-size: .95rem; }

@media (min-width: 640px) {
  .highlights { grid-template-columns: repeat(3, 1fr); }
  .highlights li { flex-direction: column; }
}
@media (min-width: 900px) {
  .hero { padding: 64px 0 80px; }
  .hero-grid { grid-template-columns: 1.3fr .8fr; gap: 56px; }
}

/* ---------- sections ---------- */
/* Anchors stop below the sticky header: 69px high, 93px from 900px up. */
section { scroll-margin-top: 76px; }
.section { padding: 64px 0; }
.section .lead { color: var(--ink-soft); font-size: 1.08rem; max-width: 40em; }
.tint { background: var(--tint); }
.tint-butter { background: var(--tint-alt); }

/* ---------- about ---------- */
#minusta .blob-c { width: 340px; height: 300px; background: var(--deco); top: -120px; left: -150px; opacity: .7; }
.about { display: grid; gap: 32px; align-items: center; }
.about p { color: var(--ink-soft); }
.about .promise {
  background: var(--surface);
  border-left: 5px solid var(--accent-line);
  border-radius: 0 16px 16px 0;
  padding: 14px 18px; color: var(--ink); font-weight: 500;
}
.creds { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.creds li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px;
  font-size: .93rem; font-weight: 600; color: var(--accent-ink);
}
.creds li.soft { background: var(--notice); border-color: var(--notice-line); color: var(--notice-ink); }

.about > div { max-width: 46em; }

/* ---------- service tiles: links to the service pages ---------- */
.tiles { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.tiles.two { grid-template-columns: none; }
@media (min-width: 720px) { .tiles.two { grid-template-columns: repeat(2, 1fr); } }

.service {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
a.service:hover { color: inherit; box-shadow: 0 10px 28px rgba(var(--shadow-rgb), .14); transform: translateY(-2px); }
.service .icon {
  width: 56px; height: 56px; margin-bottom: 14px;
  background: var(--deco); color: var(--icon-strong);
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
  display: grid; place-items: center;
}
.service .icon svg { width: 28px; height: 28px; }
.service h3 { margin-bottom: .4em; }
.service p { color: var(--ink-soft); margin: 0 0 16px; }
.service .from { margin-top: auto; font-weight: 700; color: var(--accent-ink); margin-bottom: 10px; }
.service .go { font-weight: 600; color: var(--link); text-underline-offset: 3px; }
a.service:hover .go, a.service:focus-visible .go { text-decoration: underline; }
.service .go::after { content: " \2192"; }
.service.clean { background: var(--notice); border-color: var(--notice-line); }
.service.clean .icon { background: var(--deco-alt); }

/* the two branches on the front page */
.branch { scroll-margin-top: 76px; }
@media (min-width: 900px) { section, .branch { scroll-margin-top: 100px; } }
.branch + .branch { margin-top: 48px; }
.branch-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.branch-head h3 { font-size: clamp(1.3rem, 4vw, 1.6rem); margin: 0; }
.branch-head p { margin: 0; color: var(--ink-soft); }

/* ---------- how to buy ---------- */
.buy { display: grid; gap: 18px; margin-top: 30px; }
.buy-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(var(--shadow-rgb), .08);
}
.buy-card .dot { width: 44px; height: 44px; margin: 0 0 14px; }
.buy-card .dot svg { width: 22px; height: 22px; }
.buy-card p { color: var(--ink-soft); }
.buy-card p:last-child { margin-bottom: 0; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* anywhere: a word longer than the line (hankauspesimellä/harjalla) breaks
   rather than widening its card past a 320 px screen. */
.ticks li { position: relative; padding-left: 30px; color: var(--ink-soft); overflow-wrap: anywhere; }
/* The circle, and the tick over it. */
.ticks li::before, .ticks li::after {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 19px; height: 19px;
}
.ticks li::before { border-radius: 50%; background: var(--deco); }
.ticks li::after {
  background: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.buy-card.wide { background: var(--notice); box-shadow: 0 1px 0 var(--notice-line); }
.buy-card.wide .dot { background: var(--deco-alt); }

.no-meds {
  margin-top: 18px;
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 2px dashed var(--accent-line);
  border-radius: var(--radius); padding: 16px 20px;
}
.no-meds .dot { width: 40px; height: 40px; margin: 0; background: var(--deco-pale); color: var(--icon-strong); }
.no-meds p { margin: 0; font-weight: 600; color: var(--ink); }

@media (min-width: 820px) {
  .buy { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .buy-card.wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr 1fr; gap: 0 26px; align-items: start; }
  .buy-card.wide .dot { grid-row: span 2; }
  .buy-card.wide h3 { grid-column: 2 / -1; }
  /* A card alone on its row takes the row, its icon beside the text. */
  .buy-card.full { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 0 26px; align-items: start; }
  .buy-card.full .dot { grid-row: span 2; }
}

/* ---------- photos ---------- */
.photo { margin: 0; }
.photo .frame {
  position: relative; overflow: hidden;
  background: var(--deco);
  border-radius: var(--radius);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

.photo-wide { margin-top: 36px; }
.photo-wide .frame { aspect-ratio: 4 / 3; border-radius: 28px 72px 28px 72px; }
@media (min-width: 640px) {
  .photo-wide .frame { aspect-ratio: 16 / 6; border-radius: 32px 120px 32px 120px; }
}

/* ---------- prices ---------- */
.price {
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--notice-line);
  border-radius: var(--radius);
  padding: 22px 22px 16px;
}
.price h3 { font-size: 1.08rem; margin-bottom: .5em; }
.price .amount {
  margin: 0; font-weight: 700; font-size: 1.75rem; line-height: 1.1;
  color: var(--accent-ink); letter-spacing: -.01em;
}
.price .amount small { font-size: .95rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.price .basis { margin: 4px 0 12px; font-size: .93rem; color: var(--ink-soft); }

.price details { border-top: 1px solid var(--notice-rule); }
/* Closed cards line up; an opened card grows on its own */
@media (min-width: 640px) {
  .price h3 { min-height: 2.4em; }
  .price .basis { min-height: 3.2em; }
}
.price summary {
  position: relative;
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0 6px; font-weight: 600; color: var(--link);
}
.price summary::-webkit-details-marker { display: none; }
.price summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--deco-pale);
  transition: transform .15s ease;
}
/* The arrow, over the circle: centred in the summary's content box, as the
   circle is. */
.price summary::before {
  content: ""; position: absolute; z-index: 1; right: 0; top: 12px; bottom: 6px; margin: auto 0;
  width: 28px; height: 28px;
  background: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .15s ease;
}
.price details[open] summary::after, .price details[open] summary::before { transform: rotate(180deg); }
.price summary:hover { color: var(--link-hover); }
.price .more { padding: 6px 0 8px; font-size: .96rem; color: var(--ink-soft); }
.price .more p { margin: 10px 0 0; }
.price .more h4 { font-size: .95rem; margin: 16px 0 4px; color: var(--ink); }

.rows { margin: 0; }
/* The label takes the room the price leaves, as it did. Only when even its
   longest word doesn't fit beside the price, on a narrow phone, the price
   drops under it, still on the right, instead of widening the card past the
   screen. */
.rows div {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px;
  padding: 7px 0; border-bottom: 1px dotted var(--notice-dots);
}
.rows div:last-child { border-bottom: 0; }
.rows dt { flex: 1 1 0; color: var(--ink-soft); }
.rows dd { margin: 0 0 0 auto; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }

.callout {
  margin-top: 26px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--notice-line);
}
.callout .dot { width: 44px; height: 44px; }
.callout .dot svg { width: 22px; height: 22px; }
.callout h3 { margin-bottom: .3em; }
.callout p { margin: 0 0 .6em; color: var(--ink-soft); }
.callout p:last-child { margin-bottom: 0; }

/* The "!" by the kotitalousvähennys while the ennakkoperintärekisteri is
   pending (site.registrations), and the explanation it opens, in the bar's
   warning yellow. Its tap area reaches past the circle. */
.reg-info {
  position: relative;
  display: inline-grid; place-items: center; vertical-align: .12em;
  width: 26px; height: 26px; margin-left: .3em; padding: 0;
  border: 1px solid var(--warn-edge); border-radius: 50%;
  background: var(--warn-mark); color: var(--warn-ink);
  font: inherit; font-size: .85rem; font-weight: 800; line-height: 1;
  cursor: pointer;
}
.reg-info::before { content: ""; position: absolute; inset: -9px; }
.reg-info:hover { border-color: var(--warn-ink); }
/* Without anchor positioning, in the middle of the screen like a small
   dialog; with it, under the "!". */
.reg-pop {
  width: min(24rem, calc(100vw - 32px));
  margin: auto; padding: 16px 18px 12px;
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid var(--warn-edge); border-radius: 16px;
  box-shadow: 0 18px 40px -12px rgba(var(--shadow-menu-rgb), .3);
  font-size: .96rem; line-height: 1.55;
}
.reg-pop::backdrop { background: rgba(var(--shadow-menu-rgb), .08); }
.reg-pop p { margin: 0 0 6px; color: var(--warn-ink); }
.reg-close {
  display: block; margin-left: auto; padding: 6px 2px;
  border: 0; background: none; color: var(--warn-ink);
  font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.reg-close:hover { text-decoration-thickness: 2px; }
@supports (position-area: bottom) {
  .reg-info { anchor-name: --reg-info; }
  .reg-pop {
    position-anchor: --reg-info;
    position-area: bottom span-all; justify-self: anchor-center;
    margin: 10px 16px;
    position-try-fallbacks: flip-block;
  }
}

/* ---------- map ---------- */
/* The map of the area, drawn by tools/kartta/. Edge to edge on a phone. */
.area-map { max-width: 520px; margin: 0 -20px 26px; }
.area-map figcaption { margin: 10px 20px 0; font-size: .82rem; color: var(--ink-soft); }
.kartta { width: 100%; height: auto; overflow: hidden; }
.kartta path.naapuri { fill: var(--map-land); stroke: var(--map-edge); stroke-width: 1; stroke-linejoin: round; }
.kartta .raja { fill: none; stroke: var(--map-border); stroke-width: 3.5; stroke-linejoin: round; }
.kartta .alue { fill: var(--map-area); stroke: var(--map-edge); stroke-width: 1; stroke-linejoin: round; }
.kartta .vesi { fill: var(--map-water); fill-rule: evenodd; }
.kartta .viiva { fill: none; stroke: var(--ink); stroke-width: 1; }
/* A name's halo is the colour of what it stands on. */
.kartta text {
  font-size: 13.5px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--map-area); stroke-width: 3px; stroke-linejoin: round;
}
.kartta text.ulkona { stroke: var(--map-water); }
.kartta text.naapuri { font-size: 12px; font-weight: 400; fill: var(--map-land-text); stroke: var(--map-land); }
@media (min-width: 560px) {
  .area-map { margin: 0 0 26px; }
  .area-map figcaption { margin: 10px 0 0; }
  .kartta { border-radius: 14px; }
  .kartta text { font-size: 12px; }
  .kartta text.naapuri { font-size: 10.5px; }
}

/* ---------- contact ---------- */
#yhteystiedot .blob-d { width: 380px; height: 340px; background: var(--deco-pale-alt); bottom: -160px; right: -160px; }
.contact { display: grid; gap: 26px; margin-top: 28px; }
#yhteydenotto, #varaus {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: 0 1px 0 var(--line), 0 10px 28px rgba(var(--shadow-rgb), .10);
}
.field { margin-bottom: 16px; }
.field label, fieldset legend { display: block; font-weight: 600; margin-bottom: 6px; }
.hint { font-weight: 400; color: var(--ink-soft); font-size: .92rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--field-line);
  border-radius: 12px;
  padding: 11px 13px;
}
select { appearance: none; padding-right: 44px; }
/* A select has no ::after, so its arrow is drawn by the .select around it,
   14px in from the select's right border, as a background image was. */
.select { position: relative; }
.select::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 16px; width: 18px;
  background: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  pointer-events: none;
}
input:hover, textarea:hover, select:hover { border-color: var(--accent-line); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; border-color: var(--selected); }
textarea { min-height: 130px; resize: vertical; }
textarea.address { min-height: 0; }
/* An empty date field has no height in iOS Safari, and centres its value. */
input[type="date"] { min-height: 3.1em; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field.short input { max-width: 16em; }

fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
legend { padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radio {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--field-line); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; font-weight: 500;
}
.radio:has(input:checked) { border-color: var(--selected); background: var(--hover); }
.radios.list { flex-direction: column; align-items: flex-start; }
.radios.list .radio { width: fit-content; }
.hint.under { margin: 4px 0 0 18px; }
.field > p.hint { margin: 0 0 8px; }
.field.more { margin: 14px 0 0; }
/* The form backend's second honeypot (macros/forms.njk), hidden here rather
   than in the markup. */
.field.extra { display: none; }
.radio input, .check input { width: 20px; height: 20px; accent-color: var(--selected); margin: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; }
.check input { flex: none; margin-top: 3px; }

/* The booking form: what is required, errors, the terms and what follows. */
.req-note { margin: 0 0 18px; color: var(--ink-soft); }
.error {
  margin: 0 0 8px; padding-left: 12px; border-left: 4px solid var(--error);
  color: var(--error); font-weight: 600;
}
[aria-invalid="true"] { border-color: var(--error) !important; }
.terms-note { margin: 4px 0 22px; }
.after-submit { margin: 12px 0 0; color: var(--ink-soft); }
/* Room above a field for its label and error, below the sticky header. */
#varaus input, #varaus textarea { scroll-margin-top: 150px; }

.status { margin: 14px 0 0; min-height: 1.5em; font-weight: 500; color: var(--accent-ink); }
.status p { margin: 0; }
noscript .status { margin: 0 0 14px; }
.radio:has([aria-invalid="true"]) { border-color: var(--error); }
.status:not(:empty) {
  background: var(--notice); border-radius: 12px; padding: 10px 14px;
}

.contact-side { display: grid; gap: 18px; align-self: start; }
.direct {
  background: var(--band);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.direct h2, .direct h3 { color: var(--on-dark); font-size: 1.15rem; }
.direct dl { margin: 0; display: grid; gap: 14px; }
.direct dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--on-dark-label); }
.direct dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.direct a, .direct .textlink { color: var(--on-dark); }
.direct a:hover, .direct .textlink:hover { color: var(--on-dark-hover); }
/* A number or account alone under its label needs no underline, but "Katso
   kartalta" under the area's name, in the same colour, keeps it. */
.direct dd > a:only-child { text-decoration: none; }
.direct dd > a:only-child:hover, .direct dd > a:only-child:focus-visible { text-decoration: underline; }
.direct .big { font-size: 1.35rem; }
.direct .hours { font-size: .95rem; font-weight: 400; color: var(--on-dark-label); }
.photo-place .frame { aspect-ratio: 16 / 10; border-radius: 72px 28px 72px 28px; }

@media (min-width: 900px) {
  .contact { grid-template-columns: 1.4fr .8fr; gap: 32px; }
  #yhteydenotto, #varaus { padding: 30px 28px; }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--footer); color: var(--on-dark-soft);
  padding: 44px 0 30px; font-size: .96rem;
}
.site-footer h3 { color: var(--on-dark); font-size: 1rem; margin-bottom: .5em; }
/* Like the menu, the footer is lists of links: underlined only on hover and
   focus. Links inside running text keep their underline (base styles). */
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark-hover); }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer p { margin: 0 0 .35em; }
.footer-logo { display: block; width: 160px; height: 160px; margin: 0 0 16px; }
.cols { display: grid; gap: 24px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* Inline, so the icon doesn't grow the line; middle centres it on the x-height. */
.site-footer .with-icon svg {
  display: inline-block; width: 18px; height: 18px;
  vertical-align: middle; margin-right: 7px;
}
@media (min-width: 640px) { .cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cols { grid-template-columns: 1fr 1.2fr 1.2fr 1fr; } }
@media (min-width: 980px) { .cols.three { grid-template-columns: 1fr 1.2fr 1fr; } }
.site-footer .legal {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid rgba(var(--on-dark-rgb), .2);
  font-size: .9rem;
}
.credits { margin-top: 14px; font-size: .82rem; color: var(--on-dark-faint); }

/* ---------- breadcrumb ---------- */
.crumbs { padding-top: 18px; font-size: .92rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li { color: var(--ink-soft); }
.crumbs li + li::before { content: "\203A"; margin: 0 8px 0 4px; color: var(--accent-line); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--link-hover); }

/* ---------- service page hero ---------- */
.hero.page { padding: 22px 0 52px; }
.hero.page h1 { font-size: clamp(2rem, 6.5vw, 3rem); }
.price-chip {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--notice); border: 1px solid var(--notice-line);
  border-radius: 16px; padding: 10px 16px; margin: 4px 0 0;
}
.price-chip strong { font-size: 1.4rem; color: var(--accent-ink); line-height: 1.1; }
.price-chip span { color: var(--ink-soft); font-size: .95rem; }
@media (min-width: 900px) {
  .hero.page { padding: 26px 0 72px; }
  .hero.page .hero-grid { margin-top: 18px; }
}

/* ---------- what's included ---------- */
.incl { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 720px) { .incl { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1000px) { .incl.three { grid-template-columns: repeat(3, 1fr); } }
.incl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.tint .incl-card { border-color: transparent; box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(var(--shadow-rgb), .07); }
.incl-card h3 { font-size: 1.1rem; }
.incl-card p { color: var(--ink-soft); }
.incl-card .ticks { margin-bottom: 4px; }
.incl-card .note { font-size: .95rem; color: var(--ink-soft); margin: 12px 0 0; }
.incl-card.wide { grid-column: 1 / -1; }
.incl-card.wide .ticks { columns: 2 300px; column-gap: 32px; display: block; }
.incl-card.wide .ticks li { break-inside: avoid; margin-bottom: 8px; }
.plain-note { margin: 22px 0 0; color: var(--ink-soft); max-width: 44em; }

.principle {
  margin-top: 24px; background: var(--surface);
  border-left: 5px solid var(--accent-line); border-radius: 0 16px 16px 0;
  padding: 16px 20px; max-width: 52em;
}
.principle p { color: var(--ink-soft); }
.principle p:last-child { margin-bottom: 0; }

/* ---------- price lists ---------- */
.prices { display: grid; gap: 18px; margin-top: 26px; align-items: start; }
@media (min-width: 720px) { .prices { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1000px) { .prices.three { grid-template-columns: repeat(3, 1fr); } }
.price .basis { min-height: 0 !important; }
.price h3 { min-height: 0 !important; }
.price .more-link { display: inline-block; margin: 12px 0 6px; font-weight: 600; text-decoration: none; }
.price .more-link:hover, .price .more-link:focus-visible { text-decoration: underline; }
.price .more-link::after { content: " \2192"; }
.price .fine { margin: 10px 0 4px; font-size: .93rem; color: var(--ink-soft); }
.group-title { margin-top: 48px; }
.group-title:first-of-type { margin-top: 0; }

/* ---------- who does the work ---------- */
.who > div { max-width: 46em; }
.who p { color: var(--ink-soft); }

/* ---------- call to action band ---------- */
.cta {
  background: var(--band); color: var(--on-dark);
  border-radius: var(--radius); padding: 30px 24px;
  display: grid; gap: 18px; align-items: center;
}
.cta h2 { color: var(--on-dark); font-size: clamp(1.4rem, 4.5vw, 1.9rem); margin-bottom: .3em; }
.cta p { margin: 0; color: var(--on-dark-soft); }
.cta .btn-row { margin: 0; }
.cta .btn-light { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cta .btn-light:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.cta .btn-line { color: var(--on-dark); border-color: rgba(var(--on-dark-rgb), .6); }
.cta .btn-line:hover { background: rgba(var(--on-dark-rgb), .12); color: var(--on-dark); border-color: var(--on-dark); }
@media (min-width: 900px) { .cta { grid-template-columns: 1.3fr auto; padding: 36px 40px; } }
/* Three buttons go under the text, not beside it. */
@media (min-width: 900px) { .cta.stacked { grid-template-columns: 1fr; } }

.also { margin: 26px 0 0; color: var(--ink-soft); }
.also a { font-weight: 600; }
#yhteydenotto { scroll-margin-top: 90px; }
@media (min-width: 900px) { #yhteydenotto { scroll-margin-top: 114px; } }
.after-crumbs { margin-top: .6em; }
.section.page-top { padding-top: 0; }
.callout.sage { border-color: var(--line); }

/* ---------- terms ---------- */
.toc { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.toc a:hover { border-color: var(--accent-line); background: var(--hover); }
.terms { padding: 44px 0; }
.terms + .terms { border-top: 1px solid var(--line); }
.terms .wrap > * { max-width: 44em; }
.terms h3 { margin-top: 1.6em; }
.terms h2 + h3 { margin-top: 0; }
.terms p { color: var(--ink-soft); }
.channels { margin: 0 0 1em; padding-left: 1.2em; color: var(--ink-soft); }
.model-form {
  background: var(--deco-pale); border-radius: 16px; padding: 18px 20px; font-size: .96rem;
}
.model-form p { margin: 0 0 .5em; }
.model-form p:last-child { margin-bottom: 0; }
.trader { margin: 0; }
.trader div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.trader div:last-child { border-bottom: 0; }
.trader dt { color: var(--ink-soft); }
.trader dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }