/* ═══════════════════════════════════════════════════════════════
   Tolmuvõlurid — ühine stiilileht

   Jagatud kõigi lehtede vahel: avaleht, KKK, blogi, privaatsus,
   aitäh. Enne oli see avalehe sees ühe <style> plokina, aga mitme
   lehe peale tähendaks see mitut koopiat samadest tokenitest, mis
   esimese muudatusega lahku jooksevad.

   Lehekülje-spetsiifilised reeglid (KKK akordion, blogikaardid)
   elavad nende lehtede endi väikestes <style> plokkides.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Kirjatüübid — majutatud OMAL serveril, mitte Google Fontsist.

   Miks: Google Fontsi <link> saatis iga külastaja IP-aadressi
   Google'ile enne, kui too jõudis midagi nõustuda. Küpsiseid seal
   ei olnud, aga IP on isikuandmed ja 2022. aasta Müncheni kohtu-
   otsus luges just selle GDPR-i rikkumiseks. Nüüd ei tee avalik
   leht ÜHTEGI väljapoole minevat päringut.

   Failid on Google Fontsi enda woff2-d, baidihaaval muutmata.
   Alla laeti ainult latin ja latin-ext: kirillitsa ja vietnami
   alamhulgad jäid välja, sest sait on ainult eestikeelne.

   Cinzel ja Karla on MUUTUVKIRJAD — Google saadab iga kaalu
   jaoks sama faili. Seepärast on neil üks fail alamhulga kohta ja
   mitu @font-face deklaratsiooni osutavad samale url-ile. Ära
   "paranda" seda ühe deklaratsiooniks: kaalude kaupa kirjas olek
   on täpselt see, mida Google ise saatis, ja brauser valib
   variatsiooni õigesti. IBM Plex Mono seevastu on staatiline,
   tema 400 ja 700 on päriselt eri failid.

   unicode-range on alles: latin-ext laeb ainult siis, kui lehel
   on š, ž vms. õ, ä, ö ja ü elavad latin-alamhulgas.
   ══════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cinzel-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cinzel-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cinzel-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cinzel-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/karla-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/karla-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/karla-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/karla-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/karla-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/karla-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────────────────────
   TOKENID
   ───────────────────────────────────────────────────────────── */
:root{
  /* pinnad */
  --bg:#FBF8F2; --bg-alt:#F3EEE3; --well:#F0EADD; --card-hover:#FFFDF7;
  --input:#FFFDF8; --figure:#E9E2D4;
  /* jooned */
  --line:#E6DFD0; --line-2:#DED5C2; --line-3:#EDE6D8; --line-strong:#C6BCA6;
  /* tint ja tumedad pinnad */
  --ink:#1F1B14; --dark:#16130E; --dark-card:#1D1912;
  --dark-line:#33291A; --dark-line-2:#3A3020; --dark-line-3:#4A3E27;
  /* summutatud */
  --muted:#57503F; --muted-2:#4B4436; --muted-3:#6A6252;
  --on-dark:#F4EFE4; --on-dark-2:#E8E1D2; --on-dark-3:#C2BAA8; --on-dark-4:#B4AC9A;
  /* kuld */
  --gold:#C9A24A; --gold-deep:#B8862B; --gold-link:#7A5A16;
  --gold-link-hover:#A5791F; --gold-hover:#E3C577;
  /* interaktiivsed piirjooned — WCAG 1.4.11 nõuab 3:1.
     Vanad --line-2 (1.38:1) ja --line-strong (1.78:1) ei läbinud. */
  --line-field:#8E8674;   /* 3.41:1 heledal — sisendid, ghost-nupp */
  --chip-off:#726450;     /* 3.22:1 tumedal — valimata kiip */
  /* kiri */
  --serif:Cinzel,Georgia,'Times New Roman',serif;
  --sans:Karla,system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  /* rütm */
  --gutter:clamp(16px,4vw,56px); --section:clamp(40px,6vw,88px);
  /* Päise kõrgus. Varuväärtus kehtib enne, kui JS jõuab päise ära mõõta,
     ja siis, kui JS-i pole. Päris väärtuse kirjutab initHeader() siia
     peale — päise kõrgus sõltub sisust ja murdub kitsal ekraanil, seega
     arvutada seda käsitsi tähendaks eksida.
     --stick-top on see, mille külge kleepuvad asjad end riputavad: kui
     päis on ära peidetud, langeb see nulli ja kleepuv riba tõuseb kaasa. */
  --header-h:76px;
  --stick-top:var(--header-h);
  --h2:clamp(24px,3.4vw,40px); --wrap:1240px;
  --r-sm:2px; --r-md:3px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ─────────────────────────────────────────────────────────────
   ALUS
   ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* Ilma selleta maandub iga ankrulink (#hind, #teenused, …) täpselt
   ekraani ülaserva — kleepuva päise ALLA, nii et pealkiri jääb varju.
   See on olnud vaikne viga igal hüppelingil. */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  width:100%; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Lühikesel lehel — näiteks blogi nimekiri kahe postitusega — lõppes
   sisu enne ekraani alumist serva ja jalus jäi õhku rippuma, taust
   paistis alt välja. Varem peitis seda jaluse suur alumine varu; kui
   see kadus, tuli viga nähtavale. Õige lahendus ei ole varu tagasi
   panna, vaid lasta põhisisul vaba ruum ära täita.

   Reegel on meelega seotud tingimusega `:has(> .footer)`: privaatsus-
   ja aitäh-lehel on oma paigutus ilma selle jaluseta ning neid ei tohi
   flex-konteineriks muuta. */
body:has(> .footer){
  min-height:100vh;
  min-height:100dvh;
  display:flex; flex-direction:column;
}
body:has(> .footer) > main{flex:1 0 auto}
body:has(> .footer) > .footer{flex-shrink:0}
a{color:var(--gold-link); text-decoration:none}
a:hover{color:var(--gold-link-hover)}
/* height:auto on kohustuslik, mitte ilus lisa. Piltidel on width- ja
   height-atribuudid (need hoiavad ära lehe hüppamise laadimisel), aga
   max-width:100% kahandab ainult laiust — kõrgus jäi atribuudi külge
   kinni. Blogipildid renderdusid 358×566, kui originaal on 1145×566:
   kolmandik laiusest, täies kõrguses, ehk lömastatud.
   .media img, .media--hero img ja .frame__layer img annavad kõrguse ise
   ja on kaalukamad, seega neid see ei puuduta. */
img{max-width:100%; height:auto; display:block}
h1,h2,h3{text-wrap:pretty}

/* Brauseri enda [hidden]{display:none} tuleb UA-stiililehest, seega
   kaotab ta IGA autori display-reegli vastu — ka madalama kaaluga.
   Nii jäi .frame__knob (display:flex) liuguri pealt võlukepile
   lülitudes ekraanile rippuma. Ühine reegel hoiab hidden-atribuudi
   usaldusväärsena kõikjal, ka järgmises komponendis. */
[hidden]{display:none !important}

:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:1px;
}
.on-dark :focus-visible{outline-color:var(--gold-hover)}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--dark); color:var(--bg); padding:14px 20px;
  border-radius:var(--r-sm); font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; transition:top .2s var(--ease);
}
.skip:focus{top:12px; color:var(--bg)}

