/* The phone layer, shared by all four concepts. Each page maps its own look
   onto these tokens: --m-fg, --m-rule, --m-chip-bg, --m-accent,
   --m-accent-ink, --m-bar-bg, --m-radius.

   Under 980px the desktop menu is gone, so the sections show as a row of
   tappable chips under the logo. Under 760px the header stops following you
   (it costs a tenth of the screen) and a thumb bar with Call and Book a call
   rises from the bottom once the hero's own buttons have scrolled away. */

.c-less { display: none; }
.site-head .m-row, .m-bar { display: none; }

@media (max-width: 980px) {
  .site-head .m-row { display: block; min-height: 0; }
  .m-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .m-nav::-webkit-scrollbar { display: none; }
  .m-nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--m-radius, 999px);
    border: 1px solid var(--m-rule); background: var(--m-chip-bg); color: var(--m-fg); text-decoration: none; font-size: 15px; scroll-snap-align: start; }
  .m-nav a:last-child { margin-right: 40px; }
  html { scroll-padding-top: 140px; }
  main [id] { scroll-margin-top: 0; }
}

@media (max-width: 760px) {
  .site-head { position: relative; top: auto; }
  html { scroll-padding-top: 12px; scroll-padding-bottom: 88px; }

  .m-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--m-bar-bg); border-top: 1px solid var(--m-rule);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transform: translateY(110%); visibility: hidden;
    transition: transform 200ms cubic-bezier(0.3, 0, 1, 1), visibility 0s linear 200ms; }
  .m-bar.show { transform: none; visibility: visible; transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), visibility 0s; }
  .m-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: var(--m-radius, 999px);
    font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
  .m-bar .m-call { border: 1px solid var(--m-fg); color: var(--m-fg); font-variant-numeric: tabular-nums; }
  .m-bar .m-book { background: var(--m-accent); color: var(--m-accent-ink); }

  /* Room under the last line so the bar never sits on it */
  footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  footer .sources a { display: inline-flex; align-items: center; min-height: 40px; }
}

@media (max-width: 640px) {
  .c-more { display: none; }
  .c-less { display: inline; }
  .concept nav a { display: inline-flex; align-items: center; min-height: 32px; }
}

@media (max-width: 360px) {
  /* The number gets the room it needs, Book a call takes the rest */
  .m-bar { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .m-bar a { font-size: 14.5px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-bar, .m-bar.show { transition: none; }
}