/* ============================================================
   SELF-HOSTITUD FONDID (ETAPP 6): Instrument Serif + Hanken Grotesk,
   SIL Open Font License (litsents lubab veebis self-hostimist).
   Google Fontsi <link> on eemaldatud — enne nõusolekut ei tohi
   kolmandate osapoolte domeenidele päringuid teha.
   ============================================================ */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/hankengrotesk-normal-300_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}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/hankengrotesk-normal-300_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}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrumentserif-italic-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}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrumentserif-italic-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}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrumentserif-normal-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}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrumentserif-normal-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}

/* ============================================================
   Hekiprofid landing CSS.
   Alus: index-v6.html <style> plokk MUUTMATA kujul (allpool).
   Faili LOPUS on selgelt margitud lisaplokid: skip link,
   teavitusriba, inline-stiilide asendusklassid, vormi suletud
   olek, eelvaate riba. Kujundustokeneid ei muudeta.
   ============================================================ */

/* ============================================================
   DESIGN SYSTEM MANIFEST · v1 (DRAFT)
   Põhi: index.html (v1) paigutus — kasutaja valik.
   Identity: "Vana v1 rahulik beež-roheline raam, aga õhku juurde,
   nurgad pehmemaks ja kiri suuremaks — nii et leht hingab
   nagu hoolitsetud aed, mitte nagu teenusekataloog."
   Muudetud v1-st:
     · fondid: Playfair Display + Inter  →  Instrument Serif + Hanken Grotesk
     · nurgad: 2px → 22px (kaardid), pill (nupud)
     · tüpograafia ja vahed ~30% suuremad
     · varjud: üks kõva vari → mitmekihiline pehme
     · sisu: 13 plokki → 10 (ainult kinnitatud copy + lubadused)
   Fonts: Instrument Serif (display) / Hanken Grotesk (leivatekst, UI)
   Type:  base 17px · ratio 1.333 (Perfect Fourth)
   Status: DRAFT
   ============================================================ */

:root{
  --green-900:#122019; --green-800:#1A2E23; --green-700:#24402F; --green-600:#325744;
  --beige-50:#FBF8F1; --beige-100:#F5EFE2; --beige-200:#EDE4D2;
  --brass:#A88A56; --brass-light:#C9AE7C;
  --ink:#1E2A23; --ink-soft:#5A6960;
  --on-dark:#F5EFE2; --on-dark-2:rgba(245,239,226,.74); --on-dark-3:rgba(245,239,226,.52);
  --line:rgba(30,42,35,.12); --line-2:rgba(30,42,35,.07);
  --line-dark:rgba(245,239,226,.16);
  --white:#FFFFFF;
  --danger:#9B3B2E;

  --f-d:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-b:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sec-y:52px;

  --r-lg:22px; --r-md:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(18,32,25,.04), 0 4px 10px rgba(18,32,25,.04);
  --sh-2:0 2px 4px rgba(18,32,25,.05), 0 10px 22px rgba(18,32,25,.06), 0 24px 48px rgba(18,32,25,.07);

  --dur-fast:140ms; --dur:300ms; --dur-slow:700ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1200px; --gut:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--beige-50);color:var(--ink);
  font-family:var(--f-b);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:74px;
}
img{max-width:100%;display:block}

h1,h2,h3{font-family:var(--f-d);font-weight:400;margin:0;color:var(--green-900);
  letter-spacing:-.012em;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
h1{font-size:clamp(2.7rem,1.9rem + 4vw,5.2rem);line-height:1.0}
h2{font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem);line-height:1.06}
h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);line-height:1.22}
p{margin:0;text-wrap:pretty}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--sec-y) 0}
.dark{background:var(--green-900);color:var(--on-dark-2)}
.dark h1,.dark h2,.dark h3{color:var(--on-dark)}
.tint{background:var(--beige-100)}

.eyebrow{font-family:var(--f-b);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:var(--s5);
  display:flex;align-items:center;gap:var(--s3)}
.eyebrow::after{content:"";height:1px;flex:0 0 40px;background:var(--brass);opacity:.5}
.dark .eyebrow{color:var(--brass-light)}
.dark .eyebrow::after{background:var(--brass-light)}

