/* ============================================================
   EP Majaprojekt + skRUUM  |  NELJAS DISAINIKIHT
   Allikas: kliendi enda kavand (Katre annoteeritud kuvatommised
   ja demo-videod, 30.07). Kaks lehte, kaks meeleolu:
     EP  = tume #2b2b2b, kreemikad umarnurksed kaardid, Noto Serif
           Display pealkirjad, Poppins tekst
     SK  = hele greige #e3e2de, liikuv kardin taustal, Cormorant
           Garamond pealkirjad, Italianno kasitsikirja aktsent

   Pusireeglid (HANDOFF jaotis 9):
     - reveal-peitmine AINULT :where(html.js-reveal) all (9.15)
     - body overflow-x: clip, mitte hidden (9.2)
     - scroll-behavior:smooth EI OLE (ankrud on JS-is, 9.3)
     - mitte uhtegi em- ega en-kriipsu (9.10)
   ============================================================ */

/* ---------- 0. MUUTUJAD JA ALUSED ---------- */
:root{
  --bg:#2b2b2b;
  --fg:#f4f4f4;
  --muted:rgba(244,244,244,.78);
  --line:rgba(244,244,244,.16);
  --line2:rgba(244,244,244,.38);
  --cream:#e6e5e1;
  --cream-fg:#2b2b2b;
  --cream-muted:rgba(43,43,43,.76);
  --cream-line:rgba(43,43,43,.16);
  --sk-bg:#e3e2de;
  --sk-fg:#424439;
  --sk-muted:rgba(66,68,57,.82);
  --sk-line:rgba(66,68,57,.22);
  --sk-valge:#f6f6f6;
  --sk-hele:#faf9f8;
  --serif:"Noto Serif Display",Georgia,serif;
  --sans:"Poppins","Segoe UI",system-ui,sans-serif;
  --sk-serif:"Cormorant Garamond",Georgia,serif;
  --script:"Brittany Signature","Segoe Script",cursive;   /* Katre 11.09, vt fonts.css */
  /* UKS raadius kogu lehel (kliendi 03.08: "Kogu kodulehel olevad nurgad
     uhe ja sama raadiusega. erinevus jaab silma riivama"). --r-s on
     ALIAS, mitte teine vaartus: hoian nime alles, et vanad viited ei
     purune, aga vaartus on sama. */
  --r:44px;
  --r-s:var(--r);
  /* 1080, mitte 1180: kliendi 04.08 noue oli, et KOIK pealkirjad algaksid
     UHELT JOONELT ja ta joonistas selle joone Tuupprojektide pealkirja
     kohale. 1080 annab tema 1536 px ekraanil vasakuks servaks tapselt
     228 px, ehk just selle joone. Iga sektsiooni pealkiri ja indikaator
     joondub nuud selle jargi; ainus erand on valdkonnad, mille klient
     jattis teadlikult keskele ("v.a. teisel lehel, kus on ... kastikesed
     pildi keskmes"). */
  --maxw:1080px;
  /* Meist-kaardi sisemine polster on eraldi tokenina, sest kaarti tuleb
     nihutada TAPSELT selle vorra vasakule, et kaardi SEES olev pealkiri
     ja indikaator satuksid samale joonele mis teistel sektsioonidel. */
  --kaart-pad-x:clamp(26px,3.4vw,46px);
  --gut:clamp(20px,4.5vw,64px);
  /* Kliendi ekraan on ~760 px korge (1080 @125%). Vana clamp andis 148 px
     ules ja alla, ehk sektsioon ei mahtunud vaatesse ("suur osa asjadest
     jaab vaatevaljast valja"). Nuud vh-poinepiline ja madalam. */
  --sect:clamp(52px,7.5vh,86px);
  /* Kroomi vasak serv: rail ja sisu joonduvad selle jargi */
  /* Suurel ekraanil (1600+) jaaks fikseeritud logo lehe aarde ja sisu
     kaugele keskele. max() seob kroomi sisuveeru vasaku servaga, kui see
     on kaugemal kui 44 px, aga jatab servast alati vahemalt 20 px. */
  --kroom-x:clamp(20px,3vw,44px);
  --ease:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:300 15px/1.7 var(--sans);
  overflow-x:clip;              /* clip, MITTE hidden: hidden lohuks ankrud (9.2) */
}
/* --nool-d elab body.sk peal, MITTE .sk-hero peal: sama moot on vaja
   nii heronoolel kui sektsioonide vahelistel nooltel, ja need teised
   ei ole hero sees. Kui ta jaaks .sk-hero sisse, oleks var() nendes
   sektsioonides maaramata ja ring tuleks vale kujuga. */
body.sk{background:var(--sk-bg);color:var(--sk-fg);
  --nool-d:clamp(48px,5vw,68px)}
img,video,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0;padding:0}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:#8b8377;color:#fff}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;position:relative}
/* NB SIIN EI OLE ENAM 1700px+ "hingamise" reeglit (--maxw 1320). See
   loi suurel ekraanil JA vahendatud zoomil (CSS-vaateava kasvab) lava
   laiemaks, aga sektsioonide sisekompositsioonid (Meist paneel + foto,
   kontaktilava 1000px, SK grid'id) on fikseeritud laiusega: tukid
   vajusid lahku (Magnus 17.08: "500 on imelikult all ja contact form
   on liiga vasakul"). Fikseeritud 1080 kaitub nagu kliendi Canva
   loend: igal zoomil sama kompositsioon, servadesse jaab rohkem ohku. */
.sekt{position:relative;padding:var(--sect) var(--gut)}

/* Ekraanilugeja abitekst */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 1. TÜPOGRAAFIA ---------- */
.h2{font:300 clamp(28px,3.1vw,44px)/1.14 var(--serif)}
.d2{font:300 clamp(28px,3.2vw,46px)/1.14 var(--serif)}
.d3{font:400 clamp(20px,2.2vw,28px)/1.25 var(--serif)}
.silt{font:500 10.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.lede{font:300 14px/1.72 var(--sans);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}

/* ---------- 2. FIKSEERITUD KROOM (EP): logo + ristmenüü ---------- */
/* Hero ja valdkondade vaates kroomi EI OLE (kliendi markus: "Siin vaates
   ulaservas ei ole EP logo ega menuumarki"). JS lisab bodyle .kroom-on
   alates Meist sektsioonist. */
.kroom{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:20px var(--kroom-x);
  pointer-events:none;
  /* visibility, mitte ainult opacity: paljas opacity:0 element jaab
     TABELDUSJARJEKORDA, nii et klaviatuuriga liikuja sai fookuse
     nahtamatule logolingile ja menuunupule. pointer-events kaitses
     ainult hiirt. Viide .5s hoiab elemendi peitmise ajaks nahtavana. */
  opacity:0;visibility:hidden;translate:0 -8px;
  transition:opacity .5s var(--ease),translate .5s var(--ease),visibility 0s .5s;
}
body.kroom-on .kroom{opacity:1;visibility:visible;translate:0 0;transition-delay:0s,0s,0s}
.kroom__logo,.rist{pointer-events:auto}
.kroom__logo img{height:clamp(56px,4.8vw,76px);width:auto;display:block}

/* Ristikujuline menüünupp (kavandi peenike + mark paremal ulal) */
.rist{
  width:46px;height:46px;background:none;border:0;cursor:pointer;
  position:relative;
  transition:rotate .45s var(--ease);
}
.rist::before,.rist::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--fg);
}
.rist::before{width:30px;height:1px;margin:0 0 0 -15px}
.rist::after{width:1px;height:30px;margin:-15px 0 0 0}
.rist:hover{rotate:90deg}
body.menyy-lahti .rist{rotate:45deg}

/* Vertikaalne rippmenüü (kliendi markus: "avaneb vertikaalne menuu") */
.rippm{
  position:fixed;top:82px;right:clamp(16px,3vw,40px);z-index:59;
  background:rgba(34,34,33,.96);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 34px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;translate:0 -10px;
  transition:opacity .35s var(--ease),translate .35s var(--ease),visibility 0s .35s;
}
body.menyy-lahti .rippm{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.rippm a{
  font:400 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--fg);opacity:.82;
  padding:11px 0;
  transition:opacity .18s;
}
.rippm a:hover{opacity:1}
.rippm a+a{border-top:1px solid rgba(244,244,244,.08)}

/* Sektsiooni indikaator: "01 |____| MEIST" */
/* Kliendi 03.08: "Neil tekst samasuureks" ja "tekst veidi suuremaks" */
.ind{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,3vh,32px)}
.ind__nr,.ind__silt{font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ind__joon{width:clamp(80px,11vw,160px);height:1px;background:var(--line2);position:relative}
.ind__joon::before,.ind__joon::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--line2)}
.ind__joon::before{left:0}
.ind__joon::after{right:0}

/* Vasak vertikaalne sektsioonisilt */
/* Rail on kliendi 03.08 soovil LOGOGA UHEL JOONEL (sama vasak serv) ja
   tekst suurem: "See logoga uhele joonele ja tekst veidi suuremaks". */
.rail{
  position:absolute;left:var(--kroom-x);top:50%;translate:0 -50%;
  display:flex;align-items:center;gap:14px;
  writing-mode:vertical-rl;rotate:180deg;
  font:500 11.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
  pointer-events:none;
}
.rail::before{content:"";width:1px;height:54px;background:var(--line2)}

/* ---------- 3. HERO (EP): taustavideo + keskne logo ---------- */
/* min() on siin KOHUSTUSLIK: puhas min-height:540px lohkus telefoni lamava
   asendi (844x390), kus hero oli vaatest 150 px korgem ja logo laks alla. */
/* --nool-d ja --nool-b on noole moot ja kaugus pohjast; --hero-joon on
   sellest tuletatud noole KESKPUNKT. Magnus 06.09: "Nool alla uhel joonel
   ehk tekstid ulesse rohkem" ja tapsustus "tosta teksti noole keskpunkti".
   Kolm elementi (metarida vasakul, nool keskel, slaidiindikaator paremal)
   joonduvad nuud UHELE joonele ja nad kaib UHEST muutujast, seega noole
   suuruse muutmisel liiguvad tekstid automaatselt kaasa. */
.hero{
  position:relative;height:100svh;min-height:min(540px,100svh);
  overflow:hidden;overflow:clip;background:#1d1d1c;
  --nool-d:clamp(52px,5.5vw,76px);
  --nool-b:22px;
  --hero-joon:calc(var(--nool-b) + var(--nool-d) / 2);
}
.hero__meedia{position:absolute;inset:0}
.hero__meedia img,.hero__meedia video{width:100%;height:100%;object-fit:cover;display:block}
.hero__meedia video{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.hero.video-on .hero__meedia video{opacity:1}
.hero__loor{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.22),rgba(18,18,18,.04) 42%,rgba(18,18,18,.44))}
.hero__sisu{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--gut);
}
/* Kasvab UHTLASELT. Varem oli siin clamp(220px,24vw,360px) ja mobiilis
   min(74vw,320px): 600 px juures oli logo 320 px, 601 px juures kukkus
   220 peale ehk TAHVLIS oli logo vaiksem kui telefonis. Nuud algab kover
   tapselt 320 pealt (= mobiilireegli ots) ja kasvab 360-ni. */
.hero__logo{width:clamp(320px,calc(4.3vw + 294px),360px);height:auto;filter:drop-shadow(0 4px 22px rgba(0,0,0,.3))}
.hero__intro{
  font:300 clamp(23px,2.7vw,38px)/1.2 var(--serif);
  color:#fff;max-width:15em;text-wrap:balance;
  margin-top:clamp(16px,3vh,32px);
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}
/* Kliendi 17.08 video: inforiba ~15px @800px korgusel, seega senine 10px
   oli videost vaiksem. */
/* bottom = noole keskpunkt, translate 50% viib elemendi ENDA keskpunkti
   samale joonele. Nii on metarida, nool ja indikaator kohakuti. */
