/* =====================================================================
   responsive.css — mobile & tablet fixes
   Loaded last on every page so it can override style.css and the
   page-level <style> blocks. Desktop (>1160px) is left untouched.
   ===================================================================== */

/* ---------- shared: logo never wraps ---------- */
.logo > span{white-space:nowrap}

/* the quote button inside <nav class="top"> should keep white text */
header nav.top a.btn{color:#fff;white-space:nowrap}

/* ---------- injected burger for pages that use <nav class="top"> ---------- */
.rb-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:10px;margin-right:-10px}
.rb-burger span{display:block;width:24px;height:2px;background:var(--ink,#0C1A2E);transition:transform .25s,opacity .25s}
.rb-burger[aria-expanded="true"] span:nth-child(1),
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rb-burger[aria-expanded="true"] span:nth-child(2),
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.rb-burger[aria-expanded="true"] span:nth-child(3),
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =====================================================================
   SMALL DESKTOP / TABLET LANDSCAPE  (≤1160px)
   The 9-link desktop menu no longer fits, so switch to the burger menu.
   ===================================================================== */
@media (max-width:1160px){
  nav.desktop,
  .nav-cta > .btn{display:none}
  .burger{display:flex;padding:10px;margin-right:-10px}
  .mobile-nav{max-height:calc(100vh - 70px);overflow-y:auto}

  /* hero stats: 2 × 2 while the hero is still two columns */
  .hero-specs{display:grid;grid-template-columns:repeat(2,max-content);gap:24px 56px}
}
@media (min-width:1161px){
  .mobile-nav{display:none !important}
}

/* =====================================================================
   TABLET PORTRAIT  (≤960px)
   ===================================================================== */
@media (max-width:960px){
  /* hero is a single column here, so all four stats fit on one row */
  .hero-specs{grid-template-columns:repeat(4,max-content);gap:24px 44px}
  .hero-showcase{max-width:640px}

  /* footer: brand block full width, link columns side by side */
  .foot-grid > *:first-child{grid-column:1 / -1}
  .foot-about{max-width:520px}

  .cta-banner .wrap{padding-top:48px;padding-bottom:48px}
  .page-hero{padding:52px 0 44px}

  /* pages with <nav class="top">: collapse into a dropdown */
  header nav.top{display:none}
  .rb-burger{display:flex}
  header nav.top.open{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;padding:0 0 16px;
    background:var(--paper,#fff);border-bottom:1px solid var(--line,#E3E9F1);
    box-shadow:0 18px 30px -18px rgba(12,26,46,.35);
    max-height:calc(100vh - 70px);overflow-y:auto
  }
  header nav.top.open a{padding:15px 24px;border-top:1px solid var(--line,#E3E9F1);font-size:15px;color:var(--slate,#46566B)}
  header nav.top.open a.active{color:var(--accent,#2450DC);font-weight:600}
  header nav.top.open a.btn{margin:16px 24px 0;justify-content:center;color:#fff;border-top:none}

  /* top strip: keep phone/email and the NDA note on one tidy line */
  .strip{font-size:11px;letter-spacing:0}
  .strip .wrap{height:auto;min-height:38px;padding-top:6px;padding-bottom:6px}
  .strip .phone-strip{white-space:nowrap}
  .strip .nda{min-width:0;text-align:right}
}

/* =====================================================================
   LARGE PHONE / SMALL TABLET  (≤760px)
   ===================================================================== */
@media (max-width:760px){
  /* top strip: let it grow instead of clipping its text */
  .strip .wrap{height:auto;min-height:34px;padding-top:7px;padding-bottom:7px;justify-content:center;text-align:center}
  .strip{font-size:11px;line-height:1.5}
  .strip .phone-strip{display:none}
  .strip .nda{text-align:center}
  .strip .nda .dot{display:none}

  .mobile-nav a{padding:16px 24px}

  /* floating quick-action dock: move off the reading area, down to the bottom corner */
  .side-quick-dock{top:auto;bottom:16px;transform:none;width:42px}
  .side-quick-dock.collapsed{transform:translateX(30px)}
  .side-dock-btn{width:42px;height:44px}
  .side-dock-toggle{height:30px}
  .side-dock-tip{display:none}

  /* capabilities list */
  .cap-visual-in{padding:28px 24px}

  /* blog / service article pages */
  .post-card{padding:24px 22px}
}

/* =====================================================================
   PHONE  (≤520px)
   ===================================================================== */
@media (max-width:520px){
  .wrap{padding-left:20px;padding-right:20px}
  .section{padding:56px 0}
  .section-head{margin-bottom:32px}

  /* logo: compact so it sits on one line next to the menu */
  .logo{gap:10px;font-size:16px}
  .logo .mark{width:30px;height:30px}
  .logo small{font-size:8px;letter-spacing:.16em}
  header .wrap{height:64px}
  .lang-btn{padding:8px 10px}
  .nav-cta{gap:8px}

  /* hero */
  .hero{padding:44px 0 56px}
  .hero h1{font-size:clamp(32px,9vw,40px);margin:16px 0 16px}
  .hero p.lead,.page-hero p.lead{font-size:16px;margin-bottom:26px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .hero-specs{grid-template-columns:repeat(2,1fr);gap:22px 16px;margin-top:32px;padding-top:24px}
  .spec .n{font-size:26px}
  .spec .l{letter-spacing:.08em}

  /* video card: taller frame and smaller overlays so nothing collides */
  .video-slider-wrap{aspect-ratio:4/3.4}
  .v-hud-top{top:10px;left:10px;right:10px;gap:8px}
  .v-hud-bottom{bottom:10px;left:10px;right:10px;gap:8px}
  .hud-badge{font-size:9.5px;padding:4px 8px;white-space:nowrap}
  .hud-tag{font-size:9px;padding:3px 7px;white-space:nowrap}
  .hud-telemetry{font-size:9.5px;padding:6px 8px;max-width:calc(100% - 104px);line-height:1.45}
  .hud-telemetry .hl{font-size:10.5px}
  .hud-controls{gap:4px}
  .hud-btn{width:30px;height:30px}
  .slider-nav-tabs{padding:10px;gap:6px}
  .slide-tab{padding:8px}

  /* page headers */
  .page-hero{padding:40px 0 36px}
  .page-hero h1{font-size:clamp(30px,8.5vw,38px)}

  /* cards */
  .card-in{padding:16px 16px 20px}
  .pillar-in{padding:20px 18px}
  .ind-content{padding:18px 16px}

  /* CTA banner */
  .cta-banner .wrap{padding-top:40px;padding-bottom:40px;gap:22px}
  .cta-banner .btn{width:100%;justify-content:center}

  /* contact + quote form */
  .contact-panel-in{padding:24px 20px}
  .contact-item{padding:18px 0}
  .captcha-row{grid-template-columns:1fr}
  .captcha-canvas-wrap{width:max-content}

  /* FAQ */
  .faq-item summary{font-size:16px;padding:18px 2px}

  /* footer */
  footer{padding:44px 0 90px}          /* room so the dock never covers the last line */
  .foot-grid{gap:28px;margin-bottom:32px}
  .foot-bottom{flex-direction:column;gap:8px}

  /* lightbox close button stays on-screen */
  .lightbox-modal{padding:16px}
  .lightbox-close{top:8px;right:8px}
}

/* very narrow phones (≤360px) */
@media (max-width:360px){
  .logo{font-size:15px}
  .logo small{font-size:7.5px;letter-spacing:.12em}
  .hero-specs{gap:18px 12px}
  .spec .l{font-size:10px}
}