/* Real SVG elements keep icon-only controls independent of CSS backgrounds and masks. */
.control-icon {display:block;flex-shrink:0;overflow:visible;pointer-events:none}
.menu-toggle,.dialog-close,.city-search-field button {-webkit-appearance:none;appearance:none;flex-shrink:0}
.menu-toggle::before,.menu-toggle::after,.dialog-close::before,.city-search-field button::before {content:none;display:none}
.menu-toggle {position:relative;color:var(--color-primary)}
.menu-toggle>.control-icon {position:absolute;top:50%;left:50%;width:24px;height:24px;transform:translate(-50%,-50%);transition:opacity 180ms ease}
.menu-toggle>.menu-close-glyph {opacity:0}
.menu-toggle[aria-expanded=true]>.menu-glyph {opacity:0}
.menu-toggle[aria-expanded=true]>.menu-close-glyph {opacity:1}
.dialog .dialog-close {color:var(--color-primary);background-image:none}
.dialog-close>.control-icon {position:absolute;top:50%;left:50%;width:28px;height:28px;transform:translate(-50%,-50%);transition:transform 300ms ease,color 300ms ease}
.dialog--cities .dialog-close>.control-icon {width:32px;height:32px}
.dialog .dialog-close:focus-visible {color:#fff}
.dialog-close:focus-visible>.control-icon {transform:translate(-50%,-50%) rotate(90deg)}
.city-search-field button>.control-icon {position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);transition:transform 280ms var(--motion-ease),color 240ms ease}
.faq .faq-list summary>.faq-toggle::before,.faq .faq-list summary>.faq-toggle::after {content:none;display:none}
.faq-toggle>.control-icon {width:100%;height:100%;transform:rotate(0deg);transition:transform var(--motion-normal) var(--motion-ease)}
.faq .faq-list summary[aria-expanded=true]>.faq-toggle>.control-icon,
.faq .faq-list details[open] summary:not([aria-expanded])>.faq-toggle>.control-icon {transform:rotate(45deg)}
@media(max-width:767px) {
 .dialog-close>.control-icon {width:24px;height:24px}
 .dialog--cities .dialog-close>.control-icon {width:32px;height:32px}
}
@media(hover:hover) and (pointer:fine) {
 .dialog .dialog-close:hover {color:#fff}
 .dialog-close:hover>.control-icon {transform:translate(-50%,-50%) rotate(90deg)}
 .city-search-field button:hover>.control-icon {transform:translate(-50%,-50%) scale(1.1)}
 .city-search-field button:active>.control-icon {transform:translate(-50%,-50%) scale(.96)}
}
@media(prefers-reduced-motion:reduce) {
 .dialog-close:hover>.control-icon,.dialog-close:focus-visible>.control-icon,.city-search-field button:hover>.control-icon,.city-search-field button:active>.control-icon {transform:translate(-50%,-50%)}
}

/* One downward triangle rotates to point straight up when services are expanded. */
.services-menu>summary .chevron {width:8px;height:5px;content:normal;color:var(--color-primary);transform:rotate(0deg);transform-origin:50% 50%;transition:transform var(--motion-normal) var(--motion-ease)}
.services-menu>summary[aria-expanded=true] .chevron,
.services-menu[open]>summary:not([aria-expanded]) .chevron {transform:rotate(180deg)}