/* Puhas — Vuugi maailm, kokku tõmmatud. Üks vuugijoon, null nurka, null varju. */
:root{
  --tint:#1B3A30;       /* sügavroheline tint */
  --tint-2:#5B7668;     /* vaiksem roheline, 4.6:1 paberil */
  --hall:#E6E7E4;
  --paber:#F7F6F2;
  --must:#222222;
  --tekst-2:#43504A;    /* teisene tekst, 8.9:1 paberil */
  --vuuk:#D6D8D1;       /* juuksekarva joon = vuuk */
  --serv:clamp(1.25rem,5vw,5rem);
  /* Kleepuva päise kõrgus — päisele antud fikseeritult, et avaleht
     saaks selle vaateaknast maha lahutada ja täita ekraani täpselt. */
  --pea-korgus:5rem;
  --max:1480px;
  --f:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f);background:var(--paber);color:var(--must);
  /* Suurem põhikiri kui vuugis: lugeja on 40+ ja sageli telefonis. */
  font-size:clamp(1.0625rem,1rem + .32vw,1.1875rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--tint);outline-offset:3px}

.jata-vahele{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tint);color:#fff;
  padding:.9rem 1.4rem;text-decoration:none;font-weight:700}
.jata-vahele:focus{left:0}

/* ── PÄIS: neli linki ja mitte midagi muud ─────────────────────────── */
.pea{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  gap:clamp(1rem,3vw,3rem);padding-inline:var(--serv);height:var(--pea-korgus);
  background:var(--paber);border-bottom:1px solid var(--vuuk)}
.logo{text-decoration:none;margin-right:auto;font-weight:700;
  letter-spacing:.12em;font-size:clamp(1rem,1.8vw,1.2rem)}
/* Väiketähtedes menüü: harvendatud versaalkiri on väikeses mõõdus
   vanemale silmale kehv, ja see leht on tehtud vanemale silmale. */
.nav{display:flex;gap:clamp(1.25rem,2.5vw,2.5rem)}
.nav a{text-decoration:none;font-size:1.0625rem;font-weight:500;color:var(--tekst-2);
  padding-block:.55rem;position:relative;transition:color .18s}
.nav a:hover{color:var(--tint)}
.nav a[aria-current]{color:var(--tint);font-weight:700}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-.05rem;
  height:2px;background:var(--tint)}
@media(max-width:860px){.nav{display:none}}

.menyy-nupp{display:none;align-items:center;gap:.6rem;background:none;
  border:1px solid var(--vuuk);padding:.65rem 1rem;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:500;color:var(--must);min-height:2.75rem}
.menyy-nupp__triibud{display:grid;gap:4px}
.menyy-nupp__triibud span{display:block;width:18px;height:2px;background:var(--must)}
@media(max-width:860px){.menyy-nupp{display:flex}}
/* Menüü on kile päise all, mitte plokk voos: kui ta voos oleks, lükkaks
   avamine kogu lehe allapoole ja brauser hüppaks kerimisega kaasa — just
   see nägi telefonis välja nagu juhuslik kerimine. Nüüd ei liigu leht. */
.mobmenyy{display:none;flex-direction:column;padding:0 var(--serv) 1rem;
  position:fixed;left:0;right:0;top:var(--pea-korgus);z-index:39;
  max-height:calc(100svh - var(--pea-korgus));overflow-y:auto;
  border-bottom:1px solid var(--vuuk);background:var(--paber)}
.mobmenyy a{text-decoration:none;padding:1.05rem 0;border-top:1px solid var(--vuuk);
  font-size:1.125rem;font-weight:500}
.mobmenyy a[aria-current]{color:var(--tint);font-weight:700}
body.menyy-avatud .mobmenyy{display:flex}
/* Leht ise ei keri, kuni menüü on lahti. */
body.menyy-avatud{overflow:hidden}
@media(min-width:861px){body.menyy-avatud{overflow:visible}
  body.menyy-avatud .mobmenyy{display:none}}

