/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Gloss Lab: motion in the site's own language. The site is a detailing bay at night, and its signature is a squeegee
   and a streak of light on wet paint. So headings are wiped on left to right like a blade pass, cards and rows are
   buffed from a dull haze to a clear finish, and photos are wiped clean (dull film first, full colour behind the blade). */

/* 1. Cards, rows and steps: buffed from haze to clear */
.mo-ready .mo { opacity: 0; transform: translateY(14px); filter: blur(7px) saturate(.35) brightness(.8);
  transition: opacity .5s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease-out;
  transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; filter: none; }

/* 2. Headings: one squeegee pass, left to right */
.mo-ready h2.mo { opacity: 1; transform: none; filter: brightness(1.5); clip-path: inset(-10% 100% -10% -2%);
  transition: clip-path .75s cubic-bezier(.3, .6, .2, 1), filter .9s ease-out; transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready h2.mo.in { clip-path: inset(-10% -2% -10% -2%); filter: none; }

/* 3. Photos and the wipe sliders: the blade crosses, then the film lifts */
.mo-ready .pk-photo.mo, .mo-ready .gal-item.mo, .mo-ready .wipe.mo { opacity: 1; transform: none;
  clip-path: inset(-12px 100% -12px -12px); filter: saturate(.35) contrast(.75) brightness(.9);
  transition: clip-path .8s cubic-bezier(.3, .6, .2, 1), filter .55s ease-out;
  transition-delay: calc(var(--mo-i, 0) * 70ms), calc(var(--mo-i, 0) * 70ms + 300ms); }
.mo-ready .pk-photo.mo.in, .mo-ready .gal-item.mo.in, .mo-ready .wipe.mo.in { clip-path: inset(-12px -12px -12px -12px); filter: none; }

/* 4. The band: four polished objects standing on the same wet floor as the headline, each mirrored in it.
      A streak of light travels along the floor line as the page scrolls and each object glints as it passes. */
.mo-band { --ico: clamp(104px, 11vw, 148px); border-top: 1px solid var(--line); padding-block: var(--s7); overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(220, 226, 234, .5) 12%, rgba(220, 226, 234, .42) 88%, transparent) 0 calc(var(--s7) + var(--ico)) / 100% 1px no-repeat,
              linear-gradient(180deg, #13223D 0%, #0D1930 45%, var(--midnight) 100%) 0 calc(var(--s7) + var(--ico)) / 100% 64px no-repeat, var(--midnight); }
.mo-band__in { --cols: 4; width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s6); }
.mo-item { --c: 0; --d: calc((var(--mo-p, .5) * 1.5 - .25) * var(--cols) - var(--c) - .5);
  display: flex; flex-direction: column; text-decoration: none; color: var(--polish); border-radius: var(--r-s); }
.mo-item:nth-child(2) { --c: 1; } .mo-item:nth-child(3) { --c: 2; } .mo-item:nth-child(4) { --c: 3; }
.mo-ico { display: block; height: var(--ico); }
.mo-ico img { width: var(--ico); height: var(--ico); object-fit: contain; object-position: 50% 100%;
  filter: brightness(calc(1.08 + .32 * max(0, 1 - max(var(--d), -1 * var(--d)))));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mo-floor { position: relative; display: block; height: 64px; overflow: hidden; }
.mo-floor::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff, transparent) top / 100% 1px no-repeat,
              radial-gradient(60% 100% at 50% 0, rgba(220, 226, 234, .2), transparent 70%);
  transform: translateX(calc(var(--d) * 100%)); }
