@charset "utf-8";


/* =========================================================
   VARIABLES
   ========================================================= */

:root{
  --bg: #2b2b2b;
  --panel: #121212;
  --white: #f4f4f4;
  --yellow: #ffd400;
  --muted: rgba(244,244,244,.75);
  --border: rgba(255,212,0,.9);

  --sidebar-w: 260px;
  --gap: 14px;
  --radius: 18px;

  --showcase-pad: 18px;
}


/* =========================================================
   BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

body{
  margin:0;

  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;

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

  overflow-x:hidden;
}


a{
  color:var(--yellow);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}


.app{
  min-height:100vh;
  display:flex;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
  width:var(--sidebar-w);

  background:var(--panel);

  border-right:
    1px solid rgba(255,255,255,.06);

  position:sticky;

  top:0;

  height:100vh;

  padding:18px 16px;

  display:flex;
  flex-direction:column;

  gap:18px;
}


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

  gap:12px;

  padding:10px;

  border-radius:14px;

  background:
    rgba(255,255,255,.03);
}


.logo{
  width:42px;
  height:42px;

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      rgba(255,212,0,.9),
      rgba(255,212,0,.35)
    );

  box-shadow:
    0 10px 25px rgba(0,0,0,.35);

  flex:0 0 auto;
}


.brand h1{
  font-size:16px;

  margin:0;

  line-height:1.1;

  letter-spacing:.4px;
}


.brand p{
  margin:4px 0 0;

  font-size:12px;

  color:var(--muted);
}


/* Navigation */

.nav{
  display:flex;
  flex-direction:column;

  gap:6px;

  padding:0 4px;
}


.nav a{
  color:var(--white);

  padding:10px;

  border-radius:12px;

  display:flex;
  align-items:center;

  gap:10px;

  background:transparent;

  border:
    1px solid transparent;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}


.nav a:hover{
  background:
    rgba(255,255,255,.04);

  border-color:
    rgba(255,255,255,.06);

  text-decoration:none;
}


.nav a.active{
  color:var(--yellow);

  background:
    rgba(255,212,0,.08);

  border-color:
    rgba(255,212,0,.25);
}


.nav .dot{
  width:8px;
  height:8px;

  border-radius:99px;

  background:
    rgba(244,244,244,.35);

  flex:0 0 auto;
}


.nav a.active .dot{
  background:var(--yellow);
}


.sidebar-footer{
  margin-top:auto;

  font-size:12px;

  color:
    rgba(244,244,244,.55);

  padding:10px;

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


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

main{
  flex:1;

  padding:18px;

  min-width:0;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
  display:none;

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

  gap:10px;

  margin-bottom:14px;
}


.burger{
  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(0,0,0,.25);

  color:var(--white);

  border-radius:12px;

  padding:10px 12px;

  cursor:pointer;

  display:inline-flex;
  align-items:center;

  gap:10px;
}


.burger span{
  width:18px;
  height:2px;

  background:var(--white);

  display:block;

  position:relative;
}


.burger span::before,
.burger span::after{
  content:"";

  position:absolute;

  left:0;

  width:18px;
  height:2px;

  background:var(--white);
}


.burger span::before{
  top:-6px;
}

.burger span::after{
  top:6px;
}


.page-title{
  margin:0;

  font-size:16px;

  color:
    rgba(244,244,244,.9);

  letter-spacing:.3px;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.overlay{
  display:none;

  position:fixed;

  inset:0;

  background:
    rgba(0,0,0,.55);

  z-index:40;
}


.overlay.show{
  display:block;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.carousel{
  display:flex;
  flex-direction:column;

  gap:12px;
}


.carousel-head{
  display:flex;

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

  gap:12px;
}


.carousel-title{
  margin:0;

  font-size:14px;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:
    rgba(244,244,244,.75);
}


.carousel-controls{
  display:none;

  gap:10px;
}


.cbtn{
  width:42px;
  height:42px;

  border-radius:999px;

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

  background:
    rgba(0,0,0,.18);

  color:var(--white);

  cursor:pointer;

  transition:
    transform .12s ease,
    background .2s ease,
    border-color .2s ease;
}


.cbtn:hover{
  transform:
    translateY(-1px);

  background:
    rgba(255,212,0,.10);

  border-color:
    rgba(255,212,0,.28);
}


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

.columns{
  display:grid;

  gap:var(--gap);

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

  align-items:stretch;
}


.columns.showcase{
  height:
    calc(
      100dvh -
      (var(--showcase-pad) * 2)
    );

  max-height:900px;
}


.col{
  position:relative;

  border-radius:
    var(--radius);

  overflow:hidden;

  background:
    rgba(0,0,0,.12);

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

  box-shadow:
    0 18px 45px rgba(0,0,0,.22);

  isolation:isolate;

  min-height:360px;
}


.columns.showcase .col{
  height:100%;
}


/* Background image */

.col::before{
  content:"";

  position:absolute;

  inset:0;

  background-image:
    var(--img);

  background-size:cover;

  background-position:center;

  transform:
    scale(1.02);

  transition:
    transform .6s ease,
    filter .6s ease;

  filter:
    saturate(1.05)
    contrast(1.05);

  z-index:0;
}


.col:hover::before{
  transform:
    scale(1.12);

  filter:
    saturate(1.15)
    contrast(1.12);
}


/* Overlay */

.col::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.44) 45%,
      rgba(0,0,0,.14) 100%
    );

  z-index:1;
}


