/*******************************************/
/* ABOVE CERTAIN WIDTHS (Large-desktop enhancements) */
/*******************************************/
@media (min-width: 1120px) {
  .header-cta-phone {
    display: inline-flex;
  }
}

@media (min-width: 945px) {
  .header-cta {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: 1.4rem;
  }

  .header-cta-phone {
    display: none; /* shown at a wider breakpoint below */
    align-items: center;
    gap: 0.4rem;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
  }
  .header-cta-phone ion-icon {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
  }
  .header-cta-phone:hover {
    color: #ff8078;
  }

  .header-cta-btn {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    color: #7e100b;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 5rem;
    padding: 0.55rem 1.2rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
  .header-cta-btn:hover,
  .header-cta-btn:focus-visible {
    background: transparent;
    color: #fff;
  }
}

@media (min-width: 940px) {
  .cred-item + .cred-item::before {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.16);
  }
}

@media (min-width: 901px) {
  .window-tint-options-column.featured {
    transform: translateY(-1.2rem);
  }

  .window-tint-options-column.featured:hover {
    transform: translateY(-1.8rem);
  }

  .footer-pic-info .booking-tint-container,
  .section-booking-tint .booking-tint-container {
    grid-template-columns: 1fr 1.15fr;
    padding: 4.8rem;
  }
}