/* ─────────────────────────────────────────────────────────────
   PRIMITIIVID
   ───────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap); margin:0 auto}
.section{padding:var(--section) var(--gutter)}

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--gold-link); display:inline-block;
}
.on-dark .eyebrow{color:var(--gold)}

.h2{
  font-family:var(--serif); font-weight:500; font-size:var(--h2);
  line-height:1.15; margin:12px 0 0;
}
.lede{
  margin:0; font-size:15px; line-height:1.75; color:var(--muted);
}

.btn{
  display:inline-block; border:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; font-weight:700;
  padding:15px 26px; border-radius:var(--r-sm);
  background:var(--dark); color:var(--bg);
  transition:background .3s ease, transform .3s var(--ease);
}
.btn:hover{background:var(--gold-link); color:var(--bg); transform:translateY(-2px)}
.btn--gold{background:var(--gold); color:var(--dark)}
.btn--gold:hover{background:var(--gold-hover); color:var(--dark)}
.btn--ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-field); font-weight:400;
}
.btn--ghost:hover{border-color:var(--gold-deep); background:var(--bg-alt); color:var(--ink)}
.btn--sm{padding:12px 18px; font-size:11px}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}

.card{
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:clamp(20px,2.6vw,32px);
  transition:background .35s ease, transform .35s var(--ease);
}
.card:hover{background:var(--card-hover); transform:translateY(-4px)}

.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  padding:12px 16px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--chip-off); background:transparent;
  color:var(--on-dark-3); font-weight:400;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{
  border-color:var(--gold); background:var(--gold);
  color:var(--dark); font-weight:700;
}

/* ─────────────────────────────────────────────────────────────
   SÕNAMÄRK
   Nähtav osa on dekoratiivne (kübar O kohal), päris nimi elab
   .sr-only sees — nii saavad ekraanilugeja, kopeerimine ja
   otsimootorid õige kirjapildi "TOLMUVÕLURID".
   ───────────────────────────────────────────────────────────── */
.wm{
  display:inline-flex; align-items:flex-start; gap:1px;
  font-family:var(--serif); font-weight:500;
  letter-spacing:.05em; line-height:1; color:var(--ink);
}
.wm__deco{display:inline-flex; align-items:flex-start; gap:1px; user-select:none}
.wm__o{position:relative; display:inline-block}
.wm .hat{
  position:absolute; left:50%; bottom:100%; width:92%;
  transform:translateX(-50%) translateY(32%) rotate(8deg);
  color:var(--gold-deep);
}
.wm--head{font-size:clamp(15px,1.9vw,21px)}
.wm--foot{font-size:clamp(15px,1.9vw,20px); color:var(--on-dark)}
.wm--foot .hat{color:var(--gold)}
.hat{fill:currentColor}
/* Kübara kunst asub viewBox'is y 2–44, seega nupu sees tuleb seda
   allapoole nihutada, et ring oleks optiliselt tasakaalus. */
.hat--knob{width:32px; color:var(--gold-deep); transform:translateY(11.6%)}

/* ─────────────────────────────────────────────────────────────
   PÄIS / NAV
   ───────────────────────────────────────────────────────────── */
.ticker{
  background:var(--dark); color:var(--on-dark-2);
  padding:9px var(--gutter);
  display:flex; flex-wrap:wrap; gap:6px 26px; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}
.ticker .sep{color:var(--gold)}

