:root { --cs-header-height:112px; scroll-padding-top:var(--cs-header-height); }
@media(max-width:1023px){:root{--cs-header-height:72px}}
[hidden]{display:none!important}
#main-body{scroll-padding-top:var(--cs-header-height)}
[data-hero]{margin-top:calc(-1 * var(--cs-header-height))!important;padding-top:var(--cs-header-height)!important}
#main-body>section>div[id]{scroll-margin-top:var(--cs-header-height)!important}
#website-header.cs-scrolled{background-color:#161513!important;color:white!important}
#website-header.cs-scrolled a,#website-header.cs-scrolled button{color:white!important}
#website-header.cs-scrolled .button,#website-header.cs-scrolled a>div.rounded-full{border-color:white!important}
#website-header.cs-scrolled svg{color:white!important}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #ffe400;outline-offset:4px}
#cs-mobile-menu{position:fixed;inset:0;z-index:30000}
#cs-mobile-menu img[alt="Clear Shield"]{color:inherit}
[data-faq-toggle]{cursor:pointer}
[data-faq-toggle] svg{transition:transform .3s}
[data-faq-toggle][aria-expanded=true] svg{transform:rotate(180deg)}
.cs-faq-open{grid-template-rows:1fr!important;margin-top:1rem!important}
[data-carousel]{--slide-width:100%;--slide-offset:0%}
[data-carousel=gallery]{--slide-width:66.666667%;--slide-offset:16.666667%}
[data-carousel] .slider-list{width:100%!important;display:flex;transition:transform .45s ease;will-change:transform}
[data-carousel] .slide{flex:0 0 var(--slide-width)!important;width:var(--slide-width)!important;padding:0!important;opacity:1!important}
[data-carousel=gallery] .slide{padding:0 20px!important}
.gallery-carousel [data-carousel] .slide>div::before{transition-duration:.45s}
[data-carousel] .slider-frame{touch-action:pan-y}
[data-carousel] .slider-control-bottomcenter button[aria-current=true]{background:#111827;box-shadow:0 0 0 4px #e5e7eb}
[data-carousel] .slider-control-bottomcenter button:not([aria-current=true]){background:#f9fafb;box-shadow:none}
@media(max-width:767px){[data-carousel=gallery]{--slide-width:100%;--slide-offset:0%}[data-carousel=gallery] .slide{padding:0 10px!important}}
.cs-map-embed{position:absolute;inset:0;background:#e4e4e1}
.cs-map-embed iframe{display:block;width:100%;height:100%;border:0}
[data-map-section]>.container{pointer-events:none}
.cs-map-location{pointer-events:auto}
.cs-map-location a{color:#111827;text-decoration:underline;text-underline-offset:3px}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
#contact-status:not(:empty){padding:12px 0;max-width:65ch;text-align:left;color:#fff}
#contact-form button:disabled{opacity:.65;cursor:wait}
.cs-revealing{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.cs-revealing.cs-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Match the approved PPF hero's spacing without changing that page.
   Reserve its introduction space so shorter service copy keeps the same proportions. */
.cs-service-hero{
  --cs-hero-padding:80px;
  --cs-hero-heading-line:42px;
  --cs-hero-description-height:65.53125px;
  --cs-hero-button-gap:24px;
  --cs-hero-content-height:calc(var(--cs-hero-heading-line) + 16px + var(--cs-hero-description-height) + var(--cs-hero-button-gap) + 56px);
  --cs-hero-position:50% 50%;
}
.cs-service-hero .cs-service-hero-content{padding-top:var(--cs-hero-padding);padding-bottom:var(--cs-hero-padding)}
.cs-service-hero .cs-service-hero-copy{min-height:var(--cs-hero-content-height)}
.cs-service-hero-copy>div:last-child{margin-top:auto}
.cs-service-hero .cs-service-hero-image{object-position:var(--cs-hero-position)!important}
.cs-service-hero[data-service=ceramic-coating]{--cs-hero-position:50% 38%}
@media(max-width:359px){.cs-service-hero{--cs-hero-description-height:87.375px}}
@media(min-width:560px){.cs-service-hero{--cs-hero-description-height:43.6875px}}
@media(min-width:768px){.cs-service-hero{--cs-hero-heading-line:54px}}
@media(min-width:1024px){.cs-service-hero{--cs-hero-padding:192px;--cs-hero-button-gap:32px}}
@media(min-width:1280px){.cs-service-hero{--cs-hero-heading-line:80px;--cs-hero-description-height:60.484375px}}
/* The original SVG clipping paths were frozen at 1440px and stale section heights.
   Percentages follow each section while retaining the original 88px diagonal. */
.cs-slant-left{clip-path:polygon(0 0,100% 0,100% calc(100% - 88px),0 100%)}
/* The photographic covers include the overlaid header. Book has a separate
   header, so only its remaining viewport height belongs to the cover.
   Minimum heights let enlarged text remain accessible on unusually short screens. */
[data-cover]{
  --cs-cover-height:100vh;
  --cs-cover-space:clamp(24px,6vh,80px);
  min-height:var(--cs-cover-height);
}
@supports(height:100svh){[data-cover]{--cs-cover-height:100svh;--cs-cover-space:clamp(24px,6svh,80px)}}
@supports(height:100dvh){[data-cover]{--cs-cover-height:100dvh;--cs-cover-space:clamp(24px,6dvh,80px)}}
[data-cover]>div>.container{padding-top:var(--cs-cover-space);padding-bottom:var(--cs-cover-space)}
[data-cover=book]{min-height:calc(var(--cs-cover-height) - var(--cs-header-height))}
/* Keep the Home logo above its original CTAs, with room for both on short
   screens. The logo keeps its proportions; the background stays edge-to-edge. */
[data-cover=home]{--cs-home-actions:128px;--cs-home-gap:clamp(24px,5vh,64px)}
[data-cover=home] .flex-col-reverse{gap:var(--cs-home-gap)}
[data-cover=home] .aspect-w-16{
  height:auto;
  padding-bottom:0;
  aspect-ratio:16/9;
  max-height:max(80px,calc(var(--cs-cover-height) - var(--cs-header-height) - var(--cs-cover-space) * 2 - var(--cs-home-gap) - var(--cs-home-actions)));
}
/* Match the original theme's 860px breakpoint for side-by-side buttons. */
@media(min-width:860px){[data-cover=home]{--cs-home-actions:56px}}
@media(max-height:500px){
  [data-cover]{--cs-cover-space:16px}
  [data-cover] .cs-service-hero-copy{min-height:0}
  [data-cover] .cs-service-hero-copy>div:last-child{margin-top:8px}
}