/* =========================================================
   NORDIC TURF · etusivu v3 = v2 + client feedback round 1:
   photo routes with category tags, groundwork cross-section,
   yard price examples, refs button in the hero, quote-form
   category chips and a mobile quick-contact bar.
   Every rule maps to a theme.json token, a block style variation
   (styles/*.json) or a child style.css rule — see spec.md.
   Fonts = the exact self-hosted subsets for production (fonts/).
   ========================================================= */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-opsz-800.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-wght400-700.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-latin-500.woff2) format("woff2")}
:root{
  --havu:#0F2A1F; --kuusi:#1F6747; --verso:#C8F06A; --kaste:#F6F8F0;
  --sammal:#DDE7C9; --lakka:#FF8A3D; --harmaa:#4E5F55; --base:#fff;
  /* colour roles (theme.json custom tokens) */
  --cta-bg:var(--verso); --cta-fg:var(--havu); --cta-line:var(--verso);
  --focus:var(--kuusi);
  --rule:color-mix(in srgb,var(--havu) 25%,transparent);
  --soil:color-mix(in srgb,var(--lakka) 30%,var(--kaste));
  --f-display:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;
  --f-body:"Schibsted Grotesk",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,monospace;
  --fs-label:clamp(0.75rem,0.72rem + 0.13vw,0.8125rem);
  --fs-small:clamp(0.875rem,0.85rem + 0.1vw,0.9375rem);
  --fs-body:clamp(1rem,0.97rem + 0.13vw,1.0625rem);
  --fs-lead:clamp(1.125rem,1.06rem + 0.26vw,1.3125rem);
  --fs-h3:clamp(1.375rem,1.2rem + 0.75vw,1.875rem);
  --fs-tile:clamp(1.25rem,1.1rem + 0.6vw,1.625rem);
  --fs-h2m:clamp(2.25rem,1.5rem + 2.8vw,3.75rem);
  --fs-section:clamp(2.25rem,1.45rem + 3.4vw,4.5rem);
  --fs-lead-xl:clamp(1.125rem,1rem + 0.45vw,1.5rem);
  --sp-20:clamp(0.625rem,0.6rem + 0.1vw,0.75rem);
  --sp-30:clamp(1rem,0.87rem + 0.65vw,1.5rem);
  --sp-40:clamp(1.5rem,1.37rem + 0.65vw,2rem);
  --sp-50:clamp(2rem,1.6rem + 1.96vw,3.5rem);
  --sp-60:clamp(2rem,1.48rem + 2.6vw,4rem);
  --sp-70:clamp(3.5rem,2.4rem + 4.6vw,7rem);
  --gutter:clamp(1.25rem,0.6rem + 2.666667vw,3rem);
  --wide:1280px;
  /* PAGE GRID (spec §f) = the route grid: word | half | figure */
  --g-fig:10.5rem; --g-gap:var(--sp-40);
  --bar-h:3.5rem; --hdr:86px;
  /* arrow + play icons (latin subsets have no U+2192) – used as CSS masks */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
}
@media (max-width:1100px){:root{--g-fig:8rem}}
@media (max-width:1199px){:root{--hdr:79px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--base);color:var(--havu);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.6;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;margin:0;letter-spacing:-0.03em;line-height:1.05}
p{margin:0}
/* in-page anchors land below the sticky header */
[id]{scroll-margin-top:calc(var(--hdr) + 1.5rem)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* alignwide inside root padding = the real header's content edges */
.wide{max-width:var(--wide);margin-inline:auto}
.pad{padding-inline:var(--gutter)}
.wide.pad{max-width:calc(var(--wide) + 2*var(--gutter))}
/* is-style-nt-split (core/group): the page grid, used by every section head + body split */
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--g-fig);column-gap:var(--g-gap)}
.rgrid > *{grid-column:1/2;min-width:0}
.rgrid > :last-child{grid-column:2/4}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* =========================================================
   HEADER  parts/header.html: logo · main nav (click-open sub-menus) · quote button · burger (<1200 px)
   ========================================================= */
.site-header{position:sticky;top:0;z-index:100;background:var(--base);border-bottom:1px solid color-mix(in srgb,var(--havu) 10%,transparent);box-shadow:0 8px 32px color-mix(in srgb,var(--havu) 7%,transparent)}
.site-header .in{position:relative;height:var(--hdr);display:flex;align-items:center;gap:clamp(1rem,.4rem + 1vw,2rem)}
.brand{flex:none;display:block}
.brand img{width:156px;height:auto}
.nav-list{display:flex;align-items:center;gap:clamp(.25rem,-.4rem + 1vw,1rem);margin:0;padding:0;list-style:none}
.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:.35em;min-height:2.75rem;padding:.25rem .5rem;border:0;border-radius:2px;background:none;font:600 .9375rem/1.2 var(--f-body);color:var(--havu);text-decoration:none;cursor:pointer;white-space:nowrap}
button.nav-top::after{content:"";width:.5em;height:.5em;margin-top:-.2em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
button.nav-top[aria-expanded="true"]::after{transform:translateY(.2em) rotate(-135deg)}
.nav-top:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em}
.nav-item[data-current] > .nav-top{box-shadow:inset 0 -3px 0 var(--verso)}
.nav-sub{position:absolute;top:calc(100% + .6rem);left:-.5rem;z-index:5;display:none;min-width:16rem;margin:0;padding:.5rem 0;list-style:none;background:var(--base);border:1px solid color-mix(in srgb,var(--havu) 14%,transparent);border-top:3px solid var(--verso);border-radius:0 0 4px 4px;box-shadow:0 18px 40px color-mix(in srgb,var(--havu) 14%,transparent)}
.nav-top[aria-expanded="true"] + .nav-sub{display:block}
.nav-sub a{display:block;padding:.6rem 1.1rem;font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--havu);text-decoration:none}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--kaste);text-decoration:underline;text-underline-offset:.25em}
.nav-sub a[aria-current="page"]{font-weight:700}
.nav-extra{display:none}
.hdr-quote{margin-left:auto;flex:none}
.btn--sm{min-height:2.5rem;padding:.45rem 1.1rem;font-size:.9375rem;font-family:var(--f-body)}
.btn--sm:hover{transform:none}
.burger{display:none}
@media (max-width:1280px) and (min-width:1200px){.nav-top{font-size:.875rem;padding-inline:.35rem}.brand img{width:136px}}
@media (max-width:1199px){
  .site-header .in{justify-content:space-between}
  .brand img{width:clamp(108px,25vw,140px)}
  .site-header .hdr-quote{display:none}
  .burger{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.25rem .25rem .25rem .6rem;margin-right:-.25rem;border:0;background:none;font:600 .9375rem var(--f-body);color:var(--havu);cursor:pointer}
  .burger-box{position:relative;width:24px;height:16px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:border-color .2s}
  .burger-box::before,.burger-box::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor;transition:transform .2s}
  .burger[aria-expanded="true"] .burger-box{border-color:transparent}
  .burger[aria-expanded="true"] .burger-box::before{transform:rotate(45deg)}
  .burger[aria-expanded="true"] .burger-box::after{transform:rotate(-45deg)}
  .mainnav{position:fixed;left:0;right:0;top:var(--hdr);bottom:0;z-index:99;display:none;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-20) var(--gutter) calc(var(--sp-60) + env(safe-area-inset-bottom));background:var(--base);border-top:1px solid color-mix(in srgb,var(--havu) 10%,transparent)}
  .mainnav.is-open{display:block}
  .nav-list{display:block}
  .nav-item{border-bottom:1px solid color-mix(in srgb,var(--havu) 12%,transparent)}
  .nav-top{width:100%;justify-content:space-between;min-height:3.5rem;padding:.5rem 0;font-family:var(--f-display);font-weight:800;font-size:1.375rem;letter-spacing:-.025em}
  .nav-item[data-current] > .nav-top{box-shadow:none;color:var(--kuusi)}
  .nav-sub{position:static;min-width:0;padding:0 0 .75rem;border:0;box-shadow:none}
  .nav-sub a{padding:.65rem 0 .65rem .9rem;font-size:1.0625rem;border-left:2px solid var(--sammal)}
  .nav-sub a:hover,.nav-sub a:focus-visible{background:none}
  .nav-extra{display:grid;gap:.75rem;margin-top:var(--sp-40)}
  .nav-extra .btn{justify-content:center}
  .nav-extra p{font-size:var(--fs-body)}
  .nav-extra p a{font-weight:600;text-underline-offset:.25em}
  .nav-extra span{color:var(--harmaa)}
  html.nav-open,html.nav-open body{overflow:hidden}
}

/* ---------- buttons (core/button variations) ---------- */
.btns{display:flex;flex-wrap:wrap;gap:var(--sp-20)}
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:3.25rem;padding:.85rem 1.5rem;border-radius:999px;font-family:var(--f-body);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;transition:background-color .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn::after{content:"";flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.btn--press{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-line)}
.btn--press:hover{background:var(--havu);color:var(--verso);border-color:var(--havu)}
.btn--ink{background:var(--havu);color:var(--base);border-color:var(--havu)}
.btn--ink:hover{background:var(--kuusi);border-color:var(--kuusi)}
/* is-style-nt-line (core/button): havu outline pill */
.btn--line{background:transparent;color:var(--havu);border-color:var(--havu)}
.btn--line:hover{background:var(--havu);color:var(--base)}
/* is-style-nt-hero (core/button): large quote pill, same arrow as every other button */
.btn--hero,.btn--ghost{min-height:3.75rem;padding:.9rem 1.9rem;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem)}
.btn--hero{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg)}
.btn--hero:hover{background:var(--base);color:var(--havu);border-color:var(--base)}
/* is-style-nt-ghost (core/button): white outline pill on the hero photo, second action */
.btn--ghost{padding-inline:1.7rem;background:transparent;color:var(--base);border-color:var(--base)}
.btn--ghost:hover{background:var(--base);color:var(--havu)}
/* is-style-nt-link (core/paragraph link): bold underlined text link + arrow */
.tlink,.contacts-more a,.post .read{display:inline-flex;align-items:center;gap:.4em;min-height:2.75rem;font-weight:600;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.tlink::after,.contacts-more a::after,.post .read::after{content:"";flex:none;width:.9em;height:.9em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}

/* is-style-nt-label */
.label{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
/* is-style-nt-sticker */
.sticker{display:grid;place-content:center;text-align:center;width:8.25rem;aspect-ratio:1;border-radius:50%;background:var(--lakka);color:var(--havu);transform:rotate(-9deg);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.25;box-shadow:0 10px 24px color-mix(in srgb,var(--havu) 18%,transparent)}
.sticker strong{display:block;font-family:var(--f-display);font-size:2.75rem;letter-spacing:-.04em;text-transform:none;line-height:.95;font-weight:800}
/* is-style-nt-head (core/group nt-split): h2 left, lead on the second column */
.sec-head{align-items:end;margin-bottom:var(--sp-50)}
.sec-head .label{color:var(--kuusi)}
.sec-head h2{font-size:var(--fs-h2m);letter-spacing:-0.04em;line-height:.98;text-wrap:balance}
.sec-head .label + h2{margin-top:var(--sp-20)}
.sec-lead{font-size:var(--fs-lead);line-height:1.45;max-width:32rem;text-wrap:pretty}
/* BACKGROUND RHYTHM: hero photo · routes + client logos (kaste) · quote wizard (havu) · references (kaste) · Meistä (havu)
   · groundwork (white) · prices + samples (kaste) · blog (white) · quick contact (verso) · footer (havu). */
/* placeholder figures (prices waiting for the client) always read as grey */
.ph{color:var(--harmaa)}

/* =========================================================
   1. HERO  core/cover.is-style-nt-hero (full-bleed photo, text column on the left edge)
   ========================================================= */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(36rem,calc(100svh - 85px - 3rem),56rem);overflow:clip;color:var(--base);padding:var(--sp-60) var(--gutter)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 63%}
/* .wp-block-cover__background = gradient preset nt-hero-shade: soft havu shade, deepest behind the text column, clear on the right */
.hero .bg{position:absolute;inset:0;background:
  linear-gradient(90deg,color-mix(in srgb,var(--havu) 74%,transparent) 0%,color-mix(in srgb,var(--havu) 62%,transparent) 28%,color-mix(in srgb,var(--havu) 30%,transparent) 52%,color-mix(in srgb,var(--havu) 6%,transparent) 72%,transparent 86%),
  linear-gradient(180deg,color-mix(in srgb,var(--havu) 28%,transparent) 0%,transparent 34%,transparent 72%,color-mix(in srgb,var(--havu) 24%,transparent) 100%)}
/* .wp-block-cover__inner-container on the header's content edges */
.hero .inner{position:relative;z-index:1;width:100%;max-width:var(--wide);margin-inline:auto}
.hero .stack{display:flex;flex-direction:column;align-items:flex-start}
.hero .label{color:var(--verso)}
.hero h1{margin-top:var(--sp-30);font-size:clamp(3rem,0.9rem + 6.3vw,7.5rem);line-height:.92;letter-spacing:-0.035em;color:var(--base);text-shadow:0 2px 24px color-mix(in srgb,var(--havu) 25%,transparent)}
.hero .lead{margin-top:var(--sp-40);max-width:28em;font-size:var(--fs-lead-xl);line-height:1.45;font-weight:600;letter-spacing:-.01em;color:var(--base);text-wrap:pretty;text-shadow:0 1px 12px color-mix(in srgb,var(--havu) 45%,transparent)}
.hero .act{margin-top:var(--sp-50);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-20)}
/* is-style-nt-phone (paragraph): mono labels + number link */
.phone{margin-top:var(--sp-30);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7rem;font-weight:600;font-size:var(--fs-lead);line-height:1.3;color:var(--base);text-shadow:0 1px 12px color-mix(in srgb,var(--havu) 45%,transparent)}
.phone strong{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--verso)}
.phone strong:not(:first-child){color:var(--kaste)}
.phone .nw{display:inline-flex;align-items:baseline;column-gap:.7rem;white-space:nowrap}
.phone a{padding-block:.625rem;margin-block:-.625rem;text-underline-offset:.22em;text-decoration-thickness:1.5px}
.hero a:focus-visible{outline:3px solid var(--verso);outline-offset:3px}