.header{
  position:sticky; top:0; z-index:20;
  background:rgba(251,248,242,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  padding:clamp(14px,1.8vw,22px) var(--gutter);
  transition:transform .28s var(--ease);
}
/* Telefonis läheb päis alla kerides ära ja tuleb üles kerides tagasi.
   translateY, mitte top või height: nihe käib kompositoril, paigutust
   ümber ei arvutata ja kerimine jääb sujuvaks.
   Atribuudi paneb paika initHeader(); laual seda kunagi ei juhtu. */
.header[data-hidden="true"]{transform:translateY(-100%)}
.nav{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(12px,2vw,28px);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}
/* Klikiala oli 18px kõrge — tekstirea täpsus. Vertikaalne padding teeb
   sellest ~44px, ilma et miski nihkuks: negatiivne margin võtab lisatud
   kõrguse päise arvestusest tagasi. */
.nav a{
  color:var(--muted-2); transition:color .25s ease;
  padding:13px 0; margin:-13px 0;
}
.nav a:hover{color:var(--gold-link)}
/* `.nav a` (0,1,1) kaalub üle `.btn` (0,1,0), nii et nupu tekst võttis
   menüülingi tumehalli värvi ja jäi tumedal taustal loetamatuks
   (~2:1). Need kaks rida annavad nupule ta enda värvi tagasi. */
.nav .btn{padding:11px 18px; margin:0; letter-spacing:.12em; color:var(--bg)}

/* ── Telefon: anna ekraan tagasi ──────────────────────────────
   390px juures murdus riba kahele ja päis kolmele reale — kokku
   205px ehk 24% ekraanist oli püsivalt hõivatud, enne kui sisu
   üldse algas. Riba on neli üldist väidet ilma lingi ja
   otsinguväärtuseta; päise nuppu asendab hõljuv nupp all servas. */
@media (max-width:700px){
  .ticker{display:none}
  .nav .btn{display:none}
}
.nav .btn:hover{transform:none; color:var(--bg)}

.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--gold-deep);   /* --gold on kreemil 2.26:1 — liiga nõrk */
  transform-origin:left; z-index:40; transform:scaleX(0);
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
.hero{padding:clamp(36px,6vw,92px) var(--gutter) clamp(28px,4vw,64px)}
.hero__grid{
  display:grid; gap:clamp(28px,4vw,64px); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px,5vw,62px); line-height:1.06;
  letter-spacing:.01em; margin:0;
}
.h1__sub{
  display:block; margin-top:.5em;
  font-family:var(--sans); font-weight:400; font-size:.32em;
  line-height:1.4; letter-spacing:.01em; color:var(--muted-3);
}
.hero__rule{
  display:flex; align-items:center; gap:12px;
  margin-bottom:clamp(18px,2.4vw,28px);
}
.hero__rule i{
  width:22px; height:1px; background:var(--gold-deep);
  transform-origin:left; display:block;
}
.hero__body{
  margin:clamp(18px,2.2vw,26px) 0 0; max-width:46ch;
  font-size:clamp(15px,1.5vw,18px); line-height:1.75; color:var(--muted);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3vw,32px)}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:clamp(24px,3vw,34px);
  font-size:13px; color:var(--muted-3);
}
.media{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  background:var(--well);
}
/* Üldreegel kaadritäitvatele fotodele. PEAB olema enne .media--hero
   img reeglit — sama kaaluga selektorid, hilisem võidab, ja varem
   nullis see hero väljaulatuvuse ära. */
.media img{width:100%; height:100%; object-fit:cover}
/* Figuur ulatub ploki ülemisest servast välja. `overflow:visible`
   tühistab .media oma peitmise; taust ja ümarad nurgad jäävad alles,
   sest need ei vaja lõikamist.
   --hero-bleed juhib, kui palju pea üle serva ulatub: pilt on
   suhtena kitsam (3:4) kui plokk (4:5), seega laiemaks venitamine
   teeb ta plokist kõrgemaks. Väljalõikel on külgedel läbipaistvat
   ruumi, nii et külgedele valgumine ei paista välja. */
.media--hero{
  aspect-ratio:4/5; min-height:300px;
  overflow:visible;
  --hero-bleed:1.08;
}
.media--hero img{
  position:absolute; z-index:1;
  left:50%; bottom:0; transform:translateX(-50%);
  width:calc(100% * var(--hero-bleed)); height:auto; max-width:none;
}
@media (max-width:640px){
  /* Kitsal ekraanil on hero püsti kohal — väiksem väljaulatuvus,
     muidu jookseb pea navigatsiooni alla. */
  .media--hero{--hero-bleed:1.03}
}

/* ─────────────────────────────────────────────────────────────
   ENNE / PÄRAST
   ───────────────────────────────────────────────────────────── */
.proof{
  padding:clamp(30px,4vw,64px) var(--gutter); background:var(--bg-alt);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.head-row{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:20px;
  margin-bottom:clamp(20px,3vw,32px);
}
.toggle{
  display:flex; gap:6px; background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:5px;
}
.toggle button{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  padding:10px 14px; border:0; border-radius:var(--r-sm);
  cursor:pointer; background:transparent; color:var(--muted);
  font-weight:400; transition:background .25s ease, color .25s ease;
}
.toggle button[aria-pressed="true"]{background:var(--dark); color:var(--bg); font-weight:700}

.frame{
  /* 2/1 vastab fotode kujule (1145×566), nii ei lõigata neist midagi ära. */
  position:relative; width:100%; aspect-ratio:2/1; min-height:240px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  overflow:hidden; background:var(--figure);
  user-select:none; cursor:crosshair;
  /* MITTE `none` — muidu ei saa telefonis pildilt alustatud viipega
     lehte üldse kerida ja külastaja jääb siia sektsiooni kinni. */
  touch-action:pan-y;
}
.frame[data-mode="slider"]{cursor:ew-resize}
.frame__layer{position:absolute; inset:0}
/* Ilma nende reegliteta joonistub pilt oma loomulikus suuruses ja
   raam jääb alt tühjaks. pointer-events:none on kohustuslik —
   muidu haarab brauser pildi enda lohistamise, mitte liuguri. */
.frame__layer img{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.frame__tag{
  position:absolute; top:16px; pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  padding:6px 10px; border-radius:var(--r-sm);
}
.frame__tag--a{left:16px; color:var(--bg); background:rgba(22,19,14,.78)}
.frame__tag--b{right:16px; color:var(--dark); background:var(--gold)}
.frame__line{
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--gold); pointer-events:none;
}
.frame__knob{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:var(--bg); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.frame__ring{
  position:absolute; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(184,134,43,.6);
  pointer-events:none;
}
.frame__hint{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--bg); background:rgba(22,19,14,.8);
  padding:9px 14px; border-radius:var(--r-sm);
}
.caption{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  margin-top:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted-3);
}

/* ─────────────────────────────────────────────────────────────
   SAMMUD / TEENUSED
   ───────────────────────────────────────────────────────────── */
.grid{display:grid; gap:clamp(18px,2.4vw,32px)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px}

.step{border-top:1px solid var(--line-2); padding-top:20px}
/* --gold andis kreemil 2.26:1 ja jäi 3.0 nõudest puudu. --gold-deep on
   3.06:1 ehk napilt üle — number on suur ja dekoratiivne, seega suurema
   teksti lävi kehtib. */
.step__no{font-family:var(--serif); font-size:30px; color:var(--gold-deep); line-height:1}
.step h3{font-family:var(--serif); font-weight:500; font-size:clamp(18px,2vw,23px); margin:12px 0 10px; line-height:1.2}
.step p{margin:0; font-size:15px; line-height:1.75; color:var(--muted)}

