/* Kaisa Marissa Aduson. Kõik väärtused tulevad DESIGN.md tokenitest. */

@font-face {
  font-family: "Gilda Display";
  src: url("../fonts/gilda-display-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gilda Display";
  src: url("../fonts/gilda-display-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: optional;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* värvid */
  --paper: #F4F2F0;
  --mist: #E8E4E1;
  --stone: #D0CBC7;
  --wall: #B8B3AF;
  --paper-0: rgb(244 242 240 / 0);
  --mist-0: rgb(232 228 225 / 0);
  --graphite: #5F5B57;
  --ink: #1C191B;
  --plum: #3B2731;
  --plum-tume: #2A1C23;

  /* fondid */
  --f-display: "Gilda Display", Georgia, "Times New Roman", serif;
  --f-tekst: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* skaala */
  --t-keha: 16px;
  --t-vaike: 14px;
  --t-lead: 20px;
  --t-h2: 40px;
  --t-h3: 28px;
  --t-tsitaat: 40px;
  --t-nimi: clamp(40px, 12.6vw, 96px);

  /* vahed */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;

  --serv: var(--s4);
  --osa-vahe: var(--s9);
  --raadius: 3px;
  --pais-k: 64px;
  --laius: 1440px;

  /* liikumine */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kestus: 700ms;          /* sisse ilmumine */
  --kestus-hover: 200ms;    /* toon hoveril */
  --kestus-vajutus: 150ms;  /* nupu vajutus */
  --kestus-joon: 250ms;     /* lingi joon */
  --kestus-ava: 300ms;      /* lahtikäiv sisu */
  --kestus-mask: 900ms;     /* maski avanemine */
  --kestus-suum: 1100ms;    /* portree ja fotode suum */
  --samm: 100ms;            /* järjestuse vahe */
  --kestus-nupp: 600ms;     /* hero nupud: valmis 0,8 s jooksul */
  --t-vaike2: 15px;
  --t-tekst2: 16px;         /* teisene jooksev tekst */
  --t-minust: 16px;         /* Minust lõigud = jooksev tekst */
  --t-kirje: 14px;          /* tunnustuste kirjed (arvutis 15 px) */
  --t-jalus: 13px;          /* jaluse read */
  --t-roll: 24px;           /* "Butiikmaakler" nime all */
  --t-lubadus: 26px;        /* hero järel olev lubadus */
}

@media (min-width: 768px) {
  :root {
    --t-keha: 16px;
    --t-lead: 22px;
    --t-h2: 56px;
    --t-h3: 32px;
    --t-tsitaat: 56px;
    --t-roll: 28px;
    --t-lubadus: 36px;
    --t-minust: 17px;
    --t-kirje: 15px;
    --serv: var(--s7);
    --osa-vahe: var(--s10);
    --pais-k: 72px;
  }
}
@media (min-width: 1024px) {
  :root {
    --t-nimi: clamp(64px, 6.8vw, 100px);
    --osa-vahe: var(--s11);
    --serv: var(--s8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-tap-highlight-color: rgb(59 39 49 / 0.15); color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--pais-k) + var(--s4)); scroll-padding-bottom: var(--s4); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-tekst);
  font-size: var(--t-keha);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-size: var(--t-lead); line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--plum); color: var(--paper); }
html { caret-color: var(--plum); accent-color: var(--plum); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: var(--raadius); }
strong { font-weight: 500; }

/* nähtavad kohatäited [KINNITA] ja [VAJA] */
.kt {
  background: var(--stone);
  color: var(--ink);
  padding: 0 var(--s1);
  border-radius: var(--raadius);
  font-family: var(--f-tekst);
  font-size: max(14px, 0.8em);
  letter-spacing: 0;
  line-height: 1.5;
}
.kontakt .kt, .hero .kt { background: var(--mist); }
/* eelvaade ?puhas: kohatäited peidetud */
.puhas .kt { display: none; }

