/* === Red Barn Media Group - Custom Styles - Revolution Wraps === */
/* === Home Hero Styles :: BEGIN === */
.ru-hero-video-wrap {
    /*margin-top:6.75rem;*/
    height: 75vh;
    min-height: 725px;
    max-height: 1000px;
    position: relative;
    display: flex;
      flex-direction: column;
      justify-content: center;
}
 .ru-hero-video-wrap-client {
  height: 75vh;
  background: url(../img/ru-client-services-2000-1000.png);
  background-size: cover;
  min-height: 725px;
  max-height: 1000px;
  position: relative;
  display: flex;
    flex-direction: column;
    justify-content: center;
} 
.ru-hero-video-wrap.upfitting {
    height: fit-content;
    max-height: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../img/ru-hero-upfitting-2000-650.webp) center bottom;
    background-size: cover; 
}
/* Per-section sub-page heroes: pages with their own header photo add
   .ru-hero-own and put an <img class="ru-hero-img"> (or a <video>) first in
   the wrap. The class drops the shared fleet background so it never downloads
   underneath; the image fills the hero like the video heroes do. */
.ru-hero-video-wrap.upfitting.ru-hero-own {
    background: none;
}
/* Video heroes (home, About Us) keep .upfitting for its sizing but are fully
   covered by the video/poster — drop the fleet background so it doesn't download
   underneath and compete with the poster (the LCP image). The type selector in
   :has() out-specifies every breakpoint's .upfitting background rule below. */
.ru-hero-video-wrap.upfitting:has(> video) {
    background: none;
}
.ru-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The client's header photos are bright (white vans, daylight) where the
   shared fleet photo was dark, so the scrim is heavier behind the copy and
   near-solid on narrow screens where the text spans the full width. */
.ru-hero-video-wrap.ru-hero-own .gradient-overlay {
    background: linear-gradient(90deg, rgba(0,31,57,0.92) 0%, rgba(0,31,57,0.82) 45%, rgba(0,31,57,0.45) 100%);
}
@media (max-width: 991.98px) {
    .ru-hero-video-wrap.ru-hero-own .gradient-overlay {
        background: rgba(0,31,57,0.85);
    }
}
video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
video.inline-video {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.ru-hero-video-wrap .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/ru-hero-overlay.svg);
  background-size: cover;
}
.ru-hero-video-wrap .overlay.fleet-refresh {
  background-image: url(../img/ru-fleet-refresh-overlay.png);
  background-position: center
}
.ru-hero-video-wrap .gradient-overlay {
    background: rgb(0,31,57);
    background: linear-gradient(90deg, rgba(0,31,57,0.65) 0%, rgba(0,31,57,0.2) 100%);
    width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: cover;
}
.ru-hero-video-wrap .container-fluid {
    padding-left:8rem;
    padding-right:8rem;
}
.ru-hero-video-wrap h1 {
  font-size: 6rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}
.ru-hero-video-wrap.SUB h1 {
  font-size: 4rem;
}
.ru-hero-video-wrap.SUB h1 small {
  font-size: 65%;
}
.ru-hero-video-wrap h5 {
  color: #fff;
}

.ru-hero-video-wrap-client .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/ru-hero-overlay.svg);
  background-size: cover;
}
.ru-hero-video-wrap-client .gradient-overlay {
    background: rgb(0,31,57);
    background: linear-gradient(90deg, rgba(0,31,57,0.65) 0%, rgba(0,31,57,0.2) 100%);
    width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: cover;
}
.ru-hero-video-wrap-client .container-fluid {
    padding-left:8rem;
    padding-right:8rem;
}
.ru-hero-video-wrap-client h1 {
  font-size: 6rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}
.ru-hero-video-wrap-client.SUB h1 {
  font-size: 4rem;
}
.ru-hero-video-wrap-client.SUB h1 small {
  font-size: 65%;
}
.ru-hero-video-wrap-client h5 {
  color: #fff;
}
/* === Home Hero Styles :: END === */
/* === Sub Hero Styles :: BEGIN === */

