/*

--- 01 TYPOGRAPHY SYSTEM



-FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Semi-bold: 600
Bold: 700


- Line heights

- Letter spacing

--- 02 COLORS

-Primary: #7e100b #080c0b
-Background: color: #f2f2f2;
-Tints:  #FF5248
-Text Color:#333;
-Shades:
-Accents: 
-Greys: 
-Others: #edeee8 #e9ecef

--- 05 SHADOWS
-Image Shadows: box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.2);
                box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.3);
                box-shadow: 0 2.4rem 4.8rem rgba(255, 82, 72, 0.2);


--- 06 BORDER-RADIUS

--- 07 WHITESPACE

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

p {
  font-family: "lato";
}

h3 {
  font-family: "roboto";
}
.section-heading {
  display: block;
  width: fit-content;
  margin: 0 auto 2.4rem;

  /* Gradient text: a subtle sheen rather than a flat fill. Kept dark
     end-to-end (deep red only) so contrast holds up on the near-white
     backgrounds this heading sits on across the site.
     Fallback color keeps it legible if background-clip: text isn't supported. */
  color: #7e100b;
  background: linear-gradient(90deg, #7e100b 0%, #9c1710 50%, #7e100b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 4.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  text-align: center;
  position: relative;
  font-family: "roboto";
}

/* Accent line under heading */
.section-heading::after {
  content: "";
  display: block;
  width: 7rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #7e100b, #ff5248);
  margin: 1.2rem auto 0;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(126, 16, 11, 0.45);
}

.section-heading-white {
  display: block;
  width: fit-content;
  margin: 0 auto 2.4rem;

  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  font-size: 4.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  position: relative;
  text-align: center;
  font-family: "roboto";
}

/* Accent line under heading — brand-red gradient, not plain white, so every
   heading (light or dark section) shares the same signature accent color */
.section-heading-white::after {
  content: "";
  display: block;
  width: 7rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #7e100b, #ff5248);
  margin: 1.6rem auto 0;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(126, 16, 11, 0.55);
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 900px;
  z-index: 1;
}

.heading-primary {
  color: #ffff;
  text-transform: uppercase;

  /* Hides the shake in animations */
  backface-visibility: hidden;
  margin-bottom: 60px;
}

.heading-primary-main {
  display: block;
  font-size: 4.4rem;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 5px;

  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  font-family: "Roboto";

  /*animation-delay: 3s; animation-iteration-count: 3; */
}

.heading-primary-sub {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 5px;
  margin-bottom: 2px;
  font-family: "Roboto";

  /* 'animation' basically takes all of animation-name: moveInLeft;, animation-duration: 1s;
  animation-timing-function: ease-out; and brings them together*/
  animation: moveInRight 1s ease-out;
}

/* Groups the hero's 3 CTA buttons — Schedule Now centered on its own
   row on top, Phone and Get a Quote splitting a row below it. Relies
   on DOM order (phone, schedule, quote) via :nth-child rather than
   HTML changes, since the <a> tags themselves have no distinguishing
   classes. */
.hero-cta-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "schedule schedule"
    "phone quote";
  gap: 1rem;
}

.hero-cta-group > a:nth-child(1) {
  grid-area: phone;
  justify-self: center;
}

.hero-cta-group > a:nth-child(2) {
  grid-area: schedule;
  justify-self: center;
}

.hero-cta-group > a:nth-child(3) {
  grid-area: quote;
  justify-self: center;
}

/* All three centered within their grid area (above) and given the
   same fixed width here, rather than letting Phone/Get a Quote
   stretch to fill their column — a shared column width can't be
   trusted to match Schedule Now's own auto-sized width, since
   Schedule Now sits alone on its row. 24rem comfortably fits the
   longest label, "(248)795-5751", at the current font-size/padding. */
.hero-cta-group .btn {
  display: block;
  width: 24rem;
  text-align: center;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  80% {
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/* Button */
.btn {
  display: inline-block;
  padding: 13px 20px;
  background-color: #7e100b;
  color: #fff;
  font-weight: 600;
  font-family: "roboto";
  text-decoration: none;
  border: solid #000;
  border-radius: 5rem;
  font-size: 2.2rem;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.25);
}

.btn-submit-block {
  display: block;
  padding: 0.85rem 1.5rem;
  background-color: #7e100b;
  color: #fff;
  font-weight: 600;
  font-family: "roboto";
  text-decoration: none;
  border: solid #000;
  border-radius: 5rem;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.25);
}

.btn-small {
  display: inline-block;
  padding: 6px 10px;
  background-color: #7e100b;
  color: #fff;
  font-weight: 600;
  font-family: "roboto";
  text-decoration: none;
  border: solid #000;
  border-radius: 5rem;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.25);
}

.btn-primary {
  animation: moveInLeft 1s ease-out;
}