/* =========================================================
   2. ROUTES  group.is-style-nt-routes#kohteet (kaste): one photo per service / product group,
   category tag top-left. Own 12-col grid; lead tile = 6 cols × 2 rows.
   ========================================================= */
.routes{background:var(--kaste);padding-block:calc(var(--sp-60) + var(--sp-30)) var(--sp-50)}
.routes-head,.route-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-30)}
.routes-head{align-items:end;margin-bottom:var(--sp-50)}
.routes-head h2{grid-column:1/7;font-size:var(--fs-section);letter-spacing:-0.045em;line-height:.95;text-wrap:balance}
.routes-head p{grid-column:7/13}
/* each tile = 2 subgrid rows [photo | text]; the lead spans 4, so its photo ends level with the second row of photos */
.route-grid{list-style:none;margin:0;padding:0;row-gap:0}
.route{position:relative;grid-column:span 3;grid-row:span 2;display:grid;grid-template-rows:subgrid;align-content:start;min-width:0}
.route--lead{grid-column:1/7;grid-row:span 4}
/* "Myös": the smaller routes as a link list in the last tile slot */
.route--more{display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:var(--sp-50)}
.route--more .label{color:var(--kuusi)}
.route--more ul{margin:var(--sp-20) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.route--more li{border-bottom:1px solid var(--rule)}
.route--more a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;font-weight:600;text-decoration:none}
.route--more a::after{content:"";flex:none;width:.8em;height:.8em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
@media (hover:hover){.route--more a:hover{text-decoration:underline;text-underline-offset:.2em}}
.route figure,.route .panel{grid-row:1;margin:0;aspect-ratio:4/3;overflow:hidden}
.route figure{background:var(--sammal)}
.route img{width:100%;height:100%;object-fit:cover}
.route--lead figure{position:relative;grid-row:1/4;aspect-ratio:auto;height:100%;min-height:0}
.route--lead img{position:absolute;inset:0}
.route .txt{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--sp-50)}
.route h3{margin-top:var(--sp-20);font-size:var(--fs-tile);letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.route--lead h3{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);letter-spacing:-.035em}
.route h3 a{text-decoration:none}
/* the whole tile is the link; extra links sit above the overlay */
.route h3 a::before{content:"";position:absolute;inset:0;z-index:1}
.route h3 a::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:.2em;vertical-align:.02em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .25s}
.route .d{margin-top:.4rem;max-width:36ch;font-size:var(--fs-small);line-height:1.5;color:var(--harmaa)}
.route--lead .d{max-width:42ch;font-size:var(--fs-body)}
.route .tlink{position:relative;z-index:2;margin-top:.15rem}
/* is-style-nt-tag (paragraph): the category label on the photo — a rectangle, never a pill (pills are actions) */
.tag{position:absolute;z-index:2;top:var(--sp-20);left:var(--sp-20);margin:0;padding:.3rem .5rem .26rem;background:var(--verso);color:var(--havu);border:1.5px solid var(--havu);border-radius:2px;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.2;pointer-events:none}
/* type-only tile where no photo exists yet */
.panel{display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-30);background:var(--havu);color:var(--verso);font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem);letter-spacing:-.04em;line-height:.95}
@media (hover:hover){
  .route img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .route:hover img{transform:scale(1.03)}
  .route:hover h3 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
  .route:hover h3 a::after{transform:translateX(.15em)}
}
@supports selector(:has(a)){
  .route:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
  .route h3 a:focus-visible{outline:none}
}
/* long tail: the routes without a tile */
.also{margin-top:var(--sp-20);padding-top:var(--sp-20);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.5rem}
.also span{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--kuusi)}
.also a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;text-underline-offset:.25em;text-decoration-thickness:1.5px}

/* =========================================================
   3. REFERENCES  group.is-style-nt-section-70#referenssit (kaste) > head (nt-split) + group.is-style-nt-collage (grid 12)
   ========================================================= */
.refs{background:var(--base);padding-block:var(--sp-70)}
.refs-head{align-items:end;margin-bottom:var(--sp-50)}
.refs-head h2{font-size:var(--fs-section);font-weight:800;letter-spacing:-0.045em;line-height:.95;text-wrap:balance}
.refs-head p{font-size:var(--fs-lead);line-height:1.45;max-width:30rem}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-30)}
.tile{margin:0;position:relative;align-self:start}
.tile img{width:100%;height:auto;object-fit:cover;border-radius:0}
.tile figcaption{position:absolute;left:var(--sp-20);bottom:var(--sp-20);max-width:min(23rem,calc(100% - 2*var(--sp-20)));background:var(--kaste);color:var(--havu);border-radius:14px;padding:.7rem .95rem .75rem;font-size:var(--fs-small);line-height:1.4;box-shadow:0 6px 18px color-mix(in srgb,var(--havu) 16%,transparent)}
.tile figcaption strong{display:block;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem;color:var(--kuusi)}
.t-a{grid-column:span 7;grid-row:span 2;height:100%;align-self:stretch}
.t-a img{height:100%}
.t-b{grid-column:span 5}
.t-b img{aspect-ratio:1/1}
.t-c{grid-column:span 3;background:var(--lakka);color:var(--havu);padding:var(--sp-40);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-30)}
.t-c .num{font-family:var(--f-display);font-size:clamp(4.5rem,2.4rem + 4.4vw,7rem);font-weight:800;letter-spacing:-0.05em;line-height:.8;white-space:nowrap}
.t-c p{font-size:var(--fs-body);line-height:1.45}
.t-c a{font-weight:600;text-underline-offset:.25em;white-space:nowrap}
.t-c a::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:.3em;vertical-align:-.12em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.t-d{grid-column:span 2;height:100%;align-self:stretch}
.t-d img{aspect-ratio:auto;height:100%}
.t-e{grid-column:span 5}
.t-e img{aspect-ratio:3/2}
.t-f{grid-column:span 4}
.t-f img{aspect-ratio:5/4}
/* bubble inset by its rotation overhang so it stays inside the content edge */
.t-g{grid-column:span 3;align-self:center;background:var(--verso);border-radius:2rem 2rem 2rem .3rem;padding:var(--sp-40);transform:rotate(-2.5deg);margin-inline:.5rem}
.t-g blockquote{margin:0}
.t-g p{font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);line-height:1.15;letter-spacing:-.025em}
.t-g cite{display:block;margin-top:var(--sp-30);font-style:normal;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.05em;text-transform:uppercase;line-height:1.45}

/* 3b. refs: more photos (core/gallery.is-style-nt-grid inside details) */
.refs .more{margin-top:var(--sp-50)}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-30)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}

/* =========================================================
   SHARED  is-style-nt-more (core/details): quiet "Lue lisää / Katso lisää" toggle
   ========================================================= */
.more > summary{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;cursor:pointer;list-style:none;font-weight:600;font-size:1.0625rem;line-height:1.3}
.more > summary::-webkit-details-marker{display:none}
.more > summary::before{content:"";flex:none;width:1.75rem;height:1.75rem;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/.75rem 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px .75rem no-repeat}
.more[open] > summary::before{background:linear-gradient(currentColor,currentColor) center/.75rem 1.5px no-repeat}
.more > summary:hover{text-decoration:underline;text-underline-offset:.25em}
.more > :not(summary){margin-top:var(--sp-40)}

/* =========================================================
   2b. CLIENTS  group.is-style-nt-clients (kaste): "Meihin luottavat." + counters, rule, 4 × 2 logo grid, all clients behind a details
   ========================================================= */
.clients{background:var(--kaste);padding-bottom:var(--sp-70)}
.clients .strip{padding-top:var(--sp-60);border-top:1px solid var(--rule)}
/* head row on the page grid: title + one-line lead in column 1, counters right-aligned over columns 2–3; a rule closes it */
.clients-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--g-fig);column-gap:var(--g-gap);row-gap:var(--sp-40);align-items:start;padding-bottom:var(--sp-50);border-bottom:1px solid var(--rule)}
.clients-head .ct{grid-column:1}
.clients-head h2{font-size:var(--fs-h2m);letter-spacing:-.04em;line-height:.98}
.clients-head .ct p{margin-top:var(--sp-30);max-width:30rem;font-size:var(--fs-lead);line-height:1.45;color:var(--harmaa);text-wrap:balance}
.clients-head .counts{grid-column:2/4;grid-template-columns:repeat(3,max-content);justify-content:end;column-gap:var(--sp-60)}
.clients .counts strong{font-size:clamp(2.5rem,1.6rem + 2.6vw,4.25rem)}
.clients .counts .plus{display:inline;margin-left:.08em;font-size:.55em;letter-spacing:0;vertical-align:.3em;color:var(--kuusi)}
.clients .counts li > span{margin-top:.75rem;font-family:var(--f-body);font-weight:400;font-size:var(--fs-body);letter-spacing:0;text-transform:none;line-height:1.35;color:var(--harmaa)}
/* main logos: 4 per row on the full width, no frames; trimmed files are sized to the same visual area (--w from their aspect ratio) */
.clients .logos--strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-60) var(--sp-40);align-items:center;justify-items:center;margin-top:var(--sp-60);border:0;--ls:1.25}
.clients .logos--strip li{display:block;aspect-ratio:auto;padding:0;border:0;background:none;overflow:visible}
.clients .logos img{width:calc(var(--w) * 1px * var(--ls,1));height:auto;max-width:100%;max-height:none;mix-blend-mode:multiply}
.clients .logos:not(.logos--strip){--ls:.72}
.counts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g-gap)}
.counts strong{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2.25rem,1.3rem + 2.8vw,4.25rem);letter-spacing:-.045em;line-height:.9;white-space:nowrap}
.counts span{display:block;margin-top:.7rem;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--sammal);border-left:1px solid var(--sammal)}
.logos li{display:grid;place-items:center;background:var(--base);aspect-ratio:3/2;min-height:0;overflow:hidden;padding:var(--sp-20);border-right:1px solid var(--sammal);border-bottom:1px solid var(--sammal)}
.logos a{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.logos img{max-width:min(100%,9rem);max-height:100%;min-height:0;width:auto;height:auto;object-fit:contain;border-radius:0}
.logo-group{margin:var(--sp-40) 0 var(--sp-20);font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--kuusi)}
.clients .more{margin-top:var(--sp-60)}
.clients .more > summary + .logo-group{margin-top:var(--sp-40)}

