/* Default settings */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth !important;
  /* background-color: #f2f2f2; */
}

html {
  /* Nearly everything site-wide is sized in rem, so this one change
     scales almost the entire page proportionally (default is 16px).
     Experimental — revert to removing this rule (or set back to
     100%) if it doesn't hold up. */
  font-size: 90%;
}

html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.logo {
  height: 5rem;
}

/* Navigation  */
.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.main-nav-link {
  position: relative;
  text-decoration: none;
  color: #f2f2f2;
  font-size: 1rem;
}

.main-nav-link:hover {
  color: #f9e5ba;
  transition: all 0.3s;
  /* border-bottom: #f2f2f2 1px solid; */
}

/* underline (hidden by default) */
.main-nav-link::after {
  content: "";
  position: absolute;
  left: 0; /* start on the left side */
  bottom: -2px; /* just below the text */
  width: 0%; /* start invisible */
  height: 2px;
  background-color: #f9e5ba;
  transition: width 0.3s ease-in-out;
}

.main-nav-link:hover::after {
  width: 100%;
}

/* These next few lines are for the CONTACT selection */

.main-nav-list > li:last-child {
  background-color: #000;
  text-transform: uppercase;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 1rem;
}

.main-nav-list > li:last-child a {
  color: #f2f2f2;
}

.main-nav-list > li:last-child:hover {
  transition: all 0.4s;
  background-color: #000;
  padding: 8px;
  border: solid 1px #f2f2f2;
  border-radius: 1rem;
}

.main-nav-list > li:last-child:hover a {
  color: #f9e5ba;
  transition: all 0.4s;
  border-bottom: none;
}

.main-nav-list > li:last-child a::after {
  content: none;
}

/* Dropdown container */
.dropdown {
  position: relative;
}

/* Dropdown menu base — dark glass panel matching the site's premium
   glassmorphic accents elsewhere (.catcher-information, the mobile-nav
   overlay), floating below the toggle instead of a flat light box.
   Reveal is driven by opacity + transform (GPU-accelerated) rather than
   the old max-height animation, which forces a layout recalc every
   frame — the current recommended pattern for CSS-only dropdowns. */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0.9rem;
  background: rgba(20, 20, 20, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 240px;
  list-style: none;
  padding: 0.6rem;
  margin-bottom: 0;
  border-radius: 14px;
  box-shadow:
    0 1.2rem 3rem rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(126, 16, 11, 0.18);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -8px) scale(0.96);
  transition:
    opacity 0.25s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 9999;
}

/* Open state */
.dropdown-menu.open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

/* Dropdown links — individually rounded "pill" rows inside the glass
   panel (the same nested-chip pattern used in .price-card-tag /
   .tint-most-popular-badge elsewhere) instead of full-width flat rows,
   with a solid brand-red fill and a slight forward nudge on hover. */
.dropdown-menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.2rem;
  border-radius: 9px;
  color: #f2f2f2;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.dropdown-menu li + li {
  margin-top: 0.3rem;
}

.dropdown-menu li a:hover {
  background: #7e100b;
  color: #f9e5ba;
  transform: translateX(2px);
}

/* Arrow rotation */
.dropdown-toggle .arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-toggle.open .arrow {
  transform: rotate(180deg);
}

