*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The page itself never scrolls sideways (swipe rows like Services scroll inside their own box).
   hidden = fallback for older Safari; clip keeps position: sticky working where supported. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
main, .site-footer { max-width: 100%; overflow-x: clip; }
/* Horizontal swipe rows must contain their absolutely positioned children, otherwise those children
   escape the row's clipping and phone browsers widen the whole page to fit them. */
.svc__grid, .smp__tabs, .rev__track { position: relative; }
body {
  margin: 0;
  font-family: var(--msp-font);
  font-size: var(--msp-fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--msp-text);
  background: var(--msp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-menu-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; line-height: 1.1; color: var(--msp-secondary); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: calc(var(--msp-container) + 2 * var(--msp-gutter));
  margin-inline: auto;
  padding-inline: var(--msp-gutter);
}
.visually-hidden {
  position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  /* top/left pinned: with auto offsets these 1px labels sit at their in-flow spot, and inside a
     scrolled swipe row that spot can be thousands of px to the right, widening the page on phones. */
}
.icon { width: 1.25em; height: 1.25em; flex: none; }
.nowrap { white-space: nowrap; } /* keeps hyphenated terms like "Permit-Ready" on one line */

/* Focus: navy ring on light surfaces, green ring on dark ones. */
:focus-visible { outline: 3px solid var(--msp-secondary); outline-offset: 3px; }
.site-header :focus-visible, .mobile-menu :focus-visible, .hero :focus-visible,
.site-footer :focus-visible, .is-dark :focus-visible { outline-color: var(--msp-primary); }
.hero-quote :focus-visible { outline-color: var(--msp-secondary); }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 20px; border-radius: var(--msp-radius-pill);
  background: var(--msp-primary); color: var(--msp-secondary); font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Pages without a hero get a solid header and room beneath it. */
body[data-header="solid"] main { padding-top: var(--msp-header-h); }

/* "Not designed yet" placeholder page */
.not-designed { min-height: 70vh; display: grid; align-items: center; background: var(--msp-surface); }
.not-designed__inner { padding-block: clamp(64px, 10vw, 140px); }
.not-designed__title { margin-top: 18px; font-size: var(--msp-fs-h2-alt); max-width: 18ch; }
.not-designed__path { margin-top: 18px; color: var(--msp-muted); }
.not-designed__path code { padding: 4px 10px; border-radius: 8px; background: var(--msp-surface-2); color: var(--msp-secondary); }
.not-designed__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }