/* ───────── RESET & BASICS ───────── */
*,
*:before,
*:after { box-sizing: border-box; }

html,body {
  margin: 0;
  background: #111;
  color: #f5f5f5;
  font-family: system-ui, sans-serif;
}

/* ───────── CAROUSEL FRAME ───────── */
.carousel {
  width: 100%;
  overflow: hidden;
  cursor: grab;
}

.carousel-track {
  display: flex;
  gap: 0;
  user-select: none;
  will-change: transform;
}

.carousel-track a { flex: 0 0 auto; }

.carousel-track img {
  display: block;
  height: 260px;                /* adjust once for both carousels            */
  width: auto;
  object-fit: cover;
  pointer-events: none;         /* so dragging isn't confused with click     */
  border: 2px solid #222;
  transition: transform .3s;
}
.carousel-track img:hover { transform: scale(1.05); }

/* ───────── CENTER BAND ───────── */
.center-band {
  position: relative;
  padding: 4rem 1rem;
  text-align: center;
}

.brand {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: .05em;
  font-weight: 700;
}

/* ───────── HAMBURGER ───────── */
.hamburger {
  position: absolute;
  top: 50%;
  right: 1rem;
  translate: 0 -50%;
  width: 2.3rem;
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 3px;
  background: #f5f5f5;
  border-radius: 2px;
  margin: 6px 0;
  transition: transform .4s, opacity .3s;
}
/* X icon animation */
.hamburger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* ───────── NAV OVERLAY ───────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  font-size: clamp(2rem,4vw,3.5rem);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s ease-in-out;
  z-index: 10;
}
.nav-overlay.open { transform: scaleX(1); }

.nav-overlay a {
  color: #f5f5f5;
  text-decoration: none;
  position: relative;
}
.nav-overlay a::after {         /* small underline on hover */
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:3px;
  background:#f5f5f5;
  transition:width .3s;
}
.nav-overlay a:hover::after { width:100%; }