/* Olens Productions - base styles */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 24px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.brand img { height: 52px; width: auto; }
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  color: #222; text-decoration: none; font-weight: 500; padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.site-nav a:hover, .site-nav a.active { color: #000; border-bottom-color: #FFC100; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: #222; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- layout: containers / sections ---------- */
.c { display: flex; flex-direction: column; gap: 20px; position: relative; padding: 10px; min-width: 0; flex-shrink: 1; }
.c.top { padding: 10px; width: 100%; }
.c.top > .in { display: flex; gap: 20px; width: 100%; margin: 0 auto; flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.c > *:not(.ov):not(.bgvid) { position: relative; z-index: 1; }
.c > .ov, .cw > .ov, .sec > .ov, .slide > .ov { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.slide > .ov { z-index: 1; }
.bgvid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bgvid iframe {
  position: absolute; top: 50%; left: 50%; border: 0; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: 177.78vh; height: 56.25vw;
}
.sec { position: relative; width: 100%; }
.srow { display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%; position: relative; z-index: 1; }
.col { min-width: 0; }
.cw { display: flex; flex-direction: column; gap: 10px; padding: 10px; height: 100%; position: relative; }
.cw > *:not(.ov) { position: relative; z-index: 1; }
.w { min-width: 0; max-width: 100%; }

/* ---------- widgets ---------- */
.hd { margin: 0; line-height: 1.2; font-family: 'Outfit', sans-serif; font-weight: 600; overflow-wrap: anywhere; }
h1.hd { font-size: 48px; } h2.hd { font-size: 40px; } h3.hd { font-size: 32px; }
h4.hd { font-size: 26px; } h5.hd { font-size: 22px; } h6.hd { font-size: 18px; }
.hd a { text-decoration: none; }
.te p { margin: 0 0 1em; }
.te p:last-child { margin-bottom: 0; }
.te a { color: #FFC100; }
.w-image img { max-width: 100%; }
.w-image { display: block; }
.vwrap { position: relative; }
.vwrap video, .vwrap iframe { width: 100%; display: block; border: 0; }
.vwrap iframe { aspect-ratio: 16/9; }
.vwrap video { background: #000; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border: 3px solid transparent; border-radius: 3px; cursor: pointer;
  text-decoration: none; font-weight: 500; line-height: 1.3; transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { transform: scale(.95); }

.dv { display: flex; align-items: center; gap: 14px; }
.dv-l { flex: 1; border-top: 2px solid; min-width: 20px; }
.dv-t { font-weight: 700; white-space: normal; }

.il { list-style: none; margin: 0; padding: 0; }
.il li { display: flex; align-items: center; gap: 8px; transition: color .2s; }
.il a { text-decoration: none; }

.soc { display: flex; flex-wrap: wrap; gap: 10px; }
.soc a {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; text-decoration: none; transition: transform .2s;
}
.soc a:hover { transform: scale(1.12); }
.w-map iframe { width: 100%; border: 0; display: block; }
.cp { margin: 0; }

/* slides (hero slider) */
.sl { position: relative; overflow: hidden; background: #000; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.slide.on { opacity: 1; visibility: visible; z-index: 1; }
.sbg { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; }
.sbg.kb { animation: kb 12s ease-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.12); } }
.sl-c {
  position: relative; z-index: 2; height: 100%; padding: 24px 60px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.sl-h { font-family: 'Outfit', sans-serif; font-size: 44px; font-weight: 700; line-height: 1.15; color: #fff; }
.sl-d { max-width: 760px; font-size: 18px; color: #fff; }
.sl-b { padding: 10px 26px; border: 2px solid #fff; color: #fff; text-decoration: none; font-weight: 500; transition: background .2s, color .2s; }
.sl-b:hover { background: #fff; color: #000; }
.sl-p, .sl-n, .cp-p, .cp-n {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; cursor: pointer;
}
.sl-p, .cp-p { left: 12px; } .sl-n, .cp-n { right: 12px; }
.sl-p:hover, .sl-n:hover, .cp-p:hover, .cp-n:hover { background: #FFC100; color: #000; }
.sl-dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.sl-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .5); cursor: pointer; }
.sl-dots button.on { background: #FFC100; }

/* carousels */
.car { position: relative; --per: 3; max-width: 100%; overflow: hidden; }
.w-carousel { width: 100%; }
.ctrack { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding: 6px 0; }
.ctrack::-webkit-scrollbar { display: none; }
.cslide { flex: 0 0 calc((100% - (var(--per) - 1) * 16px) / var(--per)); scroll-snap-align: center; transition: transform .35s, opacity .35s; }
.cslide img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.car.cover .cslide { transform: scale(.86); opacity: .7; }
.car.cover .cslide.mid { transform: scale(1); opacity: 1; }
.car.cover .cslide img { aspect-ratio: 3/4; object-fit: cover; }
.playable { position: relative; display: block; }
.playable i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 193, 0, .92); color: #000; display: flex; align-items: center; justify-content: center;
}

/* contact form */
.cf { display: flex; flex-direction: column; gap: 12px; }
.cf input, .cf textarea {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 3px;
  font: inherit; color: #222; background: #fff;
}
.cf input:focus, .cf textarea:focus { outline: 2px solid #FFC100; }
.cf .bad { border-color: #d63637; }
.cf button {
  padding: 13px; border: 0; border-radius: 3px; background: #FFC100; color: #000; font: inherit; font-weight: 700; cursor: pointer; transition: opacity .2s;
}
.cf button:hover { opacity: .85; }
.cf-msg { margin: 0; font-size: 14px; color: #FFC100; min-height: 1em; }

/* scroll animations (only when JS is running) */
.js [data-anim] { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.js [data-anim="fadeInUp"] { transform: translateY(30px); }
.js [data-anim="fadeInLeft"] { transform: translateX(-30px); }
.js [data-anim="fadeInRight"] { transform: translateX(30px); }
.js [data-anim].seen { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.site-footer { background: #000; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .site-nav { gap: 18px; }
  .sl-h { font-size: 36px; }
}
@media (max-width: 767px) {
  .site-header { padding: 6px 16px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: #fff; padding: 8px 16px 16px; box-shadow: 0 8px 12px rgba(0, 0, 0, .2);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid #eee; }
  .c.row, .in.row { flex-direction: column !important; }
  .row > .c { width: 100% !important; }
  .col { width: 100% !important; }
  .sl-h { font-size: 28px; }
  .sl-d { font-size: 15px; }
  .sl-c { padding: 24px 50px; }
  h1.hd { font-size: 34px; } h2.hd { font-size: 30px; } h3.hd { font-size: 26px; }
  .w-image img, .vwrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sbg.kb { animation: none; }
  .js [data-anim] { opacity: 1; transform: none; transition: none; }
}