.mo-floor img { width: var(--ico); height: var(--ico); object-fit: contain; object-position: 50% 100%; opacity: .34; filter: blur(1.5px);
  transform-origin: 50% 0; transform: translateY(calc(var(--ico) * .55)) scaleY(-.55);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, transparent 62%);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.mo-name { display: block; align-self: flex-start; margin-right: var(--s5); font: 500 1.125rem/1.25 var(--display); letter-spacing: -.01em;
  text-decoration: underline; text-decoration-color: var(--candy-hi); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mo-item small { display: block; padding-right: var(--s5); margin-top: var(--s2); font: 400 .9375rem/1.5 var(--text); color: var(--steel); max-width: 30ch; }
.mo-item:hover .mo-ico img, .mo-item:focus-visible .mo-ico img { transform: translateY(-8px); }
.mo-item:hover .mo-floor img, .mo-item:focus-visible .mo-floor img { transform: translateY(calc(var(--ico) * .55 + 8px)) scaleY(-.55); opacity: .5; }
.mo-item:hover .mo-name, .mo-item:focus-visible .mo-name { color: #fff; text-decoration-thickness: 3px; }
.mo-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 719.98px) {
  .mo-band { background: var(--midnight); }
  .mo-band__in { --cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 0; }
  .mo-item:nth-child(3) { --c: 0; } .mo-item:nth-child(4) { --c: 1; }
  .mo-ico, .mo-floor, .mo-item small { padding-inline: var(--gutter); }
  .mo-name { margin-inline: var(--gutter); }
  .mo-floor { height: 52px; background: linear-gradient(180deg, #13223D 0%, #0D1930 45%, var(--midnight) 100%); }
  .mo-floor::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1; background: rgba(220, 226, 234, .42); }
  .mo-name { font-size: 1rem; }
}
@media print { .mo-floor img { display: none; } }

/* ---- Menu: a see-through bar over the picture. After the first scroll it becomes a dark frosted pill, like a wet pane of glass:
        nine-tenths solid midnight with a blur behind it, a hairline chrome edge and a faint light along its top. ---- */
:root { --mo-nav-bg: rgba(11, 21, 40, .92); --mo-nav-ink: var(--polish); --mo-nav-line: var(--line-2); --mo-nav-radius: 999px;
  --mo-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 14px 34px rgba(3, 8, 18, .55);
  --mo-nav-pad: var(--gutter); --mo-nav-max: 1040px; }
/* at the top of the page: no bar, only a soft dark band so the links read over the car */
.mo-hdr::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 21, 40, .82) 0%, rgba(11, 21, 40, .5) 55%, rgba(11, 21, 40, 0) 100%); transition: opacity .2s linear; }
.mo-scrolled .mo-hdr::before { opacity: 0; }
.mo-bar { max-width: calc(1200px + 2 * (var(--mo-nav-pad) - var(--mo-nav-gap)) + 2px); }
.mo-scrolled .mo-bar { padding: 0 8px 0 20px; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.mo-brand { min-height: 44px; }
.mo-link { font: 500 .9375rem/1 var(--text); border-radius: 999px; padding: 0 14px; transition: background-color .15s, color .15s; }
.mo-link:hover { background-color: rgba(220, 226, 234, .1); }
.mo-link[aria-current="page"] { background-image: linear-gradient(var(--candy-hi), var(--candy-hi)); background-repeat: no-repeat; background-size: calc(100% - 28px) 2px; background-position: 14px calc(100% - 6px); }
.mo-link:focus-visible, .mo-brand:focus-visible, .mo-menu-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.mo-text .mo-link { font-weight: 600; gap: 6px; }
.mo-num { display: none; }
.mo-cta { min-height: 44px; padding: 0 18px; font-size: .9375rem; transition: background-color .15s, border-radius var(--mo-nav-move), min-height var(--mo-nav-move); }
.mo-scrolled .mo-cta { min-height: 40px; border-radius: 999px; }
.mo-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--midnight), 0 0 0 3.5px var(--candy-hi); }
/* in the page the Menu button comes just before the links it opens (so a keyboard goes Menu, then the links); on screen it sits last */
.mo-menu-btn { order: 3; min-height: 44px; font: 600 .9375rem/1 var(--text); border: 1.5px solid var(--line-2); border-radius: var(--r-s); transition: background-color .15s, border-radius var(--mo-nav-move), min-height var(--mo-nav-move); }
.mo-scrolled .mo-menu-btn { min-height: 40px; border-radius: 999px; }
.mo-menu-btn:hover, .mo-menu-btn[aria-expanded="true"] { background-color: rgba(220, 226, 234, .1); }
@media (min-width: 860.02px) and (max-width: 1023.98px) { .mo-text { display: none; } }
@media (max-width: 860px) {
  /* the dropdown sheet: the same wet glass, hung under the bar; it stops short of the Text us / Get my price bar at the bottom */
  .mo-nav { background: #0D1930; border-radius: var(--r-l); padding: 6px 8px;
    max-height: calc(100dvh - var(--mo-nav-h) - 32px - 78px - env(safe-area-inset-bottom)); }
  .mo-nav li + li { border-top: 1px solid var(--line); }
  .mo-link { font-size: 1.0625rem; min-height: 52px; border-radius: var(--r-s); justify-content: flex-start; }
  .mo-link[aria-current="page"] { background-size: 3px 22px; background-position: 2px 50%; }
  .mo-num { display: inline; }
  .mo-cta { min-height: 40px; padding: 0 14px; }
  .mo-menu-btn { min-height: 40px; padding: 0 12px; }
  .mo-scrolled .mo-bar { padding: 0 6px 0 14px; }
  html:not(.js) .mo-menu-btn { display: none; }
}
@media (max-width: 420px) {
  .mo-brand { gap: 7px; } .mo-brand .logo-mark { width: 26px; height: 26px; } .mo-brand .brand-name { font-size: .8125rem; } .mo-brand .brand-sub { font-size: .6875rem; margin-top: 4px; }
  .mo-cta { padding: 0 11px; font-size: .875rem; } .mo-menu-btn { padding: 0 10px; font-size: .875rem; }
}
@media (max-width: 350px) { .mo-brand .logo-mark { display: none; } .mo-scrolled .mo-bar { padding: 0 6px 0 12px; } }
@media (prefers-reduced-motion: reduce) { .mo-cta, .mo-menu-btn, .mo-link, .mo-hdr::before { transition: none; } }

