/* ==========================================================================
   EINULA mööblipaigaldus
   Üks suund: loodijoon. Must lõuend, kuldne joon, lai tähevahe.
   Kõik värvid, vahed ja kiirused on tokenid siin ülal.
   ========================================================================== */

:root{
  /* --- värv --- */
  --canvas:#0C0B0A;
  --canvas-2:#100E0C;
  --panel:#16130F;
  --panel-2:#1B1712;
  --line:#2A251E;
  --line-strong:#3B342A;
  --accent:#FFDE59;
  --accent-hover:#FFE88C;
  --brass:#C9A227;
  --accent-soft:rgba(255,222,89,.16);
  --accent-faint:rgba(255,222,89,.07);
  --text:#F2EFE9;
  --text-2:#A7A29A;
  --text-3:#7C766D;

  /* --- kiri --- */
  --display:'Unbounded',ui-sans-serif,system-ui,sans-serif;
  --body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* --- rütm --- */
  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --s-pad:clamp(72px,11vh,150px);
  --r:3px;

  /* --- liikumine --- */
  --e-out:cubic-bezier(.16,.84,.28,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t:.55s;

  /* --- teksti vari kangelases --- */
  --tshadow:0 1px 2px rgba(5,5,8,.95),0 3px 12px rgba(5,5,8,.8),0 10px 44px rgba(5,5,8,.8);
}

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

/* Klassist tulev display võidab muidu brauseri enda [hidden] reegli. */
[hidden]{display:none!important}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{
  scroll-behavior:smooth;
  /* Ankur ei jää päise alla peitu. */
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  line-height:1.62;
  font-weight:400;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

::selection{background:var(--accent);color:#0C0B0A}

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

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.mono{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
}

.skip{
  position:absolute;left:12px;top:-64px;z-index:120;
  background:var(--accent);color:#0C0B0A;
  padding:12px 18px;border-radius:var(--r);
  font-weight:600;text-decoration:none;
  transition:top .25s var(--e-out);
}
.skip:focus{top:12px}

/* ==========================================================================
   Keskkond: üks kiht terve lehe taga, aeglane triiv, et kerimine oleks
   liikumine läbi ruumi, mitte üle virnastatud kastide.
   ========================================================================== */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}

.env-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(50% 42% at 22% 12%,rgba(255,222,89,.055),transparent 70%),
    radial-gradient(46% 40% at 82% 74%,rgba(201,162,39,.05),transparent 72%),
    radial-gradient(70% 60% at 50% 50%,rgba(20,17,13,.6),transparent 75%);
  animation:drift 96s var(--e-soft) -22s infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-2.2%,-1.4%,0) scale(1.02)}
  to{transform:translate3d(2.6%,1.8%,0) scale(1.08)}
}

.env-grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Päis
   ========================================================================== */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:14px var(--gut);
  transition:background .4s var(--e-soft),border-color .4s var(--e-soft),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(10,9,8,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line);
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand-mark{width:30px;height:30px;color:var(--accent);flex:0 0 auto;
  transition:transform .6s var(--e-out)}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06)}
.brand-word{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-name{
  font-family:var(--display);font-weight:300;font-size:.98rem;
  letter-spacing:.36em;text-indent:.36em;color:var(--text);
}
.brand-sub{
  font-family:var(--mono);font-size:.48rem;letter-spacing:.28em;
  color:var(--text-3);text-indent:.28em;
}

.site-nav{display:flex;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.site-nav a{
  position:relative;text-decoration:none;color:var(--text-2);
  font-size:.86rem;letter-spacing:.01em;padding:6px 0;
  transition:color .3s var(--e-soft);
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--e-out);
}
.site-nav a:hover{color:var(--text)}
.site-nav a:hover::after{transform:scaleX(1)}

.head-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.site-nav+.head-right{margin-left:0}

.lang{display:flex;gap:2px;align-items:center}
.lang a{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-decoration:none;color:var(--text-3);padding:5px 7px;border-radius:2px;
  transition:color .3s var(--e-soft),background .3s var(--e-soft);
}
.lang a:hover{color:var(--text)}
.lang a[aria-current]{color:var(--accent);background:var(--accent-faint)}

/* ==========================================================================
   Nupud
   ========================================================================== */
.btn{
  --btn-bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;overflow:hidden;
  transition:transform .45s var(--e-out),background .35s var(--e-soft),
             border-color .35s var(--e-soft),color .35s var(--e-soft),box-shadow .45s var(--e-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-accent{background:var(--accent);color:#0C0B0A;box-shadow:0 0 0 rgba(255,222,89,0)}
.btn-accent:hover{background:var(--accent-hover);box-shadow:0 10px 34px rgba(255,222,89,.2)}

.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.btn-sm{padding:10px 18px;font-size:.82rem}
.btn-num{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;opacity:.72}

.burger{
  display:none;width:42px;height:42px;padding:0;border:1px solid var(--line-strong);
  background:transparent;border-radius:var(--r);cursor:pointer;
  align-items:center;justify-content:center;
}
.burger-b{position:relative;display:block;width:16px;height:1px;background:var(--text);
  transition:background .2s}
.burger-b::before,.burger-b::after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:var(--text);
  transition:transform .4s var(--e-out);
}
.burger-b::before{top:-5px}
.burger-b::after{top:5px}
.burger[aria-expanded="true"] .burger-b{background:transparent}
.burger[aria-expanded="true"] .burger-b::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-b::after{transform:translateY(-5px) rotate(-45deg)}

/* Ainult kitsal ekraanil. Töölaual on ta olemas, aga mitte kunagi nähtav. */
.mob-nav{
  position:fixed;inset:64px 0 0;z-index:55;
  background:rgba(9,8,7,.97);backdrop-filter:blur(18px);
  display:none;flex-direction:column;gap:6px;
  padding:28px var(--gut) 40px;
  overflow-y:auto;
}
@media (max-width:1080px){
  .mob-nav:not([hidden]){display:flex}
}
.mob-nav nav{display:flex;flex-direction:column}
.mob-nav nav a{
  text-decoration:none;color:var(--text);font-family:var(--display);font-weight:300;
  font-size:1.5rem;padding:14px 0;border-bottom:1px solid var(--line);
}
.mob-nav .lang-mob{margin:20px 0 22px}
.mob-nav .lang-mob a{font-size:.72rem;padding:8px 12px;border:1px solid var(--line)}

/* ==========================================================================
   KANGELANE
   Kõrgus on kerimisulatus. Viis bändi, igaühele umbes 100vh platood.
   ========================================================================== */
/* Ilma skriptita on kangelane üks ekraan: kerimisulatus ilma ajamita
   tähendaks seitset ekraanitäit sama pilti. */
.hero{position:relative;height:100vh;z-index:1}
.js .hero{height:320vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

.hero-stage{
  position:relative;height:100%;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:1fr;
  gap:clamp(16px,3vw,48px);
  padding:92px var(--gut) 64px;
}

/* Kogu lava kohal üks pehme tumendus, et ükski joon ei jookseks teksti alt läbi. */
.hero-pin::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 116% 88% at 50% 46%,rgba(10,9,14,0) 34%,rgba(10,9,14,.6) 100%);
}

.hero-eyebrow{
  position:absolute;top:clamp(84px,11vh,120px);left:var(--gut);z-index:4;
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);text-shadow:var(--tshadow);
}
.hero-eyebrow .dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-soft);
  animation:pulse 4.4s var(--e-soft) -1.2s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,222,89,.4)}
  55%{box-shadow:0 0 0 7px rgba(255,222,89,0)}
}