.main-nav-dropdown-menu-link {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* MOBILE */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #fff;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/*******************************************/
/* STICKY MOBILE ACTION BAR (phones only) */
/* Fixed to the bottom of the viewport so Call / Text / Get a Quote are one
   tap away at every scroll position. Hidden on desktop — the phone number
   and quote button live in the header action strip below instead. */
/*******************************************/

.mobile-bar {
  display: none;
}


/*******************************************/
/* HEADER ACTION STRIP (desktop) */
/* Phone + "Get a Quote" live in the header, so once the sticky-header
   behavior below pins the bar to the top on scroll (.sticky .header) both
   actions stay visible on every screen. Hidden below the desktop-nav
   breakpoint, where the hamburger + mobile action bar above take over. */
/*******************************************/

.header-cta {
  display: none;
}


/*******************************************/
/* STICKY NAVIGATION SECTION */
/*******************************************/
.sticky .header {
  /* This was fixed, if it causes issues I swapped the position to relative */
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  /* height: 6.2rem; */
  /* padding: 3.6rem 4.8rem; */

  /* 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 {
  transform: translateY(-100%);
}

/***********************************HERO SECTION***********************************/

.section-hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("../images/background-images/temp-main-background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.back-video {
  /* This position can be changed to absolute if errors begin\ */
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  object-position: top;

  /* Darkens the video background */
  filter: brightness(0.3);

  /* Starts invisible so the section's own background-image (the same jpg
     as the <video poster>) shows through underneath while the video file
     is still downloading/buffering. js/script.js adds .is-ready once the
     video has a decoded frame ready (loadeddata), fading it in instead of
     hard-cutting from the static poster straight to a moving frame. */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.back-video.is-ready {
  opacity: 1;
}


/* Hero content layout (badge, eyebrow, title, CTAs, trust row) used on the
   homepage and every service-page hero. .text-box is qualified with an
   ancestor element so it reliably beats the plain .text-box rules in
   general.css / queries.css regardless of stylesheet order. */
main .text-box {
  width: min(92vw, 58rem);
}

.hero2 {
  position: relative;
  text-align: left;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}


.hero2-eyebrow {
  font-family: "Roboto", sans-serif;
  font-size: clamp(0.68rem, 0.63rem + 0.2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1.1rem;
}

.hero2-title {
  font-family: "Roboto", sans-serif;
  text-transform: none;
  color: #fff;
  font-size: clamp(2.35rem, 1.6rem + 2.9vw, 4.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 1rem;
}
.hero2-title-brand {
  display: block;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ff5248;
  margin-bottom: 0.55rem;
}

.hero2-sub {
  font-family: "Lato", sans-serif;
  color: #fff;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  max-width: 48ch;
  margin: 0 0 1.7rem;
}
.hero2-sub strong {
  font-weight: 700;
  white-space: nowrap;
}

.hero2-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.hero2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.95rem 1.8rem;
  border-radius: 5rem;
  text-decoration: none;
  text-shadow: none;
  border: 2px solid transparent;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}
.hero2-btn ion-icon {
  font-size: 1.15em;
}
.hero2-btn--primary {
  background: #7e100b;
  color: #fff;
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.4);
}
.hero2-btn--primary:hover,
.hero2-btn--primary:focus-visible {
  background: #fff;
  color: #7e100b;
}
.hero2-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero2-btn--ghost:hover,
.hero2-btn--ghost:focus-visible {
  background: #fff;
  color: #141110;
  border-color: #fff;
}

.hero2-tertiary {
  display: inline-block;
  margin: 0 0 1.6rem;
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  text-underline-offset: 3px;
}
.hero2-tertiary:hover {
  color: #fff;
}

.hero2-trust {
  list-style: none;
  margin: 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.hero2-trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Lato", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}
.hero2-trust ion-icon {
  color: #ff5248;
  font-size: 1.05rem;
  flex: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}


/* Google reviews badge — real data: 5.0 rating, 40 reviews. Sits as the
   first element in the hero so it's among the first things seen. */

.g-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.62rem;
  margin: 0 0 1.5rem;
  padding: 0.55rem 0.95rem 0.55rem 0.68rem;
  border-radius: 999px;
  text-decoration: none;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow:
    0 12px 34px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.g-badge:hover,
.g-badge:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
}

.g-badge-g {
  width: 20px;
  height: 20px;
  flex: none;
}

.g-badge-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.g-badge-score {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.g-badge-stars {
  color: #fbbc04;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  line-height: 1;
  /* trims the trailing letter-spacing after the last star */
  margin-right: -1.5px;
}

.g-badge-divider {
  width: 1px;
  height: 15px;
  flex: none;
  background: rgba(255, 255, 255, 0.32);
}

.g-badge-count {
  font-family: "Lato", sans-serif;
  font-size: 0.85rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.g-badge-chevron {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  flex: none;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.g-badge:hover .g-badge-chevron,
.g-badge:focus-visible .g-badge-chevron {
  color: #fff;
  transform: translateX(2px);
}


/* Hero background video (index.html section-hero only). Uses the site's
   existing .back-video class; must come after the base .section-hero /
   .back-video rules above so its height/position win the equal-specificity
   tie. Keep this free of anything that makes .section-hero a stacking
   context or sets position/z-index on .header — the header becomes
   position:fixed / z-index:999 on scroll (.sticky .header above) and an
   equal-specificity rule here would silently override it and kill the
   sticky nav. The video paints behind the header and copy via DOM order +
   object-fit; a brightness filter stands in for a separate scrim layer. */
.section-hero {
  /* Track the video's own 16:9 shape so a full-width background clip fills
     the hero with no vertical crop / "zoom". Never taller than the viewport,
     never shorter than the copy needs. */
  height: min(100vh, 56.25vw);
  min-height: 640px;
}
.section-hero .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.4) saturate(1.05);
}


/***********************************CATCHER SECTION***********************************/
.section-catcher {
  position: relative;
  padding: 9.6rem;
  overflow: hidden;

  /* Let more of the highway light-trail photo read through — a flat 60%
     black flattened it into an almost-solid black rectangle. A gradient
     (darker at the edges for text contrast, lighter through the middle)
     plus a brand-red wash keeps contrast where it's needed without
     smothering the image. */
  background:
    linear-gradient(
      160deg,
      rgba(126, 16, 11, 0.4) 0%,
      rgba(0, 0, 0, 0.45) 30%,
      rgba(0, 0, 0, 0.72) 100%
    ),
    url("../images/background-images/highwah-background.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subtle film-grain texture — cheap (inline SVG, no image request) and
   keeps the large flat gradient from looking sterile/banded */
.section-catcher::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.catcher {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.65fr 1fr 0.65fr;
  align-items: center;
  gap: 3.2rem;
  max-width: 120rem; /* a bit tighter than 145rem looks more premium */
  margin: 0 auto;

  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.catcher.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
}

.catcher.reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.catcher-information {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;

  /* Glass panel instead of a flat opaque card — reads as premium against
     a dark, photographic background and lets the highway lights show
     through at the edges instead of hard-cutting to white */
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2rem;
  padding: 3.2rem 3.2rem;
  box-shadow:
    0 1.6rem 3.6rem rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(126, 16, 11, 0.15);
}

.catcher-media {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
}

.catch-img {
  width: 100%;
  max-width: 30rem;
  height: 30rem;
  object-fit: cover;

  border-radius: 2.4rem; /* less “pill”, more modern premium */
  margin: 0 auto;
  display: block;

  border: 2px solid rgba(126, 16, 11, 0.35);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.18);

  /* motion */
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;
}

/* premium “hover lift” */
.catch-img:hover {
  transform: translateY(-6px);
  box-shadow: 0 2.6rem 5.4rem rgba(0, 0, 0, 0.22);
  border-color: rgba(126, 16, 11, 0.55);
}

.catcher-media-caption {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.catcher-text {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* Make the inner heading look like a real CTA headline */
.catcher-information h2.catcher-text {
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0;
}

.catcher-information .bold {
  color: #fff;
}

/* Make the paragraph more readable */
.catcher-information p.catcher-text {
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 48rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
}

/* Button: make it feel more “book now / get quote” */
.catcher-information .btn {
  margin-top: 0.8rem;
  justify-self: center;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.catcher-information .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.18);
}

/***********************************ABOUT US SECTION***********************************/

/***********************************SERVICES SECTION***********************************/
.section-services {
  background: linear-gradient(
    to right,
    #141414,
    #1e1e1e,
    rgba(126, 16, 11, 0.95)
  );
  padding: 9.6rem;
}

/* Card grid instead of long alternating image/text rows — lets a visitor
   scan all five services without scrolling through five full-width rows */
.services-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.8rem;
  padding-top: 3.2rem;
  max-width: 120rem;
  margin: 0 auto;
  align-items: start;
}

/* Each service is a self-contained card: image banner + condensed copy */
.service {
  position: relative;
  background: #fff;
  border-radius: 1.6rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.14);
  overflow: hidden;
  text-align: center;

  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.service.reveal-pending {
  opacity: 0;
}

.service.reveal-pending.is-visible {
  opacity: 1;
}

.service:hover {
  transform: translateY(-8px);
  box-shadow: 0 2.2rem 4.4rem rgba(0, 0, 0, 0.22);
}

.service-image {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid rgba(126, 16, 11, 0.35);
}

.service-body {
  padding: 1.35rem 1.8rem 1.8rem;
}

.service-heading {
  color: #111;
  font-size: 1.8rem;
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
}

.service-price {
  display: inline-block;
  margin: -0.5rem 0 1.1rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(126, 16, 11, 0.08);
  color: #7e100b;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.service-body .features-list {
  text-align: center;
  margin-bottom: 1.4rem;
}

.service-body .features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding-left: 0;
  margin: 0 auto 0.6rem;
  font-size: 1.2rem;
}

.service-body .features-list li::before {
  position: static;
  content: "✔";
  color: #7e100b;
  font-weight: 700;
  font-size: 1rem;
}

/***********************************CAROUSEl SECTION***********************************/
.section-carousel {
  background-color: #f2f2f2;
  padding-top: 8.6rem;
  padding-bottom: 4rem;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  row-gap: 1rem;
  border-top: solid 1px #7e100b;
  text-align: center;
}

.carousel {
  width: 100%;
  overflow: hidden;

  /* ✅ creates room INSIDE the clipped area for shadows to show */
  padding: 24px 0;
}

.carousel-track {
  display: flex;
  gap: 2rem;
  will-change: transform;

  /* ✅ keeps your images aligned as before */
  margin: -24px 0;
  padding: 24px 0;
}

.carousel img {
  width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.22);
}

/***********************************GALLERY SECTION***********************************/
.section-gallery {
  background: linear-gradient(
    to right,
    rgba(126, 16, 11, 0.95),
    #141414,
    #1e1e1e
  );
  padding: 7.2rem 2rem;
}

.gallery-container {
  /* max-width: 120rem; */
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem; /* professional spacing */
}

/* index.html's gallery only — two rows scrolling in opposite
   directions (reuses the same generic .carousel/.carousel-track
   mechanism as the partnerships logos and the Tintcar strip) instead
   of the static 3-column grid above. Scoped with :has() so
   wraps.html's separate, un-converted .gallery-container (3 images,
   no .carousel children) keeps its original grid layout untouched —
   .gallery-container is a shared class name between the two pages. */
.gallery-container:has(.carousel) {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.gallery-container .carousel-track {
  gap: 1.6rem;
}

/* Same soft edge-fade as the brands strip (.partnerships-container), so
   photos dissolve at the sides instead of hard-clipping. */
.gallery-container .carousel {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

/* .carousel img (sized/cropped for the Tintcar photo strip elsewhere
   on the site) is a class+tag selector, more specific than the single
   class on .gallery-images, so it would otherwise win the cascade
   here and force every photo into a fixed, non-responsive 400x250 box
   — silently breaking the 740px breakpoint's aspect-ratio:1/1 rule in
   queries.css. Override with a selector specific enough to win,
   restoring the original sizing/appearance untouched. */
.gallery-container .gallery-images {
  width: 26rem; /* fixed, not 100% — in a flex row, 100% competes with
    every sibling for the same space and flex-shrink squeezes each one
    down by a different amount depending on its own aspect ratio */
  height: 20rem; /* key: consistent thumbnail size */
  flex-shrink: 0; /* lock the fixed size above instead of letting it shrink */
  object-fit: cover; /* key: crops nicely */
  display: block;
  cursor: pointer;

  border-radius: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.12);

  transform: translateY(0) scale(1);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.gallery-images:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 2.4rem 5.2rem rgba(0, 0, 0, 0.18);
  filter: saturate(1.05) contrast(1.02);
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}

.lightbox.active {
  display: flex;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 1rem;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.5);
  animation: lightbox-pop 220ms ease;
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 3rem;
  font-size: 4rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

@keyframes lightbox-pop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/***********************************PARTNERSHIP SECTION***********************************/
.section-partnerships {
  padding: 9.6rem 4.8rem;
  background-color: #f2f2f2;
  text-align: center;
}

.partnerships-container {
  /* max-width: 1100px; */
  margin: 4.8rem auto 0;

  /* Edge-fade: logos dissolve at the sides instead of hard-clipping where
     the marquee's overflow:hidden cuts them off. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

/* Trust-bar framing — two hairlines bracket the logo strip. The bottom one
   also doubles as the seam between this section and Fleet & Commercial,
   which otherwise share the same flat #f2f2f2 background with no border
   between them. */
.brand-divider {
  max-width: 72rem;
  height: 1px;
  margin: 3.2rem auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(126, 16, 11, 0.35),
    transparent
  );
}
.brand-divider--bottom {
  margin: 4.8rem auto 0;
}

/* Auto-scrolling marquee — reuses the site's existing generic
   .carousel/.carousel-track mechanism (see the Tintcar strip), which
   auto-discovers any matching element via JS, so no new script is
   needed here. .partnerships-img's own sizing is left untouched so
   the queries.css breakpoints for it keep working unchanged; only the
   original 4.8rem gap is preserved here (the shared .carousel-track
   default is 2rem). */
.partnerships-container .carousel-track {
  align-items: center;
  gap: 4.8rem;
}

/* .carousel img (sized/cropped for the Tintcar photo strip elsewhere
   on the site) is a class+tag selector, more specific than the single
   class on .partnerships-img, so it was winning the cascade here and
   force-cropping every logo into a fixed 400x250 box. Override with a
   selector specific enough to win, restoring the original untouched
   sizing and dropping the photo-strip's rounded corners/shadow that
   don't belong on a logo. */
.partnerships-container .partnerships-img {
  width: auto; /* not 100% — see .gallery-container .gallery-images above */
  height: auto;
  max-width: 260px;
  flex-shrink: 0;
  object-fit: initial;
  border-radius: 0;
  box-shadow: none;
}

.partnerships-img {
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 auto;

  transition: transform 0.3s ease;
}

.partnerships-img:hover {
  transform: scale(1.05);
}

/***********************************TESTIMONIAL SECTION***********************************/

.section-testimonials {
  padding: 6.4rem 4.8rem;
  justify-content: center;
  background-color: #f2f2f2;
  border-top: 1px solid #7e100b;
}

.testimonials-box {
  display: inline-block;
  max-width: 60rem;
  border-radius: 1.6rem;
  padding: 2.4rem 3.2rem;
  transition: 0.3s;
  text-align: center;
  margin: 0 auto;
}

.testimonials-name {
  font-weight: 700;
  font-size: 2.2rem;
  font-family: "merriweather";
  color: #7e100b;
  padding-top: 0.8rem;
}

.testimonials-title {
  align-items: center;
}

.testimonials-review {
  font-size: 1.5rem;
  padding-top: 1.2rem;
  font-family: "merriweather";
  line-height: 1.4;
  color: #333;
}
.test-parenth {
  font-size: 1.8rem;
  color: #7e100b;
}

/* SLIDER */
.slider {
  max-width: 100rem;
  height: 30rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.slider__btn {
  position: absolute;
  top: 50%;
  z-index: 10;

  background: #f2f2f2;
  font-family: inherit;
  color: #7e100b;
  border-radius: 50%;
  border-color: #7e100b;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 4%;
  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 4%;
  transform: translate(50%, -50%);
}

.testimonial-star-list {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(5, 0.09fr);
  padding-top: 0.8rem;
}

.star-icon {
  color: #fbbc04;
  font-size: 2rem;
}

.dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #444;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  background: #7e100b;
  opacity: 1;
}

/***********************************FOOTER SECTION***********************************/

.footer {
  padding: 9.6rem;
  background-color: #f2f2f2;
  border-top: solid 1px #7e100b;
  overflow: hidden;
  /* max-width: 150rem; */
}

.footer-div {
  margin: 0 auto;
  max-width: 145rem;
}

.footer-logo {
  width: 8rem;
  height: auto;
}

.logo-icons {
  height: 3.2rem;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 1.8rem;
}

.copyright-order-1 {
  order: 1;
}

.copyright-order-2 {
  order: 2;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.8rem;
  transition: all 0.5s;
  color: #f2f2f2;
}

.logo-link-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-pic-info {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 2rem;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #000;
  margin-bottom: 4.2rem;
}

.card-schedule-today-link {
  font-size: 1.3rem;
  color: #333;
  text-decoration: none;
}

.card-schedule-today-link:hover {
  color: #7e100b;
  transition: all 0.3s;
}

.card-schedule-today-link:visited {
  color: #333;
}

.footer-map {
  width: 100%;
  border-radius: 15px;

  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.2);
}

.footer-card-info-title {
  margin-top: 1.8rem;
  font-size: 20px;
  color: #f2f2f2;
  font-family: "merriweather";
}

/* New code */
:root {
  --brand: #7e100b;
  --bg: #f2f2f2;
  --card: #ffffff;
  --text: #333;
  --muted: #666;
  --border: rgba(0, 0, 0, 0.08);
}

.hours-bar {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  background: var(--bg);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow-x: auto; /* scroll on small screens */
}

.hours-pill {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px 10px;
  text-align: center;
  color: var(--text);
  min-width: 120px;
}

.hours-day {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.hours-time {
  font-size: 0.9rem;
  color: var(--muted);
}

.hours-status {
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Highlight TODAY */
.hours-pill.is-today {
  border: 2px solid var(--brand);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Brand emphasis */
.hours-pill.is-today .hours-day,
.hours-pill.is-today .hours-status {
  color: var(--brand);
}

/* Optional: open/closed tint */
.hours-pill.is-today.is-open {
  background: linear-gradient(180deg, rgba(126, 16, 11, 0.08), #fff 70%);
}

.hours-pill.is-today.is-closed {
  background: linear-gradient(180deg, rgba(126, 16, 11, 0.05), #fff 70%);
}

/* Footer: cleaner, centered, more premium */
.footer {
  padding: 6.4rem 9.6rem; /* slightly less tall than 9.6rem all around */
  background-color: #f2f2f2;
  border-top: solid 1px #7e100b;
  overflow: hidden;
}

/* Constrain footer content width */
.footer > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Hours bar: make it feel like a footer module */
.footer .hours-bar {
  background: #e9ecef;
  border: 1px solid rgba(126, 16, 11, 0.18);
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.1);
  margin-bottom: 3.2rem;
}

/* Slightly tighten pills for footer density */
.footer .hours-pill {
  border-radius: 14px;
}

/* Bottom row layout: logo | copyright | socials */
.logo-link-copy {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(126, 16, 11, 0.18);
}

/* If you keep this class in HTML */
.section-footer-logo-link {
  display: inline-flex;
  align-items: center;
}

/* Copyright: clean, centered, consistent */
.copyright {
  font-size: 20px;
  line-height: 2.1rem;
  text-align: center;
  color: #333;
  margin: 0;
}

/* Socials: align right, with professional hover chip */
.social-links {
  justify-content: flex-end;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}

.footer-link:link,
.footer-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  padding: 25px;
  border-radius: 12px;

  text-decoration: none;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
  background-color: #e9ecef;
}

/* Hover: brand pop, but still classy */
.footer-link:hover,
.footer-link:active {
  background-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ==========================================================================
   SITE FOOTER — dark, multi-column (Explore / Services / Get In Touch),
   the shop-hours widget as its own banded strip, then a slim credit bar.
   Used on every page. Inspiration: gpautoglass.com's quick-contact strip,
   multi-column dark footer and circular social icons — reworked in WOT's
   own black/oxblood palette rather than their navy/yellow.
   The old .footer / .footer-div / .footer-pic-info / .booking-* rules
   above are untouched — index.html's "Schedule Today" band still uses
   them; this new block only concerns what comes after it (or, on every
   other page, the entire footer). ========================================================================== */
.site-footer {
  position: relative;
  background: #15130f;
}
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #7e100b, #ff5248, #7e100b);
}
.site-footer-inner {
  max-width: 120rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4.8rem) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
}
.footer-col {
  min-width: 0;
}

.footer-brand-logo {
  width: 7rem;
  height: auto;
  margin-bottom: 1.2rem;
}
.footer-tagline {
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(242, 237, 228, 0.68);
  max-width: 30ch;
  margin: 0 0 1.4rem;
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #7e100b;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 5rem;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.footer-cta:hover {
  background: #ff5248;
  transform: translateY(-2px);
}

.footer-heading {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.3rem;
  position: relative;
  padding-bottom: 0.8rem;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4rem;
  height: 3px;
  background: linear-gradient(90deg, #7e100b, #ff5248);
  border-radius: 999px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.footer-links a {
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  color: rgba(242, 237, 228, 0.78);
  text-decoration: none;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.footer-links a:hover {
  color: #ff5248;
  padding-left: 0.3rem;
}

.footer-contact {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.footer-contact ion-icon {
  color: #ff5248;
  font-size: 1.15rem;
  flex: none;
  margin-top: 0.15rem;
}
.footer-contact a {
  font-family: "Lato", sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(242, 237, 228, 0.78);
  text-decoration: none;
}
.footer-contact a:hover {
  color: #ff5248;
}

.footer-social {
  display: flex;
  gap: 0.8rem;
}

/* --- BBB seal: footer card (every page) --- */
.footer-bbb {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.4rem;
  padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 242, 242, 0.14);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.footer-bbb:hover {
  border-color: rgba(242, 242, 242, 0.3);
  background: rgba(255, 255, 255, 0.07);
}
.footer-bbb-text {
  display: grid;
  gap: 0.2rem;
  text-align: left;
}
.footer-bbb-text strong {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.footer-bbb-text a {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ff8078;
  text-decoration: none;
}
.footer-bbb-text a:hover,
.footer-bbb-text a:focus-visible {
  color: #fff;
}

/* --- BBB seal: about-section card, paired with the Google badge --- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.2rem;
  margin: 0 0 2rem;
}
.trust-row .g-badge.g-badge--light {
  margin: 0;
}
.bbb-card {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 1.2rem 0.5rem 0.5rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(32, 28, 25, 0.14);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.bbb-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 90, 140, 0.35);
  box-shadow: 0 14px 28px -16px rgba(0, 40, 90, 0.45);
}
.bbb-card-text {
  display: grid;
  gap: 0.2rem;
}
.bbb-card-text strong {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #201c19;
}
.bbb-card-text a {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #005a8c; /* BBB blue */
  text-decoration: none;
}
.bbb-card-text a:hover,
.bbb-card-text a:focus-visible {
  text-decoration: underline;
}

/* the seal itself (both cards): 160x144 source shown at 64px tall */
.footer-bbb .ruvtbul,
.bbb-card .ruvtbul {
  flex: none;
  display: block;
  line-height: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.footer-bbb .ruvtbul img,
.bbb-card .ruvtbul img {
  display: block;
  height: 64px;
  width: auto;
}
.footer-bbb .ruvtbul:hover,
.bbb-card .ruvtbul:hover {
  transform: scale(1.04);
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.footer-social-link:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 82, 72, 0.5);
  background: rgba(255, 82, 72, 0.12);
}
.footer-social-link img {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
}

/* --- shop hours: same #hoursBar widget and JS, re-themed for a dark
   footer by overriding the custom properties .hours-bar/.hours-pill
   already read from (see the :root block above) --- */
.footer-hours-wrap {
  --bg: #1c1815;
  --card: #241f1b;
  --text: #f2ede4;
  --muted: #b9ac9f;
  --border: rgba(255, 255, 255, 0.1);
  --brand: #ff5248;
  padding: 2.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-hours-label {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff5248;
  margin: 0 0 1rem;
  text-align: center;
}
.footer-hours-wrap .hours-pill.is-today.is-open {
  background: linear-gradient(180deg, rgba(255, 82, 72, 0.18), #241f1b 70%);
}
.footer-hours-wrap .hours-pill.is-today.is-closed {
  background: linear-gradient(180deg, rgba(255, 82, 72, 0.1), #241f1b 70%);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.6rem 0;
  text-align: center;
}
.footer-copy {
  font-family: "Lato", sans-serif;
  font-size: 0.82rem;
  color: rgba(242, 237, 228, 0.5);
  margin: 0;
}


/************************************************************************************/
/************************************************************************************/
/***********************************SITE-WIDE COMPONENTS***********************************/
/* Shared across the homepage and every service page: the page-jump nav,   */
/* the dark/light content band, the credibility band, the reviews header,  */
/* how-it-works steps, the on-page review proof band, the price-logic      */
/* band, the financing note, fleet & commercial, the FAQ, the quick-quote  */
/* form, and the partners claim line.                                      */
/************************************************************************************/

/* --- page jump nav (under hero, every service page) --- */
.page-jump {
  background: #0d0c0b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
}
.page-jump-inner {
  max-width: 122rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
}
.page-jump a {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #f2ede4;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.page-jump a:hover {
  background: rgba(255, 82, 72, 0.14);
  border-color: #ff5248;
  color: #fff;
}

/* --- dark/light content band (homepage + every service page) --- */
.hp-band {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4.8rem);
}
.hp-band--dark {
  background: #131110;
  color: #f2ede4;
}
.hp-band--video {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* Fallback shown only until the video's loadeddata fires and
     js/script.js adds .is-ready to fade it in (see .back-video below) —
     once the video is visible it fully covers this. */
  background: #131110;
}
.hp-band--video > .hp-inner {
  position: relative;
  z-index: 1;
}
.hp-band--light {
  background: #f2f2f2;
  color: #201c19;
}
.hp-inner {
  max-width: 120rem;
  margin-inline: auto;
}
.hp-kicker {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff5248;
  margin: 0 0 0.8rem;
  text-align: center;
}
.hp-h2 {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 1rem;
}
.hp-h2--dark {
  color: #fff;
}
.hp-h2--light {
  color: #201c19;
}
.hp-lead {
  max-width: 62ch;
  margin: 0 auto 3rem;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.92;
}

/* --- credibility band (under homepage hero) --- */
.cred-band {
  background: #0d0c0b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.35rem clamp(1rem, 4vw, 3rem);
}
.cred-band-inner {
  max-width: 122rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 2.4rem;
}
.cred-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f2ede4;
  position: relative;
}
.cred-item ion-icon {
  font-size: 1.3rem;
  color: #ff5248;
  flex: none;
}


/* --- reviews aggregate header (homepage) --- */
.reviews-agg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  /* margin: -1rem auto 2.6rem; */
}
.reviews-agg-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.reviews-agg-score {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: #201c19;
}
.reviews-agg-stars {
  color: #fbbc04;
  font-size: 1.35rem;
  letter-spacing: 2px;
}
.reviews-agg-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  color: #5a5148;
}
.reviews-agg-meta svg {
  width: 17px;
  height: 17px;
}
.reviews-agg-links {
  display: flex;
  gap: 1.3rem;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
}
.rev-tag {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: "Roboto", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e100b;
  background: rgba(126, 16, 11, 0.1);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  vertical-align: middle;
}

/* --- how it works (homepage) --- */
.how-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  max-width: 108rem;
  margin-inline: auto;
}
.how-step {
  text-align: center;
  padding: 0 0.4rem;
}
.how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #ff5248;
  color: #ff5248;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.how-step h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: #fff;
  margin: 0 0 0.4rem;
}
.how-step p {
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(242, 237, 228, 0.75);
  margin: 0;
}


/* --- on-page proof: credentials + review quotes (every service page) --- */
.tproof-cred {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 2rem;
  margin: 0 auto 2.6rem;
  max-width: 90rem;
}
.tproof-cred span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #201c19;
}
.tproof-cred ion-icon {
  font-size: 1.25rem;
  color: #7e100b;
  flex: none;
}
.tproof-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  max-width: 100rem;
  margin-inline: auto;
}
.tproof-review {
  background: #fff;
  border: 1px solid #e0dccf;
  border-radius: 0.8rem;
  padding: 1.3rem 1.4rem;
  font-family: "Lato", sans-serif;
}
.tproof-review .tpr-stars {
  color: #fbbc04;
  letter-spacing: 2px;
  font-size: 0.95rem;
}
.tproof-review p {
  margin: 0.5rem 0 0.8rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #33302b;
}
.tproof-review .tpr-name {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #201c19;
}
.tproof-review .tpr-src {
  font-size: 0.8rem;
  color: #7a7168;
}

/* --- FAQ, native details/summary (every service page) --- */
.faq-list {
  max-width: 68rem;
  margin-inline: auto;
  display: grid;
  gap: 0.7rem;
}
.faq-item {
  background: #fff;
  border: 1px solid #e0dccf;
  border-radius: 0.7rem;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #201c19;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: #7e100b;
  line-height: 1;
  flex: none;
}
.faq-item[open] summary::after {
  content: "\2013";
}
.faq-item .faq-a {
  padding: 0 1.3rem 1.15rem;
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a423b;
}

/* --- "what goes into your price" quote-qualifier band (every service
   page). Sits on a .hp-band--dark between the benefits cards and the
   FAQ. --- */
.qprice-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 112rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.qprice-factor {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 237, 228, 0.14);
  border-radius: 0.9rem;
  padding: 1.6rem 1.4rem;
  text-align: left;
}
.qprice-factor > ion-icon {
  font-size: 1.8rem;
  color: #ff5248;
}
.qprice-factor h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: #fff;
  margin: 0.6rem 0 0.4rem;
}
.qprice-factor p {
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(242, 237, 228, 0.75);
  margin: 0 0 0.9rem;
}
.qprice-range {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #f2ede4;
  background: rgba(126, 16, 11, 0.35);
  border: 1px solid rgba(255, 82, 72, 0.4);
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
}
.qprice-compare {
  max-width: 92rem;
  margin: 2.6rem auto 0;
  padding: 1.6rem 1.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 237, 228, 0.14);
  border-radius: 0.9rem;
}
.qprice-compare-h {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin: 0 0 0.9rem;
  text-align: center;
}
.qprice-compare ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.6rem;
}
.qprice-compare li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: "Lato", sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(242, 237, 228, 0.82);
}
.qprice-compare li ion-icon {
  color: #3fae6b;
  font-size: 1.15rem;
  flex: none;
  margin-top: 0.05rem;
}
/* "The Wide Open Throttle Difference" variant (tint.html): heading +
   tagline + intro, and checklist items with a bold title over a short
   description. The plain .qprice-compare on other pages is unchanged. */