/* ---- Hero: the picture runs up behind the see-through bar, and on a computer the hero holds for one scroll section while
        one squeegee pass crosses the car. The paint is dull ahead of the blade and deep behind it, the shop light slides
        along the headline, the car's reflection comes up in the wet floor and a glint runs the floor line with the blade. ---- */
.mo-pin { --mo-pin-offset: 0px; --mo-pin-extra: 90vh; margin-top: calc(-1 * var(--mo-nav-h)); }
.mo-pin > .hero { padding-top: var(--mo-nav-h); }
.mo-pin .hero-air > .hero-photo { top: calc(-1 * var(--mo-nav-h)); height: calc(240px + var(--mo-nav-h)); }
@media (min-width: 560px) { .mo-pin .hero-air > .hero-photo { height: calc(300px + var(--mo-nav-h)); } }
@media (min-width: 900px) { .mo-pin .hero-air > .hero-photo { height: calc(100% + var(--mo-nav-h)); } }
@media (min-width: 480px) and (max-width: 899.98px) and (max-height: 520px) { .mo-pin .hero-air > .hero-photo { height: calc(150px + var(--mo-nav-h)); } }
.mo-pin.is-pinned > .hero { position: sticky; }
.mo-pin.is-pinned .hero-air > .hero-photo img { filter: saturate(.55) brightness(.78) contrast(.92); }
.mo-pin.is-pinned .hero-air::before, .mo-pin.is-pinned .hero-air::after { content: ""; position: absolute; top: calc(-1 * var(--mo-nav-h)); right: 0; bottom: 0; width: min(68%, 1100px); z-index: -1; pointer-events: none; }
/* the blade: a thin line of light with a short wet trail behind it */
.mo-pin.is-pinned .hero-air::before { background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .95) 2px, rgba(220, 226, 234, .15) 3px, rgba(220, 226, 234, 0) 120px);
  transform: translateX(calc((1 - var(--mo-pin)) * 100%)); opacity: calc(min(1, (1 - var(--mo-pin)) * 5)); }
/* the pass it has made: everything behind the blade is polished */
.mo-pin.is-pinned .hero-air::after { -webkit-backdrop-filter: brightness(1.34) contrast(1.14) saturate(1.1); backdrop-filter: brightness(1.34) contrast(1.14) saturate(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 26%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 26%, #000 55%);
  clip-path: inset(0 0 0 calc((1 - var(--mo-pin)) * 100%)); }
.mo-pin.is-pinned .gloss-h { background-position: calc(var(--lx, 62%) - var(--mo-pin) * 56%) 0; }
.mo-pin.is-pinned .hero-photo-mirror { opacity: calc(.18 + var(--mo-pin) * .5); }
.mo-pin.is-pinned .hero-surface::after { content: ""; position: absolute; top: -1px; right: 0; width: min(68%, 1100px); height: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 46%, #fff 54%, rgba(255, 255, 255, 0)) 0 0 / 220px 100% no-repeat;
  transform: translateX(calc((1 - var(--mo-pin)) * 100% - 110px)); opacity: calc(min(1, var(--mo-pin) * 8) * min(1, (1 - var(--mo-pin)) * 5)); }
/* progress: a chrome hairline filling along the bottom of the hero */
.mo-pin.is-pinned > .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(220, 226, 234, .35), var(--chrome) 85%, #fff); transform-origin: 0 50%; transform: scaleX(var(--mo-pin)); opacity: calc(min(1, (1 - var(--mo-pin)) * 8)); }
@media (min-width: 1600px) { .mo-pin.is-pinned .hero-air::before, .mo-pin.is-pinned .hero-air::after, .mo-pin.is-pinned .hero-surface::after { width: 62%; } }