/* --- joonis --- */
/* Mõlemad lapsed lähevad selgelt esimesse ritta. Ilma selleta lükkab võre
   teise lapse uude ritta, sest esimene võttis parema veeru. */
.hero-art{grid-column:2;grid-row:1;position:relative;height:100%;
  display:grid;place-items:center;z-index:1}
.draw{width:100%;height:100%;max-height:min(88vh,880px);overflow:visible}

.draw line,.draw rect,.draw circle,.draw path{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Iga vaatus on nähtamatu, kuni ta kord kätte jõuab. Ilma selleta paistaks
   täidetud kujundite täide juba enne, kui nende joon on joonistatud. */
.draw{--a1:1;--a2:1;--a3:1;--a4:1;--a5:1;--a6:1}
.js .draw{--a1:0;--a2:0;--a3:0;--a4:0;--a5:0;--a6:0}
.act-1{opacity:clamp(0,var(--a1,0) * 26,1)}
.act-2{opacity:clamp(0,var(--a2,0) * 26,1)}
.act-3{opacity:clamp(0,var(--a3,0) * 26,1)}
.act-4{opacity:clamp(0,var(--a4,0) * 26,1)}
.act-5{opacity:clamp(0,var(--a5,0) * 26,1)}
.act-6{opacity:clamp(0,var(--a6,0) * 26,1)}

/* Siltide põhistiil enne vaatuste reegleid, ilma opacity'ta, et iga vaatus
   saaks oma sildi ilmumist ise juhtida. */
.draw .lbl{
  font-family:var(--mono);font-size:15px;letter-spacing:.18em;
  fill:var(--accent);fill-opacity:.72;
}

/* Vaatus 1: loodijoon ja pomm */
.act-1 .plumb{
  stroke:var(--accent);stroke-width:1.4;
  stroke-dasharray:922;stroke-dashoffset:calc(922 * (1 - var(--a1,0)));
  filter:drop-shadow(0 0 6px rgba(255,222,89,.4));
}
.act-1 .bob{
  fill:var(--accent);stroke:none;
  transform:translateY(calc(var(--a1,0) * 894px));
  opacity:clamp(0,var(--a1,0) * 14,1);
}
/* Silt sõidab pommiga kaasa ja astub kõrvale, kui mõõtmine algab. */
.act-1 .lbl-plumb{
  transform:translateY(calc(var(--a1,0) * 894px));
  opacity:calc(clamp(0,(var(--a1,0) - .18) * 3,1) * (1 - var(--a2,0)));
}

/* Vaatus 2: mõõdumärgid ja tasapinna joon */
.act-2 .tick{
  --k:clamp(0,(var(--a2,0) - var(--th,0)) * 3.4,1);
  opacity:var(--k);
}
.act-2 .tick line{stroke:var(--accent);stroke-width:1.4;
  transform:scaleX(var(--k));transform-origin:500px center}
/* Mõõdujoon jookseb loodijoonest mõlemale poole välja. */
.act-2 .ref{
  stroke:var(--brass);stroke-width:1;
  stroke-dasharray:436;
  stroke-dashoffset:calc(436 * (1 - clamp(0,(var(--a2,0) - .2) * 1.6,1)));
  opacity:.85;
}
.act-2 .ref-cap{
  stroke:var(--accent);stroke-width:1.4;
  opacity:clamp(0,(var(--a2,0) - .72) * 4,1);
}
.act-2 .lbl-level{opacity:clamp(0,(var(--a2,0) - .78) * 4,1)}

/* Vaatus 3: ankrud, iga üks lööb kohale */
.act-3 .anchor{
  --k:clamp(0,(var(--a3,0) - var(--th,0)) * 3.6,1);
  opacity:var(--k);
  transform:scale(calc(1.7 - .7 * var(--k)));
  transform-box:fill-box;transform-origin:center;
}
.act-3 .anchor circle{stroke:var(--accent);stroke-width:1.6;fill:rgba(255,222,89,.09)}
.act-3 .anchor line{stroke:var(--accent);stroke-width:1.2;opacity:.75}
/* Ankru silt astub kõrvale, kui korpused tema kohale joonistuvad. */
.act-3 .lbl-anchor{
  opacity:calc(clamp(0,(var(--a3,0) - .55) * 3,1) * (1 - clamp(0,var(--a4,0) * 2.6,1)));
}

/* Vaatus 4: korpused joonistuvad, tasapind ja põrand */
.act-4 .unit{--k:clamp(0,(var(--a4,0) - var(--th,0)) * 2.3,1)}
.act-4 .carcass{
  stroke:var(--brass);stroke-width:1.7;
  stroke-dasharray:1200;stroke-dashoffset:calc(1200 * (1 - var(--k)));
}
.act-4 .door{
  opacity:clamp(0,(var(--k) - .45) * 2.6,1);
  /* Uks algab viltu ja loodib end vaatuses 5. */
  transform:rotate(calc(var(--tilt) * (1 - var(--a5,0))));
  transform-origin:calc(var(--ox) * 1px) calc(var(--oy) * 1px);
}
.act-4 .panel{stroke:var(--brass);stroke-width:1;opacity:.62;fill:rgba(201,162,39,.035)}
.act-4 .handle{stroke:var(--accent);stroke-width:2.2;opacity:.85}
.act-4 .worktop{
  stroke:var(--accent);stroke-width:1.5;fill:rgba(255,222,89,.05);
  stroke-dasharray:1670;stroke-dashoffset:calc(1670 * (1 - clamp(0,(var(--a4,0) - .3) * 1.7,1)));
}
.act-4 .plinth{stroke:var(--brass);stroke-width:1;opacity:calc(.6 * var(--a4,0))}
.act-4 .floor{
  stroke:var(--line-strong);stroke-width:1;
  stroke-dasharray:940;stroke-dashoffset:calc(940 * (1 - var(--a4,0)));
}

/* Vaatus 5: vahed ühtlustuvad */
.act-5 .gap line{
  stroke:var(--accent);stroke-width:2.4;
  opacity:calc(.9 * var(--a5,0));
  stroke-dasharray:300;stroke-dashoffset:calc(300 * (1 - var(--a5,0)));
}
.act-5 .lbl-gap{opacity:clamp(0,(var(--a5,0) - .4) * 3,1)}

/* Vaatus 6: diagonaalimõõt ja allkiri */
.act-6 .diag{
  stroke:var(--accent);stroke-width:1;stroke-dasharray:4 6;
  opacity:calc(.62 * var(--a6,0));
}
.act-6 .lbl-diag{opacity:clamp(0,(var(--a6,0) - .35) * 2.4,1)}
.act-6 .sign path{
  stroke:var(--accent);stroke-width:7;fill:none;
  stroke-dasharray:270;stroke-dashoffset:calc(270 * (1 - var(--a6,0)));
  filter:drop-shadow(0 0 8px rgba(255,222,89,.32));
}

/* --- bändid --- */
.bands{grid-column:1;grid-row:1;position:relative;z-index:3;
  justify-self:start;align-self:center;width:100%;max-width:44ch}
.band{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
}
/* Ilma skriptita jääb nähtavale ainult lõppbänd, mis on lehe tegelik lubadus. */
.band-settle{opacity:1;pointer-events:auto}
.js .band{opacity:var(--op,0);pointer-events:none}
.js .band.is-live{pointer-events:auto}
.band.is-live{pointer-events:auto}

/* Bändi enda tumendus: süveneb ainult siis, kui see bänd on peal. */
.band::before{
  content:"";position:absolute;inset:-14% -12%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72 * var(--k,1));
  background:radial-gradient(ellipse 78% 70% at 42% 50%,
    rgba(6,5,9,.72) 0%,rgba(6,5,9,.46) 46%,rgba(6,5,9,0) 76%);
}

