/* Marketing pages on tablets and phones: a ☰ menu, tighter spacing, and swipeable rows of cards
   instead of one very long column. Loaded after each page's own <style>, so these rules win. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text);cursor:pointer}
.nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
.mnav{display:none}
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(19,24,34,.92);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav-cta{gap:10px}
  .nav-cta > a:not(.btn-primary){display:none}
  .nav-cta .btn-primary{padding:8px 12px;font-size:13.5px}
  .mnav{display:block;position:fixed;left:0;right:0;top:69px;bottom:0;z-index:49;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
  .mnav.open{opacity:1;visibility:visible;transform:none}
  .mnav .grp{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:18px 0 6px}
  .mnav a.ml{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line-soft);color:var(--text);text-decoration:none;font-size:17px}
  .mnav a.ml.on{color:var(--blue)}
  .mnav a.ml::after{content:'→';color:var(--text-faint);font-size:14px}
  .mnav .mcta{display:grid;gap:10px;margin-top:24px}
  .mnav .mcta .btn{justify-content:center;padding:13px 18px}
  body.mnav-open{overflow:hidden}
}
@media (max-width:640px){
  section{padding:52px 0}
  .section-head{margin-bottom:28px}
  .hero{padding:32px 0 28px;gap:32px}
  .dhero{padding:36px 0 24px}
  .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.cta-actions .btn{justify-content:center}
  .hero-stats{gap:18px;margin-top:28px}
  .cta-block{padding:40px 20px}
  .divider{margin:0}
  /* Rows of cards become swipeable strips: the next card peeks in so it's clear there's more */
  .rail,.dept-cards,.quote-grid,.price-grid,.feat-strip{display:grid;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:none;border:0;border-radius:0;padding-bottom:6px;margin-right:-20px;padding-right:20px;scroll-padding-left:0}
  .rail::-webkit-scrollbar,.dept-cards::-webkit-scrollbar,.quote-grid::-webkit-scrollbar,.price-grid::-webkit-scrollbar,.feat-strip::-webkit-scrollbar{display:none}
  .rail > *,.dept-cards > *,.quote-grid > *,.price-grid > *,.feat-strip > *{scroll-snap-align:start;border:1px solid var(--line);border-radius:8px;min-width:0}
  .swipe-hint{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-faint);margin:-14px 0 12px}
  /* Department services: two per row instead of one long list */
  .offer-grid{grid-template-columns:1fr 1fr}
  .offer-card{padding:14px 12px}
  .offer-card h4{font-size:13.5px}
  .offer-card p{font-size:12px}
  .foot-grid{gap:20px}
}
@media (min-width:641px){.swipe-hint{display:none}}
@media (max-width:360px){.offer-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mnav,.to-top{transition:none}}