.content{
  position:absolute;

  inset:0;

  z-index:2;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:
    18px 18px 16px;

  gap:10px;
}


.kicker{
  font-size:12px;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:
    rgba(244,244,244,.85);
}


.content h3{
  margin:0;

  font-size:
    clamp(18px,2.1vw,26px);

  line-height:1.15;
}


.content p{
  margin:0;

  color:
    rgba(244,244,244,.82);

  font-size:14px;

  line-height:1.45;

  max-width:42ch;
}


.actions{
  display:flex;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  margin-top:6px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;

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

  padding:10px 14px;

  border-radius:999px;

  background:transparent;

  color:var(--white);

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

  cursor:pointer;

  transition:
    transform .15s ease,
    background .2s ease,
    color .2s ease;

  font-weight:600;

  letter-spacing:.2px;
}


.btn:hover{
  background:
    rgba(255,212,0,.12);

  transform:
    translateY(-1px);

  text-decoration:none;
}


.link{
  color:var(--yellow);

  font-weight:600;

  display:inline-flex;

  align-items:center;

  gap:8px;
}


.link:hover{
  text-decoration:underline;
}


/* =========================================================
   CAROUSEL DOTS
   ========================================================= */

.dots{
  display:none;

  gap:8px;

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

  padding:4px 0 2px;
}


.dotbtn{
  width:9px;
  height:9px;

  border-radius:999px;

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

  background:
    rgba(255,255,255,.12);

  cursor:pointer;

  transition:
    transform .12s ease,
    background .2s ease,
    border-color .2s ease;
}


.dotbtn[aria-current="true"]{
  background:
    rgba(255,212,0,.85);

  border-color:
    rgba(255,212,0,.95);

  transform:
    scale(1.15);
}


.anchor{
  height:18px;
}


:focus-visible{
  outline:
    2px solid rgba(255,212,0,.9);

  outline-offset:2px;

  border-radius:12px;
}


/* =========================================================
   CLICKABLE CARDS
   ========================================================= */

.col.is-link{
  cursor:pointer;
}


.col.is-link:hover .content h3{
  text-decoration:underline;
}


.col.is-link:focus-visible{
  outline:
    2px solid rgba(255,212,0,.9);

  outline-offset:4px;
}


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

.contact{
  display:flex;

  flex-direction:column;

  gap:14px;
}


.contact-head{
  padding:
    10px 6px 2px;
}


.contact-title{
  margin:0;

  font-size:22px;

  letter-spacing:.3px;
}


.contact-sub{
  margin:
    8px 0 0;

  color:
    rgba(244,244,244,.78);

  line-height:1.5;

  max-width:70ch;
}


