/* =========================================================================
   HERO-PREMIUM.CSS
   Dedicated stylesheet for the video-background hero.
   Loaded AFTER style.css so its rules take priority for the hero only —
   everything else on the site (navbar, footer, other sections) is
   untouched and keeps using style.css as before.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HERO SHELL
   The background video sits absolutely positioned behind the text,
   with a light scrim over it so the dark navy text stays readable
   regardless of what's happening in the footage at any given moment.
   ------------------------------------------------------------------------- */
.hero{
  background:transparent !important;
  min-height:820px;
 padding:48px 0 40px !important;
  display:flex;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  position:relative;
  overflow:hidden;
}

/* Background video layer — fills the whole section */
.hero-bg-premium{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important;
  z-index:0 !important;
  margin:0 !important;
}
.hero-bg-premium img,
.hero-bg-premium video{
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* Light scrim so text stays legible over any part of the video */
.hero-bg-premium::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.68) 34%, rgba(255,255,255,.28) 62%, rgba(255,255,255,0) 100%);
  z-index:1;
}

/* Text content sits above the video + scrim */
.hero-content-premium{
  position:relative !important;
  z-index:2 !important;
  max-width:640px;
  margin:0 !important;
  margin-right:auto !important;
  text-align:left !important;
  align-self:flex-start !important;
  flex:0 0 auto !important;
}

/* -------------------------------------------------------------------------
   2. TEXT + BADGES — recolored for the light background
   ------------------------------------------------------------------------- */
.hero-content-premium h1{
  font-family:var(--font-display);
  font-size:clamp(34px,4.6vw,54px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--navy-900);
}
.hero-content-premium h1 em{
  font-style:normal;
  color:#ff8a5c !important;
}
.hero-content-premium .hero-sub{
  color:var(--ink-700);
  font-size:17.5px;
  line-height:1.65;
  margin:20px 0 30px;
  max-width:500px;
}
.hero-content-premium .hero-badges{
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px;
}
.hero-content-premium .hero-badge{
  display:flex; align-items:center; gap:9px;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:9px 15px 9px 11px;
  border-radius:12px;
}
.hero-content-premium .hero-badge .ic{
  width:32px; height:32px; border-radius:8px;
  background:var(--lav-100);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.hero-content-premium .hero-badge .ic svg{ width:16px; height:16px; stroke:var(--navy-800); }
.hero-content-premium .hero-badge b{ display:block; color:var(--navy-900); font-size:13.5px; font-weight:700; line-height:1.2; }
.hero-content-premium .hero-badge span{ display:block; color:var(--ink-500); font-size:11.5px; }

.hero-content-premium .hero-book{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--navy-800); font-weight:700; font-size:14.5px;
  border-bottom:2px solid var(--line); padding-bottom:2px;
}
.hero-content-premium .hero-book:hover{ color:var(--orange-600); border-color:var(--orange-500); }

/* the floating "10+ years" badge already works on any background —
   just anchor it relative to the new hero shell */
.hero .hero-float{ position:absolute !important; left:4%; bottom:48px; z-index:3 !important; }
@media (max-width:900px){ .hero .hero-float{ left:auto; right:4%; } }

.hero .scroll-cue{ color:var(--ink-500); z-index:3; }
.hero .scroll-cue svg{ stroke:var(--ink-500); }

