/* Teal anchors the brand. Logo green marks growth; coral adds a little warmth. */
:root { --logo-green: #32ce6b; --logo-green-soft: #d3f9df; --coral: #ef886e; --coral-soft: #fff0e9; }
.hero-copy > .eyebrow { border-left: 4px solid var(--coral); padding-left: 12px; }
.header nav a.current:after { background: var(--logo-green); }
.read-progress { background: linear-gradient(90deg, #00a8a6, var(--logo-green)); }
.hero-visual.campaign-board { background: linear-gradient(150deg, #e1f7ff 5%, #edfff2 100%); }
.journey-map .node.active { fill: var(--logo-green-soft); stroke: #25b960; }
.journey-map .signal { stroke: #1aaa62; }
.journey-controls button[aria-pressed=true] { background: var(--logo-green-soft); color: #184c38; border-color: #71d79a; }
.journey-controls button:hover:not([aria-pressed=true]) { border-color: var(--coral); }
.results-heading .eyebrow { display: flex; align-items: center; gap: 12px; }
.results-heading .eyebrow:before { content: ''; width: 26px; height: 3px; background: var(--coral); border-radius: 2px; }
.result-card.green { background: linear-gradient(135deg, #c4f7ce, #a2e8db); border-color: #87d8bb; }
.comparison-row:last-child .bar-value { background: #12965c; }
.organic-segment, .legend-organic { background: var(--logo-green); }
.service-tabs button:before { background: var(--logo-green); }
.service-path .active .path-icon { background: var(--logo-green-soft); border-color: #76d8a0; color: #17654b; }
.process-list button[aria-selected=true] { background: var(--logo-green-soft); }
.step-map circle.complete { fill: #b8efcb; stroke: #7ed5a2; }
.about-system rect:first-of-type { fill: #b8efcb; }
.about-system .system-dot { fill: var(--coral); }
.quote-section { background: linear-gradient(125deg, #a8eae1, #d1f8d9); }
.quote-initials { background: var(--coral-soft); color: #725449; border: 1px solid #f5c9b9; }
.contact-symbol svg { color: #bf6550; }
.text-link:hover { border-bottom-color: var(--coral); }
.faq-list details[open] summary:after { background: var(--coral-soft); border-color: #efbdab; color: #8f4a39; }

/* Vector symbols keep the same appearance across operating systems. */
.expertise-strip .service-separator { display: inline-block; width: 14px; height: 14px; margin: 0 16px; vertical-align: -1px; fill: none; stroke: #00a8a6; stroke-width: 2; stroke-linecap: round; }
.dialog-close svg, .booking-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media(max-width:700px) { .expertise-strip .service-separator { margin-inline: 10px; } }