/* =============================================================
   McCoy Towing — REDESIGN LAYER (additive)
   Loaded AFTER main.css. Uses !important where it must win.
   Brand: bg #282829, gold #fff212, white text, Montserrat.
   All redesign classes are prefixed "rd-".
   ============================================================= */

:root {
    --gold: #fff212;
    --gold-deep: #e6d600;
    --gold-soft: rgba(255, 242, 18, 0.14);
    --bg: #282829;
    --bg-alt: #1f1f20;
    --panel: #202022;
    --panel-2: #26262a;
    --line: rgba(255, 255, 255, 0.10);
    --line-gold: rgba(255, 242, 18, 0.35);
    --text: #ffffff;
    --muted: #c8c8cc;

    /* Subtle patriotic accents (used sparingly) */
    --navy: #0a2342;
    --flag-red: #b22234;
    --flag-blue: #2a3a73;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-gold: 0 16px 40px rgba(255, 242, 18, 0.16);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --maxw: 1200px;

    /* Fluid type scale */
    --fs-eyebrow: clamp(0.72rem, 0.65rem + 0.3vw, 0.85rem);
    --fs-body: clamp(0.98rem, 0.92rem + 0.3vw, 1.08rem);
    --fs-lead: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
    --fs-h2: clamp(1.7rem, 1.3rem + 2vw, 3rem);
    --fs-h1: clamp(2.1rem, 1.5rem + 3vw, 3.8rem);
    --fs-stat: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------
   Base typography refinements (kept gentle, brand-safe)
   ------------------------------------------------------------- */
.rd-scope,
.rd-section,
.rd-section-alt {
    line-height: 1.65;
    letter-spacing: 0.005em;
}

.rd-h1 {
    font-size: var(--fs-h1) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.4em !important;
}

.rd-h2 {
    font-size: var(--fs-h2) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.5em !important;
}

.rd-h3 {
    font-size: var(--fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.4em !important;
}

.rd-lead {
    font-size: var(--fs-lead) !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.rd-body {
    font-size: var(--fs-body) !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
}

.rd-gold {
    color: var(--gold) !important;
}

.rd-white {
    color: #fff !important;
}

.rd-muted {
    color: var(--muted) !important;
}

.rd-center {
    text-align: center !important;
}

.rd-mw {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* -------------------------------------------------------------
   Section wrappers + rhythm
   ------------------------------------------------------------- */
.rd-section,
.rd-section-alt {
    position: relative;
    padding: clamp(48px, 7vw, 96px) 0 !important;
    width: 100%;
}

.rd-section-alt {
    background: var(--bg-alt) !important;
    background-image:
        radial-gradient(1200px 400px at 50% -10%, rgba(255, 242, 18, 0.06), transparent 60%);
}

.rd-container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
}

/* -------------------------------------------------------------
   Eyebrow / kicker + divider
   ------------------------------------------------------------- */
.rd-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    font-size: var(--fs-eyebrow) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    margin: 0 0 0.9em !important;
    line-height: 1 !important;
}

.rd-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--gold);
    display: inline-block;
}

.rd-eyebrow.rd-eyebrow-center {
    justify-content: center !important;
}

.rd-divider {
    position: relative;
    display: inline-block;
    padding-bottom: 0.55em;
    margin-bottom: 0.7em;
}

.rd-divider::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}

.rd-divider.rd-divider-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------- */
.rd-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55em !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    padding: 0.95em 1.7em !important;
    border-radius: var(--radius-pill) !important;
    border: 2px solid transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
        background-color 0.25s var(--ease), color 0.25s var(--ease),
        border-color 0.25s var(--ease) !important;
    will-change: transform;
}

.rd-btn:focus-visible {
    outline: 3px solid var(--gold) !important;
    outline-offset: 2px !important;
}

.rd-btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 22px rgba(255, 242, 18, 0.22) !important;
}

.rd-btn-gold:hover,
.rd-btn-gold:focus {
    color: #1a1a1a !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(255, 242, 18, 0.34) !important;
}

.rd-btn-outline {
    background: transparent !important;
    color: var(--gold) !important;
    border-color: var(--line-gold) !important;
}

.rd-btn-outline:hover,
.rd-btn-outline:focus {
    color: #1a1a1a !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(255, 242, 18, 0.28) !important;
}

.rd-btn-lg {
    font-size: 1.08rem !important;
    padding: 1.1em 2.1em !important;
}

.rd-btn-block {
    display: flex !important;
    width: 100% !important;
}

/* -------------------------------------------------------------
   Cards (service / feature)
   ------------------------------------------------------------- */
.rd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
        border-color 0.3s var(--ease) !important;
    color: #fff !important;
}

.rd-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--line-gold) !important;
    box-shadow: var(--shadow-gold) !important;
}

.rd-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.rd-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s var(--ease) !important;
    display: block;
}

.rd-card:hover .rd-card-media img {
    transform: scale(1.08) !important;
}

.rd-card-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #1a1a1a;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.rd-card-body {
    padding: 1.4rem 1.4rem 1.6rem !important;
    flex: 1 1 auto;
}

