/* ===== CutCtrl — grunge / acid ===== */
/* Anton on ISE MAJUTATUD. Google Fontsist ta Androidi Chrome'i EI jõudnud (09.09.2026):
   Barlow Condensed laadis, Anton mitte, seega kogu --disp langes tagasi Robotole ja
   hero-laused ning h2-pealkirjad paistsid telefonis kitsa ja peenikesena. Ära pane
   Antonit tagasi Google Fontsi linki, muidu tuleb sama viga tagasi. */
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/anton-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Barlow ja Barlow Condensed on samuti ISE MAJUTATUD. Serveri CSP lubab fonte
   ainult omast majast (font-src 'self'), seega Google Fontsist ei jõudnud siia
   MITTE ÜKSKI font. Vt Wiki 272 ptk 21. Kasutuses on ainult kaalud 400/600/700;
   Permanent Marker oli lingis, aga CSS-is kasutuseta, seega ta on lihtsalt ära. */
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --bg:#0b0b0c; --bg2:#141417; --bg3:#1c1c20;
  --ink:#ededed; --muted:#8d8d92; --line:#2a2a2e;
  --acid:#c6ff1a; --acid-dim:#9bcc12; --white:#ffffff;
  --maxw:1160px;
  --frame:15px; /* HUD-raami sisenihe; filmilint joondub selle järgi */
  --disp:"Anton","Arial Narrow",Impact,sans-serif;
  --cond:"Barlow Condensed",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --marker:"Permanent Marker",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acid);color:#000}

/* subtle global grain + concrete */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background:url("../assets/grunge_texture.jpg"); background-size:600px; mix-blend-mode:screen;
}

/* ===== HUD-raam + joon-eraldused (tehniline, hapuroheline) ===== */
.frame{position:fixed;inset:var(--frame);border:1px solid rgba(198,255,26,.13);pointer-events:none;z-index:40}
.frame i{position:absolute;width:15px;height:15px;border:2px solid var(--acid)}
.frame i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
@media(max-width:600px){:root{--frame:9px}.frame i{width:11px;height:11px}}

/* õhuke roheline joon-eraldus sektsioonide vahel */
.section::before{content:"";position:absolute;top:0;left:clamp(1rem,4vw,2rem);right:clamp(1rem,4vw,2rem);height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,255,26,.26) 10%,rgba(198,255,26,.26) 90%,transparent)}
/* + tick sektsiooni päise juures */
.section__head{position:relative}
.section__head::before{content:"+";position:absolute;top:-1.7rem;left:0;color:var(--acid);font-family:var(--cond);font-weight:700;font-size:1.1rem;line-height:1;opacity:.8}

/* korner-sulud kaartidel (boxitud-tunne) */
.card::after{content:"";position:absolute;top:9px;left:9px;width:13px;height:13px;border-left:2px solid var(--acid);border-top:2px solid var(--acid);opacity:.5;transition:.2s ease;z-index:3;pointer-events:none}
.card:hover::after{opacity:1;width:18px;height:18px}
.svc::after{content:"";position:absolute;bottom:12px;right:12px;width:13px;height:13px;border-right:2px solid var(--line);border-bottom:2px solid var(--line);transition:.2s ease;pointer-events:none}
.svc:hover::after{border-color:var(--acid)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;padding:.8em 1.5em;border:2px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;transition:.15s ease;line-height:1;position:relative;
}
.btn--sm{padding:.55em 1em;font-size:.85rem}
.btn--acid{background:var(--acid);border-color:var(--acid);color:#000}
.btn--acid:hover{box-shadow:0 0 0 0 var(--acid),0 8px 30px -6px rgba(198,255,26,.5);transform:translateY(-2px)}
.btn--ghost:hover,.btn--sm:hover{background:var(--ink);color:#000}
.btn--block{width:100%}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.2rem);transition:.25s ease;
  background:linear-gradient(180deg,rgba(11,11,12,.95),rgba(11,11,12,0));
}
.nav.is-scrolled{background:rgba(11,11,12,.96);border-bottom:1px solid var(--line)}
.nav__logo-img{height:40px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:1.6rem}
.nav__links a{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--ink)}
.nav__links a:not(.btn):hover{color:var(--acid)}
.nav__right{display:flex;align-items:center;gap:1rem}
.lang{background:none;border:none;color:var(--muted);font-family:var(--cond);font-weight:700;font-size:.95rem;cursor:pointer;letter-spacing:.05em}
.lang .is-on{color:var(--acid)}
.lang__sep{margin:0 .25em;color:var(--line)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.2s}
/* menüü lahti: leht ei keri, muidu peidab telefonibrauser aadressiriba ja kast nihkub */
html.nav-open,body.nav-open{overflow:hidden}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6rem 1.2rem 4rem;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#1a1a1d 0%,#0b0b0c 60%);
}
.hero__grain{position:absolute;inset:0;background:url("../assets/grunge_texture.jpg");background-size:cover;opacity:.14;mix-blend-mode:screen;z-index:0}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,var(--bg));z-index:1}
.hero__stage{position:relative;z-index:2;width:min(100%,920px);min-height:46vh;display:grid;place-items:center}
.hero__tagline,.hero__anim{grid-area:1/1;width:100%}