.band-t{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.04;letter-spacing:-.018em;
  text-shadow:var(--tshadow);
  margin:0;
}
h1.band-t{font-size:clamp(2.2rem,4.9vw,4rem)}

.band-sub{
  margin-top:1.1rem;color:var(--text-2);
  font-size:1.02rem;line-height:1.55;max-width:38ch;
  text-shadow:var(--tshadow);
}
.band-sub .tri{
  display:inline-block;margin-right:.5em;color:var(--text);
  opacity:clamp(0,(var(--k,0) - .3 - var(--n) * .13) * 4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .3 - var(--n) * .13) * 4,1)) * 10px));
}
.settle-lead{
  opacity:clamp(0,(var(--k,0) - .5) * 3.4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .5) * 3.4,1)) * 12px));
  max-width:42ch;
}
.band-cta{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem;
  opacity:clamp(0,(var(--k,0) - .68) * 4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .68) * 4,1)) * 14px));
}

/* --- teksti sissetulekud, kõik ainult transform ja opacity --- */
.split{display:inline-block}
.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block}

/* (a) kukkumine: sõnad tulevad ülalt alla, nagu loodipomm */
.split.drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (b) reasse libisemine: tähed leiavad oma koha, nagu mõõdumärgid */
.split.slide .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (c) löök: sõna kasvab üle ja vajub kohale, nagu ankur seina */
.split.punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 3.2,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - .14) * 2.8,1);
  opacity:var(--kc);
  transform:scale(calc(.68 + .46 * var(--kc) - .14 * var(--ks)));
}
/* (d) vahede ühtlustamine: uus sissetulek, tähevahed lähenevad ühtlasele */
.split.gaps .c{
  --kc:clamp(0,var(--k,0) * 1.25,1);
  opacity:clamp(0,var(--k,0) * 2.4,1);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (e) tõus: lõpubänd, sõnad tõusevad lugemise järjekorras */
.split.rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 20px));
}

