/* Header sizing for tablets and phones; desktop sizing stays in the shared styles. */
@media (min-width: 641px) and (max-width: 980px), (min-width: 641px) and (max-width: 1366px) and (pointer: coarse) {
  .site-header { background:#0f1419; backdrop-filter:none; }
  .site-header .header-inner { min-height:126px; gap:24px; }
  .site-header .brand { width:360px; max-width:calc(100% - 80px); flex:0 0 auto; }
  .site-header .brand img { display:block; width:100%; height:auto; }
  .site-header .menu-toggle { display:flex; }
  .site-header .site-nav { position:fixed; z-index:49; top:126px; right:0; bottom:auto; left:auto; width:min(420px,100%); height:calc(100dvh - 126px); display:none; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:1.5rem 20px 3rem; overflow-y:auto; overscroll-behavior:contain; background:#0d1217; border-left:1px solid #344651; box-shadow:-40px 0 80px #0009; }
  .nav-open .site-header .site-nav { display:flex; }
  .site-header .site-nav a { min-height:58px; display:flex; flex:0 0 auto; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--line); color:#f5f7f8; font-size:1.08rem; line-height:1.4; white-space:normal; }
  .site-header .site-nav .nav-cta { margin-top:1rem; padding:.9rem 1rem; border:0; text-align:center; color:var(--ink); }
  .site-header .nav-services summary { padding:1rem 0; font-size:1.08rem; min-height:58px; border-bottom:1px solid var(--line); }
  .site-header .nav-submenu { position:static; width:auto; border:0; border-left:2px solid #287886; border-radius:0; background:#11222d; box-shadow:none; padding:0 .75rem; }
  .site-header .site-nav .nav-submenu a { display:flex; font-size:1rem; min-height:50px; padding:.8rem; }
  .nav-open .menu-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-open .menu-toggle span:nth-child(2) { opacity:0; }
  .nav-open .menu-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .hero,.service-page .service-hero { padding-top:126px; }
  .hero-image,.hero-shade,.service-page .service-hero-photo,.service-page .service-hero-shade { top:126px; height:calc(100% - 126px); }
  .services-intro { padding-top:157px; }
  [id],.lighting-page section[id] { scroll-margin-top:146px; }
}

/* A small phone increase, with a width cap that leaves the menu clear. */
@media (max-width:640px) {
  .site-header .header-inner { min-height:78px; gap:24px; }
  .site-header .brand { width:210px; max-width:calc(100% - 80px); }
  .site-header .brand img { display:block; width:100%; height:auto; }
  .site-header .site-nav { top:78px; height:calc(100dvh - 78px); }
  .hero,.service-page .service-hero { padding-top:78px; }
  .hero-image,.hero-shade,.service-page .service-hero-photo,.service-page .service-hero-shade { top:78px; inset-block-start:78px; height:calc(100% - 78px); }
  .services-intro { padding-top:103px; }
}