.hero__tag-text{
  font-family:var(--disp);font-weight:400;font-size:clamp(2.5rem,8.5vw,5.2rem);line-height:1.08;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--white);text-wrap:balance;
}
/* telefonis sama BOLD mõju nagu desktopil (suurem + Anton kindlasti)
   NB: text-wrap:balance tegi telefonis lühikesed read -> plokk mõjus kitsana.
   Telefonis laseme read laiuse täis ja tõstame astet; reavahe 0.96 hoiab
   Ä/Ö/Õ/Ü täpid eelmisest reast eemal (tihedam reavahe lõikab neid). */
@media(max-width:600px){
  .hero__tag-text{
    font-size:clamp(2.85rem,12.2vw,3.6rem);
    letter-spacing:-.02em;text-wrap:normal;
  }
  /* mõlemad nupud ÜHELE reale ka telefonis (enne murdis flex-wrap need ülestikku
     ja absoluutne „keri" jäi alumise nupu peale) */
  .hero__cta{flex-wrap:nowrap;gap:.6rem}
  .hero__cta .btn{font-size:.9rem;padding:.75em 1em;letter-spacing:.04em;white-space:nowrap}
}

/* alternating fade between tagline and animation */
.hero__tagline{transition:opacity .45s ease,filter .45s ease,transform .45s ease;opacity:1}
.hero__tagline.is-out{opacity:0;filter:blur(12px);transform:scale(1.05);pointer-events:none}
.hero__anim{opacity:0;transform:scale(.94);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.9,.2,1);pointer-events:none;display:flex;justify-content:center}
.hero__anim.is-in{opacity:1;transform:scale(1)}
/* canvasel on päris alfa -> tavaline komposiit; file:// fallback kasutab screen-blendi */
.hero__anim-vid{display:block;width:min(88%,580px);height:auto;aspect-ratio:900/506;filter:drop-shadow(0 6px 26px rgba(0,0,0,.5))}
.hero__anim-vid.use-blend{mix-blend-mode:screen}
.hero__anim-fallback{display:none;width:min(86%,560px);mix-blend-mode:screen}
.no-video .hero__anim-vid{display:none}
.no-video .hero__anim-fallback{display:block}

.hero__meta{position:relative;z-index:2;margin-top:1.4rem;opacity:0;animation:fadeIn .6s ease 1.1s forwards;text-align:center}
.hero__sub{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(.8rem,2.4vw,1.15rem);color:var(--acid)}
.hero__cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* glitch flash — KOGU hero üleminekul */
.hero__glitchflash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,rgba(198,255,26,.10) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(255,46,136,.22),transparent 30%,transparent 70%,rgba(0,229,255,.22));
}
.hero__glitchflash.on{animation:glitchFlash .5s steps(3) 1}
@keyframes glitchFlash{
  0%{opacity:0;transform:translateX(0) scaleY(1);clip-path:inset(0 0 0 0)}
  12%{opacity:1;transform:translateX(-12px) skewX(2deg);clip-path:inset(0 0 62% 0)}
  28%{opacity:.7;transform:translateX(14px);clip-path:inset(40% 0 28% 0)}
  46%{opacity:1;transform:translateX(-8px) skewX(-1.5deg);clip-path:inset(72% 0 0 0)}
  64%{opacity:.6;transform:translateX(6px);clip-path:inset(20% 0 50% 0)}
  100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0)}
}

