/* cl-home.css: the home (templates/home.html) in XClutch's look, measured on their home at 1440 and in the 390
   stage (review/pages/home.json): the purple vehicle-search strip, the near-black feature bands with their
   Oswald headings and slanted buttons, the three category tiles, the two split features, the promotions, the
   merchandise banner and the closing band of our headings.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* ---------- the slanted button of their bands and tiles ---------- */
.cl-xbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 32px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background: var(--site-accent); color: #FFFFFF;
  font: 700 14px/19.88px var(--site-font-button); letter-spacing: 4.2px; text-transform: uppercase; text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cl-xbtn--orange { background: var(--site-orange); color: #000000; }
.cl-xbtn--black { background: #111111; color: #FFFFFF; }
a.cl-xbtn:hover, a:hover > .cl-xbtn, a:hover > span > .cl-xbtn { background: #FFFFFF; color: #000000; }
.cl-xbtn--black:hover { background: var(--site-accent) !important; color: #FFFFFF !important; }
/* the shimmer (Greg 2026-11-06): a soft sheen sweeps each button every few seconds. Only transform animates, on its
   own compositor layer, so the sweep stays smooth; it rests between passes and is off for reduced motion. */
.cl-xbtn { position: relative; overflow: hidden; }
.cl-xbtn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.18) 65%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-130%, 0, 0) skewX(-22deg); will-change: transform;
  animation: cl-shimmer 3.6s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}
.cl-xbtn--orange::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.25) 65%, rgba(255, 255, 255, 0) 100%); }
a.cl-xbtn:hover::after, a:hover > .cl-xbtn::after { animation-play-state: paused; opacity: 0; }
.cl-tiles__grid li:nth-child(2) .cl-xbtn::after { animation-delay: 0.45s; }
.cl-tiles__grid li:nth-child(3) .cl-xbtn::after { animation-delay: 0.9s; }
.cl-split > :nth-child(2) .cl-xbtn::after { animation-delay: 0.6s; }
@keyframes cl-shimmer {
  0% { transform: translate3d(-130%, 0, 0) skewX(-22deg); }
  45%, 100% { transform: translate3d(330%, 0, 0) skewX(-22deg); }
}
@media (prefers-reduced-motion: reduce) { .cl-xbtn::after { animation: none; opacity: 0; } }

/* ---------- the vehicle-search strip over the kit's band ---------- */
.cl-vs { height: 83px; padding-bottom: 7px; background: var(--site-accent) center / cover no-repeat; background-clip: content-box; }
.cl-vs__in { height: 76px; display: flex; align-items: center; justify-content: center; gap: 0; color: #FFFFFF;
  font: italic 700 20px/28px var(--site-font-body); letter-spacing: 1px; text-transform: uppercase; }
.cl-vs__in img { width: 80px; height: 48px; object-fit: contain; }

/* ---------- the feature bands: near black where their video played, the words on the left ---------- */
.cl-fb { display: flex; background: var(--site-night) center / cover no-repeat; background-image: var(--fb-image, none); color: #FFFFFF; }
.cl-fb--450 { min-height: 450px; }
.cl-fb--550 { min-height: 550px; }
.cl-fb--650 { min-height: 650px; }
.cl-fb--750 { min-height: 750px; }
.cl-fb--gap, .cl-gap { margin-bottom: 75px; }
.cl-fb__in { flex: 1; display: flex; align-items: center; max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 40px var(--site-pad); }
.cl-fb__body { max-width: calc(var(--w, 600px) + 40px); }
.cl-fb__h { font: 400 var(--h, 64px)/1 var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; }
.cl-fb__text { margin-top: 5px; font: 300 23.4px/32.76px var(--site-font-body); letter-spacing: 0.45px; }
.cl-fb__body .cl-xbtn { margin-top: 14px; }
.cl-fb__h + .cl-xbtn { margin-top: 20px; }
/* the RX7 band: their photo as their parallax shows it at rest (1433px tall, its top 450px above the band), the
   words lifted by a shadow */
.cl-fb--photo { position: relative; background-size: auto 1433px; background-position: center -450px; }
.cl-fb--photo .cl-fb__body { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }

/* the hero: XClutch's race car whole on the right (the photo fits the band's height, Greg 2026-11-06) over a dark
   purple. The photo is its own box, the band's height at the photo's 3:2, so its fade is measured on the photo and
   not on the page: at any width it is transparent at its own left edge and whole from the car on (Greg: a smooth
   transition from the purple to the car, no edge of the photo). */
.cl-fb--hero { --hero-plum: #2B0A45; position: relative; overflow: hidden; background: var(--hero-plum) url(img/site/home/xclutch-clutch-parts.jpg) left center / cover no-repeat; }
/* under the words, XClutch's purple clutch parts (Greg 2026-11-06, their video's still) in place of the flat purple, with a
   dark shade over its left so the words keep full contrast; the car photo fades in over its right */
.cl-fb--hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 5, 38, 0.78), rgba(22, 5, 38, 0.55) 38%, rgba(22, 5, 38, 0.15) 60%, rgba(22, 5, 38, 0) 75%); }
.cl-fb--hero::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: 1600 / 1067; background: var(--fb-image) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 14%, rgba(0, 0, 0, 0.4) 30%, #000 47%); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 14%, rgba(0, 0, 0, 0.4) 30%, #000 47%); }
.cl-fb--hero .cl-fb__in { position: relative; z-index: 1; }