.qprice-compare--detailed {
  padding: 2.2rem 2.4rem;
  background:
    radial-gradient(
      40rem 18rem at 50% 0%,
      rgba(126, 16, 11, 0.28),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.04);
}
.qprice-compare--detailed .qprice-compare-h {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.qprice-compare-tag {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff5248;
  text-align: center;
  margin: 0 0 0.8rem;
}
.qprice-compare-intro {
  font-family: "Lato", sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(242, 237, 228, 0.82);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 1.8rem;
}
.qprice-compare--detailed ul {
  gap: 1.2rem 2.2rem;
}
.qprice-compare--detailed li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(242, 237, 228, 0.75);
}
.qprice-compare--detailed li b {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.15rem;
}
/* odd item out (5th) centers under the two columns */
.qprice-compare--detailed li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: calc(50% - 1.1rem);
}

.qprice-cta {
  text-align: center;
  margin: 2.6rem auto 0;
}
.qprice-cta-h {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.5rem;
}
.qprice-cta .qprice-cta-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(242, 237, 228, 0.82);
  max-width: 46ch;
  margin: 0 auto 1.4rem;
}
.qprice-cta p {
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  color: rgba(242, 237, 228, 0.72);
  margin: 0.9rem 0 0;
}


/* --- financing / investment note (ppf, wraps, custom) --- */
.ppf-finance {
  max-width: 60rem;
  margin: 0 auto 2.4rem;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  color: #4a423b;
  background: #fff;
  border: 1px solid #e0dccf;
  border-radius: 0.7rem;
  padding: 0.9rem 1.2rem;
}
.ppf-finance b {
  font-family: "Roboto", sans-serif;
  color: #7e100b;
}