.hero__meta{
  position:absolute;left:clamp(20px,3vw,44px);bottom:var(--hero-joon);
  translate:0 50%;
  display:flex;gap:12px;align-items:center;
  font:500 clamp(10px,0.95vw,13px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.hero__meta i{font-style:normal;opacity:.55}
/* Videol on nool-ring labimooduga ~5,8% laiusest. E8 p2 luges videost, et
   nool EI pompa, aga klient noudis 06.09 otsesonu liikumist ("Nool
   liikuma"), seega see otsus on TUHISTATUD. Ilmumine (fade) ja liikumine
   on KAKS eraldi animatsiooni: fade kaib opacity peal, hupe transform'i
   peal. Tsentreerimine kaib `translate` omadusega, seega ta ei kakle
   transform'iga (sama muster mis 9.31 juures). */
.hero__nool{
  position:absolute;left:50%;bottom:var(--nool-b);
  width:var(--nool-d);height:var(--nool-d);
  translate:-50% 0;
  border:1px solid rgba(255,255,255,.6);border-radius:50%;
  display:grid;place-items:center;color:#fff;text-decoration:none;
  animation:noolIlmub .9s var(--ease) .7s both,
            noolHupp 2.4s var(--ease) 1.7s infinite;
}
.hero__nool svg{width:20px;height:20px}
@keyframes noolIlmub{from{opacity:0}to{opacity:1}}
/* Hupe on lyhike ja pikk paus vahel: liikumine on markatav, aga ei
   tommba tahelepanu kogu aeg endale (leht on rahulik). */
/* MAGNUS 07.09: "boundcima natuken ilusamalt". Vana kaik oli kaks
   jarsku hupet. Nuud on see uks pehme allaminek ja kaks kahanevat
   jarelpohkimist, ehk liikumine vaibub loomulikult, mitte ei katke. */
/* MAGNUS 09.09: "pane nooled agedamalt bouncima."
   Kaks asja teevad pohkimise agedaks ja kumbki ei olnud enne olemas:

   1. HOOVOTT. Enne kukkumist tostab nool end 5 px YLES. See on vana
      animatsioonitrikk: silm loeb vastassuunalise liigutuse "valmistumiseks"
      ja pohkimine mojub tahtlikuna, mitte nogeldusena.
   2. IGA LOIK OMA AJASTUSEGA. Varem kehtis kogu kaigule uks --ease, mis
      lamestas kukkumise ja pohkimise uhesuguseks. Nuud on ALLAminek
      kiirenev (nagu raskusjoud) ja TAGASIminek pidurdav, ehk pohkimine
      tunneb massi.

   Kukkumine 9 -> 16 px, jarelpohkimised 8 ja 3 px. Vahemikus 0-36% seisab
   nool paigal: ilma puhkepausita muutub kordus tuutuks.
   Kehtib MOLEMA brandi noolele (EP hero, SK hero, SK sektsioonid). */
@keyframes noolHupp{
  0%,36%   {transform:translateY(0);     animation-timing-function:cubic-bezier(.34,0,.64,1)}
  43%      {transform:translateY(-5px);  animation-timing-function:cubic-bezier(.5,0,1,.5)}
  55%      {transform:translateY(16px);  animation-timing-function:cubic-bezier(0,.5,.4,1)}
  64%      {transform:translateY(0);     animation-timing-function:cubic-bezier(.5,0,1,.5)}
  72%      {transform:translateY(8px);   animation-timing-function:cubic-bezier(0,.5,.4,1)}
  80%      {transform:translateY(0);     animation-timing-function:cubic-bezier(.5,0,1,.5)}
  86%      {transform:translateY(3px);   animation-timing-function:cubic-bezier(0,.5,.4,1)}
  92%,100% {transform:translateY(0)}
}
/* Slaidiindikaator paremal all: aktiivne number asendub kriipsujoonega */
.hero__idx{
  position:absolute;right:clamp(20px,3vw,44px);bottom:var(--hero-joon);
  translate:0 50%;
  display:flex;gap:15px;align-items:center;
  color:rgba(255,255,255,.88);
}
.hero__idx span{font:400 12.5px/1 var(--sans);letter-spacing:.06em}
.hero__idx span i{font-style:normal}
.hero__idx span b{display:none;width:24px;height:1px;background:#fff}
.hero__idx span.on i{display:none}
.hero__idx span.on b{display:block}

/* ---------- 4. KAKS VALDKONDA ---------- */
/* Kliendi 03.08: "kodulehe vaates voiks samamoodi koik kompaktselt
   tsentris olla, et konkreetselt uhes vaates naed koike korraga" ning
   "EP Majaprojekt OU-d siin vaates ei nae" (eyebrow jai valja). Seega
   sektsioon MAHUB vaatesse ja on vertikaalselt tsentris. */
.vald{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--sect)*.9) var(--gut);
}
.vald__pea{text-align:center;max-width:660px;margin:0 auto}
.vald__pea .lede{margin:14px auto 0}
/* Kaardid on SAMA SUURED (kliendi 03.08: "Molemad kastid voiks olla sama
   suured", "Pildid uhesuurused") aga VERTIKAALSELT TREPITUD, nagu kliendi
   videos ja Magnuse 06.09 noudes ("kaks sektsiooni sise ja vali eri
   korgustele nagu videol").

   Videost moodetud (tools/video-analyys-17.08.json, ep[0].S3):
     vasak kaart  y 47,1% .. 77,1%
     parem kaart  y 35,6% .. 66,4%   ehk 11,5% vaateava korgusest KORGEMAL
     kuvasuhe ~1,82:1 (senine 16/10 = 1,6 oli korgem ja votis ruumi ara)
   Nihe kaib --vald-nihe kaudu ja on pandud VASAKULE kaardile allapoole,
   mitte paremale ulespoole: nii jaab grid oma reas pusti ja sektsioon
   ei kasva ule 760 px (vt tools/kontroll/mahub.py).

   NB See TUHISTAB kliendi enda 03.08 kirjalikud parandused "kirjeldused
   uhel joonel" ja "logod summeetriliselt samas kohas". Videos on nad
   samuti trepis (vasak kirjeldus y 84,8%, parem y 72,9%). Magnus
   kinnitas 06.09, et video kehtib. nouded.py 5 ja 6 on umber kirjutatud. */
.vald__grid{
  --vald-nihe:clamp(0px,11.5vh,92px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:center;
  /* Vahe peab ule elama KASVU: kui kaardid on 1,07-kordsed, sooda kumbki
     ~16 px vahest ara. 52 px vahega jai suumitud olekus alles 20 px ja
     kaardid nagid valja nagu nad puutuksid kokku, samal ajal kui servades
     oli 300+ px ohku. 70 px vahega jaab suumitud olekus ~38 px. */
  gap:clamp(30px,4.6vw,72px);
  margin-top:clamp(14px,2.2vh,28px);
  align-items:start;
  /* KLIENDI TEADLIK ERAND: see sektsioon jaab keskele, mitte pealkirjajoonele
     ("v.a. teisel lehel, kus on ... kastikesed pildi keskmes"). */
  max-width:980px;margin-left:auto;margin-right:auto;
}
.vald__item:nth-child(1){margin-top:var(--vald-nihe)}
.vald__kaart{
  /* Rasterda uks kord koige suuremas moodus ja skaleeri GPU-l. Ilma
     selleta joonistab brauser foto koos umara maskiga kasvu kaigus
     korduvalt uuesti, mis annab margatavad aeglasel masinal jonksud. */
  will-change:transform;
  display:block;position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:1.82;cursor:pointer;
  /* Kasv kaib TRANSFORMI peal. Reveal ise kasutab `scale` ja `translate`
     OMADUSI (mitte transformi) ja hiire parallaks kirjutab `translate`
     pildile, seega kolm asja ei kakle omavahel (sama muster mis 9.31). */
  transform-origin:center;
}
/* KLIENDI 06.09 NOUE: "zoomivad sisse nagu videol", "kui sisse tulevad
   lahevad suuremaks tapselt nagu videol on". Videost moodetud: kaardid
   kasvavad ~8% umbes 3,5 s jooksul, kese jaab paigale, nurgad liiguvad
   valjapoole. Varem oli kasv PILDI peal (`hingab`, lopmatu edasi-tagasi)
   ehk kaardi raam ei liikunud; nuud kasvab RAAM ise, nagu videos.
   Kasv on seotud .sees klassiga, seega poorduva revealiga (15.7) mangib
   ta iga kord uuesti, kui kaart vaatesse tuleb. */
/* MAGNUS 09.09: "tee nagu videos, et need lahevad suuremaks, mitte
   lahevad suuremaks ja siis tagasi vaiksemaks."

   Esimene katse tegi ulelennu (0,93 -> 1,09 -> 1,07). See oli MINU
   lisandus, mitte videost. Kliendi 17.08 videost moodetud (kaadrite
   kaupa, `EP kodulehe demo 17..08.2026.mp4`):
     Meist-paneel  1,000 -> 1,084 nelja sekundiga, siis PUSIB
     valdkonnakaart kasvab samamoodi uhtlaselt ja tagasi EI tule
   Juurdekasv on kaadri kohta uhesugune (~2,5 px), ehk kaik on LINEAARNE,
   mitte ease-out. --ease oleks kogu kasvu algusesse kokku surunud.

   Seega: uks suund, uhtlane tempo, jaab suurena pusima. */
@keyframes valdKasvab{
  from{transform:scale(1)}
  to  {transform:scale(var(--vald-kasv,1.10))}
}
html.js-reveal .vald__item.sees .vald__kaart{
  /* Lineaarne ja aeglane, nagu videos. `both` hoiab lopuasendi. */
  animation:valdKasvab 4s linear both;
}
.vald__kaart img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:translate .3s var(--ease);                  /* hiire parallaks kirjutab translate */
}
.vald__kaart::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.34))}
/* Kliendi 03.08: "Nendelt Bold ehk paks tekst ara votta" / "Ilma paksu
   tekstita". Kaal 600 -> 400, suurus jaab. */
.vald__nimi{
  position:absolute;left:24px;bottom:18px;z-index:1;
  /* Alampiir 26, mitte 21: 880 px juures on nimi 26 px, ja vana 21 px
     alampiir tegi 881 px juures nimest VAIKSEMA, kuigi kaart ise
     kasvas 318 -> 388 px. Nuud kasvab kirjakraad pidevalt. */
  font:400 clamp(26px,2.2vw,30px)/1.02 var(--sans);
  text-transform:uppercase;letter-spacing:.012em;color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.35);
}
/* Kliendi 03.08: "Need tekstid voiks olla sisearhitektuuri ja arhitektuuri
   tekstiga uhel joonel" (kirjeldused samal real) ja "Molemad logod voiks
   olla visuaalselt sama suured ja asuda summeetriliselt samas kohas".
   Grid annab molemas veerus TAPSELT sama rea korguse, seega tekstid
   joonduvad ka siis, kui uks kirjeldus murdub kahele reale. */
.vald__all{
  margin-top:16px;
  display:grid;grid-template-columns:1fr auto;
  gap:10px clamp(14px,2vw,28px);
  min-height:58px;            /* vordne rea korgus MOLEMAS veerus */
}
.vald__kirjeldus{
  align-self:start;           /* tekstid algavad TAPSELT samalt jooneit */
  font:300 12.5px/1.6 var(--sans);color:var(--muted);max-width:34ch;
}
.vald__logo{
  align-self:end;             /* logod lopevad TAPSELT samal joonel */
  height:46px;width:auto;opacity:.92;justify-self:end;
}
/* SK lockup on kitsam ja korgem, seega veidi rohkem, et optiline kaal
   klapiks EP horisontaalse lockupiga (kliendi "visuaalselt sama suured") */
.vald__item:nth-child(2) .vald__logo{height:54px}

/* ---------- 5. MEIST ---------- */
.meist{padding:var(--sect) var(--gut)}
/* --foto-nihe on UKS allikas kahele asjale: kui palju fotokaart kreemika
   paneeli parema serva peale ulatub, JA kus tekstirida peab lopema.
   Enne 06.09 oli see arv ainult .meist__video left-valemis ja tekst
   jooksis kaardi taies laiuses: moodetud 1536x760 juures loppes 13 reast
   3 fotokaardi taga, pikim saba 37 px ehk 4-5 tahemarki ("pakuvad valj|").
   Nuud tuleb tekstiveeru laius SAMAST valemist, seega nad ei saa enam
   lahku minna, kui kumbki number muutub. */
.meist__lava{position:relative;--foto-nihe:clamp(64px,5.5vw,88px)}
/* Tekstirida lopeb tapselt seal, kus fotokaardi vasak serv algab. */
.meist__kaart p{max-width:calc(700px - var(--kaart-pad-x) - var(--foto-nihe))}
/* Kliendi 03.08: "See 500+ voiks olla sama seest tuhja fondiga, nagu teie
   esimesel naidisel oli" -> KONTUUR, mitte taidetud.
   Kliendi 17.08 video: number on OSALISELT FOTOKAARDI TAGA (foto katab
   numbri alaosa), MITTE pildi kohal ohus. Seega ankurdame ALT, fotokaardi
   geomeetria jargi (foto korgus = laius*9/16, bottom kuni -52px): numbri
   alumine ~25% jaab foto taha. Magnuse 18.08 leid: top:30% jattis numbri
   "imelikult pildi kylge" rippuma. */
/* KLIENDI 06.09: "500+ koige esimene font, natukene paksem peaks olema"
   ja "500 laheb natukene rohkem pildi alla".
   FONT oli juba oige: --serif on Noto Serif Display ehk lehe esimene ja
   pohifont, sama mis pealkirjadel ja vaikesel 500+ statistikal. Muuta sai
   ainult PAKSUST. Noto Serif Display on muutuvfont vahemikus 200-400,
   seega 300 -> 400 on maksimum, mida see fail annab; lisaks laks
   kontuurjoon 1 -> 1,5 px. Kontuur ISE jaab (kliendi 03.08 kirjalik
   noue "sama seest tuhja fondiga"), seda EI TOHI taidetuks teha.
   ASEND: bottom vaheneb, et number vajuks sugavamale fotokaardi taha,
   nagu kliendi videos (vesimark y 43-56%, foto ulaserv 53,6% ehk
   umbes viiendik numbrist jaab foto taha). */
.meist__ghost{
  position:absolute;right:0;bottom:clamp(192px,15.8vw,230px);top:auto;z-index:0;
  font:400 clamp(84px,9.5vw,150px)/1 var(--serif);
  color:transparent;
  -webkit-text-stroke:1.5px rgba(244,244,244,.32);
  pointer-events:none;user-select:none;
}
/* Kliendi 03.08: "Tekstikasti saab veidi vaiksemaks teha. tekst jaab sama
   suur" + "teksti osa voib veidi laiemaks tommata, siis laheb alt ots
   luhemaks". Seega LAIEM tekstiveerg -> vahem ridu -> MADALAM kast. */
.meist__kaart{
  position:relative;z-index:1;
  /* 760, mitte 820: moodetud reapikkus oli 86 marki reas, mis on ule
     mugava ulempiiri (~75). Kitsam kaart annab ~78 marki. Kliendi
     03.08 noue (numbrid vaates) jaab kehtima, sektsioon mahub. */
  max-width:700px;
  color:var(--cream-fg);
  /* Taust on KAHES kohas ja see on TAHTLIK. Kaardil endal peab ta olema,
     sest ::before taust kaob korgkontrastsuses, sundvarvireziimis ja
     printides, ja siis jaaks tume tekst tumedale taustale. Ka
     tools/kontroll/audit.py loeb tausta elemendipuust, mitte
     pseudoelemendist: ilma selleta kukkus viis rida 1:1 peale.
     ::before on SAMA varvi ja katab kaardi tapselt, seega visuaalselt
     ei muutu midagi; tema ainus too on KASVADA (vt allpool).
     Raadius on UHES kohas, ::before parib ta. */
  background:var(--cream);
  border-radius:var(--r);
  padding:clamp(22px,2.8vw,38px) var(--kaart-pad-x) clamp(24px,3vw,40px);
  /* Nihe on TAPSELT polstri suurune: nii satub kaardi SISU (indikaator ja
     pealkiri) samale joonele mis teiste sektsioonide oma. Kliendi 04.08:
     "vahepunktid ... koik enamvahem (v.a. 01 Meist) uhel joonel". */
  margin-left:calc(-1 * var(--kaart-pad-x));
}
/* KLIENDI 06.09: "Taust animatsiooniga sisse 20 aasta juures et laheb
   suuremaks nagu videol ja asjad tekivad."
   Videost moodetud (ep[1].S2 animatsioonid): "beez paneel kasvab aeglaselt
   ja pidevalt (koik 4 serva liiguvad valjapoole, kokku ~+10-12% pindalale
   12 s jooksul)" JA, mis on siin kriitiline, "tekstid paneeli sees EI
   LIIGU".

   Seetottu EI TOHI kasvatada .meist__kaart'i ennast transformiga: siis
   kasvaks kogu tekst kaasa. Taust on tostetud ::before pseudoelemendile,
   mis on paneeli SUURUNE ja kasvab uksi; tekst istub tema peal ja seisab
   piksli pealt paigal. Sama pohjus, miks kasv EI kai width/height peal
   (need ei ole kompositoril, vt HANDOFF 9.22).

   z-index:-1 hoiab tausta oma sisu all, aga .meist__kaart z-index:1 loob
   oma pinu, seega taust jaab ikka vesimargi (z-index:0) PEALE. Videos on
   sama jarjekord: foto > paneel > vesimark > taust. */
.meist__kaart::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--cream);border-radius:inherit;
  transform-origin:center;
}
/* Sama pohjus ja sama videost moodetud kuju: uks suund, uhtlane tempo.
   Videos 1,000 -> 1,084; votame 1,08.
   NB alla 1 ei ole mottet minna: ::before on kaardi ALL (z-index -1) ja
   kaardil on sama kreemikas taust, seega vaiksemana ta ei paista. */
@keyframes meistPaneelKasvab{
  from{transform:scale(1)}
  to  {transform:scale(1.08)}
}
html.js-reveal .meist__kaart.sees::before{
  /* 12 -> 4 s ja lineaarne, videost moodetud tempo. */
  animation:meistPaneelKasvab 4s linear both;
}
/* Kavandis on sektsiooni indikaator KAARDI SEES (hall kiri kreemikal).
   Vahe kahanes 06.09, et suurem pealkiri (EP-8) mahuks 760 px sisse
   ilma pealkirja ennast vahendamata: ruum tuleb indikaatori ja
   statistikarea vahedest, mitte pealkirja arvelt. */
.meist__kaart .ind{margin-bottom:clamp(16px,2.6vh,26px)}
.meist__kaart .ind__nr,.meist__kaart .ind__silt{color:var(--cream-muted)}
.meist__kaart .ind__joon{background:rgba(43,43,43,.3)}
.meist__kaart .ind__joon::before,.meist__kaart .ind__joon::after{background:rgba(43,43,43,.3)}
/* KLIENDI 06.09: "20 aastat rohkem rohutada, title tombama rohkem
   tahelepanu". Kolm kangi korraga, mitte ainult suurus:
   suurus 32 -> 38 px, reavahe 1,22 -> 1,08 (videos 0,95, aga meie
   pikem eestikeelne murre nouab veidi rohkem ohku) ja veerg 17em ->
   14em, mis murrab pealkirja KOLMELE reale nagu videos ("20 aastat
   kogemust / arhitektuursete taislahenduste / loomisel"). Tihe kolmerealine
   plokk loeb pealkirjana, hajus kaherealine loeb leivatekstina. */
.meist__kaart h2{font:400 clamp(24px,2.7vw,38px)/1.08 var(--serif);max-width:14em}
/* MAGNUS 09.09: "rohuta lauset 20 aastat."
   Rasvasus EI OLE siin valik: Noto Serif Display on muutuv font
   vahemikus 200-400, ehk paksemaks ta ei lahe ja brauser joonistaks
   SUNNITUD rasvase, mis sellise kirja juures naeb rammus ja rabe
   valja. Seega kursiiv (omaette self-hostitud loige, mitte kaldutatud)
   ja veidi suurem kirjakraad. */
.meist__kaart h2 em{font-style:italic;font-size:1.15em;line-height:.92}
/* line-height .92 EI OLE kosmeetika. Suurem kirjakraad kasvatab ka
   REAKASTI, mille peale Meist laks 760 -> 765 px ja "uks sektsioon
   korraga" kukkus labi. 43,7 px x 0,92 = 40,2 px, ehk mahub
   pealkirja enda 41,04 px reakasti sisse ja sektsioon jaab 760 px-ks.
   Tahed ise jaavad suureks; muutub ainult kasti korgus. */
