/* ============================================================================
   perf.css — Performance optimizations

   - content-visibility: auto on below-fold sections
   - contain: layout/style/paint for independent components
   - print styles
   - prefers-contrast support
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Content Visibility — skip rendering of below-fold sections.
   contain-intrinsic-size provides a placeholder size to prevent layout shift.
   --------------------------------------------------------------------------- */

.trust-strip {
  content-visibility: auto;
  contain-intrinsic-size: auto 82px;
}

.services-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

.approach-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.contact-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* Kept on the static footer bar: it contains no animated children, and
   removing it changes the rendered height under the footer's containment. */
.footer-bottom {
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
}

/* ---------------------------------------------------------------------------
   CSS Contain — isolate layout, style and paint so internal changes
   cannot affect surrounding layout.
   --------------------------------------------------------------------------- */

.service-card,
.approach-art,
.contact-form {
  contain: layout style paint;
}

.contact-details {
  contain: layout style;
}

/* ---------------------------------------------------------------------------
   Print Styles — clean, minimal output
   --------------------------------------------------------------------------- */

@media print {
  .site-header,
  .menu-toggle,
  [data-theme-toggle],
  .hero-visual,
  .hero-grid,
  .hero-bottom,
  .hero-note,
  .visual-orbit,
  .visual-label,
  .contact-glow,
  .contact-map,
  .map-link,
  .approach-art:before,
  .art-caption,
  .eyebrow-dot,
  .eyebrow-line,
  .note-line,
  .service-icon,
  .footer-main nav {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  .hero,
  .services-section,
  .approach-section,
  .contact-section,
  .site-footer,
  .trust-strip {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
  }

  .hero h1,
  .section-heading h2,
  .approach-copy h2,
  .contact-copy h2 {
    color: #000 !important;
    font-size: 24pt;
  }

  .hero h1 span,
  .section-heading h2 span,
  .approach-copy h2 span,
  .contact-copy h2 span,
  .eyebrow,
  .eyebrow-dark {
    color: #000 !important;
  }

  .button,
  .nav-cta {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }

  .service-card {
    break-inside: avoid;
    border-color: #ccc !important;
  }

  .contact-form {
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  .container {
    width: 100% !important;
  }

  .section,
  .approach-section,
  .contact-section {
    padding: 20px 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Prefers Contrast — strengthen borders and muted text
   --------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --border: #999;
    --border-strong: #666;
    --text-muted: #444;
    --text-subtle: #555;
  }

  .service-card {
    border-right-width: 2px;
  }

  .button-outline {
    border-width: 2px;
  }
}