@charset "UTF-8";
/* CSS Document */


/* RB frontpage � layout based on your mockup */
:root{
  --bg: #dfe3d2;          /* svetl� b�ovo-zelen� pozadie */
  --accent: #ff1d1d;      /* ?erven� z n�vrhu */
  --neon: #caff00;        /* zelen� blok */
  --text: var(--accent);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

.scramble{
  display: inline-block;
  white-space: nowrap;
  will-change: contents;
}



/* --- Top bar / nav --- */
.topbar{
  padding: 26px 24px 0;
}

/* NAV: 3 columns so the WHOLE NAV sits centered and the logo is truly centered */
.nav{
	    font-family: 'Poppins', sans-serif;

  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | brand | right */
  align-items: start;
  column-gap: 34px;
}

/* left/right groups */
.nav__left,
.nav__right{
  display:flex;
  gap: 56px;
  padding-top: 35px;
  align-items:center;
}

.nav__left{ justify-content: flex-end; }
.nav__right{ justify-content: flex-start; }

.nav a{
  text-decoration:none;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: .08em;
  font-size: 16px;
  text-transform: uppercase;
}

/* brand */
.brand{
  justify-self: center;
  align-self: start;
  text-decoration:none;
  color: var(--accent);
  line-height: 1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  transform: translateY(-4px);
}

.brand__logo{
  width: 150px;   /* dolad� */
  height: auto;
  display:block;
}


.brand__r,
.brand__b{
  font-weight: 800;
  font-size: 118px;
  letter-spacing: -0.10em;
}
.brand__b{
  display:inline-block;
  transform: scaleX(-1); /* "oto?en� B" */
  margin-left: -10px;
}

/* --- Hero --- */
.hero{
  padding: 70px 0px 0px;
}

/* HERO stage nech je full-width (bez max-width obmedzenia) */
.hero__stage{
  position: relative;
  width: 100%;
}



/* VIDEO p�s */
.hero__media{
  position: relative;
  width: 100%;
  height: 450px;   /* v��ka p�su */
  overflow: hidden;     /* p�s od kraja po kraj (ak chce� rohy, daj 16px) */
}

/* VIDEO sa NENATAHUJE, iba sa ore�e */
.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* toto rob� orez bez deform�cie */
  object-position: center;/* ak chce� orez smerova? hore: center top */
  display: block;
}


.hero__headline{
  font-family: 'Poppins', sans-serif;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 6px;

  text-align: center;
  z-index: 2;
  pointer-events: none;
}

/* wrapper pre druhý riadok */
.hero__lineRow{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* texty */
.hero__line{
  display:block;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 900;
  pointer-events: auto;
}

.hero__line--big{
  line-height: 0.9;  /* alebo 0.88 ak chce� tesnej�ie */
  margin-bottom: -4px; /* mikro doladenie */
}

.hero__line--big{
  font-size: clamp(64px, 10vw, 156px);
  line-height: .92;
  transform: none;
  text-align: center;
}

/* spodn� text v�?�� */
.hero__line--small{
  font-size: clamp(25px, 8vw, 82px); /* zv�?�en� */
  line-height: .92;
  transform: none;
}

/* better feel on smaller screens */
@media (max-width: 700px){
  .nav{
    justify-content:space-between;
    gap: 14px;
  }
  .nav__left, .nav__right{
    gap: 18px;
    padding-top: 12px;
  }
  .brand__r,.brand__b{
    font-size: 84px;
  }
  .hero__headline{
    padding-bottom: 0;
  }
  .hero__line--small{
    transform: translateX(0);
    align-self: flex-start;
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .scramble{ transition:none !important; }
}



#cursor-x{
  position: fixed;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 99999;
  opacity: 1;
  transition: opacity 120ms ease;
}

#cursor-x::before,
#cursor-x::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 4px;              /* hrub�ie */
  background: #ff0000;      /* daj presn� tvoju ?erven� */
  border-radius: 6px;       /* viac zaoblen� */
  transform-origin: center;
}

#cursor-x::before{
  transform: translate(-50%, -50%) rotate(45deg);
}

#cursor-x::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

#cursor-x.is-hidden{
  opacity: 0;
}




/* ============================
   INTRO LOADER
============================ */


.hero__line{
  font-family: var(--headline-font);
}

/* lock page while loading */
body.is-loading{
  overflow: hidden;
}

body.is-loading .topbar,
body.is-loading .hero{
  opacity: 0;
}

