:root{
  --bg:#050606;
  --panel:#0b0c0d;
  --muted:#121315;
  --accent:rgba(255, 162, 0, 0.734); /* warm yellow */
  --accent-strong:#ffcf33;
  --text:#e9e9ea;
  --muted-text:#9b9b9b;
  --radius:12px;
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* NAV */
.nav-wrap{background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-mark{background:var(--accent);width:40px;height:40px;display:inline-grid;place-items:center;border-radius:8px;font-weight:700;color:#111}
.brand-name{font-weight:600}
.nav-links{display:flex;align-items:center;gap:14px}
.nav-links a{text-decoration:none;padding:8px 10px;border-radius:8px;color:var(--text);opacity:0.9}
.nav-toggle{display:none;background:none;border:0;font-size:20px;color:var(--text)}

/* HERO */
.hero{padding:60px 0}
.hero-grid{display:grid;grid-template-columns:520px 1fr;gap:40px;align-items:center}
.hero-media-gallery{display:flex;flex-direction:column;gap:16px}
.media-main{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 8px 40px rgba(0,0,0,0.6);min-height:320px;display:flex;align-items:center;justify-content:center}
.media-image{width:100%;height:100%;object-fit:cover;display:block}
.media-video{width:50%;height:50%;object-fit:cover}
.media-badge{position:absolute;left:14px;top:14px;background:rgba(0,0,0,0.5);padding:8px 10px;border-radius:10px;font-weight:600;color:var(--accent)}
.media-thumbs{display:flex;gap:10px}
.thumb{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:4px;border-radius:10px;cursor:pointer;position:relative}
.thumb img{width:88px;height:56px;object-fit:cover;border-radius:8px;display:block}
.thumb .play-icon{position:absolute;right:8px;bottom:6px;background:rgba(0,0,0,0.5);padding:4px 6px;border-radius:6px}
.thumb.active{outline:2px solid rgba(255,210,77,0.14)}
.hidden{display:none}

.hero-content{padding:8px}
.hero-title{font-size:36px;margin:0 0 12px}
.lead{color:var(--muted-text);margin: bottom 18px;}
.hero-cta{display:flex;gap:12px;margin-bottom:18px;}
.tagline{color:var(--muted-text)}

/* SECTIONS */
.section{padding:48px 0}
.section-title{font-size:22px;margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:18px;border-radius:12px}
.dark-card{border:1px solid rgba(255,255,255,0.03)}

/* WHY */
.alt-dark{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005))}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.video-card{position:relative;border-radius:14px;overflow:hidden;height:320px;box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.video-card video{width:100%;height:100%;object-fit:cover;filter:brightness(0.6)}
.video-overlay{position:absolute;left:18px;bottom:18px;color:var(--text)}

.reasons{display:flex;flex-direction:column;gap:14px}
.reason{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);transform:translateY(0);opacity:1}

/* animated entrance for reason boxes */
.animated{animation:floatIn .7s ease both}
.animated.delay{animation-delay:.15s}
.animated.delay-long{animation-delay:.3s}
@keyframes floatIn{
  from{transform:translateY(18px) scale(.98);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

/* CONTACT */
.contact-form{max-width:700px}
.form-row{display:flex;gap:12px}
input,textarea{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);font-size:15px}
.form-actions{display:flex;gap:12px;margin-top:12px}
.small-muted{color:var(--muted-text);margin-top:10px}

/* BUTTONS */
.btn-solid{background:var(--accent);color:#111;padding:10px 14px;border-radius:10px;text-decoration:none;border:0;display:inline-block}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--text)}

/* FOOTER */
.site-footer{margin-top:40px;padding:30px 0;background:transparent}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.footer-bottom{text-align:center;margin-top:12px;color:var(--muted-text)}
.footer-links a{text-decoration:none;color:var(--muted-text)}

/* RESPONSIVE */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;right:0;top:0;height:100vh;width:260px;background:linear-gradient(180deg,#0b0c0d,#070708);flex-direction:column;padding:80px 18px;gap:12px;transform:translateX(110%);transition:transform .28s ease;z-index:9999}
  .nav-links.show{transform:translateX(0)}
  .nav-links a{display:block}
  .grid-3{grid-template-columns:1fr}
  .hero-title{font-size:26px}
  .media-thumbs{overflow:auto}
  html.nav-open, html.nav-open body { overflow: hidden; height: 100%; }
}

/* thumb video sizing to match thumb images */
.thumb-video {
  width: 92px;
  height: 58px;
  object-fit:cover;
  display:block;
  border-radius:6px;
  background:#000;
}

/* ensure the fallback img inside <video> (used by some old browsers) won't overflow */
.thumb video img { width:100%; height:100%; object-fit:cover; display:block; }

/* -------------------------
  Compact hero video sizing
  Paste this into styles.css
   - limits width with max-width
   - caps height with max-height
   - uses aspect-ratio for clean scaling
   - smaller gaps & padding
--------------------------*/

/* Container limits for hero */
.hero {
  padding: 28px 0;               /* less vertical space than before */
}

/* If you use a two-column hero, make the left (video) narrower */
.hero-grid {
  display: grid;
  grid-template-columns: 420px 1fr; /* video column narrower (420px) */
  gap: 24px;
  align-items: center;
}

/* If you use the single-video layout, use this smaller grid */
.single-video-grid {
  grid-template-columns: 460px 1fr; /* adjust to your taste */
}

/* Video container: limit visual width and height */
.hero-video-wrap,
.media-main {
  width: 100%;
  max-width: 760px;     /* don't let hero get wider than this */
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  background: #000;
}

/* Video sizing: aspect ratio + visual cap (keeps it compact) */
.hero-video,
.media-image,
.media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;   /* keeps 16:9 frame */
  max-height: 360px;      /* visual cap on desktop */
}

/* Smaller caps for medium and small screens */
@media (max-width: 980px) {
  .hero-grid, .single-video-grid { grid-template-columns: 1fr; }
  .hero-video, .media-video { max-height: 300px; aspect-ratio: 16/9; }
  .hero { padding: 24px 0; }
}

@media (max-width: 700px) {
  .hero-video-wrap, .media-main { max-width: 100%; }
  .hero-video, .media-video { max-height: 220px; aspect-ratio: 16/9; }
  .hero-title { font-size: 22px; }
  .hero { padding: 18px 0; }
  .hero-grid { gap: 16px; }
}
/* Navbar logo */
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }

/* hide the old letter-mark visually if it remains in markup */
.brand-mark{ display:none; }

/* logo image sizing and visual fallback */
.nav-logo {
  width:50px;               /* change to 40-64px depending on logo */
  height:50px;
  object-fit:contain;
  display:block;
  border-radius:8px;        /* optional rounded corners; remove if undesired */
  background:transparent;
}

/* tighten vertical alignment in small screens */
@media (max-width:700px){
  .nav-logo { width:40px; height:40px; }
  .brand-name { font-size:15px; }
}

/* Floating WhatsApp button */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #25D366, #1da851);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  cursor: pointer;
  transition: transform .14s ease, opacity .14s ease;
}

.whatsapp-fab:active { transform: scale(.96); }
.whatsapp-fab:hover  { transform: translateY(-3px); }

/* accessible label bubble */
.whatsapp-fab .wh-label {
  position: absolute;
  right: 68px;
  bottom: 50%;
  transform: translateY(50%);
  background: rgba(0,0,0,0.72);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

/* show label on hover/focus for bigger screens */
@media (min-width: 480px) {
  .whatsapp-fab:hover .wh-label,
  .whatsapp-fab:focus .wh-label {
    opacity: 1;
    transform: translateY(50%) translateX(-6px);
    pointer-events: auto;
  }
}

/* svg size */
.whatsapp-fab svg { width: 22px; height: 22px; fill: #fff; }

/* smaller on ultra-small screens */
@media (max-width: 420px) {
  .whatsapp-fab { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .whatsapp-fab .wh-label { display: none; } /* hide label on tiny phones */
}