/* =========================================================
   4. GROUND  group.is-style-nt-ground#pohjatyot (white): drawn cross-section [figure | numbered layers]
   + proof row [text | own-equipment photo]
   ========================================================= */
.ground{background:var(--base);padding-block:var(--sp-70)}
.strata{align-items:center}
.strata-fig{margin:0}
.strata-draw{position:relative}
.strata-svg{display:block;width:100%;height:auto}
/* SVG fills are classes, so palette variations recolour the drawing too */
.strata-svg .s-verso{fill:var(--verso)}
.strata-svg .s-blade{fill:none;stroke:var(--kuusi);stroke-width:1.3;stroke-linecap:round}
.strata-svg .s-dust{fill:var(--sammal)}
.strata-svg .s-dot{fill:color-mix(in srgb,var(--havu) 45%,transparent)}
.strata-svg .s-gravel{fill:color-mix(in srgb,var(--havu) 12%,var(--kaste))}
.strata-svg .s-stone{fill:var(--base);stroke:var(--havu);stroke-width:1.1;stroke-linejoin:round}
.strata-svg .s-havu{fill:var(--havu)}
.strata-svg .s-soil{fill:var(--soil)}
.strata-svg .s-hatch{fill:none;stroke:color-mix(in srgb,var(--havu) 22%,transparent);stroke-width:1}
.strata-svg .s-shade{fill:var(--havu);opacity:.16}
.strata-svg .s-line,.strata-svg .s-thin{fill:none;stroke:var(--havu);stroke-linejoin:round;vector-effect:non-scaling-stroke}
.strata-svg .s-line{stroke-width:2}
.strata-svg .s-thin{stroke-width:1}
/* numbered markers on the drawing = the same discs as the list */
.pin,.layers li::before{display:grid;place-items:center;width:2rem;aspect-ratio:1;border-radius:50%;background:var(--havu);color:var(--base);box-shadow:0 0 0 2px var(--base);font-family:var(--f-display);font-weight:800;font-size:.9375rem;line-height:1;letter-spacing:0}
.strata-draw .pin{position:absolute;transform:translate(-50%,-50%)}
.strata-draw .pin:nth-of-type(1){left:60.8%;top:25.9%}
.strata-draw .pin:nth-of-type(2){left:70.7%;top:37.4%}
.strata-draw .pin:nth-of-type(3){left:60.8%;top:54.7%}
.strata-draw .pin:nth-of-type(4){left:70.7%;top:82.1%}
.strata-fig figcaption{margin-top:var(--sp-20);max-width:34rem;font-size:.8125rem;line-height:1.45;color:var(--harmaa)}
.layers-wrap{counter-reset:layer;max-width:34rem}
.layers{list-style:none;margin:0;padding:0}
.layers li{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:1rem;padding-block:.85rem;border-top:1px solid var(--rule)}
.layers li::before{counter-increment:layer;content:counter(layer);grid-row:1/3}
.layers strong,.layers li > span{grid-column:2}
.layers strong{font-family:var(--f-display);font-weight:800;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);letter-spacing:-.025em;line-height:1.15}
.layers li > span{margin-top:.2rem;font-size:var(--fs-small);line-height:1.5;color:var(--harmaa)}
/* layers 2–4 = our own groundwork, introduced by a small label (no frame) */
.layers-group{margin-top:.25rem}
.layers-group .label{padding-block:.6rem .45rem;color:var(--kuusi)}
.proof{margin-top:var(--sp-60);align-items:center}
.proof h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.1}
.proof p{margin-top:var(--sp-20);max-width:30rem}
.proof .links{display:flex;flex-wrap:wrap;column-gap:1.5rem;margin-top:var(--sp-20)}
.proof figure{margin:0}
.proof img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 55%}

/* =========================================================
   2c. QUOTE WIZARD BAND  group.is-style-nt-wizard-band#tarjouspyynto (havu, right after the services and client logos): only the step-by-step
   quote request — one wide card, each step laid out horizontally (stacked on narrow screens)
   ========================================================= */
.cta{background:var(--havu);padding-block:var(--sp-60)}
.wiz-alt{margin-top:var(--sp-30);color:var(--kaste);font-size:var(--fs-body)}
.wiz-alt a{color:var(--base);font-weight:600;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.wiz-alt a:focus-visible{outline-color:var(--verso)}
.wiz-head h2{font-size:clamp(1.625rem,1.25rem + 1.1vw,2.25rem);letter-spacing:-.035em;line-height:1.05}
.wiz-intro{max-width:44rem;font-size:var(--fs-small);line-height:1.5;color:var(--harmaa);text-wrap:pretty}
.field.w2{grid-column:1/-1}


/* =========================================================
   5. PRICES  group.is-style-nt-prices#hinnat (kaste): example ledger + what affects the price.
   Figures are placeholders (.ph) until the client confirms them.
   ========================================================= */
.prices{background:var(--kaste);padding-block:var(--sp-70) var(--sp-60)}
/* rows are grids (roles keep the table semantics): size column = page grid column 1 + gap,
   so the examples line up with the lead above */
.ledger,.ledger tbody,.ledger caption{display:block}
.ledger tr{display:grid;grid-template-columns:calc(50% - var(--g-fig)/2) minmax(0,1fr) max-content;align-items:center}
.ledger caption{text-align:left;padding-bottom:var(--sp-30);color:var(--kuusi)}
.ledger tbody tr{border-top:1px solid var(--rule)}
.ledger tbody tr:first-child{border-top:1px solid var(--rule)}
.ledger tbody tr:last-child{border-bottom:1px solid var(--rule)}
.ledger th,.ledger td{padding:var(--sp-30) 0;vertical-align:middle;text-align:left;font-weight:inherit}
.ledger th{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,1.6rem + 4.4vw,6rem);letter-spacing:-.045em;line-height:.85;white-space:nowrap}
.ledger th .u{margin-left:.08em;font-size:.4em;letter-spacing:-.01em}
.ledger .ex strong{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);letter-spacing:-.025em;line-height:1.1}
.ledger .dim{display:block;margin-top:.4rem;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa)}
.ledger .pr{min-width:13rem;padding-left:var(--sp-30);text-align:right;white-space:nowrap;font-weight:700;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-variant-numeric:tabular-nums}
.ledger-notes{margin-top:var(--sp-20);display:flex;flex-wrap:wrap;align-items:center;column-gap:2rem;font-size:var(--fs-small)}
.ledger-notes p{padding-block:.35rem}
.factors{margin-top:var(--sp-60);align-items:start}
.factors h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.1}
.factors .btns{margin-top:var(--sp-30)}
.factors .micro{margin-top:.6rem;max-width:22rem;font-size:var(--fs-small);line-height:1.5;color:var(--harmaa)}
.factors ul{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--g-gap)}
.factors li{break-inside:avoid;padding:.7rem 0;border-top:1px solid var(--rule);line-height:1.45}

/* =========================================================
   6. SAMPLES  group.is-style-nt-sample-slip#naytepalat (kaste, shares the band with the prices; dashed rule between)
   ========================================================= */
.slip{background:var(--kaste);color:var(--havu);padding-bottom:var(--sp-70)}
.slip .in{align-items:center;padding-top:var(--sp-60);border-top:2px dashed color-mix(in srgb,var(--havu) 45%,transparent)}
.slip h2{font-size:clamp(1.875rem,1.4rem + 1.7vw,2.875rem);font-weight:800;letter-spacing:-0.035em;line-height:1}
/* is-style-nt-names (paragraph): plain sentence, mm in mono on the baseline */
.names{margin-top:var(--sp-30);font-size:var(--fs-lead);line-height:1.5;max-width:31rem}
.names code{font-family:var(--f-mono);font-weight:500;font-size:.78em;letter-spacing:0;word-spacing:-.3em;white-space:nowrap;background:none;padding:0}
.slip .obj{--P:23rem;--lg:var(--sp-60);container-type:inline-size;display:flex;align-items:center;gap:var(--lg)}
/* core/image.is-style-nt-piece: transparent cut-out of Att 7470 + soft havu contact shadow */
.piece{flex:0 0 var(--P);width:var(--P);margin:0;position:relative;z-index:0}
.piece img{width:100%;height:auto;filter:drop-shadow(0 14px 12px color-mix(in srgb,var(--havu) 20%,transparent)) drop-shadow(0 3px 3px color-mix(in srgb,var(--havu) 18%,transparent))}
.order{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-30);position:relative;z-index:1}
/* is-style-nt-callout (paragraph) with a leader line + dot that lands ~10 px inside the turf edge.
   --f = where the piece's slanted right edge is (fraction of its width) at that call-out's height */
.callout{--f:.88;--d:calc(var(--lg) + (1 - var(--f)) * var(--P) + .65rem);position:relative;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.callout:nth-child(1){--f:.83}.callout:nth-child(2){--f:.875}.callout:nth-child(3){--f:.93}
.callout::before{content:"";position:absolute;top:.62em;right:calc(100% + .5rem);width:calc(var(--d) - .5rem);border-top:1px solid var(--havu)}
.callout::after{content:"";position:absolute;top:calc(.62em - 4px);right:calc(100% + var(--d) - 4px);width:8px;height:8px;border-radius:50%;background:var(--havu);box-shadow:0 0 0 2px color-mix(in srgb,var(--kaste) 85%,transparent)}
.order .btns{margin-top:var(--sp-20)}
.slip a:focus-visible{outline:3px solid var(--havu);outline-offset:3px}

/* =========================================================
   3b. INTRO  group.is-style-nt-intro (havu, after the references): [label+h2 | lead] / [video poster | accordion]
   ========================================================= */
.intro{background:var(--havu);color:var(--kaste);padding-block:var(--sp-70)}
.intro .igrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--g-fig);grid-template-areas:'txt body body' 'vid acc acc';column-gap:var(--sp-60);row-gap:var(--sp-60);align-items:start}
.intro .txt{grid-area:txt}
.intro .body{grid-area:body;align-self:end}
.intro .video{grid-area:vid}
.intro .acc{grid-area:acc}
.intro .label{color:var(--verso)}
.intro h2{margin-top:var(--sp-30);font-size:var(--fs-section);font-weight:800;letter-spacing:-0.045em;line-height:.95;color:var(--base);text-wrap:balance}
.intro .body{font-size:var(--fs-lead);line-height:1.55;max-width:44rem;color:var(--kaste)}
/* is-style-nt-video (core/image linked to Vimeo): poster + play disc, square corners */
.video{margin:0}
.video a{position:relative;display:block}
.video img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.video a::before,.video a::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .25s,background-color .25s}
.video a::before{width:clamp(4rem,3rem + 2.6vw,6rem);aspect-ratio:1;border-radius:50%;background:var(--verso)}
.video a::after{width:clamp(1.5rem,1.15rem + 1vw,2.3rem);aspect-ratio:1;background:var(--havu);-webkit-mask:var(--play) center/contain no-repeat;mask:var(--play) center/contain no-repeat}
.video a:hover::before{transform:translate(-50%,-50%) scale(1.07);background-color:var(--base)}
/* is-style-nt-acc (group of core/details on havu): display-type titles, lime plus */
.acc{border-top:1px solid color-mix(in srgb,var(--kaste) 28%,transparent)}
.acc details{border-bottom:1px solid color-mix(in srgb,var(--kaste) 28%,transparent)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.1rem;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);letter-spacing:-.03em;line-height:1.15;color:var(--base)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:1.25rem;height:1.25rem;background:linear-gradient(var(--verso),var(--verso)) center/100% 2px no-repeat,linear-gradient(var(--verso),var(--verso)) center/2px 100% no-repeat}
.acc details[open] summary::after{background:linear-gradient(var(--verso),var(--verso)) center/100% 2px no-repeat}
.acc details p{padding:0 2.5rem 1.25rem 0;max-width:44rem}
.intro :focus-visible{outline-color:var(--verso)}