/* püsiv õrn skännijoone-glitch üle terve hero */
.hero__scanlines{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  animation:scanDrift 7s linear infinite}
@keyframes scanDrift{0%{background-position:0 0}100%{background-position:0 60px}}
/* perioodiline kogu-hero RGB-nihke sähvatus */
.hero::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(90deg,rgba(255,46,136,.5),transparent 8%);
  animation:heroGlitch 9s steps(1) infinite}
@keyframes heroGlitch{
  0%,93%,100%{opacity:0;transform:translateX(0)}
  94%{opacity:.5;transform:translateX(-10px)}
  95%{opacity:0}
  96%{opacity:.45;transform:translateX(12px)}
  97%{opacity:0}
}

/* glitch on the tagline text (RGB split + slice) */
.glitch{position:relative}
.glitch .hero__tag-text{position:relative}
.glitch.is-glitching .hero__tag-text::before,
.glitch.is-glitching .hero__tag-text::after{
  content:attr(data-text);position:absolute;inset:0;color:var(--white);
}
.glitch.is-glitching .hero__tag-text::before{left:2px;text-shadow:-2px 0 #ff2e88;clip-path:inset(0 0 55% 0);animation:gl1 .4s steps(2) 1}
.glitch.is-glitching .hero__tag-text::after{left:-2px;text-shadow:-2px 0 var(--acid),2px 0 #00e5ff;clip-path:inset(55% 0 0 0);animation:gl2 .4s steps(2) 1}
@keyframes gl1{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}100%{transform:translateX(0)}}
@keyframes gl2{0%{transform:translateX(0)}25%{transform:translateX(5px)}50%{transform:translateX(-4px)}100%{transform:translateX(0)}}

/* subtle ongoing glitch on the playing animation */
.hero__anim.is-in .hero__anim-vid{animation:vidGlitch 5.5s steps(40) infinite}
@keyframes vidGlitch{
  0%,7%,9%,38%,40%,72%,74%,100%{transform:translateX(0);filter:contrast(1.25)}
  8%{transform:translate(-4px,1px);filter:contrast(1.4) drop-shadow(3px 0 #ff2e88) drop-shadow(-3px 0 #00e5ff)}
  39%{transform:translate(5px,-1px);filter:contrast(1.4) drop-shadow(-3px 0 var(--acid))}
  73%{transform:translate(-3px,0);filter:contrast(1.45) drop-shadow(2px 0 #00e5ff)}
}

.hero__scroll{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--cond);text-transform:uppercase;letter-spacing:.25em;font-size:.7rem;color:var(--muted)}
.hero__ticker{position:relative;width:100vw;margin-top:1.8rem;z-index:5;overflow:hidden;background:#a01218;border-top:2px solid #d92b32;border-bottom:3px solid #4a0709;box-shadow:0 0 22px rgba(160,18,24,.35)}
.hero__ticker::after{content:"";position:absolute;inset:0;background:url("../assets/noise.png");opacity:.28;pointer-events:none}
.hero__ticker-track{display:inline-flex;white-space:nowrap;animation:tickerScroll 48s linear infinite}
.hero__ticker-seg{display:inline-flex;align-items:center;padding:.55em 0;font-family:var(--cond);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.14em;color:#f4ece4;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.hero__ticker-sep{margin:0 1.4em;color:#3b0608}
@keyframes tickerScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero__ticker-track{animation:none}}
.hero__scroll::after{content:"";display:block;width:1px;height:34px;margin:.5rem auto 0;background:linear-gradient(var(--acid),transparent);animation:scrollPulse 1.8s ease infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- sections ---------- */
.section{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,9vw,7rem) clamp(1rem,4vw,2rem)}
.section--alt{max-width:none;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--alt > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
/* „Meist": filmilint täidab sektsiooni servast servani, et lint ja grain algaksid ja
   lõppeksid TÄPSELT koos sektsiooniga (Devil #226). Varem oli sektsioonil püstpolster
   ja grain kogu sektsioonil, mistõttu lindi kohale ja alla jäi paljas grain-riba. */
.section--film{padding-top:0;padding-bottom:0}

/* animeeritud filmigrain teatud blokkidel (Tööd, Minust, Küsi pakkumist) */
.section--grain{position:relative;overflow:hidden}
.section--grain::after{
  content:"";position:absolute;inset:-60%;width:220%;height:220%;pointer-events:none;z-index:0;
  background:url("../assets/noise.png") repeat;background-size:230px 230px;
  opacity:.2;will-change:transform;
  animation:filmGrain .5s steps(5) infinite;
}
/* grain AINULT taustal: sisu (pealkirjad, kaardid) selle peal */
.section--grain > *{position:relative;z-index:1}
@keyframes filmGrain{
  0%{transform:translate(0,0)}
  16%{transform:translate(-7%,5%)}
  33%{transform:translate(6%,-6%)}
  50%{transform:translate(-5%,8%)}
  66%{transform:translate(8%,3%)}
  83%{transform:translate(-6%,-4%)}
  100%{transform:translate(0,0)}
}
.section__head{margin-bottom:2.6rem}
.eyebrow{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;color:var(--acid)}
.h2{font-family:var(--disp);font-size:clamp(2rem,6vw,3.6rem);text-transform:uppercase;line-height:1;margin-top:.5rem;letter-spacing:-.01em}
.mark{position:relative;display:inline-block}
.mark::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.06em;height:.42em;background:var(--acid);z-index:-1;transform:skewX(-6deg) rotate(-1deg);opacity:.85}

.work__more{display:flex;gap:.8rem;justify-content:center;margin-top:1.8rem}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;justify-content:center}
.svc{
  border:1px solid var(--line);background:var(--bg3);padding:1.6rem;position:relative;overflow:hidden;
  transition:.2s ease;
}
.svc::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:.3s}
.svc:hover{transform:translateY(-4px);border-color:#3a3a40}
.svc:hover::before{transform:scaleX(1)}
.svc__icon{font-size:1.8rem;color:var(--acid);line-height:1;margin-bottom:.8rem}
.svc__title{font-family:var(--cond);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.45rem);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;overflow-wrap:break-word;hyphens:auto}
.svc__desc{color:var(--muted);margin:.6rem 0 1rem;font-size:.97rem;overflow-wrap:break-word}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.svc__tag{font-family:var(--cond);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line);padding:.2em .6em;border-radius:2px}

/* ---------- work / portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.filter{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;color:var(--muted);background:none;border:1px solid var(--line);padding:.45em 1em;cursor:pointer;transition:.15s}
.filter.is-on,.filter:hover{color:#000;background:var(--acid);border-color:var(--acid)}
.work{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.card{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:var(--bg3);cursor:pointer}
.card__media{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:.4s ease}
.card:hover .card__media{filter:none;transform:scale(1.05)}
/* telefonis pole hover'it: JS annab vaate keskele lähimale kaardile .is-focus,
   efekt on täpselt sama mis desktopi hover (vt initWorkFocus app.js-is) */
.card.is-focus .card__media{filter:none;transform:scale(1.05)}
/* „Näita veel töid" ja „Näita vähem" sama ilmega mis „↑ Tagasi üles": roheline raam ja tekst */
#workMore .btn{border-color:var(--acid);color:var(--acid)}
#workMore .btn:hover{background:var(--acid);border-color:var(--acid);color:#000}
.card__empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--line);font-family:var(--disp);font-size:3rem}
.card__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;background:linear-gradient(transparent 40%,rgba(0,0,0,.85));opacity:1}
.card__cat{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--acid)}
.card__title{font-family:var(--cond);font-weight:600;font-size:1.15rem;line-height:1.1;margin-top:.2rem;overflow-wrap:break-word}
.card__play{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border:2px solid var(--acid);color:var(--acid);border-radius:50%;display:grid;place-items:center;font-size:.8rem;background:rgba(0,0,0,.4)}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:step}
.step{border-left:2px solid var(--acid);padding:.3rem 0 .3rem 1.2rem}
.step__num{font-family:var(--disp);font-size:2.4rem;color:var(--acid);line-height:1}
.step__title{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.25rem;margin-top:.2rem;overflow-wrap:break-word}
.step__desc{color:var(--muted);font-size:.95rem;margin-top:.3rem}

