/* Phone fixes from the mobile audit, shared by the home page and every generated page.
   Needs the page tokens (--paper, --ink, --rule, --cobalt, --gutter, --sans, --narrow). */

/* 1. Menu: a two-line button that opens the header nav as a full-screen panel */
.menu-btn, .menu-cta { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; position: relative; z-index: 21; }
  .menu-btn i { display: block; width: 22px; height: 2px; background: currentColor; transition: translate .3s, rotate .3s; }
  .menu-open .menu-btn i:first-child { translate: 0 4px; rotate: 45deg; }
  .menu-open .menu-btn i:last-child { translate: 0 -4px; rotate: -45deg; }
  @media (min-width: 701px) { .site-head .btn + .menu-btn { margin-left: 8px; } }   /* only where the quote button shows */
  .menu-open { overflow: hidden; }
}

/* 3. Industry scenes scroll away on phones instead of staying pinned over the text */
@media (max-width: 900px) {
  .ind-story .ind-stage, .ind-index .ind-stage { position: relative; top: auto; height: 52vh; }
}

/* 4. Tap targets at least 44px tall, 6. no iOS zoom on focus, 7. no text under 12px */
@media (max-width: 900px) {
  :is(.site-foot .col a, .foot-mid a, .crumbs a, .ct .side a, .chips a, .card .more, .ind-steps .more, .faq-idx nav a, .flow-go .btn) { min-height: 44px; display: inline-flex; align-items: center; }
  .site-foot .col { gap: 0; }
  .crumbs { align-items: center; }   /* links are 44px tall now; keep the separators level with them */
  #range .rn { min-height: 48px; }
  .site-head .logo { display: block; padding-block: 7px; }
  .segs a, .btn.add { min-height: 44px; }
  .more { min-height: 44px; display: inline-flex; align-items: center; }
  .prow .mini, .ind-steps .mini, .card .acts .btn { min-height: 44px; height: 44px; }
  .enq-list input, .form input, .form select, .form textarea, .qty input { font-size: 16px !important; }
  .enq-list .rm { width: 44px; height: 44px; }
  .label, .form label > span, .tblk, .chips span, .chips a, .prow .hr, .cmp2 tbody th, .bp3 .dt, .kf dt, .flow dt, .dk-head .label { font-size: 12.5px; }
  .tblk span { padding: 10px; }
}

/* 5. Family comparison: one card per product on phones instead of a wide table */
.cmp-cards { display: none; }
@media (max-width: 700px) {
  .cmp2 { display: none; }
  .cmp-cards { display: grid; gap: 12px; }
  .cc { display: grid; gap: 12px; padding: 18px; background: var(--white, #fff); border: 1px solid var(--rule); }
  .cc > a { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; font: 500 20px/1.2 var(--sans); letter-spacing: -0.02em; min-height: 44px; }
  .cc img { width: 72px; height: 72px; object-fit: cover; display: block; background: var(--paper-2, #ecece8); }
  .cc dl { display: grid; margin: 0; border-top: 1px solid var(--rule); }
  .cc dl div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .cc dt { font: 600 12px/1.4 var(--narrow); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6a6d75); }
  .cc dd { margin: 0; font-size: 15px; }
  .cc .btn { justify-self: start; min-height: 44px; }
}

/* Phones: the header quote button is hidden, so the menu button takes the right edge (-10px lines its bars up with the gutter) */
@media (max-width: 900px) { .site-head .menu-btn { margin-right: -10px; } }

/* Phone menu: a bottom sheet over a dimmed page, above the quote bar and the WhatsApp button */
.msheet-wrap { position: fixed; inset: 0; z-index: 400; }
.msheet-wrap[hidden] { display: none; }
.msheet-dim { position: absolute; inset: 0; background: rgba(11,13,18,.45); opacity: 0; transition: opacity .3s; }
.msheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; display: grid; gap: 4px; padding: 10px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
          background: var(--paper); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0,20,90,.18); transform: translateY(100%); transition: transform .38s cubic-bezier(.2,.8,.2,1), translate .25s; touch-action: pan-x; }
.menu-open .msheet-dim { opacity: 1; }
.menu-open .msheet { transform: none; }
.msheet-grip { justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--rule); margin: 4px 0 10px; }
.msheet-links { display: grid; }
.msheet-links a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--rule); font: 500 26px/1.1 var(--sans); letter-spacing: -0.03em; color: var(--ink); }
.msheet-links a::after { content: "→"; font-size: 18px; color: var(--muted); }
.msheet-links a[aria-current] { color: var(--cobalt); }
.msheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.msheet-acts a { display: grid; place-items: center; min-height: 52px; font: 600 13px/1 var(--narrow); letter-spacing: .12em; text-transform: uppercase; }
.msheet-cta { background: var(--cobalt); color: #fff; }
.msheet-wa { background: #25d366; color: #fff; }
@media (min-width: 901px) { .msheet-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) { .msheet, .msheet-dim { transition: none; } }