/* ==========================================================================
   Maximus Leather Repair – site enhancements
   Layered on top of the existing theme (style.min.css / custom.css).
   Brand red: #bc0202
   ========================================================================== */
:root {
  --mx-red: #bc0202;
  --mx-red-dark: #8e0101;
  --mx-red-soft: #fbeeee;
  --mx-red-bright: #e3141a; /* brand red, lifted for dark/photo backgrounds */
  --mx-ink: #1d2126;
  --mx-body: #4a5058;
  --mx-muted: #6b7280;
  --mx-line: #e8e4e1;
  --mx-soft: #f7f5f3;
  --mx-radius: 14px;
  --mx-shadow: 0 18px 50px rgba(20, 20, 24, .12);
  --mx-shadow-lg: 0 24px 70px rgba(0, 0, 0, .35);
}

/* ---------- Shared bits ---------- */
.mx-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mx-red); margin-bottom: .75rem;
}
.mx-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block; }
.mx-eyebrow.mx-eyebrow--pill {
  color: #fff; background: rgba(188, 2, 2, .92); padding: .38rem .85rem; border-radius: 999px;
}
.mx-eyebrow.mx-eyebrow--pill::before { display: none; }
.mx-eyebrow.text-center-line { justify-content: center; }

.mx-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mx-actions.justify-content-center { justify-content: center; }
.btn.mx-btn { border-radius: 999px; font-weight: 700; padding: .8rem 1.6rem; display: inline-flex; align-items: center; gap: .5rem; }
.btn.mx-btn i { font-size: 1.15em; }
.btn.mx-btn-primary { background: var(--mx-red); border-color: var(--mx-red); color: #fff; }
.btn.mx-btn-primary:hover { background: var(--mx-red-dark); border-color: var(--mx-red-dark); color: #fff; transform: translateY(-1px); }
.btn.mx-btn-ghost { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.btn.mx-btn-ghost:hover { background: #fff; color: var(--mx-red) !important; }
.btn.mx-btn-outline { background: transparent; border: 1.5px solid var(--mx-red); color: var(--mx-red); }
.btn.mx-btn-outline:hover { background: var(--mx-red); color: #fff !important; }
.btn.mx-btn-white { background: #fff; color: var(--mx-red) !important; border-color: #fff; }
.btn.mx-btn-white:hover { background: var(--mx-ink); border-color: var(--mx-ink); color: #fff !important; }

.mx-checks { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: .55rem; }
.mx-checks li { display: flex; gap: .6rem; align-items: flex-start; color: #fff; font-weight: 500; }
.mx-checks li::before { display: none !important; }
.mx-checks i { color: var(--mx-red-bright); font-size: 1.2rem; line-height: 1.3; }
@media (min-width: 576px) { .mx-checks.mx-checks--2col { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }

/* ---------- Navbar CTA ---------- */
.mx-nav-cta { margin-left: .5rem; }
@media (min-width: 992px) {
  .navbar .navbar-other.w-100 { width: auto !important; flex: 0 0 auto; }
}
.mx-nav-cta .btn { padding: .55rem 1.15rem; font-size: .85rem; white-space: nowrap; }
.mx-nav-phone { color: #fff !important; font-weight: 700; font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.navbar.fixed .mx-nav-phone, .navbar.navbar-light:not(.transparent) .mx-nav-phone { color: var(--mx-ink) !important; }

/* ---------- Mobile menu (hamburger) ----------
   The theme forces a white background on the button, and the three lines are
   white too, so it rendered as a blank white box. */
.navbar .navbar-other.w-100.d-flex li.nav-item.d-lg-none { background: transparent !important; }
.navbar button.hamburger.offcanvas-nav-btn {
  background: transparent !important; color: #fff !important;
  width: 44px; height: 44px; border-radius: 10px; margin: 0;
  border: 1.5px solid rgba(255,255,255,.35) !important;
}
.navbar button.hamburger.offcanvas-nav-btn:hover,
.navbar button.hamburger.offcanvas-nav-btn:focus-visible { border-color: #fff !important; background: rgba(255,255,255,.08) !important; }
.navbar button.hamburger.offcanvas-nav-btn span,
.navbar button.hamburger.offcanvas-nav-btn::before,
.navbar button.hamburger.offcanvas-nav-btn::after { width: 1.35rem; height: 2px; background: #fff !important; }
/* only on a light header do the lines turn dark */
.navbar.navbar-light:not(.transparent) button.hamburger.offcanvas-nav-btn { color: var(--mx-ink) !important; border-color: var(--mx-line) !important; }
.navbar.navbar-light:not(.transparent) button.hamburger.offcanvas-nav-btn span,
.navbar.navbar-light:not(.transparent) button.hamburger.offcanvas-nav-btn::before,
.navbar.navbar-light:not(.transparent) button.hamburger.offcanvas-nav-btn::after { background: var(--mx-ink) !important; }

/* ---------- Home hero ---------- */
#slider-section { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; flex-shrink: 0; }
#slider-section > .swiper-container { position: absolute; inset: 0; z-index: 0 !important; height: 100% !important; }
#slider-section .swiper, #slider-section .swiper-wrapper, #slider-section .swiper-slide { height: 100% !important; }
#slider-section .swiper-controls .swiper-navigation { display: none; }
#slider-section .swiper-pagination { z-index: 4; }
.mx-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(12,12,14,.86) 0%, rgba(12,12,14,.62) 48%, rgba(12,12,14,.35) 100%); }
.mx-hero { position: relative; z-index: 3; width: 100%; padding: 9rem 0 5.5rem; }
.mx-hero h1, .mx-page-hero h1 { color: #fff; font-size: clamp(2.05rem, 4.3vw, 3.5rem); line-height: 1.08; letter-spacing: -.01em; margin: 1rem 0 1.1rem; }
.mx-hero .mx-lead, .mx-page-hero .mx-lead { color: rgba(255,255,255,.9); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; max-width: 38rem; margin-bottom: 0; }

/* ---------- Inner page hero ---------- */
.mx-page-hero { position: relative; flex-shrink: 0; }
/* The theme hides page banners on phones (.mobile); ours holds the H1 + form, so keep it. */
section.wrapper.image-wrapper.mx-page-hero.mobile { display: block !important; }
.mx-page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(12,12,14,.8) 0%, rgba(12,12,14,.5) 60%, rgba(12,12,14,.3) 100%); }
.mx-page-hero > .container { position: relative; z-index: 2; }
.mx-page-hero.mx-page-hero--center .mx-lead { margin-left: auto; margin-right: auto; }
.mx-crumbs { list-style: none; padding: 0; margin: 0 0 .25rem; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; color: rgba(255,255,255,.75); }
.mx-crumbs li::before { display: none !important; }
.mx-crumbs li + li::before { content: "/" !important; display: inline !important; margin-right: .35rem; opacity: .6; position: static !important; background: none !important; }
.mx-crumbs a { color: rgba(255,255,255,.85) !important; }
.mx-crumbs a:hover { color: #fff !important; text-decoration: underline; }
.mx-page-hero--center .mx-crumbs { justify-content: center; }

/* ---------- Quote card (hero form) ---------- */
.mx-quote-card { background: #fff; border-radius: 18px; box-shadow: var(--mx-shadow-lg); padding: 1.75rem 1.6rem 1.4rem; color: var(--mx-body); scroll-margin-top: 110px; }
.mx-quote-card .mx-quote-title { font-size: 1.35rem; color: var(--mx-ink); margin: 0 0 .2rem; }
.mx-quote-card .mx-quote-sub { font-size: .9rem; color: var(--mx-muted); margin-bottom: 1rem; }
.mx-quote-card .form-control, .mx-quote-card .form-select { border-radius: 10px; }
.mx-quote-card .form-floating > label { color: var(--mx-muted); }
.mx-quote-card .btn { width: 100%; justify-content: center; }
/* Fold / unfold: the form slides down from the toggle button */
.mx-quote-toggle { width: 100%; justify-content: center; padding: .5rem 1rem !important; font-size: .8rem; line-height: 1.4; box-shadow: 0 6px 16px rgba(188, 2, 2, .22); }
.mx-quote-toggle .mx-caret { margin-left: auto; font-size: 1rem !important; transition: transform .35s ease; }
.mx-quote-toggle .mx-toggle-close { display: none; }
.mx-quote-card:not(.is-collapsed) .mx-quote-toggle { background: transparent; color: var(--mx-muted); border-color: var(--mx-line); box-shadow: none; padding: .55rem 1rem !important; font-size: .85rem; margin-bottom: 1rem; }
.mx-quote-card:not(.is-collapsed) .mx-quote-toggle:hover { color: var(--mx-red); border-color: var(--mx-red); transform: none; }
.mx-quote-card:not(.is-collapsed) .mx-quote-toggle .mx-toggle-open { display: none; }
.mx-quote-card:not(.is-collapsed) .mx-quote-toggle .mx-toggle-close { display: inline; }
.mx-quote-card:not(.is-collapsed) .mx-quote-toggle .mx-caret { transform: rotate(180deg); }
@keyframes mx-pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(188,2,2,.22); } 50% { box-shadow: 0 6px 16px rgba(188,2,2,.22), 0 0 0 6px rgba(188,2,2,.14); } }
.mx-quote-panel { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .5s ease, opacity .35s ease .1s; }
.mx-quote-panel > form { min-height: 0; overflow: hidden; }
.mx-quote-card.is-collapsed .mx-quote-panel { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s ease, opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .mx-quote-panel, .mx-quote-toggle .mx-caret { transition: none; } .mx-quote-toggle { animation: none !important; } }
.mx-form-note { font-size: .78rem; color: var(--mx-muted); margin: .7rem 0 0; display: flex; align-items: center; gap: .35rem; justify-content: center; text-align: center; }
.mx-form-note i { color: var(--mx-red); }

/* ---------- Forms ---------- */
.mx-form .form-select-wrapper { margin-bottom: 1rem; }
.mx-form .form-text { font-size: .8rem; }
.mx-form .form-check-label { font-size: .82rem; }
.mx-form-success { text-align: center; padding: 1.5rem 1rem; }
.mx-form-success i { font-size: 2.6rem; color: #1a9c55; display: block; margin-bottom: .5rem; }
.mx-form-success h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.mx-form-success p { margin: 0; color: var(--mx-muted); }
.contact-section-wrapper .mx-form-success h3, .contact-section-wrapper .mx-form-success p { color: inherit; }

/* ---------- Section headings ---------- */
.mx-section-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.mx-section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--mx-ink); margin-bottom: .75rem; }
.mx-section-head p { color: var(--mx-body); font-size: 1.05rem; margin: 0; }

/* ---------- CTA band ---------- */
.mx-cta-wrap { padding: 0 0 3.5rem; flex-shrink: 0; }
.mx-cta-wrap.mx-cta-wrap--top { padding-top: 3.5rem; }
.mx-cta { position: relative; overflow: hidden; border-radius: 22px; padding: 2.4rem 2rem; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #e0211f 0%, var(--mx-red) 42%, #6d0000 100%);
  box-shadow: 0 20px 50px rgba(188, 2, 2, .25); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.mx-cta::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255,255,255,.07); pointer-events: none; }
.mx-cta h2, .mx-cta h3 { color: #fff !important; font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: 0 0 .35rem; }
.mx-cta p { color: rgba(255,255,255,.88) !important; margin: 0; max-width: 40rem; }
.mx-cta .mx-actions { position: relative; z-index: 1; }
@media (min-width: 992px) { .mx-cta { padding: 2.6rem 3rem; } }

/* Inline CTA inside long content */
.mx-inline-cta { border: 1px solid var(--mx-line); border-left: 4px solid var(--mx-red); background: var(--mx-soft); border-radius: 12px;
  padding: 1.25rem 1.4rem; margin: 1.75rem 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.mx-inline-cta strong { color: var(--mx-ink); display: block; font-size: 1.05rem; }
.mx-inline-cta span { color: var(--mx-muted); font-size: .92rem; }
.mx-inline-cta .btn { padding: .6rem 1.2rem; }

/* ---------- How it works ---------- */
.mx-steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 768px) { .mx-steps { grid-template-columns: repeat(3, 1fr); } }
.mx-step { background: #fff; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); padding: 1.75rem 1.5rem; position: relative; transition: box-shadow .25s, transform .25s; }
.mx-step:hover { box-shadow: var(--mx-shadow); transform: translateY(-3px); }
.mx-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--mx-red); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 1rem; }
.mx-step h3 { font-size: 1.15rem; color: var(--mx-ink); margin-bottom: .4rem; }
.mx-step p { margin: 0; color: var(--mx-body); }

/* ---------- Service sidebar CTA ---------- */
.mx-side-cta { margin-top: 1.5rem; border-radius: var(--mx-radius); padding: 1.5rem 1.25rem; color: #fff; text-align: center;
  background: linear-gradient(160deg, #262a30 0%, #121417 100%); position: sticky; top: 110px; }
.mx-side-cta i.mx-side-icon { font-size: 2rem; color: var(--mx-red-bright); }
.mx-side-cta h3 { color: #fff; font-size: 1.15rem; margin: .4rem 0 .35rem; }
.mx-side-cta p { color: rgba(255,255,255,.78); font-size: .88rem; margin-bottom: 1rem; }
.mx-side-cta .btn { width: 100%; justify-content: center; margin-bottom: .5rem; padding: .65rem 1rem; }

/* ---------- FAQ ---------- */
.mx-faq { max-width: 860px; margin: 0 auto; }
.mx-faq details { background: #fff; border: 1px solid var(--mx-line); border-radius: 12px; margin-bottom: .75rem; transition: box-shadow .2s; }
.mx-faq details[open] { box-shadow: var(--mx-shadow); border-color: transparent; }
.mx-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.25rem; font-weight: 700; color: var(--mx-ink); position: relative; }
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--mx-red); transition: transform .2s; }
.mx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mx-faq .mx-faq-a { padding: 0 1.25rem 1.2rem; color: var(--mx-body); }
.mx-faq .mx-faq-a p { margin: 0; }

/* ---------- Footer ---------- */
.mx-footer { flex-shrink: 0; background: #15171a; color: rgba(255,255,255,.72); padding: 4rem 0 0; font-size: .92rem; }
.mx-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; letter-spacing: .02em; }
.mx-footer a { color: rgba(255,255,255,.72); }
.mx-footer a:hover { color: #fff; }
.mx-footer ul { list-style: none; padding: 0; margin: 0; }
.mx-footer ul li { margin-bottom: .5rem; }
.mx-footer ul li::before { display: none !important; }
.mx-footer .mx-footer-logo { max-width: 180px; margin-bottom: 1rem; }
.mx-footer .mx-nap li { display: flex; gap: .6rem; align-items: flex-start; }
.mx-footer .mx-nap i { color: var(--mx-red-bright); font-size: 1.1rem; }
.mx-footer .mx-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.mx-footer .mx-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 1.05rem; color: #fff; }
.mx-footer .mx-social a:hover { background: var(--mx-red); }
.mx-footer .mx-areas { display: flex; flex-wrap: wrap; gap: .4rem; }
.mx-footer .mx-areas span { background: rgba(255,255,255,.06); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; }
.mx-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 3rem; padding: 1.25rem 0; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
@media (max-width: 991px) { .mx-footer { padding-bottom: 70px; } }

/* ---------- Contact section polish ---------- */
.contact-section-wrapper .mx-contact-lead { font-size: .9rem; line-height: 1.55; margin-bottom: 1.5rem !important; }
/* section background is brand red, so the submit button goes dark for contrast */
.contact-section-wrapper .btn.mx-btn-primary { background: var(--mx-ink); border-color: var(--mx-ink); }
.contact-section-wrapper .btn.mx-btn-primary:hover { background: #000; border-color: #000; }

/* ---------- Blog listing ---------- */
.mx-blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.25rem; }
.mx-blog-filters button { border: 1px solid var(--mx-line); background: #fff; color: var(--mx-ink); border-radius: 999px; padding: .45rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.mx-blog-filters button:hover { border-color: var(--mx-red); color: var(--mx-red); }
.mx-blog-filters button.is-active { background: var(--mx-red); border-color: var(--mx-red); color: #fff; }

.mx-featured { display: grid; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--mx-shadow); margin-bottom: 3rem; }
@media (min-width: 992px) { .mx-featured { grid-template-columns: 1.15fr 1fr; } }
.mx-featured-img { min-height: 280px; background-size: cover; background-position: center; position: relative; display: block; }
.mx-featured-body { padding: 2.25rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.mx-featured-body h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; margin: .6rem 0 .8rem; }
.mx-featured-body h2 a { color: var(--mx-ink); }
.mx-featured-body h2 a:hover { color: var(--mx-red); }
.mx-featured-body p { color: var(--mx-body); }
.mx-featured-flag { position: absolute; top: 1rem; left: 1rem; background: #fff; color: var(--mx-red); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; }

.mx-post-grid { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .mx-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mx-post-grid { grid-template-columns: repeat(3, 1fr); } }
.mx-post-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--mx-line); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.mx-post-card:hover { transform: translateY(-4px); box-shadow: var(--mx-shadow); }
.mx-post-card-img { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #ddd; }
.mx-post-card-body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.mx-post-card h3 { font-size: 1.15rem; line-height: 1.35; margin: .55rem 0 .6rem; }
.mx-post-card h3 a { color: var(--mx-ink); }
.mx-post-card h3 a:hover { color: var(--mx-red); }
.mx-post-card p { color: var(--mx-body); font-size: .93rem; margin-bottom: 1rem; }
.mx-read { margin-top: auto; font-weight: 700; color: var(--mx-red) !important; display: inline-flex; align-items: center; gap: .3rem; font-size: .92rem; }
.mx-read:hover { gap: .55rem; }
.mx-cat { display: inline-block; background: var(--mx-red-soft); color: var(--mx-red); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; }
.mx-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: var(--mx-muted); align-items: center; }
.mx-meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- Blog article ---------- */
.mx-post-hero .mx-meta { color: rgba(255,255,255,.85); margin-top: 1rem; }
.mx-post-hero .mx-cat { background: rgba(255,255,255,.14); color: #fff; }
.mx-post-hero h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); max-width: 900px; }
.mx-article-figure img { width: 100%; border-radius: 18px; aspect-ratio: 16 / 8; object-fit: cover; margin-bottom: 2rem; }
.mx-article { font-size: 1.07rem; line-height: 1.8; color: #353a41; }
.mx-article > p:first-of-type { font-size: 1.18rem; color: var(--mx-ink); }
.mx-article h2 { font-size: clamp(1.4rem, 2.3vw, 1.8rem); color: var(--mx-ink); margin: 2.5rem 0 1rem; scroll-margin-top: 110px; line-height: 1.25; }
.mx-article h3 { font-size: 1.25rem; color: var(--mx-ink); margin: 1.8rem 0 .7rem; }
.mx-article h2 strong, .mx-article h3 strong { font-weight: inherit; }
.mx-article p { margin-bottom: 1.2rem; }
.mx-article ul, .mx-article ol { padding-left: 1.3rem; margin-bottom: 1.4rem; }
.mx-article li { margin-bottom: .5rem; }
.mx-article li::marker { color: var(--mx-red); font-weight: 700; }
.mx-article a { color: var(--mx-red); text-decoration: underline; text-underline-offset: 3px; }
.mx-article img { max-width: 100%; height: auto; border-radius: 12px; }
.mx-article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .95rem; }
.mx-article th, .mx-article td { border: 1px solid var(--mx-line); padding: .75rem .9rem; text-align: left; vertical-align: top; }
.mx-article th { background: var(--mx-soft); color: var(--mx-ink); }
.mx-article blockquote { border-left: 4px solid var(--mx-red); background: var(--mx-soft); padding: 1rem 1.25rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0; font-style: italic; }
.mx-table-wrap { overflow-x: auto; }
/* legacy inline-styled tables inside older posts */
.mx-article div[style*="max-width"] { max-width: 100% !important; overflow-x: auto; }

.mx-takeaways { background: var(--mx-soft); border: 1px solid var(--mx-line); border-radius: 16px; padding: 1.5rem 1.6rem; margin: 0 0 2rem; }
.mx-takeaways h2 { font-size: 1.1rem !important; margin: 0 0 .75rem !important; display: flex; gap: .5rem; align-items: center; }
.mx-takeaways ul { margin: 0; }

.mx-toc { border: 1px solid var(--mx-line); border-radius: 16px; padding: 1.25rem 1.4rem; margin-bottom: 2rem; background: #fff; }
.mx-toc strong { display: block; color: var(--mx-ink); margin-bottom: .6rem; font-size: .95rem; }
.mx-toc ol { margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.mx-toc li { margin-bottom: .35rem; }
.mx-toc a { color: var(--mx-body); text-decoration: none; }
.mx-toc a:hover { color: var(--mx-red); }

.mx-author { display: flex; gap: 1rem; align-items: center; border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); padding: 1.5rem 0; margin: 2.5rem 0; }
.mx-author-avatar { flex: 0 0 64px; height: 64px; border-radius: 50%; background: #15171a; display: grid; place-items: center; overflow: hidden; }
.mx-author-avatar img { width: 44px; height: auto; }
.mx-author strong { color: var(--mx-ink); display: block; }
.mx-author p { margin: .15rem 0 0; font-size: .9rem; color: var(--mx-muted); }

/* Blog sidebar scrolls normally; only the estimate box (last) sticks, so the
   services + recent-articles widgets are always reachable. */
.mx-sidebar { position: relative; display: grid; gap: 1.5rem; align-content: start; height: 100%; }
.mx-sidebar > .mx-side-cta { position: sticky; top: 110px; }
.mx-widget { background: #fff; border: 1px solid var(--mx-line); border-radius: 16px; padding: 1.4rem; }
.mx-widget h3 { font-size: 1.05rem; color: var(--mx-ink); margin-bottom: .9rem; }
.mx-widget ul { list-style: none; padding: 0; margin: 0; }
.mx-widget ul li { border-bottom: 1px solid var(--mx-line); }
.mx-widget ul li:last-child { border-bottom: 0; }
.mx-widget ul li::before { display: none !important; }
.mx-widget ul a { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; color: var(--mx-body); font-size: .92rem; }
.mx-widget ul a:hover { color: var(--mx-red); }
.mx-recent a { display: flex !important; gap: .75rem; justify-content: flex-start !important; align-items: center; }
.mx-recent .mx-recent-img { flex: 0 0 64px; height: 52px; border-radius: 8px; background-size: cover; background-position: center; }
.mx-recent span { line-height: 1.35; }

@media (max-width: 991px) {
  .mx-hero { padding: 7.5rem 0 4rem; }
  #slider-section { min-height: auto; }
  .mx-sidebar, .mx-side-cta { position: static; }
}
@media (max-width: 575px) {
  .mx-quote-card { padding: 1.4rem 1.15rem 1.1rem; }
  .mx-cta { padding: 2rem 1.4rem; }
  .mx-actions .btn.mx-btn { width: 100%; justify-content: center; }
}

/* Homepage blog carousel: the swiper dots sit absolutely below the slides,
   so the "Browse all articles" button needs clearance underneath them. */
.mx-blog-more { margin-top: 4.5rem; position: relative; z-index: 2; }

/* Blog: related services + further reading */
.mx-link-blocks { display: grid; gap: 1rem; margin: 2.25rem 0 0; }
@media (min-width: 768px) { .mx-link-blocks { grid-template-columns: 1fr 1fr; } }
.mx-link-block { background: var(--mx-soft); border: 1px solid var(--mx-line); border-radius: 14px; padding: 1.2rem 1.3rem; }
.mx-link-block h3 { font-size: 1rem; color: var(--mx-ink); margin: 0 0 .6rem; }
.mx-link-block ul { list-style: none; padding: 0; margin: 0; }
.mx-link-block li { margin: 0; }
.mx-link-block li::before { display: none !important; }
.mx-link-block a { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; color: var(--mx-body); font-size: .93rem; }
.mx-link-block a:hover { color: var(--mx-red); }
.mx-link-block i { color: var(--mx-red); }

/* About video: plays inline inside its own box */
.youtube-video-container { cursor: pointer; overflow: hidden; border-radius: 14px; }
.youtube-video-container.mx-video-playing { background: #000 !important; cursor: default; }
.youtube-video-container .mx-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Contrast guard ----------
   The theme's autotextcolor plugin writes inline color:black/white on
   `.container i/h2/h5` by reading only background-color. It can't see
   gradients or photos, so on our dark blocks it paints icons black.
   These !important rules beat its inline styles. */
.mx-side-cta { background-color: #1a1d21; }
.mx-cta { background-color: #a30202; }
.mx-checks i { color: var(--mx-red-bright) !important; }
.mx-page-hero .mx-meta, .mx-page-hero .mx-meta span { color: rgba(255,255,255,.88) !important; }
.mx-page-hero .mx-meta i { color: var(--mx-red-bright) !important; }
.mx-page-hero h1, .mx-hero h1 { color: #fff !important; }
.mx-page-hero .mx-crumbs, .mx-page-hero .mx-crumbs li { color: rgba(255,255,255,.75) !important; }
.mx-side-cta i.mx-side-icon { color: var(--mx-red-bright) !important; }
.mx-side-cta h3, .mx-side-cta h2 { color: #fff !important; }
.mx-side-cta p { color: rgba(255,255,255,.78) !important; }
.mx-cta h2, .mx-cta h3 { color: #fff !important; }
.mx-footer h4 { color: #fff !important; }
.mx-footer .mx-nap i { color: var(--mx-red-bright) !important; }
.mx-footer .mx-social a i { color: var(--mx-red-bright) !important; }
.mx-footer .mx-social a:hover i { color: #fff !important; }
.btn.mx-btn i { color: inherit !important; }
.mx-eyebrow--pill i { color: #fff !important; }
.youtube-video-container.mx-video-playing .review-youtube-play-btn { display: none !important; }

/* ---------- Sticky (cloned) header ----------
   The theme's sticky header is 97% white: on phones the white hamburger
   lines vanish and the page shows through. Make it solid; on phones keep
   it dark like the top header so nothing jumps. */
.navbar.navbar-clone.fixed { background: #fff !important; box-shadow: 0 6px 24px rgba(20, 20, 24, .12) !important; }
@media (max-width: 991.98px) {
  .navbar.navbar-clone.fixed { background: #1e2228 !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .35) !important; }
  .navbar.navbar-clone.fixed .navbar-brand .logo-dark { display: none !important; }
  .navbar.navbar-clone.fixed .navbar-brand .logo-light { display: inline-block !important; }
}

/* ---------- Accent icons: brand red ----------
   (autotextcolor paints these black inline; !important wins) */
.mx-form-note i,
.mx-meta i,
.mx-link-block i,
.mx-widget ul a i,
.mx-takeaways i,
.mx-inline-cta i:not(.btn i) { color: var(--mx-red) !important; }
.navbar .navbar-nav .nav-item .mx-nav-phone i, .navbar .mx-nav-phone i.uil { color: var(--mx-red-bright) !important; }
.mx-read i { color: inherit !important; }

/* ---------- Mobile hero spacing ----------
   Below 992px the header is in normal flow (not over the hero), so the
   desktop top padding just left a ~150px empty band under the header. */
@media (max-width: 991.98px) {
  .mx-hero { padding: 1.6rem 0 2.5rem !important; }
  .mx-page-hero > .container { padding-top: 1.6rem !important; padding-bottom: 2.5rem !important; }
  .mx-hero h1, .mx-page-hero h1 { margin-top: .75rem; }
}

/* ---------- Estimate popup ---------- */
.mx-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mx-modal[hidden] { display: none; }
.mx-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 12, 14, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.mx-modal-dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 2rem); overflow-y: auto;
  transform: translateY(18px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .22s ease; }
.mx-modal.is-open .mx-modal-backdrop { opacity: 1; }
.mx-modal.is-open .mx-modal-dialog { transform: none; opacity: 1; }
.mx-modal-dialog .mx-quote-title { padding-right: 2.5rem; }
.mx-modal-dialog .btn[type=submit] { width: 100%; justify-content: center; }
.mx-modal-close { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mx-line);
  background: #fff; color: var(--mx-ink); display: grid; place-items: center; font-size: 1.2rem; cursor: pointer; transition: all .2s; }
.mx-modal-close:hover { background: var(--mx-red); border-color: var(--mx-red); color: #fff; }
.mx-modal-close i { color: inherit !important; }
html.mx-modal-open, html.mx-modal-open body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .mx-modal-backdrop, .mx-modal-dialog { transition: none; } }

/* ---------- Trust strip: "leather strap" ----------
   Dark band with red saddle-stitching along both edges, hard dividers,
   bold red index numbers. No soft tiles, no hover animation. */
.mx-trust { position: relative; z-index: 5; flex-shrink: 0; background: #16181b; color: #fff; border-top: 3px solid var(--mx-red); }
.mx-trust::before, .mx-trust::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--mx-red-bright) 0 14px, transparent 14px 22px); opacity: .85; }
.mx-trust::before { top: 6px; }
.mx-trust::after { bottom: 6px; }
.mx-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.mx-trust-list li { display: flex; gap: .75rem; align-items: baseline; padding: 1.15rem 1.4rem; border-left: 1px solid rgba(255,255,255,.12); }
.mx-trust-list li:first-child { border-left: 0; padding-left: 0; }
.mx-trust-list li::before { display: none !important; }
.mx-trust-no { font-size: 1.45rem; line-height: 1; font-weight: 800; color: var(--mx-red-bright) !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mx-trust-list strong { display: block; color: #fff !important; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; margin-bottom: .15rem; }
.mx-trust-list span.mx-trust-sub { display: block; color: rgba(255,255,255,.62) !important; font-size: .74rem; line-height: 1.4; }
@media (max-width: 991.98px) {
  .mx-trust::before { top: 6px; }
  .mx-trust::after { bottom: 6px; }
  .mx-trust-list { grid-template-columns: 1fr 1fr; }
  .mx-trust-list li { padding: .9rem .7rem; gap: .55rem; }
  .mx-trust-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mx-trust-list li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .mx-trust-no { font-size: 1.15rem; }
  .mx-trust-list strong { font-size: .68rem; letter-spacing: .08em; margin-bottom: .15rem; }
  .mx-trust-list span.mx-trust-sub { font-size: .68rem; line-height: 1.35; }
}
@media (max-width: 575.98px) {
  /* phones: titles only, the strip stays a thin band */
  .mx-trust-list span.mx-trust-sub { display: none !important; }
  .mx-trust-list li { padding: .75rem .6rem; align-items: center; }
  .mx-trust-list strong { margin-bottom: 0; }
}

/* ==========================================================================
   Sharp design language (matches the trust "strap")
   Square corners, heavy uppercase lettering, red saddle-stitch detail,
   no pill shapes, no glow / lift animations.
   ========================================================================== */
.btn.mx-btn {
  border-radius: 2px !important; text-transform: uppercase; letter-spacing: .09em; font-weight: 800;
  font-size: .74rem; padding: .95rem 1.55rem; line-height: 1.2; box-shadow: none !important;
  transition: background-color .15s, color .15s, border-color .15s; transform: none !important;
}
.btn.mx-btn:hover { transform: none !important; }
/* stitched inner seam on solid buttons */
.btn.mx-btn-primary, .btn.mx-btn-white { position: relative; }
.btn.mx-btn-primary::after, .btn.mx-btn-white::after {
  content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(255,255,255,.55); pointer-events: none; border-radius: 1px;
}
.btn.mx-btn-white::after { border-color: rgba(188,2,2,.45); }
.btn.mx-btn-white:hover::after { border-color: rgba(255,255,255,.45); }
.btn.mx-btn-ghost, .btn.mx-btn-outline { border-width: 2px !important; }
.btn.mx-btn-ghost { background: rgba(0,0,0,.25); }
.mx-nav-cta .btn { padding: .7rem 1.15rem; font-size: .68rem; }

/* form fold-out toggle: same system, no pulse */
.mx-quote-toggle { animation: none !important; font-size: .74rem !important; padding: .9rem 1.1rem !important; }
.mx-quote-card:not(.is-collapsed) .mx-quote-toggle::after { display: none; }

/* hero tag ("Mobile leather repair · Chicago & suburbs") */
.mx-eyebrow.mx-eyebrow--pill {
  position: relative; border-radius: 0; padding: .5rem .95rem .5rem .85rem; font-size: .7rem; letter-spacing: .14em;
  background: var(--mx-red); border-left: 4px solid #fff;
}
.mx-eyebrow.mx-eyebrow--pill::after {
  content: ""; position: absolute; inset: 3px 3px 3px 3px; border: 1px dashed rgba(255,255,255,.5); pointer-events: none;
}
/* hero benefit ticks: square red markers instead of round icons */
.mx-checks li { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; align-items: center; }
.mx-checks i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; background: var(--mx-red);
  color: #fff !important; font-size: .9rem !important; line-height: 1; border-radius: 1px; }

/* other tags / chips in the same language */
.mx-cat { border-radius: 0; letter-spacing: .12em; }
.mx-post-hero .mx-cat { border: 1px dashed rgba(255,255,255,.45); background: rgba(188,2,2,.85); }
.mx-blog-filters button { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 800; border-width: 2px; }
.mx-featured-flag { border-radius: 0; }
.mx-modal-close { border-radius: 2px; }

/* the hero form card follows suit */
.mx-quote-card { border-radius: 4px; }
.mx-quote-card .form-control, .mx-quote-card .form-select { border-radius: 2px; }
@media (max-width: 575.98px) {
  .btn.mx-btn { font-size: .7rem; padding: .9rem 1.2rem; }
  .mx-checks li { font-size: .66rem; }
}
/* long uppercase labels must never spill out of a button */
.btn.mx-btn { white-space: normal; text-align: center; }
.mx-quote-toggle { letter-spacing: .07em; }
.mx-quote-toggle .mx-toggle-open, .mx-quote-toggle .mx-toggle-close { flex: 1 1 auto; }

/* ---------- Sharp images & image cards ---------- */
.rounded, figure.rounded, figure.rounded img, .card, .card-img-top, .card-img-top img,
.youtube-video-container, .service-img-container, .other-service-list + .col-md-9 img, .advanced-fields-service img,
#gallery-section figure, #gallery-section img, .portfolio-item figure, .portfolio-item img,
.mx-article-figure img, .mx-article img, .mx-post-card, .mx-post-card-img, .mx-featured, .mx-featured-img,
.mx-recent .mx-recent-img, .mx-author-avatar,
.mx-step, .mx-widget, .mx-link-block, .mx-takeaways, .mx-toc, .mx-inline-cta, .mx-cta, .mx-side-cta, .mx-faq details {
  border-radius: 2px !important;
}
.mx-post-card:hover { transform: none; }
.mx-step:hover { transform: none; }

/* stitched seam on feature images */
.youtube-video-container::after, .mx-featured-img::after, .mx-article-figure::after {
  content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(255,255,255,.6); pointer-events: none; z-index: 2;
}
.youtube-video-container.mx-video-playing::after { display: none; }
.mx-article-figure { position: relative; margin-bottom: 2rem; }
.mx-article-figure img { margin-bottom: 0 !important; display: block; }

/* video play button: red square, stitched, no ripple */
.review-youtube-play-btn.btn-play {
  border-radius: 2px !important; background: var(--mx-red) !important; border-color: var(--mx-red) !important;
  width: 4.2rem !important; height: 4.2rem !important; position: relative; z-index: 3;
}
.review-youtube-play-btn.btn-play::before, .review-youtube-play-btn.btn-play::after { animation: none !important; display: none !important; }
.review-youtube-play-btn.btn-play { outline: 1px dashed rgba(255,255,255,.65); outline-offset: -6px; }
.review-youtube-play-btn.btn-play:hover { background: var(--mx-red-dark) !important; }
.review-youtube-play-btn.btn-play i { color: #fff !important; }

/* ---------- CTA bands & boxes: sharp, stitched, no glow ---------- */
.mx-cta {
  border-radius: 2px !important; box-shadow: none !important;
  background: linear-gradient(100deg, #9e0202 0%, var(--mx-red) 55%, #c90606 100%) !important;
}
.mx-cta::after { /* replace the soft ring with a stitched seam */
  right: auto; bottom: auto; inset: 10px; width: auto; height: auto; border-radius: 0;
  border: 1px dashed rgba(255,255,255,.42); background: none;
}
.mx-cta h2, .mx-cta h3 { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.mx-side-cta { position: relative; border-radius: 2px !important; border-top: 4px solid var(--mx-red); }
.mx-side-cta::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(255,255,255,.18); pointer-events: none; }
.mx-side-cta > * { position: relative; z-index: 1; }
.mx-inline-cta { border-radius: 2px !important; border-left-width: 6px; position: relative; }
.mx-inline-cta::after { content: ""; position: absolute; inset: 5px 5px 5px 4px; border: 1px dashed rgba(188,2,2,.28); pointer-events: none; }
.mx-inline-cta > * { position: relative; z-index: 1; }

/* ---------- Contact / estimate section ----------
   Was a flat bright-red block (#ed0908) with low-contrast labels.
   Now: charcoal "strap" section with stitched edges, sharp red icon
   squares, and the form on a white stitched card. */
section.contact-section-wrapper > .container { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
@media (min-width: 992px) { section.contact-section-wrapper .row.gy-10 { --bs-gutter-x: 2.5rem; } }
.contact-section-wrapper .col-lg-4 .icon.text-primary { width: 36px; height: 36px; font-size: 1.1rem !important; margin-right: .85rem !important; }
section.contact-section-wrapper { position: relative; background: #16181b !important; border-top: 3px solid var(--mx-red); }
section.contact-section-wrapper::before, section.contact-section-wrapper::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--mx-red-bright) 0 14px, transparent 14px 22px); opacity: .85;
}
section.contact-section-wrapper::before { top: 6px; }
section.contact-section-wrapper::after { bottom: 6px; }
.contact-section-wrapper h2.display-4 { color: #fff !important; text-transform: uppercase; letter-spacing: .03em; font-weight: 800; font-size: clamp(1.35rem, 2vw, 1.75rem); margin-bottom: .75rem !important; }
.contact-section-wrapper p.lead { color: rgba(255,255,255,.72) !important; font-size: .9rem; }
/* contact details */
.contact-section-wrapper .icon.text-primary { width: 44px; height: 44px; display: grid; place-items: center; background: var(--mx-red);
  border-radius: 2px; outline: 1px dashed rgba(255,255,255,.45); outline-offset: -5px; font-size: 1.3rem !important; margin-top: 0 !important; }
.contact-section-wrapper .icon.text-primary i { color: #fff !important; }
.contact-section-wrapper .col-lg-4 .d-flex.flex-row { align-items: center; margin-bottom: .75rem; }
.contact-section-wrapper .col-lg-4 h5 { color: #fff !important; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 800; margin-bottom: .1rem !important; }
.contact-section-wrapper .col-lg-4 address, .contact-section-wrapper .col-lg-4 p { color: rgba(255,255,255,.72) !important; margin-bottom: 0; font-size: .85rem; line-height: 1.45; }
.contact-section-wrapper .col-lg-4 a { color: #fff !important; }
.contact-section-wrapper .col-lg-4 a:hover { color: var(--mx-red-bright) !important; }
.contact-section-wrapper .feedback-social { gap: .5rem; margin-top: .5rem; }
.contact-section-wrapper .feedback-social a { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.2); border-radius: 2px; }
.contact-section-wrapper .feedback-social a:hover { border-color: var(--mx-red); background: var(--mx-red); }
.contact-section-wrapper .feedback-social a i { color: #fff !important; font-size: 1.1rem; }
/* form on a white stitched card */
.contact-section-wrapper form.mx-form { position: relative; background: #fff; padding: 2rem 1.9rem 1.4rem; border-top: 4px solid var(--mx-red); border-radius: 2px; }
.contact-section-wrapper form.mx-form::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(188,2,2,.22); pointer-events: none; }
.contact-section-wrapper form.mx-form > * { position: relative; z-index: 1; }
.contact-section-wrapper form.mx-form .form-control, .contact-section-wrapper form.mx-form .form-select { border-radius: 2px; border-color: #d9d4d0; background-color: #fbfaf9; }
.contact-section-wrapper form.mx-form .form-control:focus, .contact-section-wrapper form.mx-form .form-select:focus { border-color: var(--mx-red); box-shadow: 0 0 0 3px rgba(188,2,2,.12); background-color: #fff; }
.contact-section-wrapper form.mx-form label, .contact-section-wrapper form.mx-form label.form-check-label,
.contact-section-wrapper form.mx-form .form-label, .contact-section-wrapper form.mx-form .form-label span { color: var(--mx-body) !important; }
.contact-section-wrapper form.mx-form .form-label { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; }
.contact-section-wrapper form.mx-form p, .contact-section-wrapper form.mx-form p strong { color: var(--mx-muted) !important; }
.contact-section-wrapper form.mx-form .btn.mx-btn-primary { background: var(--mx-red); border-color: var(--mx-red); }
.contact-section-wrapper form.mx-form .btn.mx-btn-primary:hover { background: var(--mx-red-dark); border-color: var(--mx-red-dark); }
.contact-section-wrapper form.mx-form .btn i { color: #fff !important; }
.contact-section-wrapper .mx-form-success { background: #fff; padding: 2rem; border-top: 4px solid var(--mx-red); }
.contact-section-wrapper .mx-form-success h3 { color: var(--mx-ink) !important; }
.contact-section-wrapper .mx-form-success p { color: var(--mx-muted) !important; }
@media (max-width: 575.98px) { .contact-section-wrapper form.mx-form { padding: 1.5rem 1.1rem 1rem; } }

/* ---------- Contact section: deep brand red (not the old #ed0908) ---------- */
section.contact-section-wrapper {
  background: linear-gradient(100deg, #8f0101 0%, var(--mx-red) 55%, #c70505 100%) !important;
  border-top: 3px solid #16181b;
}
section.contact-section-wrapper::before, section.contact-section-wrapper::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 14px, transparent 14px 22px); opacity: 1;
}
.contact-section-wrapper p.lead { color: rgba(255,255,255,.88) !important; }
.contact-section-wrapper .icon.text-primary { background: #16181b; outline-color: rgba(255,255,255,.35); }
.contact-section-wrapper .col-lg-4 address, .contact-section-wrapper .col-lg-4 p { color: rgba(255,255,255,.85) !important; }
.contact-section-wrapper .col-lg-4 a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.contact-section-wrapper .feedback-social a { border-color: rgba(255,255,255,.4); }
.contact-section-wrapper .feedback-social a:hover { background: #16181b; border-color: #16181b; }
.contact-section-wrapper form.mx-form { border-top-color: #16181b; box-shadow: 0 18px 40px rgba(60, 0, 0, .35); }
.contact-section-wrapper .mx-form-success { border-top-color: #16181b; }

/* ---------- Contact social icons: same as the contact icon squares ---------- */
.contact-section-wrapper .feedback-social { display: flex !important; justify-content: flex-start !important; width: auto !important; gap: .6rem; margin-top: 1.4rem; }
.contact-section-wrapper .feedback-social a {
  width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; display: grid; place-items: center;
  background: #16181b; border: 0 !important; border-radius: 2px;
  outline: 1px dashed rgba(255,255,255,.35); outline-offset: -5px; transition: background-color .15s;
}
.contact-section-wrapper .feedback-social a i { color: #fff !important; font-size: 1.15rem !important; margin: 0 !important; line-height: 1; }
.contact-section-wrapper .feedback-social a:hover { background: #fff; outline-color: rgba(188,2,2,.45); }
.contact-section-wrapper .feedback-social a:hover i { color: var(--mx-red) !important; }

/* "Get directions" link under the contact-section address */
.contact-section-wrapper .mx-directions { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
  color: #fff !important; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px dashed rgba(255,255,255,.6); padding-bottom: 1px; }
.contact-section-wrapper .mx-directions i { color: #fff !important; font-size: .95rem; }
.contact-section-wrapper .mx-directions:hover { border-bottom-style: solid; text-decoration: none !important; }
.contact-section-wrapper .col-lg-4 h5 a { color: #fff !important; }

/* ---------- Lighter hero overlays ----------
   Theme overlay (.4-.5) + our gradient (.8-.86) left the photos very dark.
   Thin the theme layer and lighten the gradient; a soft text-shadow keeps
   the white text readable on brighter parts of the photo. */
#slider-section .swiper-slide.bg-overlay::before,
.mx-page-hero.bg-overlay::before { background: rgba(30, 34, 40, .15) !important; }
.mx-hero-shade { background: linear-gradient(100deg, rgba(12,12,14,.62) 0%, rgba(12,12,14,.38) 50%, rgba(12,12,14,.12) 100%) !important; }
.mx-page-hero::after { background: linear-gradient(100deg, rgba(12,12,14,.6) 0%, rgba(12,12,14,.32) 60%, rgba(12,12,14,.12) 100%) !important; }
.mx-page-hero--center::after { background: rgba(12,12,14,.42) !important; }
.mx-hero h1, .mx-page-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.mx-hero .mx-lead, .mx-page-hero .mx-lead, .mx-checks li, .mx-crumbs, .mx-page-hero .mx-meta { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
@media (max-width: 991.98px) {
  /* text spans the full width on phones, so keep the shade even */
  .mx-hero-shade { background: rgba(12,12,14,.5) !important; }
  .mx-page-hero::after { background: rgba(12,12,14,.48) !important; }
}

/* ---------- Button focus: no browser-blue ring ----------
   Chrome draws its default blue focus ring (e.g. after the estimate popup
   closes and focus returns to the button). Mouse users get nothing extra;
   keyboard users get a brand-coloured outline instead of blue. */
.btn.mx-btn:focus, .btn.mx-btn:active, .btn.mx-btn.active { outline: none !important; box-shadow: none !important; }
.btn.mx-btn-primary:focus, .btn.mx-btn-primary:active { border-color: var(--mx-red) !important; }
.btn.mx-btn-white:focus, .btn.mx-btn-white:active { border-color: #fff !important; }
.btn.mx-btn-outline:focus, .btn.mx-btn-outline:active { border-color: var(--mx-red) !important; }
.btn.mx-btn-ghost:focus, .btn.mx-btn-ghost:active { border-color: rgba(255,255,255,.75) !important; }
.btn.mx-btn:focus-visible { outline: 2px solid var(--mx-ink) !important; outline-offset: 3px; }
.mx-hero .btn.mx-btn:focus-visible, .mx-page-hero .btn.mx-btn:focus-visible, .mx-cta .btn.mx-btn:focus-visible,
.mx-side-cta .btn.mx-btn:focus-visible, .mx-footer .btn.mx-btn:focus-visible,
.contact-section-wrapper .btn.mx-btn:focus-visible, .navbar-dark .btn.mx-btn:focus-visible { outline-color: #fff !important; }
.mx-quote-toggle:focus-visible, .mx-modal-close:focus-visible { outline: 2px solid var(--mx-ink) !important; outline-offset: 3px; }

/* Theme paints every button inside the sticky header blue
   (.navbar.navbar-light.fixed .btn { background/border: #3f78e0 }). Keep ours red. */
.navbar.fixed .btn.mx-btn.mx-btn-primary,
.navbar.navbar-light.fixed .btn.mx-btn.mx-btn-primary:not(.btn-expand):not(.btn-gradient) {
  background: var(--mx-red) !important; border-color: var(--mx-red) !important; color: #fff !important;
}
.navbar.navbar-light.fixed .btn.mx-btn.mx-btn-primary:not(.btn-expand):not(.btn-gradient):hover {
  background: var(--mx-red-dark) !important; border-color: var(--mx-red-dark) !important;
}

/* ---------- Form handler UI ---------- */
/* honeypot: invisible to people, bots fill it in and get silently dropped */
.mx-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mx-form-error { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; padding: .85rem 1rem;
  background: #fdecec; border: 1px solid rgba(188,2,2,.35); border-left: 4px solid var(--mx-red); border-radius: 2px;
  color: #7a0b0b !important; font-size: .9rem; line-height: 1.45; }
.mx-form-error i { color: var(--mx-red) !important; font-size: 1.2rem; line-height: 1.2; }
.mx-form-error a { color: var(--mx-red) !important; font-weight: 800; text-decoration: underline; }
.mx-form .btn[disabled] { opacity: .75; cursor: progress; }

/* Popup must sit above the theme's fixed mobile bottom bar (.fixed-footer) */
.mx-modal { z-index: 100000 !important; }
html.mx-modal-open .only-mobile.fixed-footer { visibility: hidden; }

/* Desktop nav: with "Home" gone the menu sat pressed against the Free
   Estimate button and left an empty gap after the logo. The logo keeps
   its own width and the menu is centred between it and the buttons. */
@media (min-width: 992px) {
  .navbar .navbar-brand.w-100 { width: auto !important; flex: 0 0 auto; }
  .navbar .navbar-collapse .offcanvas-body.ms-lg-auto { margin-left: auto !important; margin-right: auto !important; }
}