/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #0A0A0A;
  color: #fff;
  font-family: 'Satoshi', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 9998;
  animation: grain 0.7s steps(2) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3%,-2%); }
  50%  { transform: translate(2%, 3%); }
  75%  { transform: translate(-1%, 4%); }
}

/* ── NAV ── */
#navbar {
  transition: background-color 0.55s cubic-bezier(0.16,1,0.3,1),
              border-color    0.55s cubic-bezier(0.16,1,0.3,1),
              padding-top     0.55s cubic-bezier(0.16,1,0.3,1),
              padding-bottom  0.55s cubic-bezier(0.16,1,0.3,1);
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background-color: rgba(10,10,10,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,0.05);
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo-img {
  filter: invert(1) brightness(0.85);
  transition: height 0.55s cubic-bezier(0.16,1,0.3,1);
}

.nav-link {
  position: relative;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: #C9B846;
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible { outline: 2px solid #C9B846; outline-offset: 4px; border-radius: 1px; }
.nav-link.active { color: #fff; }
.nav-link.active::after { width: 100%; }

.btn-gold {
  border: 1px solid #C9B846;
  color: #C9B846;
  padding: 9px 22px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0.16,1,0.3,1),
              color           0.3s cubic-bezier(0.16,1,0.3,1);
}
.btn-gold:hover { background: #C9B846; color: #0A0A0A; }
.btn-gold:focus-visible { outline: 2px solid #C9B846; outline-offset: 3px; }
.btn-gold:active { transform: scale(0.98); }

/* ── LABELS / HEADINGS ── */
.s-label {
  font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: #C9B846; font-weight: 500;
}
.s-heading {
  font-size: clamp(2.5rem, 5.5vw, 4.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02;
}
.gold-bar {
  width: 44px; height: 1px; background: #C9B846;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.gold-bar.in { transform: scaleX(1); }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(38px) scale(0.97);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
              transform 1s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
.reveal.d1 { transition-delay: 0.10s; }
.reveal.d2 { transition-delay: 0.22s; }
.reveal.d3 { transition-delay: 0.34s; }
.reveal.d4 { transition-delay: 0.46s; }

/* ── IMAGE CLIP REVEAL ── */
/* Container clips; child img/video zooms in from 1.05 to 1 — Apple-style */
.reveal-img { overflow: hidden; }
.reveal-img img,
.reveal-img video {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.reveal-img.in img,
.reveal-img.in video { transform: scale(1); }

/* ── STAGGER ── */
/* Uses keyframe animations so they never conflict with hover transitions */
@keyframes stagger-up {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.stagger > * { opacity: 0; }
.stagger.in > *:nth-child(1)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.00s both; }
.stagger.in > *:nth-child(2)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.07s both; }
.stagger.in > *:nth-child(3)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.14s both; }
.stagger.in > *:nth-child(4)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.21s both; }
.stagger.in > *:nth-child(5)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.28s both; }
.stagger.in > *:nth-child(6)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.stagger.in > *:nth-child(7)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
.stagger.in > *:nth-child(8)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.49s both; }
.stagger.in > *:nth-child(9)  { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.56s both; }
.stagger.in > *:nth-child(10) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.63s both; }
.stagger.in > *:nth-child(11) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.70s both; }
.stagger.in > *:nth-child(12) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.77s both; }
.stagger.in > *:nth-child(13) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.84s both; }
.stagger.in > *:nth-child(14) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.91s both; }
.stagger.in > *:nth-child(15) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.98s both; }
.stagger.in > *:nth-child(16) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 1.05s both; }
.stagger.in > *:nth-child(17) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 1.12s both; }
.stagger.in > *:nth-child(18) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 1.19s both; }
.stagger.in > *:nth-child(n+19) { animation: stagger-up 0.7s cubic-bezier(0.16,1,0.3,1) 1.26s both; }