/* =========================================================
   8. BLOG  group.is-style-nt-journal (white): core/query, 3 latest posts
   ========================================================= */
.blog{background:var(--base);padding-block:var(--sp-70)}
.blog-head{align-items:end;margin-bottom:var(--sp-50)}
.blog-head .btns{justify-content:flex-end}
.blog-head h2{font-size:var(--fs-section);font-weight:800;letter-spacing:-0.045em;line-height:.95}
.posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-50) var(--g-gap)}
.post{padding-top:0}
.post time{display:block;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--kuusi)}
.post h3{margin-top:.6rem;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-weight:800;letter-spacing:-.025em;line-height:1.12}
.post h3 a{text-decoration:none}
.post h3 a:hover{text-decoration:underline;text-underline-offset:.2em}
.post p{margin-top:.75rem;font-size:var(--fs-small);line-height:1.55;color:var(--harmaa)}
.post .read{margin-top:.25rem}

/* =========================================================
   9. QUOTE  group.is-style-nt-quote-band#tarjous (verso: the one lime band, the page's conversion point) > nt-split [text | form card]
   ========================================================= */
.quote{--focus:var(--havu);background:var(--verso);padding-block:var(--sp-70)}
.quote .split{align-items:start;grid-template-rows:auto 1fr}
.quote .q-txt{grid-column:1/2;grid-row:1}
.quote .formcard{grid-column:2/4;grid-row:1/3}
.quote .q-contacts{grid-column:1/2;grid-row:2}
.quote h2{font-size:var(--fs-section);font-weight:800;letter-spacing:-0.045em;line-height:.95;margin-top:var(--sp-30);text-wrap:balance}
.quote .lead{margin-top:var(--sp-30);font-size:var(--fs-lead);line-height:1.5;max-width:30rem}
.contacts{list-style:none;padding:0;margin:var(--sp-40) 0 0;border-top:1px solid var(--rule);max-width:32rem}
.contacts li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--rule)}
.contacts li span{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;padding-top:.25rem}
.contacts a{padding-block:.6875rem;font-weight:600;font-size:var(--fs-lead);text-underline-offset:.25em}
.contacts-more{margin-top:var(--sp-30)}
.formcard{--focus:var(--kuusi);--rule:color-mix(in srgb,var(--havu) 25%,transparent);scroll-margin-top:3.5rem;background:var(--base);color:var(--havu);border-radius:2rem;padding:var(--sp-50);box-shadow:0 30px 60px color-mix(in srgb,var(--havu) 15%,transparent);position:relative}
.formcard h3{font-size:var(--fs-h3);font-weight:800}
.formcard .note{margin-top:.35rem;font-size:var(--fs-small);color:var(--harmaa)}
.formcard .sticker{position:absolute;top:-2.6rem;right:2rem;width:7.5rem;background:var(--havu);color:var(--verso);transform:rotate(8deg)}
.formcard .sticker strong{font-size:1.2rem;line-height:1;letter-spacing:-.02em}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1rem;margin-top:var(--sp-30)}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.9375rem;font-weight:600}
.field label span{color:var(--kuusi)}
/* WCAG 1.4.11: 2 px havu bottom boundary (sammal side borders alone were 1.2:1) */
.field input,.field select,.field textarea{width:100%;min-width:0;font:inherit;color:var(--havu);background:var(--kaste);border:1.5px solid var(--sammal);border-bottom:2px solid var(--havu);border-radius:10px 10px 4px 4px;min-height:3.1rem;padding:.7rem .9rem}
.field textarea{min-height:8.5rem;resize:vertical}
.submit{grid-column:1/-1;margin-top:.5rem;min-height:3.25rem;padding-inline:1.75rem;border-radius:999px;border:2px solid var(--havu);background:var(--havu);color:var(--verso);font:600 1.0625rem var(--f-body);cursor:pointer}
/* QUOTE WIZARD  nordicturf/quote-wizard (in #tarjouspyynto): 4 short steps, horizontal on wide cards → one ready quote request (Rove / Groweo style).
   .js shows one step at a time; without JS every step is visible as one long form (POST, needs a real action). */
.formcard{container-type:inline-size}
.wiz[hidden],.wiz [hidden],.wiz-done[hidden]{display:none!important}
.wiz-head{display:grid;gap:.4rem}

.wiz-count,.wiz-bar{display:none}
.js .wiz-count{display:block;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--kuusi)}
.js .wiz-bar{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:4px;margin:.2rem 0 0;padding:0;list-style:none}
.wiz-bar li{height:4px;background:var(--sammal)}
.wiz-bar li.is-done{background:var(--havu)}
.step{min-width:0;margin:var(--sp-40) 0 0;padding:0;border:0}
.step:focus{outline:none}
.js .step:not(.is-on){display:none}
.step > legend{padding:0;font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);letter-spacing:-.025em;line-height:1.15}
.wiz .hint{display:block;margin-top:.3rem;font-size:var(--fs-small);line-height:1.45;color:var(--harmaa)}
.wiz .note{margin-top:.3rem}
.q{min-width:0;margin:var(--sp-30) 0 0;padding:0;border:0}
.q > legend,.q > label{padding:0;font-size:.9375rem;font-weight:600}
.q2{min-width:0;margin:.75rem 0 0;padding:0;border:0}
.q2 > legend,.q2 > label{padding:0;font-size:var(--fs-small);font-weight:400;color:var(--harmaa)}
/* picture choices: whole card is the radio; a lime check marks the choice */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:var(--sp-20)}
@container (min-width:34rem){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;display:block;min-width:0;cursor:pointer}
.card input,.choice input,.opts input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.card-body{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1.5px solid var(--sammal);border-radius:4px;background:var(--base);transition:border-color .2s}
.card-body img,.card-body .art{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--kaste)}
.card-body strong{padding:.55rem .7rem 0;font-size:.9375rem;font-weight:700;line-height:1.25}
.card-body small{padding:.15rem .7rem 0;font-size:.8125rem;line-height:1.4;color:var(--harmaa)}
.card-body > :last-child{padding-bottom:.65rem}
.card:hover .card-body{border-color:var(--havu)}
.card input:checked + .card-body{border-color:var(--havu);box-shadow:inset 0 0 0 1.5px var(--havu)}
.card input:checked + .card-body::before{content:"";position:absolute;z-index:1;top:.5rem;left:.5rem;width:1.75rem;height:1.75rem;border:1.5px solid var(--havu);border-radius:50%;background:var(--verso) var(--check) center/58% no-repeat}
.card input:focus-visible + .card-body{outline:3px solid var(--focus);outline-offset:2px}
.art{display:grid;place-items:center;overflow:hidden}
.cards--4 .card-body .art{aspect-ratio:3/2}
.art svg{width:78%;height:auto;max-height:84%;overflow:visible}
.art--q{font-family:var(--f-display);font-weight:800;font-size:2.25rem;color:var(--havu)}
.i-turf{fill:var(--verso);stroke:var(--havu);stroke-width:1.5;stroke-linejoin:round}
.i-seam{fill:none;stroke:var(--havu);stroke-width:1;stroke-dasharray:3 3}
.i-soil{fill:var(--soil)}
.i-stone{fill:color-mix(in srgb,var(--havu) 16%,var(--kaste));stroke:var(--havu);stroke-width:1.5}
.i-wood{fill:color-mix(in srgb,var(--lakka) 55%,var(--havu));stroke:var(--havu);stroke-width:1}
.i-blade{fill:none;stroke:var(--kuusi);stroke-width:1.2;stroke-linecap:round}
/* text choices */
.choices{display:grid;gap:.5rem;margin-top:var(--sp-20)}
.choice{position:relative;display:block;cursor:pointer}
.choice-body{display:grid;align-content:start;grid-template-columns:1.25rem minmax(0,1fr);column-gap:.75rem;padding:.8rem 1rem;border:1.5px solid var(--sammal);border-radius:4px;transition:border-color .2s,background-color .2s}
.choice-body::before{content:"";grid-row:1/3;width:1.25rem;height:1.25rem;margin-top:.1rem;border:1.5px solid var(--havu);border-radius:50%;background:var(--base)}
.choice-body strong{font-weight:700;line-height:1.3}
.choice-body small{grid-column:2;font-size:var(--fs-small);line-height:1.45;color:var(--harmaa)}
.choice:hover .choice-body{border-color:var(--havu)}
.choice input:checked + .choice-body{border-color:var(--havu);background:var(--kaste)}
.choice input:checked + .choice-body::before{background:radial-gradient(circle,var(--havu) 0 42%,var(--base) 46%)}
.choice input:focus-visible + .choice-body{outline:3px solid var(--focus);outline-offset:2px}
/* chip choices */
.opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.opts label{position:relative;cursor:pointer}
.opts span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1rem;border:1.5px solid var(--havu);border-radius:999px;font-size:var(--fs-small);font-weight:600;line-height:1.2;transition:background-color .2s,color .2s}
.opts label:hover span{background:var(--kaste)}
.opts input:checked + span{background:var(--havu);color:var(--verso)}
.opts input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.opts input:disabled + span{opacity:.45;cursor:not-allowed}
.wiz .fields{margin-top:var(--sp-20)}
.field input[type=file]{padding:.6rem .7rem;font-size:var(--fs-small)}
.field input[type=file]::file-selector-button{margin-right:.75rem;padding:.4rem .9rem;border:1.5px solid var(--havu);border-radius:999px;background:var(--base);color:var(--havu);font:600 .875rem var(--f-body);cursor:pointer}
.field input[type=file]:hover::file-selector-button{background:var(--havu);color:var(--base)}
.files{list-style:none;margin:.2rem 0 0;padding:0;font-size:var(--fs-small)}
.files li{padding:.2rem 0;border-bottom:1px solid var(--rule)}
.privacy{margin-top:var(--sp-20);font-size:var(--fs-small);color:var(--harmaa)}
.privacy a{color:var(--havu);text-underline-offset:.2em}
.wiz-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:var(--sp-40);padding-top:var(--sp-30);border-top:1px solid var(--rule)}
.wiz-nav .btn{margin:0 0 0 auto}
.wiz-nav [data-act]{display:none}
.js .wiz-nav [data-act]{display:inline-flex}
.wiz-back{align-items:center;gap:.45em;min-height:2.75rem;padding:0;border:0;background:none;font:600 1rem var(--f-body);color:var(--havu);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em;cursor:pointer}
.wiz-back::before{content:"";width:.9em;height:.9em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transform:scaleX(-1)}
.wiz-done{padding-top:var(--sp-20)}
.wiz-done h2{font-size:clamp(1.625rem,1.25rem + 1.1vw,2.25rem);letter-spacing:-.035em;line-height:1.05}
.wiz-done h2:focus{outline:none}
@container (max-width:21rem){
  .wiz-nav{flex-direction:column;align-items:stretch}
  .wiz-nav .btn{margin:0;width:100%;justify-content:center}
  .wiz-nav .wiz-back{align-self:flex-start}
  .wiz-sum{grid-template-columns:minmax(0,1fr);row-gap:0}
  .wiz-sum dt:not(:first-child){padding-top:.6rem}
}
@media (forced-colors:active){
  .opts input:checked + span{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .choice input:checked + .choice-body::before{forced-color-adjust:none;background:Highlight;box-shadow:inset 0 0 0 3px Canvas;border-color:Highlight}
  .card input:checked + .card-body,.choice input:checked + .choice-body{border-color:Highlight;border-width:3px}
  .card input:checked + .card-body::before{forced-color-adjust:none;background:Highlight var(--check) center/58% no-repeat;border-color:Highlight}
}
.wiz-done p{margin-top:.5rem}
.wiz-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.25rem;margin:var(--sp-30) 0;padding-top:var(--sp-20);border-top:1px solid var(--rule);font-size:var(--fs-small)}
.wiz-sum dt{color:var(--harmaa)}
.wiz-sum dd{margin:0;font-weight:600}
.wiz-done .wiz-back{display:inline-flex}
/* wide card: every step runs horizontally so it stays short (tablet up); step 3 splits into two columns from 56rem */
@container (min-width:48rem){
  .wiz-head{grid-template-columns:minmax(0,1fr) minmax(0,20rem);column-gap:var(--sp-50);align-items:end}
  .wiz-head > h2,.wiz-intro{grid-column:1}
  .wiz-count{grid-column:2;grid-row:1}
  .wiz-bar{grid-column:2;grid-row:2;align-self:center}
  .step--kohde .cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .step--kohde .card-body img,.step--kohde .card-body .art{aspect-ratio:3/2}
  .cards--4 .card-body .art{aspect-ratio:2/1}
  .choices{grid-template-columns:repeat(3,minmax(0,1fr))}
  .choice-body{height:100%}
  .wiz .fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wiz .field.w2{grid-column:span 2}
  .wiz-nav{margin-top:var(--sp-30);padding-top:var(--sp-20)}
}
@container (min-width:56rem){
  .step--site{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-50);align-items:start}
  .step--site > .hint{grid-column:1/-1}
  .step--site .q{margin-top:var(--sp-20)}
}

