/* One shared cool surface separates the white sections. */
:root { --section-white: #fff; --section-tint: #e9eef5; --section-case: #dce9fc; --section-accent: #d3fa86; }
.hero, .capabilities, .products, .faq { background: var(--section-white); }
.solutions, .budget, .about { background: var(--section-tint); }
.case-section { background: var(--section-case); }
.hero { background: #f7f6f9; border-bottom: 0; }
.capability-panels[class] { background: transparent; }

/* Artwork shares the headline's space instead of owning a separate row. */
.capability-main { padding: 18px 12px; }
.capability-heading { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; min-height: 100px; padding-block: 24px; }
.capability-heading h3 { margin: 0; z-index: 1; }
.capability-heading .capability-atmosphere { position: absolute; width: 220px; height: 220px; right: max(0px, calc(50% - 290px)); top: calc(50% - 28px); transform: translateY(-50%); opacity: .2; margin: 0; pointer-events: none; z-index: 0; mask-image: linear-gradient(to bottom, #000 65%, transparent 96%); }
.capability-main .capability-copy { margin-top: 0; }
.capability-states { border-top: 0; padding-top: 0; }
.capability-state { border-top: 2px solid #c9768b; padding-top: 14px; }
.capability-state-after { border-color: #349477; }
.capability-state > span { color: #a23d58; font-size: 20px; font-weight: 600; }
.capability-state-after > span { color: #167151; }
.capability-state strong { color: #24292f; font-weight: 600; }

/* A single comparison sheet, not three unrelated pricing cards. */
.estimate-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 42px; align-items: center; }
.estimate-copy h2 { font-size: 44px; text-wrap: pretty; }
.estimate-copy > p { max-width: 480px; }
.estimate-card { padding: 30px; border-color: #c8d8eb; background: #fff; box-shadow: inset 0 2px 0 #fff, 0 3px 0 #d1deee, 0 14px 30px #304f7910; }
.estimate-caption { color: #506175; font-size: 18px; padding: 0; }
.estimate-card > h3 { font-size: 30px; line-height: 1.25; margin-top: 12px; }
.estimate-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; border-top: 2px solid var(--blue); }
.estimate-level { display: flex; flex-direction: column; min-width: 0; padding: 20px 16px 0; }
.estimate-level:first-child { padding-left: 0; }
.estimate-level:last-child { padding-right: 0; }
.estimate-level + .estimate-level { border-left: 1px solid #dce4ed; }
.estimate-level h4 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }
.estimate-level > p { font-size: 18px; line-height: 1.5; color: #506175; flex: 1; }
.estimate-card .estimate-level dl { margin-top: 22px; }
.estimate-card .estimate-level dl > div { padding: 0; }
.estimate-card .estimate-level dl > div + div { margin-top: 16px; }
.estimate-card .estimate-level dt { font-size: 18px; line-height: 1.4; font-weight: 400; color: #506175; }
.estimate-card .estimate-level dd { font-size: 18px; line-height: 1.45; margin-top: 4px; color: #242f3d; }
.estimate-card .estimate-level .estimate-price { font-size: 28px; font-weight: 500; color: var(--blue); font-variant-numeric: tabular-nums; }
.estimate-note { border-top: 1px solid #dce4ed; padding-top: 18px; margin-top: 24px; font-size: 18px; line-height: 1.45; color: #506175; }
.estimate-audit { margin-top: 26px; }

/* The lime stops the scroll; the form stays a clean, cool work surface. */
.contact { background: var(--section-accent); }
.contact .contact-copy > p { color: #334629; }
.contact-form { background: #fffffffa; border: 1px solid #b7cee9; box-shadow: inset 0 2px 0 #fff, inset 0 -1px 0 #cddcf0, 0 3px 0 #c5d5e6, 0 16px 32px #28508c1a; backdrop-filter: none; }
.contact-form .website-field input, .contact-form textarea { background: #f5f8fc; border-color: #b4c5d9; box-shadow: inset 0 2px 3px #29486d0a; color: #253142; }
.contact-form .website-field input:hover, .contact-form textarea:hover { border-color: #7899c0; }
.contact-form .website-field input:focus, .contact-form textarea:focus { background: #fff; border-color: var(--blue); }
.contact-form .website-field input::placeholder, .contact-form textarea::placeholder { color: #627184; }
.contact-form .website-field p, .contact-form .form-note, .contact-form .privacy-link { color: #526276; }
.contact-form .privacy-link:hover { color: var(--blue); }

@media (max-width: 1190px) {
  .estimate-layout { gap: 30px; }
  .estimate-copy h2 { font-size: 40px; }
  .estimate-card { padding: 24px; }
  .estimate-level { padding-inline: 12px; }
  .estimate-level h4 { font-size: 20px; }
}
@media (max-width: 1100px) {
  .estimate-layout { grid-template-columns: 1fr; gap: 32px; }
  .estimate-copy { max-width: 750px; }
  .estimate-copy > p { max-width: 700px; }
  .estimate-level h4 { font-size: 22px; }
  .estimate-level { padding-inline: 22px; }
}
@media (max-width: 900px) {
  .capability-main { padding: 18px 0; }
  .capability-heading .capability-atmosphere { right: max(0px, calc(50% - 260px)); }
}
@media (max-width: 640px) {
  .estimate-levels { grid-template-columns: 1fr; margin-top: 24px; }
  .estimate-level { padding: 22px 0; }
  .estimate-level + .estimate-level { border-left: 0; border-top: 1px solid #dce4ed; }
  .estimate-level:last-child { padding-bottom: 0; }
  .estimate-level h4 { margin-bottom: 10px; }
  .estimate-card .estimate-level dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin-top: 16px; }
  .estimate-card .estimate-level dl > div + div { margin-top: 0; }
}
@media (max-width: 560px) {
  .capability-main { padding: 12px 0 0; }
  .capability-heading { min-height: 124px; padding-block: 22px; }
  .capability-heading .capability-atmosphere { width: 180px; height: 180px; right: 0; top: calc(50% - 6px); opacity: .17; }
  .capability-heading h3 { margin-top: 0; }
  .capability-main .capability-copy { margin-top: 0; }
  .estimate-copy h2 { font-size: 34px; }
  .estimate-card { padding: 22px; }
  .estimate-card > h3 { font-size: 27px; }
  .estimate-card > h3 br { display: none; }
  .estimate-card .estimate-level .estimate-price { font-size: 26px; }
}
@media (max-width: 360px) {
  .estimate-copy h2 { font-size: 30px; }
  .estimate-card { padding: 18px; }
  .estimate-card > h3 { font-size: 25px; }
}