/* ── KEYFRAMES ── */
@keyframes up-in   { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes dn-in   { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }

/* ── FILTER TABS ── */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.filter-btn {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; font-family: inherit;
  color: rgba(255,255,255,0.38);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 7px 16px; cursor: pointer;
  transition: border-color 0.3s cubic-bezier(0.16,1,0.3,1),
              color 0.3s cubic-bezier(0.16,1,0.3,1),
              background-color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.filter-btn:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.2); }
.filter-btn.active { color: #C9B846; border-color: #C9B846; background: rgba(201,184,70,0.06); }
.filter-btn:focus-visible { outline: 2px solid #C9B846; outline-offset: 2px; }

/* ── MOBILE NAV ── */
#mob-nav {
  position: fixed; inset: 0; z-index: 90;
  background: #0A0A0A;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 38px; opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
}
#mob-nav.open { opacity: 1; pointer-events: auto; }
.mob-link {
  font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em;
  color: rgba(255,255,255,0.65); text-decoration: none; text-transform: uppercase;
  transition: color 0.3s;
}
.mob-link:hover { color: #C9B846; }

.ham { display: block; width: 24px; height: 1px; background: #fff;
       transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s; }
#ham-btn.open .ham:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#ham-btn.open .ham:nth-child(2) { opacity: 0; }
#ham-btn.open .ham:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ── SOC LINKS ── */
.soc-link {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); text-decoration: none; font-weight: 500;
  transition: color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.soc-link:hover { color: #C9B846; }
.soc-link:focus-visible { outline: 2px solid #C9B846; outline-offset: 2px; }

/* ── PHOTO GALLERY ── */
#gallery {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1);
}
#gallery.open { opacity: 1; pointer-events: auto; }
#gallery-img {
  max-width: 90vw; max-height: 80vh;
  object-fit: contain; border-radius: 4px;
  transition: opacity 0.18s ease;
}
#gallery-img.fading { opacity: 0; }
#gallery-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: rgba(255,255,255,0.7);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
#gallery-close:hover { border-color: #C9B846; color: #C9B846; background: rgba(201,184,70,0.08); }
#gallery-close:focus-visible { outline: 2px solid #C9B846; outline-offset: 2px; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7);
  font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, color 0.3s;
}
.gallery-nav:hover { border-color: #C9B846; color: #C9B846; }
.gallery-nav:focus-visible { outline: 2px solid #C9B846; outline-offset: 2px; }
#gallery-prev { left: 20px; }
#gallery-next { right: 20px; }
#gallery-meta {
  position: absolute; bottom: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
#gallery-title { color: #C9B846; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
#gallery-counter { color: rgba(255,255,255,0.35); font-size: 11px; letter-spacing: 0.1em; }

/* ── VIDEO MODAL ── */
#modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
}
#modal.open { opacity: 1; pointer-events: auto; }
#modal-box {
  width: 92vw; max-width: 1060px;
  transform: scale(0.94);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
#modal.open #modal-box { transform: scale(1); }
.vid-ratio { position: relative; padding-bottom: 56.25%; height: 0; }
.vid-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
#modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent; color: rgba(255,255,255,0.65);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-family: inherit;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
#modal-close:hover { border-color: #C9B846; color: #C9B846; background: rgba(201,184,70,0.08); }
#modal-close:focus-visible { outline: 2px solid #C9B846; outline-offset: 2px; }

/* ── MARQUEE ── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.045);
  background: #0F0F0F;
}
.marquee-track {
  display: flex; width: max-content;
  animation: ticker 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: 22px;
  padding: 13px 22px;
  font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  font-weight: 500; white-space: nowrap;
}
.tick-dot { width: 3px; height: 3px; background: #C9B846; border-radius: 50%; flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── HERO ── */
.hero-title {
  font-size: clamp(4rem, 11vw, 10.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-transform: uppercase;
}
.hero-ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.16);
}
.gold-orb-1 {
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,184,70,0.09) 0%, transparent 65%);
  pointer-events: none;
}
.gold-orb-2 {
  position: absolute; width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,184,70,0.055) 0%, transparent 65%);
  pointer-events: none;
}
.play-btn {
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  padding: 12px 28px 12px 14px;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; cursor: pointer; background: transparent;
  color: #fff; font-family: inherit;
  transition: border-color 0.35s cubic-bezier(0.16,1,0.3,1),
              background-color 0.35s cubic-bezier(0.16,1,0.3,1);
}
.play-btn:hover { border-color: #C9B846; background: rgba(201,184,70,0.05); }
.play-btn:focus-visible { outline: 2px solid #C9B846; outline-offset: 4px; }
.play-btn:active { transform: scale(0.98); }
.play-circle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color 0.35s cubic-bezier(0.16,1,0.3,1),
              background-color 0.35s cubic-bezier(0.16,1,0.3,1);
}
.play-btn:hover .play-circle { border-color: #C9B846; background: rgba(201,184,70,0.1); }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.52) 55%, rgba(10,10,10,0.82) 100%);
}
.scroll-cue {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5;
}
.scroll-label {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.22); font-weight: 500;
}
.scroll-line {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, rgba(201,184,70,0.55), transparent);
  transform-origin: top;
  animation: scrollpulse 2.3s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes scrollpulse {
  0%  { transform: scaleY(0); opacity: 0; transform-origin: top; }
  38% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  39% { transform-origin: bottom; }
  65% { transform: scaleY(1); opacity: 1; }
  100%{ transform: scaleY(0); opacity: 0; }
}