.svc{display:flex; flex-direction:column; gap:10px}
/* 10px on tavatekst, seega lävi on 4.5, mitte 3.0 — --gold-deep (3.06)
   ei piisanud. --gold-link on sama toon tumedamalt ja juba tõestatud. */
.svc__no{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--gold-link)}
.svc h3{font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.9vw,22px); margin:0; line-height:1.2}
.svc p{margin:0; font-size:14px; line-height:1.7; color:var(--muted)}
.svc__price{
  margin-top:auto; padding-top:14px; display:flex; align-items:baseline;
  gap:8px; border-top:1px solid var(--line-3);
}
.svc__price b{font-family:var(--serif); font-size:20px; font-weight:400; color:var(--ink)}
.svc__price span{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted-3)}

/* hinnakiri tabelina */
.pricetable{width:100%; border-collapse:collapse; font-size:15px; margin-top:8px}
.pricetable caption{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--muted-3); text-align:left; padding-bottom:12px;
}
.pricetable th,.pricetable td{
  text-align:left; padding:11px 12px; border-bottom:1px solid var(--line-3);
}
.pricetable th{
  font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.14em; color:var(--muted-3);
}
.pricetable td:last-child,.pricetable th:last-child{text-align:right}
/* Hind ei tohi murduda: „10 € / AKEN“ ja „ALATES 30 €“ läksid telefonis
   kahele reale ja hind kaotas seeläbi loetavuse. Nimeveerg annab järele,
   hinnaveerg mitte. */
.pricetable td:last-child{
  font-family:var(--serif); font-size:17px; white-space:nowrap; width:1%;
}
.tablewrap{overflow-x:auto}
.pricenote{
  margin:clamp(18px,2.4vw,26px) 0 0; max-width:70ch;
  font-size:13px; line-height:1.7; color:var(--muted-3);
}
.pricenote__date{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--muted-3);
}

/* ─────────────────────────────────────────────────────────────
   KALKULAATOR
   ───────────────────────────────────────────────────────────── */
/* overflow-x:clip, sest tolmuefekti lõuend on meelega tekstikastist
   110px võrra laiem igas suunas — muidu lõigatakse laiali paiskuvad
   osakesed serva pealt ära. Telefonis on paneel peaaegu üle ekraani,
   nii et see varu jäi ekraanist välja ja tegi lehe 69px laiemaks kui
   ekraan. Nähtavat ei kaota siin miski: ekraani servast väljapoole
   jääv osa oli niikuinii nägematu.

   `clip`, mitte `hidden`: hidden teeb elemendist kerimiskonteineri ja
   lõhuks paneeli position:sticky käitumise. clip ei tee. */
.est{
  padding:var(--section) var(--gutter);
  background:var(--dark); color:var(--on-dark);
  overflow-x:clip;
}

/* ── Hinnariba telefonis ──────────────────────────────────────
   Telefonis on kalkulaator 1619px pikk ja teenusekiipidest hinnani
   on 900px — kiipi vajutades ei ole numbrit, mis peaks vastama,
   üldse ekraanil. See riba hoiab hinna päise all kinni.

   Kleepub SEKTSIONI sees, seega ilmub kalkulaatorisse jõudes ja
   kaob sealt lahkudes — näitamiseks ei ole vaja ühtki vaatlejat
   ega skriptirida. Laual on külgpaneel juba olemas, seega riba
   seal ei kuvata. */
.est__live{
  display:none;                          /* laual jääb ta olemata */
  position:sticky; top:var(--stick-top); z-index:15;
  margin-inline:calc(var(--gutter) * -1);
  margin-bottom:clamp(20px,3vw,28px);
  padding:10px var(--gutter) 11px;
  /* Läbipaistmatu, mitte .97: hele tekst kolme protsendi tagant on
     tumedal taustal endiselt loetav ja lede paistis riba alt läbi.
     Hägustust siin ei ole, seega läbipaistvus ei osta midagi. */
  background:var(--dark);
  border-bottom:1px solid var(--dark-line-2);
  align-items:baseline; justify-content:space-between; gap:12px;
}
@media (max-width:700px){
  .est__live{display:flex}
}
.est__live span{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--on-dark-3); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.est__live b{
  font-family:var(--serif); font-weight:400; font-size:23px;
  color:var(--gold-hover); white-space:nowrap; flex:none;
}
.est__grid{
  display:grid; gap:clamp(28px,4vw,56px); align-items:start;
  /* 380px, mitte 320px: 320 juures jäi 740–800px laiuse juurde püsima
     kahe veeru seis, kus paneeli veerg on ~360px — parajasti nii kitsas,
     et pikim silt („REGULAARNE HOOLDUSKORISTUS · ÜLE 200 M²“) murdus
     kahele reale ja teised mitte, mistõttu paneel hüppas 16px. Kõrgem
     alammäär laseb ruudustikul selles vahemikus juba ühte veergu minna.
     Mõõdetud tools/visual/shoot.js sweep-režiimiga. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
}
.est .h2{color:var(--on-dark)}
.est__lede{margin:14px 0 26px; max-width:40ch; font-size:15px; line-height:1.75; color:var(--on-dark-3)}
.fieldset{border:0; padding:0; margin:0 0 22px; min-width:0}
.fieldset legend{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--on-dark-4); margin-bottom:10px; padding:0;
}
.chips{display:flex; flex-wrap:wrap; gap:8px}

.addons{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.addon{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--r-sm);
  border:1px solid transparent; transition:border-color .2s ease, background .2s ease;
}
.addon:hover{background:rgba(255,255,255,.03); border-color:var(--dark-line-2)}
.addon input[type=checkbox]{
  width:17px; height:17px; margin:0; flex:none;
  accent-color:var(--gold); cursor:pointer;
}
.addon label{flex:1; font-size:14px; color:var(--on-dark-3); cursor:pointer; line-height:1.45}
.addon__price{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--on-dark-4); white-space:nowrap;
}
.stepper{display:flex; align-items:center; gap:2px}
.stepper button{
  width:28px; height:28px; border:1px solid var(--dark-line-2);
  background:transparent; color:var(--on-dark-3); cursor:pointer;
  border-radius:var(--r-sm); font-size:15px; line-height:1;
  font-family:var(--mono);
  transition:border-color .2s ease, color .2s ease;
}
.stepper button:hover:not([disabled]){border-color:var(--gold); color:var(--gold)}
.stepper button[disabled]{opacity:.35; cursor:not-allowed}
.stepper output{
  min-width:28px; text-align:center;
  font-family:var(--mono); font-size:13px; color:var(--on-dark);
}

.panel{
  border:1px solid var(--dark-line); border-radius:var(--r-md);
  padding:clamp(24px,3vw,40px); background:var(--dark-card);
  /* Varem seisis siin clamp(14px,1.8vw,22px)*2 + 40px — päise polsterduse
     käsitsi tehtud koopia pluss oletus sisu kõrgusest. Kaks kohta, mis
     pidid kokku langema, aga mida miski ei sidunud. Nüüd mõõdetud väärtus. */
  position:sticky; top:calc(var(--header-h) + 12px);
}
.panel__label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--on-dark-4)}
.panel__sumwrap{position:relative; margin:16px 0 8px}
.panel__sum{
  font-family:var(--serif); font-size:clamp(34px,5.4vw,60px);
  line-height:1; color:var(--on-dark);
  white-space:nowrap;
}
/* Animatsiooni ajaks peidetakse päris tekst ja lõuend joonistab ta
   osakestena. Läbipaistvus, mitte `visibility` — lõpus hääbuvad
   osakesed ja päris tekst tuleb nende asemele ristuvhäivena.
   Läbipaistvust juhib JS inline'ina; see klass on ainult algseis. */