.rd-card-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.25 !important;
}

.rd-card-text {
    font-size: 0.96rem !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------
   Trust / feature bar
   ------------------------------------------------------------- */
.rd-trust-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(12px, 2vw, 28px) !important;
    padding: 1.1rem 1rem !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--line) !important;
    background: linear-gradient(180deg, var(--panel), var(--bg-alt)) !important;
}

.rd-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6em !important;
    font-weight: 600 !important;
    font-size: 0.96rem !important;
    color: #fff !important;
    padding: 0.35em 0.2em !important;
}

.rd-trust-item i {
    color: var(--gold) !important;
    font-size: 1.15rem !important;
}

/* -------------------------------------------------------------
   Stat blocks
   ------------------------------------------------------------- */
.rd-stat {
    text-align: center;
    padding: 1.2rem 0.8rem;
}

.rd-stat-num {
    font-size: var(--fs-stat) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--gold) !important;
    letter-spacing: -0.02em !important;
    display: inline-block;
}

.rd-stat-suffix {
    color: var(--gold) !important;
    font-weight: 800;
}

.rd-stat-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.92rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted) !important;
}

/* -------------------------------------------------------------
   Badges / chips
   ------------------------------------------------------------- */
.rd-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45em !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    background: var(--gold-soft) !important;
    border: 1px solid var(--line-gold) !important;
    padding: 0.4em 0.85em !important;
    border-radius: var(--radius-pill) !important;
    line-height: 1 !important;
}

.rd-badge i {
    font-size: 0.9em;
}

/* -------------------------------------------------------------
   Sticky emergency call bar (revealed on scroll by redesign.js)
   ------------------------------------------------------------- */
.rd-callbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1080 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 2vw, 24px) !important;
    flex-wrap: wrap !important;
    padding: 0.6rem 1.1rem !important;
    background: rgba(20, 20, 21, 0.97) !important;
    border-bottom: 1px solid var(--line-gold) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.rd-callbar.rd-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.rd-callbar-text {
    font-weight: 700 !important;
    font-size: 0.99rem !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.rd-callbar-text i {
    color: var(--gold) !important;
}

.rd-callbar .rd-btn {
    padding: 0.6em 1.4em !important;
    font-size: 0.95rem !important;
}

@media (max-width: 480px) {
    .rd-callbar-text span.rd-callbar-label {
        display: none !important;
    }
}

/* -------------------------------------------------------------
   Back-to-top button (injected by redesign.js)
   ------------------------------------------------------------- */
.rd-top {
    position: fixed !important;
    right: 18px !important;
    bottom: 112px !important; /* clear the full-width sticky call button on phones */
    z-index: 1070 !important;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important;
    color: #1a1a1a !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}

.rd-top.rd-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.rd-top:hover {
    box-shadow: 0 14px 30px rgba(255, 242, 18, 0.32) !important;
    transform: translateY(-2px) scale(1.04);
}

@media (min-width: 768px) {
    .rd-top {
        bottom: 28px !important;
    }
}

/* -------------------------------------------------------------
   Scroll-reveal hooks
   ------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: opacity, transform;
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-scale {
    transform: scale(0.92);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger helpers (optional) */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* =============================================================
   POLISH OF EXISTING STRUCTURES (non-breaking)
   ============================================================= */

/* Nav link hover: gold underline grow ---------------------- */
.navbar-nav .nav-link {
    position: relative !important;
    font-weight: 600 !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    transition: color 0.2s var(--ease) !important;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 2px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--ease);
    border-radius: 2px;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
    transform: scaleX(1);
}

/* Logo framing ------------------------------------------------ */
.rd-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Header top utility row ------------------------------------- */
.rd-topbar {
    border-bottom: 1px solid var(--line);
}

.rd-icon-link {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    color: #fff !important;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
        border-color 0.25s var(--ease), transform 0.25s var(--ease) !important;
}

.rd-icon-link:hover,
.rd-icon-link:focus {
    background: var(--gold) !important;
    color: #1a1a1a !important;
    border-color: var(--gold) !important;
    transform: translateY(-2px) !important;
}

.rd-icon-link i {
    color: inherit !important;
    font-size: 1rem !important;
}

/* The header "Available 24/7" CTA --------------------------- */
.rd-header-cta {
    text-decoration: none !important;
}

/* Hero overlay gradient on .background-container ------------- */
.background-container .overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 10, 11, 0.55) 0%,
        rgba(10, 10, 11, 0.45) 35%,
        rgba(10, 10, 11, 0.82) 100%
    ) !important;
}

.background-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
    z-index: 2;
}

/* Cards (existing .card / .card-group) ---------------------- */
.card-group .card {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
        border-color 0.3s var(--ease) !important;
}

.card-group .card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--line-gold) !important;
    box-shadow: var(--shadow-gold) !important;
    z-index: 2;
}

.card-group .card .card-img-top,
.card-group .card .card-img-top-1 {
    transition: transform 0.5s var(--ease) !important;
}