.lead{font-size:1.09rem;line-height:1.72;color:var(--ink-soft);max-width:56ch}
.dark .lead{color:var(--on-dark-2)}
.fine{font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.dark .fine{color:var(--on-dark-3)}

/* ── nupud: pill ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:15px 30px;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--f-b);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
  border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}
.btn--primary{background:var(--green-800);color:var(--beige-50)}
.btn--primary:hover{background:var(--green-900);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn--light{background:var(--beige-50);color:var(--green-900)}
.btn--light:hover{background:var(--white);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--green-800);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--green-800);background:rgba(36,64,47,.05)}
.dark .btn--ghost{color:var(--on-dark);border-color:var(--line-dark)}
.dark .btn--ghost:hover{background:rgba(245,239,226,.09);border-color:var(--on-dark)}
.btn--sm{min-height:42px;padding:10px 20px;font-size:.85rem}
.btn--block{width:100%}
.btn:active{transform:scale(.978)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* täitmata koht */
.slot{border-radius:var(--r-lg);border:1px dashed var(--line);background:rgba(168,138,86,.07);
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;justify-content:center;
  text-align:center;padding:var(--s6) var(--s5)}
.slot__k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:700}
.slot__t{font-size:.95rem;color:var(--ink-soft)}

/* ── päis ── */
.header{position:sticky;top:0;z-index:60;background:rgba(251,248,241,.88);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color var(--dur) ease}
.header.stuck{border-bottom-color:var(--line-2)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:var(--s4)}
.logo{font-family:var(--f-d);font-size:1.5rem;color:var(--green-900);text-decoration:none;letter-spacing:-.01em}
.nav{display:none}
.header__tel{display:none}

/* ── hero ── */
/* ETAPP 8.1 §3.1: hero alumine padding vähendatud s8→s6. Hero ja
   järgmise sektsiooni vahe oli mobiilis 116px (64 + --sec-y 52). */
.hero{background:linear-gradient(168deg,var(--beige-100) 0%,var(--beige-50) 58%);
  padding:var(--s7) 0 var(--s6)}
.hero h1{margin-bottom:var(--s5)}
.hero__lead{font-size:1.14rem;line-height:1.6;color:var(--ink-soft);max-width:38ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);align-items:center}
.hero__note{margin-top:var(--s4);font-size:.92rem;color:var(--ink-soft)}
.hero__cred{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line-2);
  font-size:.88rem;color:var(--ink-soft)}
.hero__cred b{font-family:var(--f-d);font-size:1.28rem;font-weight:400;color:var(--green-900);
  margin-right:var(--s2)}
.stars{display:inline-flex;gap:2px;color:var(--brass);vertical-align:-2px}
.stars svg{width:14px;height:14px}
.hero__media{position:relative;margin-top:var(--s7)}
.ph{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--green-700),var(--green-900) 72%)}
/* ETAPP 8.1 §3.2: hero-pilt on nüüd landscape 5/4 KÕIGIL laiustel
   (varem mobiilis 4/3.4 ja tahvlist üles portrait 4/5). */
.ph--tall{aspect-ratio:5/4}
.ph--wide{aspect-ratio:16/11}
.ph--video{aspect-ratio:16/9}
.ph svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:block}
.ph__slot{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:var(--s2);
  align-items:center;justify-content:center;text-align:center;padding:var(--s5)}
.ph__slot .slot__k{color:var(--brass-light)}
.ph__slot .slot__t{color:var(--on-dark-2)}
.badge{position:absolute;left:16px;bottom:16px;z-index:5;background:var(--white);
  padding:16px 22px;border-radius:var(--r-md);box-shadow:var(--sh-2)}
.badge__n{font-family:var(--f-d);font-size:1.7rem;color:var(--green-900);line-height:1.05;margin-top:4px}
.badge__t{font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em}

