html,body{background:#0c0e12;color:#f2f1ec}

/* Tokens. Radius rule: actions are pills, media is 6px. One accent: Trgograd navy. */
:root{
  --bg:#0c0e12;
  --bg-2:#13161c;
  --fg:242 241 236;
  --navy:#26377b;
  --navy-hi:#31469a;
  --navy-soft:#a9b5e6;
  --line:rgb(var(--fg) / .12);
  --r:6px;
  --gutter:clamp(20px,4.4vw,64px);
  --nav-h:72px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-move:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:Archivo,system-ui,sans-serif;font-stretch:100%;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:1em;height:1em;flex:none}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:rgb(49 70 154 / .75);color:#fff}
:focus-visible{outline:2px solid var(--navy-soft);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#3a3f4b var(--bg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;transition:top .2s var(--ease-out)}
.skip:focus{top:16px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 22px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .25s var(--ease-move),transform .16s var(--ease-move),border-color .25s var(--ease-move)}
.btn:active{transform:scale(.97)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 8px 24px rgb(8 12 32 / .35)}
.btn--ghost{color:rgb(var(--fg));border:1px solid rgb(var(--fg) / .32);background:rgb(12 14 18 / .25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--lg{height:54px;padding:0 10px 0 28px;font-size:15.5px}
.btn--ghost.btn--lg{padding:0 28px}
.btn__chip{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgb(255 255 255 / .14);transition:transform .3s var(--ease-out)}
.btn__chip svg{font-size:16px}
@media (hover:hover){
  .btn--navy:hover{background:var(--navy-hi)}
  .btn--ghost:hover{border-color:rgb(var(--fg) / .7)}
  .btn:hover .btn__chip{transform:translateX(3px)}
}

/* Nav */
.nav{position:fixed;inset:0 0 auto;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding:0 var(--gutter);
  transition:background-color .35s var(--ease-move),backdrop-filter .35s var(--ease-move)}
.nav.is-solid{background:rgb(12 14 18 / .72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line)}
.nav__logo img{width:168px;height:auto}
.nav__links{display:flex;gap:30px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav__links a{color:rgb(var(--fg) / .8);position:relative;padding:6px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
@media (hover:hover){.nav__links a:hover{color:rgb(var(--fg))}.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}}
.nav__menu{display:none;width:44px;height:44px;border-radius:50%;place-items:center;font-size:22px;border:1px solid rgb(var(--fg) / .28);background:rgb(12 14 18 / .35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:1060px){
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:grid;margin-left:auto}
  .nav__logo img{width:140px}
}
.menu{position:fixed;inset:0;z-index:60;background:#0c0e12;display:flex;flex-direction:column;padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom))}
.menu[hidden]{display:none}
.menu__close{align-self:flex-end;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;border:1px solid var(--line)}
.menu__links{display:flex;flex-direction:column;gap:6px;margin-top:6vh}
.menu__links a{font-stretch:125%;font-weight:700;font-size:clamp(34px,9vw,56px);letter-spacing:-.03em;line-height:1.15;text-transform:uppercase}
.menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.menu__tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:rgb(var(--fg) / .8)}

/* Stage: the pinned film */
.stage{position:relative;height:100svh}
.js .stage{height:620vh}
.stage__pin{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--bg)}
.ch{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.ch img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.ch:not(.ch--0){clip-path:inset(100% 0 0 0)}
.ch--0 img{object-position:50% 40%}
.ch--2 img{object-position:60% 50%}
.stage__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgb(12 14 18 / .55) 0%,rgb(12 14 18 / 0) 22%),
    linear-gradient(0deg,rgb(12 14 18 / .92) 0%,rgb(12 14 18 / .55) 30%,rgb(12 14 18 / 0) 62%),
    linear-gradient(90deg,rgb(12 14 18 / .55) 0%,rgb(12 14 18 / 0) 55%)}
.hero{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,9vh,96px);max-width:1100px}
.hero__title{font-stretch:125%;font-weight:700;font-size:clamp(46px,7.1vw,116px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;text-shadow:0 16px 38px rgb(0 0 0 / .3)}
.line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.line>span{display:block;white-space:nowrap}
.hero__sub{margin-top:26px;max-width:34rem;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:rgb(var(--fg) / .82);text-shadow:0 2px 18px rgb(0 0 0 / .42)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.chap{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);bottom:clamp(32px,7vh,84px);pointer-events:none;visibility:hidden}
.chap__fact{max-width:30rem;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:rgb(var(--fg) / .78);text-shadow:0 2px 18px rgb(0 0 0 / .5);margin-bottom:clamp(14px,2.2vh,26px)}
.chap__fact strong{display:block;color:rgb(var(--fg));font-weight:600}
.chap__word{overflow:hidden;font-stretch:125%;font-weight:800;font-size:clamp(76px,16.5vw,272px);line-height:.8;letter-spacing:-.045em;text-transform:uppercase;padding-top:.06em}
.chap__word span{display:block;white-space:nowrap}
@media (max-width:760px){.chap__word{font-size:15.2vw;font-stretch:115%;letter-spacing:-.04em}}

.rail{position:absolute;z-index:6;right:var(--gutter);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;padding-left:22px}
.rail__line{position:absolute;left:0;top:4px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,rgb(var(--fg) / .28) 0 10px,transparent 10px 18px)}
.rail__fill{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgb(var(--fg)) 0 10px,transparent 10px 18px);transform-origin:top;transform:scaleY(0)}
.rail button{position:relative;min-height:28px;text-align:left;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--fg) / .62);text-shadow:0 1px 12px rgb(0 0 0 / .75);transition:color .3s var(--ease-move)}
.rail button::before{content:"";position:absolute;left:-27px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--bg);border:2px solid rgb(var(--fg) / .4);transition:background-color .3s,border-color .3s,transform .3s var(--ease-out)}
.rail button.is-on{color:rgb(var(--fg))}
.rail button.is-on::before{background:var(--navy);border-color:#fff;transform:scale(1.25)}
@media (hover:hover){.rail button:hover{color:rgb(var(--fg) / .85)}}
.rail{opacity:0;transition:opacity .4s var(--ease-move)}
.rail.is-shown{opacity:1}
@media (max-width:760px){
  .rail{top:calc(var(--nav-h) + 6px);right:auto;left:var(--gutter);transform:none;flex-direction:row;gap:14px;padding:16px 0 0}
  .rail__line{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,rgb(var(--fg) / .28) 0 10px,transparent 10px 18px)}
  .rail__fill{background:repeating-linear-gradient(90deg,rgb(var(--fg)) 0 10px,transparent 10px 18px);transform-origin:left;transform:scaleX(0)}
  .rail button{font-size:11px;letter-spacing:.04em;min-height:32px}
  .rail button::before{left:50%;top:-21px;margin:0 0 0 -5px;width:10px;height:10px}
  .ch--1 img{object-position:30% 50%}
  .ch--3 img{object-position:50% 50%}
  .ch--4 img{object-position:30% 50%}
}