.cue{
  display:none;position:absolute;left:50%;bottom:26px;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-3);
  opacity:var(--cue,1);transition:opacity .5s var(--e-soft);
}
.js .cue{display:flex}
.js .hold{display:flex}
.cue-line{display:block;width:1px;height:34px;background:linear-gradient(var(--accent),transparent);
  animation:cueRun 2.6s var(--e-soft) infinite}
@keyframes cueRun{
  0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{opacity:1}
  100%{transform:scaleY(1);transform-origin:top;opacity:0}
}

/* ==========================================================================
   Sektsioonide ühisosa
   ========================================================================== */
.s{position:relative;z-index:1;padding:var(--s-pad) 0;background:var(--canvas)}
/* Sektsioonid vahelduvad: valu, miks, teenused, kuidas, tood, loodis,
   piirkond, tagasiside, kontakt. */
.s-proof,.s-process,.s-level,.s-reviews{background:var(--canvas-2)}
.s+.s{border-top:1px solid var(--line)}

.wrap{width:min(var(--wrap),100% - var(--gut) * 2);margin-inline:auto}

.s-head{max-width:62ch;margin-bottom:clamp(38px,5vh,64px)}
.kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.kicker-rule{
  display:block;width:clamp(28px,4vw,54px);height:1px;background:var(--accent);
  transform-origin:left;
  transition:transform .9s var(--e-out) .1s;
}
.js .kicker-rule{transform:scaleX(0)}
.reveal.in .kicker-rule,.s-head.in .kicker-rule{transform:scaleX(1)}

.s-head h2{font-size:clamp(1.85rem,3.5vw,2.9rem)}
.lead{margin-top:1.1rem;color:var(--text-2);font-size:1.04rem;max-width:56ch}

/* --- sisenemised ---
   Peidus on ainult see, mis päriselt sisse tuleb. Ilma skriptita ei ole klassi
   `js` ja kõik on kohe lõppseisus, nii et leht on terve ka siis, kui skript
   üldse kohale ei jõua. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[style*="--n"]{transition-delay:calc(var(--n,0) * 90ms)}
/* Kui sisenemine on tehtud, tuleb viide ära võtta, muidu logiseb iga hiljem
   tulev üleminek. Valija peab olema vähemalt sama tugev kui see, mis viite pani. */
.js .reveal.in.done[style*="--n"]{transition-delay:0s!important}

/* ==========================================================================
   Valu: nummerdatud read
   ========================================================================== */
.pain-list{list-style:none;margin:0;padding:0}
.pain-row{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding:clamp(24px,3.4vh,40px) 0;
}
.pain-n{color:var(--accent);opacity:.85;font-size:.7rem}
.pain-row h3{font-size:clamp(1.15rem,1.9vw,1.5rem)}
.pain-row p{color:var(--text-2);max-width:56ch}
.pain-rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
  transform-origin:left;
  transition:transform 1.1s var(--e-out) .18s;
}
.js .pain-rule{transform:scaleX(0)}
.pain-row.in .pain-rule{transform:scaleX(1)}
.pain-row:last-child .pain-rule{background:linear-gradient(90deg,var(--line),transparent)}

/* ==========================================================================
   Teenused: kaardivõre, esimene kaart laiem
   ========================================================================== */
.grid-services{
  display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(6,1fr);
}
.card{
  grid-column:span 2;
  position:relative;padding:clamp(22px,2.6vw,34px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:border-color .5s var(--e-soft),transform .6s var(--e-out),background .5s var(--e-soft);
}
.card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-out);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--panel-2)}
.card:hover::before{transform:scaleX(1)}
.card-code{color:var(--accent);opacity:.8;margin-bottom:1.1rem}
.card h3{font-size:1.16rem;margin-bottom:.7rem;line-height:1.2}
.card-body{color:var(--text-2);font-size:.95rem}
.card-spec{
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);
  color:var(--text-3);font-size:.58rem;
}
/* Kolm kaarti reas, kaks rida, ilma auguta. Kõik kuus saavad võrdse kohtlemise:
   üks teistsuguse laiusega kaart loeks külastajale august, mitte rütmist. */

/* ==========================================================================
   Tehtud tööd: astmeline galerii
   ========================================================================== */
.shots{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:repeat(2,1fr)}
.shot{margin:0}
.shot:nth-child(odd){margin-top:0}
.shot:nth-child(even){margin-top:clamp(0px,4vw,56px)}
/* Vari tostab foto lehe pinnalt ules. Mustal loundil ei loe must vari
   ise, nii et sugavuse annab kolm kihti korraga ja aarde teeb nahtavaks
   ounike kuldne joon. Teisendus on RAAMIL, mitte figure'il, sest figure
   kannab juba sisenemise teisendust ja need kaks kaotaksid teineteist. */
.shot-frame{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
  aspect-ratio:4/3;
  box-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 18px 38px -12px rgba(0,0,0,.8),
    0 44px 84px -28px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,222,89,.05);
  transition:box-shadow .8s var(--e-out),transform .8s var(--e-out),
             border-color .6s var(--e-soft);
}
.shot:hover .shot-frame{
  transform:translateY(-5px);
  border-color:rgba(255,222,89,.2);
  box-shadow:
    0 4px 10px rgba(0,0,0,.55),
    0 28px 58px -14px rgba(0,0,0,.85),
    0 66px 120px -32px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,222,89,.16),
    0 0 60px -10px rgba(255,222,89,.1);
}
.shot-frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.2s var(--e-out),filter 1.2s var(--e-out);
  filter:saturate(.82) contrast(1.04) brightness(.9);
}
.shot:hover .shot-frame img{transform:scale(1.06);filter:saturate(.96) contrast(1.02) brightness(1)}
/* Pehme sisemine vinjett: foto enda servad tumenevad lehe värvi poole, nii et
   hele köögipilt ei istu mustal lõuendil nagu kleeps, vaid sulab sellesse. */