/* --- fleet & commercial (homepage + wraps) --- */
.fleet-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 112rem;
  margin-inline: auto;
  text-align: left;
}
.fleet-wrap > div:last-child img {
  width: 100%;
  border-radius: 1rem;
  display: block;
}
.fleet-wrap .hp-kicker,
.fleet-wrap .hp-h2 {
  text-align: left;
}
.fleet-wrap .hp-h2 {
  margin-bottom: 0.8rem;
}
.fleet-list {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 2rem;
  display: grid;
  gap: 0.7rem;
}
.fleet-list li {
  display: flex;
  gap: 0.6rem;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
.fleet-list ion-icon {
  color: #ff5248;
  font-size: 1.2rem;
  flex: none;
  margin-top: 0.15rem;
}


/* --- about section (homepage) --- */
.about-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 112rem;
  margin-inline: auto;
  text-align: left;
}
.about-wrap > div:last-child img {
  width: 100%;
  border-radius: 1rem;
  display: block;
}
.about-wrap .hp-kicker,
.about-wrap .hp-h2 {
  text-align: left;
}
.about-wrap .hp-h2 {
  margin-bottom: 0.8rem;
}
.about-list {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 2rem;
  display: grid;
  gap: 0.7rem;
}
.about-list li {
  display: flex;
  gap: 0.6rem;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
.about-list ion-icon {
  color: #ff5248;
  font-size: 1.2rem;
  flex: none;
  margin-top: 0.15rem;
}

/* Google rating badge on a light band (about section). Two-class selectors
   so the left-aligned margin beats the mobile .g-badge centering rule. */
.g-badge.g-badge--light {
  margin: 0 0 2rem;
  background: #fff;
  border-color: rgba(32, 28, 25, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.35);
}
.g-badge.g-badge--light:hover,
.g-badge.g-badge--light:focus-visible {
  background: #fff;
  border-color: rgba(32, 28, 25, 0.3);
}
.g-badge--light .g-badge-score {
  color: #201c19;
}
.g-badge--light .g-badge-divider {
  background: rgba(32, 28, 25, 0.2);
}
.g-badge--light .g-badge-count {
  color: #555;
}
.g-badge--light .g-badge-chevron {
  color: rgba(32, 28, 25, 0.4);
}
.g-badge--light:hover .g-badge-chevron,
.g-badge--light:focus-visible .g-badge-chevron {
  color: #201c19;
}


/* --- financing band (homepage) --- */
.finance-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 2.2rem;
  max-width: 60rem;
}
.finance-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Lato", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
}
.finance-list ion-icon {
  color: #ff5248;
  font-size: 1.3rem;
  flex: none;
}

#financing .center {
  display: block;
  text-align: center;
}

/* --- guides & tips grid (homepage) --- */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem;
  max-width: 100rem;
  margin-inline: auto;
}
.tip-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.6rem 1.5rem;
}
.tip-card h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.tip-card p {
  font-family: "Lato", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(242, 237, 228, 0.85);
  margin: 0 0 0.9rem;
}
.tip-card a {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ff5248;
  text-decoration: none;
}
.tip-card a:hover {
  text-decoration: underline;
}

/* --- before/after comparison slider (homepage) --- */
.section-ba {
  background: #fff;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4.8rem);
}
.ba-slider {
  max-width: 70rem;
  margin: 0 auto;
}
.ba-slider-frame {
  --reveal: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.18);
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.ba-img--before {
  z-index: 1;
}
.ba-img--after {
  z-index: 2;
  clip-path: inset(0 0 0 var(--reveal));
}
.ba-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.ba-slider-handle ion-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.6rem;
  height: 2.6rem;
  background: #fff;
  color: #7e100b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.ba-slider-label {
  position: absolute;
  top: 1rem;
  z-index: 3;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}
.ba-slider-label--before {
  left: 1rem;
}
.ba-slider-label--after {
  right: 1rem;
}
.ba-slider-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  appearance: none;
  -webkit-appearance: none;
}

/* --- quick-quote form (homepage + every service page except tint) --- */
.qq-wrap {
  max-width: 58rem;
  margin-inline: auto;
  background: #1b1613;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.qq-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.qq-form .qq-full {
  grid-column: 1 / -1;
}
.qq-input,
.qq-select,
.qq-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(126, 16, 11, 0.45);
  border-radius: 0.7rem;
  padding: 0.8rem 1rem;
  color: #f2ede4;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
}
.qq-input::placeholder,
.qq-textarea::placeholder {
  color: rgba(242, 237, 228, 0.5);
}
.qq-select {
  appearance: none;
}
.qq-select:invalid {
  color: rgba(242, 237, 228, 0.5);
}
/* the native option list renders on a light system menu — force dark text
   so it stays readable when the dropdown is open */