/* =========================================================
   FOOTER  parts/footer.html (site-wide): havu band [id + contacts | 5 link columns] + white base strip [badges | © + legal]
   ========================================================= */
.site-footer{background:var(--havu);color:var(--kaste);font-family:var(--f-body)}
.ft-main{padding-block:var(--sp-60)}
.ft-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-50) var(--g-gap)}
.ft-name{font-family:var(--f-display);font-weight:800;font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);letter-spacing:-.035em;line-height:1;color:var(--base)}
.ft-desc{margin-top:.6rem;font-size:var(--fs-body);line-height:1.5}
.ft-contact{list-style:none;margin:var(--sp-30) 0 0;padding:0;font-size:var(--fs-body);line-height:1.5}
.ft-contact li{padding-block:.2rem}
.ft-contact a{display:inline-flex;align-items:center;min-height:2.25rem;font-weight:600;color:var(--base);text-underline-offset:.25em}
.ft-contact span{color:color-mix(in srgb,var(--kaste) 75%,transparent)}
.ft-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-30)}
.ft-h{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--verso)}
.ft-cols ul{list-style:none;margin:.6rem 0 0;padding:0}
.ft-cols a{display:inline-flex;align-items:center;min-height:2.5rem;font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--base);text-decoration:none}
.ft-cols a:hover{color:var(--verso);text-decoration:underline;text-underline-offset:.25em}
.site-footer :focus-visible{outline:3px solid var(--verso);outline-offset:3px}
.ft-base :focus-visible{outline-color:var(--havu)}
/* white base strip: badges on white (no boxes) + company id and legal links */
.ft-base{background:var(--base);color:var(--havu)}
.ft-base .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 3rem;padding-block:1.25rem}
.ft-badges{display:flex;align-items:center;gap:2rem}
.ft-badges figure{margin:0}
.ft-badges img{width:auto;border-radius:0}
.ft-badges .at img{height:4.25rem}
.ft-badges .lk img{height:3rem}
.ft-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem;font-size:.8125rem;color:var(--harmaa)}
.ft-legal nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.ft-legal a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--havu);text-underline-offset:.25em}

/* =========================================================
   QUICK-CONTACT BAR  parts/cta-bar.html (≤1199 px, where the header nav is a burger):
   shows once the hero has scrolled away, hides while the quote band is on screen
   ========================================================= */
.ctabar{display:none}

/* =========================================================
   RESPONSIVE (child style.css)
   ========================================================= */
@media (max-width:1199px){
  .ctabar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1.35fr;padding-bottom:env(safe-area-inset-bottom);background:var(--havu);transform:translateY(100%);visibility:hidden;transition:transform .25s,visibility .25s}
  .ctabar.is-on{transform:none;visibility:visible}
  .ctabar a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--bar-h);font-weight:600;font-size:1.0625rem;text-decoration:none}
  .ctabar-call,.ctabar-wa{color:var(--kaste)}
  .ctabar-wa{border-left:1px solid color-mix(in srgb,var(--kaste) 25%,transparent)}
  .ctabar-go{background:var(--cta-bg);color:var(--cta-fg)}
  .ctabar-go::after{content:"";width:1em;height:1em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
  .ctabar-call:focus-visible,.ctabar-wa:focus-visible{outline:3px solid var(--verso);outline-offset:-6px}
  .ctabar-go:focus-visible{outline:3px solid var(--havu);outline-offset:-6px}
  html{scroll-padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + .75rem)}
  .ft-base{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
}
@media (max-width:400px){
  .ctabar{grid-template-columns:auto auto minmax(0,1fr)}
  .ctabar a{padding-inline:.75rem;white-space:nowrap}
}
@media (max-width:340px){.ctabar a{font-size:1rem}}
@media (min-width:782px) and (max-width:1199px){.quote h2{font-size:var(--fs-h2m)}}
@media (max-width:1100px){
  .clients-head .counts{grid-column:1/-1;justify-content:start}
  .ft-grid{grid-template-columns:minmax(0,1fr)}
  .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .routes-head,.route-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .routes-head h2{grid-column:1/4}
  .routes-head p{grid-column:4/7}
  .route--lead{grid-column:1/-1;grid-row:span 2}
  .route--lead figure{grid-row:1;height:auto;aspect-ratio:2/1}
  .strata,.proof{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-40)}
  .strata > *,.strata > :last-child,.proof > *,.proof > :last-child{grid-column:1/-1}
  .strata-fig{max-width:44rem}
  .intro .igrid{grid-template-columns:minmax(0,1fr);grid-template-areas:'txt' 'body' 'vid' 'acc';row-gap:var(--sp-40)}
  .intro .body{align-self:start}
  .slip .in{row-gap:var(--sp-40)}
  .slip .in > *,.slip .in > :last-child{grid-column:1/-1}
  .slip .obj{--P:18rem}
  .fields{grid-template-columns:1fr}
}
@media (max-width:781px){
  /* hero: one column on the 20 px page edge */
  .hero{align-items:flex-start;min-height:clamp(34rem,calc(100svh - 78px - 2rem),44rem);padding:var(--sp-50) var(--gutter)}
  .hero > img{object-position:42% 50%}
  .hero .bg{background:linear-gradient(180deg,color-mix(in srgb,var(--havu) 70%,transparent) 0%,color-mix(in srgb,var(--havu) 62%,transparent) 45%,color-mix(in srgb,var(--havu) 38%,transparent) 68%,color-mix(in srgb,var(--havu) 12%,transparent) 100%)}
  .hero h1{font-size:3.5rem;line-height:.94}
  .hero .lead{margin-top:var(--sp-30);font-size:1.125rem;line-height:1.4}
  .hero .act{margin-top:var(--sp-40);gap:.5rem}
  .btn--hero,.btn--ghost{min-height:3.5rem;padding-inline:1.6rem}
  .phone{margin-top:var(--sp-20);font-size:1.0625rem}

  .routes-head{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-30)}
  .routes-head h2,.routes-head p{grid-column:1/-1}
  .route-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .75rem}
  .route .txt{padding-bottom:var(--sp-40)}
  .route{grid-column:span 1}
  /* phones: the last tile and the "Myös" list each take a full row */
  .route:has(+ .route--more){grid-column:1/-1}
  .route:has(+ .route--more) figure{aspect-ratio:2/1}
  .route--more{grid-column:1/-1;grid-row:auto}
  .route--more ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
  .route--lead{grid-column:1/-1}
  .route--lead figure{aspect-ratio:4/3}
  .route:not(.route--lead) .d,.route:not(.route--lead) .tlink{display:none}
  .route h3{margin-top:.6rem;font-size:1.0625rem;line-height:1.15;letter-spacing:-.02em;hyphens:auto}
  .route--lead h3{font-size:1.75rem}
  .tag{top:.5rem;left:.5rem;padding:.22rem .4rem .2rem;font-size:.75rem;letter-spacing:.04em}
  .panel{padding:.75rem;font-size:1.25rem}

  .rgrid{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-40)}
  .rgrid > *,.rgrid > :last-child{grid-column:1/-1}
  .sec-head{row-gap:var(--sp-30)}
  .refs-head{row-gap:var(--sp-30)}
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .collage > *{grid-column:1/-1;grid-row:auto;height:auto}
  .collage img{height:auto!important}
  .collage > :nth-child(2),.collage > :nth-child(3){grid-column:auto}
  .t-a img{height:auto;aspect-ratio:4/3}
  .t-b img{aspect-ratio:3/4}
  .t-d img{height:auto;aspect-ratio:3/4!important;object-position:43% 50%}
  .t-c{flex-direction:row;align-items:flex-end;gap:1rem;padding:var(--sp-30)}
  .t-c .num{font-size:4.5rem;flex:none}
  .t-f img{aspect-ratio:16/10}
  .t-g{transform:rotate(-1.5deg);margin:.75rem .5rem 0}
  .tile figcaption{position:static;max-width:none;border-radius:0 0 14px 14px;box-shadow:none;background:var(--kaste);padding:.6rem .75rem}
  .t-b figcaption,.t-d figcaption{font-size:.8125rem}
  .t-d{display:flex;flex-direction:column}
  .t-d figcaption{flex:1}

  .strata-draw .pin{width:1.5rem;font-size:.75rem;box-shadow:0 0 0 1.5px var(--base)}
  .proof img{aspect-ratio:4/3}

  /* ledger: each row = [size | price] over [example] */
  .ledger tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'sz pr' 'ex ex';align-items:baseline;column-gap:1rem;padding-block:var(--sp-30)}
  .ledger th,.ledger td{padding:0;width:auto}
  .ledger th{grid-area:sz;font-size:3rem}
  .ledger .pr{grid-area:pr;min-width:0;padding-left:0;font-size:1.25rem}
  .ledger .ex{grid-area:ex;padding-top:.6rem}
  .factors ul{columns:1}
  /* phones: what affects the price first, then the action */
  .factors{row-gap:0}
  .factors > div{display:contents}
  .factors ul{order:1;margin-top:var(--sp-30)}
  .factors .btns{order:2;margin-top:var(--sp-40)}
  .factors .micro{order:3}

  .slip{padding-bottom:var(--sp-50)}
  .slip .in{row-gap:var(--sp-30);padding-top:var(--sp-50)}
  .slip .obj{--lg:1.75rem;--P:calc((100cqw - 1.75rem) / 2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--lg);row-gap:.9rem;align-items:center}
  .piece{grid-row:1/4;grid-column:1;width:auto}
  .order{display:contents}
  .callout{grid-column:2;font-size:.75rem;letter-spacing:.04em}
  .order .btns{grid-column:1/-1;margin-top:var(--sp-20)}
  .order .btn{width:100%;justify-content:center}

  .formcard{padding:var(--sp-40) var(--sp-30);border-radius:1.5rem;margin-top:var(--sp-30)}
  .formcard .sticker{top:-2.2rem;right:1rem;width:5.75rem}
  .formcard .sticker strong{font-size:.95rem}
  .contacts li{grid-template-columns:5.5rem 1fr}
  .quote .q-txt,.quote .formcard,.quote .q-contacts{grid-column:1/-1;grid-row:auto}
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-base .in{flex-direction:column;align-items:flex-start}
  .ft-badges{gap:1.5rem}
  .ft-badges .at img{height:3.75rem}
  .ft-badges .lk img{height:2.75rem}

  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .clients-head{grid-template-columns:minmax(0,1fr);padding-bottom:var(--sp-40)}
  .clients-head .ct,.clients-head .counts{grid-column:1}
  .clients-head .counts{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;column-gap:.75rem}
  .clients .counts strong{font-size:clamp(1.875rem,1.1rem + 4vw,2.5rem)}
  .clients .counts li > span{margin-top:.5rem;font-size:var(--fs-small);hyphens:auto}
  .clients .logos--strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-50) var(--sp-30);margin-top:var(--sp-50);--ls:.85}
  .counts{gap:.75rem}
  .counts strong{font-size:clamp(1.75rem,1rem + 4vw,2.25rem)}
  .counts span{font-size:.6875rem;letter-spacing:.02em;hyphens:auto}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logos li{padding:.5rem}
  .posts{grid-template-columns:minmax(0,1fr);gap:var(--sp-50)}
  .blog-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-30)}
}
@media (max-width:540px){
  .hero .act{flex-direction:column;align-items:stretch}
  .hero .act .btn{justify-content:center}
}
@media (max-width:380px){ .hero h1{font-size:3.25rem} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}html{scroll-behavior:auto}}
@media print{.ctabar{display:none}}
@supports not (color:color-mix(in srgb,red,blue)){
  .hero .bg{background:linear-gradient(90deg,rgb(15 42 31/.74) 0%,rgb(15 42 31/.62) 28%,rgb(15 42 31/.3) 52%,rgb(15 42 31/.06) 72%,transparent 86%),linear-gradient(180deg,rgb(15 42 31/.28) 0%,transparent 34%,transparent 72%,rgb(15 42 31/.24) 100%)}
  @media (max-width:781px){.hero .bg{background:linear-gradient(180deg,rgb(15 42 31/.7) 0%,rgb(15 42 31/.62) 45%,rgb(15 42 31/.38) 68%,rgb(15 42 31/.12) 100%)}}
}