/* === Sub Hero Styles :: END === */
/* === Banner Styled :: BEGIN === */
.ru-banner-process-bg {
    background: url(../img/ru-banner-process-bg.svg);
    background-size: cover;
    width: 100%;
    height: fit-content;
}
.ru-banner-navy-rect-bg {
    background: url(../img/ru-banner-navy-rect-bg.svg) center center;
    background-size: cover;
    width: 100%;
    height: fit-content;
}
.ru-banner-3M {
    background: url(../img/ru-banner-3M-2000.webp);
    background-size: cover;
    width: 100%;
    height: fit-content;
}
.ru-banner-location {
    background: url(../img/ru-banner-location-bg.svg) left;
    background-size: cover;
    width: 100%;
    height: fit-content;
}
/* navy-to-red gradient — sister-brand (Revolution Wraps) cross-promo band */
.bg-gradient-navy-red {
    background: linear-gradient(140deg, var(--ru-navy) 47%, var(--ru-red) 100%);
}
/* === Banner Styles :: END === */
/* === Vehicle Hotspot Explorer :: BEGIN === */
.ru-hotspot-wrap {
    position: relative;
    display: block;
}
/* Navy wash over the hero so the white tip cards and light-blue markers read
   against photos of any brightness. z-index 0 keeps it above the photo but under
   .ru-hotspot-layer — without the explicit values the pseudo-element would paint
   over the markers, since both are z-index:auto and ::after comes later in the DOM. */
.ru-hotspot-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,31,57,0.25);
    pointer-events: none;
    z-index: 0;
}
/* 2.75rem = 44px, the WCAG 2.5.5 (AAA) target size, at every breakpoint. At that
   size a solid fill would hide the very feature the marker points at, so the blue
   is 65% translucent — the photo reads through it and the white border keeps the
   marker legible against light and dark imagery alike. */
.ru-hotspot {
    position: absolute;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    /* rounded square, not circle — rectangles are the Revolution Upfitting brand motif */
    border-radius: 0.5rem;
    background: rgba(0,171,234,0.65);
    border: 3px solid #fff;
    transform: translate(-50%,-50%);
    cursor: pointer;
    animation: ru-hotspot-pulse 2s infinite;
    transition: background 0.25s;
    z-index: 1;
}
/* lift the whole marker, not just its tip — sibling hotspots are positioned
   elements later in the DOM, so without this they paint on top of the tip card */
.ru-hotspot:focus-visible,
.ru-hotspot.active {
    /* navy, and slightly more opaque than the resting state so the chosen marker
       reads as selected — still not solid, so the part stays visible under it */
    background: rgba(0,31,57,0.8);
    animation: none;
    z-index: 4;
}
/* Hover states are gated behind (hover: hover) — a real touch device that has to
   apply a :hover style which REVEALS content swallows the first tap doing it, so
   opening a row took two taps on a phone while behaving fine in a desktop
   browser's mobile view (which still dispatches mouse events). On touch the
   .active class alone drives both the marker and its tip. */
@media (hover: hover) {
    .ru-hotspot:hover {
        background: rgba(0,31,57,0.8);
        animation: none;
        z-index: 4;
    }
}
@keyframes ru-hotspot-pulse {
    0%   {box-shadow: 0 0 0 0 rgba(0,171,234,0.6);}
    70%  {box-shadow: 0 0 0 0.875rem rgba(0,171,234,0);}
    100% {box-shadow: 0 0 0 0 rgba(0,171,234,0);}
}

/* Hotspot thumbnail tip — shows the actual product over the photo on hover/focus,
   and stays up while that option's accordion row is open. This is what lets a
   marker sit approximately where the part goes: the thumbnail does the
   identifying, so the pin only has to indicate the region. */
.ru-hotspot-tip {
    position: absolute;
    bottom: calc(100% + 0.625rem);
    left: 50%;
    --ru-tip-y: 0.25rem;
    transform: translateX(-50%) translateY(var(--ru-tip-y));
    width: 9.375rem;
    padding: 0.375rem;
    background: #fff;
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 1rem rgba(0,31,57,0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 3;
}
.ru-hotspot-tip img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.25rem;
}
.ru-hotspot-tip-label {
    display: block;
    margin-top: 0.25rem;
    color: var(--ru-navy);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}