/* fullscreen overlay */
.loader{
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loader__text{
  width: 100%;
  text-transform: uppercase;
  color: var(--accent);
padding-left: 50px;
  font-family: var(--headline-font);
  font-weight: 200;       /* tenk� */
  line-height: .8;
}

/* ka�d� riadok */
.loader__line{
  width: 100%;
  text-align: left;
  white-space: pre; /* zachov� medzery presne */
  font-size: 13vw;        /* ? toto je k?�? */
  letter-spacing: -0.03em;
}

.loader--hide{
  opacity: 0;
  pointer-events: none;
}

/* ============================
   INTRO LOADER � slide up + fade + reveal page
============================ */
body.is-loading{
  overflow: hidden;
}

/* str�nka pod loaderom */
.topbar,
.hero{
  transition: opacity 700ms ease, transform 700ms ease;
}

body.is-loading .topbar,
body.is-loading .hero{
  opacity: 0;
  transform: translateY(14px);
}

body.is-ready .topbar,
body.is-ready .hero{
  opacity: 1;
  transform: translateY(0);
}

/* loader overlay */
.loader{
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100000;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  opacity: 1;
  transform: translateY(0);
  transition: transform 750ms cubic-bezier(.22,.61,.36,1), opacity 750ms ease;
  will-change: transform, opacity;
}

/* ke? odch�dza */
.loader--exit{
  opacity: 0;
  transform: translateY(-120px); /* odlet hore */
  pointer-events: none;
}



/* row pod videom */
.hero__below{
  position: relative;
  height: 26px;
  margin-top: 26px;
}

.scroll-indicator{
  position: absolute;
  left: 50vw;                 /* ? stred okna */
  transform: translateX(-50%);
  top: 0;

  white-space: nowrap;
  text-align: center;

  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 300;

  animation: scrollFade 2.2s ease-in-out infinite;
}

/* EST � 100px od prav�ho okraja viewportu */
.hero__est{
  position: absolute;
  right: 100px;
  top: 0;

  white-space: nowrap;
  text-align: right;

  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 300;

  animation: none;
  transform: none;
}

@keyframes scrollFade{
  0%{
    opacity: 1;
    translate: 0 0;
  }

  50%{
    opacity: .4;
    translate: 0 6px;
  }

  100%{
    opacity: 1;
    translate: 0 0;
  }
}

/* video hover label */
.hero__media{ position: relative; }

.video-label{
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;

  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 300;
  font-size: clamp(22px, 3vw, 46px); /* ve?k�, ale responsive */

  will-change: transform;
}

/* zobrazi? len ke? si nad videom */
.hero__media.is-hover .video-label{
  opacity: 1;
}

.hero__media{
  position: relative;
}

.video-icon{
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;

  opacity: 0;
  transition: opacity 200ms ease;

  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__media.is-hover .video-icon{
  opacity: 1;
}

.icon{
  width: 100%;
  height: 100%;
  fill: var(--accent);
}

.icon-play{
  display: none;
}

/* ke? je video paused */
.video-icon.is-paused .icon-pause{
  display: none;
}

.video-icon.is-paused .icon-play{
  display: block;
}

/* nad videom �iadny default kurzor */
.hero__media{
  cursor: none;
}

html{
  scroll-behavior: smooth;
}


/* ============================
   O NAS
============================ */

.about{
  position: relative;
  height: 180vh;
  background: var(--bg);
  color: var(--accent);
}

.about__sticky{
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  display: grid;
  grid-template-columns: 55% 45%;

  overflow: hidden;
}


/* LEFT SIDE */

.about__visual{
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


.about__image{
  position: relative;

  width: min(47vw, 760px);
  aspect-ratio: 1947 / 1885;
}


/* kazdy pas je rovnaky cely obrazok */

.about__slice{
  position: absolute;
  inset: 0;

  will-change: transform;
}


.about__slice img{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  display: block;

  user-select: none;
  pointer-events: none;
}


/* HORNA TRETINA */

.about__slice--1{
  clip-path: inset(0 0 66.666% 0);
}


/* STREDNA TRETINA */

.about__slice--2{
  clip-path: inset(33.333% 0 33.333% 0);
}


/* SPODNA TRETINA */

.about__slice--3{
  clip-path: inset(66.666% 0 0 0);
}



/* RIGHT SIDE */

.about__text{
  display: flex;
  align-items: center;

  padding-right: 9vw;
  padding-left: 4vw;
}


.about__text-inner{
  max-width: 550px;
}


.about__label{
  display: block;

  margin-bottom: 28px;

  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 300;

  letter-spacing: .18em;
}


.about__text h2{
  margin: 0 0 45px;

  font-family: 'Poppins', sans-serif;

  font-size: clamp(65px, 7vw, 120px);
  font-weight: 200;

  line-height: .9;
  letter-spacing: -.06em;
}


.about__text p{
  margin: 0 0 24px;

  font-family: 'Poppins', sans-serif;

  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;

  line-height: 1.7;
  letter-spacing: .01em;
}


/* MOBILE */

@media (max-width: 800px){

  .about{
    height: 150vh;
  }

  .about__sticky{
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 50vh;
  }

  .about__image{
    width: 76vw;
  }

  .about__text{
    padding: 20px 8vw 50px;
    align-items: flex-start;
  }

  .about__text h2{
    margin-bottom: 25px;
  }

}

.about__visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}



/* =========================================
   ABOUT MOTTO - BALL WAVE
========================================= */

.about__motto-scramble{
  position: relative;

  width: 100%;
  max-width: 680px;

  margin: 0 0 52px 0;

  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 2.6vw, 48px);
  font-weight: 200;

  line-height: 1.18;
  letter-spacing: -0.035em;

  color: var(--accent);

  overflow: visible;
}


.about__char{
  display: inline-block;

  transform: translate3d(0, 0, 0);

  transform-origin: center bottom;

  will-change: transform;
}


/* medzera mus? zosta? norm?lna */

.about__space{
  display: inline-block;
  width: .28em;
}

/* =========================================
   SERVICES
========================================= */

.services{
  position: relative;

  height: 260vh;

  background: var(--bg);
  color: var(--accent);
}


/* sticky obrazovka */

.services__sticky{
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  display: grid;
  grid-template-columns: 40% 60%;

  overflow: hidden;
}


/* =========================================
   LEFT SIDE
========================================= */

.services__intro{
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-left: 8vw;
  padding-right: 4vw;
}


.services__label{
  display: block;

  margin-bottom: 26px;

  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 300;

  letter-spacing: .18em;
}


.services__intro h2{
  margin: 0 0 42px;

  font-family: 'Poppins', sans-serif;

  font-size: clamp(60px, 6vw, 110px);
  font-weight: 200;

  line-height: .9;
  letter-spacing: -.06em;
}


.services__claim{
  margin: 0;

  font-family: 'Poppins', sans-serif;

  font-size: clamp(22px, 2vw, 34px);
  font-weight: 200;

  line-height: 1.25;
  letter-spacing: -.035em;
}


/* counter dole */

.services__counter{
  position: absolute;

  left: 8vw;
  bottom: 70px;

  display: flex;
  align-items: center;
  gap: 14px;

  font-family: 'Poppins', sans-serif;

  font-size: 12px;
  font-weight: 300;

  letter-spacing: .12em;
}


.services__counter-current{
  min-width: 20px;
}


.services__counter-line{
  display: block;

  width: 70px;
  height: 1px;

  background: var(--accent);

  opacity: .35;
}


/* =========================================
   RIGHT SIDE
========================================= */

.services__list{
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-right: 7vw;
}


/* SERVICE */

.services__item{
  position: relative;

  width: 100%;

  min-height: 118px;

  display: grid;

  grid-template-columns:
    45px
    1fr
    50px;

  align-items: center;

  border-top: 1px solid rgba(255,29,29,.22);

  cursor: pointer;

  opacity: .24;

  transform: translateX(0);

  transition:
    opacity 700ms cubic-bezier(.22,.61,.36,1),
    transform 700ms cubic-bezier(.22,.61,.36,1);
}


.services__item:last-child{
  border-bottom: 1px solid rgba(255,29,29,.22);
}


/* ACTIVE */

.services__item.is-active{
  opacity: 1;

  transform: translateX(22px);
}


/* small number */

.services__item-number{
  font-family: 'Poppins', sans-serif;

  font-size: 11px;
  font-weight: 300;

  align-self: start;

  margin-top: 30px;

  letter-spacing: .1em;
}


/* MAIN SERVICE NAME */

.services__item-title{
  font-family: 'Poppins', sans-serif;

  font-size: clamp(40px, 5vw, 84px);
  font-weight: 200;

  line-height: 1;

  letter-spacing: -.055em;

  white-space: nowrap;
}


/* arrow */

.services__item-arrow{
  font-family: 'Poppins', sans-serif;

  font-size: 28px;
  font-weight: 200;

  text-align: right;

  opacity: 0;

  transform:
    translate(-12px, 12px);

  transition:
    opacity 500ms ease,
    transform 500ms ease;
}


.services__item.is-active
.services__item-arrow{
  opacity: 1;

  transform:
    translate(0, 0);
}


/* =========================================
   HOVER
========================================= */

@media (hover: hover){

  .services__item:hover{
    opacity: 1;
    transform: translateX(22px);
  }

  .services__item:hover
  .services__item-arrow{
    opacity: 1;

    transform:
      translate(0, 0);
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px){

  .services{
    height: auto;
  }


  .services__sticky{
    position: relative;

    height: auto;

    grid-template-columns: 1fr;

    padding:
      100px
      7vw;
  }


  .services__intro{
    padding: 0;

    margin-bottom: 80px;
  }


  .services__counter{
    display: none;
  }


  .services__list{
    padding: 0;
  }


  .services__item{
    min-height: 90px;

    grid-template-columns:
      32px
      1fr
      35px;
  }


  .services__item-title{
    font-size:
      clamp(
        32px,
        9vw,
        55px
      );

    white-space: normal;
  }


  .services__item.is-active{
    transform:
      translateX(10px);
  }

}

/* =========================================
   SERVICES VISUALS
========================================= */

.services__sticky{
  isolation: isolate;
}


/* obal vizualu */

.services__visual{
  position: absolute;

  right: 2vw;
  top: 50%;

  width: min(31vw, 500px);
  aspect-ratio: 1 / 1;

  transform: translateY(-50%);

  pointer-events: none;

  z-index: -1;
}


/* kazdy vizual */

.services__visual-item{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  transform:
    scale(.86)
    rotate(-3deg);

  filter: blur(8px);

  transition:
    opacity 900ms ease,
    transform 1000ms cubic-bezier(.22,.61,.36,1),
    filter 900ms ease;
}


.services__visual-item.is-active{
  opacity: 1;

  transform:
    scale(1)
    rotate(0);

  filter: blur(0);
}



/* =========================================
   01 - GRAFIKA
========================================= */

.graphic-grid{
  width: 72%;
  aspect-ratio: 1;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 13px;

  transform: rotate(-8deg);
}


.graphic-grid span{
  border: 1px solid var(--accent);

  opacity: .22;

  animation:
    graphicPulse
    3.6s
    ease-in-out
    infinite;
}


.graphic-grid span:nth-child(2n){
  animation-delay: -.8s;
}

.graphic-grid span:nth-child(3n){
  animation-delay: -1.7s;
}

.graphic-grid span:nth-child(5n){
  background: var(--accent);

  opacity: .10;
}


@keyframes graphicPulse{

  0%,
  100%{
    transform: scale(1);
  }

  50%{
    transform: scale(.72);
  }

}



/* =========================================
   02 - WEB DESIGN
========================================= */

.web-window{
  position: relative;

  width: 88%;
  height: 62%;

  border:
    1px solid
    rgba(255,29,29,.38);
}


.web-window__top{
  height: 42px;

  border-bottom:
    1px solid
    rgba(255,29,29,.28);

  display: flex;
  align-items: center;

  gap: 7px;

  padding-left: 15px;
}


.web-window__top i{
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--accent);

  opacity: .45;
}


.web-window__content{
  padding: 28px;
}


.web-window__content > span{
  display: block;

  height: 1px;

  background: var(--accent);

  opacity: .25;

  margin-bottom: 16px;
}


.web-window__content > span:nth-child(1){
  width: 70%;
}

.web-window__content > span:nth-child(2){
  width: 48%;
}

.web-window__content > span:nth-child(3){
  width: 82%;
}


.web-window__cards{
  margin-top: 35px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.web-window__cards b{
  display: block;

  height: 75px;

  border:
    1px solid
    rgba(255,29,29,.25);
}


.web-scan{
  position: absolute;

  left: 0;
  right: 0;

  top: 0;

  height: 1px;

  background: var(--accent);

  opacity: .55;

  animation:
    webScan
    3.8s
    ease-in-out
    infinite;
}


@keyframes webScan{

  0%{
    top: 42px;
  }

  50%{
    top: calc(100% - 1px);
  }

  100%{
    top: 42px;
  }

}



/* =========================================
   03 - 3D
========================================= */

.cube{
  position: relative;

  width: 210px;
  height: 210px;

  animation:
    cubeFloat
    6s
    ease-in-out
    infinite;
}


.cube__face{
  position: absolute;

  width: 150px;
  height: 150px;

  border:
    1px solid
    rgba(255,29,29,.50);
}


.cube__face--front{
  left: 15px;
  top: 45px;
}


.cube__face--back{
  left: 52px;
  top: 10px;
}


/* spojnice */

.cube__connector{
  position: absolute;

  width: 52px;
  height: 1px;

  background: var(--accent);

  opacity: .45;

  transform-origin: left center;
}


.cube__connector--1{
  left: 15px;
  top: 45px;

  transform: rotate(-43deg);
}


.cube__connector--2{
  left: 165px;
  top: 45px;

  transform: rotate(-43deg);
}


.cube__connector--3{
  left: 15px;
  top: 195px;

  transform: rotate(-43deg);
}


.cube__connector--4{
  left: 165px;
  top: 195px;

  transform: rotate(-43deg);
}


@keyframes cubeFloat{

  0%,
  100%{
    transform:
      translateY(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(-18px)
      rotate(4deg);
  }

}



/* =========================================
   04 - TVORBA LOGA
========================================= */

.logo-geometry{
  position: relative;

  width: 300px;
  height: 300px;

  animation:
    logoRotate
    14s
    linear
    infinite;
}


.logo-circle{
  position: absolute;

  border:
    1px solid
    rgba(255,29,29,.45);

  border-radius: 50%;
}


.logo-circle--1{
  width: 180px;
  height: 180px;

  left: 20px;
  top: 60px;
}


.logo-circle--2{
  width: 180px;
  height: 180px;

  right: 20px;
  top: 60px;
}


.logo-circle--3{
  width: 110px;
  height: 110px;

  left: 95px;
  top: 95px;

  border-width: 2px;

  opacity: .55;
}


.logo-line{
  position: absolute;

  left: 20px;
  top: 50%;

  width: 260px;
  height: 1px;

  background: var(--accent);

  opacity: .25;
}


.logo-line--2{
  transform: rotate(90deg);
}


@keyframes logoRotate{

  from{
    transform: rotate(0);
  }

  to{
    transform: rotate(360deg);
  }

}



/* =========================================
   ABY TEXT OSTAL V POPREDI
========================================= */

.services__intro,
.services__list{
  position: relative;

  z-index: 2;
}


/* vizual nech je velmi jemny */

.services__visual{
  opacity: .8;
}



@media (max-width: 800px){

  .services__visual{
    display: none;
  }

}

.services__description{
  max-width: 520px;

  margin: 0 0 45px;

  font-family: 'Poppins', sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;

  line-height: 1.7;
  letter-spacing: .01em;

  color: var(--accent);
}

/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio{
  position: relative;

  width: 100%;

  background: var(--bg);
  color: var(--accent);

  padding:
    135px
    6vw
    120px;

  overflow: hidden;
}


.portfolio__inner{
  width: 100%;
  max-width: 1400px;

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.portfolio__header{
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  align-items: end;

  margin-bottom: 70px;
}


.portfolio__label{
  display: block;

  margin-bottom: 25px;

  font-family: 'Poppins', sans-serif;

  font-size: 13px;
  font-weight: 300;

  letter-spacing: .18em;
}


.portfolio__heading h2{
  margin: 0;

  font-family: 'Poppins', sans-serif;

  font-size:
    clamp(
      65px,
      7vw,
      120px
    );

  font-weight: 200;

  line-height: .85;

  letter-spacing: -.06em;
}


.portfolio__description{
  justify-self: end;

  width: 100%;
  max-width: 520px;

  margin: 0 0 5px;

  font-family: 'Poppins', sans-serif;

  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;

  line-height: 1.7;
  letter-spacing: .01em;

  color: var(--accent);
}


/* =========================================================
   SHOWCASE
========================================================= */

.portfolio__showcase{
  position: relative;

  width: 82%;

  margin-left: auto;

  overflow: hidden;
}


/* samotny obraz */

.portfolio__media{
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 8.7;

  overflow: hidden;

  background:
    rgba(255,29,29,.05);

  transform:
    translate3d(
      var(--portfolio-x, 0px),
      var(--portfolio-y, 0px),
      0
    );

  transition:
    transform 900ms
    cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   IMAGES
========================================================= */
.portfolio__image{
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0;

  filter: blur(7px);

  /* nov? obr?zok za?ne mierne pribl?en? */
  transform: scale(1.10);

  transition:
    opacity 650ms ease,
    filter 850ms ease,
    transform 1400ms cubic-bezier(.16,1,.3,1);

  will-change:
    transform,
    opacity,
    filter;
}


.portfolio__image.is-active{
  opacity: 1;

  filter: blur(0);

  /* a plynulo sa zmen?? do norm?lnej ve?kosti */
  transform: scale(1);
}

/* jemne zatienenie obrazku */

.portfolio__showcase::after{
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.02) 45%,
      rgba(0,0,0,0) 70%
    );

  z-index: 2;

  transition:
    background 600ms ease;
}


.portfolio__showcase:hover::after{
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.05) 52%,
      rgba(0,0,0,0) 75%
    );
}


/* =========================================================
   PROJECT INFO
========================================================= */

.portfolio__project-info{
  position: absolute;

  z-index: 3;

  left: 35px;
  right: 35px;
  bottom: 30px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  color: #fff;

  pointer-events: none;
}


.portfolio__active-type{
  display: block;

  margin-bottom: 8px;

  font-family: 'Poppins', sans-serif;

  font-size: 11px;
  font-weight: 400;

  letter-spacing: .14em;

  opacity: .75;
}


.portfolio__active-title{
  margin: 0;

  font-family: 'Poppins', sans-serif;

  font-size:
    clamp(
      28px,
      3vw,
      55px
    );

  font-weight: 200;

  line-height: 1;

  letter-spacing: -.04em;
}


.portfolio__project-meta{
  display: flex;

  align-items: center;

  gap: 25px;
}


.portfolio__year{
  font-family: 'Poppins', sans-serif;

  font-size: 11px;
  font-weight: 300;

  letter-spacing: .12em;
}


.portfolio__arrow{
  font-family: 'Poppins', sans-serif;

  font-size: 30px;

  line-height: 1;

  transform:
    translate(
      -7px,
      7px
    );

  transition:
    transform 450ms
    cubic-bezier(.22,.61,.36,1);
}


.portfolio__showcase:hover
.portfolio__arrow{
  transform:
    translate(
      0,
      0
    );
}


/* =========================================================
   SELECTOR
========================================================= */

.portfolio__selector{
  width: 100%;

  margin-top: 48px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  column-gap: 30px;

  border-top:
    1px solid
    rgba(255,29,29,.22);
}


.portfolio__selector-item{
  position: relative;

  appearance: none;

  border: 0;
  border-bottom:
    1px solid
    rgba(255,29,29,.22);

  background: transparent;

  padding:
    22px
    0
    21px;

  text-align: left;

  color: var(--accent);

  font-family: 'Poppins', sans-serif;

  font-size: 11px;
  font-weight: 300;

  letter-spacing: .12em;

  cursor: pointer;

  opacity: .32;

  transition:
    opacity 350ms ease,
    padding-left 450ms cubic-bezier(.22,.61,.36,1);
}


.portfolio__selector-item::before{
  content: "";

  position: absolute;

  left: 0;
  top: -1px;

  width: 0;
  height: 2px;

  background: var(--accent);

  transition:
    width 650ms
    cubic-bezier(.22,.61,.36,1);
}


.portfolio__selector-item:hover{
  opacity: .75;
}


.portfolio__selector-item.is-active{
  opacity: 1;

  padding-left: 10px;
}


.portfolio__selector-item.is-active::before{
  width: 100%;
}


/* =========================================================
   VIEW CURSOR
========================================================= */

.portfolio__view-cursor{
  position: fixed;

  left: 0;
  top: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 82px;
  height: 82px;

  border-radius: 50%;

  background: var(--accent);

  color: var(--bg);

  font-family: 'Poppins', sans-serif;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: .08em;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(.55);

  transition:
    opacity 250ms ease,
    transform 450ms cubic-bezier(.22,.61,.36,1);
}


.portfolio__view-cursor.is-visible{
  opacity: 1;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);
}


