/* THZ AGENCY — Global Styles */
:root{
  --bg:#0b0b0b;
  --bg-elev:#141414;
  --text:#f2f2f2;
  --muted:#bdbdbd;
  --gold:#d4af37;
  --accent:#ffd166;
  --link:#f5c84c;
  --danger:#ff4d4f;
  --ok:#00d1b2;
  --maxw:1100px;
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;border-radius:var(--radius)}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* ===== Header (desktop base) ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,11,0.9);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid #1f1f1f;
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; position: relative; /* so the mobile dropdown anchors here */
}

.brand {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically */
  height: 100px;           /* adjust height as needed */
}

.brand-logo img {
  max-width: 100%;   /* responsive scaling */
  height: 70px;
}

.nav-links ul { display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.nav a { padding:8px 12px; border-radius:10px }
.nav a.active, .nav a:hover { background:#1a1a1a }

/* ===== Mobile toggle button ===== */
.menu-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid #2a2a2a;
  background:#141414;
  cursor:pointer;
  align-items:center; justify-content:center;
  gap:4px; padding:8px;
}
.menu-toggle .bar{
  display:block; width:22px; height:2px; background:#f2f2f2; border-radius:2px;
}
.menu-toggle .bar:nth-child(2){ width:18px }
.menu-toggle .bar:nth-child(3){ width:14px }

/* ===== Mobile layout ===== */
@media (max-width: 900px){
  .menu-toggle{ display:flex; }

  /* hide desktop inline links */
  .nav-links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background:#0f0f0f;
    border-bottom:1px solid #1f1f1f;
    transform: translateY(-10px);
    opacity:0; pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-links ul {
    flex-direction: column;
    padding:10px 20px 16px; gap:6px;
  }
  .nav-links a { display:block; padding:10px 12px; }

  /* opened state */
  .site-header.nav-open .nav-links{
    transform: translateY(0);
    opacity:1; pointer-events:auto;
  }
}

.hero {
  position: relative;
  min-height: 100vh; /* full screen height */
  display: flex;
  align-items: center;
  color: #fff;
  z-index: 0;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/images/background.jpg') center center/cover no-repeat;
  filter: sepia(1) brightness(0.6); /* sepia + darken */
  z-index: 0;
}

.hero .wrap {
  position: relative;
  z-index: 1; /* keeps text above image */
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* Full-bleed wrapper (escapes the 1100px .container limit) */
.full-bleed {
  width: 100vw;
  position: relative;
  margin-top: 20px;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 24px; /* gutter */
}

/* Center the grid inside the full-bleed with a big max width */
.video-row .video-grid {
  max-width: 1440px;   /* wider than your default 1100px */
  margin: 0 auto;
}

/* 3-up layout on desktop */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Make cards taller/bolder */
.video-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #222;
  aspect-ratio: 4 / 3;        /* taller than 16:9 so they feel bigger */
  /* or: min-height: 320px; */
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: transform 0.5s ease;
}

.video-card:hover video { transform: scale(1.05); }

/* Responsive */
@media (max-width: 1200px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
}


.badge{display:inline-flex;gap:8px;align-items:center;background:#1a1a1a;border:1px solid #2a2a2a;color:var(--gold);padding:6px 10px;border-radius:999px;font-size:12px}
.cta{display:flex;gap:12px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid #2a2a2a;background:#171717;color:#fff;cursor:pointer;box-shadow:var(--shadow);transition:transform .05s ease}
.btn.gold{background:linear-gradient(135deg,var(--gold),#8a6a1f);color:#111;border:0}
.btn:hover{transform:translateY(-1px)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.kpi .card{background:var(--bg-elev);padding:18px;border-radius:16px;border:1px solid #222}
.kpi h3{margin:0;font-size:28px;color:var(--gold)}
.kpi p{margin:6px 0 0;color:var(--muted);font-size:14px}

.section{padding:50px 0}
.section h3{font-size:28px;margin:0 0 10px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg-elev);border:1px solid #222;border-radius:16px;padding:18px;box-shadow:var(--shadow)}

footer{border-top:1px solid #1f1f1f;background:#0e0e0e;padding:32px 0;margin-top:50px}
.footer-grid{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr}
.social{display:flex;gap:12px}
.social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid #2a2a2a;border-radius:10px;background:#141414}
small, .fine{color:#8a8a8a}

.hero-image{border-radius:20px;overflow:hidden;border:1px solid #222}

/* Team */
.team-card{display:flex;gap:14px;align-items:center}
.team-card img{width:90px;height:90px;object-fit:cover;border:2px solid #232323}

/* Services pills */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{background:#1a1a1a;border:1px solid #2a2a2a;color:#f0f0f0;padding:10px 12px;border-radius:999px}

/* === Service Card Grid === */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns desktop */
  gap: 24px;
  margin-top: 24px;
}

.service-card {
  background: var(--bg-elev);
  border: 1px solid #222;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.service-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.service-content {
  padding: 18px;
}

.service-content h4 {
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--gold);
}

.service-content p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}


/* 📱 Responsive — 1 column on mobile */
@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-card img {
    height: 200px;
  }
}
/* Testimonials */
.quote{font-size:18px;font-style:italic}
.who{margin-top:10px;color:var(--muted)}

/* FAQ accordion */
.faq{display:grid;gap:12px}
.faq-item{border:1px solid #222;border-radius:14px;overflow:hidden}
.faq-q{background:#161616;padding:14px;cursor:pointer;font-weight:600}
.faq-a{display:none;padding:14px;background:#101010;color:#d8d8d8;border-top:1px solid #222}

/* Forms */
form label{display:block;margin:12px 0 6px}
input,textarea,select{width:100%;padding:12px;border-radius:12px;border:1px solid #2a2a2a;background:#121212;color:#f8f8f8}
textarea{min-height:140px}
.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
form .btn{margin-top:14px}

/* Responsive */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}