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

/* ===== MOBILE ONLY ===== */
@media (max-width: 768px) {
  html, body { margin:0; padding:0; }

  /* Fixed header with safe-area padding; readable after scroll */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    padding-top: max(0px, env(safe-area-inset-top)); 
    z-index: 10000;
    background: transparent;
    transition: background-color 200ms ease;
  }
  .site-header--scrolled { background: var(--kss-black); }

  /* High-contrast hamburger: visible over any footage */
  [data-testid="button-mobile-menu"] {
    position: relative; z-index: 10002;
    -webkit-tap-highlight-color: transparent;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 8px 10px;
  }
  
  /* Hide any separate X - but not the React close button */
  .nav-close, .menu-close, .close-btn { display: none !important; }

  /* HERO: true full-bleed on iOS/Android with no bars */
  .hero, .hero__media, .hero-video {
    position: relative; width: 100%;
    height: 100svh;
    min-height: 100dvh;
    overflow: hidden; background:#000; margin:0 !important;
  }

  /* Video must fill container */
  .hero video, .hero__media video, .hero-video video {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover; object-position: center center;
    background:#000;
  }
  .hero video::-webkit-media-controls,
  .hero video::-webkit-media-controls-enclosure { display:none !important; }

  /* Remove any gap between hero and services */
  #services, .section-services { margin-top: 0 !important; }

  /* Menu panel: opaque + smooth; always readable */
  .mobile-menu-overlay {
    position: fixed; left:0; right:0;
    top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 56px));
    height: calc(100dvh - var(--header-h, 56px));
    background: rgba(0,0,0,0.96);
    z-index: 10001;
    opacity: 0; transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .mobile-menu-overlay.menu-open {
    opacity:1; transform: translateY(0); pointer-events:auto;
  }

  /* Ensure page content sits below header layer */
  main, .page, .section { position: relative; z-index: 1; }
  
  /* Remove previous mobile logo centering attempts */
  .hero__content {
    /* neutralize previous flex centering */
  }
  
  .hero-logo:not(.hero-logo-overlay) {
    /* don't affect non-overlay logos */
  }
  
  /* Service page mobile header - hide subheading text for cleaner mobile experience */
  .page--services .svc-sub {
    display: none;
  }
}