.ru-hotspot:focus-visible .ru-hotspot-tip,
.ru-hotspot.active .ru-hotspot-tip {
    opacity: 1;
    visibility: visible;
    --ru-tip-y: 0;
}
/* see the note on .ru-hotspot:hover above — this reveal is exactly what makes a
   touch device eat the first tap, so it must stay out of touch's reach */
@media (hover: hover) {
    .ru-hotspot:hover .ru-hotspot-tip {
        opacity: 1;
        visibility: visible;
        --ru-tip-y: 0;
    }
}
/* A marker near the top edge flips its tip BELOW so the card can't run off the
   photo — and, at phone widths where the Exterior/Interior toggle sits above the
   stage, so it can't cover the toggle. Which markers need it is MEASURED in
   custom.js (syncTipDirections) rather than listed here: the old hand-kept list
   had to be re-synced every time a coordinate moved, and the phone-only
   coordinates below made it wrong at one breakpoint but right at another. */
.ru-hotspot.ru-tip-below .ru-hotspot-tip {
    bottom: auto;
    top: calc(100% + 0.625rem);
    --ru-tip-y: -0.25rem;
}
/* On a phone the photo is only ~224px tall, so the stacked 150px card cannot fit
   above or below a mid-height marker without running off the photo (and onto the
   toggle). Lay it out sideways there — image beside label, ~50px tall — and it
   clears in either direction from any marker. */
@media (max-width: 575.98px) {
    .ru-hotspot-tip {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        width: 8.5rem;
        padding: 0.25rem;
    }
    .ru-hotspot-tip img {
        flex: 0 0 auto;
        width: 3.5rem;
    }
    .ru-hotspot-tip-label {
        margin-top: 0;
        font-size: 0.6875rem;
        text-align: left;
    }
}

/* hotspot positions per view (percent offsets within .ru-hotspot-wrap) */
/* remapped Aug 14 2026 for the Sortimo IMG_0030 hero (read off a 10% grid overlay) */
.ru-hs-cargo-interior-shelving {top:58%;left:33%;}
.ru-hs-cargo-interior-lighting {top:15%;left:33%;}
.ru-hs-cargo-interior-bulkheads {top:40%;left:43%;}
.ru-hs-cargo-interior-flooring {top:90%;left:52%;}
.ru-hs-cargo-interior-inverters {top:45%;left:63%;}
.ru-hs-cargo-interior-handles {top:55%;left:78%;}
.ru-hs-cargo-interior-wheels {top:86%;left:72%;}
.ru-hs-cargo-interior-thermal {top:22%;left:62%;}
.ru-hs-cargo-exterior-ladder {top:14%;left:38%;}
.ru-hs-cargo-exterior-running {top:74%;left:33%;}
.ru-hs-pickup-exterior-ladder {top:38%;left:60%;}
.ru-hs-pickup-exterior-tonneau {top:52%;left:58%;}
.ru-hs-pickup-exterior-running {top:66%;left:32%;}
.ru-hs-pickup-exterior-boxes {top:55%;left:49%;}
.ru-hs-suv-exterior-ladder {top:47%;left:55%;}
.ru-hs-suv-exterior-running {top:77%;left:40%;}
.ru-hs-pickup-interior-boxes {top:62%;left:62%;}
.ru-hs-pickup-interior-drawers {top:75%;left:50%;}
.ru-hs-pickup-interior-bedmat {top:85%;left:34%;}
.ru-hs-pickup-interior-tonneau {top:55%;left:74%;}
.ru-hs-suv-interior-shelving {top:50%;left:30%;}
.ru-hs-suv-interior-bulkheads {top:45%;left:48%;}
.ru-hs-suv-interior-flooring {top:75%;left:50%;}
.ru-hs-suv-interior-inverters {top:55%;left:82%;}
.ru-hs-suv-interior-lighting {top:21%;left:27%;}
.ru-hs-suv-interior-handles {top:34%;left:66%;}
.ru-hs-suv-interior-wheels {top:66%;left:72%;}
.ru-hs-suv-interior-thermal {top:30%;left:42%;}