.qq-select option,
.tint-quote-select option {
  color: #201c19;
  background: #fff;
}
.qq-textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.qq-input:focus,
.qq-select:focus,
.qq-textarea:focus {
  outline: none;
  border-color: #b23d2f;
  background: rgba(255, 255, 255, 0.08);
}
.qq-btn {
  grid-column: 1 / -1;
  background: #7e100b;
  color: #fff;
  border: 2px solid #7e100b;
  border-radius: 5rem;
  padding: 0.95rem;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.qq-btn:hover,
.qq-btn:focus-visible {
  background: #fff;
  color: #7e100b;
}
/* Form submit result (js/script.js "FORM SUBMISSIONS"). Shared by every
   Web3Forms form; text color inherits so it reads on light and dark
   backgrounds. Once sent, the fields hide and only the message shows. */
.form-status {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  border-radius: 0.8rem;
  border: 1px solid;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}
/* display:grid above would otherwise override the [hidden] attribute and
   show an empty outlined box under every form before it's submitted */
.form-status[hidden] {
  display: none;
}
.form-status:focus {
  outline: none;
}
.form-status strong {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
}
.form-status a {
  color: inherit;
  font-weight: 700;
}
.form-status--success {
  background: rgba(63, 174, 107, 0.12);
  border-color: #3fae6b;
}
.form-status--error {
  background: rgba(255, 82, 72, 0.1);
  border-color: #ff5248;
}
form.is-sent > :not(.form-status) {
  display: none;
}
/* Dark form cards whose own text color is dark — force the message white */
.section-contact .form-status,
.tint-quote-card .form-status {
  color: #fff;
}

.qq-alt {
  text-align: center;
  margin: 1rem 0 0;
  font-family: "Lato", sans-serif;
  font-size: 0.9rem;
  color: rgba(242, 237, 228, 0.72);
}
.qq-alt a {
  color: #ff8078;
}


/* --- partners reframe (homepage) --- */
.partners-claim {
  max-width: 64ch;
  margin: 0.5rem auto 0;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #5a5148;
  text-align: center;
}

/************************************************************************************/
/************************************************************************************/
/***********************************TINT PAGE STYLING***********************************/
/************************************************************************************/
/************************************************************************************/

/* --- CS vs XR explainer (above the price cards) --- */
.csxr-note {
  max-width: 100rem;
  margin: 0 auto 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.csxr-card {
  background: var(--wot-surface, #fff);
  border: 1px solid #e0dccf;
  border-left: 3px solid #7e100b;
  border-radius: 0.7rem;
  padding: 1rem 1.2rem;
  font-family: "Lato", sans-serif;
}
.csxr-card b {
  font-family: "Roboto", sans-serif;
  display: block;
  font-size: 1.02rem;
  margin-bottom: 0.2rem;
  color: #201c19;
}
.csxr-card span {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4a423b;
}
.csxr-help {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  color: #4a423b;
}
.csxr-help a {
  font-weight: 700;
  color: #7e100b;
}


/* --- Michigan tint law --- */
.tintlaw-grid {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
  overflow: hidden;
}
.tintlaw-cell {
  background: #17130f;
  padding: 1.1rem 1.2rem;
}
.tintlaw-cell dt {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ff8078;
  margin-bottom: 0.4rem;
}
.tintlaw-cell dd {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #f2ede4;
}
.tintlaw-cell dd b {
  color: #fff;
}
.tintlaw-foot {
  max-width: 78rem;
  margin: 1.2rem auto 0;
  font-family: "Lato", sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(242, 237, 228, 0.62);
  text-align: center;
}

/* --- commercial section enhancements (residential & commercial block) --- */
.commx-row {
  max-width: 100rem;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.8rem;
}
.commx-row span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #33302b;
}
.commx-row ion-icon {
  color: #7e100b;
  font-size: 1.15rem;
  flex: none;
}
.commx-cta {
  max-width: 100rem;
  margin: 2.4rem auto 0;
  text-align: center;
}
.commx-cta p {
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  color: #4a423b;
  margin: 0.8rem 0 0;
}
.commx-cta p a {
  font-weight: 700;
  color: #7e100b;
}

/***********************************HERO SECTION***********************************/

.section-hero-tint > * {
  position: relative;
  z-index: 2;
  text-align: center;
}

.section-hero-tint {
  position: relative;
  /* Background image is the fallback shown before the video loads (also
     used as the <video poster>) and if it fails or reduced-motion hides it. */
  background: url("../images/tint/tintbackgoundimg.jpg") center / cover
    no-repeat;
  overflow: hidden;
  /* Track the video's own 16:9 shape so a full-width clip fills the hero
     with no vertical crop / "zoom". Never taller than the viewport, never
     shorter than the copy needs. */
  height: min(100vh, 56.25vw);
  min-height: 640px;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

/* Background video. Sits behind .header / .text-box via DOM order (it's
   the first child) plus an explicit lower z-index — .section-hero-tint > *
   above puts z-index:2 on every direct child, so this pins the video under
   that regardless of markup order later. No position/z-index changes to
   .header here, so .sticky .header (higher specificity) still wins on
   scroll and the sticky nav keeps working. */
.section-hero-tint .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.42) saturate(1.05);
}


.section-hero-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  animation: fadeTint 1.2s ease-out forwards;
}

@keyframes fadeTint {
  from {
    opacity: 0;
  }
  to {
    opacity: 1.2;
  }
}
/***********************************WINDOW TINT COMPARISON SECTION*******************************/
.section-tint-comparison {
  padding: 80px 20px;
  background: #0d0d0d;
  color: #fff;
}

.tint-comparison-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Stacks the two tint cards in the left column so the image (right column)
   has a full-height column to sit beside instead of running full-bleed
   below everything. */
.tint-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cards */
.tint-card {
  background: #161616;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.tint-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Titles */
.tint-title {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.tint-subtitle {
  font-size: 1rem;
  color: #bbb;
  margin-bottom: 20px;
}

/* Text */
.tint-description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #ddd;
}

/* Best for */
.tint-best-for span {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #ff5248;
}

.tint-best-for p {
  font-size: 0.9rem;
  color: #ccc;
}

/* Image — sits beside the stacked cards instead of running full-bleed
   below everything. Sized to the column, not stretched/cropped to match
   the cards' height, so the full 5%-to-No-Tint strip stays visible;
   align-self centers it within whatever extra height the stack has. */
.tint-image-wrapper {
  align-self: center;
}

.tint-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Quote widget — a compact lead-capture form instead of making visitors
   scroll to the footer contact form. Reuses the site's existing web3forms
   field/button classes (.footer-input-form-card, .btn-submit-block) for
   visual + functional consistency with the contact page form. */
.tint-quote-card {
  grid-column: span 2;
  margin-top: 20px;
  background: #161616;
  border: 1px solid rgba(126, 16, 11, 0.35);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.tint-quote-title {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: #fff;
}

.tint-quote-subtitle {
  font-size: 1rem;
  color: #bbb;
  margin-bottom: 20px;
}

.tint-quote-form {
  display: grid;
  gap: 0.85rem;
}

.tint-quote-select {
  appearance: none;
  cursor: pointer;
}

/* Highlight Ceramic (money maker 👀) */
.tint-card.ceramic {
  border: 1px solid #7e100b;
  background: linear-gradient(145deg, #161616, #1a1a1a);
}

.tint-card.ceramic .tint-title {
  color: #fff;
}

.tint-card.ceramic::before {
  content: "MOST POPULAR";
  display: inline-block;
  background: #7e100b;
  color: #fff;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* Responsive */


/***********************************PRICE CARDS SECTION (shared by tint, custom, ppf, detailing)***********************************/
.section-price-cards {
  padding: 9.6rem;
  text-align: center;
  border-top: solid 1px #7e100b;
  background-color: #f2f2f2;
}

/* Center + constrain the grid so it looks intentional */
.price-cards-container {
  max-width: 860px;
  margin: 3.2rem auto 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Odd number of cards: center the last one under the 2-column grid at
   normal card width (one column = half the row minus half the 2rem gap).
   Single-column breakpoints reset the width in queries.css. Spotlight
   (--feature) grids are already one column, so they're excluded. */
.price-cards-container:not(.price-cards-container--feature)
  > .price-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 1rem);
}

/* Card looks more "designed" and consistent */
.price-card {
  position: relative;
  width: 100%;
  align-self: start;
  box-sizing: border-box;

  text-align: center;
  padding: 1.8rem;
  background-color: #e9ecef;
  border-radius: 14px;
  border: solid 2px rgba(126, 16, 11, 0.35);

  box-shadow: 0 2.2rem 4.6rem rgba(0, 0, 0, 0.18);
  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

/* subtle brand glow (same color, transparent) */
.price-card::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    circle at 25% 20%,
    rgba(126, 16, 11, 0.1),
    transparent 55%
  );
  pointer-events: none;
}

.price-card > * {
  position: relative;
  z-index: 1;
}

/* Hover lift */
.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.22);
}

/* Image looks more premium + consistent */
.price-card-image {
  width: 100%;
  /* Every source photo used here is already ~3:2 (1200x800,
     800x533, 1536x1024 all round to a 1.5 ratio), so matching the
     box to that ratio means cover shows the whole image with zero
     cropping AND zero letterboxing — no fixed height fighting each
     photo's own shape, no fill color needed to hide empty gaps. */
  aspect-ratio: 3 / 2;
  object-fit: cover;

  border-radius: 12px;
  border: solid 2px rgba(126, 16, 11, 0.35);
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, 0.14);

  margin: 0 auto 1rem;
  display: block;
}

/* Title */
.price-card-title {
  color: #7e100b;
  font-size: 1.7rem;
  padding: 0.3rem 0 0.5rem;
}

/* Coverage-scope tag (no dollar amount — used where pricing needs a quote) */
.price-card-tag {
  display: inline-flex;
  background: rgba(126, 16, 11, 0.08);
  color: #7e100b;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.4rem 1.1rem;
  border-radius: 3rem;
  margin: 0 0 1rem;
}

/* Description: readable, not too wide */
.price-card-description {
  color: #333;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto 1rem;
  padding: 0;
}

/* Expandable price card (Driver, Passenger and Back Window) */
.price-card-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.price-card-toggle-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #7e100b;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.price-card-toggle-hint .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.price-card-trigger.open .price-card-toggle-hint .arrow,
.price-card-trigger.open .arrow {
  transform: rotate(180deg);
}

.price-options-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  text-align: left;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
}

