/* Art-directed Porsche photography keeps the car clear of the Hero copy. */
[data-page-template="service"] .hero-image{object-position:right center}
@media(max-width:1023px){
 /* Start the photograph below the header, including its 1px bottom border. */
 [data-page-template="service"] .hero-image{top:calc(var(--header-height) + 1px);height:calc(100% - var(--header-height) - 1px);object-position:center center}
}
@media(min-width:768px) and (max-width:1023px),(max-width:1023px) and (min-aspect-ratio:1/1){
 [data-page-template="service"] .hero-image{object-position:center 30%}
}

@media(max-width:1023px){
 [data-page-template="service"] .hero--with-form .hero-image{height:calc(100svh - var(--header-height) - 1px)}
 [data-page-template="service"] .hero--with-form::after{content:"";position:absolute;top:calc(var(--header-height) + 1px);inset-inline:0;height:calc(100svh - var(--header-height) - 1px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 40%,var(--color-dark) 100%)}
}

/* The navigation phone tile uses the same surface as primary CTAs. */
[data-page-template="service"] .phone-icon{background:var(--color-blue);border-color:var(--color-blue);color:var(--color-surface)}
[data-page-template="service"] .phone-icon img{filter:brightness(0) invert(1)}
@media(hover:hover) and (pointer:fine){
 [data-page-template="service"] .phone-icon:hover{background:var(--color-blue-hover);border-color:var(--color-blue-hover)}
}