/* Phone-only respacing. At 375px the hero renders 336x224, so a 44px marker is
   13% of its width and feature-accurate coordinates collide into an untappable
   blob (worst case: three of the four pickup-exterior markers overlapped). These
   overrides pull the crowded ones apart while keeping each on the right region of
   the vehicle — sanctioned by the thumbnail-popover rule, which makes the tip the
   thing that identifies the product and leaves the marker to indicate the area.
   Separation needed at this size is >=14% horizontally or >=21% vertically.
   The coordinates above stay pixel-true from 576px up, where the photo is wide
   enough that nothing overlaps. */
@media (max-width: 575.98px) {
    .ru-hs-cargo-interior-bulkheads {top:36%;left:46%;}
    /* 90% + half a 44px marker hangs past the bottom of a phone-height photo */
    .ru-hs-cargo-interior-flooring {top:87%;left:52%;}
    .ru-hs-pickup-exterior-ladder {top:40%;left:46%;}
    .ru-hs-pickup-exterior-tonneau {top:50%;left:74%;}
    .ru-hs-pickup-exterior-boxes {top:58%;left:60%;}
    .ru-hs-pickup-exterior-running {top:70%;left:30%;}
    .ru-hs-pickup-interior-tonneau {top:52%;left:70%;}
    .ru-hs-pickup-interior-boxes {top:55%;left:45%;}
    .ru-hs-pickup-interior-drawers {top:78%;left:62%;}
    .ru-hs-pickup-interior-bedmat {top:78%;left:38%;}
    .ru-hs-suv-interior-thermal {top:20%;left:48%;}
    .ru-hs-suv-interior-inverters {top:40%;left:80%;}
}

/* vehicle picker tiles — selected tile sits on solid navy (designer ref, Aug 2026) */
.ru-vehicle-tab {
    background: var(--ru-explorer-stage);
    color: var(--ru-navy);
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
/* tiles stay 3-across at every width (designer ref), so the label shrinks rather
   than the row wrapping — stacked full-width tiles pushed the explorer a full
   screen down on phones */
.ru-vehicle-tab span {
    font-size: 0.8125rem;
}
@media (min-width: 768px) {
    .ru-vehicle-tab span {
        font-size: 1rem;
    }
}
/* uniform tiles regardless of each photo's native crop */
.ru-vehicle-tab img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.ru-vehicle-tab:hover,
.ru-vehicle-tab:focus-visible {
    background: var(--ru-explorer-options);
}
.ru-vehicle-tab.active {
    background: var(--ru-navy);
    color: #fff;
}

/* Interior/Exterior segmented toggle — replaces the old nav-pills */
.ru-segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.1875rem;
    background: #fff;
    border-radius: 2rem;
}
.ru-segmented .nav-link {
    padding: 0.25rem 0.9375rem;
    border-radius: 2rem;
    color: var(--ru-navy);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.25s, color 0.25s;
}
.ru-segmented .nav-link:hover {
    background: var(--ru-explorer-options);
}
.ru-segmented .nav-link.active {
    background: var(--ru-navy);
    color: #fff;
}

/* two-column body: vehicle stage left, option accordion right.
   The hero bleeds to the panel edges with the toggle and caption overlaid on it.
   The image keeps its natural aspect (no object-fit: cover) — cropping it to fill
   a variable-height column would shift every .ru-hs-* percentage off its feature. */
.ru-explorer-stage {
    background: var(--ru-explorer-stage);
    padding: 0;
    position: relative;
}
/* Below lg the toggle sits ABOVE the photo instead of on it. At 44px the markers
   are wide enough that a centred overlay swallows any of them near the top of a
   phone-width photo (measured: the cargo-interior lighting and thermal markers
   were fully covered at 390px). Off the photo, no coordinate has to dodge it. */