/* ---------- about: filmilindi raam ---------- */
/* Lindi servad peatuvad peenikese HUD-raami joone SEES, mitte ekraani serval.
   Sektsiooni külgpolster on clamp(1rem,4vw,2rem); negatiivne veeris tõmbab lindi
   välja täpselt nii palju, et järele jääks --frame jagu ruumi pluss 5 px vahet,
   nii et peenike joon jookseb katkematult lindist VÄLJASPOOL. */
.film{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;max-width:none;margin:0 calc(var(--frame) + 5px - clamp(1rem,4vw,2rem));border:1px solid var(--acid-dim);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 14px 44px rgba(0,0,0,.4)}
.film__rail{position:relative;z-index:1;overflow:hidden;background:var(--acid)}
.film__holes{position:absolute;left:0;right:0;top:-56px;height:calc(100% + 112px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='56'%3E%3Crect x='7' y='15' width='30' height='26' rx='5' fill='%230b0b0c'/%3E%3C/svg%3E") repeat-y;background-size:100% 56px;will-change:transform}
.film__core{position:relative;z-index:1;padding:clamp(1.2rem,3vw,2.4rem);min-width:0}
/* grain-kiht lindi SEES. Eraldi element, sest .film ise ei tohi overflow'd lõigata:
   .film__tape ulatub lindi ülaservast välja ja jääks muidu pooleks. */
.film__grain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.film__grain::after{
  content:"";position:absolute;inset:-60%;width:220%;height:220%;
  background:url("../assets/noise.png") repeat;background-size:230px 230px;
  opacity:.2;will-change:transform;animation:filmGrain .5s steps(5) infinite;
}
.film__core>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.film .film__tape{top:-.95rem;left:1.2rem;z-index:3} /* NB! spetsiifilisus üle hilisema .about__tape reegli */
.film__edge{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--acid);opacity:.8;padding:0 0 .55rem 6.5rem;border-bottom:1px dashed var(--acid-faint);margin-bottom:clamp(1.2rem,2.5vw,2rem)}
.film__edge--btm{padding:.55rem 0 0;border-bottom:none;border-top:1px dashed var(--acid-faint);margin-top:clamp(1.2rem,2.5vw,2rem);margin-bottom:0}
.film__edge span{display:flex;align-items:center;gap:.45em;white-space:nowrap}
.film__rec{width:.6em;height:.6em;border-radius:50%;background:#ff5b5b;animation:recBlink 1.1s steps(2,start) infinite}
@keyframes recBlink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.film__rec{animation:none}}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.about--noimg{grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr)}
.about--noimg .about__lead{max-width:48ch}
.about--noimg .about__body{max-width:78ch}
/* pildita: paremal klapp (clapperboard), mis ploki ilmumisel kinni klõpsab */
.about__leader{display:grid;place-items:center}
.about:not(.about--noimg) .about__leader{display:none} /* foto olemas -> visuaali pole */
.clap{position:relative;width:min(100%,350px);transform:rotate(-2deg);filter:drop-shadow(0 16px 34px rgba(0,0,0,.5))}
.clap__arm,.clap__stick{height:32px;border:1px solid #000;border-radius:3px;background:repeating-linear-gradient(-45deg,var(--acid) 0 24px,#101012 24px 48px)}
.clap__arm{transform-origin:14px 100%;position:relative;z-index:2}
.clap__stick{background:repeating-linear-gradient(45deg,var(--acid) 0 24px,#101012 24px 48px);margin-top:3px}
.film.is-in .clap__arm{animation:clapSnap 1.1s .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes clapSnap{0%{transform:rotate(-26deg)}55%{transform:rotate(0)}72%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.clap__hinge{position:absolute;top:24px;left:6px;width:16px;height:16px;border-radius:50%;background:#0b0b0c;border:2px solid var(--acid);z-index:3}
.clap__board{background:rgba(11,11,12,.72);border:1px solid var(--acid-dim);border-top:none;padding:1rem 1rem 1.1rem;display:grid;gap:.7rem}
.clap__row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.clap__cell{border:1px solid var(--line);padding:.4rem .65rem .5rem;display:flex;flex-direction:column;gap:.15rem}
.clap__cell .l{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--muted)}
.clap__cell .v{font-family:var(--disp);font-size:1.5rem;line-height:1;color:var(--ink)}
.clap__cell--wide .v{color:var(--acid)}
.about__media{position:relative}
.about__media img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.4) contrast(1.05);border:1px solid var(--line)}
.about__tape{position:absolute;top:1.2rem;left:-.6rem;background:var(--acid);color:#000;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem;line-height:1;padding:.28em .8em;transform:rotate(-4deg);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.about__lead{font-family:var(--cond);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.25;margin:.8rem 0 1rem}
.about__body{color:var(--muted);font-size:1rem}
.about__stats{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem}
.about__stat .v{font-family:var(--disp);font-size:2rem;color:var(--acid);line-height:1}
.about__stat .l{font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;color:var(--muted)}

/* ---------- partners ---------- */
.partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.8rem,6vw,4.5rem);padding:.5rem 0}
.partner{display:inline-flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease,transform .2s ease,filter .2s ease}
.partner img{height:clamp(34px,6vw,48px);width:auto;max-width:210px;object-fit:contain;display:block}
.partner:hover{opacity:1;transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 6px 16px rgba(198,255,26,.4))}
.partner__name{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.4rem;color:var(--acid)}

/* ---------- faq ---------- */
.faq{max-width:820px}
.qa{border-bottom:1px solid var(--line)}
.qa__q{width:100%;text-align:left;background:none;border:none;color:var(--ink);cursor:pointer;
  font-family:var(--cond);font-weight:600;font-size:1.2rem;padding:1.1rem 2.4rem 1.1rem 0;position:relative;overflow-wrap:break-word}
.qa__q::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);color:var(--acid);font-size:1.6rem;transition:.2s}
.qa.is-open .qa__q::after{transform:translateY(-50%) rotate(45deg)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted)}
.qa__a p{padding:0 2rem 1.2rem 0}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.contact__lead{color:var(--muted);margin-top:.8rem;font-size:1.05rem}
.contact__info{margin-top:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.contact__info a{font-family:var(--cond);font-size:1.1rem;color:var(--ink)}
.contact__info a:hover{color:var(--acid)}
.form{display:flex;flex-direction:column;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form__field{display:flex;flex-direction:column;gap:.35rem}
.form__field span{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;color:var(--muted)}
.form input,.form textarea,.form select{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:.75em .8em;font-family:var(--body);font-size:1rem;border-radius:2px;transition:.15s
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--acid)}
.form textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__status{font-family:var(--cond);font-size:.95rem;min-height:1.2em}
.form__status.ok{color:var(--acid)}
.form__status.err{color:#ff5b5b}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--bg);padding:3rem 1.2rem 2.4rem;text-align:center}
.to-top{display:inline-flex;align-items:center;gap:.4em;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--acid);border:1px solid var(--acid);padding:.6em 1.4em;border-radius:2px;margin-bottom:2rem;transition:.15s ease}
.to-top:hover{color:#000;background:var(--acid);border-color:var(--acid);transform:translateY(-2px)}
.footer__logo{height:62px;width:auto;margin:0 auto 1rem;display:block}
.footer__tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.9rem}
.footer__social{display:flex;justify-content:center;align-items:center;gap:1.1rem;margin:1.6rem 0}
.social-ico{display:inline-flex;transition:transform .15s ease,filter .15s ease}
.social-ico img{height:84px;width:auto;display:block;filter:drop-shadow(0 0 0 transparent)}
.social-ico:hover{transform:translateY(-3px) scale(1.08)}
.social-ico:hover img{filter:drop-shadow(0 4px 14px rgba(198,255,26,.55))}
/* Alumine rida: vasakul õigused, paremal hooldaja. „Admin" link on siit ÄRA VÕETUD
   (viis avalikult admini sisselogimisse; Toomas 09.09.2026). Admin on endiselt
   /ctrl/admin/ aadressil, lihtsalt lehelt ei viita sinna enam midagi. */
.footer__copy{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1.2rem;flex-wrap:wrap;
  max-width:var(--maxw);margin:1.6rem auto 0;color:var(--muted);font-size:.85rem;text-align:left}
.footer__copy a{color:var(--muted);text-decoration:none}
.footer__copy a:hover{color:var(--acid)}
/* teade andmete kogumise hetkel (GDPR art 13) */
.form__privacy{color:var(--muted);font-size:.82rem;line-height:1.45;margin:.2rem 0 1rem}
.form__privacy a{color:var(--acid);text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){
  /* telefonis veidi vaiksem, et vasak ja parem mahuksid ikka ÜHELE reale;
     kui ei mahu (vaga kitsas ekraan), murduvad nad tsentreeritult */
  .footer__copy{font-size:.78rem;gap:.4rem .8rem;justify-content:center;text-align:center}
  .footer__copy > span{flex:1 1 auto;text-align:left}
  .footer__copy > a{flex:1 1 auto;text-align:right}
}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,5,6,.95);display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.is-open{display:flex}
.lightbox__inner{max-width:1000px;width:100%;max-height:90vh}
.lightbox__inner img,.lightbox__inner iframe,.lightbox__inner video{width:100%;max-height:80vh;object-fit:contain;border:1px solid var(--line)}
.lightbox__cap{font-family:var(--cond);color:var(--ink);margin-top:.8rem;text-align:center}
.lightbox__close{position:absolute;top:1.2rem;right:1.4rem;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer}