/* ── AVALEHT: kaks lauset ja üks foto ──────────────────────────────── */
/* Avaleht täidab ekraani: kangelane on täpselt aken miinus päis, nii et
   sülearvutil ei jää alla tühja riba ega tule kerimist.
   Tulbad on 6fr/7fr: tekstitulp peab suuremat kirja kandma ilma, et
   juhtlause seitsmele reale läheks, ja pildi kuvasuhe jääb täiskõrgusel
   ikka ~7:6 kanti, sama mis originaalkaadril. */
.kangelane{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);
  align-items:center;border-bottom:1px solid var(--vuuk);
  min-height:calc(100svh - var(--pea-korgus))}
.kangelane__tekst{padding:clamp(2rem,min(5vw,5.5vh),4.5rem) clamp(2rem,3.5vw,4rem)
  clamp(2rem,min(5vw,5.5vh),4.5rem) var(--serv)}
/* Küsimus peab murduma kolmele reale, mitte üheksale. */
/* Kiri kasvab laiusega, aga alistub kõrgusele: madalal sülearvutiekraanil
   (640 px) ei tohi kolm rida kangelast üle voldi lükata. */
.kangelane h1{font-size:clamp(2.3rem,min(4.7vw,8.2vh),4.6rem);
  margin-bottom:clamp(1rem,2vh,1.6rem);max-width:15ch}
.kangelane .juht{font-size:clamp(1.1875rem,min(1.75vw,3vh),1.7rem);color:var(--tekst-2);max-width:32ch;line-height:1.5}
/* Pilt on absoluutne, et tema oma kuvasuhe ei dikteeriks rea kõrgust —
   kõrguse annab ainult min-height (aken miinus päis). Muidu venitab
   kaader madalal ekraanil kangelase üle voldi. */
.kangelane__pilt{margin:0;border-left:1px solid var(--vuuk);
  align-self:stretch;position:relative;overflow:hidden}
.kangelane__pilt img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media(max-width:860px){
  /* Telefonis ei püüa miski ühte ekraani täita — tekst enne, pilt järel. */
  .kangelane{grid-template-columns:1fr;min-height:0}
  .kangelane__tekst{padding:clamp(2rem,8vw,3rem) var(--serv);max-width:none}
  /* Telefonis tuleb foto esimesena: muidu on avaekraan pelgalt tekst ja
     ainus pilt jääb voldi alla. Lamedam kaader (4:3) jätab pealkirja
     ikka samale ekraanile. */
  /* align-self:start on siin kohustuslik: venitatud (stretch) ruudustiku
     lahtris eirab WebKit aspect-ratio't, ja et ainus laps on absoluutne,
     jääb rea kõrguseks null — iPhone'is kadus foto sootuks ära. */
  .kangelane__pilt{order:-1;align-self:start;border-left:0;
    border-bottom:1px solid var(--vuuk);aspect-ratio:4/3;width:100%}
}

/* ── MUSTER foto asemel ────────────────────────────────────────────
   Paan korratakse ja nihutatakse aeglaselt allapoole. Nihe on täpselt
   ühe paani jagu, seega silmus on õmbluseta. Liigutame transform'i,
   mitte background-position'it: nii jääb animatsioon kompositorile.
   ::before on ühe paani võrra kõrgem ja algab paani võrra ülevalpool,
   et allanihkumisel ei tekiks ülaserva tühja riba. */
.kangelane__muster{position:relative;overflow:hidden;align-self:stretch;
  border-left:1px solid var(--vuuk);background:var(--paber)}
.kangelane__muster::before{content:"";position:absolute;
  left:0;right:0;top:calc(-1 * var(--paan));height:calc(100% + var(--paan));
  background-image:var(--muster);background-repeat:repeat;
  background-size:var(--paan-x) var(--paan);
  animation:valgu var(--tempo) linear infinite;
  will-change:transform}
@keyframes valgu{from{transform:translate3d(0,0,0)}
                 to{transform:translate3d(0,var(--paan),0)}}