/* Sections */
.sec{position:relative;padding:clamp(88px,12vw,168px) 0}
.h2{font-stretch:118%;font-weight:700;font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:-.035em;max-width:16ch}
.lede{margin-top:22px;max-width:36rem;font-size:clamp(16px,1.3vw,19px);color:rgb(var(--fg) / .66)}

/* Bento: 8 services, 8 cells */
.bento{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(220px,19vw,300px);gap:12px}
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg-2);isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),filter .6s var(--ease-move);filter:saturate(.85)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgb(12 14 18 / .9) 0%,rgb(12 14 18 / .35) 45%,rgb(12 14 18 / .05) 75%)}
.tile--hero{grid-column:span 2;grid-row:span 2}
.tile--wide{grid-column:span 2}
.tile__body{position:absolute;z-index:2;left:22px;right:64px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.tile__t{font-stretch:118%;font-weight:700;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;line-height:1.1}
.tile--hero .tile__t{font-size:clamp(28px,3vw,44px)}
.tile__d{font-size:14.5px;line-height:1.45;color:rgb(var(--fg) / .72);max-width:34ch}
.tile--hero .tile__d{font-size:16px}
.tile__go{position:absolute;z-index:2;right:16px;bottom:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .18);transition:background-color .3s,transform .35s var(--ease-out)}
@media (hover:hover){
  .tile:hover img{transform:scale(1.05);filter:saturate(1)}
  .tile:hover .tile__go{background:var(--navy);border-color:transparent;transform:rotate(45deg)}
}
@media (max-width:1060px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
  .tile--hero{grid-column:span 2;grid-row:span 2}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:8px}
  .tile--hero{grid-row:span 2}
  .tile__body{left:14px;right:14px;bottom:14px}
  .tile:not(.tile--hero):not(.tile--wide) .tile__d{display:none}
  .tile:not(.tile--hero):not(.tile--wide) .tile__t{font-size:17px}
  .tile__go{display:none}
}