.panel__sum.is-fx{opacity:0}
.panel__fx{
  position:absolute; left:0; top:0;
  pointer-events:none;
}
/* .panel__sub on kadunud koos „TUNNIHIND“ real: ühik käib nüüd numbri
   küljes. Sellega vabaneb igalt paneelilt 17.6px, mis seisis tühja
   kvalifikaatori jaoks valmis ka siis, kui kvalifikaatorit ei olnud. */
/* .15s, mitte .18s: sama pikk kui setRibaSum'i ooteaeg, mille järel tekst
   vahetatakse. Kui need kaks lahku lähevad, vahetub tekst kas veel
   nähtavana või jääb riba tarbetult tühjaks.

   Mõlemad kleepuvad hinnaribad käivad siit läbi: #bar-sum lehe all ja
   #live-sum telefonis päise all. Telefoni oma vahetas varem numbrit
   hüppega — sama koodi taga, aga ilma ülemineku reeglita. */
#bar-sum,
#live-sum{
  display:inline-block;
  transition:opacity .15s ease-out, transform .15s ease-out;
}
#bar-sum.is-fx,
#live-sum.is-fx{ opacity:0; transform:translateY(-3px) }
.panel__meta{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--gold)}
.panel__rule{height:1px; background:var(--dark-line); margin:24px 0}
.panel ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--on-dark-3)}
.panel li{display:flex; gap:10px}
.panel li i{color:var(--gold); font-style:normal}
.panel .btn{margin-top:26px}
.panel__note{
  margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--on-dark-4);
}
/* Alumine märkus on olemas ainult mõne teenuse juures (esialgne hind,
   „alates“-lisateenus). Ilma varuta kaob ja tekib paneeli jalg teenust
   vahetades, mis loeb sama hüppena nagu kõrguse muutus ülalpool.

   Üks rida, mitte kaks: mõõdetud sisu on 0px (hooldusel märkust ei ole)
   või 19.2px (üks rida) — kahe rea varu jättis paneeli jalga tühja triibu.
   Kaks märkust korraga (vuugid + esialgne hind) kasvatavad ala, aga see
   juhtub alles siis, kui kasutaja ise lisateenuse lisab. */
#p-note{min-height:1.6em}
/* Kitsal ekraanil murduvad pikim silt („REGULAARNE HOOLDUSKORISTUS ·
   ÜLE 200 M²“) ja märkus kahele-kolmele reale, lühemad aga mitte —
   sealt tuli 16–37px hüpe teenust vahetades. Kaks astet, sest 360px
   juures ei piisa enam kahest reast. Laiematel ekraanidel varu ei ole,
   sest seal see jääks tühjaks. Piirid on mõõdetud, mitte pakutud:
   tools/visual/shoot.js SWEEP-režiim. */
@media (max-width:400px){
  .panel__label{min-height:3.2em}
  #p-note{min-height:3.2em}
}
@media (max-width:360px){
  .panel__label{min-height:4.8em}
  #p-note{min-height:4.8em}
}
/* Alla 344px murduvad ka hinnarida ise ja kvalifikaatori rida. Need on
   2016. aasta telefonide laiused; reegel on siia piiratud, nii et
   suurematel ekraanidel ei maksa ta midagi. */
@media (max-width:344px){
  .breakdown{min-height:57.6px}
  .panel__meta{min-height:3.2em}
}
/* Selles alas on kas hinnaread või üks selgitav lause. Varu peab olema
   konteineril, mitte lausel — muidu jääb reavariant lühikeseks ja paneel
   hüppab ikka, ainult teistpidi.

   38.4px = kaks rida lauset (12px × 1.6) ja see on tools/visual/shoot.js
   abil mõõdetud suurim sisu KÕIGIL neljal laiusel (1440/1100/860/390).
   Varem seisis siin 58px puhtast oletusest — kolm rida — ja jättis
   paneeli sisse nähtava tühja triibu. Kui lauset muudad, mõõda uuesti. */
.breakdown{
  margin:0; font-size:13px; color:var(--on-dark-3);
  display:flex; flex-direction:column; gap:6px;
  min-height:38.4px;
}
.breakdown > .panel__note{margin-top:0}
.breakdown__row{display:flex; justify-content:space-between; gap:16px}
.breakdown__row span:first-child{color:var(--on-dark-4)}
.breakdown__row span:last-child{font-family:var(--mono); font-size:12px; white-space:nowrap}

/* ─────────────────────────────────────────────────────────────
   ARVUSTUSED
   ───────────────────────────────────────────────────────────── */