.card-group .card:hover .card-img-top,
.card-group .card:hover .card-img-top-1 {
    transform: scale(1.06) !important;
}

.card-group .card .card-body {
    padding: 1.3rem 1.25rem 1.5rem !important;
}

.card-group .card .card-title {
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* Testimonial carousel framing ------------------------------ */
#carouselExampleControls {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-soft) !important;
    background: var(--panel) !important;
}

#carouselExampleControls .carousel-control-prev,
#carouselExampleControls .carousel-control-next {
    width: 9% !important;
}

#carouselExampleControls .carousel-control-prev-icon,
#carouselExampleControls .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    padding: 14px;
    background-size: 50%;
}

/* Footer styling ------------------------------------------- */
.rd-footer {
    background: var(--bg-alt) !important;
    border-top: 1px solid var(--line) !important;
    margin-top: clamp(40px, 6vw, 80px) !important;
}

.rd-footer .h-footer {
    line-height: 1.7 !important;
}

.rd-footer-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem !important;
    display: inline-block;
}

.rd-footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}

.rd-footer-links a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5em;
    padding: 0.3rem 0 !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease) !important;
}

.rd-footer-links a::before {
    content: "\f105"; /* fa angle-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--gold);
    font-size: 0.85em;
    transition: transform 0.2s var(--ease);
}

.rd-footer-links a:hover {
    color: var(--gold) !important;
    transform: translateX(3px);
}

.rd-footer-contact p {
    margin-bottom: 0.55rem !important;
}

.rd-footer-contact i {
    color: var(--gold) !important;
    width: 1.2em;
    margin-right: 0.5em;
}

.rd-footer-bottom {
    border-top: 1px solid var(--line) !important;
    padding: 1.4rem 0 !important;
    margin-top: 2rem !important;
}

.rd-footer-promo {
    text-align: center;
}

.rd-footer-payimg {
    max-width: 320px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

/* Compact "credit cards accepted" strip above the copyright bar */
.rd-footer-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 2rem;
}

.rd-footer-pay-label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.rd-footer-pay .rd-footer-payimg {
    max-width: 240px;
}

/* Mobile call button (#mobileCallButton / .btn-call) -------- */
.btn-call {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 0.01em !important;
}

.btn-call:hover {
    background: #fff !important;
    color: #111 !important;
}

#mobileCallButton {
    z-index: 1060 !important;
}

/* Map iframe framing (non-breaking) ------------------------ */
.rd-map-frame {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* -------------------------------------------------------------
   Form inputs — conservative dark field + gold focus ring.
   Scoped to .rd-form so contact.css/form.css defaults are
   untouched unless a view opts in by adding the wrapper class.
   ------------------------------------------------------------- */
.rd-form input[type="text"],
.rd-form input[type="email"],
.rd-form input[type="tel"],
.rd-form select,
.rd-form textarea {
    background: var(--panel-2) !important;
    color: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
        background-color 0.2s var(--ease) !important;
}

.rd-form input::placeholder,
.rd-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.rd-form input[type="text"]:focus,
.rd-form input[type="email"]:focus,
.rd-form input[type="tel"]:focus,
.rd-form select:focus,
.rd-form textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--gold-soft) !important;
    background: var(--panel) !important;
}

.rd-form input[type="submit"] {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    border-radius: var(--radius-pill) !important;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
}

.rd-form input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(255, 242, 18, 0.3) !important;
}

/* -------------------------------------------------------------
   Grid helpers for page authors
   ------------------------------------------------------------- */
.rd-grid {
    display: grid;
    gap: clamp(16px, 2.4vw, 28px);
}

.rd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rd-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    .rd-grid-3,
    .rd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .rd-grid-2,
    .rd-grid-3,
    .rd-grid-4 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   Mobile tweaks (<=768px)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .rd-section,
    .rd-section-alt {
        padding: clamp(40px, 9vw, 64px) 0 !important;
    }

    .rd-trust-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .rd-btn {
        width: 100%;
    }

    .rd-btn.rd-btn-inline {
        width: auto;
    }

    .rd-callbar {
        padding: 0.5rem 0.75rem !important;
    }
}

/* =============================================================
   LAYOUT FIXES (overlap / alignment cleanup) — additive overrides
   ============================================================= */

/* Guard against accidental horizontal scroll on phones (Bootstrap
   row gutters in .rd-container can spill a few px past the viewport).
   Use overflow-x:clip (not hidden) so it does NOT turn body into a
   scroll container / cause a stray right-side scrollbar gap. */
html {
    background-color: var(--bg);
    overflow-x: clip;              /* clip on the root viewport (no scroll-container quirk) */
}

body {
    margin: 0 !important;           /* flush header at the very top */
}

/* Trim the empty top padding on the first content section of every
   page (contact, locate, gallery, etc.) so content starts right under
   the header. The home hero (.rd-hero) is handled separately. */
section.rd-section:first-of-type,
section.rd-section-alt:first-of-type {
    padding-top: clamp(24px, 3vw, 40px) !important;
}