/* References: two-panel accordion */
.refs{padding-bottom:0}
.refs__pair{display:flex;gap:12px;margin-top:clamp(40px,5vw,64px);height:clamp(420px,42vw,600px)}
.ref{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r);background:var(--bg-2);transition:flex-grow .7s var(--ease-out)}
.ref img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.ref::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(12 14 18 / .92) 0%,rgb(12 14 18 / .4) 45%,rgb(12 14 18 / 0) 72%)}
.ref__body{position:absolute;z-index:2;left:clamp(20px,2.6vw,36px);right:clamp(20px,2.6vw,36px);bottom:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;gap:12px}
.ref__t{font-stretch:125%;font-weight:800;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.035em;line-height:1;text-transform:uppercase;white-space:nowrap}
.ref__list{max-width:40ch;font-size:15px;color:rgb(var(--fg) / .72)}
.ref__more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.ref__more svg{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (min-width:901px){
  .refs__pair:hover .ref{flex-grow:.72}
  .refs__pair .ref:hover{flex-grow:1.5}
  .ref:hover img{transform:scale(1.04)}
  .ref:hover .ref__more svg{transform:translateX(4px)}
}
@media (max-width:900px){
  .refs__pair{flex-direction:column;height:auto}
  .ref{flex:none;height:min(110vw,460px)}
}
.marquee{margin-top:clamp(64px,8vw,112px);padding:26px 0;border-block:1px solid var(--line);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marq 60s linear infinite}
.marquee__row{display:flex;flex:none}
.marquee__row li{display:flex;align-items:center;white-space:nowrap;font-stretch:112%;font-weight:600;font-size:clamp(18px,1.8vw,26px);letter-spacing:-.015em;color:rgb(var(--fg) / .8)}
.marquee__row li::after{content:"";width:18px;height:3px;margin:0 28px;background:rgb(var(--fg) / .5);border-radius:2px}
@media (hover:hover){.marquee:hover .marquee__track{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}

/* Story: horizontal road */
.story{position:relative}
.story__pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(36px,6vh,72px);padding:calc(var(--nav-h) + 24px) 0 48px;overflow:hidden}
.road{position:relative}
.road__surface{position:absolute;left:0;right:0;top:clamp(66px,8vh,92px);height:4px;background:repeating-linear-gradient(90deg,rgb(var(--fg) / .16) 0 40px,transparent 40px 64px)}
.road__paint{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgb(var(--fg)) 0 40px,transparent 40px 64px);transform-origin:left;transform:scaleX(0)}
.road__track{display:flex;gap:clamp(28px,4vw,64px);padding:0 var(--gutter);width:max-content}
.km{position:relative;width:clamp(240px,22vw,320px);flex:none;padding-top:clamp(96px,11vh,124px)}
.km__y{position:absolute;top:0;left:0;font-stretch:125%;font-weight:800;font-size:clamp(44px,4.6vw,72px);line-height:1;letter-spacing:-.045em}
.km::before{content:"";position:absolute;left:0;top:clamp(60px,7.4vh,86px);width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid rgb(var(--fg));}
.km p{font-size:16px;line-height:1.5;color:rgb(var(--fg) / .72);max-width:30ch}
.km--img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin-bottom:18px}
.km__y--word{font-size:clamp(32px,3.2vw,50px);top:clamp(10px,1.4vw,22px)}
.km--big .km__y{color:#fff}
.km--big::before{background:var(--navy);border-color:#fff}
.km--big p{color:rgb(var(--fg));font-weight:500}
.no-pin .road{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.no-pin .km{scroll-snap-align:start}

/* Trajnost */
.green{overflow:hidden;min-height:min(100vh,900px);display:flex;align-items:center}
.green__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.green::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(12 14 18 / .94) 0%,rgb(12 14 18 / .78) 40%,rgb(12 14 18 / .15) 80%),linear-gradient(0deg,rgb(12 14 18 / .6),transparent 30%),linear-gradient(180deg,var(--bg),transparent 18%)}
.green__in{position:relative;z-index:2}
.green__list{margin-top:clamp(36px,4vw,56px);display:flex;flex-direction:column;gap:26px;max-width:34rem}
.green__list li{display:flex;gap:18px;align-items:flex-start;font-size:17px;color:rgb(var(--fg) / .76)}
.green__list strong{color:rgb(var(--fg));font-weight:600}
.green__list svg{font-size:26px;margin-top:1px;color:var(--navy-soft)}
.green__note{margin-top:40px;font-size:13px;color:rgb(var(--fg) / .5)}
@media (max-width:760px){.green::before{background:linear-gradient(0deg,rgb(12 14 18 / .96) 0%,rgb(12 14 18 / .82) 60%,rgb(12 14 18 / .4) 100%),linear-gradient(180deg,var(--bg),transparent 18%)}}

/* Contact */
.contact{padding-bottom:clamp(72px,8vw,120px)}
.contact__title{font-stretch:125%;font-weight:800;font-size:clamp(34px,7.6vw,128px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
.contact__title span{display:block;white-space:nowrap}
.contact__grid{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.contact__big{display:flex;align-items:center;gap:18px;padding:clamp(22px,3vw,40px) 0;font-stretch:112%;font-weight:600;font-size:clamp(22px,2.8vw,42px);letter-spacing:-.025em;transition:color .25s}
.contact__big+.contact__big{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}
.contact__big svg{font-size:.8em;color:var(--navy-soft)}
@media (hover:hover){.contact__big:hover{color:var(--navy-soft)}}
.contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.contact__addr{display:inline-flex;align-items:center;gap:10px;color:rgb(var(--fg) / .76);text-decoration:underline;text-decoration-color:rgb(var(--fg) / .3);text-underline-offset:5px}
@media (hover:hover){.contact__addr:hover{text-decoration-color:currentColor}}
@media (max-width:760px){
  .contact__title{font-size:8.6vw;font-stretch:108%}
  .contact__grid{grid-template-columns:1fr}
  .contact__big+.contact__big{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}
.foot{border-top:1px solid var(--line);padding:32px 0 calc(32px + env(safe-area-inset-bottom));font-size:14px;color:rgb(var(--fg) / .55)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.foot__in img{width:120px;height:auto;opacity:.8}
.foot__links{display:flex;gap:24px;margin-left:auto}
.foot__links a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
@media (hover:hover){.foot__links a:hover{color:rgb(var(--fg))}}
@media (max-width:760px){.foot__links{margin-left:0;flex-wrap:wrap}}

/* Reveal: visible by default; JS opts in */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .js .reveal{opacity:1;transform:none}
  .tile img,.ref,.ref img{transition:none}
}