.ru-explorer-toggle {
    padding: 0.75rem 0;
    text-align: center;
}
@media (min-width: 992px) {
    .ru-explorer-toggle {
        position: absolute;
        top: 1rem;
        left: 0;
        right: 0;
        z-index: 5;
        padding: 0;
    }
}
/* direct child only — the tip cards' thumbnails are also imgs inside this wrap,
   and this rule sits later in the file, so an unscoped selector silently
   overrides their sizing */
.ru-hotspot-wrap > img {
    display: block;
    width: 100%;
    height: auto;
}
/* Markers live in this layer rather than on .ru-hotspot-wrap directly. Above lg
   the photo is object-fit: cover, so the visible crop no longer matches the
   container — JS sizes this layer to the photo's ACTUAL rendered box so every
   percentage still lands on the feature it was measured against. Defaults here
   are the uncropped case (mobile), where the layer simply fills the wrap. */
.ru-hotspot-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* must beat the ::after overlay above */
    z-index: 1;
}

@media (min-width: 992px) {
    /* 3:2 is the FLOOR: the column keeps that shape when the option list is
       short, and stretches past it when the list is tall (flex stretch wins over
       aspect-ratio), with the photo covering whatever height results. */
    .ru-explorer-stage {
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }
    .ru-explorer-stage > .tab-content,
    .ru-explorer-stage > .tab-content > .tab-pane,
    .ru-explorer-stage .ru-hotspot-wrap {
        height: 100%;
    }
    .ru-explorer-stage .ru-hotspot-wrap > img {
        height: 100%;
        object-fit: cover;
    }
}
/* Below lg the caption sits UNDER the photo rather than over it: on a phone-width
   image the low markers (Cargo Flooring at 90%) land right on the caption line and
   cut the sentence in half. Off the photo it needs no scrim, so it takes navy text
   on the stage panel. Overridden by the absolute rules below at lg and up, where
   the photo is tall enough for the markers to clear it. */
.ru-hotspot-caption {
    padding: 0.625rem 1rem;
    color: var(--ru-navy);
}
@media (min-width: 992px) {
    /* white caption needs a scrim — it sits over photos whose brightness varies */
    .ru-hotspot-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2.5rem 1rem 0.75rem;
        color: #fff;
        background: linear-gradient(to top, rgba(0,31,57,0.85) 0%, rgba(0,31,57,0.55) 45%, rgba(0,31,57,0) 100%);
        /* low hotspots (e.g. Cargo Flooring at 90%) sit inside this band — the scrim
           must not swallow their clicks, and their z-index keeps them painted above it */
        pointer-events: none;
    }
}
.ru-explorer-options {
    background: var(--ru-explorer-options);
}
.ru-option-accordion .accordion-button {
    padding: 1rem 1.25rem;
}
.ru-option-accordion .accordion-body {
    padding: 0 1.25rem 1.25rem;
}
.ru-option-accordion .accordion-item {
    border-bottom-color: rgba(0,31,57,0.15);
}

/* Product/service card images (services.php, which shares .ru-option-card).
   Near edge-to-edge with only a hairline of padding, on a light panel so the
   transparent and white-background product renders have something to sit on
   instead of floating. object-fit: contain — these are product shots that must
   not be cropped, so the panel shows through wherever the aspect differs. */
.ru-option-card .ru-part-img {
    display: block;
    width: 100%;
    /* height:auto is REQUIRED — the markup's height="533" attribute is a
       presentational hint that maps to CSS height, so without this the box stays
       533px tall and object-fit letterboxes the picture inside it. The old rule
       hid this behind a max-height. */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: var(--ru-explorer-stage);
}
/* navy, not --ru-blue-mid: the blue is only 2.6:1 on this panel and the icon
   carries state (open/closed), so it needs 3:1 under WCAG 1.4.11.
   Both classes are chained deliberately — the generic .ru-accordion rules live
   further down this file and would otherwise win on source order. */