/* schovame povodny X kurzor */

#cursor-x.is-hidden{
  opacity: 0 !important;
}

/* =========================================================
   PORTFOLIO - MOBILE
========================================================= */

@media (max-width: 800px){

  .portfolio{
    padding:
      90px
      6vw
      90px;
  }


  /* =========================
     HEADER
  ========================= */

  .portfolio__header{
    display: grid;

    grid-template-columns: 1fr;

    gap: 28px;

    margin-bottom: 45px;
  }


  .portfolio__label{
    margin-bottom: 18px;

    font-size: 11px;
  }


  .portfolio__heading h2{
    font-size:
      clamp(
        52px,
        15vw,
        78px
      );

    line-height: .9;

    letter-spacing: -.055em;
  }


  .portfolio__description{
    justify-self: start;

    width: 100%;
    max-width: 430px;

    margin: 0;

    font-size:
      clamp(
        15px,
        4vw,
        17px
      );

    font-weight: 300;

    line-height: 1.65;

    letter-spacing: .01em;
  }


  /* =========================
     HLAVNY OBRAZOK
  ========================= */

  .portfolio__showcase{
    width: 100%;

    margin-left: 0;
  }


  .portfolio__media{
    width: 100%;

    aspect-ratio: 4 / 3;
  }


  .portfolio__image{
    inset: -8px;

    width: calc(100% + 16px);
    height: calc(100% + 16px);
  }


  /* =========================
     INFO NA OBRAZKU
  ========================= */

  .portfolio__project-info{
    left: 18px;
    right: 18px;
    bottom: 17px;

    align-items: flex-end;
  }


  .portfolio__active-type{
    margin-bottom: 6px;

    font-size: 9px;

    letter-spacing: .12em;
  }


  .portfolio__active-title{
    max-width: 75%;

    font-size:
      clamp(
        24px,
        7vw,
        38px
      );

    line-height: 1;

    letter-spacing: -.04em;
  }


  .portfolio__project-meta{
    gap: 10px;
  }


  .portfolio__year{
    display: none;
  }


  .portfolio__arrow{
    font-size: 24px;

    transform: none;
  }


  /* =========================
     VYBER PROJEKTOV
  ========================= */

  .portfolio__selector{
    margin-top: 25px;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 18px;

    border-top:
      1px solid
      rgba(255,29,29,.22);
  }


  .portfolio__selector-item{
    min-height: 58px;

    padding:
      17px
      0
      15px;

    font-size: 9px;
    font-weight: 300;

    line-height: 1.4;

    letter-spacing: .09em;

    opacity: .4;
  }


  .portfolio__selector-item.is-active{
    opacity: 1;

    padding-left: 7px;
  }


  .portfolio__selector-item.is-active::before{
    width: 100%;
  }


  /* =========================
     KURZOR
  ========================= */

  .portfolio__view-cursor{
    display: none !important;
  }

}