/* ── loend: mis on hinna sees / sammud ── */
.grid3{display:grid;gap:var(--s3);margin-top:var(--s6)}
/* mobiilis kompaktne rida, desktopil õhuline kaart */
.card{background:var(--white);border-radius:var(--r-lg);padding:var(--s5) var(--s4);
  box-shadow:var(--sh-1);display:flex;gap:var(--s4);align-items:flex-start;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{box-shadow:var(--sh-2)}
.card__n{font-family:var(--f-d);font-size:1.75rem;color:var(--brass);line-height:1;
  flex:none;min-width:34px}
.card h3{margin-bottom:var(--s1)}
.card p{font-size:.96rem;color:var(--ink-soft);line-height:1.62;margin-top:var(--s2)}
.note{margin-top:var(--s6);font-size:1.05rem;color:var(--ink-soft);max-width:52ch}

/* ── lubadused ── */
.vows{display:grid;gap:var(--s3);margin-top:var(--s6)}
.vow{background:var(--green-800);border-radius:var(--r-lg);padding:var(--s5)}
.vow__m{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-light);
  display:block;margin-bottom:var(--s4);font-weight:600}
.vow h3{margin-bottom:var(--s3)}
.vow p{font-size:.98rem;line-height:1.7;color:var(--on-dark-2)}

/* ── video: fassaad, YouTube laeb alles klikil ── */
.video{position:relative;margin-top:var(--s7);border-radius:var(--r-lg);overflow:hidden}
.video__btn{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s3);background:rgba(18,32,25,.34);
  border:0;cursor:pointer;color:var(--on-dark);font-family:var(--f-b);font-size:.76rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background-color var(--dur) var(--ease)}
.video__btn:hover{background:rgba(18,32,25,.16)}
.video__circle{width:74px;height:74px;border-radius:50%;border:1px solid rgba(245,239,226,.65);
  display:flex;align-items:center;justify-content:center;background:rgba(18,32,25,.36);
  backdrop-filter:blur(3px);transition:all var(--dur) var(--ease)}
.video__btn:hover .video__circle{background:var(--brass);border-color:var(--brass);transform:scale(1.07)}
.video__btn:focus-visible{outline:2px solid var(--brass);outline-offset:-6px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:7}
.imgnote{margin-top:var(--s4);font-size:.8rem;color:var(--ink-soft)}
.dark .imgnote{color:var(--on-dark-3)}

/* ── galerii ── */
.gal{display:grid;gap:var(--s4);margin-top:var(--s7)}
.gal figure{margin:0;position:relative}
.gal figcaption{position:absolute;top:14px;left:14px;z-index:6;background:var(--green-900);
  color:var(--on-dark);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;padding:7px 14px;border-radius:var(--r-pill)}
.gal figure.aft figcaption{background:var(--brass);color:#12291B}

/* ── arvustused ── */
.score{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;justify-content:center;
  background:var(--white);border-radius:var(--r-lg);padding:var(--s5) var(--s6);
  box-shadow:var(--sh-1);margin:var(--s6) auto 0;width:fit-content;max-width:100%}
.score__big{font-family:var(--f-d);font-size:2.8rem;color:var(--green-900);line-height:1}
.reviews{display:grid;gap:var(--s3);margin-top:var(--s5)}
.review{background:var(--white);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:var(--s3)}
.review p{font-family:var(--f-d);font-size:1.2rem;line-height:1.32;color:var(--green-800)}
.review span{margin-top:auto;font-size:.86rem;color:var(--ink-soft)}
.review span strong{color:var(--ink);font-weight:600}

/* ── aastane hooldus ── */
.checks{list-style:none;padding:0;margin:var(--s5) 0 0}
.checks li{display:flex;gap:var(--s3);padding:var(--s3) 0;font-size:.98rem;color:var(--ink-soft);
  align-items:flex-start;border-top:1px solid var(--line-2)}
.checks li:first-child{border-top:0}
.checks svg{flex:none;margin-top:6px;width:14px;height:14px;color:var(--brass)}
.dark .checks li{color:var(--on-dark-2);border-color:var(--line-dark)}
.dark .checks svg{color:var(--brass-light)}

/* ── KKK: vastused HTML-is ── */
.faq{margin-top:var(--s5);max-width:74ch}
.faq details{background:var(--white);border-radius:var(--r-md);margin-bottom:var(--s2);
  box-shadow:var(--sh-1);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:var(--s4) 46px var(--s4) var(--s4);
  min-height:56px;font-family:var(--f-d);font-size:1.16rem;color:var(--green-900);
  position:relative;transition:color var(--dur) ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass)}