/* Arvustused on lohistatav rida, mitte virn. Kuus tsitaati üksteise all
   olid telefonis 1122px — pikem kui ekraan ja pikem kui kannatus. Rida
   kerib natiivselt, seega klaviatuur, puuteplaat ja ekraanilugeja
   töötavad ilma ühegi lisareata JS-i. */
.quotes{
  display:flex; gap:clamp(18px,2.4vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);
  overscroll-behavior-x:contain;
  scrollbar-width:none;                 /* kerimisriba peidus, punktid all */
  padding-bottom:4px;
  /* Kerimine tohib jätkuda üle .wrap'i serva, muidu jääks viimane kaart
     poolikuna raami taha kinni. */
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.quotes::-webkit-scrollbar{display:none}

/* Parema serva hääbumine ütleb, et rida läheb edasi. Mask käib
   konteineri enda kasti peale, mitte sisu peale, seega püsib ta serva
   küljes ka siis, kui kaardid all liiguvad. data-end tuleb JS-ist:
   viimase kaardi juures ei ole enam kuhugi minna ja hääbumine
   kaob, muidu ta valetaks. */
.quotes{
  --fade:56px;
  mask-image:linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
  transition:mask-image .3s ease;
}
.quotes[data-end="true"]{mask-image:none}

/* Laual on lint lõputu: sisu jätkub mõlemal pool, seega peab hääbuma ka
   vasak serv — ainult paremal hääbudes näeb rida välja nagu algaks ta
   järsku ekraani servast. Ka laiem kui telefonis, sest ruumi on rohkem
   ja kitsas triip ei loe pehmenduse, vaid vea pähe.
   data-end siia ei puutu — lõputul lindil lõppu ei ole. */
@media (min-width:701px){
  .quotes{
    --fade:clamp(80px,10vw,170px);
    mask-image:linear-gradient(to right,
      transparent, #000 var(--fade),
      #000 calc(100% - var(--fade)), transparent);
  }
}

/* Lohistamine on hiireasi: puutel keritakse niikuinii sõrmega ja
   haaramiskursorit pole kellelegi näidata. */
@media (hover:hover) and (pointer:fine){
  .quotes{cursor:grab}
  .quotes[data-drag="true"]{cursor:grabbing}
}
/* Tekstivaliku keeld kehtib ainult liigutuse ajaks — muul ajal on
   tsitaat tavaline tekst. Lohistus ja valimine on sama žest, seega
   ühe kasuks tuleb teisest loobuda, aga mitte kauemaks kui vaja. */
.quotes[data-drag="true"]{user-select:none}
.quote{
  margin:0; border-top:1px solid var(--line-2); padding-top:22px;
  display:flex; flex-direction:column; gap:14px;
  flex:0 0 min(88%,340px); scroll-snap-align:start;
}
/* Cinzel on pealkirjakiri: väiketähed tulevad kapiteelidena välja ja
   17px juures oli see lehe raskeim lõik lugeda — seda just seal, kus
   sõnad on klientide omad. Sisukiri loeb paremini. */
.quote blockquote{
  margin:0; font-family:var(--sans);
  font-size:16px; line-height:1.6; color:var(--ink);
}
/* Kõik kuus arvustust on Google'is viie tärniga — kinnitatud, mitte
   oletatud. Rida on role="img" + aria-label, mitte tärnid pluss
   .sr-only tekst: .sr-only on position:absolute ja kaardil ei ole
   positsiooni, seega lahendus lohises kerirea seest välja ja venitas
   lehe 4218px laiaks. Üks silt ühe elemendi peal ei saa kuhugi lohiseda.

   Värv on --gold-link, mitte --gold-deep: viimane annab heledal taustal
   3.07:1 ja kukub AA-st läbi. Sama tokenit kasutab „LOE EDASI →“.

   Päritolu on sektsiooni pealkirjas („GOOGLE'I ARVUSTUSED“), mitte iga
   kaardi all eraldi — kuus korda sama sõna oli müra, aga päritolu ise
   on see, mis eristab arvustust ise kirjutatud soovitusest. */
.quote__stars{
  margin:0; line-height:1;
  font-size:14px; letter-spacing:.16em;
  color:var(--gold-link);
}
.quote figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted-3)}

/* Asukohapunktid. Nupud, mitte täpid: neile saab ka klõpsata. */
.quotes-dots{
  display:flex; gap:8px; justify-content:center; margin-top:22px;
}
.quotes-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:var(--line-strong); cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.quotes-dots button[aria-current="true"]{background:var(--gold-deep); transform:scale(1.4)}
/* Klikiala on nähtavast punktist suurem. */
.quotes-dots button::after{content:""; position:absolute; inset:-14px}
.quotes-dots button{position:relative}

/* Laual liigub rida ise ja lõppu tal ei ole — punkte pole millegi juurde
   hüppamiseks vaja ja hääbumine jääb alaliseks. Punktid jäävad DOM-i
   alles: akna kitsamaks tõmbamisel tulevad nad tagasi ilma, et midagi
   uuesti ehitama peaks.
   NB: see reegel PEAB olema pärast `.quotes-dots{display:flex}` — sama
   kaaluga reeglite puhul võidab hilisem, ja varem siin ülalpool olles
   ei jõudnud ta mõjuda. */
@media (min-width:701px){
  .quotes-dots{display:none}
}
.empty-note{
  margin:0; padding:22px; border:1px dashed var(--line-strong);
  border-radius:var(--r-md); font-size:14px; color:var(--muted-3);
}

/* ─────────────────────────────────────────────────────────────
   VORM
   ───────────────────────────────────────────────────────────── */
