@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");

/*
 * Shared type and spacing rhythm.
 * Page and family styles still own color, imagery and layout; this file only
 * makes the reading experience consistent from one page to the next.
 */
:root {
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rhythm-section: clamp(76px, 7.5vw, 104px);
  --rhythm-section-mobile: 64px;
  --rhythm-copy: 1.68;
  --rhythm-copy-size: 17px;
  --rhythm-card-pad: clamp(26px, 3vw, 36px);
}

body.home-page,
body.interior-page,
body.homepage-concept {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

/* One typographic and interaction system across every page family. */
:is(body.home-page, body.interior-page, body.homepage-concept) main h1 {
  color: #14181d;
}

:is(body.home-page, body.interior-page, body.homepage-concept) main h2 {
  color: #173852;
}

:is(body.home-page, body.interior-page, body.homepage-concept) main :is(
  .button,
  .button-blue,
  .live-service-cta,
  .fe-inline-cta,
  .service-inline-button,
  .home-featured-button
) {
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid #173852;
  border-radius: 4px;
  background: #173852;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
}

/* Page-specific and visited-link rules must never darken primary CTA copy. */
:is(body.home-page, body.interior-page, body.homepage-concept) main :is(
  .button,
  .button-blue,
  .live-service-cta,
  .fe-inline-cta,
  .service-inline-button,
  .home-featured-button
):is(:link, :visited, :hover, :focus, :focus-visible, :active) {
  color: #fff !important;
  text-decoration: none;
}

:is(body.home-page, body.interior-page, body.homepage-concept) main :is(
  .button,
  .button-blue,
  .live-service-cta,
  .fe-inline-cta,
  .service-inline-button,
  .home-featured-button
):hover,
:is(body.home-page, body.interior-page, body.homepage-concept) main :is(
  .button,
  .button-blue,
  .live-service-cta,
  .fe-inline-cta,
  .service-inline-button,
  .home-featured-button
):focus-visible {
  border-color: #1767ad;
  background: #1767ad;
  color: #fff;
}

:is(body.home-page, body.interior-page, body.homepage-concept) main :is(
  .home-featured-link,
  .story-link,
  .related-link,
  .text-link
) {
  color: #1767ad;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(23, 103, 173, .4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* This homepage link already has a full-width component rule. Keep that single
   rule instead of stacking the global text underline on top of it. */
body.home-page main .home-featured-link {
  color: #202b34;
  text-decoration: none;
}

body.home-page main .home-featured-link:hover,
body.home-page main .home-featured-link:focus-visible {
  color: #202b34;
}

/* The dark service bands use an inverse version of the same primary action.
   Geometry and type remain identical so the system still reads as one family. */
:is(body.home-page, body.interior-page, body.homepage-concept) main :is(
  .service-cta-button,
  .lb-cta-button,
  .rw-cta-button,
  .bd-cta-button,
  .pd-cta-button,
  .rd-cta-button
) {
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #fff;
  color: #173852;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
}

:is(body.home-page, body.interior-page, body.homepage-concept)
  :is(button, input, select, textarea) {
  font-family: inherit;
}

:is(body.home-page, body.interior-page, body.homepage-concept)
  main :is(h1, h2, h3, h4) {
  font-family: var(--font-sans);
  text-wrap: balance;
}

:is(body.home-page, body.interior-page, body.homepage-concept)
  main :is(p, li) {
  text-wrap: pretty;
}

/* Keep primary reading copy at one comfortable size without enlarging labels,
   captions, navigation or compact supporting cards. */
.interior-page main :is(
  .hero-text,
  .hero-sub,
  .hero-lead,
  .hero-intro > p,
  .utility-hero-copy > p,
  .profile-copy > p,
  .practice-copy > p,
  .credentials-copy > p,
  .triggers-intro,
  .scope-copy > p:not(.eyebrow),
  .outside-copy > p:not(.eyebrow),
  .report-head > p,
  .limits p,
  .premise-copy > p,
  .comparison-copy > p,
  .analysis-copy > p,
  .advisory-copy > p,
  .draft-section p,
  .lb-copy-section > p,
  .rw-copy-section > p,
  .pd-credentials-copy > p,
  .rd-intro-copy > p,
  .rd-details-copy > p,
  .bd-experience-copy > p,
  .fe-intro-copy > p,
  .fe-detail-copy > p
) {
  font-size: var(--rhythm-copy-size);
  line-height: var(--rhythm-copy);
}

/* One section cadence for the long-form interior pages. Exceptions are the
   hero/title, inset notice panels and the shared closing CTA. */
.interior-page main > section:not(.hero):not(.inspection-hero):not(.utility-hero):not(.lb-title-section):not(.rw-title-section):not(.pd-title-section):not(.rd-title-section):not(.bd-title-section):not(.fe-title-section):not(.limits):not(.shared-closing-cta) {
  padding-top: var(--rhythm-section);
  padding-bottom: var(--rhythm-section);
}

.interior-page main > :is(
  .lb-title-section,
  .rw-title-section,
  .pd-title-section,
  .rd-title-section,
  .bd-title-section,
  .fe-title-section
) {
  padding-top: clamp(58px, 6vw, 76px);
}

.interior-page main > :is(.hero, .inspection-hero) {
  padding-top: clamp(54px, 6vw, 82px);
  padding-bottom: clamp(56px, 6vw, 76px);
}

.interior-page main :is(.display, [class$="-title-section"] h1) {
  font-family: var(--font-sans) !important;
  letter-spacing: -.04em;
  line-height: .98;
}

.interior-page main :is(.section-title, h2) {
  letter-spacing: -.032em;
  line-height: 1.05;
}

.interior-page main :is(.faq-list, .review-grid, .technical-grid, .details-grid) {
  scroll-margin-top: calc(var(--nav-height, 80px) + 24px);
}

.interior-page main :is(.trigger-list article, .report-grid article, .detail-card, .review-card) {
  padding: var(--rhythm-card-pad);
}

.interior-page main details summary {
  padding-top: 24px;
  padding-bottom: 24px;
  line-height: 1.35;
}

.site-footer-standard,
.shared-closing-cta {
  font-family: var(--font-sans);
}

.site-footer-standard .footer-columns {
  padding-top: clamp(48px, 5vw, 62px);
  padding-bottom: clamp(48px, 5vw, 62px);
}

.site-footer-standard .footer-links {
  line-height: 1.5;
}

/* The homepage uses the same type voice while retaining its bento composition. */
.home-page main :is(.hero h1, .independence h2, .reviews-heading h2) {
  font-family: var(--font-sans);
}

.home-page main :is(.hero-lede, .independence-copy p) {
  font-size: var(--rhythm-copy-size);
  line-height: var(--rhythm-copy);
}

/* Customer proof uses one quiet card treatment throughout the site. The
   quotation is the message; it does not need a second marketing headline. */
.interior-page main :is(
  .testimonial,
  .about-proof,
  .inspection-proof,
  .wall-proof,
  .foundation-proof,
  .basement-proof,
  .report-proof,
  .second-proof
) {
  background: var(--color-paper) !important;
  color: var(--color-ink) !important;
}

.interior-page main :is(
  .testimonial-grid,
  .about-proof-grid,
  .inspection-proof-grid,
  .wall-proof-grid,
  .foundation-proof-grid,
  .basement-proof-grid,
  .report-proof-grid,
  .second-proof-grid
) {
  display: block !important;
}

.interior-page main :is(
  .testimonial-grid > blockquote,
  .about-proof-grid > figure,
  .inspection-proof-grid > figure,
  .wall-proof-grid > figure,
  .foundation-proof-grid > figure,
  .basement-proof-grid > figure,
  .report-proof-grid > figure,
  .second-proof-grid > figure
) {
  width: min(920px, 100%);
  margin: 0 auto !important;
  padding: clamp(30px, 4vw, 48px) !important;
  border: 1px solid var(--color-hairline) !important;
  border-top: 4px solid var(--color-blue-light) !important;
  border-left-width: 1px !important;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(17, 41, 67, .08);
}

.interior-page main :is(
  .testimonial-grid blockquote,
  .about-proof-grid blockquote,
  .inspection-proof-grid blockquote,
  .wall-proof-grid blockquote,
  .foundation-proof-grid blockquote,
  .basement-proof-grid blockquote,
  .report-proof-grid blockquote,
  .second-proof-grid blockquote
) {
  max-width: none !important;
  margin: 0 !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(18px, 2vw, 23px) !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  line-height: 1.5 !important;
}

.interior-page main .testimonial-grid blockquote > p {
  max-width: none !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.interior-page main :is(
  .testimonial-grid blockquote footer,
  .about-proof-grid figcaption,
  .inspection-proof-grid figcaption,
  .wall-proof-grid figcaption,
  .foundation-proof-grid figcaption,
  .basement-proof-grid figcaption,
  .report-proof-grid figcaption,
  .second-proof-grid figcaption
) {
  margin-top: 24px !important;
  color: var(--color-body) !important;
  font-size: 14px !important;
  font-weight: 600;
}

.interior-page main :is(
  .testimonial-grid blockquote a,
  .about-proof-grid figure > a,
  .inspection-proof-grid figure > a,
  .wall-proof-grid figure > a,
  .foundation-proof-grid figure > a,
  .basement-proof-grid figure > a,
  .report-proof-grid figure > a,
  .second-proof-grid figure > a
) {
  display: inline-block;
  margin-top: 24px !important;
  color: var(--color-blue) !important;
  font-size: 13px !important;
  font-weight: 700;
}

@media (max-width: 700px) {
  :root {
    --rhythm-copy-size: 16px;
    --rhythm-card-pad: 26px;
  }

  .interior-page main > section:not(.hero):not(.inspection-hero):not(.utility-hero):not(.lb-title-section):not(.rw-title-section):not(.pd-title-section):not(.rd-title-section):not(.bd-title-section):not(.fe-title-section):not(.limits):not(.shared-closing-cta) {
    padding-top: var(--rhythm-section-mobile);
    padding-bottom: var(--rhythm-section-mobile);
  }

  .interior-page main > :is(
    .lb-title-section,
    .rw-title-section,
    .pd-title-section,
    .rd-title-section,
    .bd-title-section,
    .fe-title-section
  ) {
    padding-top: 46px;
  }

  .interior-page main > :is(.hero, .inspection-hero) {
    padding-top: 42px;
    padding-bottom: 52px;
  }

  .interior-page main :is(.display, [class$="-title-section"] h1) {
    font-size: clamp(40px, 11.5vw, 48px) !important;
    line-height: .98 !important;
  }

  .interior-page main :is(.section-title, h2) {
    line-height: 1.08;
  }

  .site-footer-standard .footer-brand-row {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .site-footer-standard .footer-columns {
    padding-top: 42px;
    padding-bottom: 42px;
  }
}