.contact-grid{
  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:14px;

  align-items:start;
}


/* Cards */

.contact-card,
.info-card{
  border-radius:
    var(--radius);

  overflow:hidden;

  background:
    rgba(0,0,0,.14);

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

  box-shadow:
    0 18px 45px rgba(0,0,0,.18);

  padding:16px;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.field-row{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;
}


.field{
  display:flex;

  flex-direction:column;

  gap:6px;

  margin-bottom:12px;
}


label{
  font-size:12px;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:
    rgba(244,244,244,.78);
}


input,
select,
textarea{
  width:100%;

  border-radius:14px;

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

  background:
    rgba(0,0,0,.22);

  color:var(--white);

  padding:12px;

  font-size:14px;

  outline:none;
}


textarea{
  resize:vertical;

  min-height:140px;
}


input:focus,
select:focus,
textarea:focus{
  border-color:
    rgba(255,212,0,.55);

  box-shadow:
    0 0 0 3px rgba(255,212,0,.12);
}


/* Honeypot */

.hp{
  position:absolute;

  left:-9999px;

  width:1px;
  height:1px;

  overflow:hidden;
}


/* Form actions */

.form-actions{
  display:flex;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  margin-top:6px;
}


.form-note{
  margin:0;

  color:
    rgba(244,244,244,.75);

  font-size:13px;
}


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

.info-card h3{
  margin:
    0 0 8px;

  font-size:18px;
}


.info-card p{
  margin:
    0 0 14px;

  color:
    rgba(244,244,244,.80);

  line-height:1.55;
}


.info-list{
  display:flex;

  flex-direction:column;

  gap:10px;

  margin:
    10px 0 14px;

  padding-top:10px;

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


.info-item{
  display:flex;

  justify-content:space-between;

  gap:10px;
}


.info-k{
  color:
    rgba(244,244,244,.65);

  font-size:12px;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.info-v{
  color:
    rgba(244,244,244,.90);

  text-align:right;
}


.info-cta{
  display:flex;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  margin-top:6px;
}


.info-badges{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:14px;

  padding-top:12px;

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


.badge{
  font-size:12px;

  padding:
    8px 10px;

  border-radius:999px;

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

  background:
    rgba(255,255,255,.04);

  color:
    rgba(244,244,244,.85);
}


/* =========================================================
   MAP
   ========================================================= */

.map-section{
  margin-top:14px;
}


.map-card{
  border-radius:
    var(--radius);

  overflow:hidden;

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

  background:
    rgba(0,0,0,.18);

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


.map-card iframe{
  width:100%;

  height:360px;

  border:0;

  display:block;
}


/* =========================================================
   GOOGLE MAPS CONSENT PLACEHOLDER
   ========================================================= */

.map-placeholder{
  width:100%;

  height:360px;

  display:flex;

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

  padding:30px;

  text-align:center;

  background:
    radial-gradient(
      circle at center,
      rgba(255,212,0,.06),
      transparent 55%
    ),
    rgba(0,0,0,.18);
}


.map-placeholder-content{
  max-width:480px;
}


.map-pin{
  width:54px;
  height:54px;

  margin:
    0 auto 16px;

  display:flex;

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

  border:
    1px solid rgba(255,212,0,.55);

  border-radius:50%;

  color:var(--yellow);

  font-size:28px;

  background:
    rgba(255,212,0,.06);
}


.map-placeholder h3{
  margin:
    0 0 8px;

  font-size:18px;
}


.map-placeholder p{
  margin:
    0 auto 18px;

  max-width:45ch;

  color:
    rgba(244,244,244,.68);

  font-size:13px;

  line-height:1.5;
}


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

.site-footer{
  margin-top:30px;

  padding:
    22px 16px 18px;

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

  text-align:center;

  font-size:11px;

  color:
    rgba(244,244,244,.45);
}


.site-footer p{
  margin:0;

  display:flex;

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

  flex-wrap:wrap;

  gap:
    7px 9px;

  line-height:1.6;
}


.site-footer a{
  color:
    rgba(244,244,244,.58);

  text-decoration:none;

  transition:
    color .2s ease,
    opacity .2s ease;
}


.site-footer a:hover{
  color:var(--yellow);
}


.footer-company{
  color:
    rgba(244,244,244,.55);
}


.footer-separator{
  color:var(--yellow);

  opacity:.45;
}


/* =========================================================
   COOKIE BANNER
   ========================================================= */

@keyframes slideInLeft{

  from{
    opacity:0;

    transform:
      translateX(-30px);
  }

  to{
    opacity:1;

    transform:
      translateX(0);
  }

}


.cookie-banner{
  position:fixed;

  bottom:20px;
  left:20px;

  max-width:320px;

  background-color:#2b2b2b;

  color:white;

  padding:16px;

  z-index:9999;

  display:none;

  flex-direction:column;

  align-items:flex-start;

  box-shadow:
    0 4px 12px rgba(0,0,0,.3);

  border-radius:8px;

  font-family:sans-serif;

  opacity:0;

  transform:
    translateX(-30px);

  transition:
    all .4s ease;
}


.cookie-banner.show{
  display:flex;

  opacity:1;

  transform:
    translateX(0);

  animation:
    slideInLeft .4s ease forwards;
}


.cookie-banner p{
  margin:
    0 0 10px;

  font-size:14px;

  line-height:1.4;
}


.cookie-banner a{
  color:#ffc107;

  text-decoration:underline;
}


.cookie-buttons{
  display:flex;

  gap:10px;
}


.cookie-banner button{
  padding:
    8px 14px;

  border:none;

  cursor:pointer;

  font-weight:bold;

  border-radius:4px;

  font-size:14px;
}


#accept-cookies{
  background-color:#28a745;

  color:white;
}


#decline-cookies{
  background-color:#dc3545;

  color:white;
}


/* =========================================================
   RESPONSIVE — 1400
   ========================================================= */

@media (max-width:1400px){

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

  .columns.showcase{
    max-height:none;
  }

}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE
   ========================================================= */

@media (max-width:980px){

  /* Sidebar */

  .sidebar{
    position:fixed;

    left:0;
    top:0;
    bottom:0;

    transform:
      translateX(-102%);

    transition:
      transform .25s ease;

    z-index:50;
  }


  .sidebar.open{
    transform:
      translateX(0);
  }


  main{
    padding:14px;
  }


  .topbar{
    display:flex;
  }


  /* Carousel */

  .carousel-controls{
    display:flex;
  }


  .dots{
    display:flex;
  }


  .columns{
    display:flex;

    gap:var(--gap);

    overflow-x:auto;

    padding-bottom:6px;

    scroll-snap-type:
      x mandatory;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:none;

    height:auto;

    max-height:none;
  }


  .columns::-webkit-scrollbar{
    display:none;
  }


  .col{
    min-width:88%;

    max-width:88%;

    flex:0 0 auto;

    scroll-snap-align:center;

    height:auto;

    min-height:72dvh;
  }


  /* Contact */

  .contact-grid{
    grid-template-columns:1fr;
  }


  .field-row{
    grid-template-columns:1fr;
  }


  /* Map */

  .map-card iframe,
  .map-placeholder{
    height:300px;
  }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width:560px){

  .col{
    min-width:92%;

    max-width:92%;

    min-height:76dvh;
  }


  .site-footer{
    margin-top:22px;

    padding:
      20px 12px 14px;
  }


  .site-footer p{
    gap:
      5px 7px;
  }


  .footer-separator{
    display:none;
  }


  .footer-company,
  .site-footer a{
    width:100%;
  }


  .cookie-banner{
    left:12px;
    right:12px;
    bottom:12px;

    max-width:none;
  }

}

/* =================================================
Logo
==================================================*/
.logo{
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(
    145deg,
    rgba(255,212,0,.9),
    rgba(255,212,0,.35)
  );
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  flex:0 0 auto;

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

.logo img{
  width:70%;
  height:70%;
  object-fit:contain;
  display:block;
}