.contact{
  padding:var(--section) var(--gutter);
  background:var(--bg-alt); border-top:1px solid var(--line);
}
.contact__grid{
  display:grid; gap:clamp(28px,4vw,56px); align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
/* Otsekontaktid. Värvi siin ei määrata: globaalne a-reegel annab juba
   --gold-link'i, mis on ainus kuldne toon, mis heledal --bg-alt taustal
   AA läbib. Püstine polsterdus on puute jaoks, mitte ilu pärast. */
.contact__direct{
  margin:14px 0 0; padding:0;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 12px;
}
/* min-height, mitte polsterdus: telefoninumber on telefonis üks
   tähtsamaid puutesihte ja 44px on alampiir, mida npm run audit
   mõõdab. Inline-flex hoiab teksti kasti sees keskel. */
.contact__direct a{display:inline-flex; align-items:center; min-height:44px}
.contact__direct .sep{color:var(--muted-3)}

.form{
  display:flex; flex-direction:column; gap:14px;
  background:var(--bg); border:1px solid var(--line-2);
  border-radius:var(--r-md); padding:clamp(20px,3vw,32px);
}
/* Ujuv silt: puhkeasendis istub silt kastis nagu kohatäide ning
   tõuseb fookusel või sisu olemasolul üles ja kahaneb. Hoiab iga
   välja pealt ~12 px kokku ja teeb vormi lühemaks. */
.field{position:relative; display:block}
.field input,.field textarea{
  font-family:var(--sans); font-size:16px;
  padding:23px 14px 8px;
  border:1px solid var(--line-field); border-radius:var(--r-sm);
  background:var(--input); color:var(--ink); width:100%;
  transition:border-color .18s ease;
}
.field textarea{resize:vertical; padding-top:26px}
.field input:focus,.field textarea:focus{border-color:var(--gold-deep)}

.field > span{
  position:absolute; left:15px; top:17px;
  font-size:16px; line-height:1; color:var(--muted-3);
  pointer-events:none; transform-origin:left top;
  transition:transform .18s var(--ease), color .18s var(--ease);
}
.field--area > span{top:20px}

/* Kohatäide tuleb nähtavale alles siis, kui silt on juba üleval —
   muidu oleks kastis korraga kaks teksti. */
.field input::placeholder,.field textarea::placeholder{
  color:transparent; transition:color .18s ease;
}
.field input:focus::placeholder,.field textarea:focus::placeholder{
  color:var(--muted-3); opacity:.6;
}

.field input:focus + span,
.field input:not(:placeholder-shown) + span,
.field textarea:focus + span,
.field textarea:not(:placeholder-shown) + span{
  transform:translateY(-10px) scale(.68);
  color:var(--gold-link);
}
.field--area textarea:focus + span,
.field--area textarea:not(:placeholder-shown) + span{
  transform:translateY(-13px) scale(.68);
}

.field input:invalid:not(:placeholder-shown){border-color:#A3512F}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.55; color:var(--muted)}
.consent input{width:17px; height:17px; margin:2px 0 0; flex:none; accent-color:var(--gold-deep)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__status{margin:0; font-size:13px; line-height:1.6}
.form__status--ok{color:var(--gold-link)}
.form__status--err{color:#A3512F}
.form__note{margin:0; font-size:12px; line-height:1.6; color:var(--muted-3)}

/* ─────────────────────────────────────────────────────────────
   JALUS + KLEEPRIBA
   ───────────────────────────────────────────────────────────── */
.footer{
  padding:clamp(28px,3.2vw,44px) var(--gutter)
          calc(clamp(24px,2.6vw,36px) + env(safe-area-inset-bottom,0px));
  background:var(--dark); color:var(--on-dark-3);
}
/* Ainult avalehel on kleepuv hinnariba, ja seegi alles siis, kui tal
   on hind näidata. Varem hoidis jalus talle ruumi igal lehel ja kogu
   aeg — kuni 120px tühja, mida neljal lehel viiest polnud kunagi
   millegagi täita. Nüüd tekib varu siis, kui riba on päriselt ees. */
body:has(#bar[data-show="true"]) .footer{
  padding-bottom:calc(clamp(24px,2.6vw,36px) + 64px + env(safe-area-inset-bottom,0px));
}
.footer__grid{
  display:flex; flex-wrap:wrap; gap:18px;
  align-items:flex-start; justify-content:space-between;
}
.footer__tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--on-dark-4)}
.footer__nav{display:flex; flex-wrap:wrap; gap:12px 32px; font-family:var(--mono); font-size:11px; letter-spacing:.12em}
.footer__nav a{color:var(--on-dark-3); transition:color .25s ease}
.footer__nav a:hover{color:var(--gold-hover)}
.footer__legal{
  margin:14px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--on-dark-4); line-height:1.6;
}

.bar{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(22,19,14,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--dark-line);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));
  display:flex; flex-wrap:wrap; gap:12px 24px;
  align-items:center; justify-content:space-between;
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.bar[data-show="true"]{transform:none}
.bar__sum{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  min-width:0;
}
.bar__sum b{
  font-family:var(--serif); font-size:19px; font-weight:400;
  color:var(--on-dark); transition:color .25s ease;
}
.bar__sum span{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--on-dark-4); transition:color .25s ease;
}
.bar__sum:hover b{color:var(--gold-hover)}
.bar__sum:hover span{color:var(--on-dark-3)}
.bar__cta{display:flex; flex-wrap:wrap; gap:10px; flex:none}
@media (max-width:560px){
  /* Telefonis ei ole see enam üle ekraani riba, vaid hõljuv nupp keskel
     all. Taust ja ääris kaovad, alles jääb kompaktne pill: hind väikeses
     kirjas peal, tegevus all. Nii ei kata ta lehte kinni ja loeb selgelt
     nupuna, mitte tööriistaribana.

     Käitumine jääb samaks: ilmub alles pärast herot, muutub peitmisel
     inert'iks ja kaob vormi juures, et mitte katta seda, mille juurde
     ta saadab. */
  .bar{
    left:50%; right:auto; transform:translate(-50%,180%);
    width:max-content; max-width:calc(100vw - 32px);
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    padding:0; gap:0; border:0; background:none;
    backdrop-filter:none; box-shadow:none;
  }
  .bar[data-show="true"]{transform:translate(-50%,0)}
  /* Hind on kalkulaatoris juba ees; hõljuv element on üks nupp ja mitte
     tööriistariba, muidu katab ta lehte rohkem kui aitab. */
  .bar__sum{display:none}
  /* Ümarad nurgad, mitte pill: 999px tegi nupust lönksu, mis ei kuulu
     ülejäänud lehe nurkade juurde (--r-sm on 2px). 8px loeb hõljuva
     elemendina, jäädes samasse keelde. */
  .bar__cta .btn{
    padding:16px 30px; border-radius:8px; font-size:12px;
    box-shadow:0 8px 24px rgba(22,19,14,.32);
  }
}