.shot-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:
    inset 0 0 64px 10px rgba(8,7,6,.5),
    inset 0 0 0 1px rgba(255,222,89,.06);
  transition:box-shadow .8s var(--e-out);
}
.shot:hover .shot-frame::after{
  box-shadow:
    inset 0 0 54px 6px rgba(8,7,6,.34),
    inset 0 0 0 1px rgba(255,222,89,.14);
}

/* Kuldne nurk: logo enda nurgik, mitte kaunistus. */
.shot-corner{
  position:absolute;left:14px;bottom:14px;width:26px;height:26px;z-index:1;
  border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);
  opacity:.7;
}
.shot figcaption{
  margin-top:.9rem;color:var(--text-2);font-size:.9rem;
  display:flex;gap:.7em;align-items:baseline;
}
.shot figcaption .mono{color:var(--accent);opacity:.8}
.work-note{margin-top:clamp(24px,4vh,44px);color:var(--text-3)}

/* Kui fotot veel ei ole, ei jää lehele auku: raam ise on kujundatud pind,
   millel seisab mark ja üks rida teksti. JavaScript paneb klassi peale siis,
   kui pilt päriselt kohale ei jõua. */
.shot-ph{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--text-3);text-align:center;padding:20px;
}
.shot-ph .mark{width:42px;height:42px;color:var(--accent);opacity:.32}
.shot.is-empty .shot-frame{
  border-style:dashed;border-color:var(--line-strong);
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,222,89,.014) 12px 24px);
}
.shot.is-empty .shot-frame img{display:none}
.shot.is-empty .shot-ph{display:flex}

/* ==========================================================================
   Kuidas käib: neli sammu ühel teljel
   ========================================================================== */
.steps{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;gap:clamp(22px,3vw,32px);
  grid-template-columns:repeat(4,1fr);
}
.steps-spine{
  position:absolute;left:0;right:0;top:15px;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--brass) 55%,transparent);
  transform-origin:left;
  transition:transform 1.6s var(--e-out) .1s;
}
.js .steps-spine{transform:scaleX(0)}
.steps.in .steps-spine{transform:scaleX(1)}
.step{position:relative;padding-top:44px}
.step::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--canvas-2);border:1px solid var(--accent);
  transition:transform .6s var(--e-out) calc(var(--n) * 130ms + .25s);
}
.js .step::before{transform:scale(0)}
.step.in::before{transform:scale(1)}
.step-n{
  position:absolute;left:20px;top:6px;color:var(--accent);font-size:.62rem;opacity:.8;
}
.step h3{font-size:1.1rem;margin-bottom:.6rem}
.step p{color:var(--text-2);font-size:.94rem}

/* ==========================================================================
   Hinnad: tabel mõõduskaalaga
   ========================================================================== */
.price-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.price-head{
  display:flex;justify-content:space-between;padding:14px clamp(18px,2.4vw,30px);
  color:var(--text-3);border-bottom:1px solid var(--line);background:var(--canvas-2);
}
.price-rows{list-style:none;margin:0;padding:0}
.price-row{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding:clamp(16px,2.2vh,24px) clamp(18px,2.4vw,30px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--e-soft);
}
.price-row:last-child{border-bottom:0}
.price-row:hover{background:var(--panel-2)}
/* Loodijoon tuleb tabelisse tagasi mõõduskaalana. */
.price-row::before{
  content:"";position:absolute;left:0;top:50%;width:2px;height:0;background:var(--accent);
  transform:translateY(-50%);transition:height .5s var(--e-out);
}
.price-row:hover::before{height:56%}
.price-label{display:flex;flex-direction:column;gap:4px;font-size:1.04rem}
.price-note{color:var(--text-3);font-size:.84rem}
.price-value{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.4rem);
  white-space:nowrap;color:var(--text)}
.price-row.is-featured{background:linear-gradient(90deg,var(--accent-faint),transparent 60%)}
.price-row.is-featured .price-value{color:var(--accent)}
/* Silt on märgis, mitte riba: veerus venib inline-block muidu üle laiuse. */
.tag{
  align-self:flex-start;
  display:inline-block;padding:3px 8px;border-radius:2px;
  background:var(--accent);color:#0C0B0A;font-size:.52rem;
}
.price-notes{
  list-style:none;margin:clamp(20px,3vh,30px) 0 clamp(24px,3.4vh,36px);padding:0;
  display:grid;gap:.5rem;color:var(--text-3);font-size:.9rem;
}
.price-notes li{position:relative;padding-left:20px}
.price-notes li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent);opacity:.7;
}

/* ==========================================================================
   Loodis: lehe üks liigutatav hetk
   ========================================================================== */