.faq summary:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}
.faq summary::after{content:"";position:absolute;right:var(--s4);top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq details p{padding:0 var(--s5) var(--s4) var(--s4);color:var(--ink-soft);
  font-size:.96rem;line-height:1.7}

/* ── vorm ── */
.formgrid{display:grid;gap:var(--s7)}
.formcard{background:var(--beige-50);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:var(--sh-2)}
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);margin-bottom:var(--s2)}
.field label i{color:var(--brass);font-style:normal}
.field input{width:100%;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--white);font-family:var(--f-b);font-size:17px;color:var(--ink);
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.field input:focus{outline:none;border-color:var(--green-700);box-shadow:0 0 0 3px rgba(50,87,68,.13)}
.field input::placeholder{color:rgba(90,105,96,.6)}
.field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(155,59,46,.12)}
.err{display:none;margin-top:6px;font-size:.82rem;color:var(--danger)}
.err.on{display:block}
.aside .tel-big{font-family:var(--f-d);font-size:1.85rem;color:var(--on-dark);
  text-decoration:none;display:block}
.aside .tel-big:hover{color:var(--brass-light)}
.aside .mail{color:var(--on-dark-2);text-decoration:none;font-size:.98rem}
.ok{display:none;text-align:center;padding:var(--s7) var(--s3)}
.ok.on{display:block}
.ok svg{width:44px;height:44px;color:var(--brass);margin:0 auto var(--s4)}

/* ── jalus ── */
.footer{background:var(--green-900);color:var(--on-dark-3);font-size:.9rem;
  border-top:1px solid var(--line-dark);padding:var(--s8) 0 var(--s5)}
.footer__g{display:grid;gap:var(--s5)}
.footer h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-light);
  margin:0 0 var(--s3);font-weight:600;font-family:var(--f-b)}
.footer a{color:var(--on-dark-2);text-decoration:none}
.footer a:hover{color:var(--on-dark)}
.footer__b{border-top:1px solid var(--line-dark);margin-top:var(--s6);padding-top:var(--s4);
  font-size:.78rem;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ── mobiilne püsi-CTA ── */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:var(--s2);
  padding:10px 14px;background:rgba(251,248,241,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2)}
.stickycta .btn{flex:1;min-height:46px}

/* ── ilmumine: progressiivne täiustus ──
   Ilma JS-ita on .rv tavaline nähtav element. Peitmine käivitub ainult
   koos html.js klassiga, mille lisab päises olev skript. */
/* NB: `animation-timeline: view()` on siit teadlikult VÄLJAS.
   Koos `body{overflow-x:hidden}`-iga jäid elemendid osades Chrome'i
   versioonides igaveseks opacity:0 peale — sisu lihtsalt ei ilmunud.
   IntersectionObserver on etteaimatav ja töötab kõikjal. */
.rv{opacity:1;transform:none}
/* ETAPP 4: inline-skript eemaldatud. JS-i olemasolu tuvastab
   '@media (scripting: enabled)' — vanades brauserites ja ilma JS-ita
   jääb sisu nähtavaks (sama fallback mis lähtefailil). */