/* ─────────────────────────────────────────────────────────────
   LIIKUMINE
   Vaikimisi on kõik nähtav. Animatsioon lisandub ainult siis,
   kui brauser scroll-timeline'i tegelikult toetab — muidu
   käivituksid kõik 12 ilmumist korraga lehe laadimisel.
   ───────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@keyframes fadein{from{opacity:0} to{opacity:1}}
@keyframes draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}

.reveal,.reveal-in{opacity:1; transform:none}

@supports (animation-timeline:view()){
  .reveal{animation:rise .8s linear both; animation-timeline:view(); animation-range:entry 2% cover 22%}
  .reveal-in{animation:fadein .9s linear both; animation-timeline:view(); animation-range:entry 2% cover 20%}
}
@supports (animation-timeline:scroll(root)){
  .progress{animation:draw 1s linear both; animation-timeline:scroll(root)}
}
@supports not (animation-timeline:scroll(root)){
  .progress{display:none}
}

.hero__rule i{animation:draw 1.1s .15s var(--ease) both}
.hero__enter{animation:rise 1s var(--ease) both}
.hero__enter--1{animation-delay:.1s}
.hero__enter--2{animation-delay:.24s}
.hero__enter--3{animation-delay:.38s}
.hero__enter--4{animation-delay:.5s}
/* Hero pilt EI liigu ja see on otsus, mitte tegemata töö: Ken Burnsi
   aeglane suum sobib kaadritäitvale fotole, mitte väljalõigatud
   figuurile — inimene hakkaks märkamatult paisuma. */

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

/* ═══════════════════════════════════════════════════════════════
   KKK — akordion
   Kasutusel nii avalehe lühiplokis kui ka kkk.html-is, seepärast
   ühises lehes. <details> annab klaviatuuritoe ja lahtivoltimise
   ilma JavaScriptita ning vastused on DOM-is ka suletuna — see on
   oluline, sest robotid ei kliki midagi lahti.
   ═══════════════════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer; list-style:none;
  padding:20px 44px 20px 0; position:relative;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(16px,1.8vw,20px); line-height:1.35;
  color:var(--ink); transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-link)}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:9px; height:9px; margin-top:-7px;
  border-right:1.5px solid var(--gold-deep);
  border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(45deg);
  transition:transform .25s var(--ease), margin-top .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq__a{padding:0 0 24px; max-width:68ch}
.faq__a p{margin:0 0 12px; font-size:15px; line-height:1.75; color:var(--muted)}
.faq__a p:last-child{margin-bottom:0}
.faq__a ul{margin:0 0 12px; padding-left:20px; font-size:15px; line-height:1.75; color:var(--muted)}
.faq__a li{margin-bottom:6px}
.faq__more{
  margin:clamp(22px,3vw,30px) 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}

/* ═══════════════════════════════════════════════════════════════
   Blogi — nimekiri ja artikkel
   ═══════════════════════════════════════════════════════════════ */
.posts{
  display:grid; gap:clamp(20px,2.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.post-card{
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--line-2); padding-top:22px;
}
/* Pisipilt. Kõigil postitustel seda ei ole ja see on lubatud —
   ilma jagamispildita postitus saab tekstikaardi, nagu varem.
   Seepärast ei kanna mõõtu .post-card, vaid pilt ise.

   aspect-ratio hoiab koha kinni ilma width/height atribuutideta:
   nimekirja koostaja ei loe failist mõõte välja (Pythoni
   standardteegis pildilugejat ei ole) ja ilma reserveeritud
   kohata hüppaks nimekiri laadimisel paigast. */
.post-card__pilt{
  display:block; overflow:hidden;
  background:var(--figure); border-radius:var(--r-sm);
}
.post-card__pilt img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
}
.post-card time{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted-3)}
.post-card h2{font-family:var(--serif); font-weight:500; font-size:clamp(18px,2.1vw,24px); line-height:1.25; margin:0}
.post-card h2 a{color:var(--ink); transition:color .2s ease}
.post-card h2 a:hover{color:var(--gold-link)}
.post-card p{margin:0; font-size:15px; line-height:1.7; color:var(--muted)}
.post-card__more{
  margin-top:auto; padding-top:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--gold-link);
}

.article{max-width:70ch; margin:0 auto}
.article__meta{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted-3); margin:0 0 14px}
.article h1{font-family:var(--serif); font-weight:500; font-size:clamp(26px,4vw,44px); line-height:1.12; margin:0 0 18px}
.article__lede{font-size:clamp(16px,1.7vw,19px); line-height:1.7; color:var(--muted); margin:0 0 clamp(24px,3vw,36px)}
.article h2{font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.3vw,26px); line-height:1.25; margin:clamp(30px,4vw,44px) 0 12px}
.article p{font-size:16px; line-height:1.8; color:var(--ink); margin:0 0 16px}
.article ul,.article ol{font-size:16px; line-height:1.8; color:var(--ink); padding-left:22px; margin:0 0 16px}
.article li{margin-bottom:8px}
.article strong{font-weight:700}
.article figure{margin:clamp(24px,3vw,36px) 0}
.article figure img{border-radius:var(--r-md); border:1px solid var(--line-2)}
.article figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted-3); margin-top:10px}
.article__cta{
  margin-top:clamp(32px,4vw,48px); padding:clamp(22px,3vw,32px);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md);
}
.article__cta p{margin:0 0 18px; font-size:15px; line-height:1.7; color:var(--muted)}
/* Oma real, aga klikiala jääb teksti laiuseks: `block` üksi venitaks
   lingi üle terve veeru laiuse. Inline-block'ina sattus tagasilink
   sama rea peale järgneva .eyebrow'ga ("← TAGASI AVALEHELE BLOGI"). */
.backlink{
  display:block; width:fit-content; margin-bottom:clamp(22px,3vw,32px);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}