.skip {
  position: absolute; left: var(--s4); top: var(--s4); z-index: 30;
  background: var(--plum); color: var(--paper);
  padding: var(--s3) var(--s4); border-radius: var(--raadius);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.osa__sisu { max-width: var(--laius); margin: 0 auto; padding: 0 var(--serv); }
.lugu { max-width: 62ch; margin-top: var(--s5); }

/* ---------- päis ---------- */
.pais {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  transition: box-shadow var(--kestus-hover) ease;
}
.keritud .pais { box-shadow: 0 1px 0 rgb(28 25 27 / 0.08); }
/* avalehel võtab päis all oleva tooni (kus kerimisega taustavahetust pole) */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .pais--kihid {
    background: rgb(244 242 240 / 0.85);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
  }
}
.pais__sisu {
  max-width: var(--laius); margin: 0 auto; padding: 0 var(--serv);
  height: var(--pais-k);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.pais__nimi {
  font-family: var(--f-display); font-size: 20px; line-height: 1.2;
  color: var(--ink); text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
}
.pais__tel {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s4);
  background: var(--plum); color: var(--paper);
  border-radius: var(--raadius); text-decoration: none; font-weight: 500;
  transition: background-color var(--kestus-hover) ease, transform var(--kestus-vajutus) var(--ease), opacity var(--kestus-hover) ease, visibility 0s linear 0s;
}
.pais__tel:hover { background: var(--plum-tume); }
/* hero nupud on nähtaval: päise Helista ei korda neid (ilma JS-ita alati nähtav) */
.pais-oota.avaleht:not(.hero-moodas) .pais__tel { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity var(--kestus-hover) ease, transform var(--kestus-hover) var(--ease), visibility 0s linear var(--kestus-hover); }
.pais-oota.avaleht.hero-moodas .pais__tel { transition: opacity var(--kestus-hover) ease, transform var(--kestus-hover) var(--ease), visibility 0s linear 0s, background-color var(--kestus-hover) ease; }
.pais__tel:active { transform: scale(0.98); }
.pais__tel-nr { display: none; }
.pais__logo { display: flex; align-items: center; min-height: 44px; }
.pais__logo img { height: 40px; width: auto; }
@media (min-width: 768px) { .pais__logo img { height: 52px; } }
@media (max-width: 359px) { .pais__nimi { font-size: 17px; } }
@media (min-width: 768px) {
  .pais__nimi { font-size: 22px; }
  .pais__tel { background: none; color: var(--plum); padding: 0 var(--s2); font-size: 18px; }
  .pais__tel:hover { background: none; color: var(--plum-tume); text-decoration: underline; text-underline-offset: 0.2em; }
  .pais__tel-sona { display: none; }
  .pais__tel-nr { display: inline; }
}

/* ---------- nupud ---------- */
.nupud { display: flex; flex-wrap: wrap; gap: var(--s3); }
.nupp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s5);
  border-radius: var(--raadius);
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: background-color var(--kestus-hover) ease, color var(--kestus-hover) ease, transform var(--kestus-vajutus) var(--ease);
}
.nupp:active { transform: scale(0.98); }
.nupp--taidetud { background: var(--plum); color: var(--paper); }
.nupp--taidetud:hover { background: var(--plum-tume); }
.nupp--kontuur { border: 1.5px solid var(--plum); color: var(--plum); }
.nupp--kontuur:hover { background: var(--plum); color: var(--paper); }

.link-joon { position: relative; text-decoration: underline; text-decoration-thickness: 1px; }
.link-joon::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--kestus-joon) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .link-joon:hover { text-decoration-color: transparent; }
  .link-joon:hover::after { transform: scaleX(1); }
}

/* ---------- taustad: sein, paber, mist sulavad üksteiseks (ühtegi teravat serva) ---------- */
:root {
  --sulamine: 200px;
  --sulamine-pais: 160px;
  --tekstuur: image-set(url("../img/sein.avif") type("image/avif"), url("../img/sein.webp") type("image/webp"));
}
.taust { display: none; }