/* --- Hero: replace fragile absolute positioning with a centered
       flex column so larger redesign type can no longer overlap.
       Scoped to .background-container (home + rv heroes only). --- */
.background-container {
    height: auto !important;
    min-height: 540px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 2.4vw, 22px) !important;
    padding: clamp(54px, 8vw, 88px) clamp(16px, 4vw, 32px) !important;
}

.background-container .text,
.background-container .text2 {
    position: relative !important;   /* keep above the absolute .overlay */
    z-index: 2 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 !important;
}

.background-container .text2 {
    font-size: inherit !important;   /* drop the legacy 24px that bloated spacing */
}

/* Route-shield strip must never be absolutely positioned. The legacy
   rule (position:absolute; top:225px) overlapped content on every page
   that reuses .bloc-route in normal flow. Force it back into flow. */
.bloc-route {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
}

.background-container .bloc-route {
    position: relative !important;
    z-index: 2 !important;
    margin-top: clamp(8px, 2vw, 18px) !important;
}

/* --- Contact icon circles: neutralize legacy .icon { font-size:35px }
       inside .rd-icon-link so the glyph sits centered in the 40px box. */
.rd-icon-link .icon,
.rd-icon-link > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Header "Call Now" CTA: anchor inside the header (not the page)
       so it can no longer collide with the logo at narrower widths. */
header {
    position: relative !important;
}

.rd-header-cta {
    white-space: nowrap !important;
}

/* =============================================================
   CLEANER DISPATCH HEADER (compact, conversion-focused)
   ============================================================= */

/* US flag chips */
.rd-flag {
    width: 22px;
    height: auto;
    border-radius: 2px;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.rd-flag-sm {
    width: 18px;
}

.rd-header {
    position: relative;
}

/* --- Compact top utility bar --- */
.rd-topbar {
    background:
        linear-gradient(90deg, rgba(178, 34, 52, 0.12), rgba(10, 35, 66, 0.12)),
        var(--bg-alt);
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
}

.rd-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.rd-topbar-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.3rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rd-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    white-space: nowrap;
}

.rd-topbar-item i {
    color: var(--gold);
}

.rd-topbar-serving {
    color: #fff;
    font-weight: 700;
}

.rd-topbar-social {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    flex-shrink: 0;
}

.rd-topbar-social a {
    color: var(--muted) !important;
    font-size: 0.9rem;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.rd-topbar-social a:hover,
.rd-topbar-social a:focus {
    color: var(--gold) !important;
    transform: translateY(-1px);
}

.rd-topbar-social a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Main header bar --- */
.rd-header-main {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.rd-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
    flex-wrap: wrap;
    width: 100%;
}

.rd-header-logo {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.rd-header-main .logo {
    width: 116px !important;
    height: auto !important;
    display: block;
}

.rd-header-main .navbar-nav {
    margin-top: 0 !important;
    align-items: center;
}

.rd-header-main .navbar-nav .nav-link {
    font-size: 1rem !important;
    padding: 0.4rem 0.85rem !important;
}

.rd-header-cta-group {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.rd-call-now {
    box-shadow: 0 10px 26px rgba(255, 242, 18, 0.30) !important;
}

.rd-header-call {
    font-size: 1rem !important;
    padding: 0.7em 1.15em !important;
    white-space: nowrap;
}

.rd-toggler {
    border: 1px solid var(--line-gold) !important;
    padding: 0.3rem 0.62rem !important;
    line-height: 1;
}

.rd-toggler i {
    font-size: 1.2rem;
}

@media (max-width: 1199.98px) {
    .rd-header-main .navbar-nav {
        padding-top: 0.6rem;
        padding-bottom: 0.3rem;
        gap: 0.1rem;
        align-items: flex-start;
    }
}

@media (max-width: 991px) {
    .rd-topbar-social {
        display: none;
    }

    .rd-topbar-inner {
        justify-content: center;
        text-align: center;
    }

    .rd-topbar-trust {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .rd-header-main .logo {
        width: 96px !important;
    }

    .rd-header-row {
        gap: 0.45rem 0.4rem;
    }

    .rd-header-cta-group {
        gap: 0.3rem;
    }

    .rd-header-call {
        font-size: 0.8rem !important;
        padding: 0.55em 0.7em !important;
        gap: 0.4em !important;
        flex-shrink: 1;
        min-width: 0;
    }

    .rd-call-label {
        display: none;
    }

    .rd-toggler {
        padding: 0.28rem 0.5rem !important;
    }

    .rd-topbar {
        font-size: 0.72rem;
    }

    .rd-topbar-trust {
        gap: 0.2rem 0.7rem;
    }

    /* Keep the top bar to the two highest-value signals on phones
       (avoids a 3-line wrap that re-inflates header height). */
    .rd-topbar-item:nth-child(2),
    .rd-topbar-item:nth-child(3) {
        display: none;
    }
}

/* =============================================================
   PREMIUM HERO (home) — full-bleed Orlando action photo
   ============================================================= */
.rd-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    min-height: clamp(460px, 62vh, 640px);
    background: #0b0b0c;
    border-bottom: 3px solid var(--gold);
}

/* Full-bleed background photo (real Orlando job shot) */
.rd-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center; /* keep wrecker + Orlando sign in frame */
    /* lift the naturally-dark dusk truck so it reads clearly */
    filter: brightness(1.22) contrast(1.02) saturate(1.06);
    z-index: 0;
}

/* Readability + brand overlay: dark on the left, clearer over the truck,
   warm amber floor for the night-dispatch mood. */
.rd-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.66) 34%, rgba(8, 8, 9, 0.26) 64%, rgba(8, 8, 9, 0.06) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, transparent 38%, rgba(0, 0, 0, 0.28) 100%),
        radial-gradient(120% 90% at 50% 130%, rgba(255, 150, 30, 0.16), transparent 60%);
}