/* -------------------------------------------------------------------------
   3. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width:900px){
  .hero{ min-height:auto; padding:36px 0 60px; align-items:flex-start !important; }
  .hero-content-premium{ max-width:100%; }
.hero-bg-premium::after{
    background:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 75%);
  }
}
@media (max-width:560px){
  .hero{ padding:28px 0 50px; }
  .hero-content-premium .hero-sub{ max-width:100%; }
  .hero-content-premium h1{ font-size:clamp(28px,8vw,38px); }
}

/* -------------------------------------------------------------------------
   4. PERFORMANCE / ACCESSIBILITY
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero-bg-premium video{ animation:none !important; }
}
/* ===== Mobile + heading polish ===== */
.hero-content-premium h1{color:#f0b429 !important;}

@media (max-width:600px){
   
.topbar{font-size:10px;}
.topbar .container{
  padding-top:4px !important;
  padding-bottom:4px !important;
   row-gap:1px !important;
}
.topbar-left{row-gap:1px !important;}
.topbar-left svg{width:11px !important;height:11px !important;}
.topbar-right svg{width:11px !important;height:11px !important;}
  
  .wa-float-wrap{right:14px;bottom:14px;}
  .wa-float{width:52px;height:52px;}
  .wa-float svg{width:24px;height:24px;}
  .hero-bg-premium video{object-fit:cover !important;}
  .navbar .container{height:64px !important;}
}
.svc-mobile-ic{display:none;}
.stats-band .container{
  display:flex !important;
  justify-content:center !important;
}
.stats-grid{
  display:inline-flex !important;
  gap:60px !important;
}
.stat-item{
  border-right:1px solid rgba(255,255,255,.09) !important;
  padding:0 40px !important;
  border-bottom:none !important;
}
.stat-item:last-child{border-right:none !important;}
@media (max-width:480px){
    .stat-item:nth-child(3){
  grid-column:1 / -1 !important;
  border-bottom:none !important;
}
    .stats-band .container{display:block !important;}
.stats-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;
}
.stat-item{
  padding:24px 12px !important;
  border-right:1px solid rgba(255,255,255,.09) !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
}
.stat-item:nth-child(even){border-right:none !important;}
.stat-item:nth-child(3), .stat-item:nth-child(4){border-bottom:none !important;}
    .why-grid > .why-item:nth-child(1){display:none !important;}
    .center-cta{margin-top:20px !important;}
    .center-cta .btn{padding:8px 18px !important;font-size:12px !important;}
  #services{padding:32px 0 !important;}
    .svc-mobile-ic{
  width:34px !important;
  height:34px !important;
}
.svc-mobile-ic svg{width:16px !important;height:16px !important;}
.svc-card a.svc-more{display:none !important;}
.svc-body h3{font-size:15px !important;}
    .svc-mobile-ic svg{color:#ffffff !important;}
.svc-body > p{display:none !important;}
    
.svc-mobile-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--navy-900);
  margin-bottom:10px;
}
.svc-mobile-ic svg{width:24px;height:24px;stroke:#fff;}
.svc-tag{display:none !important;}
    .footer-grid{grid-template-columns:1fr 1fr !important;}
.footer-grid > div:nth-child(1){grid-column:1 / -1 !important;}
.footer-grid > div:nth-child(4){grid-column:1 / -1 !important;}
   
   .svc-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
.svc-card{width:100% !important;min-width:0 !important;}
     
     .feature-strip .container{grid-template-columns:1fr 1fr !important;}
.feature-card{
  border-right:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}
.feature-card:nth-child(even){border-right:none !important;}
.feature-card:nth-child(3),
.feature-card:nth-child(4){border-bottom:none !important;}
    .hero{
    align-items:flex-start !important;
    justify-content:center !important;
    min-height:260px !important;
  }
  .hero-content-premium{
    align-self:flex-start !important;
    text-align:left !important;
    margin:0 !important;
  }
  .hero-content-premium .hero-badges{justify-content:flex-start !important;}
  .hero-cta{justify-content:flex-start !important;}
  .hero .hero-float{
    align-self:flex-start !important;
    margin:10px 0 0 14px !important;
  }
    
  .hero{
    flex-direction:column !important;
    padding:4px 0 4px !important;
    margin-top:0 !important;
  }
  .hero-bg-premium{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
  .hero-bg-premium::after{
    background:linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,0) 60%) !important;
  }
  .hero-content-premium{
    padding:10px 14px 0 !important;
    max-width:78% !important;
    text-align:left !important;
  }
  .hero-content-premium h1{
    font-size:19px !important;
    line-height:1.15 !important;
    margin-bottom:12px !important;
  }
  .hero-content-premium .hero-sub{
    font-size:9px !important;
    line-height:1.25 !important;
    margin:0 0 14px !important;
    color:#ffffff !important;
    
  }
  .hero-content-premium .hero-badges{
    gap:3px !important;
    margin-bottom:14px !important;
    flex-wrap:nowrap !important;
  }
  .hero-content-premium .hero-badge{
    padding:2px 4px !important;
    max-width:66px !important;
    flex:1 1 0 !important;
  }
  .hero-content-premium .hero-badge b{font-size:6px !important;line-height:1.1 !important;}
  .hero-content-premium .hero-badge span{font-size:5px !important;line-height:1.1 !important;}
  .hero-content-premium .hero-badge .ic{width:10px !important;height:10px !important;}
  .hero-content-premium .hero-badge .ic svg{width:5px !important;height:5px !important;}
  .hero-content-premium .hero-book{display:none !important;}
  .hero-cta{margin-bottom:12px !important;}
  .hero .hero-float{
    display:flex !important;
    position:static !important;
    margin:10px 0 0 14px !important;
    transform:scale(.32) !important;
    transform-origin:left top !important;
  }
  .hero-cta .btn{padding:3px 8px !important;font-size:7px !important;}
  .hero-cta .btn svg{width:7px !important;height:7px !important;}
}