.btn:hover,
.btn-small:hover {
  background-color: #f2f2f2;
  border: solid #000;
  opacity: 1;
  color: #7e100b;
}

/* Secondary (outline) button — pairs with .btn as a visually
   subordinate CTA. Side-by-side CTA buttons with identical styling
   give users no way to tell which action is preferred; this keeps
   the same shape/size/type scale as .btn but drops the solid fill so
   it reads as the lighter-weight option next to a primary .btn. */
.btn.btn-secondary {
  background-color: transparent;
  color: #7e100b;
  border: solid 2px #7e100b;
  box-shadow: none;
}

.btn.btn-secondary:hover {
  background-color: #7e100b;
  color: #fff;
}

/* .btn-secondary on any hero (dark photo background) — the flat
   red-on-transparent outline above was built for the light booking
   section and reads as a hollow/broken button here. Frosted glass
   instead, matching the glassmorphism this site already uses
   elsewhere (.catcher-information, .dropdown-menu) — same pill
   shape/size as its .btn siblings, just a lighter fill instead of a
   bare outline. [class*="section-hero"] matches every page's hero
   section class (.section-hero, .section-hero-tint,
   .section-hero-ppf, .section-hero-ceramic, .section-hero-details,
   .section-hero-wraps, .section-hero-custom) instead of just
   index.html's exact .section-hero. Same specificity as
   .btn.btn-secondary above (attribute selector counts as a class for
   specificity), so this must stay physically after it in this file
   to win the cascade regardless of link order. */
[class*="section-hero"] .btn-secondary {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

[class*="section-hero"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* Tertiary button — the lowest-priority option in a 3-CTA row.
   Deliberately keeps the exact same pill shape/size/type-scale as
   .btn (no shape or size change at all, unlike the previous attempt)
   so it still reads as part of the same button family instead of an
   orphaned stray link — hierarchy comes from fill weight alone, a
   fainter glass than .btn-secondary's. */
.btn.btn-tertiary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

.btn.btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.btn-block {
  margin: 1rem auto 0;
  width: 100%;
  text-align: center;
}

.bold {
  font-weight: 900;
  color: #000;
}

.small-heading-h3 {
  color: #333;
  font-size: 1.6rem;
}

/* info slider  */
.info-slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.25);
}

.info-track {
  display: flex;
  transition: transform 1s ease-in-out;
}

.info-slide {
  min-width: 100%;
  position: relative;
  overflow: hidden;
}

.info-slide img {
  width: 100%;
  /* 16:9 keeps the slider edge-to-edge at a sensible height. The photos are
     ~3:2, so object-fit trims a little off the top and bottom on wide
     screens (subject stays centered) rather than the heavy letterbox crop
     the old fixed 42rem height caused. max-height caps it on big monitors;
     small screens switch to 3:2 in queries.css so the photo isn't a strip. */
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 46rem;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: infoSlideKenBurns 9s ease-in-out infinite alternate;
}

/* Slow, subtle pan/zoom — a static image otherwise feels flat next to an
   auto-advancing carousel */
@keyframes infoSlideKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-slide img {
    animation: none;
  }
}

/* Bottom gradient so the caption reads clearly no matter how bright the photo is */
.info-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.info-content {
  position: absolute;
  left: 2.4rem;
  right: 2.4rem;
  bottom: 2.4rem;
  max-width: 46rem;
  padding: 1.8rem 2rem;
  border-radius: 1.2rem;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  color: #fff;
}

.info-content::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 4px;
  border-radius: 999px;
  background: #7e100b;
  box-shadow: 0 0 16px rgba(126, 16, 11, 0.5);
  margin-bottom: 1.2rem;
}

.info-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: #fff;
}

.info-content p {
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

/* Slide position indicators — kept clear of the bottom caption panel */
.info-dots {
  position: absolute;
  z-index: 2;
  right: 2rem;
  top: 2rem;
  display: flex;
  gap: 0.7rem;
}

.info-dot {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}

.info-dot:hover,
.info-dot:focus-visible {
  transform: scale(1.25);
}

.info-dot--active {
  background: #7e100b;
  border-color: #7e100b;
}

/* info slider Custom  */
.info-slider-custom {
  position: relative;
  max-width: 100%;
  display: flex;
  margin: auto;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.25);
}

.info-track-custom {
  display: flex;
  flex: 1;
  min-width: 0;
  transition: transform 1s ease-in-out;
}

.info-slide-custom {
  min-width: 100%;
  position: relative;
}

.info-slide-custom img {
  width: 100%;
  height: 38rem;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

/* Bottom gradient so the caption reads clearly no matter how bright the photo is */
.info-slide-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.18) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.info-content-custom {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  max-width: 40rem;
  padding: 1.6rem 1.8rem;
  border-radius: 1.2rem;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  color: #fff;
}

