/* Shared geometry across routes. Keep purpose-specific compositions in their
   own files; comparable two-column sections use the same centre and gutter. */
.preview-bar {
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
}
button.text-link { padding: 0; text-align: left; }
.text-link .icon, .button .icon { flex-shrink: 0; }
.actions > .text-link { min-height: 52px; padding-block: 0; }
.button:hover { transform: none; }
.section-intro .lead { padding-top: 0; }
.footer-top .actions { gap: 12px 24px; }
.store-entry { display: flex; flex-direction: column; }
.store-info { display: flex; flex-direction: column; flex: 1; }
.store-actions { margin-top: auto; padding-top: 22px; }
.contact-details > div { flex: 1; }
.contact-location-link { margin-top: 20px; }
/* Partner marks need a shared optical slot: their source files have different
   aspect ratios and amounts of transparent padding. */
.partner-track { gap: 16px; }
.partner-track img,
.partner-track img.wide,
.partner-track img.glyph,
.partner-track img.word {
  flex: 0 0 112px;
  width: 112px;
  height: 30px;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1) contrast(.82);
  opacity: .78;
}
.partner-track img.word {
  height: 30px;
  object-fit: contain;
  transform: scale(2.15);
}
.partner-window:hover .partner-track {
  animation-play-state: running;
}
.partner-window:focus-within .partner-track { animation-play-state: paused; }
.footer:not(:has(.footer-top)) .footer-details { padding-top: 0; }
.footer-brand p { max-width: 32ch; }
.visit-help { position: relative; }
.visit-help::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.visit-help > div { border-top: 0; padding-top: 0; }
@media(min-width:601px) {
  .footer-details > div:not(.footer-brand) h3 { min-height: 42px; }
}
@media(min-width:961px) {
  .section-intro, .msp-service-section .section-intro,
  .services-layout, .local-layout, .page-split,
  .internet-hero .page-split, .contact-layout, .faq-layout,
  .msp-topic-panel, .msp-start-layout, .store-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: clamp(40px,4.45vw,64px);
  }
  .services-layout, .local-layout { align-items: start; }
  .section-intro { margin-bottom: 40px; }
  .service-table { margin-top: 0; }
  .msp-start-layout { align-items: start; }
  .footer-top .actions { flex-wrap: nowrap; }
}
@media(min-width:601px) and (max-width:960px) {
  .footer-top .actions { flex-direction: row; align-items: center; }
  .contact-details { display: grid; grid-template-columns: 1fr 1fr; }
  .msp-topic-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media(max-width:600px) {
  .actions > .text-link { min-height: 44px; }
  /* 18px of real air, matching the hero. The link's 44px touch target is a centred pseudo-element
     rather than min-height, so this gap is optical rather than 14px larger than it reads. */
  .footer-top .actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-top .actions .text-link { min-height: 0; position: relative; }
  .footer-top .actions .text-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
  .store-actions { padding-top: 20px; }
  .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .contact-details > div { min-width: 0; }
  .service-table { margin-top: 0; }
}

/* Footer utility links: remote support and the three policies (carried over from the
   WordPress site on 28 Sep 2026). Wrap onto a second line on narrow screens rather than squeeze. */
.footer-bottom .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom .footer-links a { color: inherit; }
@media (max-width: 600px) { .footer-bottom .footer-links { gap: 10px 18px; } }

/* Phone: the link under a full-width button becomes a matching outlined button. A bare link could
   either line up with the button's label (and then sit off the page's text edge) or with the text
   edge (and then sit off the label); the owner found both looked wrong. Two stacked buttons of the
   same width, height and inner padding line up with each other and the page by construction.
   Owner-reported 28 Sep 2026. */
@media (max-width: 600px) {
  .hero .actions, .footer-top .actions, .msp-story-copy .actions { gap: 12px; }
  .footer-top .actions .button { width: 100%; justify-content: space-between; }
  .hero .actions .text-link, .page-hero .actions .text-link,
  .footer-top .actions .text-link, .msp-story-copy .actions .text-link {
    width: 100%; min-height: 52px; padding: 13px 22px 13px 8px; justify-content: space-between;
    border: 1px solid #b9ccd4; border-radius: var(--radius); font-size: 15px; color: var(--deep);
  }
}

/* Repairs testimonials: two quotes stacked in one quote-row, the same pattern as the homepage. */
.repairs-quotes .quote-row { margin-top: 0; }
.quote-stack blockquote + blockquote { margin-top: 36px; }
.locations-area { margin-top: 14px; color: var(--muted); max-width: 46ch; }

/* Phone footer: the two shops side by side instead of four stacked blocks. */
@media (max-width: 600px) {
  .footer-details { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .footer-details > .footer-brand, .footer-details > div:last-child { grid-column: 1 / -1; }
  .quote-stack blockquote + blockquote { margin-top: 28px; }
}