/* ---------- taustad: sein, paber, mist sulavad üksteiseks ---------- */
:root {
  --sulamine: 200px;
  --sulamine-pais: 160px;
  --tekstuur: image-set(url("../img/sein.avif") type("image/avif"), url("../img/sein.webp") type("image/webp"));
}
.taust { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 3;
  overflow: clip;
  background-color: var(--wall);
  background-image: linear-gradient(to bottom, var(--paper) 0, var(--paper-0) var(--sulamine-pais)), url("../img/sein.webp");
  background-image: linear-gradient(to bottom in oklab, var(--paper) 0, var(--paper-0) var(--sulamine-pais)), url("../img/sein.webp");
  background-image: linear-gradient(to bottom, var(--paper) 0, var(--paper-0) var(--sulamine-pais)), var(--tekstuur);
  background-image: linear-gradient(to bottom in oklab, var(--paper) 0, var(--paper-0) var(--sulamine-pais)), var(--tekstuur);
  background-size: auto, 1600px auto;
}
.hero__raam {
  max-width: var(--laius); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nimi" "tiitlid" "pilt" "tegevus";
  padding: var(--s4) var(--serv) var(--s7);
}
.hero__nimi {
  grid-area: nimi;
  position: relative; z-index: 2;
  font-size: var(--t-nimi); line-height: 1.02; letter-spacing: -0.02em;
}
.hero__rida { display: block; }
.hero__tiitlid { grid-area: tiitlid; position: relative; z-index: 2; margin-top: var(--s3); }
.hero__roll { font-family: var(--f-display); font-size: var(--t-roll); line-height: 1.2; margin-bottom: 0.7em; }
.hero__tiitel { font-size: 17px; font-weight: 500; line-height: 1.4; }
.hero__firma { font-size: var(--t-vaike2); line-height: 1.45; margin-top: var(--s1); }
.hero__portree {
  --portree-k: round(down, clamp(320px, min(115vw, 58svh), 482px), 1px);
  grid-area: pilt;
  position: relative; z-index: 1;
  height: var(--portree-k);
  margin: var(--s3) calc(var(--serv) * -1) 0;
}
.hero__portree picture { position: absolute; inset: 0; display: block; }
.hero__portree img {
  position: absolute; top: 0; left: 50%;
  height: 100%; width: auto; max-width: none;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hero__tegevus { grid-area: tegevus; margin-top: calc(var(--s4) * -1); position: relative; z-index: 2; }
/* nupud üksteise all, sama laius */
.hero .nupud { flex-direction: column; align-items: stretch; }
.hero .nupud .nupp { width: 100%; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .nupud { max-width: 320px; }
}

@media (min-width: 1024px) {
  .hero { min-height: calc(100svh - var(--pais-k)); display: flex; }
  .hero__raam {
    flex: 1; width: 100%;
    grid-template-columns: 1fr minmax(0, min(40vw, 576px)) 1fr;
    grid-template-rows: minmax(var(--s8), 1fr) auto auto minmax(var(--s7), 0.6fr);
    grid-template-areas: none;
    column-gap: var(--s5);
    padding: 0 var(--serv);
  }
  .hero__nimi { grid-column: 1; grid-row: 2; line-height: 1; }
  .hero__tiitlid { grid-column: 1; grid-row: 3; margin-top: var(--s5); }
  .hero__portree { grid-column: 2; grid-row: 1 / -1; height: auto; align-self: stretch; margin: 0; }
  .hero__portree picture { inset: var(--s5) -8vw var(--s8); }
  .hero__portree img { top: auto; bottom: 0; height: min(100%, 760px); }
  /* nupud paremas tulbas, vertikaalselt vasaku tekstiploki keskel */
  .hero__tegevus { grid-column: 3; grid-row: 2 / 4; align-self: center; justify-self: start; margin: 0; width: min(100%, 280px); }
}

/* ---------- lubadus (kohe hero järel) ---------- */
.lubadus { margin-bottom: var(--s9); }
.lubadus__rida { font-family: var(--f-display); font-size: var(--t-lubadus); line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance; }
.lubadus__rida + .lubadus__rida { margin-top: var(--s3); }
@media (min-width: 1024px) { .lubadus__rida { max-width: 36ch; } }

/* ---------- minust ---------- */
.minust {
  display: flow-root;
  position: relative; z-index: 2;
  padding: var(--s9) 0 0;
  background: linear-gradient(to bottom, var(--wall) 0, var(--paper) var(--sulamine));
  background: linear-gradient(to bottom in oklab, var(--wall) 0, var(--paper) var(--sulamine));
}
.minust__ruudustik { display: grid; gap: var(--s7); }
.minust__pealkiri { max-width: 20ch; }
.minust__tekst { margin-top: var(--s5); }
.minust__tekst p { max-width: 52ch; font-size: var(--t-minust); line-height: 1.55; }
.minust__tekst p + p { margin-top: var(--s4); }
.tulemus { --t-165: clamp(72px, 9vw, 120px); }
.tulemus__silt { display: block; font-size: var(--t-kirje); line-height: 1.4; color: var(--graphite); margin-bottom: var(--s2); }
.tulemus__nr { font-family: var(--f-display); font-size: var(--t-165); line-height: 0.95; letter-spacing: -0.02em; }
.tulemus__yhik { font-family: var(--f-display); font-size: calc(var(--t-165) * 0.45); line-height: 1; margin-left: 0.12em; }
.tunnustus__pealkiri { font-size: calc(var(--t-lead) * 1.22); line-height: 1.3; letter-spacing: 0; margin-top: var(--s8); }
.tunnustus { margin-top: var(--s3); font-size: var(--t-kirje); line-height: 1.55; }
.tunnustus li { padding: var(--s3) 0; border-top: 1px solid rgb(28 25 27 / 0.12); }
.tunnustus__nimi, .tunnustus__osa { display: block; }
.tunnustus__nimi { font-weight: 500; }
.arendused { font-size: var(--t-kirje); line-height: 1.55; }
.arendused span { font-weight: 500; }
.arendused { padding-top: var(--s3); border-top: 1px solid rgb(28 25 27 / 0.12); margin-top: 0; }
.tsitaat { position: relative; z-index: 1; margin: var(--s9) auto calc(var(--s9) * -1); }
.tsitaat blockquote { margin: 0; }
.tsitaat blockquote p {
  font-family: var(--f-display); font-size: var(--t-tsitaat); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 16ch; text-wrap: balance;
}
.tsitaat figcaption { margin-top: var(--s4); font-family: var(--f-display); font-size: 18px; line-height: 1.4; }
@media (min-width: 1024px) {
  .minust { padding-top: var(--s10); }
  .tsitaat { margin-top: var(--s10); }
  .minust__ruudustik { grid-template-columns: 6fr 6fr; column-gap: var(--s8); row-gap: 0; }
  .minust__pealkiri { grid-column: 1; grid-row: 1; }
  .minust__tekst { grid-column: 1; grid-row: 2; }
  .minust__kylg { grid-column: 2; grid-row: 1 / 3; align-self: start; padding-top: var(--s2); }
  .tsitaat blockquote p { font-size: 84px; }
}

/* ---------- kuidas müük käib ---------- */
.kuidas {
  position: relative; z-index: 1;
  padding: calc(var(--s11) + var(--s9)) 0 0;
  background: linear-gradient(to bottom, var(--paper) 0, var(--mist) var(--sulamine));
  background: linear-gradient(to bottom in oklab, var(--paper) 0, var(--mist) var(--sulamine));
}
.kuidas__ruudustik { display: grid; gap: var(--s6); }
.sammud { margin: 0; padding: 0; list-style: none; }
.sammud li { position: relative; padding: var(--s5) 0; }
.sammud li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgb(28 25 27 / 0.16); transform-origin: left;
}
.sammud li > span { display: block; max-width: 60ch; text-wrap: pretty; }
.sammud strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: var(--t-lead); line-height: 1.3; margin-bottom: var(--s1); }
@media (min-width: 1024px) {
  .kuidas { padding-top: calc(var(--s10) + var(--s9) + var(--s9)); }
  .kuidas__ruudustik { grid-template-columns: 5fr 7fr; column-gap: var(--s9); align-items: start; }
  .kuidas__ruudustik h2 { position: sticky; top: calc(var(--pais-k) + var(--s7)); }
}

