/* SUMI v1.10.0 — coherent background COLOR system, not new imagery.
   Semantic color roles:
   1. paper/white = long-form text, data tables, and forms;
   2. mist = explaining a workflow, comparing options, FAQ;
   3. warm = real people and next-step calls to action;
   4. navy = unmistakable website footer (not a content section).
   Colors carry roles; alternating colors are not merely decorative.
   Preserve the approved HERO artwork and all prices/logic/typography. */
.sumi-root {
  --sumi-bg-paper: #FFFFFF;
  --sumi-bg-mist: #F1F5F3;
  --sumi-bg-warm: #F8F7F4;
  --sumi-bg-cta: #F8F6F2;
  --sumi-bg-human: #EFF3F0;
  --sumi-bg-ink: #203E53;
  --sumi-bg-footer-text: #F3F8F9;
  --sumi-bg-footer-muted: #D3E1E6;
  --sumi-bg-divider: #DAE4E1;
}

/* Site-wide rhythm: dense material is legible on paper; sections about process
   have a soft tint; trust and the final call-to-action gain subtle warmth. */
.sumi-root .sumi-home { background:var(--sumi-bg-paper); }
.sumi-root .sumi-v09-home-price {
  background:var(--sumi-bg-mist);
}
.sumi-root .sumi-v09-home-price::before { opacity:.15; }
.sumi-root .sumi-v10-home-services {
  background:var(--sumi-bg-paper);
}
.sumi-root .sumi-v07-home-flow {
  background:var(--sumi-bg-mist);
  border-color:var(--sumi-bg-divider);
}
.sumi-root .sumi-v08-home-operations {
  background:var(--sumi-bg-paper);
  border-color:var(--sumi-bg-divider);
}
.sumi-root .sumi-office--warm {
  background:var(--sumi-bg-human);
}
.sumi-root .sumi-office--warm::after { background:transparent; }
.sumi-root .sumi-v15-client-voice {
  background:var(--sumi-bg-mist);
}
.sumi-root .sumi-column {
  background:var(--sumi-bg-paper);
}

/* The one strong transition before footer is deliberate. Warm invitation stays
   low-key; deep footer marks the actual end of the page. */
.sumi-root .sumi-final-cta--warm,
.sumi-root .sumi-detail-contact-band {
  background:var(--sumi-bg-cta);
  border-color:transparent;
}
.sumi-root .sumi-final-cta--warm::before,
.sumi-root .sumi-detail-contact-band::before { opacity:0; }
.sumi-root .sumi-final-cta--warm h2,
.sumi-root .sumi-detail-contact-band h2 { color:#244B6B; }

/* Every subpage uses the same purpose-based colors, regardless of template.
   The HERO's original fine geometric atmosphere is intentionally untouched. */
.sumi-root .sumi-detail,
.sumi-root .sumi-page,
.sumi-root .sumi-detail-section--white { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail-section--tint,
.sumi-root .sumi-detail-section--muted { background:var(--sumi-bg-mist); }

/* Services: workflow -> detailed explanation -> optional work -> after signing -> fit. */
.sumi-root .sumi-detail--services #service-core,
.sumi-root .sumi-detail--services #service-options,
.sumi-root .sumi-detail--services #service-fit { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--services #service-detail,
.sumi-root .sumi-detail--services #service-responsibility { background:var(--sumi-bg-mist); }

/* Pricing: interactive estimator stays bright; detailed fee schedule is soft.
   Options and legal conditions never acquire arbitrary standout highlights. */
.sumi-root .sumi-detail--price #pack-estimator,
.sumi-root .sumi-detail--price #pack-options { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--price #pack-fee-table,
.sumi-root .sumi-detail--price #price-faq { background:var(--sumi-bg-mist); }
.sumi-root .sumi-detail--price #price-boundaries { background:var(--sumi-bg-warm); }
/* Comparison table itself is solid white, including its data region. */
.sumi-root .sumi-v19-compare__table,
.sumi-root .sumi-v19-compare__table tr { background:var(--sumi-bg-paper); }

/* Onboarding: sequential steps and ongoing roles gain separate surfaces. */
.sumi-root .sumi-detail--guide #guide-steps,
.sumi-root .sumi-detail--guide #guide-bookkeeping { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--guide #guide-operations,
.sumi-root .sumi-detail--guide #guide-faq { background:var(--sumi-bg-mist); }
.sumi-root .sumi-detail--guide #guide-communication { background:var(--sumi-bg-warm); }

/* About: editorial policy -> human profile -> factual office details. */
.sumi-root .sumi-detail--about #about-philosophy { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--about #about-professional { background:var(--sumi-bg-warm) !important; }
.sumi-root .sumi-detail--about #about-practice { background:var(--sumi-bg-mist); }

/* Contact: input and FAQs on white; post-submission steps on mist. */
.sumi-root .sumi-detail--contact #contact-form,
.sumi-root .sumi-detail--contact #contact-faq { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--contact #contact-process { background:var(--sumi-bg-mist); }
.sumi-root .sumi-detail--contact .sumi-detail-contact__form { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--contact .sumi-detail-contact__aside {
  background:var(--sumi-bg-warm); border-color:var(--sumi-bg-divider);
}
.sumi-root .sumi-detail--contact .sumi-detail-contact__policy { border-color:#D9E1DB; }

/* Journal: reading space is white; the supplemental guidance is softly tinted. */
.sumi-root .sumi-detail--column #column-articles { background:var(--sumi-bg-paper); }
.sumi-root .sumi-detail--column #column-information { background:var(--sumi-bg-mist); }

/* A true visual footer, not one more gray content block.
   Use high-contrast typography and minimal decoration. */
.sumi-root .sumi-footer {
  background:var(--sumi-bg-ink) !important;
  color:var(--sumi-bg-footer-text) !important;
  border-top:0;
}
.sumi-root .sumi-footer__brand strong {
  color:#FFFFFF !important;
}
.sumi-root .sumi-footer__brand p,
.sumi-root .sumi-footer__brand .sumi-v15-footer-location,
.sumi-root .sumi-footer__brand .sumi-v15-footer-location span,
.sumi-root .sumi-footer__related span {
  color:var(--sumi-bg-footer-muted) !important;
}
.sumi-root .sumi-footer__nav a,
.sumi-root .sumi-footer__related a {
  color:var(--sumi-bg-footer-text) !important;
  text-decoration:none;
}
.sumi-root .sumi-footer__nav a:hover,
.sumi-root .sumi-footer__related a:hover {
  color:#FFFFFF !important;
  text-decoration:underline;
  text-underline-offset:5px;
}
.sumi-root .sumi-footer__nav a:focus-visible,
.sumi-root .sumi-footer__related a:focus-visible {
  outline:2px solid #D0E7DF;
  outline-offset:4px;
  border-radius:2px;
}
.sumi-root .sumi-footer__related,
.sumi-root .sumi-footer__bottom {
  border-top-color:rgba(232,244,244,.23);
}
.sumi-root .sumi-footer__related a {
  border-bottom:1px solid rgba(228,242,244,.4);
}
.sumi-root .sumi-footer__related a:hover { border-bottom-color:#FFFFFF; }
.sumi-root .sumi-footer__bottom {
  color:#BFCDD5;
}

/* Compact screens keep the same color relationships, never a separate scheme. */
@media(max-width:767px) {
  .sumi-root .sumi-footer {padding-top:53px;padding-bottom:24px;}
  .sumi-root .sumi-final-cta--warm,
  .sumi-root .sumi-detail-contact-band {background:var(--sumi-bg-cta);}
}