.level-wrap{display:grid;gap:clamp(30px,5vw,72px);grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center}
.level-copy .s-head{margin-bottom:clamp(24px,3vh,34px)}
.level-reveals{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.85rem}
.level-reveals li{
  position:relative;padding-left:26px;font-size:1.06rem;color:var(--text);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);
  transition-delay:calc(var(--n) * 160ms);
}
.level-reveals li::before{
  content:"";position:absolute;left:0;top:.66em;width:12px;height:1px;
  background:var(--accent);transform-origin:left;
  transition:transform .7s var(--e-out);transition-delay:calc(var(--n) * 160ms);
}
.js .level-reveals li{opacity:.24;transform:translateX(-6px)}
.js .level-reveals li::before{transform:scaleX(.2)}
.js .s-level.is-level .level-reveals li{opacity:1;transform:none}
.js .s-level.is-level .level-reveals li::before{transform:scaleX(1)}
.level-foot{color:var(--text-3);font-size:.92rem;max-width:46ch}

.level-stage{
  padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);
}
.level-art{width:100%;height:auto;display:block}
.lv-frame{stroke:var(--line-strong);stroke-width:1.4}
.lv-door rect{stroke:var(--brass);stroke-width:1.4;fill:rgba(201,162,39,.04)}
.lv-door line{stroke:var(--accent);stroke-width:2.4}
.lv-door{
  transform:rotate(calc(2.4deg * (1 - var(--lv,0))));
  transform-origin:32px 190px;
  transition:transform .16s linear;
}
.lv-door-r{transform:rotate(calc(-1.7deg * (1 - var(--lv,0))));transform-origin:288px 190px}
.lv-vial rect{stroke:var(--line-strong);stroke-width:1.2;fill:rgba(255,255,255,.02)}
.lv-vial line{stroke:var(--accent);stroke-width:1;opacity:.55}
.lv-bubble{
  fill:var(--accent);stroke:none;opacity:.9;
  transform:translateX(calc((1 - var(--lv,0)) * 48px));
  transition:transform .16s linear;
}
.s-level.is-level .lv-bubble{filter:drop-shadow(0 0 10px rgba(255,222,89,.6))}

.level-labels{
  display:flex;justify-content:space-between;margin-top:14px;color:var(--text-3);
}
.lv-after{color:var(--accent);opacity:calc(.25 + .75 * var(--lv,0))}
.lv-before{opacity:calc(1 - .7 * var(--lv,0))}