.price-options-list.open {
  max-height: 60rem;
  opacity: 1;
  margin: 0 0 1.6rem;
}

.price-option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid rgba(126, 16, 11, 0.15);
  font-size: 1.15rem;
}

.price-option:last-child {
  border-bottom: none;
}

.price-option-name {
  color: #333;
  font-weight: 600;
}

.price-option-meta {
  color: #7e100b;
  font-weight: 700;
  white-space: nowrap;
}

/* Short description under a basic price-card's heading (tint.html), above
   the "Starting at $X" line. */
.price-card-desc {
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a423b;
  max-width: 34ch;
  margin: 0 auto 0.9rem;
}

/* Descriptions under an expandable price card's individual options
   (tint.html). .has-desc is a modifier so plain two-span .price-option rows
   elsewhere (details.html / ceramic.html / custom.html) are unaffected —
   its compound selector already outranks the plain .price-option rule
   above regardless of source order. */
.price-option.has-desc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
.price-option-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.price-option-desc {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #666;
}

/***********************************WINDOW TINT COMPARISON SECTION*******************************/

/***********************************RESIDENTIAL & COMMERCIAL TINT SECTION***********************************/
/* Light background (#f2f2f2) — the section directly above this one
   (.section-window-tint-options) is a dark gradient, so this keeps the
   page's established light/dark alternation instead of two dark
   sections sitting back to back. */
.section-window-tint-residential-commercial {
  padding: clamp(4.8rem, 8vw, 9.6rem) clamp(2rem, 6vw, 4.8rem);
  background-color: #f2f2f2;
  border-top: solid 1px #7e100b;
}

.rescom-intro {
  max-width: 70rem;
  margin: 0 auto clamp(3.2rem, 6vw, 5.6rem);
  text-align: center;
}

.rescom-eyebrow {
  color: #7e100b;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  margin-bottom: 0.6rem;
}

.rescom-intro-text {
  max-width: 56rem;
  margin: 1.6rem auto 0;
  color: #444;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.7;
}

/* Alternating image/content rows. Desktop-default here (matching how
   every other section on this site is authored — desktop styles live
   in style.css, queries.css narrows down); collapses to one column
   with the DOM's natural image-first order at 59em. */
.rescom-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.4rem, 4vw, 4.8rem);
  max-width: 120rem;
  margin: 0 auto;
}

.rescom-block + .rescom-block {
  margin-top: clamp(4rem, 6vw, 7.2rem);
}

/* Commercial block reads [CONTENT][IMAGE] on desktop, reversing the
   residential block's [IMAGE][CONTENT] — the markup order is
   identical for both (image first, content second) so mobile always
   gets image-first regardless of which block it is; this just
   reorders the two visually once there's room for two columns. */
.rescom-block--reverse .rescom-media {
  order: 2;
}

.rescom-block--reverse .rescom-content {
  order: 1;
}

.rescom-media {
  position: relative;
}

.rescom-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 1.8rem;
  border: 1px solid rgba(126, 16, 11, 0.18);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.16);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.rescom-media img:hover {
  transform: translateY(-4px);
  box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, 0.2);
}

/* Floating caption pill — same glass-chip language as
   .catcher-media-caption (index.html "Elevate Your Ride"), scoped to
   this section instead of reused cross-page. */
.rescom-caption {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.rescom-caption ion-icon {
  font-size: 1.2rem;
  color: #ff9d94;
}

.rescom-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.rescom-tag {
  display: inline-flex;
  background: rgba(126, 16, 11, 0.08);
  color: #7e100b;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.4rem 1.1rem;
  border-radius: 3rem;
  margin-bottom: 1rem;
}

.rescom-heading {
  color: #111;
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.rescom-text {
  color: #444;
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 48ch;
  margin-bottom: 1.6rem;
}

.rescom-features {
  margin-bottom: 2rem;
}

/* Single spotlight card (e.g. details.html Interior Detail) */
.price-cards-container--feature {
  grid-template-columns: 1fr;
  max-width: 92rem;
}

.price-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  align-items: stretch;
  padding: 0;
  text-align: left;
}

.price-card-feature-media {
  position: relative;
  min-height: 26rem;
}

.price-card-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.price-card-feature-body {
  padding: 3rem 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-card-feature-title {
  color: #7e100b;
  font-size: 2.3rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.price-card-feature-meta {
  display: inline-flex;
  background: rgba(126, 16, 11, 0.08);
  color: #7e100b;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.5rem 1.1rem;
  border-radius: 3rem;
  margin: 0 0 1.2rem;
}

.price-card-feature-tagline {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  margin: 0 0 1.4rem;
}

.price-card-feature-list {
  margin-bottom: 1.8rem;
}

.price-card-feature-intro {
  width: 100%;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #444;
  margin: 0 0 1.6rem;
}

/* Richer heading + description bullets (e.g. ceramic.html) */
.ceramic-highlights {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
}

.ceramic-highlights li {
  position: relative;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(126, 16, 11, 0.14);
}

.ceramic-highlights li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.ceramic-highlight-title {
  display: block;
  padding-left: 1.3rem;
  position: relative;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.3rem;
}

.ceramic-highlight-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #7e100b;
}

.ceramic-highlights li p {
  color: #525252;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
  padding-left: 1.3rem;
}

.price-card-feature-note {
  background: #f8f8f8;
  border-left: 3px solid #7e100b;
  border-radius: 0.4rem;
  padding: 1.2rem 1.4rem;
  margin-bottom: 2rem;
}

.price-card-feature-note p {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #666;
  margin: 0;
}

.price-card-feature-note p + p {
  margin-top: 0.6rem;
}

.price-card-feature-trigger {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  color: #7e100b;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.price-card-feature-trigger .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.price-card-feature-body .price-options-list.open {
  margin-bottom: 1.8rem;
  width: 100%;
}

.price-card-feature-cta {
  margin-top: 0.4rem;
}

/***********************************WINDOW TINT Options SECTION***********************************/
.section-window-tint-options {
  padding: 6rem 5rem;
  background-color: #f2f2f2;
  border-top: 1px solid #7e100b;
  background: linear-gradient(
    to right,
    #141414,
    #1e1e1e,
    rgba(126, 16, 11, 0.95)
  );
}

.window-tint-options-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  max-width: 120rem;
  margin: 3.6rem auto 0 auto;
  align-items: start;
}

.window-tint-options-column {
  position: relative;
  overflow: hidden;

  background-color: #fff;
  border: 1px solid rgba(126, 16, 11, 0.18);
  border-radius: 1.6rem;
  padding: 3rem 2.4rem 2.6rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Accent bar along the top of every tier card */
.window-tint-options-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(126, 16, 11, 0.35);
}

/* subtle brand glow, matching the pricing/ceramic cards elsewhere on the site */
.window-tint-options-column::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    circle at 25% 20%,
    rgba(126, 16, 11, 0.08),
    transparent 55%
  );
  pointer-events: none;
}

.window-tint-options-column > * {
  position: relative;
  z-index: 1;
}

.window-tint-options-column:hover {
  transform: translateY(-0.6rem);
  border-color: rgba(126, 16, 11, 0.4);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.12);
}

/* Featured tier (Prime XR) — recommended pick gets top billing */
.window-tint-options-column.featured {
  border-color: #7e100b;
  box-shadow: 0 1.8rem 4.4rem rgba(126, 16, 11, 0.24);
}

.window-tint-options-column.featured::after {
  height: 7px;
  background: linear-gradient(90deg, #7e100b, #f9e5ba, #7e100b);
}


.tint-most-popular-badge {
  position: absolute;
  top: 1.9rem;
  right: -3.6rem;
  width: 14rem;
  text-align: center;
  transform: rotate(45deg);
  background: #7e100b;
  color: #f9e5ba;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  padding: 0.45rem 0;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
}

.tint-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(126, 16, 11, 0.16),
    rgba(126, 16, 11, 0.05)
  );
  margin-bottom: 1.4rem;
}

.tint-options-icon {
  display: block;
  color: #7e100b;
  font-size: 2.4rem;
}

.window-tint-options-column h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #111;
}

.tint-tagline {
  font-size: 1.2rem;
  font-weight: 700;
  color: #7e100b;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  margin-bottom: 1.2rem;
}

.tint-description-text {
  font-size: 1.3rem;
  line-height: 1.55;
  color: #444;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(126, 16, 11, 0.14);
}

.tint-option-section + .tint-option-section {
  margin-top: 1.8rem;
}

.tint-section-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.best-for-list,
.features-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  text-align: left;
}

/* Keep the bullet list narrow and centered inside a text-align: center card
   (the plain grid variant, not the wide feature-card layout) */
.price-card:not(.price-card--feature) .features-list {
  max-width: 30rem;
  margin: 0 auto 1.6rem;
}

.best-for-list li,
.features-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #555;
}

.best-for-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.7rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #7e100b;
}

.features-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #7e100b;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Give the coverage bullets more visual weight on the plain grid cards
   (ppf.html-style) — each item becomes a small chip instead of plain text */
.price-card:not(.price-card--feature) .features-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(126, 16, 11, 0.06);
  border: 1px solid rgba(126, 16, 11, 0.14);
  border-radius: 0.8rem;
  padding: 0.7rem 1.1rem;
  margin-bottom: 0.7rem;
  font-weight: 600;
  color: #2a2a2a;
}

.price-card:not(.price-card--feature) .features-list li:last-child {
  margin-bottom: 0;
}

.price-card:not(.price-card--feature) .features-list li::before {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #7e100b;
  color: #fff;
  font-size: 1rem;
}

/***********************************WINDOW TINT BENEFITS SECTION***********************************/
.section-window-tint-benefits {
  border-top: solid 1px #7e100b;
  padding: 9.6rem;
  background-color: #f2f2f2;
  color: #fff; /* makes text readable */
  text-align: center;
}

/***********************************WINDOW TINT BOOKING SECTION***********************************/
.section-booking-tint {
  padding: 9.6rem;
  background: linear-gradient(135deg, #f2f2f2, #e9ecef);
  border-top: solid 1px #7e100b;
  text-align: center;
}

/* container becomes a featured "card" */
.booking-tint-container {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 4.8rem;

  margin: 3.2rem auto 0;

  border-radius: 18px;
  border: solid 2px rgba(126, 16, 11, 0.35);
  background: #e9ecef;
  padding: 5.6rem;

  box-shadow: 0 2.4rem 5.2rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* subtle "glow" behind the card */
.booking-tint-container::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    circle at 20% 30%,
    rgba(126, 16, 11, 0.12),
    transparent 55%
  );
  pointer-events: none;
}