.ru-accordion.ru-option-accordion .accordion-button [class*="fa-"] {
    color: var(--ru-navy);
    font-size: 1.25rem;
}
/* === Vehicle Hotspot Explorer :: END === */
/* === Accordion Styles :: BEGIN === */
.ru-accordion .accordion-item,
.ru-accordion .accordion-header,
.ru-accordion .accordion-button {
    background: transparent;
    border: none;
    color: var(--ru-navy);
}
.ru-accordion .accordion-item {
    border-bottom: 1px solid rgba(0,31,57,0.2);
}
.ru-accordion .accordion-item:last-of-type,
.ru-accordion .accordion-item:last-of-type .accordion-button,
.ru-accordion .accordion-item:last-of-type .accordion-collapse {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.ru-accordion .accordion-button {
    font-size: 1rem;
    font-weight: 600;
}
.ru-accordion .accordion-body {
    font-size: 0.875rem;
}
.ru-accordion .accordion-button:not(.collapsed) {
    color: var(--ru-navy);
    box-shadow: none;
}
.ru-accordion .accordion-button::after {
    display: none !important;
}
.ru-accordion .accordion-button [class*="fa-"] {
    margin-left: auto;
    color: var(--ru-blue-mid);
    transition: transform 0.3s ease-in-out;
}
.ru-accordion .accordion-button:not(.collapsed) [class*="fa-"] {
    transform: rotate(180deg);
}
/* icon toggle — collapsed: plus; expanded: minus (square variants = brand motif) */
.ru-accordion .accordion-button .fa-square-minus,
.ru-accordion .accordion-button.collapsed .fa-square-minus {
    display: none !important;
}
.ru-accordion .accordion-button .fa-square-plus,
.ru-accordion .accordion-button.collapsed .fa-square-plus {
    display: inline-block !important;
}
.ru-accordion .accordion-button:not(.collapsed) .fa-square-minus {
    display: inline-block !important;
}
.ru-accordion .accordion-button:not(.collapsed) .fa-square-plus {
    display: none !important;
}
/* === Accordion Styles :: END === */
/* === Progress Bar Styles :: BEGIN === */
.step-container {
  position: relative;
  text-align: center;
  transform: translateY(-33%);
}

.step-circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--ru-blue);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  cursor: pointer; /* Added cursor pointer */
  transition-duration: 0.25s;
  position: relative;
}

.step-circle:hover,.step-circle:focus {
  background-color: var(--ru-blue);
  border: 2px solid var(--ru-blue);
  transition-duration: 0.25s;
}

.step-circle:hover i {
    color: #fff!important;
    transition-duration: 0.25s;
}

.step-line {
  position: absolute;
  top: 16px;
  left: 50px;
  width: calc(100% - 100px);
  height: 2px;
  background-color: var(--ru-blue);
  z-index: -1;
}

#multi-step-form{
  overflow-x: hidden;
}

/* === Progress Bar Styles :: END === */
/* === Utility Styles :: BEGIN === */

/* === Utility Styles :: END === */

/* === Media Queries :: BEGIN === */
@media (max-width:1600px) {
    .ru-hero-video-wrap h1 {
      font-size: 4.5rem;
    }
    .ru-hero-video-wrap.SUB h1 {
      font-size: 3.5rem;
    }
}
@media (max-width:1400px) {
    .ru-hero-video-wrap .container-fluid {
        padding-left:6rem;
        padding-right:6rem;
    }
    .ru-hero-video-wrap h1 {
      font-size: 4rem;
    }
    .ru-hero-video-wrap.SUB h1 {
      font-size: 3rem;
    }
    .ru-hero-video-wrap.upfitting {
        background: url(../img/ru-hero-upfitting-1400-600.webp) center bottom;
        background-size: cover;
    }
    /* === Banner Styled :: BEGIN === */
    .ru-banner-3M {
        background: url(../img/ru-banner-3M-1400.webp);
        background-size: cover;
    }
    /* === Banner Styles :: END === */
}