/* Reavahe 1,7 -> 1,58 (06.09): kitsam tekstiveerg lisas uhe rea ja
   sektsioon laks 785 px peale. Videos on leivateksti reavahe ~1,25 ehk
   meist tunduvalt tihedam, seega 1,58 liigub video suunas ja jaab
   570 px reapikkuse juures (~72 marki) mugavaks. */
.meist__kaart p{font:300 15px/1.55 var(--sans);color:rgba(43,43,43,.88);margin-top:14px}
/* NB SPETSIIFILISUS (HANDOFF 9.7): `.meist__kaart p` on (0,2,0) ja voitis
   varem `.meist__allkiri` (0,1,0), seega kaldkiri EI RAKENDUNUD ja klient
   markas seda ("See voiks olla kaldkirjas, nagu naidisel oli"). Siin on
   sama spetsiifilisus + tag, seega voidab see reegel. */
.meist__kaart p.meist__allkiri{font:italic 300 15px/1.6 var(--serif);margin-top:22px;color:rgba(43,43,43,.88);max-width:calc(700px - var(--kaart-pad-x) - var(--foto-nihe))}
/* Kliendi 03.08: "Seda ei pea nii piklikuks venitama" -> kitsam kast.
   Raadius on nuud sama mis koigil teistel (oli 22px, klient markas). */
.meist__video{
  position:absolute;z-index:2;
  /* Kliendi 17.08 video: fotokaart LAMAB kreemika kaardi parema serva
     PEAL (kattuvus ~5,5% vaateava laiusest), mitte selle korval.
     Vasak serv on ankurdatud KAARDI parempoolse serva jargi (kaart =
     700px miinus pad-x lava koordinaadis) ja parem serv wrapi taha;
     laius tuleb kahe ankru vahelt, siis pusib kattuvus igal laiusel. */
  left:calc(700px - var(--kaart-pad-x) - var(--foto-nihe));
  right:calc(-1*clamp(0px,2vw,32px));bottom:clamp(-52px,-5vh,-32px);
  aspect-ratio:16/9;
  border-radius:var(--r);overflow:hidden;background:#151514;
  box-shadow:0 26px 70px rgba(0,0,0,.42);
}
.meist__video video,.meist__video img{width:100%;height:100%;object-fit:cover;display:block}
/* Kliendi 03.08: "Neid kerivaid numbreid pole uldse vaatevaljas" ja
   "Tekstiga uhel joonel" -> vaiksem vahe ja SAMA vasak serv mis kaardi
   tekstil (kaardi enda polster kompenseeritakse padding-left'iga). */
.meist__statid{
  display:flex;gap:clamp(48px,7vw,110px);
  margin-top:clamp(24px,3.3vh,40px);
}
.meist__stat .arv{font:400 clamp(26px,2.7vw,40px)/1 var(--serif)}
.meist__stat .silt{display:block;margin-top:10px}

/* ---------- 6. TEENUSED ---------- */
.teen__pea{max-width:720px}
.teen__pea .lede{margin-top:14px}
/* Sektsioonil oma ohk: --sect uksi jattis ta teistest liiga madalaks. */
.teen{padding-top:calc(var(--sect) + clamp(0px,2.4vh,26px));
      padding-bottom:calc(var(--sect) + clamp(0px,2.4vh,26px))}
.teen__lava{position:relative}
/* Kliendi 03.08: "Graafiline element teha, nagu naidisel ja nagu kaustas
   oleval pildil. ilma nende sisemiste joonteta" -> ainult valiskontuur. */
/* Laius 17.08 video jargi ~24% vaateavast (varem 34vw/500px oli laiem) */
.teen__joonis{
  position:absolute;right:calc(-1*clamp(0px,2.2vw,40px));top:-56px;z-index:0;
  width:clamp(230px,24vw,340px);opacity:.6;pointer-events:none;
  color:rgba(244,244,244,.42);
}
.teen__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(36px,6vw,90px);
  margin-top:clamp(34px,6vh,64px);
  max-width:1080px;
}
.teen__grid ol{list-style:none}
/* Reapolster 16, mitte 10: teenuste sektsioon oli teistest ~270 px madalam
   ja luges alatoidetuna. Ohk ridade vahel on ka loetavuse voit.
   06.09 (EP-10, kliendi "vahed veidi suuremad, nii et oleks visuaalselt
   1 leht korraga naha"): 18 -> 27 px. Sektsioon on nuud taiskorgusega
   (15.7) ja sisu oli 604 px ehk 156 px lotku; ohk laheb sinna, mitte
   sektsiooni pikendamiseks. Moodetud tools/kontroll/mahub.py-ga. */
.teen__grid li{
  display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:27px 4px 27px 0;
  border-bottom:1px solid var(--line);
  font:300 13.5px/1.5 var(--sans);
}
/* Peen hover: rida sutib, ilma et paigutus liiguks (HANDOFF 9.19: mitte
   `transition:all`, mitte paddingu animeerimine).
   Uleminek on LASTEL, mitte real endal: rida kannab data-reveal'i ja
   tema `transition` kuulub ilmumisele. Varem kirjutas siinne
   `transition:color` selle ule ja tappis kogu loendi ilmumise. */
.teen__grid li i,.teen__grid li span{transition:color .2s var(--ease)}
.teen__grid li:hover{color:#fff}
.teen__grid li:hover i{color:var(--fg)}
/* Kliendi markus: "Siin all enam jooni pole, jooned vaid teksti vahel" */
.teen__grid li:last-child{border-bottom:0}
.teen__grid li i{font:500 10px/1.9 var(--sans);letter-spacing:.14em;font-style:normal;color:var(--muted)}

/* ---------- 7. TÜÜPPROJEKTID ---------- */
/* Kliendi 03.08: "Pildid veidi vaiksemaks teha ja rohkem kogu kupatus
   tsentrisse" -> kitsam lava, vordsemad veerud. */
.tuup__lava{
  display:grid;grid-template-columns:1.12fr 1fr 1fr;
  gap:clamp(14px,1.5vw,24px);
  align-items:end;               /* koigi kaartide ALUMISED servad joonduvad */
  margin-top:clamp(8px,1.5vh,16px);
}
.tuup__pea{display:flex;flex-direction:column;justify-content:flex-end}
.tuup__pea .lede{margin:12px 0 clamp(20px,3.4vh,40px)}
/* Pildid on kavandi FIKSEERITUD raamides, mitte loomulikus formaadis:
   klikk avab taisformaadi lightboxis, seega karpimine ei kaota infot */
.tp-kaart--lai .tp-kaart__pilt{aspect-ratio:3/2}
.tp-kaart--pysti .tp-kaart__pilt{aspect-ratio:4/5}
.tp-kaart .tp-kaart__pilt img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.tp-kaart{
  border-radius:var(--r);overflow:hidden;
  background:var(--cream);color:var(--cream-fg);
  cursor:pointer;
}
/* Tous laheb TRANSFORM-kanalile, mitte `translate`-le: `translate` kuulub
   ilmumisele ja hover kaklesid omavahel. Uleminek tuleb reveal-reeglist
   (transform .35s, box-shadow .35s), seega vari ei ploksata enam kohale. */
.tp-kaart:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(0,0,0,.34)}
/* NB: avalehe kaardi sisu on <span>-elementides (figure sees), seega
   display:block on siin kohustuslik, mitte kaunistus. */
.tp-kaart__pilt{display:block;overflow:hidden}
.tp-kaart__pilt img{width:100%;height:auto;display:block}
.tp-kaart__info{display:block;padding:16px 20px 18px}
.tp-kaart__nimi{display:block;font:400 17px/1.3 var(--serif)}
.tp-kaart__nimi a{text-decoration:none}
.tp-kaart__nimi a:hover{text-decoration:underline;text-underline-offset:3px}
.tp-kaart__spek{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.tp-kaart__spek div{display:flex;justify-content:space-between;gap:12px;font:300 12px/1.5 var(--sans)}
.tp-kaart__spek span:first-child{color:var(--cream-muted)}

/* ---------- 8. TEHTUD TÖÖD ---------- */
/* Lava on kitsam kui wrap: kuue kaardiga sektsioon peab MAHTUMA kliendi
   ~760 px vaatesse (03.08: "suur osa asjadest jaab vaatevaljast valja").
   Kuvasuhe 7:5 on kliendi kavandilt moodetud, seega korgust vahendab
   ainult laius, mitte proportsioon. */
.tood__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.9vw,26px) clamp(24px,3vw,44px);
  margin-top:clamp(18px,2.8vh,32px);
}
.tood-kaart{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:7/5;cursor:pointer;
  background:#20201f;
}
.tood-kaart img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
/* Hover: kaanepilt "vobeleb" = teine kaader sulandub peale (kliendi soov:
   "kategooria pildike vobeleb vms, et on aru saada, mille peal asud") */
/* img.-eesliide on VAJALIK: `.tood-kaart img` (0,1,1) voitis paljast
   klassist (0,1,0), nii et `opacity` ei olnud ulemineku loendis ja teine
   kaader huppas ette ilma sulandumiseta. */
img.tood-kaart__alt{opacity:0;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.tood-kaart:hover img{transform:scale(1.05)}
.tood-kaart:hover .tood-kaart__alt{opacity:1}
.tood-kaart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.38))}
/* Kliendi 03.08: "Nende tekstide puhul vist kirjad Boldis siin? -
   proovime korra ilma, voib-olla naeb parem valja" -> kaal 500 -> 400. */
.tood-kaart figcaption{
  position:absolute;left:12px;right:12px;bottom:13px;z-index:1;
  text-align:center;
  font:400 15px/1.3 var(--sans);color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* ---------- 9. KONTAKT (EP) ---------- */
/* Kliendi 03.08: "Natuke rohkem keskele. hetkel molemad asjad aartes ja
   keskel tuhi ala" -> kitsam lava ja vaiksem vahe, molemad tsentri poole. */
.kont__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(28px,3vw,48px);
  align-items:start;
  /* Joonest kitsam lava: pealkiri jaab pealkirjajoonele, aga vorm ei lenda
     joone paremasse otsa. Muidu tuleks tagasi kliendi 03.08 kaebus
     "molemad asjad aartes ja keskel tuhi ala". */
  max-width:1000px;
}
/* KLIENDI 06.09 (EP-16): "suur tekst soovid peab olema rohkem tahelepanu
   puudev". Kaal 300 -> 400 ja reavahe 1,14 -> 1,06. Kaal teeb siin rohkem
   kui suurus: 45 px oli juba suurem kui Meisti pealkiri, aga kaal 300
   luges kerge leivatekstina. */
.kont__pea h2{font:400 clamp(29px,3.4vw,48px)/1.06 var(--serif);max-width:13em}
.kont__alap{font:400 14.5px/1.6 var(--sans);margin-top:14px}
/* Kliendi 03.08: "Nende moodulite vahele veidi tuhja ruumi, koik liiga
   uksteise otsas" -> suurem vahe rühmade vahel ja ules-alla.
   06.09 (EP-18): "kontaktid emailid rohkem kokku et ei oleks laiali".
   VAHE RUHMADE VAHEL kahaneb 100 -> 56 px, aga PUSTINE margin-top jaab:
   03.08 kaebus oli "koik liiga uksteise otsas" ehk PUSTI kitsas, uus
   kaebus on RIDU laiali. Need kaks ei ole vastuolus, kitsendame ainult
   horisontaali. */
.kont__kontaktid{display:flex;gap:clamp(28px,3.6vw,56px);margin-top:clamp(34px,5.5vh,56px);flex-wrap:wrap}
/* MAGNUS 09.09: "uhe inimese kontaktid kuidagi laiali, pane kokku poole."
   Moodetud lahtekoht: uks ruhm oli 157 px korge ja read kaisid ~43 px
   sammuga, Instagrami ikoon veel 56 px allpool. Kolm rida ei lugenud
   uheks plokiks vaid kolmeks eraldi asjaks.

   Vahed tulid KAHEST kohast:
     tekstilink  32 px puutekast + 11 px marginaal
     ig-ikoon    44 px puutekast + 12 px marginaal
   Puutekaste EI TOHI vahendada (44 px on ligipaasetavuse noue ja
   pointer:coarse all tostetakse tekstilingid samuti 44 px peale), seega
   kahandame MARGINAALE ja votame ig-ikoni ulearuse korguse tagasi
   negatiivse alumise veerisega. Klikitav ala jaab tapselt samaks. */
.kont__ryhm h3{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}
.kont__ryhm a{
  display:block;font:300 13.5px/1.5 var(--sans);margin-top:2px;
  text-underline-offset:3px;color:var(--muted);
  transition:color .2s var(--ease);
}
.kont__ryhm a:hover{color:var(--fg)}
.kont__ryhm .ig{display:inline-flex;margin-top:1px;margin-bottom:-11px;opacity:.9}
.kont__ryhm .ig:hover{opacity:1}
.kont__ryhm .ig svg{width:21px;height:21px}
.kont__firma{margin-top:clamp(38px,6vh,64px);font:300 12.5px/1.9 var(--sans);color:var(--muted)}
.kont__firma b{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin-bottom:6px}

/* Vorm (kliendi markus: "kontaktivorm sobis, aga moodud voiks jaada
   vaiksemaks, et uhtiks vasakul oleva infoga") */