/* ── WORKS GRID ── */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
@media (max-width: 860px)  { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .works-grid { grid-template-columns: 1fr; } }

.work-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; display: block; cursor: pointer;
}
.work-card.wide { grid-column: span 2; aspect-ratio: 16/9; }
@media (max-width: 860px) { .work-card.wide { grid-column: span 1; aspect-ratio: 4/3; } }

.work-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.work-card:hover img { transform: scale(1.058); }
.work-card:focus-visible { outline: 2px solid #C9B846; }

.work-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.25) 42%, transparent 100%);
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px;
}
.work-card:hover .work-mask { opacity: 1; }

.work-tint {
  position: absolute; inset: 0;
  background: rgba(201,184,70,0.065);
  mix-blend-mode: overlay; opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.16,1,0.3,1);
}
.work-card:hover .work-tint { opacity: 1; }

.work-play-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; z-index: 3; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s, background-color 0.4s;
}
.work-card:hover .work-play-icon { opacity: 1; }
.work-card[data-type="youtube"]:hover .work-play-icon {
  border: none; background: transparent;
  width: auto; height: auto; border-radius: 0;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.7));
}
.work-card[data-type="youtube"] .work-play-icon {
  border: none; background: transparent;
  width: auto; height: auto; border-radius: 0;
}
.work-card[data-type="youtube"] .work-play-icon svg {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.work-card[data-type="youtube"]:hover .work-play-icon svg { transform: scale(1.1); }
.work-card[data-type="external"]:hover .work-play-icon {
  border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06);
}
.work-card.fhide { display: none; }