/* ---------- kontakt ---------- */
.kontakt {
  position: relative; z-index: 0;
  padding: var(--s9) 0 var(--s7);
  background-color: var(--wall);
  background-image: linear-gradient(to bottom, var(--mist) 0, var(--mist-0) var(--sulamine)), url("../img/sein.webp");
  background-image: linear-gradient(to bottom in oklab, var(--mist) 0, var(--mist-0) var(--sulamine)), url("../img/sein.webp");
  background-image: linear-gradient(to bottom, var(--mist) 0, var(--mist-0) var(--sulamine)), var(--tekstuur);
  background-image: linear-gradient(to bottom in oklab, var(--mist) 0, var(--mist-0) var(--sulamine)), var(--tekstuur);
  background-size: auto, 1600px auto;
}
.kontakt__ruudustik { display: grid; gap: var(--s5); }
.kontakt__tel { font-family: var(--f-display); font-size: clamp(44px, 11vw, 120px); line-height: 1.05; letter-spacing: -0.02em; margin-top: var(--s4); }
.kontakt__tel a, .kontakt__post a { color: var(--ink); text-decoration-color: var(--plum); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.kontakt__tel a:hover, .kontakt__post a:hover { color: var(--plum); }
.kontakt__post { font-family: var(--f-display); font-size: clamp(28px, 5vw, 44px); line-height: 1.15; overflow-wrap: anywhere; margin-top: var(--s3); }
.kontakt__sots { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin-top: var(--s5); font-size: var(--t-vaike2); }
.kontakt__sots li { display: flex; }
.kontakt__sots a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s1); }
.uudiskiri { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgb(28 25 27 / 0.12); max-width: 52ch; }
.uudiskiri__pealkiri { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lead); line-height: 1.3; }
.uudiskiri__tekst { margin-top: var(--s2); font-size: var(--t-kirje); line-height: 1.55; }
.uudiskiri__nupp { margin-top: var(--s4); min-height: 44px; }
@media (min-width: 1024px) {
  .kontakt__ruudustik { grid-template-columns: 7fr 5fr; column-gap: var(--s9); align-items: end; }
  .kontakt__ruudustik > * { grid-column: 1 / -1; }
}