/* ---------- the three category tiles ---------- */
.cl-tiles { padding: 75px var(--site-pad); }
.cl-tiles__grid { max-width: var(--site-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.cl-tile { position: relative; display: flex; align-items: center; justify-content: center; height: 485px; overflow: hidden; background: var(--site-band); }
.cl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-tile::after { content: ""; position: absolute; inset: 10px; border: 2px solid #FFFFFF; pointer-events: none; }
.cl-tile .cl-xbtn { position: relative; z-index: 1; min-width: 232px; }

/* ---------- the split features: The XClutch Difference, the Performance HRB ---------- */
.cl-split { max-width: 1197px; margin-left: auto; margin-right: auto; display: grid; align-items: center; }
.cl-split--text-first { grid-template-columns: 515px minmax(0, 1fr); min-height: 409px; align-items: start; }
.cl-split--text-first .cl-split__body { padding: 17px 60px 0 0; }
.cl-split--text-first .cl-split__img { width: 100%; height: 409px; object-fit: contain; }
.cl-split--image-first { grid-template-columns: 682px minmax(0, 1fr); min-height: 455px; }
.cl-split--image-first .cl-split__img { width: 682px; height: 455px; object-fit: cover; }
.cl-split--image-first .cl-split__body { padding-left: 60px; }
.cl-split__h { font: 400 33px/33px var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; }
.cl-split__p { margin-top: 15px; font: 300 18px/25.2px var(--site-font-body); letter-spacing: 0.45px; }
.cl-split__p + .cl-split__p { margin-top: 12px; }
.cl-split .cl-xbtn { margin-top: 15px; }

/* ---------- the two promotions, on their photos ---------- */
.cl-promos { max-width: 1440px; margin: 0 auto; padding: 75px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cl-promo { position: relative; display: block; min-height: 480px; overflow: hidden; background: var(--site-night); color: #FFFFFF; }
.cl-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); }
.cl-promo__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 36px; }
.cl-promo__h { font: 400 53.55px/58.9px var(--site-font-heading); text-transform: uppercase; }
.cl-promo__text { margin-top: 12px; font: 300 25.2px/35.28px var(--site-font-body); letter-spacing: 0.45px; }
.cl-promo .cl-xbtn { margin-top: 14px; }

/* ---------- the merchandise banner, a white box on the photo ---------- */
.cl-merch { padding: 75px var(--site-pad); }
.cl-merch__in { position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--site-max); height: 700px; margin: 0 auto; overflow: hidden; }
.cl-merch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-merch__box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 828px; max-width: 100%; min-height: 246px; padding: 36px; background: #FFFFFF; color: #000000; text-align: center; }
.cl-merch__h { font: 400 40.16px/44.18px var(--site-font-heading); text-transform: uppercase; }
.cl-merch__text { margin-top: 12px; font: 300 18.9px/26.46px var(--site-font-body); letter-spacing: 0.45px; }
.cl-merch .cl-xbtn { margin-top: 15px; }

/* ---------- the closing band: our tree's headings as Oswald links ---------- */
.cl-shopall__body { width: 100%; }
.cl-shopall__list { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px 48px; margin-top: 28px; }
.cl-shopall__link { display: inline-flex; align-items: center; min-height: 44px; font: 400 26px/1.2 var(--site-font-heading); text-transform: uppercase; color: #FFFFFF;
  text-decoration: underline; text-decoration-color: var(--site-accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.cl-shopall__link:hover { color: var(--site-accent); }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-vs { height: 55px; padding-bottom: 5px; }
  .cl-vs__in { height: 50px; font-size: 16px; line-height: 24px; }
  .cl-vs__in img { width: 40px; height: 24px; }

  .cl-fb--450, .cl-fb--550 { min-height: 250px; }
  /* the kit's band is shorter than their five selects: the first band takes the difference */
  .cl-fb--lead { min-height: 387px; }
  .cl-fb--650 { min-height: 422px; }
  .cl-fb--750 { min-height: 488px; }
  .cl-fb--gap, .cl-gap { margin-bottom: 40px; }
  .cl-fb__in { padding: 32px var(--site-pad); }
  .cl-fb__h { font-size: calc(var(--h, 64px) / 2); }
  .cl-fb__text { font-size: 20px; line-height: 30px; }
  .cl-fb__body .cl-xbtn { margin-top: 8px; }
  .cl-xbtn { min-height: 40px; padding: 0 26px; font-size: 13px; letter-spacing: 3.6px; }

  .cl-tiles { padding: 40px var(--site-pad); }
  .cl-tiles__grid { grid-template-columns: 1fr; gap: 7px; }
  .cl-tile { height: 293px; }
  .cl-tile .cl-xbtn { min-width: 212px; }

  .cl-split { margin-left: var(--site-pad); margin-right: var(--site-pad); }
  .cl-split--text-first, .cl-split--image-first { grid-template-columns: 1fr; min-height: 0; }
  .cl-split--text-first .cl-split__img { order: -1; height: 214px; object-fit: cover; }
  .cl-split--image-first .cl-split__img { width: 100%; height: 237px; }
  .cl-split--text-first .cl-split__body, .cl-split--image-first .cl-split__body { padding: 30px 20px 0; }
  .cl-split--image-first .cl-split__body { padding-bottom: 4px; }
  .cl-split__h { font-size: 28px; line-height: 28px; }
  .cl-split__p { margin-top: 10px; font-size: 16px; line-height: 22.4px; }

  .cl-promos { grid-template-columns: 1fr; gap: 10px; padding: 40px 10px; }
  .cl-promo { min-height: 308px; }
  .cl-promo__body { padding: 25px; }
  .cl-promo__h { font-size: 36px; line-height: 41px; }
  .cl-promo__text { margin-top: 7px; font-size: 22px; line-height: 32px; }
  .cl-promo .cl-xbtn { margin-top: 10px; }

  .cl-merch { padding: 40px var(--site-pad) 51px; }
  .cl-merch__in { display: block; height: auto; overflow: visible; }
  .cl-merch__img { position: static; height: 255px; }
  .cl-merch__box { width: auto; min-height: 219px; margin: -60px 10px 0; padding: 25px; }
  .cl-merch__h { font-size: 24px; line-height: 26px; }
  .cl-merch__text { margin-top: 8px; font-size: 17px; line-height: 24px; }
  .cl-merch .cl-xbtn { margin-top: 10px; }

  .cl-fb__body { max-width: calc(var(--w, 600px) / 2 + 20px); }
  .cl-fb--photo { background-size: auto 932px; background-position: center -292px; }
  .cl-fb--hero { background-position: center 70%; }
  .cl-fb--hero::before { background: linear-gradient(0deg, rgba(22, 5, 38, 0.82), rgba(22, 5, 38, 0.55) 40%, rgba(22, 5, 38, 0) 62%); }
  .cl-fb--hero::after { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 1600 / 1067;
    -webkit-mask-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.08) 12%, rgba(0, 0, 0, 0.4) 28%, #000 48%); mask-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.08) 12%, rgba(0, 0, 0, 0.4) 28%, #000 48%); }
  .cl-fb--hero .cl-fb__in { align-items: flex-end; }
  .cl-shopall__list { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .cl-shopall__link { min-height: 44px; font-size: 20px; text-underline-offset: 6px; }
}

}