.rd-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(22px, 2.5vw, 34px);
    padding-bottom: clamp(28px, 3.5vw, 48px);
}

.rd-hero-content {
    max-width: 640px;
}

.rd-hero-flagline {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-left: 3px solid var(--flag-red);
    padding: 0.5em 0.95em;
    border-radius: var(--radius-pill);
    margin-bottom: 1em;
}

.rd-hero-title {
    font-size: clamp(2rem, 1.2rem + 3.1vw, 3.5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0 0 0.4em;
}

.rd-hero-sub {
    font-size: var(--fs-lead);
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 1.3em;
    max-width: 34em;
}

.rd-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.1rem;
}

/* Inline services line under the CTAs */
.rd-hero-servicesline {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.01em;
    margin: 0 0 1.4rem;
    line-height: 1.7;
}

.rd-hero-servicesline span[aria-hidden] {
    color: var(--gold);
    margin: 0 0.35em;
}

.rd-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
}

.rd-hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.rd-hero-trust-item i {
    color: var(--gold);
    font-size: 1.05rem;
}

/* --- Hero responsive --- */
@media (max-width: 991px) {
    .rd-hero {
        min-height: clamp(440px, 70vh, 600px);
    }

    .rd-hero-photo {
        object-position: 64% center;
    }

    /* Stronger top-to-bottom darkening so centered text stays legible */
    .rd-hero-overlay {
        background:
            linear-gradient(180deg, rgba(8, 8, 9, 0.44) 0%, rgba(8, 8, 9, 0.55) 55%, rgba(8, 8, 9, 0.72) 100%),
            radial-gradient(120% 80% at 50% 120%, rgba(255, 150, 30, 0.14), transparent 60%);
    }

    .rd-hero-inner {
        text-align: center;
    }

    .rd-hero-content {
        max-width: none;
        margin: 0 auto;
    }

    .rd-hero-cta,
    .rd-hero-trust,
    .rd-hero-servicesline {
        justify-content: center;
    }

    .rd-hero-sub,
    .rd-hero-servicesline {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =============================================================
   MOBILE (phones) — premium, decluttered hero + below-hero CTA
   ============================================================= */
@media (max-width: 767.98px) {
    /* Tighter, more premium hero rhythm + thin clean gold divider */
    .rd-hero {
        min-height: clamp(380px, 60vh, 520px);
        border-bottom-width: 2px;
    }

    /* Keep the title/subtext legible (dark at the top) but lighten the
       lower half so the truck stays visible and premium. */
    .rd-hero-overlay {
        background:
            linear-gradient(180deg, rgba(6, 6, 7, 0.72) 0%, rgba(6, 6, 7, 0.44) 48%, rgba(6, 6, 7, 0.2) 100%),
            radial-gradient(130% 62% at 50% 12%, rgba(0, 0, 0, 0.3), transparent 60%);
    }

    /* In-hero buttons stay removed — the sticky bottom bar is the CTA */
    .rd-hero .rd-hero-cta {
        display: none !important;
    }

    .rd-hero-inner {
        padding-top: clamp(16px, 2vw, 24px);
        padding-bottom: clamp(18px, 2.5vw, 28px);
    }

    .rd-hero-content {
        max-width: 30rem;
    }

    .rd-hero-flagline {
        margin-bottom: 0.85em;
    }

    .rd-hero-title {
        margin-bottom: 0.4em;
    }

    .rd-hero-sub {
        margin-bottom: 0.95em;
    }

    /* Services line: clean, intentional wrap (names never split) */
    .rd-hero-servicesline {
        font-size: 0.8rem;
        line-height: 1.75;
        margin-bottom: 0;
        max-width: 19rem;
    }

    .rd-hero-servicesline .rd-svc {
        white-space: nowrap;
    }

    .rd-hero-servicesline span[aria-hidden] {
        margin: 0 0.3em;
    }

    /* Trust badges: compact premium pills, centered, tidy wrap */
    .rd-hero-trust {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.45rem;
        max-width: 23rem;
        margin: 1rem auto 0;
    }

    .rd-hero-trust-item {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        padding: 0.42em 0.85em;
        font-size: 0.76rem;
    }

    .rd-hero-trust-item i {
        font-size: 0.9rem;
    }

    /* Compact header (~12% shorter; logo drives the bar height) */
    .rd-header-main {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .rd-header-main .logo {
        width: 76px !important;
    }

    /* Bigger, easier tap targets (logo still drives the bar height) */
    .rd-header-call {
        min-height: 44px;
    }

    .rd-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Top bar: shorter + fits "24/7 Dispatch + Proudly Serving" on one line */
    .rd-topbar {
        font-size: 0.66rem;
    }

    .rd-topbar-trust {
        gap: 0.2rem 0.45rem;
    }

    .rd-topbar-item i {
        font-size: 0.92em;
    }

    .rd-topbar-inner {
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
    }

    .rd-flag-sm {
        width: 16px;
    }

    /* Highways band */
    .rd-roads {
        padding: clamp(20px, 4.5vw, 34px) 0;
    }

    /* On phones the sticky bottom CTA is the persistent call action,
       so drop the scroll-reveal top call bar to keep it clean. */
    .rd-callbar {
        display: none !important;
    }

    /* Reserve space so the fixed CTA never covers page content */
    body.is-home {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    body.is-home .rd-top {
        bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }
}

/* ===== Mobile primary CTA: sticky "Call a Tow Truck Near Me" =====
   Fixed to the bottom so it follows on scroll (the #1 mobile action). */
.rd-mcta {
    padding: clamp(20px, 6vw, 28px) clamp(16px, 5vw, 24px) clamp(6px, 2vw, 12px);
    text-align: center;
    background: var(--bg);
}

@media (max-width: 767.98px) {
    .rd-mcta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(6, 6, 7, 0.98) 58%, rgba(6, 6, 7, 0));
        pointer-events: none;   /* let the transparent fade pass taps through */
    }

    .rd-mcta-btn {
        pointer-events: auto;   /* the button itself stays tappable */
        font-size: 1.06rem;
        padding: 0.95em 1.3em;
    }
}

.rd-mcta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 1em 1.3em;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #1a1a1a !important;
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    /* Subtle premium glow (not neon) */
    box-shadow: 0 6px 18px rgba(255, 242, 18, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.rd-mcta-btn:hover,
.rd-mcta-btn:focus {
    color: #1a1a1a !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 242, 18, 0.3), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.rd-mcta-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Premium framing for in-content vehicle photos */
.rd-photo {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

/* =============================================================
   "Serving Orlando's Main Highways" — compact shield row
   ============================================================= */
.rd-roads {
    padding: clamp(30px, 4.5vw, 56px) 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.rd-roads-title {
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem) !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 clamp(18px, 2.5vw, 30px) !important;
    line-height: 1.2 !important;
}

.rd-roads-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(18px, 3vw, 44px);
}

.rd-road {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 76px;
}

/* Gold-outlined highway shield (crisp SVG, uniform, brand-consistent) */
.rd-road-shield {
    width: 58px;
    height: 66px;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
    transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}

.rd-road-shield path {
    fill: var(--panel);
    stroke: var(--gold);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.rd-road-shield text {
    fill: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.rd-road:hover .rd-road-shield {
    transform: translateY(-3px);
    filter: drop-shadow(0 12px 22px rgba(255, 242, 18, 0.28));
}

.rd-road-cap {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 575px) {
    .rd-roads-row {
        gap: 16px 22px;
    }

    .rd-road {
        width: 64px;
    }

    .rd-road-shield {
        width: 50px;
        height: 58px;
    }

    .rd-road-cap {
        font-size: 0.66rem;
    }
}

/* --- Standardized highway sign icons (PNG) — subtle local coverage proof.
       Small, consistent, one row on desktop; wraps to a clean grid on phones. */
.rd-hwy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.6vw, 30px);
    margin-top: clamp(8px, 1.6vw, 16px);
}

.rd-hwy-icon {
    height: 72px;            /* desktop ~72px (within the 64–80 range) */
    width: auto;
    display: block;
    /* keep it elegant: no heavy shadow/glow, just a hair of depth */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}

/* very subtle hover only on real pointer devices */
@media (hover: hover) and (pointer: fine) {
    .rd-hwy-icon:hover {
        transform: translateY(-3px);
        filter: brightness(1.08) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    }
}

.rd-hwy-caption {
    margin: clamp(16px, 2.4vw, 26px) auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

@media (max-width: 575.98px) {
    /* One compact horizontal row of small icons. Scrolls horizontally with
       NO visible scrollbar only if the row can't fit, so the section stays
       short and the yellow CTA keeps the focus. */
    .rd-hwy-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: safe center;
        align-items: center;
        gap: 11px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* old Edge / IE */
        margin-top: clamp(6px, 1.4vw, 12px);
    }
    .rd-hwy-row::-webkit-scrollbar {
        display: none;                  /* Chrome / Safari */
    }
    .rd-hwy-icon {
        height: 38px;        /* small & elegant (within the 34–42px range) */
        flex: 0 0 auto;      /* never shrink inside the row */
    }
    .rd-hwy-caption {
        display: none;       /* no extra height on mobile; CTA stays dominant */
    }
}

/* Sticky call bar: small standardized highway sign icons.
   Only shown on wide screens (>=1200px) where they fit on one row, so the
   sticky bar stays compact and the Call button keeps priority. */
.rd-callbar-roads {
    display: none;
}

@media (min-width: 1200px) {
    .rd-callbar-roads {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding-left: 1.1rem;
        margin-left: 0.35rem;
        border-left: 1px solid var(--line);
    }
    .rd-callbar-ico {
        height: 26px;          /* small but legible; 256px source stays sharp */
        width: auto;
        display: block;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    }
}

/* =============================================================
   FAQ (home) — native <details> accordions, dark/gold theme
   ============================================================= */
.rd-faq {
    max-width: 820px;
    margin: clamp(10px, 2vw, 22px) auto 0;
}

.rd-faq-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 0.7rem;
    overflow: hidden;
    transition: border-color 0.25s var(--ease);
}

.rd-faq-item[open] {
    border-color: var(--line-gold);
}

.rd-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    font-weight: 700;
    font-size: 0.98rem;
    color: #fff;
}

.rd-faq-item summary::-webkit-details-marker {
    display: none;
}

.rd-faq-item summary::after {
    content: "\f078"; /* fa chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--gold);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
}

.rd-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.rd-faq-item summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.rd-faq-item p {
    margin: 0;
    padding: 0 1.15rem 1.05rem;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

.rd-faq-item a {
    color: var(--gold) !important;
    text-decoration: underline !important;
}

/* Cities-served line under the highways strip */
.rd-hwy-areas {
    max-width: 760px;
    margin: 0.7rem auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.7;
}

.rd-hwy-areas a {
    color: var(--muted) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted var(--line-gold);
}

.rd-hwy-areas a:hover {
    color: var(--gold) !important;
}

@media (max-width: 575.98px) {
    .rd-hwy-areas {
        font-size: 0.74rem;
    }
}

/* -------------------------------------------------------------
   Respect reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rd-btn,
    .rd-card,
    .rd-card-media img,
    .card-group .card,
    .rd-top,
    .rd-callbar,
    .rd-icon-link {
        transition: none !important;
    }

    .rd-card:hover,
    .card-group .card:hover,
    .rd-btn:hover {
        transform: none !important;
    }
}

/* =============================================================
   MOBILE HARDENING v2  (appended last = authoritative)
   Diagnosed live at 375px. Fixes:
   - horizontal scroll (Bootstrap row gutters + directional reveals
     + the fixed mobile call bar were spilling 24-48px past the edge)
   - cropped / distorted vehicle photos
   - keeps everything inside the viewport on phones
   ============================================================= */

/* 1) Hard stop on horizontal scrolling (iOS-safe: clip, not hidden,
      so position:fixed bars are unaffected). */
html,
body {
    overflow-x: clip !important;
    max-width: 100% !important;
}

/* 2) The base .rd-container rule was being dropped by the cascade
      (computed padding was 0 → Bootstrap rows spilled out). Re-assert
      it authoritatively so rows always have room for their gutters. */
.rd-container {
    width: 100% !important;
    max-width: var(--maxw) !important;
    margin-inline: auto !important;
    padding-inline: clamp(16px, 4vw, 32px) !important;
}

/* 3) Cap Bootstrap gutters on phones so half-gutter never exceeds the
      container padding (g-5 = 48px was the main 24px-each-side spill). */
@media (max-width: 767.98px) {
    .rd-container .row,
    .rd-container .row[class*="g-"] {
        --bs-gutter-x: 1.5rem !important;
    }
}

/* 4) Directional reveals translated content horizontally off-screen
      before animating in → horizontal scroll. On phones/tablets move
      them vertically only (desktop keeps the left/right flourish). */
@media (max-width: 991.98px) {
    .reveal-left,
    .reveal-right {
        transform: translate3d(0, 24px, 0) !important;
    }
    .reveal-left.is-visible,
    .reveal-right.is-visible {
        transform: none !important;
    }
}

/* 5) Fixed mobile call bar / top emergency bar must fit exactly. */
.rd-mcta,
.rd-callbar {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.rd-mcta *,
.rd-callbar * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 6) Belt-and-suspenders: no media element may exceed the screen. */
img,
iframe,
video,
.img-fluid {
    max-width: 100% !important;
    height: auto;
}

/* 7) Service-card photos: show the WHOLE vehicle, never cut the frame.
      Source images have mixed portrait/landscape ratios, so contain on
      a branded panel keeps every truck fully visible and uniform. */
.card-group .card .card-img-top,
img.card-img-top {
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    background: linear-gradient(160deg, #2c2c2e 0%, #1b1b1c 100%) !important;
    border-radius: var(--radius-sm, 10px) !important;
}

/* 8) Testimonial carousel images were stretched (object-fit:fill on a
      forced 200px height). Show them undistorted. */
#carouselExampleControls .carousel-item img,
.carousel .carousel-item img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 460px !important;
    background: #1f1f20 !important;
}

/* 9) Hero photo: keep it filling its frame but bias the crop so the
      wrecker stays in view on tall mobile viewports. */
.rd-hero-photo {
    object-position: center 42% !important;
}

/* 10) Comfortable tap targets + spacing on phones. */
@media (max-width: 575.98px) {
    .rd-btn,
    .rd-btn-inline {
        min-height: 46px;
    }
    .rd-mcta-btn {
        white-space: nowrap;
    }
}

/* =============================================================
   CITY / SERVICE-AREA PAGES (towing-city + service-areas)
   ============================================================= */

/* Breadcrumb */
.rd-breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.rd-breadcrumb a {
    color: var(--muted) !important;
    text-decoration: none !important;
}

.rd-breadcrumb a:hover {
    color: var(--gold) !important;
}

.rd-breadcrumb span[aria-hidden] {
    margin: 0 0.4em;
    color: var(--line-gold);
}

.rd-breadcrumb [aria-current] {
    color: var(--gold);
}

/* "Highways / around / zips" info card */
.rd-area-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 1.4rem 1.5rem;
}

.rd-area-card-title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff !important;
    margin: 0 0 0.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.rd-area-card-title i {
    color: var(--gold);
    font-size: 0.9em;
}

.rd-area-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
}

.rd-area-list li {
    position: relative;
    padding-left: 1.3em;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.rd-area-list li::before {
    content: "\f3c5"; /* fa map-marker-alt */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--gold);
    position: absolute;
    left: 0;
    font-size: 0.8em;
    top: 0.18em;
}

.rd-area-meta {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* Service mini-cards (icon list) */
.rd-svc-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    height: 100%;
}

.rd-svc-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-gold);
    box-shadow: var(--shadow-gold);
}

