/* ==========================================================================
   mirai.ee

   Paigutus on kirjutatud reeglitena, mitte mõõtudena: iga asukoht ja suurus
   on protsent, fr, clamp() või kujusuhe, mitte lehelt mõõdetud piksel.
   Seetõttu kehtib leht igal laiusel ja teksti pikenemine ei nihuta midagi.

   Murdepunkte on üks, 768 px, kus kahest veerust saab üks.
   ========================================================================== */

/* --- 1. Fondid ------------------------------------------------------------ */

@font-face {
  font-family: Beatrice;
  src: url(/assets/fonts/Beatrice-Regular.woff2) format("woff2"),
       url(/assets/fonts/Beatrice-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Beatrice;
  src: url(/assets/fonts/Beatrice-Medium.woff2) format("woff2"),
       url(/assets/fonts/Beatrice-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Muutujad ---------------------------------------------------------- */

:root {
  --ink: #191935;      /* põhitekst ja jooned */
  --lilac: #b4b6db;    /* sissejuhatus ja jalus */
  --teal: #194247;     /* sertifikaadid */
  --white: #fff;

  /* Lehe serva varu ja sisuveeru laius. Kogu ülejäänud paigutus arvutatakse
     nendest kahest, nii et konteineri laius on ainus koht, kus 1140 esineb.
     --content käib võre veergudesse, kus % tähendab laiust; --contentv mujale,
     kus % tähendaks kõrgust ja annaks vale vastuse. */
  --pad: clamp(20px, 3.5vw, 56px);
  --maxw: 1140px;
  --contentv: min(var(--maxw), 100vw - 2 * var(--pad));

  /* Päise kõrgus tuleb logo enda kujusuhtest, mitte mõõtmisest. */
  --head-logo: clamp(94px, 8vw, 131px);
  --head-pad: clamp(20px, 2.6vw, 37px);

  /* Korduvad tüpograafia-astmed. Iga aste on üks pidev clamp() 320 kuni
     2560 px, mitte iga murdepunkti jaoks eraldi kirjutatud suurus. */
  --fs-title: clamp(1.5rem, 1.35rem + .61vw, 2rem);
  --fs-label: clamp(18px, 1rem + .5vw, 24px);
  --fs-small: clamp(14px, .78rem + .28vw, 18px);

  /* Brändiploki ühised reeglid, kehtivad kõigil seitsmel plokil ühtemoodi. */
  --logo-gap: clamp(10px, 1.2vw, 20px);   /* logo alaserva ja lilla riba vahe */
  --band-pad: clamp(22px, 3vw, 46px);     /* teksti õhk lilla riba sees */
  --band-min: .32;                        /* riba vähim kõrgus, osa sisulaiusest */
  --stand: 6%;                            /* palju tooted riba alt välja jäävad */
  --bleed: 3%;                            /* toodete väljaulatuvus lehe serva poole */
}

/* --- 3. Lähtestus --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 clamp(15px, .9rem + .18vw, 17px)/1.65 Beatrice, system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  overflow-x: clip;
  --header-h: calc(2 * var(--head-pad) + max(var(--head-logo) / 3.359, 32px));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; }
img { border: 0; }

h1, h2, h3 { font-weight: 500; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Väikeste ikoonide puutepind 44 x 44 px. Kasvatab ainult klikiala, mitte
   ikooni ega paigutust, sest pseudoelement on nähtamatu ja voost väljas. */
.header__lang, .hero__scroll-arrow, .footer__social a { position: relative; }
.header__lang::after, .hero__scroll-arrow::after, .footer__social a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* --- 4. Konteiner --------------------------------------------------------- */

/* ankrule kerides jääb sihtkoht fikseeritud päise alt välja */
main > section { scroll-margin-top: calc(var(--header-h) + clamp(12px, 2vw, 28px)); }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- 5. Päis -------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 99;
  padding: var(--head-pad) 0;
}
/* konteineril EI TOHI olla position:relative, muidu kinnitub "eng" sisuveeru
   külge; see peab jääma akna serva külge ka väga laial ekraanil */
.header__inner { display: flex; align-items: center; justify-content: center; }
.header__logo { display: block; line-height: 0; }
.header__logo img { display: block; width: var(--head-logo); height: auto; }
.header__right {
  position: absolute;
  top: 50%;
  right: var(--pad);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
}
.header__lang {
  display: block;
  font-size: clamp(14px, .55rem + .9vw, 26px);
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
}
.header__lang:hover { text-decoration: underline; }

/* Lehe ülaosas on hero tume, seega logo, "eng" ja hamburger on valged.
   Kerides (üle 30 px) läheb päis oma tavavärvi ja muutub madalamaks. */
body:not(.is-scrolled):not(.is-menu-open) .header__logo img { filter: brightness(0) invert(1); }
body:not(.is-scrolled):not(.is-menu-open) .header__lang { color: #fff; }
body:not(.is-scrolled):not(.is-menu-open) .burger__bar,
body:not(.is-scrolled):not(.is-menu-open) .burger__bar::before,
body:not(.is-scrolled):not(.is-menu-open) .burger__bar::after { background: #fff; }
body.is-scrolled { --head-pad: clamp(14px, 1.4vw, 20px); }
/* avatud menüü ajal on päis menüüga sama värvi, muidu jääks must sulgemisrist
   hero-foto peale ja kontrast sõltuks juhuslikust pildist */
body.is-menu-open .header { background: var(--lilac); }
body.is-scrolled .header__lang,
body.is-menu-open .header__lang { color: #000; }

/* Sertifikaatide sektsioon on ühtlaselt tume teal. Seal kukub keritud must
   päis kontrastis läbi: mõõdetud "eng" 1,91:1 ja hamburger 1,55:1, nõue on
   4,5 ja 3. Valge annab samal taustal 11,0:1. Klassi paneb JS siis, kui päise
   riba on sektsiooni peal. Videote kohal seda EI tehta, need ei ole ühtlast
   värvi ja see on eraldi otsustatud, vaata HANDOVER jaotist 6. */
body.is-on-teal:not(.is-menu-open) .header__logo img { filter: brightness(0) invert(1); }
body.is-on-teal:not(.is-menu-open) .header__lang { color: #fff; }
body.is-on-teal:not(.is-menu-open) .burger__bar,
body.is-on-teal:not(.is-menu-open) .burger__bar::before,
body.is-on-teal:not(.is-menu-open) .burger__bar::after { background: #fff; }

/* hamburger; leht on ~13 000 px pikk, seega menüü on ka lauaarvutis */
.burger { display: block; width: 35px; height: 32px; position: relative; }
.burger__bar, .burger__bar::before, .burger__bar::after {
  position: absolute;
  left: 0;
  width: 35px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.burger__bar { top: 50%; margin-top: -1.5px; }
.burger__bar::before { content: ""; top: -10px; }
.burger__bar::after { content: ""; top: 10px; }
.burger[aria-expanded="true"] .burger__bar { transform: rotate(225deg); }
.burger[aria-expanded="true"] .burger__bar::before { top: 0; opacity: 0; }
.burger[aria-expanded="true"] .burger__bar::after { top: 0; transform: rotate(-90deg); }

/* --- 6. Menüü ------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 98;
  background: var(--lilac);
  overflow-y: auto;
  padding: clamp(24px, 6vw, 40px);
}
.menu[hidden] { display: none; }
/* Sama sisuveerg kui ülejäänud lehel, muidu venivad logod 2560 px juures üle
   terve akna laiali ja menüü ei käi enam lehega ühte jalga. Mobiilis on
   --contentv nagunii kitsam kui menüü sisemus, seega seal see ei muuda midagi. */
.menu__list {
  display: grid;
  max-width: var(--contentv);
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  column-gap: clamp(28px, 8vw, 60px);
  row-gap: clamp(28px, 9vw, 70px);
}
/* logolahtrid on ühekõrgused, nupulahter mitte */
.menu__list li:not(.menu__cta) a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(52px, 14vw, 80px);
}
.menu__list img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: scale-down; }
.menu__cta { display: flex; align-items: center; justify-content: center; }
.menu__contact { text-align: center; font-size: clamp(20px, 1rem + 1.1vw, 32px); line-height: 1.2; }
.menu__contact:first-of-type { margin-top: clamp(24px, 5vw, 50px); }
.menu__contact + .menu__contact { margin-top: clamp(6px, 1.5vw, 25px); }
.menu__contact a { display: inline-block; text-decoration: none; }
.menu__contact a:hover { text-decoration: underline; }
body.is-menu-open { overflow: hidden; }

/* --- 7. Nupp -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .62em 1.4em;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: var(--fs-small);
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.btn__arrow {
  width: 2em;
  height: .4em;
  background: url(/media/ui/arrow-right-dark.svg) no-repeat center / 100% 100%;
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn:hover .btn__arrow { background-image: url(/media/ui/arrow-right-light.svg); }

/* --- 8. Hero -------------------------------------------------------------- */

.hero { position: relative; height: 100vh; min-height: 520px; overflow: hidden; }
/* Üks pilt täidab hero kogu ulatuses. Karusselli ega noolte järele enam
   vajadust ei ole, seega ei ole neid ka koodis. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 82% at 26% 52%, rgba(25,25,53,.55) 0%, rgba(25,25,53,.26) 46%, rgba(25,25,53,0) 72%),
    linear-gradient(90deg, rgba(25,25,53,.34) 0%, rgba(25,25,53,.1) 45%, rgba(25,25,53,0) 70%);
}
.hero__caption { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; }
.hero h1 {
  width: 100%;
  font-size: clamp(2.6rem, 1.5rem + 4.5vw, 6.25rem);
  line-height: 1.2;
  color: var(--white);
  text-wrap: balance;
}
/* kerimisnool hero all */
.hero__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 3vw, 40px);
  display: flex;
  justify-content: center;
  z-index: 2;
}
.hero__scroll-arrow {
  display: block;
  width: clamp(9px, 1vw, 15px);
  aspect-ratio: 1 / 5;
  background: url(/media/ui/arrow-down.svg) no-repeat center / 100% auto;
  filter: brightness(0) invert(1);
  animation: bounce 2s infinite;
  transform-origin: center bottom;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

/* --- 9. Sissejuhatus ------------------------------------------------------ */

.intro {
  position: relative;
  background: var(--lilac);
  overflow: hidden;
  padding-block: clamp(90px, 12vw, 180px) clamp(100px, 8vw, 110px);
}
.intro__inner { position: relative; z-index: 1; }
.intro__lead {
  font-size: clamp(1.625rem, .94rem + 2.81vw, 3.75rem);
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: .4em;
  text-wrap: pretty;
}
.intro__m { float: left; width: .92em; height: auto; margin-top: .27em; }
.intro__aside { max-width: 34ch; margin: clamp(24px, 4vw, 48px) 0 0 auto; }
.intro__aside .btn { margin-top: .6em; }
.intro__aside p { font-size: var(--fs-small); line-height: 1.25; margin-bottom: 1.5em; }

/* Kaunistuskujundid on kinnitatud sektsiooni nurkade külge ja nihutatud oma
   suuruse protsendina, seega nad ei triivi ühelgi laiusel. Sektsioon lõikab. */
.intro__shape { position: absolute; z-index: 0; height: auto; max-width: none; }
.intro__shape--1 { top: 0; left: 2%; width: min(30%, 435px); transform: translateY(-62%); }
.intro__shape--2 { top: 0; right: 0; width: min(40%, 585px); transform: translateY(-9%); }
.intro__shape--3 { bottom: 0; right: -4%; width: min(85%, 1220px); transform: translateY(34%); }
.intro__shape--4 { bottom: 0; left: 0; width: min(18%, 376px); transform: translateY(20%); }

/* ==========================================================================
   10. Brändiplokk

   Ploki võre on kogu lehe ainus koht, kus paigutust on vaja seletada.

   Veerud:  varu | tooted | vahe | tekst | varu     (peegelpildis .brand--flip)
   Read:    1 logo
            2 lilla riba: tooted ja tekst
            3 video, servast servani

   Lilla riba on rea 2 taust. Seetõttu algab riba alati täpselt logo alaservast
   --logo-gap võrra allpool ja ükski logo ei saa ribaga lõikuda: seda ei ole
   plokkide kaupa seatud, see tuleb võre ehitusest.

   Riba kõrguse annab tekst ise (+ --band-pad õhku), põrandaks --band-min.
   Tootepildid ei kasvata rida: nad seisavad riba alaserval ja ulatuvad nii
   kõrgele, kui nende oma kõrgus lubab. Seepärast ei nihuta teksti pikendamine
   ega tootepiltide vahetamine kumbki teist paigast.
   ========================================================================== */

.brand {
  --content: min(var(--maxw), 100% - 2 * var(--pad));
  position: relative;
  /* tootepildid ja taustakiri ulatuvad meelega lehe servast välja; clip lõikab
     need horisontaalselt, aga jätab püstise ülevalgumise alles */
  overflow-x: clip;
  margin-top: clamp(3.5rem, 15vw, 18.75rem);
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [content-start media-start] calc(var(--content) * .53) [media-end]
    calc(var(--content) * .04)
    [text-start] calc(var(--content) * .43) [text-end content-end]
    minmax(var(--pad), 1fr) [full-end];
}
.brand--flip {
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [content-start text-start] calc(var(--content) * .43) [text-end]
    calc(var(--content) * .04)
    [media-start] calc(var(--content) * .53) [media-end content-end]
    minmax(var(--pad), 1fr) [full-end];
}

/* lilla riba: rea 2 taust, servast servani, kaunistuskirja peal ja toodete all */
.brand::before {
  content: "";
  grid-area: 2 / full-start / 3 / full-end;
  z-index: 1;
  min-height: calc(var(--band-min) * var(--contentv));
  background: var(--lilac);
}

/* taustakiri: kaunistus toodete taga, jääb lilla riba alla. Absoluutne oma
   võreala sees, seega järgib tooteveergu ega kasvata ühtki rida. */
.brand__bg {
  grid-area: 1 / media-start / 3 / media-end;
  position: absolute;
  z-index: 0;
  top: 0;
  inset-inline-start: -15%;
  margin-top: -14%;
  width: 118%;
  height: auto;
  max-width: none;
}
.brand--flip .brand__bg { inset-inline-start: auto; inset-inline-end: -15%; }

/* Logo laius on osa tekstiveerust, mitte mõõdetud pikslid. Sõnamärgid on
   laiemad, ümarad embleemid kitsamad; logo on tekstiveeru kohal keskel. */
.brand__logo {
  grid-area: 1 / text-start / 2 / text-end;
  z-index: 2;
  justify-self: center;
  width: 72%;
  margin-bottom: var(--logo-gap);
  line-height: 0;
}
.brand__logo img { display: block; width: 100%; height: auto; }
.brand--emblem .brand__logo { width: 48%; }

/* Tooted seisavad ühel joonel riba alaserval. Rea kõrguse annab --h (rea
   kõrgus jagatud oma laiusega), iga toote kõrguse --ph (1 = plokis kõige
   kõrgem toode). Laiused tulevad pildi enda kujusuhtest, seega on 1,5 l
   pakend kõrgem kui 1 l ja 250 ml pakk väike, ilma et ühtki laiust oleks
   vaja kirjutada. Kõik mõõdud on rea laiuse protsendid, seega püsib rea
   siseehitus igal ekraanil sama. Rida on absoluutne ega kasvata riba:
   tekst ja tooted ei tõmble teineteise järgi. */
.brand__media {
  grid-area: 2 / media-start / 3 / media-end;
  position: absolute;
  z-index: 2;
  bottom: 0;
  inset-inline: calc(-1 * var(--bleed)) 0;
  aspect-ratio: 1 / var(--h, .9);
  transform: translateY(var(--stand));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  container-type: inline-size;   /* kampaaniasildi mõõdupuu */
}
.brand--flip .brand__media { inset-inline: 0 calc(-1 * var(--bleed)); }
.brand__media > * {
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--ph, 1) * 100%);
  max-width: none;
  /* pööre käib pildi keskpunkti ümber, nagu kujunduses: nii jäävad
     sildid ühele kõrgusele ja pudelid nõjatuvad ainult ülaosaga kokku */
  transform: translateY(var(--dy, 0));
  rotate: var(--rot, 0deg);
  z-index: var(--z, auto);   /* millise toote ette teine jääb */
}
/* negatiivne --gap paneb tooted kattuma, positiivne lahutab */
.brand__media > * + * { margin-inline-start: var(--gap, 0); }

.brand__body {
  grid-area: 2 / text-start / 3 / text-end;
  z-index: 2;
  align-self: center;
  padding-block: var(--band-pad);
}
.brand__body p { font-size: clamp(14px, .69rem + .76vw, 1.5rem); line-height: 1.42; text-wrap: pretty; }
.brand__body .brand__warning {
  font-size: clamp(12px, .7rem + .1vw, 14px);
  line-height: 1.45;
  letter-spacing: .02em;
  /* .75 annab lillal ribal 5,04:1 ehk täidab AA 4,5:1; .6 andis 3,47:1 */
  opacity: .75;
  margin-top: 1.6em;
}

/* videoribal EI TOHI olla z-indexit: võrdsete korral võidab hilisem element
   koodis ja video joonistuks tootepiltide peale */
/* overflow: clip ei ole ilustus. Kaunistuskiri on tõstetud 45% oma kõrgusest
   ülespoole ja see kõrgus kasvab koos akna laiusega, riba ülaserv aga jääb
   kinni. Umbes 2400 px juures tuleks kiri ribast välja valgele logo kõrvale.
   Riba peal on ta nagunii nähtamatu, sest ta on täpselt sama lilla (#B4B6DB),
   seega siin lõikamine ei võta ära midagi, mida keegi näeks. */
.brand__video { grid-area: 3 / full-start / 4 / full-end; position: relative; overflow: clip; }
.brand__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}
/* kaunistuskiri jääb video peale, aga toodete alla */
.brand__decor {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-45%);
}

/* --- 11. Sertifikaadid ---------------------------------------------------- */

.certs {
  position: relative;
  overflow-x: clip;
  background: var(--teal);
  color: var(--white);
  padding-block: clamp(50px, 6vw, 70px) clamp(70px, 11vw, 160px);
}
.certs .wrap { position: relative; z-index: 1; }
.certs .wrap > * { max-width: 825px; margin-inline: auto; }
.certs__title, .contact__title, .footer__title { font-size: var(--fs-title); line-height: 1.2; text-wrap: balance; }
.certs__title { text-align: center; margin-bottom: clamp(30px, 4vw, 52px); }
.certs__list { display: grid; gap: clamp(34px, 5vw, 57px); }
/* märgised jäävad oma loomulikku suurusesse, sest nende omavaheline suhe on
   osa kujundusest; kitsal ekraanil kahandab neid ühine lagi */
.certs__list li {
  display: grid;
  grid-template-columns: min(130px, 26%) 1fr;
  column-gap: clamp(20px, 6%, 90px);
  align-items: start;
}
.certs__list img { justify-self: start; max-width: 100%; height: auto; }
.certs p { font-size: var(--fs-small); line-height: 1.25; }
.certs__name { margin-bottom: 1.3em; }
.certs__shape {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: min(14%, 267px);
  height: auto;
  transform: translateY(45%);
}

/* --- 12. Kontaktivorm ----------------------------------------------------- */

.contact { position: relative; padding-top: clamp(90px, 14vw, 250px); }
.contact__title { margin-bottom: clamp(28px, 3.6vw, 56px); }
.contact__title, .form { max-width: 1010px; margin-inline: auto; }
.form { margin-bottom: clamp(50px, 5.5vw, 80px); }
.form__row { margin-bottom: clamp(28px, 3.4vw, 52px); }
.form label { display: block; font-size: var(--fs-label); line-height: 1.5; }
.form input[type=email], .form input[type=text], .form textarea {
  display: block;
  width: 100%;
  padding: .6em .9em;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  /* 16 px alammäär: alla selle suumib iOS Safari väljale fokuseerides kogu
     lehe sisse ja jätab ta suumituks. Laial ekraanil jääb päritud suurus. */
  font-size: max(16px, 1em);
  color: #000;
}
.form textarea { min-height: 14em; resize: vertical; }
.form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__actions { text-align: center; margin-top: clamp(35px, 6.5vw, 100px); }
.form__submit {
  min-width: 14rem;
  padding: .62em 1.4em;
  border: 1px solid var(--ink);
  border-radius: 100px;
  background: var(--white);
  font-size: var(--fs-label);
  line-height: 1.5;
  transition: background-color .3s ease, color .3s ease;
}
.form__submit:hover { background: var(--ink); color: var(--white); }
/* Väljapõhine viga. Tühjana ei võta ta ruumi, seega vormi paigutus ei nihku. */
.form__error { display: block; font-size: var(--fs-small); color: #a3231f; }
.form__error:not(:empty) { margin-top: .5em; }
.form__status { text-align: center; font-size: var(--fs-small); }
.form__status:not(:empty) { margin-top: 1.2em; }
.form__status.is-error { color: #a3231f; }
/* kaunistus ulatub jaluse alla, seepärast negatiivne alumine varu */
.contact__decor { display: block; width: 100%; height: auto; margin-bottom: -9%; }

/* --- 13. Jalus ------------------------------------------------------------ */

.footer {
  background: var(--lilac);
  text-align: center;
  padding-block: clamp(45px, 5.5vw, 75px) clamp(80px, 17vw, 245px);
}
/* Kontakti kaunistus ulatub jaluse alale ja maaliks end muidu teksti peale.
   Sisu tõstetakse omaette kihile; lilla taust jääb kujundite alla, nii et
   kaunistuse sulandumine jalusesse säilib. */
.footer .wrap { position: relative; }
.footer__title { margin-bottom: clamp(30px, 4vw, 58px); }
.footer a { text-decoration: none; }
.footer__mail, .footer__tel { display: block; font-size: clamp(1.75rem, 1.2rem + 2.27vw, 3.75rem); line-height: 1.2; }
.footer__mail:hover, .footer__tel:hover { text-decoration: underline; }
.footer p + p { margin-top: clamp(10px, 2vw, 30px); }
.footer__social { margin-top: clamp(15px, 6vw, 84px); }
.footer__social a { display: inline-block; line-height: 0; }
.footer__social img { width: clamp(34px, 4.5vw, 68px); height: auto; }

/* --- 14. Ilmumine kerimisel ----------------------------------------------- */

/* Üks animatsioon, suuna annab --from oma suuruse protsendina. Vaikimisi on
   sisu NÄHTAV: peidab alles JS, kui tal on ka päriselt kavas see ilmutada.
   Nii ei kao leht ära, kui script.js jääb laadimata või katkeb. */
.reveal { opacity: 1; }
.reveal.is-pending { opacity: 0; }
.reveal.is-in { animation: .5s ease .15s both reveal-in; }
.reveal--down { --from: 0 -10%; }
.reveal--left { --from: -10% 0; }
.reveal--right { --from: 10% 0; }
@keyframes reveal-in { from { opacity: 0; translate: var(--from, 0 10%); } to { opacity: 1; translate: none; } }

/* hiireparallax liigutab translate-omadust, pöörde ja nihke hoiab CSS eraldi */
.parallax { transition: translate 1s cubic-bezier(.25, .46, .45, .94); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal.is-pending { opacity: 1; }
  .reveal.is-in { animation: none; }
  .parallax { transition: none; translate: none !important; }
  .hero__scroll-arrow { animation: none; }
}

/* ==========================================================================
   16. Alla 768 px: kahest veerust saab üks

   Ainus murdepunkt lehel. Read: logo, tooted, lilla riba tekstiga, video.
   ========================================================================== */

@media (max-width: 767px) {
  /* minmax(0, 1fr), mitte 1fr: toote rida on voogus ja tema kõrgus tuleb oma
     laiusest, seega automaatne miinimum jookseks iseendaga ringi */
  .brand, .brand--flip {
    grid-template-columns:
      [full-start] var(--pad)
      [content-start media-start text-start] minmax(0, 1fr) [media-end text-end content-end]
      var(--pad) [full-end];
  }
  .brand__logo {
    justify-self: start;
    width: min(88%, 340px);
    margin-bottom: clamp(20px, 6vw, 34px);
  }
  .brand--emblem .brand__logo { width: min(58%, 250px); }
  /* Mobiilis tuleb toote rida tavavoogu ja saab oma rea. Rea siseehitust ei
     muudeta: kõik mõõdud on rea laiuse protsendid, seega täidab rida siin
     tooteveerust täpselt sama osa kui lauaarvutis ja mahub kindlasti ära. */
  .brand__media {
    position: relative;   /* jääb sildi pidepunktiks, aga tuleb tavavoogu */
    transform: none;
    min-width: 0;
    margin-bottom: clamp(20px, 6vw, 34px);
  }
  .brand__body, .brand::before { grid-row: 3 / 4; }
  .brand__video { grid-row: 4 / 5; }
  /* fritzil ja Oatlyl tuleb tekst mobiilis video järel */
  .brand--video-first .brand__body,
  .brand--video-first::before { grid-row: 4 / 5; }
  .brand--video-first .brand__video { grid-row: 3 / 4; }
  .brand__bg { grid-area: 2 / media-start / 3 / media-end; width: 130%; inset-inline-start: -15%; margin-top: -6%; }
  .brand--flip .brand__bg { inset-inline-start: auto; inset-inline-end: -15%; }
  .brand__decor { transform: translateY(-30%); }

  .header__inner { justify-content: space-between; }
  .header__right { position: static; transform: none; }

  .hero__caption { align-items: flex-start; padding-top: calc(var(--header-h) + 3rem); text-align: center; }
  .hero__veil {
    background:
      radial-gradient(92% 44% at 50% 24%, rgba(25,25,53,.58) 0%, rgba(25,25,53,.28) 48%, rgba(25,25,53,0) 76%),
      linear-gradient(rgba(25,25,53,.42) 0%, rgba(25,25,53,0) 58%);
  }

  .intro { padding-block: clamp(120px, 34vw, 165px) clamp(150px, 50vw, 230px); }
  .intro__shape--1 { width: min(38%, 160px); transform: translateY(-46%); }
  .intro__shape--2 { width: min(32%, 130px); transform: translateY(-8%); }
  .intro__shape--3 { width: min(115%, 460px); right: -14%; transform: translateY(28%); }
  .intro__shape--4 { display: none; }
  .intro__aside { max-width: none; margin-left: 0; }

  .certs__list li { column-gap: clamp(16px, 5%, 30px); }
}