.hold{
  display:none;position:relative;align-items:center;justify-content:center;
  width:100%;margin-top:18px;padding:16px 22px;
  border:1px solid var(--accent);border-radius:var(--r);background:transparent;
  color:var(--accent);font-family:var(--body);font-weight:600;font-size:.92rem;
  cursor:pointer;overflow:hidden;touch-action:none;
  transition:color .3s var(--e-soft);
}
.hold-fill{
  position:absolute;inset:0;background:var(--accent);
  transform:scaleX(var(--lv,0));transform-origin:left;
  transition:transform .16s linear;
}
.hold-label{position:relative;z-index:1;mix-blend-mode:difference;color:#FFDE59}
.s-level.is-level .hold{border-color:var(--brass)}
.hold-hint{margin-top:12px;color:var(--text-3);text-align:center}

/* ==========================================================================
   Miks meie: kolm arvu
   ========================================================================== */
.stats{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(3,1fr)}
.stat{padding-top:22px;border-top:1px solid var(--line);position:relative}
.stat::before{
  content:"";position:absolute;top:-1px;left:0;width:34%;height:1px;background:var(--accent);
  transform-origin:left;
  transition:transform .9s var(--e-out) calc(var(--n) * 140ms);
}
.js .stat::before{transform:scaleX(0)}
.stat.in::before{transform:scaleX(1)}
.stat-v{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;
  display:flex;align-items:baseline;gap:.24em;color:var(--text);
}
.stat-u{font-size:.9rem;font-family:var(--body);color:var(--text-2);letter-spacing:.02em}
.stat-l{margin-top:.9rem;color:var(--text-2);font-size:.94rem;max-width:26ch}

/* ==========================================================================
   Piirkond: virnastatud read, mitte kolm ühesugust kasti
   ========================================================================== */
.cities{display:grid;gap:0}
.city{
  display:grid;grid-template-columns:minmax(0,14ch) minmax(0,1fr);
  gap:clamp(14px,3vw,44px);align-items:baseline;
  padding:clamp(22px,3vh,34px) 0;border-bottom:1px solid var(--line);
}
.city:first-child{border-top:1px solid var(--line)}
.city-tag{color:var(--accent);opacity:.8;font-size:.58rem}
.city h3{font-size:clamp(1.2rem,2.4vw,1.8rem);grid-column:2}
.city p{grid-column:2;color:var(--text-2);margin-top:.5rem;max-width:52ch}

/* ==========================================================================
   Tagasiside
   ========================================================================== */
.ph-note{
  margin-bottom:clamp(22px,3vh,32px);padding:14px 18px;
  border-left:2px solid var(--accent);background:var(--accent-faint);
  color:var(--text-2);font-size:.9rem;max-width:64ch;border-radius:0 var(--r) var(--r) 0;
}
.quotes{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(3,1fr)}
.quote{
  position:relative;margin:0;padding:clamp(22px,2.6vw,32px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.quote blockquote{margin:0}
.quote p{font-size:1.02rem;line-height:1.55}
.quote figcaption{margin-top:1.2rem;color:var(--text-3);font-size:.56rem}
.ph-badge{
  position:absolute;top:14px;right:14px;padding:3px 8px;border-radius:2px;
  background:var(--accent);color:#0C0B0A;font-size:.5rem;
}

/* ==========================================================================
   Küsimused
   ========================================================================== */
.faq-list{border-top:1px solid var(--line);max-width:82ch}
.faq{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.4vh,26px) 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:300;font-size:clamp(1.02rem,1.7vw,1.24rem);
  transition:color .3s var(--e-soft);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq-mark{position:relative;flex:0 0 auto;width:13px;height:13px;margin-top:.3em}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .45s var(--e-out),opacity .45s var(--e-out);
}
.faq-mark::before{left:0;top:6px;width:13px;height:1px}
.faq-mark::after{left:6px;top:0;width:1px;height:13px}
.faq[open] .faq-mark::after{transform:rotate(90deg);opacity:0}
.faq-a{padding-bottom:clamp(18px,2.4vh,26px);color:var(--text-2);max-width:62ch}

/* ==========================================================================
   Kontakt ja vorm
   ========================================================================== */
.contact-wrap{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  align-items:start}
.facts{margin:0 0 1.6rem;display:grid;gap:0}
.facts>div{
  display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.facts dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3)}
.facts dd{margin:0;font-size:1rem}
.facts a{text-decoration:none;border-bottom:1px solid var(--accent-soft);
  transition:border-color .3s var(--e-soft),color .3s var(--e-soft)}
.facts a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.chat{display:flex;flex-wrap:wrap;gap:10px}

.form{
  position:relative;padding:clamp(24px,3vw,40px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.form fieldset{border:0;margin:0;padding:0}
.f-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.field{display:block;margin-bottom:14px}
.f-label{
  display:block;margin-bottom:7px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.f-label em{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.08em}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;
  background:var(--canvas);border:1px solid var(--line-strong);border-radius:var(--r);
  color:var(--text);font-family:var(--body);font-size:.98rem;
  transition:border-color .3s var(--e-soft),background .3s var(--e-soft);
}
.field textarea{resize:vertical;min-height:118px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);outline:none;background:var(--canvas-2);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f-err{display:block;min-height:1.1em;margin-top:5px;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;color:#FF9E7A}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#FF9E7A}
.form-error{
  margin-bottom:16px;padding:12px 15px;border-left:2px solid #FF9E7A;
  background:rgba(255,158,122,.08);color:#FFC7B0;font-size:.9rem;border-radius:0 var(--r) var(--r) 0;
}
.f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
/* Selgitav lause loeb tavalises kirjas, mitte hõredas suurtähestikus. */
.f-note{
  font-family:var(--body);font-size:.82rem;text-transform:none;letter-spacing:normal;
  color:var(--text-3);max-width:32ch;line-height:1.55;
}

.form-done{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;
  padding:clamp(24px,3vw,40px);text-align:center;background:var(--panel);border-radius:var(--r);
  animation:doneIn .7s var(--e-out) both;
}
@keyframes doneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.done-mark{width:52px;color:var(--accent)}
.done-mark .mark{width:100%;height:auto}
.form-done h3{font-size:1.3rem}
.form-done p{color:var(--text-2);max-width:34ch}

/* ==========================================================================
   Jalus
   ========================================================================== */
.site-foot{position:relative;z-index:1;background:var(--canvas);border-top:1px solid var(--line);
  padding:clamp(48px,7vh,86px) 0 clamp(28px,4vh,44px)}
.foot-wrap{
  display:grid;gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;position:relative;
}
.foot-mark{width:34px;height:34px;color:var(--accent);margin-bottom:14px}
.foot-name{font-family:var(--display);font-weight:300;font-size:1.02rem;letter-spacing:.34em}
.foot-tag{margin-top:.6rem;color:var(--text-3);font-size:.9rem;max-width:30ch}
.foot-nav{display:flex;flex-direction:column;gap:.55rem}
.foot-nav a{text-decoration:none;color:var(--text-2);font-size:.92rem;
  transition:color .3s var(--e-soft)}
.foot-nav a:hover{color:var(--accent)}
.foot-social-h{color:var(--text-3);margin-bottom:.7rem}
.foot-social-l{display:flex;flex-wrap:wrap;gap:1.1rem}
.foot-social-l a{
  text-decoration:none;color:var(--text-2);font-size:.92rem;
  border-bottom:1px solid var(--accent-soft);padding-bottom:2px;
  transition:color .3s var(--e-soft),border-color .3s var(--e-soft);
}
.foot-social-l a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.foot-meta{display:grid;gap:.55rem;color:var(--text-3);line-height:1.9;font-size:.58rem}
.foot-meta a{text-decoration:none}
.foot-meta a:hover{color:var(--accent)}

.to-top{
  position:absolute;right:0;bottom:0;width:42px;height:42px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  display:grid;place-items:center;text-decoration:none;
  transition:border-color .35s var(--e-soft),transform .5s var(--e-out);
}
.to-top span[aria-hidden]{
  width:8px;height:8px;border-left:1px solid var(--accent);border-top:1px solid var(--accent);
  transform:rotate(45deg) translate(1px,1px);
}
.to-top:hover{border-color:var(--accent);transform:translateY(-3px)}

/* ==========================================================================
   Laiused
   ========================================================================== */
@media (max-width:1080px){
  .site-nav{display:none}
  .burger{display:inline-flex}
  .head-right{margin-left:auto;gap:10px}
  /* Keelevalik elab kitsal ekraanil menüü sees, mitte päises. */
  .head-right .lang{display:none}
  .grid-services{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,40px)}
  .steps-spine{display:none}
  .quotes{grid-template-columns:1fr 1fr}
  .quote:last-child{grid-column:span 2}
  .contact-wrap,.level-wrap{grid-template-columns:1fr}
}

@media (max-width:860px){
  .site-head{padding:12px var(--gut)}
  .brand-mark{width:26px;height:26px}
  .brand-name{font-size:.86rem;letter-spacing:.28em;text-indent:.28em}
  .brand-sub{font-size:.42rem;letter-spacing:.22em;text-indent:.22em}

  .hero{height:300vh}
  .hero-stage{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    padding:84px var(--gut) 64px;
    gap:0;
  }
  .hero-art{grid-column:1;grid-row:1;align-self:center}
  .draw{max-height:58vh}
  .bands{grid-column:1;grid-row:2;max-width:none;position:relative;min-height:40vh}
  .band{top:auto;bottom:0;transform:none}
  .band::before{inset:-10% -18%}
  .band-t{font-size:clamp(1.75rem,7.4vw,2.6rem)}
  h1.band-t{font-size:clamp(1.9rem,8vw,2.8rem)}
  .band-sub{font-size:.98rem}
  .hero-eyebrow{top:70px}
  /* Kerimisvihje läheb paremasse serva ja tekst hoiab tema jaoks ruumi,
     muidu satuvad nad kitsal ekraanil üksteise peale. */
  .cue{left:auto;right:var(--gut);transform:none;bottom:18px}
  .cue span:first-child{display:none}
  .band{padding-right:52px}
}

@media (max-width:360px){
  /* Kõige kitsamal ekraanil jääb päisesse ainult mark, et nupp mahuks ära. */
  .brand-word{display:none}
  .btn-sm{padding:10px 14px;font-size:.78rem}
}

@media (max-width:760px){
  .pain-row{grid-template-columns:auto 1fr;gap:10px 18px}
  .pain-row h3{grid-column:2}
  .pain-row p{grid-column:2}
  .grid-services{grid-template-columns:1fr}
  .card,.card:nth-child(1),.card:nth-child(6){grid-column:span 1}
  .shots{grid-template-columns:1fr}
  .shot:nth-child(even){margin-top:0}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:26px}
  .quotes{grid-template-columns:1fr}
  .quote:last-child{grid-column:span 1}
  .f-row{grid-template-columns:1fr}
  .city{grid-template-columns:1fr}
  .city h3,.city p{grid-column:1}
  .foot-wrap{grid-template-columns:1fr}
  .to-top{position:static;margin-top:8px}
  .price-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Madal aken: kerimisfilm jääb, aga väikesed lisandid ei mahu. */
@media (max-height:560px){
  .cue,.js .cue,.hero-eyebrow{display:none}
  .hero-stage{padding-top:76px;padding-bottom:32px}
}

/* Sõrmega tabatavad nupud, ilma paigutust muutmata. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .lang a{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  .site-nav a,.foot-nav a{padding-block:9px}
}

/* ==========================================================================
   Liikumisvaen: lõppseis on näha, ajamid seisavad.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
  /* Valijad kannavad `.js` ees, sest muidu võidaks tavaseisu reegel
     spetsiifilisusega ja liikumisvaen jääks poolikuks. */
  .js .reveal{opacity:1;transform:none}
  .js .kicker-rule,.js .pain-rule,.js .steps-spine,.js .stat::before{transform:scaleX(1)}
  .js .step::before{transform:scale(1)}
  .js .level-reveals li{opacity:1;transform:none}
  .js .level-reveals li::before{transform:scaleX(1)}
  .js .draw{--a1:1;--a2:1;--a3:1;--a4:1;--a5:1;--a6:1}
  /* Positsioneerivad teisendused pannakse tagasi, mitte ei nullita:
     bänd on mobiilis paigutatud transformiga ja kaoks muidu ekraanilt. */
  .hero,.js .hero{height:100vh}
  .hero-pin{position:relative;height:auto;min-height:100vh}
  .js .band{position:relative;top:auto;transform:none;opacity:0;pointer-events:none}
  .js .band-settle{opacity:1;pointer-events:auto}
  .split .w,.split .c{opacity:1!important;transform:none!important}
  .settle-lead,.band-cta,.band-sub .tri{opacity:1!important;transform:none!important}
  .env-glow{animation:none}
  .js .cue{display:none}
}

/* ==========================================================================
   Meeleoluribad ja sektsioonitaustad
   Lehe rütm on tekst, pilt, tekst, pilt. Just see vaheldus teeb toimetise
   tunde. Pildid on juba brändi värvi viidud, nii et CSS ei filtreeri neid
   kerimise ajal, vaid ainult sulatab servad lehe musta sisse.
   ========================================================================== */
.atm{
  position:relative;z-index:1;
  height:clamp(210px,32vh,400px);
  overflow:hidden;background:var(--canvas);
}
.atm img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);
}
.js .atm img{transition:transform 1.8s var(--e-out)}
.js .atm.in img{transform:scale(1)}

