/* Pink is the contact and headline accent; electric teal lights the dark scenes. */
:root{--brand-pink:#e44b8b;--electric-teal:#41e7d9}
:root [data-accent-text]{color:var(--brand-pink);-webkit-text-fill-color:currentColor;background:none;animation:none}
.home-disciplines a:is(:hover,:focus-visible) .discipline-link-title,
:root .home-disciplines a:is(:hover,:focus-visible) .discipline-gradient{color:var(--brand-pink);-webkit-text-fill-color:currentColor;background:none}

/* Keep small form labels dark, with pink for controls, progress and selections. */
.contact-flow{--accent:var(--brand-pink);--eidon-color-pigment-orange:var(--brand-pink)}
.contact-flow .primary{background:var(--brand-pink);color:var(--midnight)}
.contact-flow .primary:hover{background:var(--midnight);color:var(--canvas)}
.contact-flow .service:has(:checked){background:var(--brand-pink);color:var(--midnight)}
.contact-flow :is(input,textarea,select):focus-visible{outline-color:var(--midnight);border-color:var(--midnight);box-shadow:0 0 0 3px var(--brand-pink)}

/* The invitation shares the midnight field so its pink word stays readable. */
.Layout_contactBand{background:var(--midnight);color:var(--canvas)}
.contact-banner .Layout_contactTitle [data-accent-text],
.contact-banner .Layout_contactTitle:is(:hover,:focus-visible) [data-accent-text]{color:var(--brand-pink);-webkit-text-fill-color:currentColor;background:none;animation:none}
.contact-banner .Layout_contactTitle>svg{color:var(--electric-teal)}
.contact-banner-question:after{background:var(--electric-teal)}
.Layout_contactBand :focus-visible{outline-color:var(--electric-teal)}

.home-showcase :is(.showcase-case-link,.showcase-heading>.Primitives_link),
.Layout_footerContact>a,.studio-principle-number,.studio-principles-list h3{color:var(--electric-teal)}
.showcase-caption h3 a svg,
.CinematicHero_caption a svg,.CinematicHero_scroll svg{color:var(--electric-teal)}
.showcase-all .Primitives_link{color:var(--electric-teal)}
.showcase-all .Primitives_link:is(:hover,:focus-visible),.CinematicHero_motion:hover{background:var(--electric-teal);color:var(--midnight);border-color:var(--electric-teal)}
.Layout_footer a:is(:hover,:focus-visible){color:var(--electric-teal)}
.home-showcase :focus-visible,.Layout_footer :focus-visible,.studio-principles :focus-visible{outline-color:var(--electric-teal)}

/* One authentic C40 Cities mark, with its original 3:2 proportions. */
.showcase-client-mark{width:72px;height:48px;object-fit:contain;filter:brightness(0) invert(1)}
.c40-essay .c40-client-logos img:first-child{width:88px;height:auto;aspect-ratio:3/2;object-fit:contain}
@media(max-width:700px){.c40-essay .c40-client-logos img:first-child{width:64px;height:auto}}
@media(forced-colors:active){
 :root [data-accent-text],.contact-banner .Layout_contactTitle [data-accent-text]{color:CanvasText;-webkit-text-fill-color:currentColor}
 :root .home-disciplines a:is(:hover,:focus-visible) .discipline-gradient{color:LinkText}
 .contact-flow .primary,.contact-flow .service:has(:checked){background:Highlight;color:HighlightText}
 .Layout_contactBand{background:Canvas;color:CanvasText}
}
@media print{:root [data-accent-text],.contact-banner .Layout_contactTitle [data-accent-text]{color:#08183c;-webkit-text-fill-color:currentColor}}