/* capture-režiim (screenshot): vabasta hero kõrgus */
body.cap-hero .hero{min-height:520px}
body.cap-hero .hero__tagline{display:none}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:820px){
  /* Menüükast: kõrgus 100dvh, MITTE inset:0. Telefonibrauseris muutub aadressiriba
     peitmisel nähtava ala kõrgus; inset:0 arvestas paigutusvaateavaga, mistõttu kast
     nihkus kerimisel ja alla tekkis riba, kust paistis leht. dvh järgib nähtavat ala.
     Lisaks lukustab JS lehe kerimise (body.nav-open), nii et kast seisab paigal. */
  .nav__links{position:fixed;top:0;right:0;left:auto;bottom:0;height:100vh;height:100dvh;
    width:min(80vw,320px);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.6rem;
    padding:2rem;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg2);border-left:1px solid var(--line);transform:translateX(100%);transition:.25s ease;font-size:1.3rem}
  .nav__links.is-open{transform:none}
  .nav__links a{font-size:1.4rem}
  .burger{display:flex}
  .about,.contact{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .about__media{max-width:360px}
  .film{grid-template-columns:28px minmax(0,1fr) 28px}
  .film__edge{font-size:.6rem;letter-spacing:.12em}
  .about__leader{display:none} /* telefonis on plokk niigi paras */
  /* „keri" tuleb voogu CTA-nuppude ALLA. Absoluutne bottom:1.4rem istus kitsal
     ekraanil nuppude peal, sest hero sisu ulatub seal peaaegu alaservani. */
  .hero__scroll{position:static;transform:none;bottom:auto;left:auto;margin:1.8rem auto 0}
}
@media(max-width:560px){
  /* telefonis tööd ÜKSTEISE ALL, mitte kahes veerus (kolmas jäi muidu ritta üksi) */
  .work{grid-template-columns:1fr;gap:1rem}
  .film__edge:not(.film__edge--btm){padding-left:6rem}
  .film__edge:not(.film__edge--btm) span:first-child{display:none} /* tape ütleb juba CUTCTRL */
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero__tagline{position:static;font-size:1.4rem;opacity:1!important;filter:none!important;transform:none!important}
  .hero__anim{opacity:1!important;filter:none!important;transform:none!important}
  .hero__anim-vid{animation:none!important}
}