/* ---------- jalus ---------- */
.jalus {
  padding: var(--s6) 0 var(--s5); font-size: var(--t-vaike); line-height: 1.6;
  background: linear-gradient(to bottom, var(--wall) 0, var(--paper) var(--sulamine-pais));
  background: linear-gradient(to bottom in oklab, var(--wall) 0, var(--paper) var(--sulamine-pais));
}
.jalus__sisu { max-width: var(--laius); }
.jalus__rida1 { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.jalus__rida1 a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-vaike); }
.jalus__logo { width: auto; height: 68px; }
.jalus__grupp { font-size: var(--t-jalus); line-height: 24px; color: var(--graphite); max-width: 90ch; }
.jalus__grupp:first-of-type { margin-top: var(--s3); }
.jalus__grupp + .jalus__grupp { margin-top: var(--s1); }
.jalus__grupp a { color: var(--graphite); display: inline-block; min-height: 24px; }
.jalus__grupp a:hover { color: var(--plum); }
.jalus .osa { white-space: nowrap; }
/* eraldaja " · " iga osa ees; rea alguses jääb see lõigatud vasakservast välja, rea lõppu ei satu kunagi */
@media (min-width: 768px) {
  .jalus__grupp { margin-left: -0.5em; clip-path: inset(-6px -6px -6px 0.4em); }
  .jalus .osa::before { content: "·"; content: "·" / ""; display: inline-block; width: 0.5em; text-align: left; }
  .jalus__grupp:first-of-type { margin-top: var(--s4); }
}
@media (max-width: 767px) {
  /* telefonis kolm selget plokki, iga info oma real, ühtlane reavahe */
  .jalus .vahe { display: none; }
  .jalus .osa { display: block; white-space: normal; }
  .jalus__grupp { line-height: 28px; }
  .jalus__grupp:first-of-type { margin-top: var(--s4); }
  .jalus__grupp + .jalus__grupp { margin-top: var(--s5); }
}
@media (pointer: coarse) {
  /* puutepind 44 px ilma reavahet muutmata */
  .jalus__grupp a { padding-block: 8px; margin-block: -8px; min-height: 0; }
}