.rd-svc-card-ico {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #1a1a1a;
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
}

.rd-svc-card-title {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 0.4rem !important;
}

.rd-svc-card-desc {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Nearby-area chips (internal links) */
.rd-nearby {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.rd-nearby-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.1em;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none !important;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.rd-nearby-link i {
    color: var(--gold);
}

.rd-nearby-link:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1a1a !important;
    transform: translateY(-2px);
}

.rd-nearby-link:hover i {
    color: #1a1a1a;
}

/* Service-areas hub: city tiles */
.rd-area-tile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.rd-area-tile:hover {
    transform: translateY(-4px);
    border-color: var(--line-gold);
    box-shadow: var(--shadow-gold);
}

.rd-area-tile-ico {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #1a1a1a;
    font-size: 1.1rem;
}

.rd-area-tile-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.rd-area-tile-name {
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
}

.rd-area-tile-meta {
    color: var(--muted);
    font-size: 0.84rem;
    margin-top: 0.15rem;
}

.rd-area-tile-arrow {
    margin-left: auto;
    color: var(--gold);
    font-size: 0.85rem;
    transition: transform 0.2s var(--ease);
}

.rd-area-tile:hover .rd-area-tile-arrow {
    transform: translateX(3px);
}

/* The footer logo now carries width/height attributes (CLS fix); main.css
   forces only its width, so make height follow the aspect ratio. */
.logo-footer {
    height: auto !important;
}

/* Language selector rendered as <button>s (crawlable-links fix):
   neutralize native button chrome so they look identical to the old <a>s. */
button.nav-link.rd-lang-btn {
    background: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    color: #fff212 !important; /* match .nav a gold (anchor-only rule in main.css) */
}

button.nav-link.rd-lang-btn:hover,
button.nav-link.rd-lang-btn:focus {
    color: #fff !important;    /* match a.nav-link:hover in main.css */
}

button.dropdown-item.language-option {
    background-color: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

button.dropdown-item.language-option:hover,
button.dropdown-item.language-option:focus {
    background-color: #f8f9fa;
}

/* Footer service-area links */
.rd-footer-areas {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
    margin-top: 0.5rem;
    text-align: center;
}

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

.rd-footer-areas p {
    line-height: 2;
    margin: 0.6rem 0 0;
}

.rd-footer-areas a {
    color: var(--muted) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.rd-footer-areas a:hover {
    color: var(--gold) !important;
}

/* =============================================================
   B2B / COMMERCIAL — partner-network logo strip
   ============================================================= */
.rd-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 22px);
    margin-top: clamp(14px, 2vw, 24px);
}

.rd-partner-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.1rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.rd-partner-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255, 242, 18, 0.18);
}

.rd-partner-chip img {
    height: 34px;
    width: auto;
    display: block;
}

@media (max-width: 575.98px) {
    .rd-partner-chip {
        padding: 0.5rem 0.85rem;
    }

    .rd-partner-chip img {
        height: 24px;
    }
}

/* "How it works" numbered badges reuse .rd-svc-card-ico */
.rd-svc-card-ico {
    font-weight: 800;
}

/* With 6 nav items + Language, tighten link spacing on narrow desktops
   (1200-1399px) so the nav stays on one row beside the logo and CTA. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .rd-header-main .navbar-nav .nav-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.92rem !important;
    }

    .rd-header-main .navbar-nav .nav-link::after {
        left: 0.5rem;
        right: 0.5rem;
    }
}