@media (scripting: enabled){
  .rv{opacity:0;transform:translateY(20px);
    transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
  .rv.in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv.in{opacity:1;transform:none;transition:none;animation:none}
  .card:hover,.btn:hover{transform:none}
}

/* ══════ TAHVEL ≥760px ══════ */
@media(min-width:760px){
  :root{--gut:34px;--sec-y:var(--s9)}
  body{font-size:1.125rem}
  .hero{padding:var(--s8) 0 var(--s7)}
  .hero__lead{font-size:1.24rem;max-width:40ch}
  .grid3{grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)}
  .vows{grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
  .gal{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .reviews{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  /* desktopil tagasi õhuline kaart, number ülal */
  .card{display:block;padding:var(--s7) var(--s6)}
  .card:hover{transform:translateY(-4px)}
  .card__n{font-size:2.4rem;line-height:.9;display:block;margin-bottom:var(--s4)}
  .card p{margin-top:var(--s2)}
  .vow{padding:var(--s7) var(--s6)}
  .review{padding:var(--s6) var(--s5);gap:var(--s4)}
  .review p{font-size:1.24rem}
  .faq{margin-top:var(--s6)}
  .faq details{border-radius:var(--r-lg);margin-bottom:var(--s3)}
  .faq summary{padding:var(--s5) 52px var(--s5) var(--s5);min-height:58px;font-size:1.28rem}
  .faq summary::after{right:var(--s5)}
  .faq details p{padding:0 var(--s6) var(--s5) var(--s5);font-size:.98rem}
  .formcard{padding:var(--s8) var(--s7)}
  .footer__g{grid-template-columns:1.5fr 1fr 1fr}
  .stickycta{display:none}
  body{padding-bottom:0}
}

/* ══════ DESKTOP ≥1020px ══════ */
@media(min-width:1020px){
  :root{--sec-y:var(--s10)}
  .header .wrap{height:84px}
  .nav{display:flex;gap:var(--s7);align-items:center}
  .nav a{position:relative;color:var(--ink-soft);text-decoration:none;font-size:.9rem;
    font-weight:500;padding:4px 0;transition:color var(--dur) ease}
  .nav a:hover{color:var(--green-800)}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--brass);transform:scaleX(0);transform-origin:0 50%;
    transition:transform var(--dur) var(--ease)}
  .nav a:hover::after{transform:scaleX(1)}
  .header__tel{display:block;color:var(--green-800);text-decoration:none;font-weight:600;font-size:.92rem}

  /* ETAPP 8 §31 + ETAPP 8.1 §3.2: hero-pildi laius.
     ETAPP 8: 1.06fr/.94fr + 128px vahe → pilt 472px (24,6% 1920px-st).
     ETAPP 8.1: veergude vahe s9→s7 (96→48px) vabastab 48px, mis läheb
     MÕLEMALE veerule; pildiveerg saab lisaks kerge ülekaalu (1.06fr).
     Tulemus 1440px juures: pilt 518→575px (+11%), tekst 518→509px.
     `.hero__lead` on 40ch peale piiratud (444px) — loetav rida EI muutu
     ja H1 jääb kahele reale. Konteineri --maxw EI muutu. */
  .hero .wrap{display:grid;grid-template-columns:.94fr 1.06fr;gap:var(--s7);align-items:center}

  /* ETAPP 8.1 §3.1: hero järel oli vahe 224px (hero 96 + sektsioon 128).
     Ainult SEE üleminek muutub — saidi üldine sektsioonirütm (--sec-y)
     jääb puutumata. */
  .hero + .section{padding-top:var(--s9)}
  .hero__media{margin-top:0}
  .badge{left:-30px;bottom:34px;padding:20px 26px}
  .badge__n{font-size:2rem}

  .split{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--s10);align-items:center}
  .formgrid{grid-template-columns:1.14fr .86fr;gap:var(--s9);align-items:start}
  .aside{padding-top:var(--s7)}
}


/* ============================================================
   LISAD (ETAPP 3) — ei muuda kinnitatud kujundust, ainult:
   1) ligipääsetavus (skip link, visually-hidden),
   2) teavitusriba (uus hallatav funktsioon),
   3) inline style-atribuutide asendusklassid (sama arvutatud väärtus),
   4) vormi suletud olek,
   5) eelvaate riba (ainult adminile).
   ============================================================ */

/* 1 — ligipääsetavus */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green-900);
  color:var(--on-dark);padding:12px 22px;border-radius:0 0 var(--r-md) 0;
  font-family:var(--f-b);font-size:.9rem;text-decoration:none}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 2 — teavitusriba */
