/* MobilityRepair.ie — shared site styles.
   The design's look lives in per-element inline styles (preserved verbatim from the
   Cowork design). This file only holds the global reset, the responsive rules for the
   shared header/footer (which inline styles can't express), and shared keyframes. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:#F5F7FA; color:#0C1D36; font-family:'Instrument Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:#17406D; color:#FFFFFF}
input::placeholder, textarea::placeholder{color:#9AA5BB}
input:focus, textarea:focus, select:focus{outline:2px solid #E8862A; outline-offset:1px}

@keyframes mrPulse{0%{box-shadow:0 12px 30px rgba(232,134,42,0.4),0 0 0 0 rgba(232,134,42,0.45)}70%{box-shadow:0 12px 30px rgba(232,134,42,0.4),0 0 0 14px rgba(232,134,42,0)}100%{box-shadow:0 12px 30px rgba(232,134,42,0.4),0 0 0 0 rgba(232,134,42,0)}}

/* ── Header responsive (mirrors the design's JS breakpoints, now pure CSS) ── */
.mr-nav{display:none}                 /* desktop nav: shown >=1080 */
.mr-burger{display:grid}              /* burger: shown <1080 */
.mr-book{display:none}                /* Book button: shown >=540 */
.mr-tagline{display:none}             /* logo tagline: shown >=420 */
.mr-phone{display:none}               /* header phone: shown >=1280 */

@media (min-width:420px){ .mr-tagline{display:block} }
@media (min-width:540px){ .mr-book{display:inline-flex} }
@media (min-width:1080px){ .mr-nav{display:flex} .mr-burger{display:none} }
@media (min-width:1280px){ .mr-phone{display:flex} }

/* ── Mobile menu overlay ── */
.mr-menu{display:none}
.mr-menu.is-open{display:flex}

/* ── County town directory ──
   Desktop: newspaper columns. Mobile: rows flow into horizontal, swipeable columns
   (scroll right-to-left) instead of one endless vertical list. */
.mr-towns{margin:0; padding:0; list-style:none; columns:5 150px; column-gap:30px}
.mr-towns li{break-inside:avoid; display:flex; align-items:center; gap:9px; padding:4.5px 0; font-size:14.5px; color:#25395A; white-space:nowrap}
.mr-towns li::before{content:""; width:5px; height:5px; border-radius:50%; background:#E8862A; flex:none}
.mr-towns-hint{display:none}
@media (max-width:719px){
  .mr-towns{columns:auto; display:grid; grid-auto-flow:column; grid-template-rows:repeat(10, auto); grid-auto-columns:max-content; gap:2px 28px; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .mr-towns li{scroll-snap-align:start}
  .mr-towns-hint{display:flex; align-items:center; gap:7px; margin:10px 0 0; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:#7A87A0}
}

/* ── "Familiar faces" models gallery ──
   Cards equal height; captions on a single line (long names shrink slightly to fit),
   so no card is taller than the rest. On small screens names may wrap — a reserved
   min-height keeps the row of cards level. */
.mr-models-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px}
.mr-model-card{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .2s, box-shadow .2s}
.mr-model-cap{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:-0.015em; color:#0C1D36; text-align:center; white-space:nowrap}
.mr-models-hint{display:none}
/* Tablet & smaller: a single horizontal, swipeable row instead of stacked cards. */
@media (max-width:900px){
  .mr-models-grid{grid-template-columns:none; display:flex; overflow-x:auto; gap:14px; padding-bottom:14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
  .mr-model-card{flex:0 0 clamp(168px, 60vw, 216px); scroll-snap-align:start}
  .mr-model-cap{white-space:normal}
  .mr-models-hint{display:flex; align-items:center; gap:7px; margin:10px 0 0; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:#7A87A0}
}

/* ── Stats band (26 / 24h / 7 / 1yr) ──
   Fixed-width number column so every description lines up regardless of digit width.
   4-up on desktop, 2×2 on tablet, a tidy divided single column on mobile. */
.mr-stats{grid-template-columns:repeat(4, 1fr)}
.mr-stat-num{flex:0 0 78px}
.mr-desc-short{display:none}
@media (max-width:900px){
  .mr-stats{grid-template-columns:1fr 1fr; gap:22px 28px}
}
/* Mobile: keep a 2×2 grid but swap to short labels so they don't crowd */
@media (max-width:520px){
  .mr-stats{grid-template-columns:1fr 1fr; gap:24px 14px}
  .mr-stat{gap:11px}
  .mr-stat-num{flex:0 0 auto}
  .mr-desc-full{display:none}
  .mr-desc-short{display:inline}
}

/* About-us dark stats card (number stacked above label): 4-up desktop, 2×2 tablet & mobile */
.mr-abstats{grid-template-columns:repeat(4, 1fr)}
@media (max-width:900px){
  .mr-abstats{grid-template-columns:1fr 1fr}
}
/* Mobile: less padding + smaller numbers so multi-word stats ("All brands") don't crowd */
@media (max-width:520px){
  .mr-abstats{padding:22px 18px !important; gap:20px 16px !important}
  .mr-abstat-num{font-size:26px !important}
}

/* CTA button pairs → full-width stacked on mobile: bigger tap targets, no ragged wrap */
@media (max-width:520px){
  .mr-cta{flex-direction:column; align-items:stretch}
  .mr-cta > a, .mr-cta > button{width:100%; justify-content:center}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
}