:root{
  --bg:#0b0c0f; --card:#14161b; --muted:#a6adbb; --text:#f5f7fb;
  --accent:#ff6a00; --accent2:#ff9e5e; --stroke:#1e2230;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

header{position:sticky;top:0;z-index:50;background:rgba(12,13,17,.7);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.brand h1{font-size:18px;margin:0;font-weight:800;letter-spacing:.3px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{padding:10px 12px;border-radius:10px;color:var(--muted)}
nav a:hover{color:#fff;background:rgba(255,255,255,.06)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--stroke);background:#171923;color:#fff;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;border:0}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--stroke)}
.hero::before{ content:""; position:absolute; inset:0; z-index:-3; background:none; }
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h2{font-size:48px;line-height:1.05;margin:0 0 12px}
.hero p.sub{color:var(--muted);margin:0 0 20px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.badge{border:1px solid var(--stroke);padding:8px 12px;border-radius:999px;color:var(--muted)}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px}
section{padding:64px 0;border-bottom:1px solid var(--stroke)}
h3{margin:0 0 12px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{display:flex;gap:12px;align-items:flex-start}
.step .num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;display:flex;align-items:center;justify-content:center;font-weight:800}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.tile{grid-column:span 4;border:1px solid var(--stroke);border-radius:14px;overflow:hidden;position:relative;background:#0e1016}
.tile::after{content:"";display:block;aspect-ratio:4/3}
.tile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}

footer{padding:28px 0;color:#a6adbb}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .tile{grid-column:span 6}
}
@media (max-width:600px){
  nav ul{display:none}
  .tile{grid-column:span 12}
}


/* === Responsive Enhancements (2025-10-16) === */
:root{
  --tap: 12px;
}

/* Fluid type */
h1{font-size:clamp(22px, 5.2vw, 40px);line-height:1.1}
h2{font-size:clamp(20px, 4.8vw, 32px);line-height:1.15}
.hero h2{font-size:clamp(26px, 6vw, 48px)}

/* Better container padding on small screens */
.container{padding-left:clamp(14px, 2.4vw, 24px);padding-right:clamp(14px, 2.4vw, 24px)}

/* Media queries */
@media (max-width: 980px){
  .nav{gap:8px}
  .cta{gap:8px}
}
@media (max-width: 768px){
  .cta{width:100%;display:grid;grid-template-columns:1fr;gap:10px}
  .cta .btn{width:100%}
  .brand h1{font-size:clamp(16px, 4.4vw, 20px)}
}

/* Mobile nav (hamburger) */
.hamburger{
  display:none;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  line-height:1;
}
@media (max-width: 900px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  nav ul{display:none !important}
}

.mobile-nav{
  position:fixed; inset:0 0 auto 0; top:72px;
  transform:translateY(-8px);
  max-height:0;
  overflow:hidden;
  background:rgba(13,14,18,.96);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom:1px solid var(--stroke);
  transition:max-height .3s ease;
  z-index:40;
}
.mobile-nav.open{max-height:260px}
.mobile-nav ul{list-style:none;margin:0;padding:12px}
.mobile-nav li{border:1px solid var(--stroke);background:var(--card);margin:8px 0;border-radius:12px}
.mobile-nav a{display:block;padding:12px 14px}

/* Ensure media scales nicely */
img, video{max-width:100%;height:auto}


/* Gallery tiles: tighten gaps on tiny screens */
@media (max-width:480px){
  .gallery{gap:8px}
  .badge{padding:6px 10px}
  section{padding:48px 0}
}


/* === Fix: hero background video layering (2025-10-16) === */


/* === Fix2: video visible under semi-transparent smoke overlay === */

.hero{ position:relative; overflow:hidden; background:#0e0e10; }


/* === Mini-hero & breadcrumbs (2025-10-16) === */
.mini-hero{border-bottom:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,106,0,.06), transparent 60%); padding:28px 0}
.mini-hero h2{margin:0; font-size:clamp(22px,5vw,36px); line-height:1.15}

.breadcrumbs{border-bottom:1px solid var(--stroke); background:rgba(14,16,22,.6); backdrop-filter:blur(8px) saturate(1.1)}
.breadcrumbs .container{display:flex; align-items:center; gap:8px; padding:10px 20px}
.breadcrumbs a{color:var(--text); opacity:.8}
.breadcrumbs .current{color:var(--text); opacity:1}
.breadcrumbs span[aria-hidden]{opacity:.5}


/* === Mobile polish (iOS/Android) — 2025-10-16 === */

/* Safe-area for iPhone notch */
header{ padding-top: max(0px, env(safe-area-inset-top)); }

/* Brand: keep compact and readable */
@media (max-width: 480px){
  .brand{ gap:10px }
  .brand img{ width:36px; height:36px; border-radius:10px }
  .brand h1{
    font-size:18px; line-height:1.15;
    margin:0;
    max-width:56vw;
    font-weight:800;
    letter-spacing:-0.2px;
    text-wrap:balance;
  }
  /* Burger button compact */
  .hamburger{ padding:8px 10px; border-radius:10px }

  /* CTA: single column, thumb-friendly height */
  .cta{ display:grid; grid-template-columns:1fr; gap:8px; width:100%; }
  .btn{ padding:12px 14px; border-radius:14px; font-size:15px; }

  /* Hero type smaller + better contrast */
  .hero h2{ font-size:clamp(22px, 6vw, 30px); text-shadow:0 2px 12px rgba(0,0,0,.35) }
  .hero p.sub{ font-size:15px; line-height:1.4; text-shadow:0 1px 10px rgba(0,0,0,.35) }
  .hero .badges{ gap:8px; }
  .badge{ padding:6px 10px; border-radius:12px }

  /* Reduce top crowding under sticky header */
  

  /* Gallery tiles spacing tighter on phones */
  .gallery{ gap:8px }
}

/* Slightly dim overlay for better text legibility */
.hero::after{ opacity:.65 }
@media (max-width: 480px){
  .hero::after{ opacity:.55 }
}


/* === MOBILE HARDENING — final pass (2025-10-16) === */
@media (max-width: 600px){
  /* Header compact + no overlap */
  header{ 
    padding-top: max(0px, env(safe-area-inset-top)); 
    border-bottom: 1px solid var(--stroke);
    background: rgba(12,13,17,.85);
    backdrop-filter: blur(10px) saturate(1.2);
  }
  .nav{ height:auto; padding:10px 0; gap:10px }
  /* Brand: clamp title to 2 lines, no layout shift */
  .brand{ gap:10px; align-items:center }
  .brand img{ width:34px; height:34px; border-radius:10px }
  .brand h1{
    font-size:16px; line-height:1.15; margin:0;
    max-width: 54vw;
    font-weight:800; letter-spacing:-.2px;
    display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden;
  }
  /* Hide big header CTAs on phones to avoid crowding; keep them in hero */
  header .cta{ display:none !important }

  /* Hamburger comfortable tap */
  .hamburger{ padding:8px 10px; border-radius:10px }

  /* Mobile drawer: full-width nice spacing */
  .mobile-nav{ top: calc(56px + env(safe-area-inset-top)); }
  .mobile-nav ul{ padding:10px 16px }
  .mobile-nav li{ margin:10px 0 }

  /* Hero: reduce sizes, add spacing below header */
  .hero h2{ font-size:clamp(22px, 5.4vw, 28px); text-shadow:0 2px 12px rgba(0,0,0,.35) }
  .hero p.sub{ font-size:15px; line-height:1.45; text-shadow:0 1px 10px rgba(0,0,0,.35) }
  
  .badges{ gap:8px }
  .badge{ padding:6px 10px; border-radius:12px }
  .cta{ display:grid; grid-template-columns:1fr; gap:10px; width:100% }
  .btn{ padding:12px 14px; border-radius:14px; font-size:15px }

  /* Slightly darker overlay for contrast but not killing video */
  .hero::after{ opacity:.5 }
}

/* Extra tiny phones */
@media (max-width: 360px){
  .brand h1{ -webkit-line-clamp:1; max-width:50vw }
}

/* Ensure hero content sits on video and not below any band */
.hero .container{ padding-top:12px !important; }

/* Force hero no padding */
section.hero, .hero{ padding:0 !important; }

/* Aggressive mobile hero cleanup */
@media (max-width: 600px){
  /* Only video background, no overlays */
  .hero::after{ display:none !important; }
  .hero::before{ display:none !important; }
  .hero{ background: transparent !important; padding-top: 0 !important; }
  .hero .container{ padding-top: 10px !important; padding-bottom: 20px !important; background: transparent !important; }
  .hero .card{ background: transparent !important; border-color: transparent !important; }
  .hero h2, .hero p.sub{ background: transparent !important; }
}

.hero .hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; display:block;
  background:#000; /* fallback while loading */
}


/* === FINAL MOBILE HERO FIX === */
@media (max-width: 600px){
  /* No borders or solid backgrounds that could form a bar */
  header{ border-bottom: 0 !important; }
  .hero, .hero .container, .hero-grid, .hero-grid > div{
    background: transparent !important;
  }
  /* Place hero text above video */
  .hero .container{ position: relative; z-index: 2; }
  /* Ensure video is full-cover behind */
  .hero .hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  /* Remove any residual spacing that could look like a band */
  .hero{ padding-top: 0 !important; margin-top: 0 !important; }
  .hero .container{ padding-top: 10px !important; }
  /* Card in hero stays transparent */
  .hero .card{ background: transparent !important; border-color: transparent !important; }
}
/* Remove black fallback behind video */
.hero .hero-bg-video{ background: transparent !important; }


/* === Hero overlay positioning (ensures no black band) === */
.hero{ position:relative; }
.hero .hero-overlay{
  position:absolute; inset:0; pointer-events:none;
  background: transparent;
  z-index:1;
}
.hero .hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
/* First heading has no extra margin on top */
.hero h2{ margin-top:0 }
section.hero, .hero{ padding:0 !important; background:transparent !important; }
.hero .container{ position:relative; z-index:2; padding-top:12px !important; }


/* === Phone-specific: kill any residual bands === */
@media (max-width: 600px){
  header{ border-bottom:0 !important; }
  .hero::before, .hero::after{ display:none !important; }
  .hero .card{ background:transparent !important; border-color:transparent !important; }
  .hero .container{ padding-top:10px !important; }
}


/* === Mobile: keep hero heading clear of sticky header while staying on video === */
@media (max-width: 600px){
  :root{ --navH: 58px; }
  .nav{ height: var(--navH); }
  /* Push hero content just below header; video remains full-cover */
  .hero{ padding-top: calc(var(--navH) + env(safe-area-inset-top) + 6px) !important; }
  .hero .container{ padding-top: 0 !important; }
  /* Ensure video covers also the padded area */
  .hero .hero-bg-video{ position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
}


/* === ULTRA FINAL MOBILE HERO RULES (no black bar, text on video) === */
@media (max-width: 600px){
  :root{ --navH: 56px; }
  header{ background: rgba(10,11,14,.6) !important; border-bottom: 0 !important; }
  .nav{ height: var(--navH) !important; }
  /* hero layout */
  section.hero, .hero{ padding-top: calc(var(--navH) + env(safe-area-inset-top) + 8px) !important; margin-top:0 !important; background: transparent !important; }
  .hero .container{ position: relative; z-index: 2; padding-top: 0 !important; }
  .hero .hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  /* kill any overlays on mobile */
  .hero::before, .hero::after{ display:none !important; }
  /* ensure headings have no background rectangles */
  .hero h2, .hero p.sub{ background: transparent !important; margin-top:0 }
  /* keep card transparent in hero */
  .hero .card{ background:transparent !important; border-color:transparent !important; }
}
/* Desktop/tablet subtle gradient for readability (not a solid bar) */
@media (min-width: 601px){
  .hero::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 35%);
  }
}
/* Base: video and overlay layering */
.hero{ position:relative; }
.hero .hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero .hero-overlay{ position:absolute; inset:0; z-index:1; background:transparent; pointer-events:none; }
.hero .container{ position:relative; z-index:2; }


/* ===== Overlay header on hero video (mobile+desktop) ===== */
body.has-hero header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:100;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.has-hero .nav{height:72px}
/* ensure hero fills the viewport and sits under header */
.hero{min-height: 100svh; position: relative; margin:0 !important; padding-top: max(80px, env(safe-area-inset-top));}
.hero .container{position:relative; z-index:2}
.hero-bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-overlay{position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(1000px 400px at 70% 10%, rgba(255,106,0,.12), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.55) 100%);}
/* remove any accidental top gaps */
.header-spacer{display:none !important}
main, .page, .content{margin-top:0 !important}