/* =========================================================
   SUBPAGES  shared components for the theme templates (T1–T14).
   Same tokens, type and rules as the homepage; one section = one background.
   ========================================================= */
.sec{padding-block:var(--sp-70)}
.sec h2{font-size:var(--fs-h2m);letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.sec--tight{padding-block:var(--sp-50)}
.bg-kaste{--sec-bg:var(--kaste);background:var(--kaste)}
.bg-white{--sec-bg:var(--base);background:var(--base)}
.bg-havu{--sec-bg:var(--havu);--focus:var(--verso);--rule:color-mix(in srgb,var(--kaste) 24%,transparent);background:var(--havu);color:var(--kaste)}
.bg-havu h2,.bg-havu h3{color:var(--base)}
.bg-havu .label{color:var(--verso)}
.bg-havu .sec-lead{color:var(--kaste)}
.sec-head h2.big{font-size:var(--fs-section);letter-spacing:-.045em;line-height:.95}
.sec-foot{margin-top:var(--sp-50);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-20) var(--sp-40)}
.narrow{max-width:44rem}

/* breadcrumb (SEO plugin breadcrumb block / Woo breadcrumb) */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;margin:0;padding:0;list-style:none;font-size:var(--fs-small);line-height:1.4}
.crumbs li + li::before{content:"/";margin-right:.5rem;opacity:.5}
.crumbs a{display:inline-flex;align-items:center;min-height:2rem;text-underline-offset:.2em}
.crumbs [aria-current]{opacity:.8}

/* T1/T2 cover hero = the homepage hero, shorter */
.hero--sub{min-height:clamp(30rem,calc(80svh - var(--hdr)),46rem)}
.hero--sub h1{font-size:clamp(2.75rem,1.1rem + 5vw,6.25rem);line-height:.93}
/* lower cover hero for pages whose content must start soon (shop) */
.hero--low{min-height:clamp(24rem,calc(58svh - var(--hdr)),34rem)}
.hero .crumbs{color:var(--kaste)}
.hero .crumbs a{color:var(--base)}
.hero .crumbs + .label{margin-top:var(--sp-30)}
.hero .crumbs + .case-meta{margin-top:var(--sp-30)}
.hero .article-meta{color:var(--kaste)}
.top-filter{margin-bottom:var(--sp-40)}

/* split hero for photos under 1600 px: text on the page grid's first column, photo on the rest */
.phero{background:var(--kaste);padding-block:var(--sp-50) var(--sp-60)}
.phero-in{align-items:center}
.phero h1{margin-top:var(--sp-20);font-size:clamp(2.5rem,1.3rem + 3.6vw,5rem);letter-spacing:-.04em;line-height:.95;text-wrap:balance}
.phero .crumbs + .label,.thead .crumbs + .label{margin-top:var(--sp-30)}
.phero .label,.thead .label{color:var(--kuusi)}
.phero .lead{margin-top:var(--sp-30);max-width:32rem;font-size:var(--fs-lead);line-height:1.5;text-wrap:pretty}
.phero .act,.thead .act{margin-top:var(--sp-40);display:flex;flex-wrap:wrap;gap:var(--sp-20)}
.phero-img{margin:0;align-self:stretch}
.phero-img img{width:100%;height:100%;min-height:22rem;max-height:38rem;object-fit:cover}
.phone--dark{color:var(--havu);text-shadow:none}
.phone--dark strong{color:var(--kuusi)}
.phone--dark strong:not(:first-child){color:var(--harmaa)}

/* type head: hubs, contact, FAQ, archives (no photo) */
.thead{background:var(--kaste);padding-block:var(--sp-50) var(--sp-60)}
.thead h1{margin-top:var(--sp-20);font-size:clamp(2.5rem,1.3rem + 3.6vw,5rem);letter-spacing:-.04em;line-height:.95;text-wrap:balance}
.thead .rgrid{align-items:end;margin-top:0}
.thead .sec-lead{padding-bottom:.4rem}

/* key facts: a few verified numbers under a head */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--sp-30);margin:var(--sp-50) 0 0;padding:0;list-style:none}
.facts strong{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.75rem);letter-spacing:-.04em;line-height:1;white-space:nowrap}
.facts span{display:block;margin-top:.4rem;font-size:var(--fs-small);line-height:1.4;color:var(--harmaa)}
.bg-havu .facts strong{color:var(--base)}
.bg-havu .facts span{color:var(--kaste)}

/* alternating media rows (services, product lines, case rows) */
.rows{display:grid;gap:var(--sp-60)}
.row-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g-gap);align-items:center}
.row-item > figure{margin:0}
.row-item > figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.row-item:nth-child(even) > figure{order:2}
.row-item h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.row-item .label + h3{margin-top:var(--sp-20)}
.row-item p{margin-top:var(--sp-20);max-width:34rem}
.row-item ul{margin:var(--sp-20) 0 0;padding-left:1.1rem;max-width:34rem}
.row-item li{padding-block:.15rem}
.row-item .tlink,.row-item .btns{margin-top:var(--sp-20)}
.row-item .label{color:var(--kuusi)}

/* numbered steps (process) — the layer discs from the groundwork section */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--sp-40);margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2.25rem;aspect-ratio:1;border-radius:50%;background:var(--havu);color:var(--base);font:800 1rem/1 var(--f-display)}
.steps strong{display:block;margin-top:var(--sp-20);font-family:var(--f-display);font-weight:800;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);letter-spacing:-.025em;line-height:1.15}
.steps span{display:block;margin-top:.4rem;font-size:var(--fs-small);line-height:1.5;color:var(--harmaa)}
.bg-havu .steps li::before{background:var(--verso);color:var(--havu)}
.bg-havu .steps span{color:var(--kaste)}

/* comparison table (nt-compare): image row first, data below; scrolls sideways on phones */
.compare{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.compare:focus-visible{outline-offset:6px}
.compare table{width:100%;min-width:40rem;border-collapse:collapse;table-layout:fixed}
.compare th,.compare td{padding:.85rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);font-size:var(--fs-small);line-height:1.45}
.compare thead th{padding-bottom:var(--sp-20);border-bottom:1px solid var(--rule);vertical-align:bottom;scroll-snap-align:start}
.compare thead figure{margin:0 0 .75rem}
.compare thead img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.compare thead strong{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);letter-spacing:-.025em;line-height:1.1}
.compare thead .sub{display:block;margin-top:.2rem;font-weight:600;color:var(--kuusi)}
.compare tbody th{font-weight:600;color:var(--havu)}
.compare thead th:first-child{width:11rem}
.compare td.num{font-weight:700;font-size:var(--fs-body)}
.compare tbody th,.compare thead th:first-child{position:sticky;left:0;z-index:1;background:inherit}
.compare tfoot td{border-bottom:0;padding-top:var(--sp-20)}
.compare td.hi{font-weight:700}
.bg-kaste .compare tbody th,.bg-kaste .compare thead th:first-child{background:var(--kaste)}
.bg-white .compare tbody th,.bg-white .compare thead th:first-child{background:var(--base)}
.compare-note{margin-top:var(--sp-20);font-size:var(--fs-small);color:var(--harmaa)}
.compare-hint{display:none}
/* comparisons of products, services or devices use .options (below); .compare stays for real tables such as price matrices.
   On phones a table that does not fit scrolls sideways with sticky row labels, a hint line and an edge shadow (nt.js) */

/* spec sheet (nt-spec): tiles like a product label — mono name over a readable value, a rule on top of each */
.spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:var(--sp-40) var(--g-gap);margin:0}
.spec > div{display:flex;flex-direction:column;gap:.4rem;padding-top:var(--sp-20);border-top:1px solid var(--rule)}
.spec dt{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--kuusi)}
.spec dd{margin:0;font-size:1.0625rem;font-weight:500;line-height:1.45;text-wrap:pretty}
.bg-havu .spec dt{color:var(--verso)}
/* price ladder: the value is the point, so it is set in the display face */
.spec--tiers{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-30) var(--sp-30)}
.spec--tiers dd{font-family:var(--f-display);font-weight:800;font-size:clamp(1.375rem,1.1rem + .8vw,1.875rem);letter-spacing:-.03em;line-height:1}
/* address / terms rows: label and value on one line (contact page, legal) */
.spec--rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--g-gap)}
.spec--rows > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1rem;padding:.8rem 0;border-top:0;border-bottom:1px solid var(--rule)}
.spec--rows dt{font:600 var(--fs-body)/1.45 var(--f-body);letter-spacing:0;text-transform:none;color:var(--havu)}
.spec--rows dd{font-size:var(--fs-body);font-weight:400}

/* options side by side (nt-options): models, service levels or devices compared in columns.
   Rows line up across columns with subgrid: set --rows (all rows of one column) and --specs (rows in its <dl>) on .options */
.options{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:var(--g-gap);row-gap:0;margin:0;padding:0;list-style:none}
.opt{display:grid;grid-row:span var(--rows,6);grid-template-rows:subgrid;align-content:start}
.opt > figure{margin:0 0 var(--sp-30);aspect-ratio:4/3;overflow:hidden;background:var(--kaste)}
.bg-kaste .opt > figure{background:var(--base)}
.opt > figure img{width:100%;height:100%;object-fit:cover}
.opt h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.125rem);letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.opt-sub{margin-top:.5rem;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--kuusi)}
.opt-price{margin-top:var(--sp-30);font-family:var(--f-display);font-weight:800;font-size:clamp(1.75rem,1.4rem + 1.1vw,2.5rem);letter-spacing:-.035em;line-height:1}
.opt-price small{display:block;margin-top:.35rem;font-family:var(--f-body);font-weight:500;font-size:var(--fs-small);letter-spacing:0;color:var(--harmaa)}
.opt dl{display:grid;grid-row:span var(--specs,3);grid-template-rows:subgrid;margin:var(--sp-30) 0 0}
.opt dl > div{display:flex;flex-direction:column;gap:.3rem;padding:.85rem 0;border-top:1px solid var(--rule)}
.opt dt{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--kuusi)}
.opt dd{margin:0;font-size:var(--fs-body);line-height:1.45;text-wrap:pretty}
.opt-act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding-top:var(--sp-20);border-top:1px solid var(--rule)}
/* what every option shares, under the columns */
.options-shared{margin-top:var(--sp-60)}
.options-note{margin-top:var(--sp-40);max-width:52rem}
.options-shared > .label{margin-bottom:var(--sp-20);color:var(--kuusi)}

/* FAQ (nt-faq): light version of the Meistä accordion */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;padding-block:1rem;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:800;font-size:clamp(1.125rem,1rem + .45vw,1.375rem);letter-spacing:-.025em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.1rem;height:1.1rem;background:linear-gradient(var(--kuusi),var(--kuusi)) center/100% 2px no-repeat,linear-gradient(var(--kuusi),var(--kuusi)) center/2px 100% no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--kuusi),var(--kuusi)) center/100% 2px no-repeat}
.faq details > div{padding:0 2.5rem 1.25rem 0;max-width:44rem}
.faq details > div > * + *{margin-top:.75rem}
.faq-group + .faq-group{margin-top:var(--sp-60)}
.faq-group > h2{margin-bottom:var(--sp-30);font-size:var(--fs-h3);letter-spacing:-.025em}