/*******************************************/
/* BELOW 1344px (Smaller desktops) */
/*******************************************/
/* 1350/16 = 84  pixel/em */
@media (max-width: 84em) {
  /* Trim the biggest sections down from their full-desktop padding so
     content doesn't drown in whitespace once the viewport shrinks. */
  .section-catcher,
  .section-services,
  .section-window-tint-benefits,
  .section-booking-tint,
  .section-ppf-benefits,
  .section-price-cards,
  .section-extra-servcies {
    padding: 6.4rem 4rem;
  }

  .section-partnerships {
    padding: 6.4rem 4rem;
  }

  .footer {
    padding: 5.6rem 4.8rem;
  }

  /* SERVICES GRID (index.html) — auto-fit lands on 2 columns right around
     this breakpoint, leaving the 5th card orphaned alone on its own row.
     Lock to 2 columns and center that leftover card at normal card width
     instead of letting it hang off to one side. */
  .services-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-container:has(.service:nth-child(5):last-child)
    .service:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 1.6rem);
    /* margin: 0 auto; */
  }

  /* PRICE CARDS — shared by tint/custom/ppf/details. Pages with an odd
     number of cards (tint.html has 3) leave the last one orphaned in the
     fixed 2-column grid; center it at normal card width instead. */
  .price-cards-container:has(.price-card:nth-child(3):last-child)
    .price-card:last-child {
    grid-column: 1 / -1;
    /* max-width: calc(50% - 1.4rem); */
    margin: 0 auto;
  }

  /* CATCHER SECTION (index.html "Elevate Your Ride") — the side images
     have a fixed 30rem height but a fluid width, so as the 3-column grid
     narrows they stretch into tall, distorted slivers. Let height follow
     width on a sane portrait ratio instead. */
  .catch-img {
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/*******************************************/
/* BELOW 1200px (Landscape Tablets) */
/*******************************************/

@media (max-width: 75em) {
  /* HOURS BAR (footer) — 7 fixed-minimum pills need ~940px, but the footer
     only has ~790-940px to give them in this range, so the last day or two
     get clipped/require horizontal scrolling. Shrink the minimum column
     width and pill padding/type so all 7 fit without scrolling. */

  .hero-cta-group .btn {
    width: 20rem;
  }

  .section-heading,
  .section-heading-white {
    font-size: 3.6rem;
  }

  .hours-bar {
    grid-template-columns: repeat(7, minmax(6rem, 1fr));
    gap: 0.8rem;
  }

  .hours-pill {
    min-width: 6rem;
    padding: 1rem 0.8rem 0.8rem;
  }

  .hours-day {
    font-size: 0.85rem;
  }

  .hours-time {
    font-size: 0.78rem;
  }

  .hours-status {
    font-size: 0.62rem;
  }

  /* Arrows as a centered pair just above the dots. Each arrow's left/right
     marks its center (style.css translates it by half its width), so
     50% - 3rem puts the two 5rem buttons 1rem apart. Applies to every
     width below this too — no smaller breakpoint resets left/right. */
  .slider__btn--left {
    left: calc(50% - 3rem);
    top: 80%;
  }

  .slider__btn--right {
    right: calc(50% - 3rem);
    top: 80%;
  }

  .slider__btn {
    height: 5rem;
    width: 5rem;
  }

  .slide {
    height: 70%;
  }

  /* height removed — .price-card-image now uses aspect-ratio (style.css),
     which scales proportionally with width at every breakpoint on its
     own, so a fixed height here would fight it and reintroduce
     cropping/letterboxing at this width. */

  /* BOOKING / SCHEDULE CARD — the card's full-desktop type scale (a
     2.5rem button, 1.8rem icons, 1.6rem heading) reads oversized next
     to the narrower map/text columns at this width. Scale it all down
     and tighten the card's own padding/gap to match. */
  .booking-tint-container {
    padding: 3.2rem;
    gap: 2.8rem;
  }

  .booking-info .small-heading-h3 {
    font-size: 1.3rem;
  }

  .booking-tint-container .booking-icon {
    font-size: 1.4rem;
  }

  .booking-tint-container .window-tint-booking-description {
    font-size: 1.15rem;
  }

  .booking-tint-container .card-schedule-today-link {
    font-size: 1.05rem;
  }

  /* INFO SLIDER (custom.html) — .info-slider-textbox has no flex-shrink
     limit of its own, so it holds onto its full 48rem max-width no
     matter how narrow the section gets, squeezing .info-track-custom
     (flex: 1) down to as little as ~177px at the bottom of this range.
     Cap the textbox much narrower and shrink its type to match, freeing
     up most of the section for the image carousel. */
  .info-slider-textbox {
    max-width: 30rem;
    padding: 2rem 1.8rem;
  }

  .info-slider-custom-paragraph {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
  }

  .info-slider-textbox .btn {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  .booking-info .btn {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }
}

/*******************************************/
/* BELOW 940px (Tablets) */
/*******************************************/

@media (max-width: 59em) {
  /* MOBILE Navigation */

  .btn-mobile-nav {
    display: block;
    z-index: 3;
  }

  .navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    background-size: cover;
    transform: translateX(100%);
    z-index: 2;

    background: linear-gradient(
      160deg,
      rgba(15, 15, 15, 1),
      rgba(126, 16, 11, 1)
    );
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows no transition at all */
    /* display: none; */

    /* 1) Hide element visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .navigation {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

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

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

  .main-nav-list {
    flex-direction: column;
    gap: 2.2rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2.6rem;
  }

  /* The CONTACT pill's solid-black background is meant to stand out
     against the header bar, but it's invisible against this full-black
     mobile nav overlay. Give it the brand red instead so it still reads
     as the primary call-to-action. */
  .main-nav-list > li:last-child {
    background-color: #000;
  }

  .main-nav-list > li:last-child:hover {
    background-color: #a3140d;
  }

  /* HERO HEADING — .text-box is a fixed 900px box. Below ~944px it
     overflows the viewport on both sides and, since overflow-x is
     hidden site-wide, the heading text gets silently clipped off both
     edges instead of wrapping. Let it size to the viewport instead. */
  .text-box {
    width: min(90vw, 60rem);
  }

  .heading-primary-main {
    font-size: 3.4rem;
  }

  .heading-primary-sub {
    font-size: 1.6rem;
  }

  /* CATCHER SECTION (index.html "Elevate Your Ride") — 3 columns leave
     the paragraph copy in a cramped ~220px-wide strip; stack into one
     readable column instead. */
  .section-catcher {
    padding: 5rem 3rem;
  }

  .catcher {
    grid-template-columns: 1fr;
    max-width: 40rem;
    gap: 2.4rem;
  }

  /* SERVICES GRID (index.html) — 2 columns get too tight for an
     image + heading + bullet list + button at this width; one
     full-width column reads far better. */
  .section-services {
    padding: 5rem 3rem;
  }

  .services-container {
    grid-template-columns: 1fr;
    max-width: 50rem;
    margin: 0 auto;
  }

  .partnerships-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .section-heading {
    font-size: 3.4rem;
  }

  .section-heading-white {
    font-size: 3.4rem;
  }

  .service-image {
    height: 20rem;
  }

  .gallery-container .gallery-images {
    width: 24rem;
    height: 18rem;
  }

  /* Testimonials */

  .testimonials-review {
    font-size: 1.2rem;
    padding: 1.2rem;
  }


  .slider__btn {
    height: 3.6rem;
    width: 3.6rem;
  }

  .test-parenth {
    font-size: 1.2rem;
  }

  /* GALLERY */
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .booking-cta-group {
    justify-content: center;
  }

  /* FOOTER  */

  .footer-link {
    font-size: 2.8rem;
  }

  .logo-link-copy {
    gap: 1.2rem;
  }

  .copyright.copyright-order-1 {
    font-size: 1rem;
  }

  /* Regression fix: the 84em breakpoint centers the 5th service card at
     half-width to sit neatly beside its neighbor in a 2-column grid.
     Now that this breakpoint forces a single column, that same rule
     left the last card stranded at half-width instead of matching its
     full-width siblings. Undo it now that there's no neighbor to match. */
  .services-container:has(.service:nth-child(5):last-child)
    .service:last-child {
    grid-column: auto;
    max-width: none;
    /* margin: 0; */
  }

  /* PRICE CARDS — same reasoning as the services grid above. */
  .section-price-cards {
    padding: 4.5rem 3rem;
  }

  .price-cards-container {
    grid-template-columns: 1fr;
    max-width: 42rem;
  }

  /* one column now — the odd last card goes back to full width */
  .price-cards-container:not(.price-cards-container--feature)
    > .price-card:last-child:nth-child(odd) {
    width: 100%;
  }

  /* Spotlight cards (ceramic/details) keep their wider single column. */
  .price-cards-container--feature {
    max-width: 50rem;
  }

  /* Trim the generous full-desktop whitespace inside each price card
     (tint/custom/ppf/details) at this width. */
  .price-card {
    padding: 1.8rem;
  }

  /* height removed — see note near the 75em breakpoint's
     .price-card-image rule; aspect-ratio handles this now. */
  .price-card-image {
    margin: 0 auto 1rem;
  }

  .price-card-title {
    padding: 0.4rem 0 0.3rem;
  }

  .price-card-tag {
    margin: 0 0 0.6rem;
  }

  .price-card-description {
    margin: 0 auto 1rem;
  }

  .price-card-toggle-hint {
    margin-bottom: 0.8rem;
  }

  /* WINDOW TINT TIER CARDS (tint.html "XPEL Window Tinting Film") — 3
     fixed columns get unreadably narrow; stack to one column. */
  .window-tint-options-container {
    grid-template-columns: 1fr;
    max-width: 50rem;
  }

  /* RESIDENTIAL & COMMERCIAL TINT (tint.html) — single column; reset
     the desktop-only order swap so both blocks fall back to the DOM's
     natural image-first order instead of the commercial block still
     showing content before its image. */
  .rescom-block {
    grid-template-columns: 1fr;
    max-width: 50rem;
  }

  .rescom-block--reverse .rescom-media,
  .rescom-block--reverse .rescom-content {
    order: 0;
  }

  .rescom-content {
    align-items: center;
    text-align: center;
  }

  /* Tag/heading read fine centered (short, single-line), but a
     centered multi-line paragraph and bullet list is harder to scan
     than left-aligned body copy — keep those left-aligned within the
     otherwise-centered column. */
  .rescom-text,
  .rescom-features {
    text-align: left;
    max-width: none;
  }

  /* FEATURE PRICE CARD (ceramic.html, details.html) — the image column
     keeps its 38% grid width but stretches (align-items: stretch) to
     match the much taller text column, turning it into a bizarre,
     extremely tall, narrow sliver. Stack instead: full-width image at a
     sane height on top, copy below. */
  .price-card--feature {
    grid-template-columns: 1fr;
  }

  .price-card-feature-media {
    min-height: 22rem;
  }

  /* BOOKING / SCHEDULE CARD — below the 901px breakpoint where
     style.css widens the map column, the base 2-column grid squeezes
     the map into a ~160px sliver (too narrow to read). Stack it and
     give the map a real height instead. Matches the specificity of the
     style.css selectors so it actually wins in the 901-944px overlap. */
  .section-booking-tint .booking-tint-container,
  .footer-pic-info .booking-tint-container {
    /* A bare `1fr` track has an implicit min-width: auto, so it can
       grow to fit its content's min-content size instead of actually
       respecting the container's padded width — that's what let
       .booking-info overflow past the card's right edge further down
       this cascade (34em). minmax(0, 1fr) removes that implicit
       floor so the track — and everything inside it — actually
       respects the available space. */
    grid-template-columns: minmax(0, 1fr);
    padding: 3.6rem 2.8rem;
  }

  .booking-image-wrap .map-card {
    width: 100%;
    max-width: 100%;
    height: 26rem;
  }

  /* Center everything in the text half now that it's stacked full-width
     above the map — left-aligned copy under a centered map looked
     lopsided. */
  .booking-info {
    text-align: center;
  }

  .booking-contact-row {
    justify-content: center;
  }

  /* The left-edge accent stripe reads oddly once its content is
     centered instead of left-aligned; run it along the top instead so
     it still frames the card without pulling the eye to one side. */
  .booking-accent {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 6px;
  }

  /* HOURS BAR (footer) — even the shrunk 75em pills don't all fit in one
     row once the footer itself narrows past ~900px, clipping the last
     day(s) off the edge. Let the grid wrap into 2 comfortable rows
     instead of forcing a single cramped (or scrolling) row. */
  .hours-bar {
    grid-template-columns: repeat(2, 2fr);
    gap: 0.8rem;
  }

  /* INFO VIDEO SECTION (ppf.html only) — pairing each video with its
     caption side-by-side forced them to fight over the same row
     height (video shrinks with width via its 16:9 ratio, caption
     grows as its copy wraps). Drop to a single column instead, with
     each caption sitting above its own video (looks better as an
     intro line than a caption trailing underneath).

     The source order in the HTML is media–text–text–media (it's
     arranged as a criss-cross 2-up grid at desktop widths: video next
     to caption 1, caption 2 next to video 2), so a plain single
     column would stack it media/text/text/media — pairing caption 2
     with the wrong video. `order` re-sequences it to the intended
     text → video → text → video without touching the markup. */
  .info-video-container {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .info-video-container > .info-video-media:nth-child(1) {
    order: 2;
  }

  .info-video-container > .info-video-text-box:nth-child(2) {
    order: 1;
  }

  .info-video-container > .info-video-text-box:nth-child(3) {
    order: 3;
    margin-top: 1.6rem;
  }

  .info-video-container > .info-video-media:nth-child(4) {
    order: 4;
  }

  .info-video {
    aspect-ratio: 16 / 9;
  }

  .info-video-text-box {
    padding: 2rem 2.2rem;
  }

  .info-video-text-box p {
    font-size: 1.45rem;
  }

  /* INFO SLIDER (custom.html) — side-by-side felt cramped at this
     width (the 75em fix's 30rem-wide textbox was still eating over
     half the section, leaving the truck photo as little as 270px
     wide). Stack it instead: photo on top, copy below, full width for
     both — the general convention for mobile/tablet media sections is
     image first so the visual lands before the pitch. .info-slider-custom
     is a flex row (textbox, then track, in that DOM order); switching
     to a column and using `order` puts the track on top without
     touching the markup. */
  .info-slider-custom {
    flex-direction: column;
  }

  .info-track-custom {
    order: 1;
  }

  .info-slide-custom img {
    height: 24rem;
  }

  .info-slider-textbox {
    order: 2;
    max-width: 100%;
    padding: 1.8rem 1.6rem;
  }

  .info-slider-textbox::before {
    width: 3.2rem;
    margin-bottom: 1rem;
  }

  .info-slider-custom-paragraph {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 0.8rem 0;
  }

  .info-slider-textbox .btn {
    font-size: 1.3rem;
    padding: 0.8rem 1.6rem;
  }

  /* INFO SLIDER (tint/ppf/ceramic/details/wraps) — on small screens the
     width is already limited, so the base 16:9 box (general.css) would
     leave the photo a thin strip. Use 3:2 here for a taller frame. */
  .info-slide img {
    aspect-ratio: 3 / 2;
  }

  /* With that shorter frame the full-size overlay caption swallows most of
     the photo — tighten it and pull it into the bottom corner. */
  .info-content {
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    max-width: none;
    padding: 1.2rem 1.4rem;
  }

  .info-content::before {
    margin-bottom: 0.8rem;
  }

  .info-content h3 {
    font-size: 1.7rem;
  }

  .info-content p {
    font-size: 1.15rem;
    line-height: 1.4;
  }

  /* details */

  .price-card-feature-media {
    height: 15rem;
  }

  /* WRAPS PRICING CARD (wraps.html) — the photo is capped at its
     320px min-width, so via its 3:4 ratio it tops out ~427px tall
     while the text column next to it (subheading + paragraph +
     feature grid) runs ~650px — the photo reads small and stranded
     next to a much taller block of copy. Stretch the image column to
     match the text column's height and let the photo fill most of
     that height (object-fit handles the crop), instead of being
     capped by its own width. Shrinking the card's padding and the
     paragraph type brings the whole card down a size too. */
  .wraps-prices-container {
    align-items: stretch;
    padding: 2.2rem;
    gap: 2rem;
  }

  .wrap-prices-image-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wrap-prices-image {
    width: 100%;
    height: 90%;
    aspect-ratio: auto;
  }

  .wrap-prices-textbox-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .wrap-prices-subheading {
    font-size: 1.15rem;
  }

  .wrap-prices-feature {
    padding: 0.8rem 0.9rem;
    font-size: 0.9rem;
  }
}

/*******************************************/
/* BELOW 900px */
/*******************************************/
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem 2rem;
    text-align: center;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 auto;
  }

  .footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .qprice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-card {
    grid-template-columns: 1fr;
    width: min(50rem, 100%);
    padding: 1.4rem;
    gap: 1.4rem;
  }

  .footer-map {
    min-height: 18rem;
  }
}

/*******************************************/
/* BELOW 860px */
/*******************************************/
@media (max-width: 860px) {
  .fleet-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .fleet-wrap > div:last-child {
    order: -1;
  }

  .about-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-wrap > div:last-child {
    order: -1;
  }
}

/*******************************************/
/* BELOW 768px */
/*******************************************/
@media (max-width: 768px) {
  .tint-comparison-container {
    grid-template-columns: 1fr;
  }

  .tint-quote-card {
    grid-column: span 1;
  }

  .footer-card-firlas-name-cont,
  .footer-card-vehicle-cont {
    grid-template-columns: 1fr;
  }
}

/*******************************************/
/* BELOW 760px */
/*******************************************/
@media (max-width: 760px) {
  .how-steps {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1rem;
  }
}

/*******************************************/
/* BELOW 740px (Smaller tablets) */
/*******************************************/

@media (max-width: 740px) {
  /* index.html */

  .hero-cta-group .btn {
    width: 18rem;
  }

  .heading-primary .btn {
    font-size: 1.8rem;
    padding: 0.8rem 1.6rem;
  }

  .btn {
    font-size: 2rem;
  }

  .catch-img {
    height: 550px;
  }

  .services-container {
    padding: 3rem;
  }

  .section-testimonials {
    padding: 6.4rem 1.8rem;
  }

  .testimonials-review {
    font-size: 1rem;
  }

  .test-parenth {
    font-size: 1rem;
  }

  /* HERO (index.html) — the 59em fix (3.4rem heading / 40px buttons)
     was sized for tablets; at phone widths a 54px heading and 40px
     button label read oversized. clamp() keeps the heading fluid
     between a 32px floor and 40px ceiling — the mobile H1 range most
     style guides land on — instead of a single fixed size. */
  .heading-primary-main {
    font-size: clamp(4rem);
  }

  .heading-primary-sub {
    font-size: clamp(2rem);
  }

  .section-heading {
    font-size: 3rem;
  }

  .section-heading-white {
    font-size: 3rem;
  }

  /* MOBILE NAV ICON — 4.8rem (76.8px) is a huge hamburger/close icon
     on a phone-width header. 2.8rem (~45px) keeps it comfortably
     above the 44px accessible tap-target minimum without dominating
     the bar. */
  .icon-mobile-nav {
    height: 2.8rem;
    width: 2.8rem;
  }

  /* width: 100% still needed here (base rule already has it, but
     kept for clarity at this breakpoint); height removed — see note
     near the 75em breakpoint's .price-card-image rule, aspect-ratio
     handles proportional sizing now instead of a fixed height. */
  .price-card-image {
    width: 100%;
  }

  /* FEATURE PRICE CARDS (details.html "Interior Detail" / "Wash &
     Wax") — still carrying full-desktop scale at this width: a 22rem
     image, 3rem/3.2rem body padding, and a 2.3rem title push each
     card to ~1200px tall on a 740px-wide screen. Shrink the image,
     padding, and every type size in the body so the card reads like
     a compact mobile card instead of a desktop card squeezed narrow. */
  .price-card-feature-media {
    min-height: 19rem;
  }

  .price-card-feature-body {
    padding: 1.8rem 1.6rem;
  }

  .price-card-feature-title {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
  }

  .price-card-feature-meta {
    font-size: 0.95rem;
    padding: 0.4rem 0.9rem;
    margin: 0 0 0.9rem;
  }

  .price-card-feature-tagline {
    font-size: 1.1rem;
    margin: 0 0 1rem;
  }

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

  .price-card-feature-list li {
    font-size: 1rem;
  }

  .price-card-feature-intro {
    font-size: 1rem;
    margin: 0 0 1.1rem;
  }

  .price-card-feature-note {
    padding: 0.9rem 1rem;
    margin-bottom: 1.2rem;
  }

  .price-card-feature-note p {
    font-size: 0.95rem;
  }

  .price-card-feature-trigger {
    font-size: 1.05rem;
    margin-bottom: 0.7rem;
  }

  /* WRAPS PRICING CARD (wraps.html) — .wrap-prices-image-box carries a
     320px min-width from the base desktop layout, which refuses to
     shrink even though the card is too narrow to fit it beside the
     text column. The row doesn't wrap (no flex-wrap), so the image
     column just pokes ~20px past the white card's right edge instead
     of staying inside it. Drop the min-width floor so flex-shrink can
     actually fit it in the available space — the 59em fix's
     height: 90% stretch still applies, so the image stays a tall,
     well-proportioned panel, just narrower. */
  .wrap-prices-image-box {
    min-width: 0;
  }

  /* EXTRA SERVICES CARDS (details.html "Clay Bar" / "1 Step Polish" /
     etc.) — still at full-desktop scale here: 544px wide, 38.4/35.2px
     padding, a 73.6px icon and a 27.2px heading make each card ~345px
     tall stacked full-width. Shrink the card's own max-width, padding,
     icon, and every type size so it reads as a compact mobile list
     item instead of a desktop card squeezed into one column. */
  .extra-service {
    max-width: 28rem;
    padding: 1.6rem 1.6rem 1.5rem;
  }

  .extra-service-icon {
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1rem;
  }

  .extra-service-icon ion-icon {
    font-size: 1.6rem;
  }

  .extra-service h3 {
    font-size: 1.4rem;
    margin: 0 0 0.9rem;
  }

  .extra-service-price-row {
    padding: 0.6rem 0;
    font-size: 1.05rem;
  }

  .extra-service-price {
    font-size: 1rem;
    padding: 0.25rem 0.8rem;
  }

  /* GALLERY (index.html) — a fixed 20rem height against a shrinking
     3-column width turns each thumbnail into a tall, distorted sliver
     (as narrow as ~143px wide by 320px tall). Let height follow width
     on a clean square ratio instead. */
  .gallery-images {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .benefits-container {
    grid-template-columns: repeat(1, 1fr);
    /* max-width: 120rem; */
  }

  .window-tint-benifits-description {
    font-size: 1.1rem;
  }

  /* INFO VIDEO SECTION (ppf.html, custom.html) — 2 columns squeeze the
     caption text box down to ~205px, wrapping it into an almost
     one-word-per-line column. Stack video and caption instead. */
  .info-video-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* FOOTER LOGO / COPYRIGHT / SOCIALS — the 3-column grid (logo,
     copyright, social icons) squeezes the copyright column down to
     ~90-130px, wrapping "Copyright © 2025 by Wide Open Throttle..."
     into a single word per line. Stack into one centered column. */
  .logo-link-copy {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.6rem;
  }

  .social-links {
    justify-content: center;
  }

  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* above in-page layers like the slider arrows (10); still under the
       sticky header (999) and the photo lightbox (9999) */
    z-index: 100;
    background: rgba(19, 16, 15, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.4);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform 0.25s ease;
  }

  .mobile-bar-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.35rem;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bar-item + .mobile-bar-item {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mobile-bar-item ion-icon {
    font-size: 1.2rem;
    color: #ff5248;
    flex: none;
  }
  .mobile-bar-item:active {
    background: rgba(255, 255, 255, 0.09);
  }

  .mobile-bar-item--primary {
    background: #7e100b;
  }
  .mobile-bar-item--primary ion-icon {
    color: #fff;
  }
  .mobile-bar-item--primary:active {
    background: #9c1710;
  }

  /* keep the fixed bar from covering the end of the page / footer */
  body {
    padding-bottom: 3.6rem;
  }

  /* slide the bar out of the way while the full-screen mobile nav is open */
  body:has(.nav-open) .mobile-bar {
    transform: translateY(110%);
    pointer-events: none;
  }

  .hero2 {
    text-align: center;
  }
  .hero2-sub {
    margin-inline: auto;
  }
  .hero2-cta {
    justify-content: center;
  }
  .hero2-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hero2-trust {
    justify-content: center;
  }

  .g-badge {
    margin-inline: auto;
  }
}

@media (max-width: 740px) and (prefers-reduced-motion: no-preference) {
  .mobile-bar {
    animation: mobileBarUp 0.45s ease-out 0.35s both;
  }
  @keyframes mobileBarUp {
    from {
      transform: translateY(100%);
    }
  }
}

/*******************************************/
/* BELOW 900px */
/*******************************************/
@media (max-width: 900px) {
  .csxr-note {
    grid-template-columns: 1fr;
  }
}

/*******************************************/
/* BELOW 600px */
/*******************************************/
@media (max-width: 600px) {
  .footer-card-title {
    font-size: 1.4rem;
  }

  .footer-card-subtitle {
    font-size: 0.95rem;
  }

  .footer-card-firlas-name-cont,
  .footer-card-vehicle-cont {
    grid-template-columns: 1fr;
  }

  .footer-input-form-card,
  .footer-input-form-card-two,
  .footer-input-form-message {
    font-size: 0.95rem;
    padding: 0.7rem 0.9rem;
  }
}

/*******************************************/
/* BELOW 560px */
/*******************************************/
@media (max-width: 560px) {
  /* Explore and Services side by side; the brand block (900px rule above)
     and Get In Touch keep the full width. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem 1.2rem;
    text-align: center;
  }
  .footer-col:last-child {
    grid-column: 1 / -1;
  }
  .footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-contact li {
    justify-content: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-bbb {
    margin-inline: auto;
  }
  .footer-tagline {
    margin-inline: auto;
  }

  .qq-form {
    grid-template-columns: 1fr;
  }
}

/*******************************************/
/* BELOW 544px (Phones) */
/*******************************************/

@media (max-width: 39em) {
  /* index.html */

  .hero-cta-group {
    grid-template-columns: 1fr;
    grid-template-areas:
      "schedule"
      "phone"
      "quote";
  }

  .heading-primary .btn {
    font-size: 1.8rem;
  }

  .catcher-information p.catcher-text {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .catch-img {
    height: 400px;
  }

  .services-container {
    padding: 1rem;
  }

  .partnerships-container .partnerships-img {
    height: auto;
    width: auto;
  }

  .partnerships-container {
    margin: auto;
    gap: 2.5rem;
  }

  .testimonials-review {
    font-size: 0.9rem;
    padding: 1rem;
  }

  .slider__btn {
    font-size: 2.2rem;
  }


  .section-testimonials {
    padding: 1rem;
  }

  .gallery-container .gallery-images {
    height: auto;
    width: 200px;
  }

  /* SECTION HEADINGS — every section title on the site ("Testimonials",
     "Schedule Today", "Trusted Industry Partners", "Gallery"...) uses
     these two classes at 4.2rem. Multi-word titles at least wrap, but a
     single unbreakable word like "Testimonials" can't wrap at all, so
     its full ~500px width just overflows the ~220-280px available on a
     phone and gets silently clipped by the site-wide overflow-x: hidden.
     Scale both down to a size that fits even single-word titles. */
  .section-heading,
  .section-heading-white {
    font-size: 2.4rem;
    letter-spacing: 0.08rem;
  }

  .booking-tint-container .window-tint-booking-description {
    font-size: 1rem;
  }

  /* ceramic coating */

  /* CERAMIC COATING PRICE CARD (ceramic.html) — the card runs
     ~1760px tall on a 352px-wide phone screen: a 304px image, full
     desktop-scale body padding, a 28.8px title, and generously
     spaced highlight rows all add up. Shrink the image, padding, and
     every type/spacing value in the body so the whole card reads as
     a compact mobile card instead of a desktop layout squeezed narrow. */
  .price-card-feature-media {
    min-height: 12rem;
  }

  .price-card-feature-body {
    padding: 1.4rem 1.3rem;
  }

  .price-card-feature-title {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
  }

  .price-card-feature-meta {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    margin: 0 0 0.7rem;
  }

  .price-card-feature-intro {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.9rem;
  }

  .ceramic-highlights {
    margin-bottom: 1rem;
  }

  .ceramic-highlights li {
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
  }

  .ceramic-highlight-title {
    font-size: 0.95rem;
    padding-left: 1rem;
    margin-bottom: 0.2rem;
  }

  .ceramic-highlights li p {
    font-size: 0.85rem;
    line-height: 1.4;
    padding-left: 1rem;
  }

  .price-card-feature-note {
    padding: 0.8rem 0.9rem;
    margin-bottom: 1rem;
  }

  .price-card-feature-note p {
    font-size: 0.85rem;
  }

  .price-card-feature-trigger {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
  }

  /* BOOKING / SCHEDULE CARD (index.html "Schedule Today") — the map
     card carries a fixed 26rem height from the 59em fix, but at this
     width the card is only ~234px wide, so it renders as a tall,
     narrow 234x416px strip instead of a map. Switch to aspect-ratio
     1/1 so it scales into an actual square with the card's width.
     The card's own 3.6rem/2.8rem padding was also sized for tablet
     width and eats a huge share of a ~330px-wide card; tighten it and
     the gap between elements to match a phone-sized card instead. */
  .section-booking-tint .booking-tint-container,
  .footer-pic-info .booking-tint-container {
    padding: 2.8rem 2.2rem;
    gap: 1.8rem;
    /* width: auto isn't stretching to fill its grid track here (it
       computes wider than the ~236px column it sits in and overflows
       to the right instead of centering) — pin it to 100% so it
       actually matches the track, with auto margins as a backup. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .booking-image-wrap .map-card {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .booking-image-wrap .map-card .footer-map {
    height: 100%;
  }

  /* WRAPS PRICING CARD (wraps.html) — the text column's min-content
     width leaves the image column almost nothing to work with at this
     size (it was measured down to ~4px wide — a hairline, not a
     photo). Side-by-side simply doesn't work in ~350px of space.
     Stack instead, photo first (the general mobile convention — the
     visual lands before the pitch, same approach used on custom.html's
     info slider): full-width image at a clean 4:3 ratio, text below. */
  .wraps-prices-container {
    flex-direction: column;
    padding: 1.8rem 1.6rem;
    gap: 1.6rem;
  }

  .wrap-prices-image-box {
    order: -1;
    min-width: 0;
    width: 100%;
  }

  .wrap-prices-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .wrap-prices-textbox {
    flex: none;
  }

  .wrap-prices-subheading {
    font-size: 1.1rem;
  }

  .wrap-prices-textbox-text {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .wrap-prices-features {
    gap: 0.8rem;
  }

  .wrap-prices-feature {
    padding: 0.8rem 0.9rem;
    font-size: 0.9rem;
  }

  .info-content-custom {
    padding: 0.7rem;
  }

  /* INFO SLIDER caption (tint/ppf/ceramic/details/wraps) — the slide is a
     short 3:2 box at this width, so shrink the overlay panel further so it
     covers less of the photo. */
  .info-content {
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
  }

  .info-content::before {
    width: 3rem;
    height: 3px;
    margin-bottom: 0.55rem;
  }

  .info-content h3 {
    font-size: 1.45rem;
    margin-bottom: 0.25rem;
  }

  .info-content p {
    font-size: 1rem;
    line-height: 1.35;
  }
}

/*******************************************/
/* BELOW 540px */
/*******************************************/
@media (max-width: 540px) {
  .qprice-grid,
  .qprice-compare ul {
    grid-template-columns: 1fr;
  }
  .qprice-compare--detailed {
    padding: 1.8rem 1.4rem;
  }
  .qprice-compare--detailed li:last-child:nth-child(odd) {
    justify-self: stretch;
    max-width: none;
  }
}

/*******************************************/
/* BELOW 430px */
/*******************************************/
@media (max-width: 430px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .section-catcher {
    padding: 0rem 1rem;
    padding: 1rem;
  }

  .catcher-information {
    padding: 1.2rem;
  }

  .catcher-information p.catcher-text {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .section-services {
    padding: 1rem;
  }

  .btn {
    font-size: 1.2rem;
  }
  .section-heading {
    font-size: 2rem;
  }

  .section-heading-white {
    font-size: 2rem;
  }

  .section-partnerships {
    padding: 3.2rem 2rem;
  }

  /* PARTNER LOGOS — simple static 2x2 grid. */
  .partnerships-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    justify-items: center;
  }

  .partnerships-img {
    max-width: 130px;
  }

  .section-testimonials {
    padding: 0.8rem;
  }

  .testimonials-box {
    padding: 0;
  }

  .wrap-prices-features {
    grid-template-columns: 1fr;
  }

  .testimonials-review {
    font-size: 0.9rem;
    padding-top: 1rem;
  }

  .slider__btn {
    font-size: 2rem;
  }

  .slide {
    height: 70%;
  }


  .booking-info .btn {
    font-size: 1rem;
  }

  .dots .footer {
    padding: 1rem;
  }

  .dots__dot {
    height: 0.7rem;
    width: 0.7rem;
  }

  .dots {
    bottom: 5%;
  }

  .service-body .features-list li {
    font-size: 1rem;
  }

  /* tint */
  .section-price-cards {
    padding: 1rem;
  }

  .section-window-tint-options {
    padding: 1.5rem;
  }

  .tint-description-text {
    font-size: 1.2rem;
  }

  .section-window-tint-benefits {
    padding: 1rem;
  }

  .window-tint-benifits-description {
    font-size: 1.1rem;
  }

  .section-booking-tint {
    padding: 1rem;
  }

  .heading-primary-main {
    font-size: 3rem;
  }

  .heading-primary-sub {
    font-size: 2rem;
  }

  .heading-primary .btn {
    /* font-size: 2.2rem; */
    padding: 0.8rem 1.6rem;
  }

  .section-ppf-benefits {
    padding: 1rem;
  }

  /* ceramic page */
  .section-ceramic-coating-prices {
    padding: 1rem;
  }

  /* FEATURE PRICE CARD (details.html "Interior Detail") — two stacked
     bugs push the image past the card's right edge:
     1) an earlier fix's bare `.price-card { padding: 2rem }` rule
        (meant for the plain grid cards) leaks onto this flush-image
        card too, since `.price-card--feature`'s own `padding: 0`
        (style.css) has equal selector specificity and loses the
        cascade to this later queries.css rule.
     2) `.price-card--feature`'s bare `1fr` track (59em fix) has the
        same issue we hit on .booking-tint-container: it sizes itself
        as if that padding weren't there, so the image is both offset
        inward AND still full-width — overflowing outward.
     Reset the padding back to 0 and swap to minmax(0, 1fr) so the
     track actually respects the card's real (padding-free) width. */
  .price-card--feature {
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  /* wraps page */
  .section-wraps-prices {
    padding: 1rem;
  }

  /* INFO SLIDER caption — smallest phones: the 3:2 slide is only ~260px
     tall here, so keep the overlay panel as compact as possible. */
  .info-content {
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.8rem;
  }

  .info-content::before {
    width: 2.6rem;
    margin-bottom: 0.45rem;
  }

  .info-content h3 {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
  }

  .info-content p {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .footer {
    padding: 1.2rem;
  }

  .site-footer-inner {
    padding: 0;
  }
}

/*******************************************/
/* FIXING SAFARI FLEXBOX GAP*/
/*******************************************/

.no-flexbox-gap .main-nav-list li:not(:last-child) {
  margin-right: 4.8rem;
}

.no-flexbox-gap .list-item:not(:last-child) {
  margin-bottom: 1.6rem;
}

.no-flexbox-gap .list-icon:not(:last-child) {
  margin-right: 1.6rem;
}

.no-flexbox-gap .delivered-faces {
  margin-right: 1.6rem;
}

.no-flexbox-gap .meal-attribute:not(:last-child) {
  margin-bottom: 2rem;
}

.no-flexbox-gap .meal-icon {
  margin-right: 1.6rem;
}

.no-flexbox-gap .footer-row div:not(:last-child) {
  margin-right: 6.4rem;
}

.no-flexbox-gap .social-links li:not(:last-child) {
  margin-right: 2.4rem;
}

.no-flexbox-gap .footer-nav li:not(:last-child) {
  margin-bottom: 2.4rem;
}

@media (max-width: 75em) {
  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 3.2rem;
  }
}

@media (max-width: 59em) {
  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 4.8rem;
  }
}

/*******************************************/
/* MOTION & ASPECT-RATIO PREFERENCES */
/*******************************************/
@media (max-aspect-ratio: 16/9) {
  .back-video {
    width: auto;
    height: 100%;
  }
}

@media (max-height: 760px) {
  .hero2-title {
    margin-bottom: 0.7rem;
  }
  .hero2-sub {
    margin-bottom: 1.1rem;
  }
  .hero2-eyebrow {
    margin-bottom: 0.8rem;
  }
  .hero2-trust {
    padding-top: 0.9rem;
  }
  .g-badge {
    margin-bottom: 0.9rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero2 {
    animation: hero2In 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes hero2In {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  .g-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 32%,
      rgba(255, 255, 255, 0.38) 50%,
      transparent 68%
    );
    transform: translateX(-130%);
    animation: gBadgeSheen 1.05s ease-out 0.9s 1 both;
  }
  @keyframes gBadgeSheen {
    to {
      transform: translateX(130%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-hero .back-video {
    display: none;
  }

  .section-hero-tint .back-video {
    display: none;
  }

  .section-hero-ppf .back-video {
    display: none;
  }

  .section-hero-ceramic .back-video {
    display: none;
  }

  .section-hero-details .back-video {
    display: none;
  }

  .section-hero-wraps .back-video {
    display: none;
  }

  .section-hero-custom .back-video {
    display: none;
  }
}

/*******************************************/
/* HERO OVERLAP FIX — PHONES (all pages) */
/*******************************************/
/* Every hero is a fixed height with .text-box absolutely centered in it.
   On phones the copy (Google badge, eyebrow, title, three stacked buttons)
   is taller than the hero, so centering pushed its top up under the logo
   and menu icon. Here the copy flows normally, starting below the header,
   and the hero grows to fit it.
   The header is taken out of flow with position:absolute so the hero's
   height doesn't change when the sticky nav pins it (position:fixed) on
   scroll — otherwise the page would jump by the header's height. The
   :where() keeps this selector at the same weight as .header, so the
   heavier `.sticky .header` rule in style.css still wins once scrolled. */
@media (max-width: 740px) {
  .section-hero,
  .section-hero-tint,
  .section-hero-ppf,
  .section-hero-ceramic,
  .section-hero-details,
  .section-hero-wraps,
  .section-hero-custom {
    height: auto;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 4.2rem header + breathing room */
    padding: 6rem 0 3.2rem;
  }

  :where(
      .section-hero,
      .section-hero-tint,
      .section-hero-ppf,
      .section-hero-ceramic,
      .section-hero-details,
      .section-hero-wraps,
      .section-hero-custom
    )
    > .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
  }

  main .text-box {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 2;
  }

  /* PHONE HERO SHADE — the copy is centered here, so swap the desktop's
     left-to-right shade (style.css "HERO SHADE") for an even one: darker
     at the top (badge / eyebrow) and bottom (buttons), lighter through
     the middle so the already-dimmed video still reads.
     Layers: video 0 → shade 1 → copy 2 → 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;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.25) 35%,
      rgba(0, 0, 0, 0.25) 60%,
      rgba(0, 0, 0, 0.5) 100%
    );
    animation: none;
  }
}