/* ==========================================================================
   mobile.css — responsive layer (skill 04)
   Loaded LAST, after all page CSS. Overrides desktop downward.
   Desktop CSS is never edited; everything responsive lives here.

   The site's frozen css already reflows grids at 960/620; this layer adds
   only what was missing: a motion-free mobile menu, touch targets, and
   phone-width guards.

   Breakpoints:
     nav collapse  max-width: 960px   (matches the frozen .nav-links hide)
     phone         max-width: 768px
     small phone   max-width: 560px
   ========================================================================== */

/* ==========================================================================
   MOBILE NAV — toggle + panel (markup injected by js/menu.js)
   Show/hide only. No transitions — motion is skill 05's decision.
   ========================================================================== */

.menu-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  color: var(--navy-700);
  background: transparent;
  cursor: pointer;
}
.menu-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.hdr.scrolled .menu-toggle,
.hdr.menu-open .menu-toggle{ color: #fff; }

.mobile-menu{
  display: none;
  position: fixed;
  top: 76px;
  inset-inline: 0;
  z-index: 59;
  background: var(--bg-deep, #081026);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px 0 18px;
  max-height: calc(100svh - 76px);
  overflow-y: auto;
}
.mobile-menu.is-open{ display: block; }

.mobile-menu a{
  display: block;
  padding: 14px clamp(20px, 6vw, 48px);
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  text-align: start;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobile-menu a:last-child{ border-bottom: 0; }
.mobile-menu a.mm-current{ color: var(--red, #FF0060); }
.mobile-menu a.mm-cta{ color: var(--red, #FF0060); font-weight: 700; }

/* solid header while the menu is open, so the bar reads over any hero */
.hdr.menu-open{
  background: rgba(8,16,38,.96);
}
.hdr.menu-open .nav-links a{ color: rgba(255,255,255,.85); }
.hdr.menu-open .lg-dark{ display: none; }
.hdr.menu-open .lg-light{ display: block; }

@media (max-width: 960px){
  .menu-toggle{ display: inline-flex; }
}
@media (min-width: 961px){
  .mobile-menu{ display: none !important; }
}

/* ==========================================================================
   PHONE  (max-width: 768px)
   Grids are already single-column from the frozen css; this layer adds
   touch targets and spacing guards only.
   ========================================================================== */
@media (max-width: 768px){

  /* --- touch targets: 44px minimum via padding, not font-size --- */
  .hdr-ic{ width: 44px; height: 44px; }
  .lang button{ padding: 12px 14px; }
  .ft-col a{ padding-block: 11px; }
  .contact-direct a{ display: inline-block; padding-block: 9px; }
  .work-visit{ padding-block: 12px; }
  .ex-rail button{ min-height: 44px; }
  .lead-form input, .field input, .field textarea{ min-height: 48px; }

  /* --- comparison table: keep the scroll inside its card --- */
  .cmp-scroll{ max-width: 100%; }
  .cmp th, .cmp td{ white-space: normal; }

  /* --- watermarks never push the viewport --- */
  .cta-watermark, .ft-mark{ max-width: 100vw; overflow: hidden; }
}

/* ==========================================================================
   SMALL PHONE  (max-width: 560px)
   ========================================================================== */
@media (max-width: 560px){

  /* header CTA is hidden by the frozen css at this width — the menu
     carries the CTA link instead (menu.js appends it) */

  /* hero buttons: comfortable full-width tap areas */
  .hero-actions{ width: 100%; padding-inline: 20px; }
  .hero-actions .btn{ flex: 1 1 100%; }

  /* lift the giant word slightly so it clears the band copy on short phones */
  .hero-giant{ --hy: -90%; transform: translate(-50%, -90%); }

  /* section headings that sit close to the viewport edge */
  .sec-head .display{ overflow-wrap: break-word; }

  /* vs panels + checklist rows: slightly tighter padding */
  .vs-col{ padding: 20px; }
  .check-card{ padding: 18px; }
}