*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--coral-500); text-decoration: none; }
a:hover { color: var(--coral-600); }

img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  margin: 0;
}

section.qrs-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
section.qrs-reveal.qrs-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  section.qrs-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --space-12: 36px;
    --space-16: 48px;
    --text-display-1: 2.375rem;
    --text-display-2: 1.875rem;
    --text-h1: 1.75rem;
    --text-h2: 1.375rem;
  }
  .qs-desktop-nav { display: none !important; }
  .qs-mobile-burger { display: flex !important; }
  .qs-footer-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .qs-footer-grid > div { padding: var(--space-6) 0; }
  .qs-footer-grid > div:first-child { padding-top: 0; }
  .qs-footer-grid > div:not(:first-child) { border-top: 1px solid var(--border-subtle); }
  /* Stacked footer links otherwise sit edge-to-edge (padding-only spacing,
     no gap between adjacent boxes), which Lighthouse's mobile tap-target
     audit flags as overlapping targets. A small margin gives each link its
     own untouched hit area. */
  .qs-footer-grid a { margin-bottom: 4px; }
  .qs-footer__mobile-label { display: block !important; }
  .qs-footer__koi { display: none; }
  .qs-footer__brand { align-items: center !important; text-align: center; gap: var(--space-6) !important; }
  .qs-footer__socials { justify-content: center; margin-left: 0 !important; }
  .qs-prose-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .qs-prose-subnav {
    position: static !important; border-left: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding-left: 0 !important; padding-bottom: var(--space-4) !important;
    flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important;
  }
  .qs-split-grid, .qs-intro-grid, .qs-cta-band-grid, .qs-two-col-grid, .qs-pricing-info__grid {
    grid-template-columns: 1fr !important; gap: var(--space-8) !important;
  }
  /* Photos use an inline aspect-ratio, and several ratios in use (4/4.6,
     4/4.2, 3/4) are tall enough to swallow most of a mobile screen once
     the split layout above collapses to one column. Pin both width and
     height to definite values (not aspect-ratio + max-height together,
     which - depending on the grid's align-items - can make the browser
     derive width from the constrained height instead of leaving width
     stretched, shrinking and left-aligning the box). object-fit:cover
     on the <img> handles the crop. */
  .qs-photo, .qs-placeholder { width: 100% !important; height: 240px !important; aspect-ratio: auto !important; }
  /* Some split-grid sections put the photo before the text in source
     order (for photo-left/photo-right alternation on desktop). Once
     collapsed to one column on mobile that can land a photo directly
     after another section's trailing photo, with only padding between
     them. Always render the photo after its own section's text. */
  .qs-split-grid > .qs-photo, .qs-split-grid > .qs-placeholder { order: 2; }
  .qs-hide-mobile { display: none !important; }
  /* Opt-in (via the intro block's bgPhotoMobile flag) for pages that want
     their intro photo used as the section background on mobile instead
     of a separate foreground image, with the section's own dark wash
     laid over it as a semi-opaque fill so the white heading/body text
     stays legible - desktop is completely unaffected. */
  .qs-intro-bgphoto-mobile {
    position: relative !important;
    background-image: var(--intro-bg-photo) !important; background-size: cover !important; background-position: center !important;
    background-image: var(--intro-bg-photo-webp) !important;
  }
  .qs-intro-bgphoto-mobile::before {
    content: ""; position: absolute; inset: 0; background: rgba(38, 30, 24, .68);
  }
  .qs-intro-bgphoto-mobile > div { position: relative; z-index: 1; }
  .qs-intro-bgphoto-mobile .qs-photo { display: none; }
  .qs-pricing-info__grid > div:last-child { padding-left: 0 !important; border-left: none !important; }
  .qs-services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-6) 12px !important; }
  .qs-services-grid > a:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}

@media (min-width: 769px) {
  .qs-desktop-nav { display: flex !important; }
  .qs-mobile-burger { display: none !important; }
}