/* =========================================================
   FLOATING NAVIGATION
========================================================= */

.floating-nav{
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;

  padding: 13px 28px;

  z-index: 9000;

  background: rgba(223, 227, 210, .84);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(255,29,29,.10);

  opacity: 0;

  transform: translateY(-110%);

  pointer-events: none;

  transition:
    transform 600ms cubic-bezier(.22,.61,.36,1),
    opacity 450ms ease;
}


/* JS prida tuto triedu po scrollnuti */

.floating-nav.is-ready{
  pointer-events: auto;
}


.floating-nav.is-visible{
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   VNUTRO MENU
========================================================= */

.floating-nav__inner{
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  column-gap: 35px;
}


/* =========================================================
   LAVA / PRAVA STRANA
========================================================= */

.floating-nav__left,
.floating-nav__right{
  display: flex;

  align-items: center;

  gap: 38px;
}


.floating-nav__left{
  justify-content: flex-end;
}


.floating-nav__right{
  justify-content: flex-start;
}


/* =========================================================
   ODKAZY
========================================================= */

.floating-nav a{
  text-decoration: none;

  font-family: 'Poppins', sans-serif;

  font-size: 12px;
  font-weight: 300;

  letter-spacing: .12em;

  color: var(--accent);

  text-transform: uppercase;

  opacity: .38;

  transition:
    opacity 300ms ease,
    transform 300ms ease;
}


.floating-nav a:hover{
  opacity: 1;
}


.floating-nav a.is-active{
  opacity: 1;
}


/* bod pri aktivnej sekcii */

.floating-nav a.is-active:not(.floating-nav__brand)::before{
  content: "";

  display: inline-block;

  width: 5px;
  height: 5px;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--accent);

  vertical-align: middle;

  transform: translateY(-1px);
}


/* =========================================================
   LOGO
========================================================= */

.floating-nav__brand{
  justify-self: center;

  opacity: 1 !important;
}


.floating-nav__brand img{
  display: block;

  width: 67px;
  max-width: 67px;

  height: auto;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px){

  .floating-nav{
    display: none;
  }

}

/* =========================================================
   PARTNERS - MAGNETIC SPOTLIGHT
   LARGE LOGOS / NO FRAMES
========================================================= */

