/* Navy frames the site, soft-blue panels add depth, and MoistureX
   remains the strongest color feature within the content. */
body.site-light {
  --page-bg: #f7f9fc;
  --panel-bg: #e7eef8;
  --panel-bg-strong: #dce6f3;
  --off-white: var(--page-bg);
  --ink-muted: #52637d;
  --ink-accent: #3d5f91;
  --rule-color: #ccd6e4;
  background: var(--page-bg);
}

.site-light .site-nav {
  background: var(--navy);
  border-bottom: 1px solid #3b4a66;
}
.site-light .nav-inner { max-width: 1120px; height: 80px; gap: 24px; }
/* Scale the approved lettering separately: a clearer name, the same compact header. */
.site-light .nav-logo { flex: 0 1 262px; min-width: 0; gap: 12px; }
.site-light .nav-brand-mark { display: block; flex: 0 0 60px; width: 60px; height: auto; }
.site-light .nav-brand-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 190px;
  flex-direction: column;
  gap: 5px;
}
.site-light .nav-brand-wordmark { display: block; width: 100%; height: auto; }
.site-light .nav-brand-descriptor {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #b4c6e4;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-light .nav-brand-descriptor::before,
.site-light .nav-brand-descriptor::after {
  content: "";
  flex: 1 0 8px;
  height: 1px;
  background: #8fa9d6;
}
.site-light .nav-links a { color: #d0daea; }
.site-light .nav-links a:hover,
.site-light .nav-links a.active { color: var(--white); background: #293750; }
.site-light .nav-links a.nav-cta {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--steel);
}
.site-light .nav-links a.nav-cta:hover { border-color: var(--white); }
.site-light .nav-hamburger { flex: 0 0 44px; width: 44px; min-height: 44px; padding-inline: 8px; }
.site-light .nav-hamburger span { background: var(--white); }
.site-light .nav-mobile { background: var(--navy); border-color: #3b4a66; }
.site-light .nav-mobile a { color: #d0daea; border-color: #3b4a66; }
.site-light .nav-mobile a:hover { color: var(--white); }
.site-light .nav-mobile .mobile-cta { background: transparent; color: var(--white); border: 1px solid var(--steel); }
.site-light .footer-logo__img { display: block; width: 60px; max-width: 100%; height: auto; margin-bottom: 18px; }

/* One continuous canvas; content, photography and fine rules define sections. */
.site-light main > :is(section, .area-strip, .final-cta) { background: var(--page-bg); }
.site-light .roof-rule { display: none; }
.site-light main :is(h1, h2, h3, h4, .serve-card__title, .why-principle__heading, .rvr-card__title) {
  color: var(--navy);
}
.site-light main :is(p, .start-phone, .talk-phone, .cta-phone, .sidebar-step__text) {
  color: var(--ink-muted);
}
.site-light main :is(.t-eyebrow, .owner-card__role, .contact-info-card__label,
  .sidebar-card__eyebrow, .area-strip__label, .compare-card__label, .rvr-note__label,
  .profile-placeholder__label, .step-card__num, .process-card__num,
  .why-card__index, .how-step__num, .profile-field__num, .sidebar-step__num) {
  color: var(--ink-accent);
}
.site-light main .t-eyebrow { font-size: 0.8125rem; }
.site-light main a:not(.btn) { color: var(--ink-accent); }
.site-light main :is(.hero__license, .page-hero__license) { font-size: 0.8125rem; }

.site-light main .btn { white-space: normal; line-height: 1.35; text-align: center; }
.site-light main :is(.btn--primary, .btn--navy, .btn--outline-white, .btn--outline-navy, .btn--outline-steel) {
  background: transparent;
  color: var(--navy);
  border-color: var(--ink-accent);
}
.site-light main .btn:hover { background: #e8eef6; color: var(--navy); border-color: var(--navy); }

/* A quiet base for content; selected panel treatments are applied below. */
.site-light main :is(.serve-card__head, .serve-card__body, .path-card, .service-card,
  .industry-card, .process-card, .step-card, .why-card, .why-principle, .diff-card,
  .doc-card, .storm-doc, .system-card, .approach-card, .owner-card, .cred-item,
  .scope-item, .credential-item, .concern, .restoration-item, .profile-field,
  .profile-placeholder__body, .talk-aside, .contact-info-card, .sidebar-card,
  .eval-form, .urgent-note, .form-delivery-note, .form-upload-area,
  .compare-card, .rvr-card__head, .rvr-card__list, .rvr-note,
  .systems-box__head, .systems-box__body, .not-box__head, .not-box__body) {
  background: transparent;
  border-color: var(--rule-color);
}
.site-light main :is(.tag, .county-tag, .talk-tag, .focus-tag, .sys-tag) {
  background: transparent;
  color: var(--ink-accent);
  border-color: var(--rule-color);
}
.site-light main :is(.service-card, .industry-card, .process-card, .path-card,
  .step-card, .why-card, .diff-card, .doc-card, .storm-doc) {
  border: 0;
  border-top: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 24px 0 0;
  transform: none;
}
.site-light main .process-card::after { display: none; }
.site-light main :is(.scope-item, .credential-item, .concern, .profile-field, .rvr-item) {
  border-color: var(--rule-color);
}
.site-light main :is(.scope-item, .credential-item, .concern, .profile-field, .cred-item, .restoration-item):hover {
  background: transparent;
  border-color: var(--ink-accent);
}
.site-light main :is(.profile-fields, .rvr-card__list, .rvr-card__head) { border-color: var(--rule-color); }
.site-light main .rvr-item__dot { background: var(--ink-accent); }
.site-light main :is(.talk-phone, .start-phone) a { color: var(--ink-accent); }
.site-light main .profile-placeholder p { opacity: 1; }
.site-light main .sidebar-card--dark { border-color: var(--rule-color); }
.site-light main .form-label span { color: var(--ink-muted); }
.site-light main :is(.form-input, .form-select, .form-textarea) {
  background-color: var(--page-bg);
  font-size: 1rem;
  border-color: #8d9eb5;
}
.site-light main :is(.form-input, .form-textarea)::placeholder { opacity: 1; }
.site-light main :is(.form-label, .contact-info-card__label, .sidebar-card__eyebrow) { font-size: 0.875rem; }

/* Home-page refinements. */
.site-light .cred-bar { border: 0; }
.site-light .cred-grid { background: transparent; border: 0; gap: 24px; }
.site-light .cred-grid .cred-item { padding: 20px 0; border-top: 1px solid var(--rule-color); }
.site-light .commercial-section::before { display: none; }
.site-light.page-home main > .commercial-section {
  position: relative;
  isolation: isolate;
  background: var(--page-bg);
}
.site-light.page-home .commercial-section::before {
  /* Keep the complete 4:3 scene at the left edge. Fade within its own bounds
     so there is no hard photo edge or centered panel on a wide screen. */
  content: '';
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  background-image: url("images/home/commercial-section.webp");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.site-light .commercial-inner { align-items: start; }
.site-light.page-home .commercial-mobile-photo { display: none; }
.site-light.page-home :is(.mx-visual, .residential-image) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.site-light .projects-section { border: 0; }

/* Contained color adds hierarchy without changing the background every section. */
.site-light main :is(.serve-card, .service-card, .path-card, .system-card,
  .approach-card, .owner-card, .contact-info-card, .sidebar-card, .talk-aside,
  .compare-card, .rvr-note, .profile-placeholder__body, .urgent-note,
  .form-delivery-note, .rvr-card__list, .systems-box__body) {
  background: var(--panel-bg);
}
.site-light main :is(.service-card, .path-card) {
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.site-light main :is(.scope-grid, .credentials-list, .cred-list, .concerns-list) {
  background: var(--panel-bg);
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.site-light main :is(.rvr-card__head, .systems-box__head, .not-box__head) {
  background: var(--panel-bg-strong);
}
.site-light main .serve-card--primary .serve-card__head { background: var(--panel-bg-strong); }
.site-light main .why-principle {
  background: var(--panel-bg);
  padding: 28px clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--steel);
  border-radius: var(--radius-md);
}
.site-light main :is(.start-inner, .mx-start-inner, .final-cta__inner) {
  background: var(--panel-bg-strong);
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-md);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 40px);
}
.site-light main .eval-form { background: var(--white); }

/* MoistureX is the one intentional color feature within the content. */
.site-light main .color-feature { background: var(--navy); color: var(--white); }
.site-light main .color-feature :is(h1, h2, h3, h4, .rvr-card__title) { color: var(--white); }
.site-light main .color-feature :is(p, .cta-phone) { color: #d0daea; }
.site-light main .color-feature :is(.t-eyebrow, .compare-card__label) { color: #b8c9e5; }
.site-light main .color-feature a:not(.btn) { color: #d0daea; }
.site-light main .color-feature .btn { background: transparent; color: var(--white); border-color: #8fa9d6; }
.site-light main .color-feature :is(.btn--primary, .btn--navy) { background: var(--white); color: var(--navy); border-color: var(--white); }
.site-light main .color-feature .btn:hover { background: #dce6f4; color: var(--navy); border-color: #dce6f4; }
.site-light main .color-feature :is(.restoration-cards, .restoration-item) { background: transparent; border-color: #4b5c7c; }
.site-light main .color-feature .restoration-item__dot { background: #8fa9d6; opacity: 1; }
.site-light main .compare-card.color-feature { border-color: var(--navy); }
.site-light .page-hero.color-feature .page-hero__inner { max-width: var(--max-w); }
.site-light main .mx-section.color-feature .mx-visual__label { color: var(--white); }

/* Original full-width photo-banner layout, with readable text overlays. */
.site-light main :is(.hero, .page-hero) {
  display: block;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--navy);
  overflow: hidden;
}
.site-light :is(.hero__photo, .page-hero__photo) {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.site-light :is(.hero__photo, .page-hero__photo) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
}
.site-light :is(.hero__photo, .page-hero__photo)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(28,38,67,0.92) 0%, rgba(28,38,67,0.84) 55%, rgba(28,38,67,0.68) 100%);
}
.site-light main :is(.hero, .page-hero) h1 { color: var(--white); }
.site-light main :is(.hero, .page-hero) :is(.hero__sub, .page-hero__sub, .hero__license, .page-hero__license) {
  color: #e7eef8;
}
.site-light main :is(.hero, .page-hero) .t-eyebrow { color: #cad6ea; }
.site-light main :is(.hero, .page-hero) .btn {
  background: transparent;
  color: var(--white);
  border-color: #cad6ea;
}
.site-light main :is(.hero, .page-hero) :is(.btn--primary, .btn--navy) {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.site-light main :is(.hero, .page-hero) .btn:hover {
  background: #dce6f4;
  color: var(--navy);
  border-color: #dce6f4;
}

/* Preserve the established dark footer as the end of the page. */
.site-light .site-footer { background: var(--navy); border: 0; }

/* Home review: clearer actions, fewer boxes, and consistent section spacing.
   Keep these scoped to Home while the other pages are being reviewed. */
.site-light.page-home .hero__service {
  color: #e7eef8;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 640px;
  margin-bottom: 18px;
}
.site-light.page-home .nav-links a.nav-cta,
.site-light.page-home .nav-mobile .mobile-cta {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.site-light.page-home .nav-links a.nav-cta:hover,
.site-light.page-home .nav-mobile .mobile-cta:hover {
  background: var(--panel-bg-strong);
  border-color: var(--panel-bg-strong);
}
.site-light.page-home main .start-cta-row .btn--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.site-light.page-home main .start-cta-row .btn--navy:hover {
  background: #293750;
  border-color: #293750;
}
.site-light.page-home .cred-bar { padding: 28px 0 0; }
.site-light.page-home :is(.serve-section, .commercial-section, .framework-section, .residential-section) {
  padding: clamp(56px, 6vw, 80px) 0;
}
.site-light.page-home :is(.serve-header, .framework-header) { margin-bottom: 32px; }
.site-light.page-home :is(.serve-header h2, .framework-header h2) { max-width: 760px; }
.site-light.page-home .serve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-light.page-home main .serve-card {
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.site-light.page-home main .serve-card--secondary { background: transparent; }
.site-light.page-home main .serve-card:hover {
  background: var(--panel-bg-strong);
  border-color: var(--ink-accent);
}
.site-light.page-home main .serve-card:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
}
.site-light.page-home main .serve-card__head {
  padding: 28px 28px 12px;
  background: transparent;
  border: 0;
}
.site-light.page-home .serve-card__title { font-size: 1.25rem; }
.site-light.page-home .serve-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 28px 28px;
}
.site-light.page-home .serve-card__link {
  margin-top: auto;
  color: var(--ink-accent);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-light.page-home main .path-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 24px 0 0;
}
.site-light.page-home .paths-grid { gap: 28px; }
.site-light.page-home :is(.serve-card__note, .concern p, .path-card p, .mx-attr p, .step-card p) {
  font-size: 1rem;
  line-height: 1.6;
}
.site-light.page-home .path-card__cta a { font-size: 1rem; }
.site-light.page-home .mx-content { padding-block: clamp(56px, 6vw, 80px); }
.site-light.page-home .why-section { padding: 0 0 clamp(56px, 6vw, 80px); }
.site-light.page-home .why-section > .wrap { padding-top: clamp(56px, 6vw, 80px); }
.site-light.page-home .why-header__intro { max-width: 440px; margin-block: 20px 28px; }
.site-light.page-home .why-grid { margin-bottom: 0; }
.site-light.page-home .start-section { padding-bottom: clamp(56px, 6vw, 80px); }
.site-light.page-home .start-inner > p { margin-bottom: 32px; }
.site-light.page-home .steps-row { margin-bottom: 32px; }

/* Commercial review: extend Home's readability and action hierarchy without
   changing the approved Home page or the other service pages. */
.site-light.page-commercial .section { padding: clamp(56px, 6vw, 80px) 0; }
.site-light.page-commercial .section-header { margin-bottom: 32px; }
.site-light.page-commercial :is(.scope-inner, .restoration-inner, .credentials-inner) { gap: 48px; }
.site-light.page-commercial :is(.services-grid, .scope-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-light.page-commercial :is(.service-card__intro, .scope-item p, .restoration-item p,
  .process-card p, .credential-item p, .btn-link, .cta-phone) {
  font-size: 1rem;
  line-height: 1.6;
}
.site-light.page-commercial .service-card__intro {
  font-weight: 400;
  padding-bottom: 16px;
  margin-bottom: 4px;
}
.site-light.page-commercial .service-card__list {
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 1.25rem;
  list-style: disc;
}
.site-light.page-commercial .service-card__list li + li { margin-top: 6px; }
.site-light.page-commercial .service-card__list li::marker { color: var(--ink-accent); }
.site-light.page-commercial .industries-grid { list-style: none; padding: 0; margin: 0; }
.site-light.page-commercial main .industry-card {
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 20px 0;
}
.site-light.page-commercial .commercial-start { padding: 0 24px clamp(56px, 6vw, 80px); }
.site-light.page-commercial .start-inner > p { margin-bottom: 28px; }
.site-light.page-commercial .nav-links a.nav-cta,
.site-light.page-commercial .nav-mobile .mobile-cta {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.site-light.page-commercial .nav-links a.nav-cta:hover,
.site-light.page-commercial .nav-mobile .mobile-cta:hover {
  background: var(--panel-bg-strong);
  border-color: var(--panel-bg-strong);
}
.site-light.page-commercial main :is(.scope-left, .start-cta-row) .btn--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.site-light.page-commercial main :is(.scope-left, .start-cta-row) .btn--navy:hover {
  background: #293750;
  border-color: #293750;
}

@media (max-width: 1240px) {
  .site-light .nav-inner > nav { display: none; }
  .site-light .nav-hamburger { display: flex; }
  .site-light .nav-mobile {
    /* Keep every link reachable on short screens and in phone landscape. */
    max-height: calc(100vh - 81px);
    max-height: calc(100dvh - 81px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}
@media (min-width: 1240.01px) {
  .site-light .nav-mobile.is-open { display: none; }
}
@media (max-width: 860px) {
  .site-light.page-home .serve-grid { grid-template-columns: 1fr; }
  .site-light.page-commercial :is(.services-grid, .scope-grid) { grid-template-columns: 1fr; }
  .site-light :is(.hero__photo, .page-hero__photo)::after {
    background: rgba(28,38,67,0.84);
  }
}
@media (max-width: 640px) {
  .site-light .nav-inner { padding-inline: 16px; gap: 12px; }
  .site-light .nav-logo { flex-basis: 248px; gap: 10px; }
  .site-light .nav-brand-mark { flex-basis: 48px; width: 48px; }
  .site-light .nav-brand-copy { gap: 4px; }
  .site-light .nav-brand-descriptor { font-size: 0.625rem; letter-spacing: 0.08em; }
  .site-light main .btn { max-width: 100%; }
}

/* Mobile photo review: keep each wide scene readable and with its own heading.
   Desktop compositions above 860px retain their approved layout and overlays. */
@media (max-width: 860px) {
  .site-light.page-home .commercial-section::before { display: none; }
  .site-light.page-home .commercial-mobile-photo {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 24px auto;
    border-radius: var(--radius-md);
  }
  .site-light.page-home .commercial-inner { gap: 32px; }

  /* Flow the existing image between its heading and supporting content.
     Only the non-semantic layout wrappers are flattened; no duplicate photos. */
  .site-light.page-home :is(.mx-inner, .residential-inner) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }
  .site-light.page-home .mx-inner { padding: 56px 24px; }
  .site-light.page-home :is(.mx-content, .residential-content) { display: contents; }
  .site-light.page-home :is(.mx-content, .residential-content) > :is(.t-eyebrow, h2) { order: 0; }
  .site-light.page-home :is(.mx-visual, .residential-image) {
    order: 1;
    align-self: center;
    width: 100%;
    max-width: 560px;
    min-height: 0;
    aspect-ratio: auto;
    margin: 8px 0 24px;
    border-radius: var(--radius-md);
  }
  .site-light.page-home :is(.mx-visual, .residential-image) > img { height: auto; }
  .site-light.page-home :is(.mx-content, .residential-content) > p { order: 2; }
  .site-light.page-home .mx-attrs { order: 3; }
  .site-light.page-home :is(.mx-content, .residential-content) > .btn-group { order: 4; }

  /* Keep the text overlay, but size the photo independently of the tall
     mobile copy so the house stays wide and fades seamlessly into navy. */
  .site-light.page-residential .page-hero__photo {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(300px, 84vw, 480px);
  }
  .site-light.page-residential .page-hero__photo img {
    height: 100%;
    object-position: 54% center;
  }
  .site-light.page-residential .page-hero__photo::after {
    background: linear-gradient(180deg,
      rgba(28,38,67,0.64) 0%,
      rgba(28,38,67,0.66) 42%,
      rgba(28,38,67,0.86) 76%,
      var(--navy) 100%);
  }
  .site-light.page-residential .page-hero__inner { padding: 48px 24px 44px; }
}

/* Finishing pass: legible contact and licensing information on the navy footer. */
.site-light .site-footer { color: #c9d4e6; }
.site-light .footer-license,
.site-light .footer-bottom { color: #b4c3da; font-size: 0.875rem; }
.site-light .footer-col h4,
.site-light .footer-contact-item span { color: #dce5f3; font-size: 0.875rem; }
.site-light .footer-col ul a,
.site-light .footer-contact-item a,
.site-light .footer-contact-item p { color: #c9d4e6; font-size: 0.9375rem; }
.site-light .footer-col ul a:hover,
.site-light .footer-contact-item a:hover { color: #fff; }
.site-light .footer-top { border-bottom-color: #43516e; }
.site-light .footer-bottom { gap: 12px 24px; }
.site-light .footer-privacy { color: #e1e9f6; text-underline-offset: 3px; }
.site-light .footer-privacy:hover { color: #fff; }
.site-light.page-contact main .form-privacy { font-size: 0.875rem; line-height: 1.6; margin: 0 0 16px; }
.site-light.page-contact main .form-privacy a { text-decoration: underline; text-underline-offset: 3px; }

/* A quiet, readable notice using the site's existing typography and frame. */
.site-light.page-privacy .nav-links a.nav-cta,
.site-light.page-privacy .nav-mobile .mobile-cta { background: #fff; color: var(--navy); border-color: #fff; }
.privacy-main { padding: clamp(48px, 6vw, 80px) 24px; }
.privacy-document { max-width: 820px; margin-inline: auto; }
.privacy-intro { padding-bottom: 32px; border-bottom: 1px solid var(--rule-color); }
.privacy-intro h1 { margin-bottom: 16px; }
.site-light.page-privacy main .privacy-date { font-size: 0.875rem; margin-bottom: 24px; }
.privacy-document section { margin-top: 36px; }
.privacy-document section h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin-bottom: 14px; }
.privacy-document p + p { margin-top: 14px; }
.privacy-document a { text-underline-offset: 3px; overflow-wrap: anywhere; }