.vorm{
  background:var(--cream);color:var(--cream-fg);
  border-radius:var(--r);
  padding:clamp(22px,2.4vw,28px) clamp(22px,2.6vw,30px);
  max-width:400px;width:100%;justify-self:end;
}
.vorm h3{font:400 17px/1.4 var(--serif)}
.vorm__sub{font:300 11.5px/1.6 var(--sans);color:var(--cream-muted);margin-top:4px}
.vorm label{display:block;margin-top:10px;font:500 9.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-muted)}
.vorm input,.vorm select,.vorm textarea{
  width:100%;margin-top:5px;
  background:#fff;border:1px solid rgba(43,43,43,.16);border-radius:9px;
  padding:9px 12px;
  font:300 13px/1.5 var(--sans);color:var(--cream-fg);
}
.vorm input:focus,.vorm select:focus,.vorm textarea:focus{border-color:#2b2b2b;outline:none}
/* Hiirega klikkides piisab aare tumenemisest, aga KLAVIATUURIGA liikuja
   peab nagema sama rongast mis mujal lehel. Ilma selleta oli vormis
   markeruut taiesti ilma fookusemargita. */
.vorm input:focus-visible,.vorm select:focus-visible,.vorm textarea:focus-visible{
  outline:2px solid var(--cream-fg);outline-offset:2px}
.vorm textarea{resize:vertical;min-height:80px}
.vorm__consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font:300 11px/1.55 var(--sans);color:var(--cream-muted)}
.vorm__consent input{width:auto;margin:2px 0 0}
.vorm__consent a{text-underline-offset:2px}
.nupp{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:18px;padding:13px 28px;
  background:#2b2b2b;color:#f4f4f4;
  border:0;border-radius:999px;cursor:pointer;
  font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;
  transition:background .18s,translate .18s;
}
.nupp:hover{background:#171716;translate:0 -2px}
/* Globaalne fookusraam on currentColor. Nendel nuppudel ON tekst sama
   varvi mis raam peaks olema, aga taust on tume, nii et raam sulas
   taustaga kokku ja fookust ei olnud nade. */
.nupp:focus-visible{outline-color:var(--cream-fg)}
.nupp:disabled{opacity:.6;cursor:wait}
/* PARIS VIGA, leitud 404-lehelt: `.nupp` on tume pill ja tootab ainult
   KREEMIKAL pinnal (vorm, tuupprojekti CTA). Tumedal lehel oli ta taust
   sama mis leht, ehk nupp kadus ara ja jargi jai paljas tekst.
   `.nupp--hele` on sama vorm umberpooratud varvidega. */
.nupp--hele{background:var(--cream);color:var(--cream-fg)}
.nupp--hele:hover{background:#fff}
.nupp--hele:focus-visible{outline-color:var(--fg)}
.vorm__teade{margin-top:12px;font:400 12.5px/1.5 var(--sans);border-radius:9px;padding:10px 12px}
.vorm__teade.ok{background:rgba(84,120,72,.16);color:#3c5a33}
.vorm__teade.err{background:rgba(150,52,42,.14);color:#8a3327}

/* Honeypot: nahtamatu inimestele, olemas robotitele.
   NB EI kasuta left:-4000px: see venitas dokumendi laiust ja andis
   horisontaalse ulevoolu (moodetud 1539 px 1536 px vaates). */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 10. JALUS (lepinguline Veebimetsa viide, p 10.3) ----------
   Kliendi kavandis jalust EI OLE ("koik selle uhel lehel, uhes vaates"),
   seega jalus on ohuke ja vaikne: hairline, logo, (c), lingid. Kliendi
   markus keelas LISAKONTAKTINFO, mitte juriidilised lingid. */
.jalus{
  border-top:1px solid var(--line);
  padding:26px var(--gut) 28px;
  background:var(--bg);
  position:relative;z-index:1;
}
.jalus__sisu{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  gap:18px 36px;flex-wrap:wrap;
}
.jalus__brand{display:flex;align-items:center;gap:18px}
.jalus__brand img{height:38px;width:auto;display:block;opacity:.92}
.jalus__brand p{font:300 11.5px/1.6 var(--sans);color:var(--muted)}
.jalus__lingid{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);flex-wrap:wrap}
.jalus__lingid a{
  font:400 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  transition:color .18s;
}
.jalus__lingid a:hover{color:var(--fg)}
.jalus__lingid .ig{display:inline-flex}
.jalus__lingid .ig svg{width:19px;height:19px}
body.sk .jalus{border-top-color:var(--sk-line);background:var(--sk-bg)}
body.sk .jalus__brand p{color:rgba(66,68,57,.8)}
body.sk .jalus__lingid a{color:rgba(66,68,57,.8)}
body.sk .jalus__lingid a:hover{color:var(--sk-fg)}

/* ---------- 11. skRUUM ---------- */
/* SK LAVA ON KITSAM KUI EP OMA (17.08 videost moodetud): kliendi SK
   kavandis algab sisu ~20% vaateava laiusest (EP-l ~14,5%), seega SK
   lehtede --maxw on 920, mitte 1080. Sama muutuja kaudu jargivad seda
   wrap, jalus ja sk-video taisserva-valem. Parempoolsed elemendid
   (portree, vorm, videokaart) ULATUVAD lavast ule parema serva poole,
   tapselt nagu kliendi kavandis; selle teevad gridi width-laiendused. */
body.sk{--maxw:920px;--kroom-x:clamp(24px,8vw,123px)}
/* Kardinavideo kogu lehe taustal (fikseeritud, sisu keritakse ule).
   Kontaktis katab parem tasapind selle osaliselt (kliendi markus:
   "Liikuv Kardin pole kogu lehe ulatuses"). */
.sk-kardin{position:fixed;inset:0;z-index:-1;background:var(--sk-bg)}
.sk-kardin video,.sk-kardin img{width:100%;height:100%;object-fit:cover;display:block}

/* SK fikseeritud kroom: monogramm + tekstimenuu. Hero ajal peidus. */
.sk-kroom{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;justify-content:space-between;align-items:flex-start;
  /* 17.08 video: logo vasak serv ~6% laiusest, menuu parem ots ~12,4%
     kaugusel paremast servast (mitte serva aares) */
  padding:22px clamp(36px,12.4vw,190px) 0 clamp(24px,6vw,92px);
  pointer-events:none;
  /* visibility, mitte ainult opacity: paljas opacity:0 element jaab
     TABELDUSJARJEKORDA, nii et klaviatuuriga liikuja sai fookuse
     nahtamatule logolingile ja menuunupule. pointer-events kaitses
     ainult hiirt. Viide .5s hoiab elemendi peitmise ajaks nahtavana. */
  opacity:0;visibility:hidden;translate:0 -8px;
  transition:opacity .5s var(--ease),translate .5s var(--ease),visibility 0s .5s;
}
/* KLIENDI 06.09 (SK-9): "navbar veel natukene hiljem". Ilmumine saab
   0,35 s viite; PEITMINE jaab kohesekes (viide ainult sissetulekul),
   muidu ripuks menuu hero peal. */
body.kroom-on .sk-kroom{opacity:1;visibility:visible;translate:0 0;transition-delay:.35s,.35s,0s}
.sk-kroom a{pointer-events:auto}
/* Kliendi 17.08 video: monogramm ~14,5% vaateava korgusest. */
.sk-kroom__logo img{height:clamp(80px,14.4vh,132px);width:auto;display:block}
.sk-menyy{display:flex;gap:26px;align-items:center;padding-top:10px}
/* KLIENDI 17.08 OTSENOUE: menuu "need heleda tooniga" (videol kreemvalge
   #F2EEE8 laadne). NB heledal greige taustal kukub see WCAG kontrastist
   labi; see on kliendi teadlik disainivalik, varjuke aitab loetavust. */
.sk-menyy a{
  font:500 clamp(10.5px,0.95vw,14px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:#f4f0e8;opacity:.92;
  text-shadow:0 1px 3px rgba(66,68,57,.5),0 1px 10px rgba(66,68,57,.45);
  transition:opacity .2s;
  display:inline-grid;justify-items:center;
}
/* Kaal 500 -> 600 muudab teksti laiust ja lukkab naabreid. Scrollspy
   vahetab .aktiivne klassi KERIMISE AJAL, nii et kogu menuurida vabises.
   Nahtamatu varjukoopia broneerib rasvase laiuse ette: rida seisab paigal. */
.sk-menyy a::before{
  content:attr(data-tekst);font-weight:600;
  height:0;overflow:hidden;visibility:hidden;pointer-events:none;
}
.sk-menyy a:hover,.sk-menyy a.aktiivne{opacity:1;font-weight:600}
.sk-menyy i{font-style:normal;color:#f4f0e8;opacity:.55;font-size:10px}

/* SK hero */
/* --nool-d / --nool-b / --hero-joon: sama muster mis EP herol. Noole
   keskpunkt on UKS allikas, mille jargi alumine metarida joondub, seega
   noole suuruse muutmine liigutab teksti automaatselt kaasa. */
.sk-hero{
  position:relative;height:100svh;min-height:min(540px,100svh);
  overflow:hidden;overflow:clip;background:#565049;
  /* --nool-d parineb body.sk pealt */
  --nool-b:24px;
  --hero-joon:calc(var(--nool-b) + var(--nool-d) / 2);
}
.sk-hero__meedia{position:absolute;inset:0}
.sk-hero__meedia img,.sk-hero__meedia video{width:100%;height:100%;object-fit:cover;display:block}
.sk-hero__meedia video{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.sk-hero.video-on .sk-hero__meedia video{opacity:1}
.sk-hero__loor{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,28,25,.16),rgba(30,28,25,0) 40%,rgba(30,28,25,.3))}
/* Kliendi 17.08 video mootmised (1440x900 kaadrilt): margi vasak serv 6,1%
   laiusest, ulaserv ~7% korgusest, LABIMOOT ~20,7% laiusest ("logo
   proportsioon oluliselt suurem"). */
.sk-hero__badge{position:absolute;top:clamp(18px,6.5vh,58px);left:clamp(20px,6.1vw,94px);width:clamp(150px,20.7vw,320px);filter:drop-shadow(0 2px 14px rgba(0,0,0,.25))}
/* Servatekstid: kliendi 17.08 markus "veidi suuremad ja ilmuvad jooksvalt";
   videol ~14-16px @900px korgusel, parem serv 4,7% servast. Tahthaaval
   trukkimise teeb main.js plokk 11 (data-tryki). */
.sk-hero__tagline{
  position:absolute;top:clamp(24px,5vh,42px);right:clamp(20px,4.7vw,72px);
  font:500 clamp(11px,1vw,15px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--sk-hele);text-shadow:0 1px 10px rgba(0,0,0,.3);
}
/* Kasitsikiri: videol plokk keskel-paremal (x 42-86%, y 32-76%), kalle
   ~-14 kraadi ("nagu oleks kasitsi peale kirjutatud"), rida 1 taandega
   paremale, rida 2 laiem. Mitte tsentris nagu varem.
   KATRE 11.09, BRITTANY SIGNATURE: kliendi kavand (Canva 1440x900) annab
   tindi kasti x 43,7-87,4 %, y 29,3-77,2 %, "Be" algab 49 %, "but" 44 %.
   Brittanyl on vaga korged ulatus- ja alapikendused: vana kraadiga
   (8.8vw/1.3, -14 kraadi) ulatus tint 1536x760 juures y 715 peale, ehk
   NOOLE ALLA. Kirjakraad on nuud ka korgusega seotud (15vh), read
   tihedamalt (.9, kattuvad tahtlikult) ja kalle -10.
   MOODETUD pikslivahega (tindikast, mitte elemendi kast):
   1440x900 x 44,4-87,0 %, y 28,3-77,3 %, "Be" 49,6 %, "but" 44,4 %;
   1536x760 tint lopeb y 603, nool algab 668.
   15.09 VIDEO SOBITUS (Magnus: "vaata tema videotest, sealt naed mida ta
   pariselt tahab"). Katre 17.08 video kaader 22 s on SAMA kookifoto mis
   meie poster, seega video kirja mask saadi pikslivahega. Tindikast klappis
   ka enne, aga KUJU mitte: videos on kalle ~-16,5 kraadi ja kiri vaiksem.
   Umbriku IoU (6 px) 0,19 -> 0,30, NCC 0,33 -> 0,52. Moodetud noolest:
   1536x760 71 px, 1366x768 87, 1280x720 80, 1024x768 165, telefon 319.
   PARANDUS 15.09 ohtul varasemale vaitele "video kasikiri on TEINE
   joonis, Brittanys b/l/d silmuseid ei ole": Brittanyl ON kitsad b/l/d
   silmused, 7 px joon paneb need kinni. Videos on joon ~3x peenem
   (1440x900: 2,3 px vs 7,2 px). Kas Canva font on sama fail, on
   toestamata. */
.sk-hero__slogan{
  position:absolute;left:41.4vw;top:35.8vh;right:4vw;
  color:#fff;text-align:left;
  font:400 clamp(56px,min(7.8vw,12.4vh),150px)/.9 var(--script);
  rotate:-16.5deg;transform-origin:50% 50%;
  text-shadow:0 2px 22px rgba(0,0,0,.3);
  pointer-events:none;
}
.sk-hero__slogan span{display:block}
.sk-hero__slogan span:first-child{margin-left:1em}
/* KATRE 15.09: "See esilehe Brittany Signature, ega see boldis ole?" EI OLE:
   Katre paki ainus loige (Regular 400, fvar puudub) ja Chrome joonistab
   veebifondiga (CSS.getPlatformFontsForNode). Magnus valis joone
   peenendamise: SVG erosioon, filter sisearhitektuur.php #skOhendus.
   RAADIUS 0.8, MITTE 1. Chrome umardab raadiuse x DPR taisarvuks. 1 andis
   DPR 1,5 juures 2 seadmepikslit (1,33 px) ja joon KATKES 1280x720 juures
   (tindi pikkus -15 %, 1024x768 juures -39 %). 0.8 annab DPR 1 ja 1,25
   juures sama pildi mis 1 (Magnuse nahtud eelvaade), DPR 1,5 ja 1,75
   juures 1 seadmepiksli ja DPR 2 juures 2. Moodetud 7 vaadet x 5 DPR-i:
   1536x760 joon 6,0 -> 3,7 px (DPR 1,25), tindi pikkus igal pool >= 0,97.
   AINULT kirjakraadil >= 79,8 px (7.8vw ja 12.4vh ehk vahemalt 1024x644):
   70 px kirjal katkes joon DPR 1 juures (tindi pikkus -29 %). Telefon
   (Katre 15.09 "mobiilivaade valmis") jaab puutumata.
   Vari on drop-shadow FILTRI JARGI, mitte text-shadow: muidu sooks
   erosioon ka varju. Filtri ala ei loika tahti (moodetud 10 vaadet x 4
   DPR-i, tindikast sama). */
@media (min-width:1024px) and (min-height:644px){
  .sk-hero__slogan{text-shadow:none;filter:url(#skOhendus) drop-shadow(0 2px 22px rgba(0,0,0,.3))}
}
/* KATRE 17.09: "ega seda esilehe kasikirja veelgi ohemaks anna teha? Ja
   voib-olla veel veidi venitada laiemaks?" OHEMAKS EI SAA ilma tahti
   lohkumata: 2 seadmepikslit erosiooni (raadius 1.6) andis Katre ekraanil
   (1536x760 DPR 1,25) tindi pikkuse 0,93, gammaga 0,84, DPR 1 juures 0,55
   kuni 0,70 (peenikesed uhendusjooned kaovad). Laiem venitus (1.35) teeb
   pustjooned paksemaks (3,96 -> 4,23 px), seega servad heledamaks: alfa
   gamma 2 parast erosiooni viib joone 3,81 px peale (praegusest 4 %
   ohem, tindi pikkus 1,02). Gamma AINULT >= 86 px kirjal (vahemalt
   1112x694): 1024x768 DPR 1 juures andis gamma tindi pikkuse 0,93. */
@media (min-width:1112px) and (min-height:694px){
  .sk-hero__slogan{filter:url(#skOhendusServ) drop-shadow(0 2px 22px rgba(0,0,0,.3))}
}
.sk-hero .sk-hero__filtrid{position:absolute;width:0;height:0;overflow:hidden}
/* KATRE 16.09: "Laks veidi paremaks. Aga uurin, et akki annab neid tahti
   veidi venitada, teksti veidi laiemaks tommata?" Katre video tahed
   moodeti ~1,2 korda laiemaks (rea pikkus tahe korguse suhtes, 4 mootu
   1,08 kuni 1,41). Venitus on RIDADEL (span) vasakust servast paremale;
   rida on sloganis enne poorde (p rotate), seega tahed venivad piki rida.
   MIKS MITTE p{scale}: see venitaks ploki keskpunktist ja tekst kasvaks
   VASAKULE-ALLA (moodetud 1536x760: vasak serv 669 -> 591 px, noolest
   73 -> 54 px). Rea vasakust servast: vasak serv paigal, ots kasvab
   paremale-ules, noolest 78 px (10 vaadet musta taustaga tindist).
   Filter (p) rakendub PARAST venitust ehk erosioon venitatud tahel.
   Ainult lauaarvutis: telefonivaate kinnitas Katre 15.09.
   KATRE 17.09 "voib-olla veel veidi venitada laiemaks": 1.2 -> 1.35.
   KATRE 17.09 ohtul: "see esilehe tekst veidi liialt domineerib ...
   Originaaltekst jaab nagu n.o. hajuvalt ja ei sega ... Kas saame proovida
   korraks nt selle teksti tooni veidi hajutada" (Canva Labipaistvus).
   MOODETUD 1440x900 (ligikaudne, video ja posteri joondus 0,88): Katre video
   kaadri (22 s, sama kookifoto) kiri annab fotole sama "lisavalguse" (kirja
   ja kirjata kaadri vahe summa) kui meie kiri labipaistvusega 0,63
   (0,65 = 1,01 x; 0,80 = 1,26 x). Opacity rakendub PARAST filtrit, seega
   peenendus ja servad jaavad samaks. Telefon (kinnitatud) jaab taiesti
   nahtavaks. */
@media (min-width:881px){
  .sk-hero__slogan span{transform-origin:0 50%;scale:1.35 1}
  .sk-hero__slogan{opacity:.65}
}
/* Mitte flex+gap: kirjutusmasin tykeldab sisu uheks aria-hidden kestaks
   ja flex-vahed kaoksid; vahed tulevad i-margonist. */
/* KLIENDI 06.09 (SK-3, SK-5): "alumist teksti veidi tosta" ja
   "kiri noole korval, sama korgel ehk noole keskpunkti". Sama lahendus
   mis EP herol: bottom = noole keskpunkt, translate 50% viib elemendi
   enda keskpunkti samale joonele. */
.sk-hero__meta{
  position:absolute;left:clamp(20px,6.6vw,101px);bottom:var(--hero-joon);
  translate:0 50%;
  font:500 clamp(11px,1vw,14px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--sk-hele);
}
.sk-hero__meta i{font-style:normal;opacity:.6;margin:0 10px}
/* Videos nool EI pompa, aga klient noudis 06.09 otsesonu liikumist
   (SK-4 "noolele ring umber bouncima"), seega E8 p2 on TUHISTATUD,
   sama nagu EP herol.
   SK-12 "nool voib olla kogu aeg": ilmumisviide 0,7 -> 0,35 s, ehk ta
   on kohal peaaegu kohe, mitte ei oota. */
.sk-nool{
  position:absolute;left:50%;bottom:26px;margin-left:-13px;
  color:#fff;text-decoration:none;
  animation:noolIlmub .9s var(--ease) .35s both;
}
.sk-nool svg{width:26px;height:26px}
/* MAGNUS 09.09: "sk noolele ring umber igal pool, mitte ainult
   headeris." Ring oli varem ainult heronoolel (17.08 video jargi);
   nuud kannavad sama ringi ka sektsioonide vahelised nooled, ehk
   kerimisvihje naeb kogu lehel valja uhtemoodi. Moot tuleb molemal
   samast --nool-d muutujast, et nad ei hakkaks lahku minema. */
.sk-hero .sk-nool{
  bottom:var(--nool-b);margin-left:0;
  width:var(--nool-d);height:var(--nool-d);
  translate:-50% 0;
  border:1px solid rgba(255,255,255,.6);border-radius:50%;
  display:grid;place-items:center;
  animation:noolIlmub .9s var(--ease) .35s both,
            noolHupp 2.4s var(--ease) 1.3s infinite;
}
.sk-hero .sk-nool svg{width:22px;height:22px}
/* 17.08 video: sektsiooninool on KREEMVALGE nagu menuu (kliendi teadlik
   heleda-tooni valik greige taustal; varjuke aitab loetavust). */
/* MAGNUS 07.09: "see sk nool peab olema koguaeg nahtas ja bouncima
   kuni viimase seksioonini, et ka vanemad inimesed saaksid aru et tuleb
   kerida". Varem oli see nool sisu JAREL voolus (position:static), ehk
   ta seisis teksti all keset ekraani ja kadus silmist. Nuud on ta iga
   sektsiooni ALASERVAS. Kuna sektsioon on tapselt vaateava korgune ja
   kerimine kinnitub, tahendab see, et nool on ekraani all servas kogu
   aeg. Viimases sektsioonis (#kontakt) noolt EI OLE, sest edasi ei ole
   kuhugi kerida. */
/* MAGNUS 09.09: "muuda sisekujunduses nool teist varvi ja nahtavamaks,
   et oleks aru saada et scrollida tuleb."
   Moodetud pohjus: nool oli #f2eee8 taustal #e3e2de ehk kontrast 1,13:1.
   See on sisuliselt nahtamatu; teda hoidis nahtaval ainult drop-shadow.
   Nuud kannab ta brandi enda tumedat (--sk-fg #424439). Arvutuslikult
   annaks see #e3e2de peal 7,6:1, aga noole all EI OLE #e3e2de: moodetud
   taust on #f2f0ec ja tegelik kontrast on 8,71:1 (tools/nool_kontrast.py).
   Kirjas oli varem arvutuslik 7,6 -- see oli vale eelduse, mitte vale
   arvutuse tulemus. Vari laheb VALGEKS: tume vari tumeda noole all tegi
   ainult mudase laigu, hele halo aga tostab ta kardinamustri pealt esile.
   Suurus 26 -> 34 px ja joon 1,3 -> 1,6, sest "nahtavamaks" ei ole ainult
   varvi kusimus.
   09.09 lisandus ring (vt ulalt). Kuna ring ise kannab nuud suure osa
   nahtavusest, laheb GLYFI moot 34 -> 24 px, muidu jaaks nool ringi
   sisse kinni; ELEMENDI mout kasvab 44 -> kuni 68 px, ehk kogupilt on
   endiselt suurem kui enne ringi. Joon jaab 1,6 peale.
   Ringi joon on brandi tume 90% peal. Esimene katse 55%-ga andis
   kuvatommise pealt ainult 2,08:1, mitte arvutusliku 2,67 -- pohjus
   on see, et servasilutud 1 px kaar istub oma valge drop-shadow halo
   peal ja osalise katvusega pikslid lahevad heledaks. Seega ei saa
   siin varvi arvutada, teda peab tommiselt MOOTMA (tools/nool_ring.py).
   80% andis lauaarvutis 3,1:1, aga telefonis ainult 2,8 -- vaiksem
   ring (48 vs 68 px) on jarsema kaardumisega ja servasilumine soob
   suhteliselt rohkem. 90% viib koik vaated ule 3,0. */
.sk-nool--tume{
  color:var(--sk-fg);
  filter:drop-shadow(0 1px 3px rgba(255,255,255,.75));
  bottom:clamp(16px,3vh,30px);margin-left:0;translate:-50% 0;
  width:var(--nool-d);height:var(--nool-d);
  border:1px solid rgba(66,68,57,.9);border-radius:50%;
  animation:noolIlmub .9s var(--ease) .35s both,
            noolHupp 2.6s var(--ease) 1.2s infinite;
}
.sk-nool--tume svg{width:24px;height:24px;stroke-width:1.6}

/* SK sektsioonid */
.sk-sekt{position:relative;padding:calc(var(--sect)*.8) var(--gut)}
.sk-rail{
  position:absolute;left:var(--kroom-x);top:50%;translate:0 -50%;
  writing-mode:vertical-rl;rotate:180deg;
  /* KLIENDI 06.09 (SK-8): "Stuudio tekst suuremaks" ja kliendi enda
     markus "STUUDIO sama suurelt nagu [menuupunktid] ulemal".
     Moodetud: .sk-menyy a oli 14 px, rail 11,5 px. Nuud sama valem. */
  font:500 clamp(10.5px,0.95vw,14px)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--sk-muted);pointer-events:none;
}
.sk-h2{font:500 clamp(32px,4.2vw,54px)/1.15 var(--sk-serif);letter-spacing:.1em}

/* Saame tuttavaks */
/* 17.08 video: tekstiveerg ~38% ja portree ulatub lavast ule parema
   serva (video parem serv 88,2% vaateavast) - gridi width-laiendus
   viib parema veeru wrapist valja, vasak jaab pealkirjajoonele. */
.sk-stuudio__grid{
  width:calc(100% + clamp(0px,8.2vw,126px));
  display:grid;grid-template-columns:minmax(0,590px) minmax(0,clamp(260px,26.6vw,410px));
  gap:clamp(32px,4vw,64px);
  /* space-between, mitte center: nii algab "Saame tuttavaks!" samalt
     jooneit mis "Mida pakume?" ja kontakti pealkiri. */
  justify-content:space-between;align-items:center;
}
/* 17.08 video mootudest: kehatekst ~19px @900px korgusel, reavahe ~1,5;
   senine 14,5px/2 oli videost margatavalt vaiksem ja horedam. */
/* KLIENDI 06.09 (SK-10): "suuremad vahed tekstile, kiri vaiksemaks ja
   kompaktsemaks". Kaks kanget vastassuunas ja see on tahtlik: TAHT
   laheb vaiksemaks (19 -> 17 px), aga LOIKUDE vahe suuremaks
   (20 -> 30 px). Nii on plokk kompaktsem, aga hingab rohkem. */
.sk-stuudio__tekst p{
  font:300 clamp(14px,1.18vw,17px)/1.6 var(--sans);letter-spacing:.04em;
  color:var(--sk-fg);margin-top:30px;max-width:50ch;
}
.sk-stuudio__tekst p.sk-allkiri{font:italic 400 clamp(16px,1.39vw,20px)/1.5 var(--sans);letter-spacing:.05em;margin-top:24px}
.sk-stuudio__tekst p.sk-roll{font:300 clamp(12px,0.97vw,14px)/1.5 var(--sans);letter-spacing:.12em;color:var(--sk-muted);margin-top:5px}
/* Portree: KLIENDI 17.08 markus "minu pilt liiga suur". Video mootmised:
   laius ~26,5% vaateava laiusest, korgus ~63% vaateava KORGUSEST, suured
   kaarjas nurgad (r ~90px @900). max-height piirab korguse video jargi;
   kergelt labipaistev, et kardin paistaks labi (kliendi soov).
   Mustvalge CSS-iga, originaal jaab varviliseks. */
.sk-portree{
  border-radius:clamp(44px,10.5vh,92px);overflow:hidden;aspect-ratio:2/3;
  /* laius tuleb korguselaest (63vh * 2/3), muidu rikuks max-height
     kuvasuhte ja nurgad-mask jaaksid valele kujule */
  width:min(100%,calc(min(63vh,600px)*2/3));justify-self:end;
  /* 17.08 video: portree ALASERV joondub nimereaga (mitte keskele) */
  align-self:end;
}
.sk-portree img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);opacity:.88;
}
/* 17.08 video: ikoon suurem (~36-40px) ja keskpunktiga ~93,7% laiusest */
.sk-ig-nurk{position:absolute;right:clamp(24px,4.9vw,75px);bottom:clamp(22px,5.5vh,42px);color:var(--sk-fg);opacity:.8}
.sk-ig-nurk:hover{opacity:1}
.sk-ig-nurk svg{width:clamp(28px,2.5vw,38px);height:clamp(28px,2.5vw,38px)}

/* Mida pakume */
.sk-teen__grid{
  display:grid;grid-template-columns:minmax(0,575px) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);
  justify-content:start;align-items:center;
  margin-top:clamp(24px,4vh,44px);
}
.sk-teen__list{list-style:none}
/* Kliendi 17.08 video: loendi kiri ~19px @900px korgusel (senine 14px oli
   vaiksem); read ilmuvad rida-realt, sona sonahaaval (main.js plokk 11).

   KOMPAKTSUS 06.09 (kliendi "Mida pakume koht teha nii et mahub uhele
   lehele ara ja kompaktsemaks"). Moodetud tools/kontroll/mahub.py-ga:
   sektsioon oli 805 px ehk kliendi 1536x760 ekraanist 45 px korgem, mis
   tahendas, et 15. rida jai kerimata kujul nagemata JA et kinnitumine
   (15.7) oleks kasutaja siia sektsiooni kinni sidunud.
   Kirja SUURUST ei vahendatud, sest 19 px on kliendi enda videost
   moodetud. Kokku toid reavahe 1,55 -> 1,42 ja reapolster 5 -> 3 px
   kokku 15 rea peale ~60 px, mis viis sektsiooni 760 px sisse. */
/* MAGNUS 07.09 (SK-14 tapsustus): "see list peab olema sama suur kui
   video paremal, seega tee video natukene suuremaks ja tee tekstid
   vaiksemaks". Moodetud enne: loend 522 px, video 324 px (1536x760).
   Kaks kanget liiguvad teineteise poole: kiri 19 -> 17 px, reavahe
   1,42 -> 1,38 ja reapolster 3 -> 1 px viivad loendi ~405 px peale;
   video 42,6vh -> 53,5vh toob ta samale korgusele (~407 px).
   NB moota tuleb SETTINUD olekus: reveal-animatsiooni scale() naitab
   video korguseks 403, kuigi tegelik paigutus on 418. */
.sk-teen__list li{
  position:relative;
  font:300 clamp(13.5px,1.18vw,17px)/1.38 var(--sans);letter-spacing:.05em;
  padding:1px 0 1px 22px;
}
.sk-teen__list li::before{
  content:"";position:absolute;left:2px;
  /* Punkt jargib kirja suurust, mitte kovakodeeritud px-i: nii ei nihku
     ta paigast, kui clamp() vahepealsel laiusel teise vaartuse annab. */
  top:calc(1px + .54em);
  width:5px;height:5px;border-radius:50%;background:var(--sk-fg);opacity:.75;
}
/* KLIENDI 17.08 OTSENOUE: "tehtud toode video oluliselt vaiksem, mitte nii
   domineeriv". Video mootmised: korgus ~42,6% vaateava korgusest, vasak
   serv ~61% laiusest, parem serv jookseb ekraani servani, umarad on
   AINULT vasakud nurgad. Korgus fikseeritud, mitte aspect-ratio. */
.sk-video{
  position:relative;border-radius:clamp(28px,3vw,46px) 0 0 clamp(28px,3vw,46px);overflow:hidden;
  height:clamp(265px,53.5vh,460px);cursor:pointer;background:#c9c4bc;
  box-shadow:0 20px 50px rgba(66,68,57,.22);
  /* Jookseb ekraani parema servani. NB 50%-trikk siin EI tootaks: element
     on grid-veerus, mitte tsentreeritud konteineris. Kaugus wrapi servast
     viewporti servani on kas --gut voi wrapi automargin, kumb suurem. */
  margin-right:calc(-1 * max(var(--gut), (100vw - var(--maxw)) / 2) + 1px);
}
.sk-video video,.sk-video img{width:100%;height:100%;object-fit:cover;display:block}
.sk-video__silt{
  margin-top:11px;text-align:left;
  font:300 11px/1.5 var(--sans);letter-spacing:.08em;color:var(--sk-muted);
}

/* SK kontakt: kardin jaab vasakule, parem tasapind on KITSAS riba
   (kavandil ~22% laiusest) ja vorm ULATUB ule piiri kardinale.
   Varv on kliendi 17.08 videost moodetud kahvatu salveiroheline
   #e1e4dd, MITTE greige. */
.sk-kontakt::before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:22%;
  background:#e1e4dd;
}
/* NB: siin EI TOHI olla `.sk-kontakt>*{position:relative}`. See kirjutas
   ule `.sk-rail{position:absolute}` (sama spetsiifilisus, hilisem reegel
   voidab) ja vertikaalne silt kukkus voolu logo peale. Tostame ainult
   sisuveeru ::before-tasapinna kohale. */
.sk-kontakt>.wrap{position:relative;z-index:1}
/* IG-riba ulatub sektsiooni alaservani, seega alumine polster oleks
   topelt ohk. Kliendi kavandil algab riba kohe vormi alt. */
.sk-kontakt{padding-top:calc(var(--sect)*.62);padding-bottom:calc(var(--sect)*.5)}
/* 17.08 video: vorm ulatub lavast ule parema serva (parem serv ~89,4%
   vaateavast) - sama width-laiendus mis stuudio gridil; vasak veerg
   jaab pealkirjajoonele. */
.sk-kont__grid{
  width:calc(100% + clamp(0px,9.5vw,146px));
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,485px);
  gap:clamp(28px,4vw,64px);
  justify-content:space-between;align-items:start;
}
/* Kliendi 17.08 video: kontaktilingid on PAREMJOONDUSEGA pealkirjaveeru
   parema serva joonele (e-post ja telefon lopevad samal joonel). */
.sk-kont__lingid{text-align:right;max-width:var(--kont-veerg)}
/* NB lingid on flexid (puutesihtmargi reegel ptk 16), seega paremjoondus
   kaib justify-content, mitte text-align kaudu. */
.sk-kont__lingid a{justify-content:flex-end}
/* Kliendi 17.08 video: murre "Kirjuta meile oma / projektist lahemalt!"
   jargi; max-width sunnib sama murdekoha.
   15.09 PARANDUS: 17.08 kommentaar "sama serif mis Mida pakume? (mitte
   Noto)" oli VALE. Video kaader 80 s (vt scratchpad/video) naitab
   kontaktipealkirjas rasket, kitsast, korge kontrastiga display-serifi,
   tahed puutuvad (ilmselt logofont The Seasons, veebilitsentsita, keelatud).
   "Mida pakume?" ON Cormoranti-laadne. Katre 11.09 markus sama pealkirja
   juures: "See dominieerib. Tahed rohkem uksteise lahedal." Seega Noto
   Serif Display (OFL, lehel juba olemas). */
/* KLIENDI 06.09 (SK-19): "lingid lahevad tapselt pealkirjaga joonde
   paremalt". Moodetud enne: pealkirja pikim rida loppes 669 px juures,
   lingid 728 juures ehk 59 px moodas.
   Pealkirja veerg ja linkide veerg saavad nuud UHE muutuja. Vaartus on
   pealkirja pikima rea laius ("projektist lahemalt!" = 8,02 x kirjakraad),
   valjendatud sama clamp-kovera kaudu mis fondisuurus, seega joondus
   pusib igal vaateava laiusel, mitte ainult 1536 juures.
   KATRE 11.09: "Tahed rohkem uksteise lahedal" (pealkiri). Tahevahe
   +.02em -> -.02em. Pikim rida on nuud 7,22 x kirjakraad (enne 8,02),
   seega veeru muutuja on sama koveraga umber arvutatud (7,22 x 28 px /
   3,2vw / 45 px), +1 px varu, et "lahemalt!" ei murduks kolmandale reale.
   15.09 VIDEO SOBITUS: Noto Serif Display 400, reavahe .85, tahevahe
   -.08em. Pikim rida = 7,73 x kraad (Range-laius, moodetud), +2 px varu.
   MOODETUD 1440x900 vs video: tint x 260-645 / y 220-313 (video 282-666 /
   221-321), reasamm 44 (42), x-korgus 27 (28), tuvi 5 (5), tihedus .343
   (.341). Moodik ja pildid: scratchpad/fit/kontakt. */
.sk-kont__pea{--kont-kraad:clamp(30px,3.47vw,54px);--kont-veerg:calc(var(--kont-kraad)*7.73 + 2px)}
.sk-kont__pea h2{font:400 var(--kont-kraad)/.85 var(--serif);letter-spacing:-.08em;max-width:var(--kont-veerg)}
.sk-kont__alap{font:400 clamp(15px,1.53vw,22px)/1.6 var(--sans);letter-spacing:.01em;margin-top:17px}
.sk-kont__lingid{margin-top:clamp(12px,1.8vh,20px)}
/* KLIENDI 06.09 (SK-18): "kontaktid kokku rohkem". Reavahe 1,7 -> 1,35
   ja reavahe margin 6 -> 0: e-post ja telefon loevad nuud UHE plokina,
   mitte kahe laialipillutud reana. */
/* 15.09 video: lingid tumedad, kaal ~400-500, tihe tahevahe. */
.sk-kont__lingid a{
  display:block;font:400 clamp(14px,1.53vw,22px)/1.35 var(--sans);letter-spacing:-.045em;
  text-underline-offset:3px;margin-top:0;color:var(--sk-fg);
  transition:color .2s var(--ease);
}
.sk-kont__lingid a:hover{color:var(--sk-fg)}
.sk-jalgi{margin-top:clamp(26px,4.4vh,50px)}
/* Kaal 400: Brittanyl (ja enne Italiannol) on ainult uks kaal ja brauseri
   kunstlik bold rikuks kasitsikirja joone.
   KATRE 11.09: "Tekst sirge" -> videost votetud -4 kraadi kalle maha.
   Brittany J- ja g-silmus ulatuvad reast ~40 px alla ja katsid IG-ikooni
   (moodetud). Alaveeris .75em (sama kirjakraadi jargi) hoiab IG-rea
   tindist 24 px eemal. */
.sk-jalgi__script{font:400 clamp(34px,3.4vw,50px)/1.2 var(--script);margin-bottom:.75em;display:inline-block}
.sk-jalgi__rida{display:flex;gap:10px;align-items:center;margin-top:10px}
/* 15.09 video: IG-ikoon ~35 px ja kasutajanimi ~15-16 px (enne 20 / 11). */
.sk-jalgi__rida a{display:inline-flex;gap:clamp(10px,1vw,14px);align-items:center;font:500 clamp(11px,1.11vw,16px)/1 var(--sans);letter-spacing:.22em;text-decoration:none}
.sk-jalgi__rida svg{width:clamp(20px,2.7vw,39px);height:clamp(20px,2.7vw,39px)}

.sk-vorm{
  position:relative;
  background:var(--sk-valge);color:var(--sk-fg);
  /* Videol vaga suur nurgaraadius (~55-60px @900) ja laius ~31,6%
     vaateavast (~485px) */
  border-radius:clamp(36px,6.5vh,58px);
  /* KATRE 11.09: sirge Brittany "Kirjuta meile !" istub kasti ULASERVAL
     ja tema "meile !" osa on ~100 px korge; ilma lisapolstrita kattis ta
     silti "Nimi:" (moodetud tint 63..163, sildi tekst 152). Lisa on
     ~.48 x kasitsikirja kraad, seega suhe pusib igal laiusel. */
  padding:calc(clamp(32px,3.6vw,46px) + clamp(19px,1.9vw,28px)) clamp(28px,3.2vw,44px) clamp(18px,2.2vw,26px);
  width:100%;max-width:485px;justify-self:end;
  margin-top:30px;
  box-shadow:0 20px 50px rgba(66,68,57,.14);
}
/* Kasitsikiri katab vormi vasakut ulanurka (kavandi paigutus); videol
   suurem (~55px @900), algab taustalt vasakult ja kerge kaldega. */
.sk-vorm__script{
  /* KLIENDI 06.09 (SK-17): "Kirjuta meile rohkem kokku tahed". */
  letter-spacing:-.035em;
  /* KATRE 11.09: "Tekst sirge ja otsaga kastis sees": kalle maha. Algus
     jaab kardinale, lopp kasti sisse (moodetud 1536x760: tint 767..1070,
     kast 889..1374). Lauaarvuti korgus vt @media 881px plokk allpool. */
  position:absolute;top:-34px;left:clamp(-130px,-8vw,-48px);
  font:400 clamp(38px,4vw,58px)/1.15 var(--script);
}
/* KATRE 11.09, lauaarvuti. "Jalgi meie tegemisi" otse IG-riba kohale
   (kliendi markus pildil). Vasak veerg venib kogu rea korguseni ja
   jalgi-plokk surutakse alla (margin-top:auto): IG-rida lopeb vormikasti
   alaservaga samal joonel ja riba algab 24 px allpool.
   "Kirjuta meile !" kasti ulaservale (top -.09em). Enne (top -34px)
   ulatus Brittany tint MENUU peale.
   MOODETUD pikslivahega: 1536x760 tint menuust 8 px ja sildi "Nimi:"
   tekstist 9 px vaba, sektsioon 760; 1440x900 ja 1280x720 samuti vaba
   (900/720). Telefonis ja tahvlis (<=880) virnastatud paigutus jaab. */
@media (min-width:881px){
  .sk-kont__pea{align-self:stretch;display:flex;flex-direction:column}
  .sk-jalgi{margin-top:auto;padding-top:clamp(26px,4.4vh,50px)}
  .sk-vorm__script{top:-.09em}
  /* 15.09 VIDEO SOBITUS: pealkiri madalamale (video y 24,7 %), ainult siis,
     kui vaateava on 760-st korgem (1536x760 juures 0 lisa, muidu ei mahuks).
     "Jalgi" kraad video jargi; IG-riba kohe rea alla (video 11 px). */
  .sk-kontakt{padding-top:calc(var(--sect)*.62 + clamp(0px,(100vh - 760px)*.36,50px))}
  .sk-kont__pea{padding-top:clamp(0px,(100vh - 760px)*.79,111px);min-height:67.9vh}
  .sk-jalgi__script{font-size:clamp(30px,3.06vw,46px);white-space:nowrap}
  /* NB .sk-kontakt ees: pohireegel .ig-riba{margin:...} on failis HILJEM ja
     ilma selleta kirjutas ta selle ule (moodetud margin 23-26 px, sektsioon
     1280x720 juures 721/720 ja pealkiri korgemal). */
  .sk-kontakt .ig-riba{margin-top:8px}
  /* KATRE 16.09 (kontakti kuvatommisel): "Vota uhendust!" ja e-post/telefon
     "Need sama suured, kui teistel lehtedel tavatekst". Tavatekst on
     .sk-stuudio__tekst p ja .sk-teen__list li: clamp(14px,1.18vw,17px),
     1536x760 juures 17 px (enne 22). Kaal ja tahevahe jaavad. */
  .sk-kont__alap,.sk-kont__lingid a{font-size:clamp(14px,1.18vw,17px)}
  /* KATRE 16.09: "Kirjuta meile !" "See ka veidi vaiksemaks": sama kraad
     mis "Jalgi meie tegemisi ..." (1536x760 juures 58 -> 46 px). */
  .sk-vorm__script{font-size:clamp(30px,3.06vw,46px)}
}
/* AUDIT 14.09 (jarelkontroll): 881-1300 px laiusel lopeb fikseeritud
   SK-logo "K" peaaegu seal, kust kontaktipealkiri algab, ja ulemise ploki
   vormipolster tostis pealkirja 10-14 px korgemale. Moodetud pikslivahega
   enne seda parandust: 1180x820 tint KATTUS (10.09 demol 2 px), 1112x834
   2 px (enne 6), 1280x800 6 px (enne 8).
   Vasak veerg saab ulapolstri, mis viib pealkirja logo alaserva alla. Logo
   korgus on 14.4vh, seega soltub polster korgusest (380px - 39vh).
   Sektsiooni korgus EI muutu: jalgi-plokk on margin-top:auto abil all ja
   veerus on 106-138 px vaba ruumi.
   MOODETUD parast: 1280x800 20 px, 1280x720 24, 1300x760 20,
   1180x820 / 1112x834 / 1152x864 / 1024x768 / 900x700 ule 32 px vaba;
   lingid -> jalgi vahe jaab vahemalt 25 px; 1366 ja laiemad muutumata. */
/* 15.09: Noto reakast on Cormoranti omast ~12 px tindist korgem, seega
   logo-polster 380px -> 390px ja lagi 100 -> 110; max() hoiab ka ulemise
   ploki video-polstri. Moodetud (agent, nouded koopia): logo-noue
   1280x800 10.2, 1280x720 17.1, 1180x820 11.5, 1112x834 12.8, 1024x768 29.6. */
@media (min-width:881px) and (max-width:1300px){
  .sk-kont__pea{padding-top:max(clamp(0px,(100vh - 760px)*.79,111px),clamp(0px,calc(390px - 39vh),110px))}
}
.sk-vorm label{display:block;margin-top:16px;font:400 clamp(14px,1.25vw,17px)/1.5 var(--sans);letter-spacing:.04em}
.sk-vorm input,.sk-vorm textarea{
  width:100%;margin-top:3px;
  background:transparent;border:0;border-bottom:1px solid rgba(66,68,57,.28);
  border-radius:0;padding:6px 2px;
  font:300 14px/1.5 var(--sans);color:var(--sk-fg);
}
.sk-vorm input:focus,.sk-vorm textarea:focus{outline:none;border-bottom-color:var(--sk-fg)}
.sk-vorm input:focus-visible,.sk-vorm textarea:focus-visible{
  outline:2px solid var(--sk-fg);outline-offset:3px}
.sk-vorm textarea{resize:vertical;min-height:64px}
.sk-vorm__consent{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font:300 10.5px/1.55 var(--sans);color:var(--sk-muted)}
.sk-vorm__consent input{width:auto;margin:2px 0 0}
.sk-vorm__saada{
  display:block;margin:12px auto 0;padding:9px 22px;
  background:none;border:0;cursor:pointer;
  font:500 clamp(13px,1.1vw,16px)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--sk-fg);
}
.sk-vorm__saada:hover{text-decoration:underline;text-underline-offset:4px}

/* Instagrami riba servast servani (murrab wrap-ist valja taislaiusesse).
   KLIENDI 17.08 OTSENOUE: pildid liiguvad pidevalt paremalt vasakule
   ("uhes teie naidises oli juba nii"). Rada sisaldab kahte identset
   komplekti (teine aria-hidden), animatsioon nihutab -50% ja haakub
   sujuvalt algusesse. Kiirus ~40px/s (videost moodetud suurusjark). */
.ig-riba{
  overflow:hidden;overflow:clip;
  margin:clamp(20px,3.2vh,36px) calc(50% - 50vw) 0;
}
.ig-riba__rada{display:flex;width:max-content;animation:igRada 46s linear infinite}
.ig-riba a{width:clamp(112px,11.1vw,160px);margin-right:5px;display:block;flex:none}
/* 4/3, mitte ruut: kliendi kavandil on IG-riba MADAL riba lehe allservas
   ja ruut tostis kontaktisektsiooni ule vaate.
   15.09 video: plaat ~160x124, seega 160/124 (sektsioon mahub, moodetud). */
.ig-riba img{width:100%;aspect-ratio:160/124;object-fit:cover;display:block}
@keyframes igRada{to{translate:-50% 0}}
@media (prefers-reduced-motion:reduce){
  .ig-riba__rada{animation:none}
}

/* ---------- 12. LIGHTBOX (galerii + video) ---------- */
.lb{
  position:fixed;inset:0;z-index:90;
  background:rgba(20,20,19,.96);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s .35s;
}
.lb.lahti{opacity:1;visibility:visible;transition-delay:0s}
.lb__pea{display:flex;gap:18px;align-items:baseline;padding:20px clamp(20px,4vw,60px) 6px}
.lb__pealkiri{font:400 15px/1.4 var(--serif);color:#f4f4f4}
.lb__idx{font:400 11px/1 var(--sans);letter-spacing:.1em;color:rgba(244,244,244,.6)}
.lb__sulge{
  position:absolute;top:14px;right:18px;z-index:2;
  width:44px;height:44px;background:none;border:0;cursor:pointer;
  color:#f4f4f4;font-size:20px;
}
.lb__lava{
  flex:1;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:8px clamp(56px,7vw,90px);
}
.lb__pilt{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.lb__video{max-width:100%;max-height:100%;border-radius:10px;background:#000}
.lb--video .lb__pisipildid,.lb--video .lb__nool,.lb--video .lb__idx{display:none}
.lb--yks .lb__nool,.lb--yks .lb__pisipildid,.lb--yks .lb__idx{display:none}
.lb__nool{
  position:absolute;top:50%;translate:0 -50%;
  width:46px;height:46px;border-radius:50%;
  background:rgba(244,244,244,.08);border:1px solid rgba(244,244,244,.28);
  color:#f4f4f4;font-size:20px;line-height:1;cursor:pointer;
  transition:background .18s;
}
.lb__nool:hover{background:rgba(244,244,244,.18)}
.lb__nool--eelmine{left:clamp(8px,1.6vw,26px)}
.lb__nool--jargmine{right:clamp(8px,1.6vw,26px)}
.lb__pisipildid{
  /* `safe center`, mitte `center`. Kui sisu on konteinerist laiem, jagab
     tavaline center ulejaagi MOLEMALE poole, aga scrollLeft ei saa minna
     alla nulli: telefonis jaid kaks esimest pisipilti jaadavalt vasakule
     kattesaamatuks. `safe` langeb ulevoolu korral start-i peale.
     Vanas brauseris, mis `safe` ei tunne, kukub deklaratsioon ara ja
     tulemus on vasakjoondus, mis on samuti keritav. */
  display:flex;gap:8px;justify-content:safe center;flex-wrap:nowrap;overflow-x:auto;
  padding:12px clamp(20px,4vw,60px) 18px;
}
.lb__pisi{
  flex:0 0 auto;width:64px;height:46px;
  padding:0;border:1px solid transparent;border-radius:7px;overflow:hidden;
  background:none;cursor:pointer;opacity:.55;
  transition:opacity .18s,border-color .18s;
}
.lb__pisi img{width:100%;height:100%;object-fit:cover;display:block}
.lb__pisi.aktiivne,.lb__pisi:hover{opacity:1;border-color:rgba(244,244,244,.6)}

/* ---------- 13. KÜPSISERIBA ---------- */
.kupsis{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:none;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:rgba(31,31,30,.97);color:#f4f4f4;
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px 26px;
  font:300 12px/1.6 var(--sans);
  max-width:860px;margin:0 auto;
}
.kupsis.nahtav{display:flex}
.kupsis p{max-width:56ch}
.kupsis a{color:inherit}
.kupsis__nupud{display:flex;gap:8px}
.kupsis__nupp{
  padding:9px 16px;border-radius:999px;cursor:pointer;
  background:none;border:1px solid rgba(244,244,244,.4);color:#f4f4f4;
  font:500 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
}
.kupsis__nupp--jah{background:#f4f4f4;color:#222;border-color:#f4f4f4}
.kupsis__nupp--jah:focus-visible{outline-color:#f4f4f4;outline-offset:4px}

/* ---------- 14. ALAMLEHED (tuupprojekt, privaatsus, kasutusjuhend, 404) ---------- */
.leht{padding:clamp(96px,14vh,150px) var(--gut) var(--sect)}
.doc{
  background:var(--cream);color:var(--cream-fg);
  border-radius:var(--r);
  padding:clamp(24px,4vw,48px);
  max-width:840px;margin:0 auto 26px;
  font:300 14px/1.8 var(--sans);
}
.doc .silt{color:var(--cream-muted)}
.doc h2{font:400 19px/1.4 var(--serif);margin:26px 0 10px}
.doc p{margin:10px 0}
.doc ul{margin:10px 0;padding-left:20px}
.doc li{margin:6px 0}
.doc .muted{color:var(--cream-muted)}

/* Tuupprojekti alamleht */
.tp-pea{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:center}
.tp-pea .lede{color:var(--muted)}
.tp-pea h1{font:300 clamp(30px,4vw,54px)/1.1 var(--serif)}
.tp-spek{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin-top:clamp(22px,4vh,36px)}
.tp-spek div{border-top:1px solid var(--line);padding-top:10px}
.tp-spek dt{font:500 9.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tp-spek dd{margin:5px 0 0;font:400 15px/1.4 var(--sans)}
.tp-pea__pilt{border-radius:var(--r);overflow:hidden;cursor:pointer}
.tp-pea__pilt img{display:block;width:100%;height:auto}
.tp-plaan{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,70px);
  margin-top:var(--sect);align-items:start;
}
.tp-plaan__joonis{background:#fff;border-radius:var(--r);padding:clamp(14px,2vw,26px);cursor:pointer}
.tp-plaan__joonis img{display:block;width:100%;height:auto}
.tp-plaan__joonis figcaption{font:300 11px/1.5 var(--sans);color:rgba(43,43,43,.6);text-align:center;padding-top:8px}
.tp-tabel table{width:100%;border-collapse:collapse;font:300 13px/1.5 var(--sans)}
.tp-tabel table+table{margin-top:22px}
.tp-tabel th{font:500 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 8px}
.tp-tabel th+th,.tp-tabel td+td{text-align:right}
.tp-tabel td{border-top:1px solid var(--line);padding:8px 0}
.tp-tabel tfoot td{font-weight:500;border-top:1px solid var(--line2)}
.tp-cta{
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--cream);color:var(--cream-fg);
  border-radius:var(--r);
  padding:clamp(24px,3.5vw,44px);
  margin-top:var(--sect);
}
.tp-cta .lede{color:var(--cream-muted)}
/* Kliendi 03.08 alamlehe kohta: "sealt edasi scrollides jalle need pildid
   ebaproportsionaalselt suured ja osaliselt info koik kadunud". Pohjus:
   veerud olid poole lehe laiused ja komposiit on PUSTFORMAADIS, seega
   kaart kasvas ule vaate ja infoplokk jai alla. Nuud fikseeritud
   pildiraam (nagu avalehel) ja kitsam lava. */
.tp-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);align-items:start;
  max-width:760px;
}
.tp-grid .tp-kaart__pilt{display:block;aspect-ratio:4/5;overflow:hidden}
.tp-grid .tp-kaart__pilt img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.tp-kaart__rida{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tp-kaart__vaata{font:400 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-muted)}
.tp-kaart__meta{display:block;font:300 12px/1.5 var(--sans);color:var(--cream-muted);margin-top:6px}
a.tp-kaart{display:block;text-decoration:none}

/* 404 */
.nf{min-height:72svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:0 var(--gut)}
.nf__kood{font:300 clamp(90px,16vw,190px)/1 var(--serif);color:rgba(244,244,244,.14)}

/* ---------- 15. REVEAL ---------- */
/* Peitmine AINULT html.js-reveal all (nullspetsiifilisusega :where, 9.15).
   Avamine .sees klassiga. Kui JS sureb, turvavork voi noscript avab. */
/* Kliendi 03.08 kordas neli korda: "Need kastid voiks lehele ILMUDA nagu
   Canva naidisel. puuavad rohkem tahelepanu." Canva "appear" on skaala +
   tous, mitte pelk hajumine. `scale` on ERALDI omadus (mitte transform),
   seega ta ei kakle `translate`-ga ega hover-transformidega. */
/* SPETSIIFIKUS, mitte :where. Nullspetsiifikus tundus turvaline, aga
   `transition` on UKS omadus: iga komponendireegel, mis on tugevam kui
   (0,1,0), ei taiendanud siinset ulemineku-loendit vaid ASENDAS selle
   tervikuna. Nii jai teenuste loendil alles ainult `color` ja kogu
   ilmumine kadus ara. Nuud on peitmisreegel (0,2,1) ja avamine (0,3,1),
   nii et jarjekord on uheselt paigas.
   VIIDE tuleb muutujast --viide, mitte otse transition-delay-st: nii
   viivitub AINULT ilmumine. Varem parisid sama viivituse ka hover-
   uleminekud, nii et kaardi tous algas veerand sekundit hiljem. */
html.js-reveal [data-reveal]{
  opacity:0;translate:0 30px;scale:.965;
  transition:
    opacity .78s var(--ease),
    translate .78s var(--ease),
    scale .78s var(--ease),
    transform .35s var(--ease),
    box-shadow .35s var(--ease);
  transition-delay:var(--viide,0ms),var(--viide,0ms),var(--viide,0ms),0ms,0ms;
}
html.js-reveal [data-reveal="left"]{translate:-34px 0}
html.js-reveal [data-reveal="right"]{translate:34px 0}
html.js-reveal [data-reveal].sees{opacity:1;translate:0 0;scale:1}

/* MAGNUS 09.09: "zoomid pole uldse smoothid ja suhteliselt laggised ja
   imelikud, ei ole nagu videol."

   Pohjus oli moodetav: valdkonnakaardi peal jooksis KAKS SKAALAT korraga.
   Reveal skaleeris vanemat (.vald__item) 0,965 -> 1 tugeva ease-out'iga
   0,78 s jooksul, kaart ise 1 -> 1,10 lineaarselt 4 s jooksul. Skaalad
   KORRUTUVAD, ja kuna --ease surub peaaegu kogu oma kaigu algusesse,
   nagi kasutaja jonksu ja siis roomamist.

   Moodetud kaardi paris laius ekraanil:
     0-300 ms   +6,7  +5,0  +3,1  +2,0 px kaadris   <- jonks
     300 ms+    +0,8 px kaadris kuni lopuni         <- roomamine
   Videos on tempo algusest lopuni uhesugune.

   Seega: nendel kahel elemendil EI OLE reveal-skaalat. Sissetulek jaab
   alles (lapsus ja ulespoole nihe), aga SUURUST juhib ainult uks
   animatsioon. */
html.js-reveal .vald__item[data-reveal],
html.js-reveal .meist__kaart[data-reveal]{scale:1}
[data-reveal].sees{opacity:1;translate:0 0;scale:1}

/* ---------- 15.2 KIRJUTUSMASIN (kliendi 17.08 videote liikumiskeel) ----------
   main.js plokk 11 tykeldab [data-tryki] tahtedeks (<span data-t>) ja
   [data-sonad] sonadeks (<span data-s>); viite arvutab JS ja kirjutab
   inline transition-delay'sse. Peitmine on SAMA turvaloogikaga mis
   reveal: ainult html.js-reveal all, ja spanid on olemas ainult siis,
   kui JS jouds tykeldamiseni. Kaivitus: .sees kas elemendil endal
   (hero servatekstid) voi esivanemal (data-reveal read). */
html.js-reveal [data-t]{opacity:0;transition:opacity .12s linear}
html.js-reveal .sees [data-t],
html.js-reveal [data-tryki].sees [data-t]{opacity:1}
html.js-reveal [data-s]{
  display:inline-block;opacity:0;translate:0 10px;
  transition:opacity .3s var(--ease),translate .3s var(--ease);
}
html.js-reveal .sees [data-s],
html.js-reveal [data-sonad].sees [data-s]{opacity:1;translate:0 0}

/* ---------- 15.5 SEKTSIOONI PEA KOMPONEERUB ----------
   Kliendi 04.08 PS: "pisikesed nuansid nagu tekstide liikuvus jne, mis
   kogu uldvisuaalile annavad oluliselt juurde". Varem ilmus kogu sektsioon
   uhe plaksuga. Nuud tuleb kaigepealt pealkiri ja alles siis alapealkiri;
   sisu (loend, kaardid) jargneb sellele oma viitega markupis. Sammud on
   TAHTLIKULT vaikesed (60-80 ms): eesmark on komponeeritud tunne, mitte
   nahtav slaidiesitlus. */
.sekt h2[data-reveal],.sk-sekt h2[data-reveal]{--viide:.06s}
.sekt .lede[data-reveal],.vald__pea .lede[data-reveal]{--viide:.14s}
.vald__pea h2[data-reveal]{--viide:.06s}

/* ---------- 15.7 UKS SEKTSIOON KORRAGA (kliendi 06.09 noue) ----------
   Klient: "Ilmuda sisse tulles ja kaduda ara minnes", "nii et oleks
   visuaalselt 1 leht korraga naha". Magnus 06.09 tapsustus: "fookus
   keskele, ehk uks sektsioon korraga et ei ole teisi sektsioone samal
   ajal naha" ja "sa saad kerida ikka alla natuke enne kui paris sellele
   sektsioonile laheb, see on imelik".

   KOLM OSA, mis peavad KOIK koos olema. Esimene katse (06.09 hommik)
   tegi ainult kolmanda ja see oligi see "imelik" tunne:

   1) SEKTSIOON TAIDAB EKRAANI. Ilma selleta ei aita ukski snap: kui
      sektsiooni sisu on 604 px ja vaateava 760, paistab kinnitatud
      asendis jargmise sektsiooni ulaosa (moodetud: teenuste all paistis
      "02 TEENUSED" riba). Klient nagi tapselt seda.
   2) SISU ON PUSTI KESKEL. `align-content:safe center`. SAFE on siin
      kohustuslik: kui sisu peaks olema vaateavast korgem, langeb
      joondus tagasi algusesse, mitte ei loika ULAOSA ara.
   3) KINNITUMINE ON MANDATORY, mitte proximity. Proximity kinnitus
      ainult siis, kui kerimisliigutus juhtus lopema piiri lahedal, ehk
      lubas jaada kahe sektsiooni vahele.

   ANKRUD: snap kakleb JS-kerimisega (main.js plokk 2, rAF). animKeri
   lulitab snapi arvutuse ajaks valja ja paneb parast tagasi. ARA lisa
   siia scroll-behavior:smooth, vt 9.3.

   MOBIILIS MITTE. Kuni 880 px on sektsioonid virnastatud ja sisust
   korgemad; taiskorgus ja kinnitumine jataksid sisu kattesaamatuks.
   Sama reduced-motion korral. */
@media (min-width:881px){
  main > section{
    min-height:100vh;          /* varuvariant vanemale brauserile */
    min-height:100svh;
    /* PUSTI TSENTREERIMINE PLOKKPAIGUTUSES, mitte grid ega flex.
       See on siin oluline ja sai kalli oppetunni hinnaga selgeks.
       `display:grid` (esimene katse) muutis KOIK sektsiooni lapsed
       grid-elementideks: iga sektsiooni sisemine paigutus on erinev
       (Meist kaart+foto, teenused lava, kontakt kaheveeruline), nii et
       `.wrap{margin:0 auto}` hakkas end tsentreerima raja sees, mitte
       sektsioonis, ja pealkirjad laksid 228 px joonelt maha: moodetud
       441 / 255 / 228 / 554 / 268 px viie sektsiooni peale.
       `align-content` tootab alates 2024. aastast ka plokkkonteineril:
       lapsed jaavad TAVALISSE plokkvoogu (miski nende sees ei muutu) ja
       tsentreeritakse ainult puutasandil. `safe` tagab, et vaateavast
       korgem sisu ei kaotaks ULAOSA. */
    align-content:safe center;
  }
}
@media (min-width:881px) and (prefers-reduced-motion:no-preference){
  /* KATRE 11.09: "veebilehitsejas ei avanenud Tuupprojektid".
     MOODETUD demo peal 1536x760: /tuupprojektid/epm-1 avanes scrollY 1425
     peal (lehe LOPUS) ja scrollTo(0) viskas tagasi 1425 peale. Kliendi
     tommisel oli seetottu ainult "Teised tuupprojektid" ja jalus.
     Pohjus: alamlehtedel (main.leht) ei ole `main > section`-kinnituspunkte,
     ainus kinnituspunkt oli 10.09 lisatud `.jalus{scroll-snap-align:end}`,
     ja `mandatory` lukustas kerimise selle kulge. Telefonis kinnitust ei
     ole, seeparast seal tootas.
     Kinnitus kaib nuud AINULT lehel, millel on paris sektsioonid (avaleht,
     SK). Vanem brauser ilma :has() toeta kerib lihtsalt vabalt. */
  html:has(main > section){scroll-snap-type:y mandatory}
  .hero,.sk-hero,main > section{scroll-snap-align:start}
  /* MAGNUS 10.09: "footerisse ei saa enam scrollida."
     MOODETUD: kerimine jai seisma tapselt 99 px enne lehe lopgu, mis on
     tapselt jaluse korgus (avaleht scrollY 4561/4660, SK 2280/2379).
     Pohjus: `mandatory` NOUAB, et keriti jaaks alati mone kinnituspunkti
     peale, aga jalus ei olnud kinnituspunkt. Brauser tombas kerimise
     viimase sektsiooni peale tagasi ja jalus jai kattesaamatuks.
     Lahendus EI OLE `proximity`: see lohuks "uks sektsioon korraga"
     motte, mida klient 06.09 palus (ja mida nouded 42 ja 64 valvavad).
     Jalus saab OMA kinnituspunkti, aga `end`-joondusega, mitte `start`-
     joondusega: `start` tostaks 99 px korguse jaluse vaateava ULLA
     serva ja jataks ekraani muidu tuhjaks. `end` tahendab, et jaluse
     alaserv joondub vaateava alaservaga, ehk kerimine peatub lehe
     paris lopus ja naha jaab viimane sektsioon KOOS jalusega. */
  .jalus{scroll-snap-align:end}
}

/* ---------- 16. MOBIIL ---------- */
/* 881-1180 px: tahvel lamavas ja vaike sulearvuti. Video jaab KORVALE
   (virnastatuna kasvas sektsioon 984 px peale, mis ei mahtunud 768 px
   vaatesse), aga kaart kitseneb, et nad ei kataks teineteist. */
@media (min-width:881px) and (max-width:1180px){
  .meist__kaart{max-width:62%}
  .meist__kaart p{max-width:52ch}
  /* Sama kattuvusankur mis baasil, kitsama kaardi (62%) jargi */
  .meist__video{left:calc(62% - clamp(40px,4vw,64px));width:auto;right:calc(-1*clamp(0px,1.4vw,20px));bottom:-28px}
  .meist__ghost{font-size:clamp(70px,8vw,110px);bottom:clamp(150px,19vw,200px)}
}
@media (max-width:880px){
  /* MAGNUS 07.09: "500+ peab olema nahtav ka telefonis".
     Varem oli siin display:none, sest absoluutselt paigutatud number jai
     laiuti virnastatud kaardi TAHA ja teda ei olnud nagunii nada. Nuud on
     ta STAATILINE ja seisab kaardi kohal. DOM-is on ta juba kaardi ees
     (index.php:106), seega jarjekorda muuta ei ole vaja. Negatiivne
     alumine veeris hoiab alles lauaarvuti motte, et kaart katab numbri
     alaosa (EP-6/EP-7). Kontuur 1,5 -> 1,2 px, muidu on ta vaiksema
     kirja juures jamedavoitu. */
  .meist__ghost{
    display:block;position:static;text-align:right;
    font-size:clamp(64px,21vw,112px);
    margin:0 0 clamp(-26px,-4.5vw,-14px);
    -webkit-text-stroke-width:1.2px;
  }
  .meist__video{position:static;width:100%;max-width:560px;margin-top:26px;bottom:auto}
  .meist__statid{margin-top:clamp(30px,5vh,48px)}
  /* Kitsal ekraanil ei ole ruumi kaardi negatiivseks niheks (moodetud:
     390 px juures oleks kaardi vasak serv -6 px, ehk ulevool). Seal on
     paigutus niikuinii virnastatud, seega joondus ei ole teema. */
  .meist__kaart{margin-left:0}
}
@media (max-width:880px){
  .rail,.sk-rail{display:none}
  .teen__joonis{display:none}
  .vald__grid{grid-template-columns:minmax(0,520px);justify-content:center}
  .vald__all{grid-template-columns:1fr auto}
  .vald__logo,.vald__item:nth-child(2) .vald__logo{height:42px}
  .teen__grid{grid-template-columns:1fr;max-width:560px}
  .teen__grid ol:first-child li:last-child{border-bottom:1px solid var(--line)}
  .tuup__lava{grid-template-columns:minmax(0,440px);justify-content:center;align-items:start}
  .tuup__pea{display:block}
  .vald__item:nth-child(1){margin-top:0}
  .sk-video{margin-right:0;border-radius:var(--r-s)}
  .sk-kont__pea{padding-left:0}
  .sk-kont__lingid{margin-left:0}
  .tood__grid{grid-template-columns:repeat(2,1fr)}
  .kont__grid{grid-template-columns:1fr}
  .vorm{justify-self:start}
  .sk-stuudio__grid,.sk-teen__grid,.sk-kont__grid{grid-template-columns:minmax(0,560px);justify-content:center}
  /* Desktopi width-laiendused (parempoolne ulevool) kitsal maha */
  .sk-stuudio__grid,.sk-kont__grid{width:100%}
  .sk-portree{max-width:320px;align-self:center}
  .sk-kontakt::before{display:none}
  .sk-vorm{justify-self:start;margin-top:44px}
  /* Marquee jookseb ka kitsal ekraanil (kliendi 17.08 soov: pildid
     liiguvad); kasitsi kerimist pole vaja, riba on lopmatu tsukkel. */
  .ig-riba a{width:96px}
  .tp-pea,.tp-plaan{grid-template-columns:1fr}
  .tp-grid{grid-template-columns:1fr}
  .kroom__logo img{height:44px}
  .sk-kroom__logo img{height:52px}
  .sk-menyy{gap:12px}
  .sk-menyy a{letter-spacing:.14em;font-size:9.5px}
  /* Kitsal ekraanil satub kroom otse foto peale ja tume kiri kaob tumedale
     pildile. Pehme greige haue hoiab menuu loetavana, ilma et desktopi
     puhas vaade muutuks. */
  .sk-kroom{
    background:linear-gradient(180deg,rgba(227,226,222,.94) 45%,rgba(227,226,222,0));
    padding-bottom:30px;
  }
}
@media (max-width:880px){
  /* Fikseeritud logo on sisu peal: sektsioonid vajavad rohkem ohku ulal,
     muidu satub pealkiri logo alla. */
  .sekt{padding-top:104px}
  .sk-sekt{padding-top:112px}
  /* Kitsal ekraanil ei ole sektsioon enam vaateava korgune, seega
     alaserva nool satub sisu (Katre portree) PEALE: moodetud 18,6 px
     kattuvus 360x640 juures ja ringi kontrast kukkus 2,1 -> 1,13:1,
     sest tume margis istus tumedal fotol. Anname noolele oma ruumi
     kreemi peal. Arv tuleb noole enda moodust, et ta ei saaks noole
     suuruse muutmisel lahku minna. */
  .sk-sekt--nool{
    padding-bottom:calc(var(--nool-d) + clamp(16px,3vh,30px) + 20px);
  }
}
/* TAHVEL PUSTIS (641-880 px): kaks valdkonnakaarti korvuti ja kolm
   tuupprojekti reas mahuvad hasti ara. Uheveeruline paigutus tegi
   tuupprojektide sektsioonist 2165 px pika tunneli. */
@media (min-width:641px) and (max-width:880px){
  .vald__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:660px}
  /* font-size EI ole siin: baasreegel annab 26 px kogu ulatuses.
     Vana clamp(18px,3.4vw,26px) andis 641 px juures 21,8 px ehk
     kirjakraad kukkus keset oma enda vahemikku. */
  .vald__nimi{left:18px;bottom:14px}
  .vald__kirjeldus{font-size:11.5px}
  .vald__logo,.vald__item:nth-child(2) .vald__logo{height:36px}
  .vald__all{min-height:44px}
  .tuup__lava{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none;align-items:end;
  }
  /* display:contents, mitte grid-column:1/-1. Kaart 1 ON .tuup__pea SEES,
     seega pead ule kolme veeru venitades venis kaart 1 temaga kaasa ule
     kogu laiuse ja kaardid 2-3 kukkusid jargmisele reale, kolmas veerg
     jai tuhjaks. Nuud saavad pealkiri, sissejuhatus ja kaart 1 otse lava
     ruudustiku liikmeteks: kolm kaarti on korvuti ja vordse laiusega. */
  .tuup__pea{display:contents}
  .tuup__pea h2{grid-column:1 / -1}
  .tuup__pea .lede{grid-column:1 / -1;margin-bottom:clamp(14px,2.4vh,26px)}
  .tp-kaart__info{padding:12px 14px 14px}
  .tp-kaart__nimi{font-size:14px}
  .tp-kaart__spek div{font-size:10.5px}
  .tood__grid{gap:14px 18px}
  .tp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Slaidiindikaator on seotud hero VIDEOGA, mida alla 900 px ei laadita
   (vt main.js plokk 3). Ilma videota on ta tuhi kaunistus, mis lisaks
   pigistas noole ja metarea kokku. Seega alla 900 px maha. */
@media (max-width:899px){
  .hero__idx{display:none}
  /* Moodetud 768 px juures: keskel olev nool sattus metarea "20+ AASTAT
     KOGEMUSI" peale. Nool paremasse serva, kus indikaatorit enam ei ole.
     translate:0 tuhistab baasreegli -50% tsentreerimisnihke. */
  .hero__nool{left:auto;right:18px;margin-left:0;translate:0 0}
  .hero__meta{max-width:62vw;flex-wrap:wrap}
}
/* ---------- 16.7 TELEFON: SK HERO ALASERV ---------- */
/* MAGNUS 09.09: "optimiseeri lehed telefoni jaoks, hetkel veits imelikud."
   Lauaarvutis on metarida ja nool TEADLIKULT uhel joonel (SK-3/SK-5), aga
   KORVUTI: rida vasakus servas, nool keskel. Kitsal ekraanil venib rida
   ule poole laiuse ja nool joondub otse teksti PEALE.
   MOODETUD (tools/mobiil_hero.py, Range'i tekstiread, mitte plokikastid):
   kattuvus kuni 11x16 px; katki kuni 680 px, puhas alates 700 px.
   Siin ei ole "uhel joonel" enam moistlik, sest korvuti nad ei mahu:
   virnastame, rida noole KOHALE ja keskele.
   NB tsentreerimine kaib left:0 + right:0 + text-align, MITTE left:50%.
   left:50% ilma right'ita jatab automaatse laiusega elemendile ainult
   POOLE konteineri laiusest (moodetud: 180 px, kuigi rida vajab 279 px),
   ehk rida murdus kaheks ja tahed sattusid uksteise peale. Vahe ei paista
   koodist valja, ta paistab ainult moodust. */
@media (max-width:699px){
  .sk-hero__meta{
    left:0;right:0;translate:0 0;text-align:center;
    padding:0 clamp(20px,6.6vw,101px);
    bottom:calc(var(--nool-b) + var(--nool-d) + 12px);
  }
}
@media (max-width:600px){
  .tood__grid{grid-template-columns:1fr}
  .hero__meta{font-size:9px;letter-spacing:.14em;gap:8px;flex-wrap:wrap;max-width:58vw}
  .hero__logo{width:min(74vw,320px)}
  .sk-hero__tagline{display:none}
  /* Kitsal ekraanil laiem ala ja vaiksem kirjakraad, muidu murduks
     kaldkirjaplokk kolmele-neljale reale ja jookseks servast valja. */
  .sk-hero__slogan{left:9vw;right:5vw;top:34vh;font-size:clamp(44px,14vw,64px)}
  .kupsis{left:10px;right:10px;bottom:10px}
}

/* ---------- 16.5 PUUTESEADMED: tabamisala ---------- */
/* Moodetud: kontaktilingid 20 px, jaluse lingid 11-13 px, IG ikoon 21 px.
   Puutega on need liiga vaiksed (WCAG 2.2 min 24x24). Kasvatame ainult
   TABAMISALA, visuaal jaab samaks. */
/* Ikoonilinkide tabamisala on TINGIMUSETA vahemalt 44x44 (WCAG 2.2 min on
   24x24, Apple soovitab 44). Ei sotlu `pointer:coarse` tuvastusest, sest
   hubriidseadmed raporteerivad `fine`, aga neid kasutatakse sormega.
   Visuaal ei muutu: kasvab ainult klikitav ala. */
.kont__ryhm .ig,.sk-jalgi__rida a,.sk-ig-nurk,.jalus__lingid .ig{
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;
}
.jalus__lingid a{
  padding:9px 0;display:inline-flex;align-items:center;min-height:38px;
}
.kont__ryhm a,.sk-kont__lingid a{min-height:32px;display:flex;align-items:center}
@media (pointer:coarse){
  /* Puutel veel ohkem: tekstilingid taismootu, pisipildid suuremaks.
     Moodetud lahtekohad: SK menuu 30 px, nool 26x34, SAADA 100x30. */
  /* MAGNUS 09.09 telefonivoor. Siin oli varem
       .kont__ryhm a,.sk-kont__lingid a{min-height:44px;padding:6px 0;margin:-6px 0}
     ja see oli VALE. 44 px kast ei mahu 38-40 px sammu sisse, seega
     negatiivsed veerised tombasid naabrid uksteise PEALE: moodetud
     kattuvus EP-l 4 ja 2 px, SK-l 6 px (tools/mobiil_sihikud.py).
     Kattuv puutekast tahendab riba, kus sorm tabab valet rida -- see on
     halvem kui vaiksem kast. Kontaktid on tihedad Magnuse enda soovil
     (EP-22), ehk sammu suuremaks ajada ei saa. Seega kast TAIDAB sammu
     ara, aga ei roni naabri peale: alusreegel annab 32 px, mis on WCAG
     2.2 AA miinimumist (24x24) selgelt ules. */
  .kont__ryhm a,.sk-kont__lingid a{padding:0}
  /* Vormivaljad: moodetud EP 40 px ja 41 px (select), SK 34 px. Sormega
     on need madalad; klaviatuuri avamine on lehe koige olulisem klikk. */
  .vorm input,.vorm select,.vorm textarea,
  .sk-vorm input,.sk-vorm textarea{min-height:44px}
  /* Markeruut oli 13x13, ehk alla WCAG 2.2 AA miinimumi. Siin EI OLE
     tegemist ainult tabamisalaga: ruut ise on nii vaike, et teda ei ole
     sormega nada. Kasvatame paris mootu. */
  .vorm__consent input,.sk-vorm__consent input{
    width:24px;height:24px;flex:0 0 auto;margin-top:0;
  }
  /* Reasisene link lause sees on WCAG-i erand, aga 13 px korgune sihik on
     telefonis ikka nadal. Reasisese elemendi pusipolster kasvatab AINULT
     tabamisala, reakorgus ei muutu ja tekst ei liigu. */
  .vorm__consent a,.sk-vorm__consent a{padding-block:6px}
  /* Jaluse lingid olid 38 px. */
  .jalus__lingid a{min-height:44px;padding:12px 0}
  .rippm a{padding:14px 0}
  .kupsis__nupp{padding:12px 18px}
  .lb__pisi{width:72px;height:52px}
  .sk-menyy a{min-height:44px;display:inline-grid;align-content:center;padding:0 2px}
  .sk-vorm__saada{min-height:44px;padding:12px 26px}
  .nupp{min-height:44px}
  .tp-kaart__nimi a{display:inline-block;padding:6px 0}
  .lb__sulge,.lb__nool{min-width:48px;min-height:48px}
}
/* Kerimisnool on ikoonlink: tabamisala tingimusteta 44x44 */
.sk-nool,.hero__nool{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sk-nool--tume{display:inline-flex}

/* ---------- 16.6 LUHIKE VAADE (sulearvuti 1280x720 jms) ---------- */
/* Moodetud: tehtud tood 732 ja kontakt 742 px 720 px vaates. Tihendame
   ainult vertikaalselt ja ainult siis, kui vaade on madal. */
/* NB lavi on 730, mitte 760: kliendi enda ekraan ON 760 px korge ja seal
   ei ole tihendust vaja (sektsioonid mahuvad niikuinii). 760 juures
   kitsendas see reegel tehtud toode vorku 1080 -> 960 px, mis lohkus
   pealkirjajoone loogika (kaardid olid pealkirjast kitsamad). */
@media (min-width:1081px) and (max-height:730px){
  .tood__grid{max-width:960px;gap:14px 30px;margin-top:clamp(16px,2.6vh,28px)}
  .kont__kontaktid{margin-top:clamp(24px,4vh,40px)}
  .kont__firma{margin-top:clamp(26px,4.4vh,44px)}
  .vorm{padding:20px 24px}
  .vorm textarea{min-height:66px}
}

/* ---------- 16.7 TELEFON: KONTAKT JA JALUS ----------
   Desktopi kaheveeruline kontakt kukkus kitsal ekraanil lohki: kaks
   kontaktirühma korvuti 390 px sees olid rebenenud, IG-ikoonid rippusid
   tekstist eraldi, plokkide vahel olid ebavordsed augud ja kogu sektsioon
   luges vasakule kuhjatuna. Kliendi enda keel on "kompaktselt tsentris",
   seega telefonis on kontakt UHEVEERULINE JA TSENTREERITUD. */
@media (max-width:640px){
  .kont__grid{gap:26px}
  .kont__pea{text-align:center}
  .kont__pea h2{max-width:19ch;margin:0 auto}
  .kont__alap{margin-top:10px}
  .kont__kontaktid{
    flex-direction:column;align-items:center;
    gap:26px;margin-top:30px;
  }
  .kont__ryhm{display:flex;flex-direction:column;align-items:center}
  .kont__ryhm h3{margin-bottom:2px}
  .kont__ryhm a{justify-content:center;margin-top:2px}
  .kont__ryhm .ig{margin-top:4px}
  .kont__firma{margin-top:30px;text-align:center}
  .vorm{max-width:none;justify-self:stretch}

  /* skRUUM: sama pohimote. NB kasitsikiri oli absoluutselt vasakule
     nihutatud (-56px), mis kitsal ekraanil VIIS TA KAADRIST VALJA
     (moodetud: "Kirjuta meile !" algas negatiivselt x-lt). */
  .sk-kont__pea{text-align:center}
  .sk-kont__pea h2{margin:0 auto}
  .sk-kont__lingid{margin-left:0;text-align:center}
  .sk-kont__lingid a{justify-content:center}
  .sk-jalgi{text-align:center;margin-top:30px}
  .sk-jalgi__rida{justify-content:center}
  .sk-vorm{max-width:none;margin-top:46px}
  .sk-vorm__script{left:0;right:0;top:-34px;text-align:center}

  /* JALUS: logo peal, tekst all, lingid tsentreeritud reana. Varem olid
     logo ja tekst korvuti (tekst murdus kahele reale) ning lingirida
     murdus nii, et "Veebileht: Veebimets" jai uksinda vasakusse serva. */
  .jalus{padding:26px var(--gut) 30px}
  .jalus__sisu{flex-direction:column;align-items:center;text-align:center;gap:18px}
  .jalus__brand{flex-direction:column;gap:10px}
  .jalus__brand img{height:42px}
  /* Lingirida murdus varem nii, et IG-ikoon jai teise rea ETTE ja
     "Veebileht: Veebimets" tema korvale, mis luges juhusliku katkena.
     Nuud kaivad tekstilingid oma reas ja ikoon tuleb ALATI viimasena
     omaette reale. */
  .jalus__lingid{justify-content:center;gap:8px 22px}
  .jalus__lingid .ig{order:9;flex-basis:100%;justify-content:center;margin-top:2px}
}

/* ---------- 17. LIIKUMISE VAIGISTUS ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__nool,.sk-nool{animation:none}
  .vald__kaart,.vald__kaart img,.meist__kaart::before{animation:none}
  /* Peab olema sama tugev kui peitmisreegel ules (0,2,1), muidu ei
     tuhista ta enam midagi. */
  html.js-reveal [data-reveal]{opacity:1;translate:0 0;scale:1;transition:none}
  html.js-reveal [data-t],html.js-reveal [data-s]{opacity:1;translate:0 0;transition:none}
  .tood-kaart img,img.tood-kaart__alt,.tp-kaart,.nupp{transition:none}
  .rist,.rist::before,.rist::after{transition:none}
}