/* ── RESET & THEME ─────────────────────────────────────────── */
*,
*::before,
*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

:root{
  --primary-color:#ff6200;
  --background-color:#0f172a;
  --dark-color:#0a0a0a;
  --text-color:#d1d5db;
  --heading-color:#fff;
  --accent-color:#4ade80;
}

body{
  font-family:'Montserrat',sans-serif;
  background:var(--background-color);
  color:var(--text-color);
  line-height:1.6;
}

.container{ width:90%; max-width:1200px; margin:0 auto; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border-radius:4px;
  font-weight:600;
  text-decoration:none;
  text-align:center;
}
.btn-primary{ background:var(--primary-color); color:#fff; }
.btn-outline{ border:2px solid var(--primary-color); color:var(--primary-color); background:transparent; }

/* ── HEADER / NAV ─────────────────────────────────────────── */
.site-header{ background:#5f5f5fff; }
.header-wrapper{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0; position:relative;
}

.logo{ width:250px; height:auto; margin-right:1rem; } /* image logo */
.logo a{ color:var(--primary-color); font-size:1.5rem; font-weight:700; text-decoration:none; } /* (kept if text logo ever used) */

.main-nav ul{ list-style:none; display:flex; gap:2rem; }
.main-nav a{ color:var(--text-color); text-decoration:none; font-weight:400; font-size:1.5rem; }
.main-nav a:hover{ color:#fff; }

/* Hide hamburger on desktop; prevent the tiny white dot */
.hamburger{ display:none; background:none; border:none; }

/* ── HERO SECTION ─────────────────────────────────────────── */
.hero-section {
  position: relative;
  height: 70vh;
  min-height: 500px;
  max-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 0;
  isolation: isolate;
}

.video-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  animation: scroll-videos 30s linear infinite;
  z-index: -1 !important;
}

.hero-video {
  width: 16.666%; /* 6 videos, so 100% / 6 = 16.666% */
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  pointer-events: none;
}

@keyframes scroll-videos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1 !important;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10 !important;
  color: white;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.highlight {
  color: var(--primary-color);
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  margin-bottom: 3rem;
}

.hero-buttons .btn {
  margin: 0 0.5rem;
}

.scroll-down {
  font-size: 1.5rem;
  color: var(--primary-color);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* ── EQUIPMENT ───────────────────────────────────────────── */
.equipment-section{ background:var(--background-color); padding:4rem 0; }
.equipment-section h2{ color:#fff; text-align:center; font-size:2rem; }
.equipment-section p{ text-align:center; margin:1rem 0 3rem; }

.equipment-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:2rem;
}
.equipment-card{
  background:var(--dark-color);
  border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
}
.equipment-image{
  background:linear-gradient(#ccc,#eee);
  height:200px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.equipment-image img{
  max-width:100%; width:auto; height:auto; object-fit:contain; display:block;
}
.equipment-image.no-image::after{
  content:"Image Coming Soon"; font-size:1rem; font-weight:600; color:#555;
}

.equipment-info{ padding:1rem; }
.equipment-info h3{ color:#fff; margin-bottom:.5rem; }
.equipment-tags{ display:flex; gap:.5rem; margin-bottom:1rem; }
.equipment-tags span{
  background:var(--primary-color); color:#fff;
  padding:.25rem .5rem; border-radius:4px; font-size:.8rem;
}
.equipment-info h4{ font-size:1rem; margin:1rem 0 .5rem; color:var(--heading-color); }
.equipment-info ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.equipment-info li{ position:relative; padding-left:1rem; }
.equipment-info li::before{ content:"•"; position:absolute; left:0; color:var(--primary-color); }

/* ── SERVICES ────────────────────────────────────────────── */
.services-section{ background:var(--dark-color); color:var(--text-color); padding:4rem 0; }
.services-section h2{ color:#fff; text-align:center; font-size:2rem; }
.services-section p{ text-align:center; margin:1rem 0 3rem; }

.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:2rem;
}
.service-card{
  background:var(--background-color);
  border:1px solid #333; border-radius:8px; padding:1.5rem;
}
.service-icon{ font-size:2rem; color:var(--primary-color); margin-bottom:1rem; }
.service-card h3{ color:#fff; margin-bottom:.5rem; }
.service-card p{ margin-bottom:1rem; }
.service-card ul{ list-style:none; }
.service-card li{ display:flex; align-items:center; margin-bottom:.5rem; }
.service-card li i{ margin-right:.5rem; color:var(--accent-color); }
.service-cta{ text-align:center; margin-top:2rem; }

/* ── GALLERY (Work in Action) ───────────────────────────── */
.work-section{ background:var(--background-color); padding:4rem 0; }
.work-section h2{ color:#fff; text-align:center; font-size:2rem; }
.work-section p{ text-align:center; margin:1rem 0 3rem; }

.work-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* 2-wide desktop */
  gap:2rem;
}
@media (max-width:768px){
  .work-grid{ grid-template-columns:1fr; } /* 1-wide mobile */
}

.work-card{
  background:var(--dark-color);
  border-radius:.5rem; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  display:flex; flex-direction:column;
}

/* unified video/thumb styles */
.work-thumb{
  position:relative; width:100%;
  min-height:400px; /* taller cards */
  background:#0b1224; overflow:hidden; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.work-thumb video,
.work-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Portrait videos get pillarboxing + gentle vignette */
.work-thumb.is-portrait video{ object-fit:contain; background:transparent; }
.work-thumb.is-portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
}

/* centered equipment name overlay (fades on play) */
.title-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  padding:.75rem 1.25rem; background:rgba(0,0,0,.55);
  color:#fff; font-weight:700; font-size:1.2rem; text-align:center; letter-spacing:.3px;
  border-radius:6px; backdrop-filter:blur(2px);
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.title-overlay.is-hidden{ opacity:0; transform:translate(-50%,-50%) scale(.95); }

/* Image carousel within a work card */
.image-carousel{ position:relative; width:100%; padding-bottom:56.25%; overflow:hidden; }
.image-carousel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;
}
.image-carousel img.active{ display:block; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.6); border:none; color:#fff;
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10;
}
.carousel-arrow.left{ left:.5rem; }
.carousel-arrow.right{ right:.5rem; }

/* ── QUOTE / CONTACT ────────────────────────────────────── */
.quote-section{ background:var(--background-color); padding:4rem 0; }
.quote-content h2{ color:#fff; text-align:center; font-size:2rem; }
.quote-content p{ text-align:center; margin:1rem 0 2rem; }

.quote-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:2rem; align-items:start;
}
.contact-card{
  background:var(--dark-color); border-radius:8px; padding:1.5rem; text-align:center;
}
.contact-icon{ font-size:2rem; color:var(--primary-color); margin-bottom:1rem; }
.contact-card h4{ color:#fff; margin-bottom:.5rem; }
.contact-card p, .contact-card a{ color:var(--text-color); font-size:.9rem; }
.contact-card a{ display:inline-block; margin-top:.5rem; color:var(--primary-color); text-decoration:none; }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer{ background:#5f5f5fff; color:var(--text-color); padding:3rem 0 1rem; }
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:2rem; margin-bottom:2rem;
}
.footer-services h4, .footer-contact h4{ color:#fff; margin-bottom:.5rem; }
.footer-services ul, .footer-contact ul{ list-style:none; }
.footer-services li, .footer-contact li{ margin-bottom:.5rem; }
.footer-services a{ color:var(--text-color); text-decoration:none; }
.footer-contact li i{ margin-right:.5rem; }

/* ── MOBILE NAV & HERO BUTTONS ─────────────────────────── */
@media (max-width:768px){
  /* reveal hamburger & wire dropdown nav */
  .hamburger{
    display:block; position:absolute; top:50%; right:1rem; transform:translateY(-50%);
    width:2rem; height:2rem; cursor:pointer; z-index:100;
  }
  .hamburger span{
    display:block; height:6px; background:#000; margin:2px 0; transition:transform .3s ease;
  }

  .main-nav{ display:none; flex-direction:column; background:#5f5f5fff; width:100%; position:absolute; top:100%; left:0; }
  .main-nav.open{ display:flex; z-index:1000; }
  .main-nav ul{ flex-direction:column; margin:0; }
  .main-nav li{ width:100%; text-align:center; border-bottom:1px solid rgba(255,255,255,.1); }
  .main-nav li a{ display:block; padding:1rem; }

  /* stack hero buttons; hide header CTA on mobile */
  .hero-buttons{ display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
  .hero-buttons .btn{ width:100%; padding:1rem; font-size:1rem; }
  .header-btn{ display:none; }

  /* taller hero on phones for less crop */
  .hero-section{ min-height:80vh; }
  .bg-video{ object-position:50% 30%; }

  /* contact grid → single column */
  .quote-grid{ grid-template-columns:1fr !important; gap:1.5rem; }
}