/* ---------- tekstileht (privaatsus, 404) ---------- */
.leht { padding: var(--s9) 0 var(--s9); }
.leht h1 { font-size: min(var(--t-h2), 8.4vw); overflow-wrap: anywhere; line-height: 1.1; letter-spacing: -0.02em; }
.leht h2 { font-size: var(--t-h3); margin-top: var(--s7); }
.leht p, .leht ul { max-width: 65ch; margin-top: var(--s4); }
.leht ul { list-style: disc; padding-left: var(--s5); }
.leht li + li { margin-top: var(--s2); }
.leht .nupud { margin-top: var(--s6); }
.leht + .jalus { background: none; padding-top: var(--s8); }

/* =================================================================
   LIIKUMINE. Ainult transform, opacity, clip-path. Kestused tokenitest (:root).
   Kõik on nähtav ilma JS-ita ja prefers-reduced-motion: reduce korral.
   Kerimisega seotud animatsioonidel kestust ega ajalist easingut ei ole (linear).
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* avanemine: portree avaneb keskelt kerge suumiga, ei alga läbipaistvusest */
  .hero__portree picture { animation: portree-avaneb var(--kestus-suum) var(--ease) backwards; }
  @keyframes portree-avaneb {
    from { clip-path: inset(6% 18% 0 18%); transform: scale(1.04); }
    to { clip-path: inset(0); transform: none; }
  }
  /* nimi rida haaval, siis tiitel ja tekst, nupud ja telefon; kokku 1,2 s */
  /* nimi, tiitlid ja nupud on esimesest kaadrist nähtavad: ainult kerge tõus, mitte läbipaistvusest */
  .js .hero__rida { animation: hero-tous var(--kestus) var(--ease) both; }
  .js .hero__rida--1 { animation-delay: var(--samm); }
  .js .hero__rida--2 { animation-delay: calc(var(--samm) * 2); }
  .js .hero__rida--3 { animation-delay: calc(var(--samm) * 3); }
  .js .hero__tiitlid { animation: hero-tous var(--kestus) var(--ease) calc(var(--samm) * 4) both; }
  /* lubadus: read ilmuvad ükshaaval alt üles oma joone tagant */
  .js [data-liigu="lubadus"] .lubadus__rida { transition: clip-path var(--kestus-mask) var(--ease), transform var(--kestus-mask) var(--ease); }
  .js [data-liigu="lubadus"] .lubadus__rida + .lubadus__rida { transition-delay: calc(var(--samm) * 3); }
  .js [data-liigu="lubadus"]:not(.on) .lubadus__rida { clip-path: inset(100% 0 -0.3em 0); transform: translateY(0.6em); }
  .js [data-liigu="lubadus"].on .lubadus__rida { clip-path: inset(-0.2em 0 -0.3em 0); }
  .js .hero__tegevus { animation: hero-tous var(--kestus-nupp) var(--ease) calc(var(--samm) * 2) both; }
  @keyframes hero-tous { from { transform: translateY(12px); } to { transform: none; } }

  /* sisse kerimisel, iga liik eri moodi */
  .js [data-liigu] {
    transition: opacity var(--kestus) var(--ease), transform var(--kestus) var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js [data-viivitus="1"] { --d: var(--samm); }
  .js [data-viivitus="2"] { --d: calc(var(--samm) * 2); }
  .js [data-viivitus="3"] { --d: calc(var(--samm) * 3); }
  .js [data-viivitus="4"] { --d: calc(var(--samm) * 4); }
  .js [data-liigu="tous"]:not(.on) { opacity: 0; transform: translateY(20px); }
  .js [data-liigu="hele"]:not(.on) { opacity: 0; }
  .js [data-liigu="kylg"]:not(.on) { opacity: 0; transform: translateX(-12px); }
  /* sammud: joon joonistub vasakult, tekst järgneb */
  .js [data-liigu="joon"]::before { transition: transform var(--kestus-mask) var(--ease) var(--d, 0ms); }
  .js [data-liigu="joon"] > span { transition: opacity var(--kestus) var(--ease), transform var(--kestus) var(--ease); transition-delay: calc(var(--d, 0ms) + var(--samm) * 1.5); }
  .js [data-liigu="joon"]:not(.on)::before { transform: scaleX(0); }
  .js [data-liigu="joon"]:not(.on) > span { opacity: 0; transform: translateY(8px); }
  /* kontakt: telefon ja e-post tõusevad oma joone tagant */
  .js [data-liigu="ridu"] > a { display: inline-block; transition: clip-path var(--kestus-mask) var(--ease) var(--d, 0ms), transform var(--kestus-mask) var(--ease) var(--d, 0ms); }
  .js [data-liigu="ridu"].on > a { clip-path: inset(0 0 -0.2em 0); }
  .js [data-liigu="ridu"]:not(.on) > a { clip-path: inset(100% 0 -0.2em 0); transform: translateY(0.4em); }

  /* kerimisega seotud liikumine */
  @supports (animation-timeline: scroll()) {
    .hero__sona {
      display: inline-block;
      animation: nimi-hajub linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90svh;
    }
    @keyframes nimi-hajub { to { opacity: 0.3; transform: translateY(-24px); } }
    .tsitaat__rida {
      animation: rida-heleneb linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
    @keyframes rida-heleneb { from { opacity: 0.62; } to { opacity: 1; } }
  }

  /* taustatoon vahetub kerimisel: sein, paber, mist, sein, paber */
  @supports (view-timeline-name: --a) and (animation-timeline: view()) {
    html { timeline-scope: --v-minust, --v-kuidas, --v-kontakt, --v-jalus; }
    .minust { view-timeline-name: --v-minust; }
    .kuidas { view-timeline-name: --v-kuidas; }
    .kontakt { view-timeline-name: --v-kontakt; }
    .jalus { view-timeline-name: --v-jalus; }
    .taust { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
    .taust__kiht { position: absolute; inset: 0; opacity: 0; animation: kiht-sisse linear both; animation-range: entry 25% entry 75%; }
    .taust__kiht--sein, .taust__kiht--sein2 { background-color: var(--wall); background-image: var(--tekstuur); background-size: 1600px auto; }
    .taust__kiht--sein { opacity: 1; animation: none; }
    .taust__kiht--paber, .taust__kiht--paber2 { background: var(--paper); }
    .taust__kiht--mist { background: var(--mist); }
    .taust__kiht--paber { animation-timeline: --v-minust; animation-range: entry 80% entry 100%; }
    .taust__kiht--mist { animation-timeline: --v-kuidas; }
    .taust__kiht--sein2 { animation-timeline: --v-kontakt; }
    .taust__kiht--paber2 { animation-timeline: --v-jalus; animation-range: entry 0% entry 100%; }
    @keyframes kiht-sisse { from { opacity: 0; } to { opacity: 1; } }
    .pais--kihid { background: transparent; }
    .pais--kihid .taust { position: absolute; z-index: -1; }
    .hero { background: none; }
    .minust, .kuidas, .kontakt, .jalus { background: none; }
  }
}