/* CSS Variables */
:root {
  --kss-black: #111;
}

/* ===== Mobile only ===== */
@media (max-width: 768px) {
  html, body { margin:0; padding:0; background:#000; }

  /* Primary: hero fills the actual mobile viewport */
  .hero, .hero__media, .hero-video {
    position: relative;
    width: 100%;
    height: 100lvh;           /* largest viewport unit (modern iOS/Android) */
    min-height: 100dvh;       /* dynamic viewport fallback */
    min-height: 100svh;       /* small viewport fallback */
    overflow: hidden;
    background: #000;
  }
  @supports not (height: 100lvh) {
    .hero, .hero__media, .hero-video { height: 100dvh; }
  }

  /* Video must completely cover (no letterboxing) */
  .hero video,
  .hero__media video,
  .hero-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background:#000;
  }

  /* Nuke any margins/padding that can create a gap */
  .hero { margin:0 !important; padding:0 !important; }
  /* Immediate next section (Services): no top gap */
  #services, .section-services {
    margin-top: 0 !important;
    padding-top: clamp(16px, 4vw, 28px); /* preserve spacing without relying on margins */
    position: relative;
    z-index: 1;
  }

  /* Safety net: micro-overlap Services by 2px to cover any iOS subpixel seam */
  #services::before, .section-services::before {
    content: "";
    position: absolute;
    top: -2px; left: 0; right: 0; height: 2px;
    /* Match the Services background color to "bridge" the seam */
    background: var(--services-bg, #f6f7fa);  /* tweak if your services bg differs */
    pointer-events: none;
    z-index: 2;
  }

  /* If your Services background isn't #f6f7fa, set it here once: */
  .section-services { --services-bg: #f6f7fa; } /* adjust to the exact hex you use */

  /* Defensive: prevent any pseudo-element on hero from adding extra space */
  .hero::after, .hero::before { display:none !important; }
  
  /* SERVICES SECTION: Pull it up to sit just below Call Now button */
  #services, .section-services {
    /* Move services section up to close gap completely */
    margin-top: -12vh !important; /* More negative margin to close gap */
    position: relative;
    z-index: 10; /* Above hero video but below header */
    
    /* Reduce top padding to bring content closer to top */
    padding-top: clamp(20px, 3vh, 40px) !important;
    
    /* Remove rounded corners and shadows that create black elements */
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  
  /* Reduce spacing within Services section on mobile */
  #services .container, .section-services .container {
    padding-top: 0 !important;
  }
  
  /* Tighten up section header spacing on mobile */
  #services .text-center.mb-16, .section-services .text-center.mb-16 {
    margin-bottom: 2rem !important; /* Reduce from mb-16 (4rem) to 2rem */
  }
  
  /* Safety: ensure services content isn't hidden behind hero */
  #services .container, .section-services .container {
    position: relative;
    z-index: 11;
  }
  
  /* MOBILE HEADER: Static white logo with compact black header */
  header, .header {
    /* Proper mobile header size */
    height: 80px !important;
    min-height: 80px !important;
    padding: 12px 16px !important;
    
    /* Solid black background */
    background: var(--kss-black) !important;
    backdrop-filter: none !important;
    
    /* Flexbox for proper alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Force white logo only on mobile */
  .logo--primary { 
    display: none !important; 
  }
  
  .logo--scrolled { 
    display: block !important; 
    opacity: 1 !important;
    position: static !important;
  }
  
  /* Properly sized logo for mobile header */
  .brand, .logo, .header-logo {
    height: 70px !important;
    width: auto !important;
    max-width: 219px !important;
    margin: 0 !important;
  }
  
  /* Disable all transitions and animations on mobile */
  .logo-transition, .header-logo, .logo-hover, .logo, .brand {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  
  /* Remove hover effects on mobile */
  .logo-hover:hover, .header-logo:hover, .brand:hover {
    transform: none !important;
    filter: none !important;
  }
  
  /* Properly sized hamburger menu aligned with logo */
  [data-testid="button-mobile-menu"] {
    padding: 8px !important;
    height: 32px !important;
    width: 32px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* Desktop: Increase logo size by 100% (desktop only - above 768px) */
@media (min-width: 769px) {
  .brand, .logo, .header-logo {
    height: 112px !important; /* 75% increase from 64px */
    width: auto !important;
    max-width: 350px !important; /* 75% increase from 200px */
  }
  
  /* Adjust header height for larger desktop logo */
  header, .header {
    height: 126px !important;
    min-height: 126px !important;
    padding: 20px !important;
  }
}