/* Optional color studies. No attribute means the original design is unchanged. */
:root[data-palette="slate"] {
  --red:#496d7e; --green:#496d7e; --ink:#303e46; --muted:#61717a; --line:#dbe3e7; --sage:#f0f4f6; --paper:#fff;
  --primary:#7c9daa; --action:#496d7e; --action-hover:#334f5d; --hero-tone:#edf3f7; --surface-tone:#f7f8fa; --secondary-tone:#eef2f4;
}
html[data-palette] .header {border-bottom-color:var(--line)}
html[data-palette] .header-contact {background:var(--action);border-color:var(--action);color:#fff}
html[data-palette] .header-contact:hover {background:var(--action-hover)}
html[data-palette] .hero {background:var(--hero-tone);position:relative}
html[data-palette] .hero-art img {mix-blend-mode:multiply}
html[data-palette] .hero-bottom {position:relative}
html[data-palette] .trouble {color:var(--action)}
html[data-palette] .button.red {background:var(--action)}
html[data-palette] .button.red:hover {background:var(--action-hover)}
html[data-palette] .section-label {color:var(--action)}
html[data-palette] .section-label::before {background:var(--primary)}
html[data-palette] .services h2 {color:var(--ink)}
html[data-palette] .service-card {border-top:3px solid var(--primary)}
html[data-palette] .service-art {background:var(--surface-tone)}
html[data-palette] .service-number,html[data-palette] .service-kicker {color:var(--action)}
html[data-palette] .service-content > a span {background:var(--hero-tone);color:var(--action)}
html[data-palette] .concerns {background:var(--surface-tone)}
html[data-palette] .concern {border-color:var(--line)}
html[data-palette] .concern svg {stroke:var(--action)}
html[data-palette] .message-art {background:var(--secondary-tone)}
html[data-palette] .contact-band {background:var(--primary);color:#172e3a}
html[data-palette] .contact-band .section-label,html[data-palette] .contact-band p:not(.section-label) {color:#172e3a}
html[data-palette] .contact-band .section-label::before {background:#172e3a}
html[data-palette] .button.white {color:var(--action)}
html[data-palette] .footer {background:var(--surface-tone);border-top-color:var(--line)}
html[data-palette="slate"] .hero {background:#fff}
html[data-palette="slate"] .hero::before {content:'';position:absolute;inset:0 54% 0 0;background:var(--hero-tone);pointer-events:none}
html[data-palette="slate"] .hero-art img {mix-blend-mode:normal}
html[data-palette="slate"] .contact-band {background:var(--action);color:#fff}
html[data-palette="slate"] .contact-band .section-label,html[data-palette="slate"] .contact-band p:not(.section-label) {color:#fff}
html[data-palette="slate"] .contact-band .section-label::before {background:#fff}
@media(max-width:700px){html[data-palette="slate"] .hero::before{inset:0 0 auto 0;height:465px}html[data-palette="slate"] .hero-copy{padding-bottom:22px}html[data-palette="slate"] .hero-art{margin-top:0;background:#fff}}
/* C: keep B's blue-gray accents; match the supplied background swatch (#fcfcf9). */
html[data-background="offwhite"] .hero {background:#fcfcf9}
html[data-background="offwhite"] .hero::before {display:none}
html[data-background="offwhite"] .hero-art {background:transparent}
html[data-background="offwhite"] .hero-art img {mix-blend-mode:multiply}