@media (max-width:1200px) {
    .ru-hero-video-wrap .container-fluid {
        padding-left:4rem;
        padding-right:4rem;
    }
    .ru-hero-video-wrap h1 {
      font-size: 3rem;
    }
    .ru-hero-video-wrap.SUB h1 {
      font-size: 2.5rem;
    }
    .ru-hero-video-wrap.upfitting {
        background: url(../img/ru-hero-upfitting-1200-600.webp) center bottom;
        background-size: cover;
    }
  /* === Banner Styled :: BEGIN === */
  .ru-banner-3M {
      background: url(../img/ru-banner-3M.svg);
      background-size: cover;
  }
  /* === Banner Styles :: END === */
  .menu-text{font-size: 10px;
    margin-bottom: 0rem!important;
  }
}

@media (max-width:991px) {
    .ru-hero-video-wrap .container-fluid {
        padding-left:2rem;
        padding-right:2rem;
    }
    .ru-hero-video-wrap.upfitting {
        background: url(../img/ru-hero-upfitting-991-600.webp) center center;
        background-size: cover;
    }
    
}

@media (max-width:767px) {
    .ru-hero-intro .ru-hero-padding {
        padding-top: 10rem;
        padding-right: 3rem;
        padding-bottom: 4rem;
        padding-left: 3rem;
    }
    .ru-hero-video-wrap.upfitting {
        background: url(../img/ru-hero-upfitting-767-500.webp) center center;
        background-size: cover;
    }
}

@media (max-width:576px) {
    .ru-hero-intro .ru-hero-padding {
        padding-top: 10rem;
        padding-right: 1rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
    }
    .ru-hero-intro h1 {
        font-size: 2rem;
    }
    .ru-hero-video-wrap.SUB h1 {
      font-size: 2rem;
    }
}

@media (max-width:450px) {
    .ru-hero-video-wrap.upfitting {
    background: url(../img/ru-hero-upfitting-450-500.webp) center center;
    background-size: cover;
}
}

/* === Media Queries :: END === */
/* === Hero "Check Out Our Catalog" anchor :: BEGIN === */
/* The hero's second button drops the visitor onto the vehicle explorer. Smooth
   scroll site-wide, with scroll-margin so the sticky nav never covers the target. */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
/* Generous margin: the nav adds .shrink-menu mid-scroll, which shortens it and
   pulls the document up ~45px after the browser has already picked its stop. */
#ru-catalog {
    scroll-margin-top: 190px;
}
@media (max-width: 1400px) {
    #ru-catalog { scroll-margin-top: 150px; }
}
/* === Hero "Check Out Our Catalog" anchor :: END === */
/* === Service body videos :: BEGIN === */
/* Muted 4:5 loops that stand in for the form-block image on a few service pages
   (currently shelving-systems). Capped so the portrait clip doesn't tower
   over the copy beside it. Pair with .inline-video, which undoes the global
   absolute/cover video rule meant for the heroes. */
.ru-body-video {
    max-width: 420px;
    margin-inline: auto;
}
/* === Service body videos :: END === */
/* === About Us detail video :: BEGIN === */
/* Beside the long detail copy on desktop the 16:9 clip looked stubby, so it
   stretches to the text column's height and crops its sides (action is centered).
   Phones keep the full 16:9 frame under the text. */
@media (min-width: 992px) {
    video.ru-about-video {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}
/* === About Us detail video :: END === */
/* === Photo gallery + trade packages :: BEGIN === */
/* ru-gallery-block.php thumbnails. The lightbox itself is styled in globals.css
   (Lightbox Gallery); the shell's endless zoom pulse is turned off here, and
   tall photos are capped to the viewport. */
.ru-gallery .gallery-item {
    display: block;
    overflow: hidden;
}
.ru-gallery .gallery-item img {
    transition: transform 0.3s ease, box-shadow 0.2s;
}
.ru-gallery .gallery-item:hover img,
.ru-gallery .gallery-item:focus-visible img {
    transform: scale(1.04);
}
.ru-gallery .gallery-item:focus-visible {
    outline: 3px solid var(--ru-blue-mid);
    outline-offset: 2px;
}
.lightbox-modal .carousel-inner img {
    animation: none;
    width: auto;
    max-height: 85vh;
}
/* Trade package renders are transparent PNG cutouts — the panel anchors them. */
.ru-trade-pkg img {
    background: var(--ru-explorer-stage);
}
/* === Photo gallery + trade packages :: END === */