/* brand accent strip */
.booking-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #7e100b;
}

/* keep content above glow */
.booking-info,
.booking-image-wrap {
  position: relative;
  z-index: 1;
}

/* make text block feel intentional */
.booking-info {
  text-align: left;
}

.window-tint-booking-description {
  color: #333;
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 0;
  margin: 1.2rem 0;
}

/* Groups the "Schedule Now" + "Get a quote" CTAs — a controlled row
   with breathing room between the two targets (well above the ~8px
   minimum recommended to avoid mis-taps between adjacent buttons),
   wrapping to a stacked column on narrow screens instead of squeezing
   both buttons into one cramped row. */
.booking-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* image frame looks more premium */
.booking-image-wrap {
  display: flex;
  justify-content: center;
}

/* Icon-led contact rows inside the booking card */
.booking-contact-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.booking-icon {
  flex-shrink: 0;
  font-size: 1.8rem;
  color: #7e100b;
}

/* Map card: mirrors the booking card so the pair feels intentional */
.map-card {
  background: #fff;
  border: 2px solid rgba(126, 16, 11, 0.35);
  border-radius: 18px;
  padding: 2.4rem;
  box-shadow: 0 2.4rem 5.2rem rgba(0, 0, 0, 0.18);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.map-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.22);
}

.map-card .footer-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 32rem;
  border: none;
  border-radius: 12px;
  box-shadow: none;
}

/* Nested inside the booking card, replacing the truck photo:
   the outer card already frames it, so drop the map card's own
   padding/background/shadow and match the old image's dimensions. */
.booking-image-wrap .map-card {
  width: 100%;
  max-width: 500px;
  height: 460px;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* Give the map column more room than the text column now that it's a
   map instead of a photo. */


.booking-image-wrap .map-card:hover {
  transform: none;
}

.booking-image-wrap .map-card .footer-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

/* optional: hover "lift" like your other cards */
.booking-tint-container {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

.booking-tint-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.22);
}

/************************************************************************************/
/************************************************************************************/
/***********************************PPF PAGE STYLING*********************/
/************************************************************************************/
/************************************************************************************/
/* header */

/* Fixes glitch */

/* Hero Section */
.section-hero-ppf > * {
  position: relative;
  z-index: 2;
}

.section-hero-ppf {
  position: relative;
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("../images/ppf/ppf-hero.jpg") center / cover no-repeat;
  height: 100vh;
  background-position: center 42%;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

/* Background video. Sits behind .header / .text-box via DOM order (it's
   the first child) plus an explicit lower z-index — .section-hero-ppf > *
   above puts z-index:2 on every direct child, so this pins the video under
   that regardless of markup order later. The section's own background
   (dark gradient + ppf-hero.jpg) stays as the poster/fallback if the video
   fails or reduced-motion hides it; the filter here stands in for that
   gradient's darkening since the video paints on top of it. */
.section-hero-ppf .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.4) saturate(1.05);
}


/* Animated overlay */
.section-hero-ppf::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-size: 200% 100%; twice as wide for sliding effect */
  /* animation: slideTint 8s linear infinite; */
  /* z-index: 1; */
}

/* Keep content on top */
.section-hero-ppf > * {
  position: relative;
  z-index: 2;
}

/* Keyframes for sliding overlay */
@keyframes slideTint {
  0% {
    background-position: 0% 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

/* Hero "Get a Quote" / phone CTA buttons (class="btn btn-primary"): small hover lift.
   (This used to also carry a whole standalone package-picker button component,
   removed along with .package-section — see PRICE CARDS SECTION instead.) */
.btn-primary:hover {
  transform: translateY(-1px);
}

/***********************************WINDOW TINT BENEFITS SECTION***********************************/
.section-ppf-benefits {
  border-top: solid 1px #7e100b;
  padding: 9.6rem;
  background-color: #f2f2f2;
  background-size: cover;
  background-position: center;
  color: #fff; /* makes text readable */
  text-align: center;
}

/************************************************************************************/
/************************************************************************************/
/***********************************CERAMIC COATING PAGE STYLING*********************/
/************************************************************************************/
/************************************************************************************/

.section-hero-ceramic > * {
  position: relative;
  z-index: 2;
  text-align: center;
}

.section-hero-ceramic {
  position: relative;
  background: url("../images/ceramic/ceramic-coating-backgrounds/ceramic-coating-hero-background.jpg")
    center 38% / cover no-repeat;
  height: 100vh;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

/* Background video. Sits behind .header / .text-box via DOM order (it's
   the first child) plus an explicit lower z-index — .section-hero-ceramic > *
   above puts z-index:2 on every direct child, so this pins the video under
   that regardless of markup order later. The section's own background
   image stays as the poster/fallback if the video fails or reduced-motion
   hides it; the ::before dark overlay below darkens the video the same way
   it darkens the fallback image. */
.section-hero-ceramic .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.4) saturate(1.05);
}


.section-hero-ceramic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  animation: fadeTint 1.2s ease-out forwards;
}

.section-ceramic-coating-prices {
  padding: 6.4rem 4rem;
  text-align: center;
  border-top: solid 1px #7e100b;
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.95),
    rgba(126, 16, 11, 0.95)
  );
}

/************************************************************************************/
/************************************************************************************/
/***********************************CONTACT PAGE STYLING*****************************/
/************************************************************************************/
/************************************************************************************/

.section-contact {
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.95),
    rgba(126, 16, 11, 0.95)
  );
}

.section-contact {
  padding: 2.5rem 2rem;
}

/* Card */
.footer-card {
  margin: auto;
  width: min(88rem, 100%);
  background-color: #121212;
  border-radius: 1.6rem;
  padding: 1.75rem;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: stretch;

  border: 1px solid rgba(242, 242, 242, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.footer-card-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.footer-card-flex-space-between {
  display: flex;
  justify-content: space-between;
}

.footer-card-head {
  margin-bottom: 1.1rem;
}

.footer-card-title {
  color: #f2f2f2;
  font-size: 1.7rem;
  margin: 0 0 0.4rem 0;
  letter-spacing: 0.3px;
  line-height: 1.2;
  font-family: "merriweather";
}

.footer-card-title-address-link {
  font-size: 1.1rem;
  color: #f2f2f2;
  text-decoration: none;
}

.footer-card-title-address-link:hover {
  color: #f9e5ba;
  transition: all 0.3s;
  text-decoration: none;
}

.footer-card-title-phone-link {
  font-size: 1.1rem;
  color: #f2f2f2;
  text-decoration: none;
}

.footer-card-title-phone-link:hover {
  color: #f9e5ba;
  transition: all 0.3s;
  text-decoration: none;
}

.tint-icon-contact {
  color: #ff5248;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.footer-card-subtitle {
  color: rgba(242, 242, 242, 0.75);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.5;
  max-width: 42rem;
}

/* Form layout */
.footer-card-info {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.85rem;
}

.footer-card-firlas-name-cont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.footer-card-vehicle-cont {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

/* Labels */
.footer-card-info-title {
  color: rgba(242, 242, 242, 0.85);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.3rem 0 0;
  font-family: "merriweather";
}

/* Inputs */
.footer-input-form-card,
.footer-input-form-card-two,
.footer-input-form-message {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  color: #f2f2f2;
  border: 1px solid rgba(126, 16, 11, 0.35);
  border-radius: 0.8rem;
  padding: 0.8rem 1rem;
  font-size: 1.05rem;
  font-family: "merriweather";
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
  box-sizing: border-box;
}

/* Remove old input border conflicts */
input,
textarea {
  border: none;
}

/* Put the intended border back */
.footer-input-form-card,
.footer-input-form-card-two,
.footer-input-form-message {
  border: 1px solid rgba(126, 16, 11, 0.35);
}

/* Placeholder */
.footer-input-form-card::placeholder,
.footer-input-form-card-two::placeholder,
.footer-input-form-message::placeholder {
  color: rgba(242, 242, 242, 0.62);
  font-size: 1rem;
}

/* Textarea */
.footer-input-form-message {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.5;
}

/* Focus states */
.footer-input-form-card:focus,
.footer-input-form-card-two:focus,
.footer-input-form-message:focus {
  outline: none;
  border-color: #a3140d;
  box-shadow: 0 0 0 3px rgba(126, 16, 11, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Contact page form: required note, dropdowns, and service picker. Service
   checkboxes each have their own name so every choice shows on its own line
   in the Web3Forms email. */
.contact-form-note {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 0.85rem;
  color: rgba(242, 242, 242, 0.62);
}
.contact-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2f2f2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
/* show the unselected prompt in the same muted color as placeholders */
.contact-select:has(option[value=""]:checked) {
  color: rgba(242, 242, 242, 0.62);
}
.contact-select option {
  color: #201c19;
  background: #fff;
}
.contact-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.contact-chip {
  position: relative;
  display: block;
  cursor: pointer;
}
/* visually hidden, but still keyboard-focusable */
.contact-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.contact-chip span {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(126, 16, 11, 0.35);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(242, 242, 242, 0.85);
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  line-height: 1.3;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.contact-chip:hover span {
  border-color: #a3140d;
}
.contact-chip input:checked + span {
  background: #7e100b;
  border-color: #ff5248;
  color: #fff;
  font-weight: 700;
}
.contact-chip input:focus-visible + span {
  outline: 2px solid #ff5248;
  outline-offset: 2px;
}

/* Contact form: vehicle / home-or-business groups */
.contact-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.contact-group[hidden] {
  display: none;
}

/* Remove spinner for number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

/* Map */
.footer-map {
  display: block;
  width: 100%;
  min-height: 34rem;
  border: 1px solid rgba(126, 16, 11, 0.5);
  border-radius: 1.2rem;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.2);
}

/* Responsive */


/************************************************************************************/
/************************************************************************************/
/***********************************DETAILS PAGE STYLING*********************/
/************************************************************************************/
/************************************************************************************/

/* Hero Section */

.section-hero-details > * {
  position: relative;
  z-index: 2;
}

.section-hero-details {
  position: relative;
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("../images/detailing/auto-detailing-hero-background.jpg") center / cover
      no-repeat;
  height: 100vh;
  background-position: center 42%;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

/* Background video. Sits behind .header / .text-box via DOM order (it's
   the first child) plus an explicit lower z-index — .section-hero-details >
   * above puts z-index:2 on every direct child, so this pins the video
   under that regardless of markup order later. The section's own
   background (dark gradient + auto-detailing-hero-background.jpg) stays as
   the poster/fallback if the video fails or reduced-motion hides it; the
   filter here stands in for that gradient's darkening since the video
   paints on top of it. */
.section-hero-details .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.4) saturate(1.05);
}


/* Animated overlay */
.section-hero-details::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-size: 200% 100%; twice as wide for sliding effect */
  /* animation: slideTint 8s linear infinite; */
  /* z-index: 1; */
}

/* Keep content on top */
.section-hero-details > * {
  position: relative;
  z-index: 2;
}

.section-extra-servcies {
  padding: 8rem 2rem;
  background: linear-gradient(
    to right,
    #141414,
    #1e1e1e,
    rgba(126, 16, 11, 0.95)
  );
  border-top: solid 1px #7e100b;
}

.extra-services-container {
  max-width: 120rem;
  margin: 3.2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.extra-service {
  position: relative;
  overflow: hidden;
  flex: 1 1 28rem;
  max-width: 34rem;
  padding: 2.4rem 2.2rem 2.2rem;
  border-radius: 1.6rem;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.02)
    ),
    linear-gradient(145deg, #1b1b1b, #111111);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1.2rem 2.6rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.extra-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(126, 16, 11, 0.18),
    transparent 35%,
    transparent 70%,
    rgba(255, 255, 255, 0.02)
  );
  pointer-events: none;
}

.extra-service::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2.2rem;
  width: 5rem;
  height: 4px;
  border-radius: 999px;
  background: #7e100b;
  box-shadow: 0 0 16px rgba(126, 16, 11, 0.4);
}

.extra-service:hover {
  transform: translateY(-6px);
  border-color: rgba(126, 16, 11, 0.45);
  box-shadow:
    0 2rem 4rem rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(126, 16, 11, 0.12);
}

.extra-service:hover .extra-service-icon {
  background: rgba(126, 16, 11, 0.32);
  transform: scale(1.06);
}

.extra-service-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: rgba(126, 16, 11, 0.18);
  margin-bottom: 1.4rem;
  transition:
    background 220ms ease,
    transform 220ms ease;
}

