/* Mobile responsive fixes — applied site-wide.
   Loaded after the page-specific CSS so these rules override. */

/* Header CTA must never wrap. Without nowrap, narrow viewports break
   "Book a demo" onto two lines (still relevant in the 681–1080px range
   where the button is still shown). */
.bar .btn { white-space: nowrap; }

@media (max-width: 680px) {
  /* On phones, drop the "Book a demo" CTA from the top bar — it's already
     in the hamburger menu. Lets the wordmark + glyph render at full size
     alongside just the hamburger toggle. */
  .bar .bar-cta .btn { display: none; }
}

@media (max-width: 680px) {
  /* Reduce vertical rhythm on phones — desktop 110-120px gutters
     consume ~30% of viewport height on a small phone. */
  .section { padding: 64px 0; }

  /* Hero h1 floor — 54-56px Fraunces overflows narrow Android screens
     (320-360px) for words like "Hospitality", "Housekeeping", "Engineering". */
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }

  /* Hero artwork keeps its desktop min-height when stacked, leaving a
     tall blank-ish region under the headline. */
  .stage,
  .hero-art { min-height: auto; }

  /* Touch targets — aim for WCAG 2.5.5 / Apple HIG 44pt minimum. */
  .mm-section a    { padding: 14px 12px; }
  .subbar-links a  { padding: 12px 14px; }
  .foot-col a      { display: block; padding: 8px 0; }

  /* Hero artwork task card 2-col grid crushes inside the stage card. */
  .task-grid { grid-template-columns: 1fr; }

  /* iOS Safari force-zooms when a focused input has font-size < 16px. */
  .newsletter-input input,
  .nl-form input { font-size: 16px; }
}

/* ---------- Reduced motion ----------
   index.css already disables the customers marquee. Cover everything else
   site-wide: fade-up reveals, hero-stage keyframes, hover lifts, pulse dots. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Ensure fade-up content stays visible if the IntersectionObserver
     never fires (or the universal rule above neutralises the transition). */
  .fade-up { opacity: 1; transform: none; }
}

/* ---------- Touch-friendly desktop dropdowns ----------
   nav-touch.js toggles .is-open on .nav-item when its trigger is clicked,
   so the Solutions / Resources menus open on touch laptops that don't fire
   :hover. Mirrors the existing :hover / :focus-within open state. */
.bar .nav .nav-item.is-open > .mega,
.bar .nav .nav-item.is-open > .dd {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, 0);
}
.bar .nav .nav-item.is-open .caret {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* ---------- color-mix() fallback ----------
   The sticky header and subbar use color-mix(in oklab, ...). Browsers that
   don't parse color-mix (Firefox <113, Safari <16.2, old Android WebViews)
   drop the entire declaration, leaving the bar transparent and unreadable
   over scrolled content. Provide a solid fallback for those engines only. */
@supports not (background: color-mix(in oklab, red, blue)) {
  .bar    { background: #efe8d6; }
  .subbar { background: #efe8d6; }
}