/* ==========================================================
   EPIC — Landing page (multi-project home)
   Scoped under .lp-* — does not collide with .ep-* shell.
   Depends on tokens from epic-tokens.css:
     --jet, --sand, --grey, --line, --surface, --ff-sans, --ff-mono
   ========================================================== */

/* Body bg override only when landing markup present */
body:has(.lp-cinema){ background:var(--surface); }

/* ============ CINEMATIC HERO ============ */
.lp-cinema{
  position:relative; height:100vh; min-height:640px; max-height:920px;
  background:#000; overflow:hidden; color:#fff;
}
.lp-cinema .bg{ position:absolute; inset:0; z-index:0; }
.lp-cinema .bg video,
.lp-cinema .bg .poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.lp-cinema .bg .poster{
  object-position:center 35%;
  background-size:cover; background-position:center 35%;
  animation: lpKenburns 24s ease-in-out infinite alternate;
}
.lp-cinema .bg .poster.placeholder{
  background:
    linear-gradient(180deg, rgba(3,40,43,.88), rgba(3,40,43,.58)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px),
    var(--jet);
}
@keyframes lpKenburns{
  0%   { transform:scale(1.06) translate(0,0); }
  100% { transform:scale(1.18) translate(-1.5%, -2%); }
}
.lp-cinema .scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(3,28,30,.55) 0%, rgba(3,28,30,.05) 22%, rgba(3,28,30,.10) 55%, rgba(3,28,30,.85) 100%);
}
.lp-cinema .grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.lp-cinema .nav-over,
.ep-hero .nav-over{
  position:absolute; top:0; left:0; right:0; z-index:5;
  padding:24px 0;
}
.lp-cinema .nav-over > .container,
.ep-hero .nav-over > .container,
.lp-nav > .container{
  max-width:none;
  width:100%;
  padding-left:64px;
  padding-right:64px;
}
.lp-cinema .nav-over .inner,
.ep-hero .nav-over .inner{
  display:flex; justify-content:space-between; align-items:center;
  position:relative;
}
.lp-cinema .nav-over img,
.ep-hero .nav-over img{ height:30px; width:auto; filter:brightness(0) invert(1); }
.lp-cinema .nav-over .right,
.ep-hero .nav-over .right{
  display:flex; gap:28px; align-items:center;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.lp-nav-links{ display:flex; gap:28px; align-items:center; }
.lp-cinema .nav-over .right a,
.ep-hero .nav-over .right a{ color:inherit; text-decoration:none; }
.lp-cinema .nav-over .right a:hover,
.ep-hero .nav-over .right a:hover{ color:#fff; }
.lp-phone-icon,
.lp-menu-toggle{
  display:none;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  color:inherit; background:rgba(3,40,43,.12);
  border:1px solid rgba(255,255,255,.26);
  border-radius:2px;
  padding:0;
}
.lp-phone-icon svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.lp-menu-toggle{ cursor:pointer; gap:5px; flex-direction:column; }
.lp-menu-toggle span{
  display:block; width:16px; height:1px;
  background:currentColor;
  transition:transform .16s, opacity .16s;
}
.lp-menu-open .lp-menu-toggle span:first-child{ transform:translateY(3px) rotate(45deg); }
.lp-menu-open .lp-menu-toggle span:last-child{ transform:translateY(-3px) rotate(-45deg); }
.lp-mobile-menu{
  display:none;
  position:absolute; top:calc(100% + 12px); right:0; z-index:65;
  width:min(280px, calc(100vw - 32px));
  padding:10px;
  background:rgba(3,40,43,.96);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
}
.lp-mobile-menu a{
  display:flex; align-items:center; min-height:42px;
  padding:0 12px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.86); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lp-mobile-menu a:last-child{ border-bottom:0; }
.lp-mobile-menu a:hover,
.lp-mobile-menu a:focus{ color:#fff; background:rgba(255,255,255,.06); }

.lp-cinema .content{
  position:relative; z-index:4;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:96px;
}
.lp-cinema .badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:32px;
}
.lp-cinema .badge::before{
  content:""; width:28px; height:1px; background:rgba(255,255,255,.5);
}
.lp-cinema h1{
  font-family:var(--ff-sans); font-weight:700;
  font-size:clamp(44px, 6.8vw, 104px); line-height:.98; letter-spacing:-.04em;
  color:#fff; margin:0 0 28px; max-width:14ch;
}
.lp-cinema h1 em{ font-style:normal; color:var(--sand); font-weight:700; }
.lp-cinema .sub{
  font-family:var(--ff-sans); font-weight:400;
  font-size:clamp(16px, 1.3vw, 19px); line-height:1.5; letter-spacing:-.005em;
  color:rgba(255,255,255,.82); margin:0; max-width:48ch;
}

.lp-cinema .foot{
  position:absolute; bottom:36px; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.lp-cinema .foot .scroll{ display:flex; align-items:center; gap:12px; }
.lp-cinema .foot .scroll .line{
  display:inline-block; width:1px; height:36px; background:rgba(255,255,255,.5);
  animation: lpScrollLine 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes lpScrollLine{
  0%   { transform:scaleY(0); }
  50%  { transform:scaleY(1); }
  100% { transform:scaleY(0); transform-origin:bottom; }
}
.lp-cinema .foot .right{ text-align:right; line-height:1.6; }

@media(max-width:820px){
  .lp-cinema{ min-height:520px; max-height:780px; }
  .lp-cinema .content{ padding-bottom:140px; }
  .lp-cinema h1{ font-size:clamp(36px, 9vw, 64px); margin-bottom:18px; }
  .lp-cinema .sub{ font-size:15px; }
  .lp-cinema .foot{
    bottom:20px; flex-direction:column-reverse; align-items:flex-start; gap:12px;
    font-size:9.5px; letter-spacing:.16em;
  }
  .lp-cinema .foot .right{ text-align:left; }
  .lp-cinema .foot .scroll .line{ height:24px; }
}

/* ============ STICKY NAV (after cinema) ============ */
.lp-nav{ position:sticky; top:0; z-index:50; background:var(--jet); color:#fff; }
.lp-nav .inner{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; position:relative; }
.lp-nav img{ height:28px; width:auto; display:block; filter:brightness(0) invert(1); }
.lp-nav .right{ display:flex; gap:24px; align-items:center; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.lp-nav .right a{ color:inherit; text-decoration:none; }
.lp-nav .right a:hover{ color:#fff; }

/* ============ SHARED FOOTER ============ */
.lp-foot{ background:var(--jet); color:rgba(255,255,255,.65); padding:22px 0; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.lp-foot .inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; }
.lp-foot img{ height:24px; display:block; filter:brightness(0) invert(1); opacity:.9; }
.lp-foot a{ color:inherit; text-decoration:none; }
.lp-foot a:hover{ color:#fff; }

/* ============ LANGUAGE SWITCHER (cinema + sticky) ============ */
.lp-lang{
  position:relative; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border:1px solid rgba(255,255,255,.25); border-radius:2px;
  color:inherit; transition:border-color .15s, background-color .15s;
}
.lp-lang:hover{ border-color:rgba(255,255,255,.6); }
.lp-lang:focus{ outline:none; border-color:rgba(255,255,255,.7); }
.lp-lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:200px; background:#fff; color:var(--jet);
  list-style:none; margin:0; padding:6px 0;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .15s, transform .15s;
}
.lp-lang.open .lp-lang-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.lp-lang-menu li{ margin:0; padding:0; }
.lp-lang-menu a{
  display:block; padding:9px 16px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:none;
  color:var(--jet); text-decoration:none;
}
.lp-cinema .nav-over .right .lp-lang-menu a,
.ep-hero .nav-over .right .lp-lang-menu a,
.lp-nav .right .lp-lang-menu a{
  color:var(--jet);
}
.lp-lang-menu a:hover,
.lp-lang-menu a:focus,
.lp-cinema .nav-over .right .lp-lang-menu a:hover,
.lp-cinema .nav-over .right .lp-lang-menu a:focus,
.ep-hero .nav-over .right .lp-lang-menu a:hover,
.ep-hero .nav-over .right .lp-lang-menu a:focus,
.lp-nav .right .lp-lang-menu a:hover,
.lp-nav .right .lp-lang-menu a:focus{
  background:var(--surface);
  color:var(--jet);
}
.lp-lang-menu a.on,
.lp-lang-menu a.on:hover,
.lp-lang-menu a.on:focus,
.lp-cinema .nav-over .right .lp-lang-menu a.on,
.lp-cinema .nav-over .right .lp-lang-menu a.on:hover,
.lp-cinema .nav-over .right .lp-lang-menu a.on:focus,
.ep-hero .nav-over .right .lp-lang-menu a.on,
.ep-hero .nav-over .right .lp-lang-menu a.on:hover,
.ep-hero .nav-over .right .lp-lang-menu a.on:focus,
.lp-nav .right .lp-lang-menu a.on,
.lp-nav .right .lp-lang-menu a.on:hover,
.lp-nav .right .lp-lang-menu a.on:focus{
  background:var(--jet);
  color:#fff;
}

@media(max-width:1100px){
  .lp-cinema .nav-over > .container,
  .ep-hero .nav-over > .container,
  .lp-nav > .container{
    padding-left:40px;
    padding-right:40px;
  }
  .lp-cinema .nav-over,
  .ep-hero .nav-over{ padding:16px 0; }
  .lp-cinema .nav-over img,
  .ep-hero .nav-over img,
  .lp-nav img{ height:24px; }
  .lp-cinema .nav-over .right,
  .ep-hero .nav-over .right,
  .lp-nav .right{ gap:8px; }
  .lp-nav-links{ display:none; }
  .lp-phone-icon,
  .lp-menu-toggle{ display:inline-flex; }
  .lp-menu-open .lp-mobile-menu{ display:flex; flex-direction:column; }
  .lp-nav .links-mobile-hide{ display:none; }
  .lp-foot .inner{ flex-direction:column; align-items:flex-start; }
}

@media(max-width:640px){
  .lp-cinema .nav-over > .container,
  .ep-hero .nav-over > .container,
  .lp-nav > .container{
    padding-left:20px;
    padding-right:20px;
  }
}

/* ============ ABOUT (Tko smo) ============ */
.lp-about{ padding:120px 0 96px; border-bottom:1px solid var(--line); background:var(--surface); }
.lp-about .kicker{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin-bottom:32px; }
.lp-about h2{ font-family:var(--ff-sans); font-weight:700; font-size:clamp(44px, 6.4vw, 88px); line-height:1.04; letter-spacing:-.035em; color:var(--jet); max-width:18ch; margin:0; }
.lp-about h2 em{ font-style:normal; color:#8f5f34; font-weight:700; }
.lp-about p.lede{ margin-top:32px; font-size:18px; line-height:1.55; color:var(--grey); max-width:54ch; font-weight:400; }
.lp-about .meta{ margin-top:56px; display:flex; gap:56px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); padding-top:28px; border-top:1px solid var(--line); }
.lp-about .meta b{ color:var(--jet); font-weight:700; font-family:var(--ff-sans); font-size:30px; letter-spacing:-.025em; text-transform:none; display:block; margin-bottom:6px; line-height:1; }

/* ============ PROJECTS GRID ============ */
.lp-projects{ padding:80px 0 120px; background:var(--surface); }
.lp-projects .head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
.lp-projects .head .num{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.lp-projects .head h2{ font-family:var(--ff-sans); font-weight:700; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.025em; color:var(--jet); margin-top:8px; }

.lp-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
@media(max-width:820px){ .lp-grid{ grid-template-columns:1fr; } }

.lp-proj{ position:relative; display:block; text-decoration:none; color:inherit; overflow:hidden; background:#fff; border:1px solid var(--line); transition:border-color .2s; }
.lp-proj:hover{ border-color:var(--jet); }
.lp-proj .img{
  aspect-ratio: 4/3; background-size:cover; background-position:center;
  background-color:var(--jet);
  position:relative; overflow:hidden;
}
.lp-proj .img img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.lp-proj .img.placeholder{
  background:
    repeating-linear-gradient(135deg, rgba(3,40,43,.04) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #0a3a3e 0%, #03282b 100%);
  display:flex; align-items:center; justify-content:center;
}
.lp-proj .img.placeholder .city{
  font-family:var(--ff-sans); font-weight:700;
  font-size:clamp(56px, 9vw, 112px); color:rgba(255,255,255,.16);
  letter-spacing:-.04em; line-height:1; text-transform:uppercase;
}
.lp-proj .lbl{
  position:absolute; left:16px; top:16px;
  padding:6px 12px; background:rgba(3,40,43,.85); color:#fff;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.lp-proj .lbl.coming{ background:rgba(168,111,61,.92); color:#fff; }
.lp-proj .info{ padding:32px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.lp-proj .info .left h3{ font-family:var(--ff-sans); font-weight:700; font-size:32px; letter-spacing:-.025em; color:var(--jet); line-height:1; margin-bottom:12px; }
.lp-proj .info .left .loc{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.lp-proj .info .right{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); text-align:right; line-height:1.6; }
.lp-proj .info .right b{ color:var(--jet); font-weight:700; display:block; font-family:var(--ff-sans); font-size:18px; letter-spacing:-.02em; text-transform:none; }
.lp-proj.disabled{ pointer-events:none; }
.lp-proj.disabled .info .right b{ color:var(--grey); }