.extra-service-icon ion-icon {
  font-size: 2.1rem;
  color: #ff5248;
}

.extra-service h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 1.2rem;
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.extra-service-price-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.75);
}

.extra-service-price-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.extra-service-price {
  font-weight: 700;
  color: #ff9d94;
  font-size: 1.2rem;
  background: rgba(126, 16, 11, 0.28);
  padding: 0.3rem 1rem;
  border-radius: 999px;
}

/************************************************************************************/
/************************************************************************************/
/***********************************WRAPS PAGE STYLING*********************/
/************************************************************************************/
/************************************************************************************/

.section-hero-wraps {
  position: relative;
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("../images/car-wraps/wrap-hero-background.jpg") center / cover no-repeat;
  height: 100vh;
  background-position: center 42%;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

/* Background video. Sits behind .header / .text-box via DOM order (it's
   the first child) plus z-index:0 — .header is position:relative and
   .text-box is position:absolute with z-index:1 (see css/general.css),
   so both already paint above a z-index:0 layer without needing a
   dedicated ">* { z-index: 2 }" rule here. The section's own background
   (dark gradient + wrap-hero-background.jpg) stays as the poster/fallback
   if the video fails or reduced-motion hides it; the filter below stands
   in for that gradient's darkening since the video paints on top of it. */
.section-hero-wraps .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.4) saturate(1.05);
}


.section-wraps-prices {
  padding: 6.4rem 2.4rem;
  text-align: center;
  border-top: solid 1px #7e100b;
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.95),
    rgba(126, 16, 11, 0.95)
  );
}

/* Main card container */
.wraps-prices-container {
  max-width: 110rem;
  width: 100%;
  margin: 3.2rem auto 0;

  background-color: #fff;
  border: 1px solid rgba(126, 16, 11, 0.18);
  border-radius: 1.6rem;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.22);

  padding: 3.2rem;
  display: flex;
  align-items: center;
  gap: 3.2rem;

  text-align: left;
}

/* Text column */
.wrap-prices-textbox {
  flex: 1.4;
}

.wrap-prices-subheading {
  font-size: 1.3rem;
  font-weight: 700;
  color: #7e100b;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  margin: 0 0 0.8rem;
}

.wrap-prices-textbox .wrap-prices-subheading:not(:first-child) {
  margin-top: 2rem;
}

/* Paragraph text */
.wrap-prices-textbox-text {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 0;
  color: #333;
}

/* Applications shown as an icon feature grid instead of a plain bullet list */
.wrap-prices-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0 0 2rem;
}

.wrap-prices-feature {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: rgba(126, 16, 11, 0.05);
  border: 1px solid rgba(126, 16, 11, 0.14);
  border-radius: 1rem;
  font-size: 1.05rem;
  color: #333;
}

.wrap-prices-feature ion-icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  color: #7e100b;
}

/* Image column */
.wrap-prices-image-box {
  flex: 0.9;
  min-width: 320px;
}

.wrap-prices-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 1.2rem;
  border: 1px solid rgba(126, 16, 11, 0.18);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.18);
  display: block;
}

/************************************************************************************/
/************************************************************************************/
/***********************************CUSTOM PAGE STYLING*********************/
/************************************************************************************/
/************************************************************************************/

.section-hero-custom > * {
  position: relative;
  z-index: 2;
  text-align: center;
}

.section-hero-custom {
  position: relative;
  background: url("../images/background-images/custom-background-img.jpg")
    center / cover no-repeat;
  height: 100vh;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

/* Background video. Sits behind .header / .text-box via DOM order (it's
   the first child) plus an explicit lower z-index — .section-hero-custom > *
   above puts z-index:2 on every direct child, so this pins the video under
   that regardless of markup order later. The section's own background
   image stays as the poster/fallback if the video fails or reduced-motion
   hides it; the ::before dark overlay below darkens the video the same way
   it darkens the fallback image. */
.section-hero-custom .back-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.4) saturate(1.05);
}


.section-hero-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  animation: fadeTint 1.2s ease-out forwards;
}

/* ///////////////////////////// info slider section */
/* --- text box --- */
.info-slider-textbox {
  text-align: left; /* looks more premium than centered */
  padding: 3.2rem 3rem;
  max-width: 48rem;
  z-index: 2;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

.info-slider-custom-paragraph {
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.2px;
  color: #333;
  margin: 0 0 1.25rem 0;
}

.info-slider-custom-paragraph:last-child {
  margin-bottom: 0;
}

/* subtle “spruce up” without extra markup */
.info-slider-custom-paragraph::first-line {
  font-weight: 600;
  color: #333;
}


/***********************************HERO SHADE (all pages)***********************************/
/* One shade over the whole hero, replacing the old oval scrim behind the
   copy (.hero2::before), whose edges cut across the logo and nav as the
   page narrowed, and the per-page flat overlays on tint/ceramic/custom.
   - left → right: darkest behind the left-aligned copy, fading so the
     video still shows on the right
   - top band: keeps the logo, nav and phone number readable over any frame
   Phones (≤740px, centered copy) swap in a top/bottom shade in queries.css.
   Placed at the end of the file so it overrides the per-page ::before rules
   above. Layers: video 0 → shade 1 → copy 1 (later in the DOM, so on top)
   → header 3. */
.section-hero::before,
.section-hero-tint::before,
.section-hero-ppf::before,
.section-hero-ceramic::before,
.section-hero-details::before,
.section-hero-wraps::before,
.section-hero-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 9rem),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(0, 0, 0, 0.25) 80%,
      rgba(0, 0, 0, 0.2) 100%
    );
}

/* keep the header above the shade (index.html's header has no z-index of
   its own); :where() keeps this light so `.sticky .header` still wins */
:where(
    .section-hero,
    .section-hero-tint,
    .section-hero-ppf,
    .section-hero-ceramic,
    .section-hero-details,
    .section-hero-wraps,
    .section-hero-custom
  )
  > .header {
  z-index: 3;
}


/***********************************BENEFITS BACKGROUNDS (service pages)***********************************/
/* Each service page's benefits section gets its own photo (images/backgrounds/
   benefits-*.jpg — none of them used anywhere else on the site), darkened
   with the site's black → oxblood wash so the light benefit cards and the
   white heading read clearly on top. Photos are pre-shrunk/compressed since
   they always sit under a heavy overlay. */
.benefits-bg {
  background-color: #131110; /* shows while the photo loads */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.benefits-bg--tint {
  background-image:
    linear-gradient(135deg, rgba(19, 17, 16, 0.86), rgba(74, 9, 6, 0.78)),
    url("../images/backgrounds/benefits-tint.jpg");
}
.benefits-bg--ppf {
  background-image:
    linear-gradient(135deg, rgba(19, 17, 16, 0.86), rgba(74, 9, 6, 0.78)),
    url("../images/backgrounds/benefits-ppf.jpg");
}
.benefits-bg--ceramic {
  background-image:
    linear-gradient(135deg, rgba(19, 17, 16, 0.86), rgba(74, 9, 6, 0.78)),
    url("../images/backgrounds/benefits-ceramic.jpg");
}
.benefits-bg--details {
  background-image:
    linear-gradient(135deg, rgba(19, 17, 16, 0.86), rgba(74, 9, 6, 0.78)),
    url("../images/backgrounds/benefits-details.jpg");
}
.benefits-bg--wraps {
  background-image:
    linear-gradient(135deg, rgba(19, 17, 16, 0.86), rgba(74, 9, 6, 0.78)),
    url("../images/backgrounds/benefits-wraps.jpg");
}

/* The site-wide heading is a dark-red gradient fill made for light
   backgrounds — switch it to solid white over the photo. */
.benefits-bg .section-heading {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* lift the light cards off the darker photo a little more */
.benefits-bg .benefits-card {
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4);
}
.benefits-bg .benefits-card:hover {
  box-shadow: 0 2.2rem 4.4rem rgba(0, 0, 0, 0.5);
}