/* ── CLIENTS CAROUSEL ── */
.clients-section {
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.clients-inner { position: relative; }
.clients-inner::before, .clients-inner::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 120px; z-index: 2; pointer-events: none;
}
.clients-inner::before { left: 0; background: linear-gradient(to right, #0A0A0A, transparent); }
.clients-inner::after  { right: 0; background: linear-gradient(to left, #0A0A0A, transparent); }
.clients-track {
  display: flex; width: max-content; align-items: center; gap: 0;
  animation: clients-scroll 24s linear infinite;
}
.clients-track:hover { animation-play-state: paused; }
@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.client-card {
  display: flex; align-items: center; justify-content: center;
  margin: 0 32px; flex-shrink: 0;
}
.client-card img {
  width: 80px; height: 80px;
  object-fit: contain; border-radius: 8px;
  opacity: 0.7; filter: grayscale(15%);
  transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1),
              transform 0.35s cubic-bezier(0.16,1,0.3,1),
              filter    0.35s cubic-bezier(0.16,1,0.3,1);
}
.client-card img:hover { opacity: 1; transform: scale(1.06); filter: grayscale(0%); }
.client-card.white-bg img {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}
.clients-divider {
  width: 1px; height: 40px; background: rgba(255,255,255,0.08);
  flex-shrink: 0; margin: 0 8px;
}

/* ── ABOUT ── */
.about-frame {
  position: relative; overflow: hidden; aspect-ratio: 3/4;
}
.about-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.5) 0%, transparent 55%);
  pointer-events: none;
}
.about-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-num {
  font-size: 3.6rem; font-weight: 700;
  letter-spacing: -0.04em; color: #C9B846; line-height: 1;
}
.svc-row {
  border-top: 1px solid rgba(255,255,255,0.055);
  padding: 34px 0;
  display: grid;
  grid-template-columns: 52px 1fr 2.2fr;
  gap: 20px; align-items: start;
  transition: border-top-color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.svc-row:hover { border-top-color: rgba(201,184,70,0.25); }
@media (max-width: 720px) { .svc-row { grid-template-columns: 1fr; gap: 10px; } }

/* ── GEAR RENTAL ── */
.gear-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1200px) { .gear-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .gear-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .gear-grid { grid-template-columns: 1fr; } }

.gear-card {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.055);
  overflow: hidden;
  transition: border-color 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow   0.35s cubic-bezier(0.16,1,0.3,1);
}
.gear-card:hover {
  border-color: rgba(201,184,70,0.22);
  box-shadow: 0 6px 36px rgba(0,0,0,0.45);
}
.gear-card.fhide { display: none; }
.gear-img {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: #fff; padding: 18px;
}
.gear-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.gear-card:hover .gear-img img { transform: scale(1.04); }
.gear-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: #C9B846;
  background: rgba(10,10,10,0.78); padding: 4px 9px;
  backdrop-filter: blur(6px);
}
.gear-info { padding: 14px 16px 16px; }
.gear-name {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em; color: #fff; line-height: 1.3; margin-bottom: 5px;
}
.gear-notes { font-size: 11px; color: #808080; line-height: 1.55; margin-bottom: 12px; }
.gear-price { display: flex; align-items: baseline; gap: 3px; }
.gear-amt {
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em; color: #C9B846; line-height: 1;
}
.gear-unit {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(201,184,70,0.55); font-weight: 500;
}
.gear-cta-box {
  border: 1px solid rgba(255,255,255,0.06);
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color 0.35s cubic-bezier(0.16,1,0.3,1);
}
.gear-cta-box:hover { border-color: rgba(201,184,70,0.18); }
@media (min-width: 768px) {
  .gear-cta-box { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ── CONTACT ── */
.contact-email {
  font-size: clamp(1.8rem, 5.5vw, 5rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: #fff; text-decoration: none; display: inline-block;
  transition: color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.contact-email:hover { color: #C9B846; }
.contact-email:focus-visible { outline: 2px solid #C9B846; outline-offset: 6px; }

a:has(.wa-icon-wrap):hover .wa-icon-wrap {
  background: rgba(37,211,102,0.2);
  border-color: rgba(37,211,102,0.55);
}
a:has(.wa-icon-wrap):hover .wa-text { color: rgba(255,255,255,0.85); }

.form-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; padding: 14px 16px;
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.form-input::placeholder { color: rgba(255,255,255,0.22); }
.form-input:focus { border-color: rgba(201,184,70,0.45); }
.form-label {
  display: block;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.38); font-weight: 500; margin-bottom: 8px;
}
select.form-input option { background: #141414; color: #fff; }

/* ── CURSOR GLOW ── */
.cursor-glow {
  position: fixed;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,184,70,0.052) 0%, transparent 65%);
  pointer-events: none;
  z-index: 5;
  top: 0; left: 0;
  will-change: transform;
}
@media (hover: none) { .cursor-glow { display: none; } }

/* ── GEAR CARD SHIMMER ── */
.gear-card { position: relative; }
.gear-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,0.05) 50%, transparent 62%);
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 1;
  transition: transform 0s;
}
.gear-card:hover::before {
  transform: translateX(200%);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}