/* before/after (nt-beforeafter): the range input drives --pos */
.ba{position:relative;display:grid;margin:0;overflow:hidden;--pos:50%;user-select:none}
.ba-img{grid-area:1/1}
.ba-img img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio,4/3);object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--base);box-shadow:0 0 0 1px color-mix(in srgb,var(--havu) 25%,transparent);pointer-events:none}
.ba-tag{position:absolute;top:var(--sp-20);z-index:2;padding:.3rem .5rem;background:var(--base);border:1.5px solid var(--havu);border-radius:2px;font:500 var(--fs-label)/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.ba-tag--b{left:var(--sp-20)}
.ba-tag--a{right:var(--sp-20);background:var(--verso)}
.ba input[type=range]{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-knob{position:absolute;top:50%;left:var(--pos);z-index:2;width:3rem;aspect-ratio:1;margin:-1.5rem 0 0 -1.5rem;border-radius:50%;background:var(--verso);border:2px solid var(--havu);pointer-events:none;background-image:linear-gradient(var(--havu),var(--havu)),linear-gradient(var(--havu),var(--havu));background-size:2px 40%,2px 40%;background-position:40% 50%,60% 50%;background-repeat:no-repeat}
.ba:has(input:focus-visible) .ba-knob{outline:3px solid var(--havu);outline-offset:3px}
.ba figcaption{grid-area:auto;margin-top:var(--sp-20);font-size:var(--fs-small);color:var(--harmaa)}
.ba--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20);overflow:visible}
.ba--pair .ba-img{grid-area:auto;position:relative}
.ba--pair .ba-after{clip-path:none}
.ba--pair::after{display:none}
.ba--pair figcaption{grid-column:1/-1}

/* product grid (nt-products) */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-50) var(--sp-30);margin:0;padding:0;list-style:none}
.prod{position:relative;display:flex;flex-direction:column}
.prod figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--base)}
.bg-white .prod figure{background:var(--kaste)}
.prod img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.prod h3{margin-top:var(--sp-20);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);letter-spacing:-.02em;line-height:1.2}
.prod h3 a{text-decoration:none}
.prod h3 a::before{content:"";position:absolute;inset:0;z-index:1}
.prod-price{margin-top:.35rem;font-weight:700}
.prod-meta{margin-top:.2rem;font-size:var(--fs-small);color:var(--harmaa)}
.prod .tag{top:var(--sp-20);left:var(--sp-20)}
.prods-note{margin-top:var(--sp-40);font-size:var(--fs-small);color:var(--harmaa)}
@media (hover:hover){.prod:hover img{transform:scale(1.03)}.prod:hover h3 a{text-decoration:underline;text-underline-offset:.18em}}
.prod:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
.prod h3 a:focus-visible{outline:none}

/* reference case grid (nt-casegrid) + filter tags */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-50) var(--sp-30);margin:0;padding:0;list-style:none}
.case{position:relative;display:flex;flex-direction:column}
.case figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--sammal)}
.case img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.case h3{margin-top:var(--sp-20);font-size:var(--fs-tile);letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
.case h3 a{text-decoration:none}
.case h3 a::before{content:"";position:absolute;inset:0;z-index:1}
.case p{margin-top:.35rem;font-size:var(--fs-small);line-height:1.5;color:var(--harmaa)}
@media (hover:hover){.case:hover img{transform:scale(1.03)}.case:hover h3 a{text-decoration:underline;text-underline-offset:.18em}}
.case:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
.case h3 a:focus-visible{outline:none}
.case[hidden],.prod[hidden]{display:none}
/* lead project: two columns × two rows on wide screens (reference archive) */
.case--lead figure{aspect-ratio:3/2}
@media (min-width:782px){
  .cases .case--lead{grid-column:span 2;grid-row:span 2}
  .case--lead figure{aspect-ratio:auto;flex:1;min-height:0}
  .case--lead h3{font-size:var(--fs-h3)}
}
/* case pages (T5): mono "paikkakunta · vuosi · tyyppi" line with the category tag in the hero */
.case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:var(--sp-30);font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.case-meta .tag{position:static}
.hero .case-meta{color:var(--base);text-shadow:0 1px 12px color-mix(in srgb,var(--havu) 45%,transparent)}
.phero .case-meta{color:var(--kuusi)}
.facts + .spec{margin-top:var(--sp-50)}
.sec-foot .label{color:var(--kuusi)}
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-40)}
.filter a,.filter button{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1rem;border:1.5px solid var(--havu);border-radius:2px;background:transparent;font:500 var(--fs-label)/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--havu);text-decoration:none;cursor:pointer}
.filter [aria-pressed="true"],.filter [aria-current]{background:var(--verso)}

/* reading column (articles, guides, legal) */
.prose{max-width:44rem;font-size:var(--fs-body);line-height:1.7}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2em;font-size:clamp(1.5rem,1.2rem + 1vw,2.125rem);letter-spacing:-.03em;line-height:1.1;scroll-margin-top:calc(var(--hdr) + 1rem)}
.prose h3{margin-top:1.6em;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);letter-spacing:-.02em;line-height:1.2}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.35em}
.prose a{text-underline-offset:.2em;text-decoration-thickness:1.5px}
.prose figure{margin-inline:0}
.prose figure img{width:100%;height:auto}
.prose figcaption{margin-top:.5rem;font-size:var(--fs-small);color:var(--harmaa)}
.prose blockquote{margin-inline:0;padding-left:var(--sp-30);border-left:3px solid var(--verso);font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);letter-spacing:-.025em;line-height:1.25}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.prose th,.prose td{padding:.6rem .5rem;text-align:left;border-bottom:1px solid var(--rule)}
.prose .callout-box{padding:var(--sp-30);background:var(--kaste);border-left:3px solid var(--verso)}
.article-meta{margin-top:var(--sp-20);font-size:var(--fs-small);color:var(--harmaa)}
.toc{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:flex;align-items:center;min-height:2.75rem;font-weight:600;text-decoration:none}
.toc a:hover{text-decoration:underline;text-underline-offset:.25em}

/* article / guide (T7) and legal (T11): kaste head → white body on the page grid
   (sticky index in column 1, 44rem reading column in columns 2–3) */
.art-head h1,.legal-head h1{max-width:16em;font-size:clamp(2.25rem,1.2rem + 3vw,4.25rem)}
.art-head .article-meta{margin-top:var(--sp-30)}
.art-head .art-lead{margin-top:var(--sp-30);max-width:44rem;font-size:var(--fs-lead);line-height:1.5;text-wrap:pretty}
.art-body,.legal-body{padding-block:var(--sp-60) var(--sp-70)}
.art-body .rgrid,.legal-body .rgrid{align-items:start}
.art-fig{grid-column:1/-1;margin:0 0 var(--sp-60)}
.art-fig img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.art-fig figcaption{margin-top:.6rem;font-size:var(--fs-small);color:var(--harmaa)}
.art-toc{position:sticky;top:calc(var(--hdr) + var(--sp-40));max-width:24rem}
.art-toc .label{margin-bottom:var(--sp-20);color:var(--kuusi)}
.art-toc .toc a{padding-block:.55rem;font-size:var(--fs-small);line-height:1.35}
.art-body .prose > :first-child,.legal-body .prose > :first-child{margin-top:0}
.art-body .callout-box{margin-block:2em}
.art-body .callout-box > * + *{margin-top:.6rem}
.art-body .callout-box p:last-child,.art-body .art-links{display:flex;flex-wrap:wrap;column-gap:var(--sp-40)}
.art-body .prose figure{margin-block:2em}
/* generated articles: photo groups as a two-up grid inside the reading column, single photos cropped to 4:3 */
.art-body .prose > figure img{aspect-ratio:4/3;object-fit:cover}
.prose .gal--art{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-block:2em}
.prose .gal--art figure{margin:0}
.prose .gal--art img{aspect-ratio:4/3;object-fit:cover}
.prose .gal--art figcaption{margin-top:.35rem}
.prose .prods--art{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-30) 1rem;margin-block:2em}
.prose .prods--art h3{margin-top:.6rem;font-size:1rem}
.prose .prods--art .prod-price{margin-top:.2rem}
/* side column of a short article without sections: the phone number instead of an index */
.art-ask p + p{margin-top:var(--sp-20)}
.art-ask a[href^="tel:"]{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.03em;text-underline-offset:.12em}
.legal-meta{margin-top:var(--sp-40);font-size:var(--fs-small);color:var(--harmaa)}
.legal-body .toc{counter-reset:t}
.legal-body .toc li{counter-increment:t}
.legal-body .toc a{gap:.75rem;padding-block:.5rem}
.legal-body .toc a::before{content:counter(t);flex:none;min-width:1.25rem;font-family:var(--f-mono);font-weight:500;color:var(--kuusi)}
.legal-body .prose h2{font-size:clamp(1.375rem,1.15rem + .8vw,1.875rem)}
.legal-body .prose h3{margin-top:1.4em;font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem)}
.legal-body .prose address{font-style:normal}
.legal-body .callout-box > * + *{margin-top:.5rem}
/* post lists (blog archive, related posts): heading row + mono meta line */
.feed-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:var(--sp-40)}
.sec .feed-h h2,.sub-h{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.1}
.sub-h{margin:var(--sp-60) 0 var(--sp-40)}
.pm{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.pm span{color:var(--harmaa)}
.posts .post h3{text-wrap:balance}
.nw{white-space:nowrap}

/* annotated photo (nt-parts): numbered pins on a project photo, each pin placed with --x / --y */
.parts-draw{position:relative}
.parts-draw img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.parts-draw .pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.parts .layers-wrap{align-self:center}

/* photo steps: a photo above each numbered step */
.steps--photo li{display:flex;flex-direction:column;padding-top:0;border-top:0}
.steps--photo figure{order:-1;margin:0 0 var(--sp-20)}
.steps--photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* captioned photo grid + two before/after pairs side by side */
.gal figure{margin:0}
.gal figcaption{margin-top:.5rem;font-size:var(--fs-small);line-height:1.4;color:var(--harmaa)}
.gal figcaption strong{color:var(--havu)}
.ba-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-50) var(--sp-40)}

/* green configurator (nt-greenconfig, /valmisviheriot/ and the shop product): plan view redrawn from the inputs, numbered pins tie fields to the drawing */
.dia{margin:0}
.dia-draw{position:relative}
.dia-draw svg{display:block;width:100%;height:auto}
.dia-draw .pin{position:absolute;transform:translate(-50%,-50%);transition:left .25s,top .25s}
.vv-svg .v-putt{fill:color-mix(in srgb,var(--kuusi) 80%,var(--verso))}
.vv-svg .v-dot{fill:color-mix(in srgb,var(--havu) 35%,transparent)}
.vv-svg .v-edge{stroke:var(--havu);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vv-svg .v-ext{stroke-dasharray:4 4}
.vv-svg .v-cup{fill:var(--base);stroke:var(--havu);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dia figcaption{margin-top:var(--sp-20);font-size:.8125rem;line-height:1.45;color:var(--harmaa)}
.vv-calc{display:grid;gap:var(--sp-30);max-width:36rem}
.vv-dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.vv-calc .field label,.vv-calc legend{display:flex;align-items:center;gap:.6rem;font-size:.9375rem;font-weight:600;line-height:1.25}
.vv-calc .field label > span:last-child{color:inherit}
.vv-calc small{display:block;margin-top:.15rem;font-weight:500;font-size:var(--fs-small);color:var(--harmaa)}
.vv-calc fieldset{margin:0;padding:0;border:0;min-width:0}
.vv-set > legend{margin-bottom:.6rem;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--kuusi)}
.vv-corners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:var(--sp-20);border-top:1px solid var(--rule)}
.pin-n,.vv-calc .field label .pin-n{flex:none;display:grid;place-items:center;width:1.75rem;aspect-ratio:1;border-radius:50%;background:var(--havu);color:var(--base);font:800 .8125rem/1 var(--f-display)}
.vv-sum{margin:0;padding:var(--sp-30);background:var(--kaste)}
.vv-sum div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.3rem}
.vv-sum dt{font-size:var(--fs-small);color:var(--harmaa)}
.vv-sum dd{margin:0;font-weight:700}
.vv-sum .total{margin-top:.4rem;padding-top:.7rem;border-top:1px solid var(--rule)}
.vv-sum .total dt{font-weight:600;color:var(--havu)}
.vv-sum .total dd{font-family:var(--f-display);font-weight:800;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);letter-spacing:-.03em;line-height:1}
.vv-note{font-size:var(--fs-small);line-height:1.5;color:var(--harmaa)}
.vv-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-20) var(--sp-40)}