.annc{background:var(--green-800);color:var(--on-dark-2);font-size:.92rem}
.annc .wrap{display:flex;align-items:center;gap:var(--s4);padding-top:10px;padding-bottom:10px}
.annc__text{flex:1;min-width:0}
.annc__cta{color:var(--on-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.annc__cta:hover{color:var(--brass-light)}
.annc__close{flex:none;background:transparent;border:0;color:var(--on-dark-2);cursor:pointer;
  font-size:1.1rem;line-height:1;padding:6px 8px;border-radius:var(--r-pill)}
.annc__close:hover{color:var(--on-dark)}
.annc__close:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* 3 — inline-stiilide asendused (samad väärtused, mis lähtefailis) */
.mt-s2{margin-top:var(--s2)}
.mt-s3{margin-top:var(--s3)}
.mt-s4{margin-top:var(--s4)}
.mt-s6{margin-top:var(--s6)}
.mt-s7{margin-top:var(--s7)}
.m-0{margin:0}
.header__right{display:flex;align-items:center;gap:var(--s5)}
.hero__rating-num{font-size:1.05rem;margin-left:6px}
.score__meta{text-align:left}
.score__t{font-weight:600;font-size:.98rem}
.score__sub{margin-top:2px}
.form-title{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem)}
.form-lead{margin:var(--s4) 0 var(--s6);font-size:1.02rem}
.form-privacy{margin-top:var(--s4);text-align:center}
.ok-lead{margin:var(--s3) auto 0;max-width:34ch}
.footer .logo{color:var(--on-dark)}
.footer__tagline{margin-top:var(--s3);max-width:36ch;line-height:1.65}

/* 4 — vormi suletud olek */
.form-closed{text-align:center;padding:var(--s6) var(--s3)}
.form-closed h3{margin-bottom:var(--s3)}
.form-closed .tel-closed{font-family:var(--f-d);font-size:1.85rem;color:var(--green-900);
  text-decoration:none;display:inline-block;margin-top:var(--s4)}
.form-closed .tel-closed:hover{color:var(--brass)}

/* 5 — eelvaate riba (ainult signed preview vaates) */
.preview-banner{background:var(--danger);color:#fff;text-align:center;
  font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:8px var(--s4)}

/* ETAPP 4 lisad: vormi üldteade, tänuleht */
.form-global{margin:0 0 var(--s4)}
.thanks-card{max-width:34rem;margin:0 auto}
.thanks-card svg{width:44px;height:44px;color:var(--brass);margin:0 auto var(--s4)}

/* ETAPP 5 järelparandus (kinnitatud UI-viga): .dark sektsiooni heledad
   tekstivärvid (.dark h2/h3, .dark .lead, .dark .fine, .dark .eyebrow)
   valgusid beežile .formcard kaardile — tänuteade oli loetamatu.
   Hele kaart tumedas sektsioonis on disaini järgi HELE kontekst:
   taastame kaardi sees tumedad toonid (WCAG AA: #5A6960 taustal
   #FBF8F1 ≈ 5.4:1). Kujundustokeneid ei muudeta. */
.formcard h2,.formcard h3{color:var(--green-900)}
.formcard .lead{color:var(--ink-soft)}
.formcard .fine{color:var(--ink-soft)}
.formcard .eyebrow{color:var(--brass)}
.formcard .eyebrow::after{background:var(--brass)}

/* ETAPP 6 — consent UI. Keeldumine sama lihtne kui nõustumine:
   kolm identset nuppu; valikulisi kategooriaid ei eelmärgita. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--green-900);
  color:var(--on-dark-2);border-top:1px solid var(--line-dark)}
.consent__bar{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  padding-top:14px;padding-bottom:14px}
.consent__text{flex:1;min-width:16rem;font-size:.9rem;line-height:1.5;margin:0}
.consent__actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.consent-modal{position:fixed;inset:0;z-index:95}
.consent-modal__backdrop{position:absolute;inset:0;background:rgba(18,32,25,.55)}
.consent-modal__dialog{position:relative;max-width:30rem;margin:8vh auto 0;
  background:var(--beige-50);color:var(--ink);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-2);max-height:80vh;overflow:auto}
.consent-modal__dialog:focus{outline:2px solid var(--brass);outline-offset:3px}
.consent-modal__dialog h2{font-size:1.4rem;margin-bottom:var(--s4)}
.consent-cat{border-top:1px solid var(--line);padding:var(--s4) 0}
.consent-cat__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.consent-cat__head input[type=checkbox]{width:20px;height:20px;accent-color:var(--green-700)}
.consent-cat__head input[type=checkbox]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.consent-cat__state{font-size:.8rem;color:var(--ink-soft)}
.consent-cat p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin-top:var(--s2)}
.consent-modal__actions{display:flex;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.consent-footer-link{background:none;border:0;padding:0;color:var(--on-dark-2);
  font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.consent-footer-link:hover{color:var(--on-dark)}
.consent-footer-link:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* Ilma JS-ita jaava consent-UI ja jaluse seadete nupp peidetuks
   (trackereid nagunii ei laadita). */
.consent,.consent-modal,.consent-footer-link{display:none}
@media (scripting: enabled){
  .consent:not([hidden]),.consent-modal:not([hidden]){display:block}
  .consent-footer-link{display:inline}
}