.info-content-custom::before {
  content: "";
  display: block;
  width: 3.6rem;
  height: 4px;
  border-radius: 999px;
  background: #7e100b;
  box-shadow: 0 0 16px rgba(126, 16, 11, 0.5);
  margin-bottom: 1rem;
}

.info-content-custom h3 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  color: #fff;
}

.info-content-custom p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

/* Slide position indicators, reusing the same visual language as .info-dots */
.info-dots-custom {
  position: absolute;
  z-index: 2;
  right: 2rem;
  top: 2rem;
  display: flex;
  gap: 0.7rem;
}

/* info-video section */

.section-info-video {
  padding: 6.4rem 2.4rem;
  max-width: 120rem;
  margin: 0 auto;
  background-color: #f2f2f2;
}

.info-video-kicker {
  text-align: center;
  color: #ff5248;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  margin: 0 0 0.8rem;
}

.info-video-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem;
  align-items: center;
}

.info-video-media {
  position: relative;
  border-radius: 1.6rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1.6rem 3.6rem rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(126, 16, 11, 0.25);
}

/* Small step badge so the two clips read as a sequence, not two random videos */
.info-video-step {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  left: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: "roboto";
  font-weight: 700;
  font-size: 1.2rem;
}

.info-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #000;
}

/* Darken the poster slightly so the play button reads clearly on any thumbnail */
.info-video-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.info-video-media.is-playing::after {
  opacity: 0;
}

/* Custom branded play button, replaces relying on default browser chrome */
.info-video-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  border: none;
  background: rgba(126, 16, 11, 0.92);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.info-video-play ion-icon {
  transform: translateX(2px);
}

.info-video-play:hover {
  background-color: #a3140d;
  transform: translate(-50%, -50%) scale(1.06);
}

.info-video-media.is-playing .info-video-play {
  opacity: 0;
  pointer-events: none;
}

/* Caption card: icon + copy, with a brand accent instead of a flat white box */
.info-video-text-box {
  position: relative;
  text-align: left;
  padding: 2.8rem 2.4rem 2.4rem;
  border-radius: 1.6rem;
  background-color: #fff;
  border-top: 4px solid #7e100b;
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.25);
  transition:
    opacity 0.6s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Only hidden once JS has taken over the reveal — keeps the card visible
   by default if JavaScript fails to load */
.info-video-text-box.reveal-pending {
  opacity: 0;
}

.info-video-text-box.reveal-pending.is-visible {
  opacity: 1;
}

.info-video-text-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.8rem 3.6rem rgba(0, 0, 0, 0.32);
}

.info-video-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(126, 16, 11, 0.14),
    rgba(126, 16, 11, 0.05)
  );
  margin-bottom: 1.2rem;
}

.info-video-icon-badge ion-icon {
  font-size: 2.2rem;
  color: #7e100b;
}

.info-video-text-box p {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* may use still */
/***********************************HEADER SECTION***********************************/

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: rgb(0, 0, 0, 0.8); */
  /* background-color: rgb(233, 236, 239, 0.8); */

  /* Because we want header to be sticky later */
  height: 4.2rem;
  padding: 1.2rem 2rem;
  position: relative;
}

.header-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: rgb(0, 0, 0, 0.8); */
  /* background-color: rgb(233, 236, 239, 0.8); */

  /* Because we want header to be sticky later */
  height: 4.2rem;
  padding: 1.2rem 2rem;
  position: relative;
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.95),
    rgba(126, 16, 11, 0.95)
  );

  position: relative;
}

.sticky .header-secondary {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 6.2rem;
  padding-top: 0;
  padding-bottom: 0;
  /* background-color: rgb(0, 0, 0, 0.8); */
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.95),
    rgba(126, 16, 11, 0.95)
  );

  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* Slide the fixed header out of view while scrolling down, back in on scroll up */
.sticky.nav-hidden .header-secondary {
  transform: translateY(-100%);
}

/* Fixes glitch */

/* .sticky .section-hero-tint {
  margin-top: 6.2rem;
} */

/* ************************************BENEFITS CARD************************************************************ */

.benefits-container {
  display: grid;
  /* Cards keep a stable minimum width and wrap onto new rows instead of
     shrinking — font size and card size stay constant at every viewport. */
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); */

  gap: 3.2rem;
  max-width: 120rem;
  margin: 0 auto;
}

.benefits-card {
  text-align: center;
  padding: 3.2rem 2.4rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(126, 16, 11, 0.35);
  background-color: #e9ecef;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.18);

  /* 🔑 hover setup */
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

.benefits-card:hover {
  transform: translateY(-8px); /* slides card up */
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.28);
}

.window-tint-benifits-description {
  color: #333;
  font-size: 1.4rem;
  line-height: 1.5;
  padding-top: 1rem;
}

.tint-icon {
  color: #7e100b;
  font-size: 3.6rem;
  padding-bottom: 1rem;
}

.center {
  margin: auto;
}