/* Servades sulab muster paberisse, et ta ei lõppeks joonlauaga. */
.kangelane__muster{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
@media(max-width:860px){
  .kangelane__muster{order:-1;align-self:start;border-left:0;
    border-bottom:1px solid var(--vuuk);aspect-ratio:4/3;width:100%}
}

/* Ainus liigutus kogu saidil. */
@media(prefers-reduced-motion:no-preference){
  .kangelane__pilt img{animation:astu 1100ms cubic-bezier(.16,1,.3,1) both}
  .kangelane__tekst>*{animation:tousa 800ms cubic-bezier(.16,1,.3,1) both;animation-delay:120ms}
  .kangelane__tekst>*+*{animation-delay:220ms}
  .kangelane__tekst>*+*+*{animation-delay:320ms}
}
@keyframes astu{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes tousa{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}

/* kontaktirida avalehel (ainult "käepärane") */
.kontaktrida{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--vuuk)}
.kontaktrida__silt{font-size:1rem;color:var(--tekst-2);margin-bottom:.55rem}
.kontaktrida__side{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.kontaktrida__side a{font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:700;color:var(--tint);
  text-decoration:none;border-bottom:2px solid var(--vuuk);padding-bottom:.15rem}
.kontaktrida__side a:hover{border-color:var(--tint)}

/* ── PEIDUS PEALKIRI ───────────────────────────────────────────────
   Alalehed algavad kohe sisuga: nähtavat "Hinnastamine" / "Kontakt"
   pealkirja enam ei ole, sest menüü ütles selle juba ära. Struktuuri
   pärast jääb h1 lehele alles, aga ainult ekraanilugejale. */
.peidus-pealkiri{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── HINNASTAMINE: pealkiri, tabel, kaks lauset. Rohkem ei ole. ───── */
.hinnad{padding:clamp(2.5rem,5vw,4.5rem) var(--serv);max-width:52rem}
/* Ainus pealkiri lehel — astub muust tekstist ühe astme üles, ei rohkem. */
.hinnad__pealkiri{font-size:clamp(1.3rem,2vw,1.6rem);color:var(--tint);
  margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.hinnatabel tr{border-top:1px solid var(--vuuk)}
.hinnatabel tr:last-child{border-bottom:1px solid var(--vuuk)}
.hinnatabel th{text-align:left;font-weight:500;padding:1.3rem 1.25rem 1.3rem 0;
  font-size:clamp(1.0625rem,1.4vw,1.15rem)}
.hinnatabel td{text-align:right;padding:1.3rem 0;white-space:nowrap}
.hind{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:700;color:var(--tint);
  font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.yhik{font-size:1rem;color:var(--tekst-2)}
.hinnad__tekst{display:grid;gap:1.35rem;max-width:62ch;color:var(--tekst-2);
  margin-top:clamp(1.75rem,3vw,2.5rem)}
@media(max-width:520px){
  .hinnatabel th,.hinnatabel td{display:block;text-align:left;padding:0;white-space:normal}
  .hinnatabel tr{display:block;padding-block:1.15rem}
  .hinnatabel th{margin-bottom:.35rem}
}

/* puuduva sisu märgistus — prototüübis nähtav, päris saidile ei jää */
.puudu{margin-top:1.5rem;padding-left:.9rem;border-left:1px solid var(--tint-2);
  color:var(--tekst-2);font-size:.95rem;max-width:52ch}

/* ── TEHTUD TÖÖD ───────────────────────────────────────────────────── */
.too{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(1.5rem,4vw,4rem);padding:clamp(2.5rem,5vw,4.5rem) var(--serv);
  border-bottom:1px solid var(--vuuk);align-items:start}
.too__info h2{font-size:clamp(1.4rem,2.3vw,2rem);margin-bottom:.5rem}
.too__kuupaev{color:var(--tint-2);font-weight:500;margin-bottom:1rem}
/* Kuupäevata töö: pealkirja ja lause vahe jääks muidu poole väiksemaks. */
.too__info h2 + .too__lause{margin-top:.5rem}
.too__lause{color:var(--tekst-2);max-width:42ch}
/* Ühesuurused pesad: iga foto kärbitakse 4:3-le, nii et püstine või
   pikali telefonipilt sobib mõlemad ja rida jääb sirge. */
/* Vuuk joonistatakse iga foto ümber, mitte ploki taustana: paaritu arvu
   fotode korral jääks tühi pesa muidu halliks ruuduks. */
.too__pildid{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.too__pildid figure{margin:0;background:var(--hall);aspect-ratio:4/3;
  box-shadow:0 0 0 1px var(--vuuk)}
.too__pildid img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.too{grid-template-columns:1fr}}
@media(max-width:480px){.too__pildid{grid-template-columns:1fr}}

/* ── KONTAKT: samad tulbad kaks korda ──────────────────────────────
   Jaluses kahe tulbana väikeses kirjas, kontaktilehel kolme tulbana
   suuremalt. Üks komplekt reegleid, kaks mõõtu. */
.side{display:grid;gap:clamp(1.25rem,3vw,3rem) clamp(2rem,5vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.side__tulp p{line-height:1.55}
.side__tulp a{text-decoration:none;border-bottom:1px solid var(--vuuk);
  word-break:break-word}
.side__tulp a:hover{color:var(--tint);border-color:var(--tint)}

/* jaluses: väiksem kui põhitekst ja ilma rasvase nimeta */
.side--vaike{font-size:.9375rem;color:var(--tekst-2);max-width:62rem}
.side--vaike .side__nimi{font-weight:400;color:var(--must)}

/* kontaktilehel: sama asi suurelt, kolmandas tulbas registriandmed.
   Kolm tulpa peavad mahtuma kõrvuti, seega kiri kasvab mõõdukalt. */
.kontaktplokk{padding:clamp(1.75rem,3.5vw,2.75rem) var(--serv) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--vuuk);max-width:var(--max)}
.side--suur{font-size:clamp(1.0625rem,1.5vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.side--suur .side__nimi{font-weight:700;color:var(--must)}
.side--suur .side__tulp a{color:var(--tint);border-bottom-width:2px}

/* Meeskond: üksteise all, üks rida inimese kohta. */
.meeskond{padding:clamp(1.75rem,3.5vw,2.75rem) var(--serv) clamp(2.5rem,5vw,4rem);
  max-width:var(--max)}
.meeskond>h2{font-size:clamp(1.25rem,1.9vw,1.55rem);margin-bottom:clamp(1.25rem,2.2vw,1.6rem)}
/* Kolm rida inimese kohta — nimi, roll, e-post. Grupeerib lähedus, mitte joon:
   read kokku, inimeste vahel õhku. Ükski kast ega joon pole vaja. */
.meeskond__loend{list-style:none;margin:0;padding:0;max-width:34rem;
  display:grid;gap:clamp(1.15rem,2vw,1.5rem)}
.liige{line-height:1.45}
.liige__nimi{font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.liige__roll{color:var(--tekst-2)}
.liige__side a{color:var(--tint);text-decoration:none;
  border-bottom:1px solid var(--vuuk);word-break:break-word}
.liige__side a:hover{border-color:var(--tint)}

/* ── JALUS ─────────────────────────────────────────────────────────
   Kontaktid on igal lehel all — mitte nupuna, vaid tekstina. */
.jalus{border-top:1px solid var(--vuuk);
  padding:clamp(2rem,4vw,3rem) var(--serv) clamp(2rem,4vw,3rem)}


/* ── mobiilne püsiriba ─────────────────────────────────────────────── */
.mob-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr}
.mob-bar a{padding:1.15rem;text-align:center;text-decoration:none;font-size:1.0625rem;font-weight:700}
.mob-bar__a{background:var(--tint);color:#fff}
.mob-bar__b{background:var(--must);color:#fff}
@media(min-width:861px){.mob-bar{display:none}}

/* NB: tärn üksi ei kata pseudoelemente, ja mustri animatsioon istub
   just ::before peal. Ilma nende kahe valijata jääks muster liikuma
   ka sellele, kes on liikumise selgelt välja lülitanud. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}}