.partners{
  position: relative;

  width: 100%;

  padding:
    140px
    6vw
    135px;

  background: var(--bg);
  color: var(--accent);

  overflow: hidden;

  --spot-x: 50%;
  --spot-y: 50%;

  --word-x: 0px;
  --word-y: 0px;
}


/* =========================================================
   SPOTLIGHT
========================================================= */

.partners::before{
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle 400px at var(--spot-x) var(--spot-y),

      rgba(255,29,29,.09) 0%,

      rgba(255,29,29,.04) 32%,

      rgba(255,29,29,.014) 52%,

      rgba(255,29,29,0) 74%
    );

  opacity: 0;

  transition:
    opacity 500ms ease;
}


.partners.is-hovering::before{
  opacity: 1;
}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.partners__background-word{
  position: absolute;

  left: 50%;
  top: 70%;

  z-index: 0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      100px,
      13vw,
      240px
    );

  font-weight: 100;

  line-height: 1;

  letter-spacing: -.07em;

  white-space: nowrap;

  color: var(--accent);

  opacity: .012;

  pointer-events: none;

  user-select: none;

  transform:
    translate(-50%, -50%)
    translate3d(
      var(--word-x),
      var(--word-y),
      0
    );

  will-change: transform;
}


/* =========================================================
   INNER
========================================================= */

.partners__inner{
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 1400px;

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.partners__header{
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  align-items: end;

  margin-bottom: 55px;
}


.partners__label{
  display: block;

  margin-bottom: 25px;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 13px;
  font-weight: 300;

  letter-spacing: .18em;
}


.partners__heading h2{
  margin: 0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      65px,
      7vw,
      120px
    );

  font-weight: 200;

  line-height: .85;

  letter-spacing: -.06em;
}


.partners__description{
  justify-self: end;

  width: 100%;
  max-width: 520px;

  margin: 0 0 5px;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      15px,
      1.15vw,
      19px
    );

  font-weight: 300;

  line-height: 1.7;

  letter-spacing: .01em;
}


/* =========================================================
   GRID
========================================================= */

.partners__grid{
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  column-gap:
    clamp(
      10px,
      1.4vw,
      25px
    );

  row-gap:
    clamp(
      5px,
      .7vw,
      14px
    );

  border: none;
}


/* =========================================================
   LOGO CELL
========================================================= */

.partners__logo{
  position: relative;

  height:
    clamp(
      180px,
      14vw,
      220px
    );

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    20px
    18px;

  border: none;

  background: transparent;

  box-shadow: none;

  opacity: 0;

  filter:
    blur(10px);

  transform:
    translateY(28px)
    scale(.92);

  transition:
    opacity 800ms ease,
    filter 850ms ease,
    transform 900ms cubic-bezier(.22,.61,.36,1);

  --logo-opacity: .36;

  --logo-scale: .96;

  --logo-x: 0px;
  --logo-y: 0px;

  --logo-gray: 1;
}


/* =========================================================
   REVEAL
========================================================= */

.partners.is-visible
.partners__logo{
  opacity: 1;

  filter:
    blur(0);

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   NEAR / FOCUS
========================================================= */

.partners__logo.is-near{
  background: transparent;

  border: none;

  box-shadow: none;
}


.partners__logo.is-focus{
  z-index: 3;

  background: transparent;

  border: none;

  box-shadow: none;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.partners__logo img{
  display: block;

  width: 100%;
  height: auto;

  max-width: 320px;
  max-height: 130px;

  object-fit: contain;

  opacity:
    var(--logo-opacity);

  filter:
    grayscale(
      var(--logo-gray)
    );

  transform:
    translate3d(
      var(--logo-x),
      var(--logo-y),
      0
    )
    scale(
      var(--logo-scale)
    );

  transition:
    opacity 150ms linear,
    filter 180ms linear,
    transform 280ms cubic-bezier(.22,.61,.36,1);

  will-change:
    transform,
    opacity,
    filter;

  pointer-events: none;
}


/* =========================================================
   INFO UNDER LOGOS
========================================================= */

.partners__info{
  min-height: 55px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-top: 8px;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 10px;
  font-weight: 300;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.partners__info-name{
  opacity: 1;

  transition:
    opacity 250ms ease,
    transform 350ms cubic-bezier(.22,.61,.36,1);
}


.partners__info-detail{
  opacity: .45;

  transition:
    opacity 250ms ease,
    transform 350ms cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px){

  .partners{
    padding:
      90px
      6vw
      100px;
  }


  .partners::before{
    display: none;
  }


  .partners__background-word{
    top: 68%;

    font-size: 30vw;

    opacity: .010;
  }


  .partners__header{
    grid-template-columns:
      1fr;

    gap: 28px;

    margin-bottom: 45px;
  }


  .partners__label{
    margin-bottom: 18px;

    font-size: 11px;
  }


  .partners__heading h2{
    font-size:
      clamp(
        52px,
        15vw,
        78px
      );

    line-height: .9;
  }


  .partners__description{
    justify-self: start;

    width: 100%;
    max-width: 430px;

    margin: 0;

    font-size:
      clamp(
        15px,
        4vw,
        17px
      );

    line-height: 1.65;
  }


  .partners__grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    column-gap: 8px;

    row-gap: 6px;
  }


  .partners__logo{
    height: 155px;

    padding:
      18px
      14px;

    --logo-opacity: .60;

    --logo-scale: 1;

    --logo-gray: .65;
  }


  .partners__logo img{
    max-width: 190px;
    max-height: 90px;
  }


  .partners__info{
    min-height: 50px;

    margin-top: 8px;

    font-size: 8px;

    gap: 20px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px){

  .partners__grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .partners__logo{
    height: 135px;

    padding:
      16px
      10px;
  }


  .partners__logo img{
    max-width: 160px;
    max-height: 78px;
  }


  .partners__background-word{
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

  .partners__logo{
    opacity: 1;

    filter: none;

    transform: none;

    transition: none;
  }


  .partners__logo img{
    transition: none;
  }


  .partners__background-word{
    transform:
      translate(-50%, -50%);
  }

}

.contact__statement{
  cursor: default;
}


.contact__scramble{
  display: block;

  white-space: nowrap;

  will-change:
    contents;
}

/* =========================================================
   CONTACT
========================================================= */

.contact{
  position: relative;

  width: 100%;

  min-height: 100vh;

  padding:
    135px
    6vw
    35px;

  background:
    var(--bg);

  color:
    var(--accent);

  overflow: hidden;
}


.contact__inner{
  position: relative;

  width: 100%;
  max-width: 1400px;

  min-height:
    calc(100vh - 170px);

  margin: 0 auto;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   TOP
========================================================= */

.contact__top{
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  align-items: end;

  margin-bottom:
    clamp(
      70px,
      8vw,
      125px
    );
}


.contact__label{
  display: block;

  margin-bottom: 25px;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 13px;
  font-weight: 300;

  letter-spacing: .18em;
}


.contact__heading h2{
  margin: 0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      65px,
      7vw,
      120px
    );

  font-weight: 200;

  line-height: .85;

  letter-spacing: -.06em;
}


/* =========================================================
   DETAILS
========================================================= */

.contact__details{
  justify-self: end;

  width: 100%;
  max-width: 520px;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  padding-bottom: 5px;
}


.contact__location{
  margin-bottom: 16px;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 10px;
  font-weight: 300;

  letter-spacing: .16em;

  opacity: .45;
}


.contact__detail-link{
  position: relative;

  display: inline-block;

  color:
    var(--accent);

  text-decoration: none;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      15px,
      1.15vw,
      19px
    );

  font-weight: 300;

  line-height: 1.6;
}


.contact__detail-link::after{
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background:
    var(--accent);

  transform:
    scaleX(0);

  transform-origin:
    right center;

  transition:
    transform 500ms
    cubic-bezier(.22,.61,.36,1);
}


.contact__detail-link:hover::after{
  transform:
    scaleX(1);

  transform-origin:
    left center;
}


/* =========================================================
   MAIN STATEMENT
========================================================= */

.contact__statement{
  position: relative;

  margin-bottom:
    clamp(
      80px,
      9vw,
      145px
    );
}


.contact__statement p{
  margin: 0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      62px,
      8vw,
      145px
    );

  font-weight: 200;

  line-height: .84;

  letter-spacing: -.065em;
}


.contact__statement p:nth-child(2){
  padding-left:
    7vw;
}


.contact__statement p:nth-child(3){
  padding-left:
    14vw;
}


/* =========================================================
   CTA
========================================================= */

.contact__cta{
  position: relative;

  width: calc(100% + 12vw);

  margin-left: -6vw;

  min-height:
    clamp(
      180px,
      19vw,
      310px
    );

  padding:
    0
    6vw;

  display: flex;

  align-items: center;
  justify-content: space-between;

  overflow: hidden;

  border-top:
    1px solid
    rgba(255,29,29,.25);

  border-bottom:
    1px solid
    rgba(255,29,29,.25);

  color:
    var(--accent);

  text-decoration: none;

  cursor: none;

  --contact-x: 50%;
  --contact-y: 50%;
}


/* cerveny reveal */

.contact__cta::before{
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background:
    var(--accent);

  clip-path:
    circle(
      0%
      at
      var(--contact-x)
      var(--contact-y)
    );

  transition:
    clip-path
    850ms
    cubic-bezier(.16,1,.3,1);

  pointer-events: none;
}


.contact__cta.is-hovering::before{
  clip-path:
    circle(
      150%
      at
      var(--contact-x)
      var(--contact-y)
    );
}


/* CTA TEXT */

.contact__cta-text,
.contact__cta-arrow{
  position: relative;

  z-index: 2;

  color:
    var(--accent);

  transition:
    color 500ms ease,
    transform 700ms
    cubic-bezier(.16,1,.3,1);
}


.contact__cta-text{
  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      60px,
      8.5vw,
      150px
    );

  font-weight: 200;

  line-height: .85;

  letter-spacing: -.065em;
}


.contact__cta-arrow{
  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      55px,
      7vw,
      115px
    );

  font-weight: 100;
}


/* po otvoreni cervenej */

.contact__cta.is-hovering
.contact__cta-text,
.contact__cta.is-hovering
.contact__cta-arrow{
  color:
    var(--bg);
}


.contact__cta.is-hovering
.contact__cta-arrow{
  transform:
    translate(
      8px,
      -8px
    );
}


/* =========================================================
   CUSTOM HELLO CURSOR
========================================================= */

.contact__cursor{
  position: fixed;

  left: 0;
  top: 0;

  z-index: 9999;

  width: 92px;
  height: 92px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 1px;

  border-radius: 50%;

  background:
    var(--bg);

  color:
    var(--accent);

  font-family:
    'Poppins',
    sans-serif;

  font-size: 9px;
  font-weight: 300;

  letter-spacing: .12em;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    scale(.5);

  transition:
    opacity 250ms ease,
    transform 450ms
    cubic-bezier(.16,1,.3,1);

  will-change:
    left,
    top,
    transform;
}


.contact__cursor span:last-child{
  margin-top: 2px;

  font-size: 16px;

  letter-spacing: 0;
}


.contact__cursor.is-visible{
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}


/* =========================================================
   FOOTER
========================================================= */

.contact__footer{
  width: 100%;

  min-height: 85px;

  margin-top: auto;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: end;

  gap: 30px;

  padding-top: 30px;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 9px;
  font-weight: 300;

  letter-spacing: .12em;

  color:
    var(--accent);
}


.contact__footer-brand{
  justify-self: start;
}


.contact__footer-services{
  justify-self: center;

  opacity: .45;
}


.contact__footer-year{
  justify-self: end;
}


/* =========================================================
   REVEAL ON SCROLL
========================================================= */

.contact__heading,
.contact__details,
.contact__statement,
.contact__cta{
  opacity: 0;

  filter:
    blur(7px);

  transform:
    translateY(30px);

  transition:
    opacity 900ms ease,
    filter 900ms ease,
    transform 1100ms
    cubic-bezier(.22,.61,.36,1);
}


.contact.is-visible
.contact__heading{
  opacity: 1;

  filter: blur(0);

  transform:
    translateY(0);

  transition-delay:
    0ms;
}


.contact.is-visible
.contact__details{
  opacity: 1;

  filter: blur(0);

  transform:
    translateY(0);

  transition-delay:
    100ms;
}


.contact.is-visible
.contact__statement{
  opacity: 1;

  filter: blur(0);

  transform:
    translateY(0);

  transition-delay:
    180ms;
}