/* Ülemine ja alumine serv vajuvad lõuendi värvi: pildil ei ole teravat äärt,
   ta ilmub mustast ja kaob musta. */
.atm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    var(--canvas) 0%,rgba(12,11,10,0) 24%,
    rgba(12,11,10,0) 76%,var(--canvas) 100%);
}

/* Allkirjajoon jookseb ka läbi pildi: sama loodijoon, mis kannab tervet lehte. */
.atm-line{
  position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:.42;transform-origin:top;
}
.js .atm-line{transform:scaleY(0);transition:transform 1.5s var(--e-out) .25s}
.js .atm.in .atm-line{transform:scaleY(1)}

/* Sektsioon, mille taga on pilt. Tekst istub oma tumendusel, pilt annab ruumi. */
.s.has-bg{position:relative;isolation:isolate;background:var(--canvas)}
.s-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.s-bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.78}
.s-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--canvas) 0%,rgba(12,11,10,.72) 34%,
    rgba(12,11,10,.75) 66%,var(--canvas) 100%);
}

@media (max-width:760px){
  .atm{height:clamp(170px,26vh,260px)}
  .s-bg img{opacity:.42}
}

/* Peibutisväli: robotid täidavad kõik väljad, päris külastaja seda ei näe.
   `display:none` asemel nihutame ta vaateväljast välja, sest osa roboteid
   jätab peidetud väljad vahele. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}