/* people with a direct number (Meistä, Yhteystiedot) */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-40) var(--g-gap);margin:0;padding:0;list-style:none}
.people li{padding-top:var(--sp-20);border-top:1px solid var(--rule)}
.people h3,.people h4{font-size:var(--fs-tile);letter-spacing:-.025em;line-height:1.1}
.people .role{margin-top:.3rem;font-size:var(--fs-small);color:var(--harmaa)}
.people a{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:.2rem;font-weight:600;font-size:var(--fs-lead);text-underline-offset:.25em;text-decoration-thickness:1.5px}

/* colour swatches (Värilliset) */
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-20);margin:0;padding:0;list-style:none}
.swatches figure{margin:0}
.swatches img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.swatches figcaption{margin-top:.4rem;font-size:var(--fs-small);font-weight:600}
.swatches--row{grid-template-columns:repeat(10,minmax(0,1fr))}

/* small info note (shown for facts that wait for confirmation, delivery lines, etc.) */
.note-box{padding:var(--sp-30);background:var(--kaste);border-left:3px solid var(--verso);font-size:var(--fs-small);line-height:1.55}
.bg-kaste .note-box{background:var(--base)}

/* product page (T3) */
.pdp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--sp-60);align-items:start}
.pdp-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-20)}
.pdp-gal figure{margin:0;background:var(--kaste)}
.pdp-gal figure:first-child{grid-column:1/-1}
.pdp-gal img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.pdp-gal figure:first-child img{aspect-ratio:4/3}
.pdp-buy{position:sticky;top:calc(var(--hdr) + var(--sp-30))}
.pdp-buy h1{margin-top:var(--sp-20);font-size:clamp(2rem,1.4rem + 2vw,3.25rem);letter-spacing:-.04em;line-height:1}
.pdp-buy .label{color:var(--kuusi)}
.pdp-lead{margin-top:var(--sp-20);font-size:var(--fs-lead);line-height:1.5}
.pdp-price{margin-top:var(--sp-30);font-family:var(--f-display);font-weight:800;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);letter-spacing:-.03em}
.pdp-price small{font-family:var(--f-body);font-weight:500;font-size:var(--fs-small);letter-spacing:0;color:var(--harmaa)}
.pdp-rating{margin-top:.35rem;font-size:var(--fs-small);color:var(--harmaa)}
.pdp-form{display:grid;gap:1rem;margin-top:var(--sp-30)}
.pdp-form .field select,.pdp-form .field input{min-height:3.1rem}
.pdp-actions{display:grid;gap:.6rem;margin-top:var(--sp-20)}
.pdp-actions .btn{justify-content:center}
.pdp-delivery{margin-top:var(--sp-30);padding:var(--sp-20) 0 0;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.55;list-style:none}
.pdp-delivery li{padding-block:.25rem;padding-left:1.15rem;text-indent:-1.15rem}
.pdp-delivery li::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.6rem;border-radius:50%;background:var(--kuusi);vertical-align:.05em}
.pdp{margin-top:var(--sp-40)}
.pdp-thumb{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pdp-thumb[aria-current="true"] img{outline:2px solid var(--havu);outline-offset:-2px}
.pdp-form .field small{font-size:var(--fs-small);line-height:1.45;color:var(--harmaa)}
.pdp-form input[readonly]{background:var(--base)}
.pdp-sum{margin-top:.25rem}
.pdp-sum strong{font-size:var(--fs-lead)}
.pdp-status{margin-top:.5rem;font-size:var(--fs-small);font-weight:600;color:var(--kuusi)}
.pdp-status:empty{display:none}
.pdp-desc{max-width:40rem}
.pdp-desc h2{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.pdp-desc p{margin-top:var(--sp-20)}
.pdp-desc h3{margin-top:1.4em;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);letter-spacing:-.02em;line-height:1.2}
.pdp-desc ul{margin-top:var(--sp-20);padding-left:1.2em}
.reviews + .more{margin-top:var(--sp-40)}
@media (min-width:1101px){
  .pdp{grid-template-rows:auto 1fr;row-gap:var(--sp-50)}
  .pdp-buy{grid-column:2;grid-row:1/3}
  .pdp-desc{grid-column:1}
  .prods--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* product tabs (T3): description, specs, reviews and questions under the buy box — one panel at a time.
   Without JS every panel is shown in order and the tab row is hidden. */
.tabs{margin-top:var(--sp-60)}
.tab-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp-50)}
.tab-list [role=tab]{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1.1rem;border:1.5px solid var(--havu);border-radius:2px;background:transparent;font:500 var(--fs-label)/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--havu);cursor:pointer}
.tab-list [role=tab]:hover{background:var(--kaste)}
.tab-list [role=tab][aria-selected=true]{background:var(--verso)}
.tab-list [role=tab]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tabs:not(.is-tabs) .tab-list{display:none}
.tabs:not(.is-tabs) .tab-panel + .tab-panel{margin-top:var(--sp-70)}
.tab-panel:focus-visible{outline:3px solid var(--focus);outline-offset:8px}
.tab-panel > * + *{margin-top:var(--sp-50)}
.tab-panel .pdp-desc{max-width:44rem}
.tab-panel .reviews{margin-top:var(--sp-40)}
.tab-panel .sec-head{margin-bottom:var(--sp-40)}
.sub-h:first-child{margin-top:0}
/* four product cards per row also on tablets (the shared 3-column step leaves one orphan) */
@media (min-width:782px) and (max-width:1100px){.prods--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-30);margin:0;padding:0;list-style:none}
.reviews li{padding-top:0}
.reviews blockquote{margin:0;font-size:var(--fs-body);line-height:1.55}
.reviews cite{display:block;margin-top:.6rem;font-style:normal;font-size:var(--fs-small);color:var(--harmaa)}
.stars{color:var(--kuusi);letter-spacing:.1em}

/* blog list pagination */
.pager{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-50)}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:0 .75rem;border:1.5px solid var(--havu);border-radius:2px;font-weight:600;text-decoration:none}
.pager [aria-current]{background:var(--havu);color:var(--base)}

/* lime closing band without a form (pages that already carry the quote wizard) */
.quote--strip{padding-block:var(--sp-60)}
.quote--strip .rgrid{align-items:start}
.quote--strip .contacts{margin-top:0}

@media (max-width:1100px){
  .pdp{grid-template-columns:minmax(0,1fr)}
  .pdp-buy{position:static}
  .prods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews{grid-template-columns:minmax(0,1fr)}
  .swatches--row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .spec--tiers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .options{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(17rem,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
  .opt{scroll-snap-align:start}
}
@media (max-width:781px){
  .phero-in{row-gap:var(--sp-40)}
  .phero-img{order:-1;margin-inline:calc(-1 * var(--gutter))}
  .phero-img img{min-height:0;aspect-ratio:4/3;max-height:none}
  .phero{padding-top:0}
  .thead .rgrid{row-gap:var(--sp-30)}
  .row-item{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-30)}
  .row-item:nth-child(even) > figure{order:0}
  .rows{gap:var(--sp-50)}
  .steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-30)}
  .steps li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:1rem;padding-top:var(--sp-20)}
  .steps li::before{grid-row:1/3}
  .steps strong{margin-top:.2rem}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-30) 1rem}
  .spec dd{font-size:var(--fs-body)}
  .spec--tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec--rows{grid-template-columns:minmax(0,1fr)}
  .spec--rows > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  /* options on phones: one swipeable row, the next column peeks in */
  .options{grid-auto-columns:80%;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) .5rem;scroll-padding-inline:var(--gutter)}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-40) .75rem}
  .cases{grid-template-columns:minmax(0,1fr)}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ba--pair{grid-template-columns:minmax(0,1fr)}
  .faq details > div{padding-right:0}
  .hero--sub{min-height:clamp(28rem,calc(78svh - var(--hdr)),38rem)}
  .hero--low{min-height:clamp(22rem,calc(60svh - var(--hdr)),28rem)}
  /* a few products on phones: one per row, photo left and text right */
  .prods--list{grid-template-columns:minmax(0,1fr);gap:var(--sp-30)}
  .prods--list .prod{display:grid;grid-template-columns:7.5rem minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:1rem;align-items:start}
  .prods--list .prod figure{grid-row:1/4}
  .prods--list .prod h3{margin-top:0}
  /* filter as one swipeable row instead of several wrapped rows */
  .filter--scroll{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:.25rem var(--gutter);scrollbar-width:none}
  .filter--scroll::-webkit-scrollbar{display:none}
  .filter--scroll > *{flex:none}
  .tab-list{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:.25rem var(--gutter);scrollbar-width:none;margin-bottom:var(--sp-40)}
  .tab-list::-webkit-scrollbar{display:none}
  .tab-list [role=tab]{flex:none}
  .hero--sub h1{font-size:clamp(2.5rem,1.6rem + 4.5vw,3.5rem)}
  .compare thead th:first-child{width:8.5rem}

  /* compare, plain: sideways scroll — a hint line above and a shadow on the right edge until the end is reached */
  .compare-hint:has(+ .compare.is-scroll){display:block;margin:0 0 .6rem;font:500 var(--fs-label)/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--kuusi)}
  .compare.is-scroll{background:linear-gradient(var(--sec-bg,var(--base)),var(--sec-bg,var(--base))) right/1rem 100% no-repeat local,linear-gradient(to left,color-mix(in srgb,var(--havu) 18%,transparent),transparent) right/1rem 100% no-repeat scroll}
  /* case grids on phones: two per row (archives, long lists) or one swipeable row (related cases, guides) */
  .cases--duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-40) .75rem}
  .cases--duo .case h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.15}
  .cases--duo .case p{font-size:.8125rem;line-height:1.45}
  .cases--duo .case--lead{grid-column:1/-1}
  .cases--duo .case--lead h3{font-size:var(--fs-tile)}
  .cases--rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:.5rem var(--gutter);scroll-padding-inline:var(--gutter)}
  .cases--rail .case{scroll-snap-align:start}

  .parts-draw .pin{width:1.6rem;font-size:.8125rem;box-shadow:0 0 0 1.5px var(--base)}
  .dia-draw .pin{width:1.5rem;font-size:.75rem;box-shadow:0 0 0 1.5px var(--base)}
  .vv-corners{grid-template-columns:minmax(0,1fr)}
  .steps--photo li{display:grid;grid-template-columns:8rem minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:1rem}
  .steps--photo figure{grid-column:1;grid-row:1/4;margin:0;padding:0;border:0}
  .steps--photo li::before{grid-column:2;grid-row:1}
  .steps--photo strong,.steps--photo span{grid-column:2}
  .steps--photo strong{margin-top:.5rem}
  .ba-pairs{grid-template-columns:minmax(0,1fr)}
  .ba-pairs .ba--pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .swatches--row{grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem .5rem}
  .prose .prods--art{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches--row figcaption{font-size:.75rem;line-height:1.25;hyphens:auto}
  .art-toc{position:static;max-width:none}
  .art-body,.legal-body{padding-top:var(--sp-50)}
  .art-fig{margin:calc(-1 * var(--sp-50)) calc(-1 * var(--gutter)) var(--sp-20)}
  .art-fig img{aspect-ratio:4/3}
  .art-fig figcaption{padding-inline:var(--gutter)}
  /* the lime band right above already lists phone, WhatsApp, e-mail and pickup */
  main:has(> section.quote:last-of-type) + .site-footer .ft-contact{display:none}
}
@media (prefers-reduced-motion:reduce){.dia-draw .pin{transition:none}}