.contact.is-visible
.contact__cta{
  opacity: 1;

  filter: blur(0);

  transform:
    translateY(0);

  transition-delay:
    270ms;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px){

  .contact{
    min-height: auto;

    padding:
      90px
      6vw
      25px;
  }


  .contact__inner{
    min-height: auto;
  }


  .contact__top{
    grid-template-columns:
      1fr;

    gap: 45px;

    margin-bottom: 75px;
  }


  .contact__label{
    margin-bottom: 18px;

    font-size: 11px;
  }


  .contact__heading h2{
    font-size:
      clamp(
        52px,
        15vw,
        78px
      );

    line-height: .9;
  }


  .contact__details{
    justify-self: start;

    max-width: none;
  }


  .contact__detail-link{
    font-size:
      clamp(
        16px,
        4.2vw,
        19px
      );
  }


  .contact__statement{
    margin-bottom: 75px;
  }


  .contact__statement p{
    font-size:
      clamp(
        48px,
        13vw,
        82px
      );

    line-height: .9;
  }


  .contact__statement p:nth-child(2),
  .contact__statement p:nth-child(3){
    padding-left: 0;
  }


  .contact__cta{
    min-height: 175px;

    cursor: pointer;
  }


  .contact__cta-text{
    font-size:
      clamp(
        45px,
        12vw,
        72px
      );
  }


  .contact__cta-arrow{
    font-size: 45px;
  }


  .contact__cursor{
    display: none;
  }


  .contact__footer{
    min-height: auto;

    margin-top: 45px;

    grid-template-columns:
      1fr
      auto;

    padding-bottom: 5px;

    row-gap: 15px;

    font-size: 8px;
  }


  .contact__footer-services{
    grid-column:
      1 / -1;

    grid-row: 1;

    justify-self: start;
  }


  .contact__footer-brand{
    grid-column: 1;

    grid-row: 2;
  }


  .contact__footer-year{
    grid-column: 2;

    grid-row: 2;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

  .contact__heading,
  .contact__details,
  .contact__statement,
  .contact__cta{
    opacity: 1;

    filter: none;

    transform: none;

    transition: none;
  }


  .contact__cta::before{
    transition: none;
  }


  .contact__cursor{
    display: none;
  }

}

.contact__statement{
  cursor: default;
}


.contact__scramble{
  display: block;

  white-space: nowrap;

  will-change:
    contents;
}


/* =========================================================
   MOBILE OVERHAUL 2026-10
   ONLY MOBILE - DESKTOP STAYS UNCHANGED
========================================================= */

.nav__toggle,
.mobile-menu,
.hero__headline--mobile{
  display: none;
}

.partners__slider{
  position: relative;
  width: 100%;
}

@media (max-width: 800px){

  #cursor-x{
    display: none !important;
  }

  .topbar{
    position: sticky;
    top: 0;
    z-index: 9200;
    padding: 14px 18px 0;
    background: rgba(223,227,210,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .nav{
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .nav__left,
  .nav__right{
    display: none !important;
  }

  .brand{
    position: relative;
    z-index: 2;
    justify-self: auto;
    align-self: auto;
    transform: none;
  }

  .brand__logo{
    width: 116px;
    max-width: 116px;
  }

  .nav__toggle{
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 3;
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,29,29,.30);
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .nav__toggle-icon{
    display: block;
    font-size: 23px;
    font-weight: 200;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 650ms cubic-bezier(.16,1,.3,1);
  }

  body.menu-open .nav__toggle-icon{
    transform: rotate(180deg);
  }

  .mobile-menu{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    width: 100%;
    display: block;
    padding: 112px 6vw 30px;
    background: rgba(223,227,210,.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,29,29,.14);
    opacity: 0;
    transform: translate3d(0,-105%,0);
    pointer-events: none;
    transition:
      transform 780ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease;
    will-change: transform, opacity;
  }

  body.menu-open .mobile-menu{
    opacity: 1;
    transform: translate3d(0,0,0);
    pointer-events: auto;
  }

  body.menu-open{
    overflow: hidden;
  }

  .mobile-menu__panel{
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,29,29,.18);
  }

  .mobile-menu__panel a{
    min-height: 70px;
    display: grid;
    grid-template-columns: 36px 1fr 32px;
    align-items: center;
    border-bottom: 1px solid rgba(255,29,29,.18);
    color: var(--accent);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transform: translateY(-8px);
    opacity: 0;
    transition:
      opacity 450ms ease,
      transform 650ms cubic-bezier(.16,1,.3,1);
  }

  body.menu-open .mobile-menu__panel a{
    opacity: 1;
    transform: translateY(0);
  }

  body.menu-open .mobile-menu__panel a:nth-child(1){ transition-delay: 100ms; }
  body.menu-open .mobile-menu__panel a:nth-child(2){ transition-delay: 145ms; }
  body.menu-open .mobile-menu__panel a:nth-child(3){ transition-delay: 190ms; }
  body.menu-open .mobile-menu__panel a:nth-child(4){ transition-delay: 235ms; }
  body.menu-open .mobile-menu__panel a:nth-child(5){ transition-delay: 280ms; }

  .mobile-menu__panel span{
    font-size: 9px;
    font-weight: 300;
    letter-spacing: .12em;
    opacity: .45;
  }

  .mobile-menu__panel strong{
    font-size: clamp(27px,8vw,38px);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -.035em;
  }

  .mobile-menu__panel i{
    justify-self: end;
    font-style: normal;
    font-size: 20px;
    font-weight: 200;
    transition: transform 400ms ease;
  }

  .mobile-menu__panel a:active i{
    transform: translate(4px,4px);
  }

  .floating-nav{
    display: none !important;
  }

  /* HERO */

  .hero{
    padding: 12px 0 0;
  }

  .hero__media{
    height: clamp(430px,62svh,560px);
    min-height: 430px;
    cursor: pointer;
  }

  .hero__video{
    object-position: center center;
  }

  .hero__headline--desktop{
    display: none !important;
  }

  .hero__headline--mobile{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    transform: none;
    text-align: center;
    pointer-events: none;
  }

  .hero__mobile-line{
    display: block;
    width: auto !important;
    color: var(--accent);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(55px,18vw,84px);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.055em;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: contents;
  }

  .hero__below{
    position: relative;
    height: auto;
    margin-top: 17px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
  }

  .hero__est,
  .scroll-indicator{
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    text-align: center;
  }

  .hero__est{
    order: 1;
    font-size: 11px;
    letter-spacing: .18em;
  }

  .scroll-indicator{
    order: 2;
    font-size: 11px;
    letter-spacing: .13em;
  }

  .video-icon{
    display: none;
  }

  /* SERVICES */

  .services__sticky{
    padding: 95px 7vw 130px;
  }

  .services__intro{
    margin-bottom: 60px;
  }

  .services__list{
    overflow: visible;
  }

  .services__item{
    min-height: 108px;
    opacity: .28;
    transform: none !important;
    transition:
      opacity 500ms ease,
      transform 700ms cubic-bezier(.16,1,.3,1);
  }

  .services__item-title{
    display: inline-block;
    transform: scale(.86);
    transform-origin: left center;
    transition:
      transform 650ms cubic-bezier(.16,1,.3,1),
      letter-spacing 650ms cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }

  .services__item-number{
    opacity: .45;
    transition: opacity 450ms ease;
  }

  .services__item-arrow{
    transition:
      opacity 450ms ease,
      transform 550ms cubic-bezier(.16,1,.3,1);
  }

  .services__item.is-active{
    opacity: 1;
    transform: none !important;
  }

  .services__item.is-active .services__item-title{
    transform: scale(1.08);
    letter-spacing: -.065em;
  }

  .services__item.is-active .services__item-number{
    opacity: 1;
  }

  /* PARTNERS */

  .partners{
    padding: 90px 6vw 90px;
  }

  .partners__header{
    margin-bottom: 34px;
  }

  .partners__background-word{
    display: none !important;
  }

  .partners__slider{
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
  }

  .partners__grid{
    width: 100%;
    display: flex !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    transform: translate3d(0,0,0);
    transition: transform 760ms cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }

  .partners__logo{
    flex: 0 0 100%;
    width: 100%;
    height: clamp(190px,52vw,235px);
    padding: 24px 8vw;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .partners__logo img{
    width: auto;
    max-width: min(76vw,330px);
    max-height: 145px;
    opacity: .78 !important;
    filter: grayscale(1) !important;
    transform: none !important;
    transition: opacity 400ms ease !important;
  }

  .partners__info{
    display: none;
  }

  /* CONTACT */

  .contact__statement{
    margin-bottom: 62px;
    cursor: pointer;
  }

  .contact__statement p{
    width: auto !important;
    font-size: clamp(38px,10.6vw,56px);
    line-height: .92;
    white-space: nowrap;
  }

  .contact__cta{
    min-height: 175px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .contact__cta::before{
    transition: clip-path 700ms cubic-bezier(.16,1,.3,1);
  }

  .contact__cta.is-hovering::before{
    clip-path: circle(170% at var(--contact-x) var(--contact-y));
  }

  .contact__cta.is-hovering .contact__cta-text,
  .contact__cta.is-hovering .contact__cta-arrow{
    color: var(--bg);
  }
}

@media (max-width: 390px){

  .brand__logo{
    width: 104px;
  }

  .nav{
    min-height: 86px;
  }

  .nav__toggle{
    width: 42px;
    height: 42px;
  }

  .hero{
    padding-top: 8px;
  }

  .hero__media{
    height: 56svh;
    min-height: 400px;
  }

  .hero__mobile-line{
    font-size: clamp(50px,17.4vw,68px);
  }

  .services__item-title{
    font-size: clamp(29px,8.6vw,46px);
  }

  .contact__statement p{
    font-size: clamp(35px,10vw,45px);
  }
}

/* =========================================================
   MOBILE - PRELOADER
   CENTER BLOCK / LEFT TEXT / BOLDER FONT
========================================================= */

@media (max-width: 800px){

  .loader{
    align-items: center;
    justify-content: center;
    padding: 0 7vw;
  }

  .loader__text{
    width: auto;
    padding-left: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    text-align: left;

    font-family: 'Poppins', sans-serif;
    font-weight: 400;
  }

  .loader__line{
    width: auto;

    margin: 0;

    text-align: left;

    font-family: 'Poppins', sans-serif;
    font-weight: 400;
  }

}

@media (max-width: 800px){

  .nav__toggle{
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    width: 42px;
    height: 42px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--accent);

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
  }

  .nav__toggle-arrow{
    display: block;

    font-family: 'Poppins', Arial, sans-serif;
    font-size: 30px;
    font-weight: 200;
    line-height: 1;

    color: var(--accent);

    transform: rotate(0deg);

    transition:
      transform 600ms cubic-bezier(.16,1,.3,1);
  }

  body.menu-open .nav__toggle-arrow{
    transform: rotate(90deg);
  }

}

/* =========================================================
   TEXT ARROWS - NEVER EMOJI
========================================================= */

.services__item-arrow,
.portfolio__arrow,
.contact__cta-arrow,
.nav__toggle-arrow,
.portfolio__view-cursor{
  font-family: 'Poppins', Arial, sans-serif;
  font-style: normal;
  color: var(--accent);
}

@media (max-width: 800px){

  .nav__toggle-arrow,
  .services__item-arrow,
  .portfolio__arrow,
  .contact__cta-arrow{
    font-family: 'Poppins', Arial, sans-serif;
    font-style: normal;

    display: inline-block;

    font-size: 24px;

    transform: scale(.78);
    transform-origin: center;

    color: var(--accent);
  }

  body.menu-open .nav__toggle-arrow{
    transform: rotate(90deg) scale(.78);
  }

}

/* =========================================================
   MOBILE HERO HEADER OVERLAY
   2026-10-12
   - video starts from the very top of the screen
   - mobile header has no visible strip/background
   - logo stays centered over the video
   - menu arrow sits in a translucent page-color circle
   - desktop stays unchanged
========================================================= */

@media (max-width: 800px){

  .topbar{
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9200;
    width: 100%;
    margin: 0;
    padding:
      calc(12px + env(safe-area-inset-top))
      18px
      0;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    pointer-events: none;
  }

  .nav{
    width: 100%;
    max-width: none;
    min-height: 88px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    pointer-events: none;
  }

  .brand{
    position: relative;
    z-index: 2;
    margin: 0;
    background: transparent !important;
    opacity: .90;
    pointer-events: auto;
  }

  .brand__logo{
    width: 116px;
    max-width: 116px;
    height: auto;
    background: transparent !important;
  }

  .nav__toggle{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,29,29,.20) !important;
    border-radius: 50% !important;
    background: rgba(223,227,210,.68) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 0 6px 22px rgba(0,0,0,.06);
    color: var(--accent);
    transform: translateY(-50%) !important;
    pointer-events: auto;
  }

  .nav__toggle-arrow{
    display: block;
    margin: 0;
    color: var(--accent);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 25px !important;
    font-style: normal;
    font-weight: 200;
    line-height: 1;
    transform: rotate(0deg) scale(.82) !important;
    transform-origin: center;
    transition:
      transform
      600ms
      cubic-bezier(.16,1,.3,1);
  }

  body.menu-open .nav__toggle-arrow{
    transform: rotate(90deg) scale(.82) !important;
  }

  .hero{
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero__stage{
    margin: 0;
    padding: 0;
  }

  .hero__media{
    margin: 0;
    width: 100%;
    height: clamp(500px, 68svh, 680px);
    min-height: 500px;
    cursor: pointer;
  }

  .hero__video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .mobile-menu{
    padding-top:
      calc(108px + env(safe-area-inset-top));
    background:
      rgba(223,227,210,.92) !important;
  }

}

@media (max-width: 390px){

  .topbar{
    padding:
      calc(10px + env(safe-area-inset-top))
      14px
      0;
  }

  .nav{
    min-height: 82px;
  }

  .brand__logo{
    width: 104px;
    max-width: 104px;
  }

  .nav__toggle{
    width: 44px !important;
    height: 44px !important;
  }

  .hero{
    padding: 0 !important;
  }

  .hero__media{
    height: 64svh;
    min-height: 460px;
  }

}

/* =========================================================
   DESKTOP HERO HEADER OVERLAY
   2026-10-12
   - desktop video starts from the very top
   - desktop header floats transparently over the video
   - desktop logo opacity = 60%
   - floating nav after scroll stays unchanged
========================================================= */

@media (min-width: 801px){

  .topbar{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: 9200;

    width: 100%;
    margin: 0;

    padding: 26px 24px 0;

    background: transparent;
    border: 0;
  }

  .nav{
    position: relative;

    max-width: 1200px;
    margin: 0 auto;

    background: transparent;
  }

  .brand{
    opacity: .60;
  }

  .hero{
    padding: 0;
    margin: 0;
  }

  .hero__stage{
    margin: 0;
    padding: 0;
  }

  .hero__media{
    width: 100%;

    height: clamp(560px, 72vh, 820px);

    margin: 0;

    overflow: hidden;
  }

  .hero__video{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;
  }

}

/* =========================================================
   COOKIE CONSENT
========================================================= */

.cookie-consent[hidden]{
  display: none !important;
}

.cookie-consent{
  position: fixed;

  left: 24px;
  right: 24px;
  bottom: 24px;

  z-index: 99000;

  max-width: 1180px;

  margin: 0 auto;

  font-family: 'Poppins', sans-serif;

  color: var(--accent);

  opacity: 0;

  transform:
    translate3d(0, 25px, 0);

  transition:
    opacity 400ms ease,
    transform 650ms cubic-bezier(.16,1,.3,1);
}


.cookie-consent.is-visible{
  opacity: 1;

  transform:
    translate3d(0,0,0);
}


.cookie-consent__inner{
  width: 100%;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: end;

  gap: 50px;

  padding:
    24px
    26px;

  background:
    rgba(223,227,210,.96);

  border:
    1px solid
    rgba(255,29,29,.28);

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.08);
}


.cookie-consent__copy{
  max-width: 720px;
}


.cookie-consent__label{
  display: block;

  margin-bottom: 8px;

  font-size: 10px;

  font-weight: 300;

  letter-spacing: .18em;
}


.cookie-consent h2{
  margin:
    0
    0
    10px;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      25px,
      2.2vw,
      38px
    );

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.035em;
}


.cookie-consent p{
  margin: 0;

  max-width: 650px;

  font-size: 13px;

  font-weight: 300;

  line-height: 1.55;
}


.cookie-consent__actions{
  display: flex;

  gap: 10px;
}


.cookie-consent__button{
  min-width: 135px;

  height: 48px;

  padding:
    0
    20px;

  border:
    1px solid
    var(--accent);

  border-radius: 0;

  font-family:
    'Poppins',
    sans-serif;

  font-size: 11px;

  font-weight: 400;

  letter-spacing: .12em;

  cursor: pointer;

  transition:
    background 250ms ease,
    color 250ms ease,
    transform 250ms ease;
}


.cookie-consent__button--reject{
  background:
    transparent;

  color:
    var(--accent);
}


.cookie-consent__button--accept{
  background:
    var(--accent);

  color:
    var(--bg);
}


@media (hover:hover){

  .cookie-consent__button--reject:hover{
    background:
      rgba(255,29,29,.08);
  }


  .cookie-consent__button--accept:hover{
    transform:
      translateY(-2px);
  }

}


/* MOBILE */

@media (max-width: 800px){

  .cookie-consent{
    left: 12px;
    right: 12px;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      );
  }


  .cookie-consent__inner{
    display: block;

    padding:
      22px
      20px
      18px;
  }


  .cookie-consent h2{
    font-size:
      clamp(
        27px,
        8vw,
        36px
      );
  }


  .cookie-consent p{
    font-size: 12px;
  }


  .cookie-consent__actions{
    width: 100%;

    margin-top: 20px;

    display: grid;

    grid-template-columns:
      1fr
      1fr;

    gap: 8px;
  }


  .cookie-consent__button{
    width: 100%;

    min-width: 0;

    height: 50px;
  }

}


@media (max-width: 390px){

  .cookie-consent__actions{
    grid-template-columns:
      1fr;
  }


  .cookie-consent__button--accept{
    grid-row: 1;
  }


  .cookie-consent__button--reject{
    grid-row: 2;
  }

}