/* Mobile Motive carbon-fibre background test
   Loaded last so this can be removed without changing the existing theme. */
:root {
  --carbon-base: #0a0d11;
  --carbon-raised: rgba(18, 22, 28, 0.92);
  --carbon-text: #f4f6f8;
  --carbon-muted: #cbd2d9;
  --carbon-orange: #ff8a00;
}

html {
  background-color: var(--carbon-base);
}

body {
  position: relative;
  isolation: isolate;
  color: var(--carbon-text) !important;
  background-color: var(--carbon-base) !important;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(255, 138, 0, 0.13), transparent 31rem),
    radial-gradient(circle at 88% 14%, rgba(255, 211, 77, 0.07), transparent 27rem),
    linear-gradient(45deg, rgba(255, 255, 255, 0.026) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.026) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.026) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.026) 75%),
    linear-gradient(135deg, #11151a 0%, #090c10 50%, #11151a 100%) !important;
  background-position: 0 0, 0 0, 0 0, 7px 7px, 0 0 !important;
  background-size: auto, auto, 14px 14px, 14px 14px, auto !important;
  background-attachment: fixed !important;
}

/* Ambient motion layer: a slow workshop-light sweep over the carbon weave. */
.mm-motion-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.82;
}

.mm-motion-layer span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(10px);
  will-change: transform;
}

.mm-motion-layer span:nth-child(1) {
  width: min(62rem, 82vw);
  height: min(62rem, 82vw);
  left: -30vw;
  top: -38vw;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.22), rgba(255, 122, 0, 0) 68%);
  animation: mm-ambient-one 17s ease-in-out infinite alternate;
}

.mm-motion-layer span:nth-child(2) {
  width: min(54rem, 72vw);
  height: min(54rem, 72vw);
  right: -28vw;
  top: 22vh;
  background: radial-gradient(circle, rgba(255, 196, 0, 0.14), rgba(255, 196, 0, 0) 70%);
  animation: mm-ambient-two 21s ease-in-out infinite alternate;
}

.mm-motion-layer span:nth-child(3) {
  width: 150vw;
  height: 10rem;
  left: -30vw;
  top: 45vh;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 0, 0.09), rgba(255, 211, 77, 0.16), transparent);
  filter: blur(26px);
  transform: rotate(-12deg);
  animation: mm-light-sweep 13s linear infinite;
}

.mm-motion-layer::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: linear-gradient(108deg, transparent 42%, rgba(255, 138, 0, 0.34) 49%, rgba(255, 226, 122, 0.58) 50%, rgba(255, 138, 0, 0.18) 52%, transparent 59%);
  transform: translateX(-85%);
  animation: mm-entry-scan 1.65s cubic-bezier(.2,.72,.16,1) both;
}

@keyframes mm-ambient-one {
  from { transform: translate3d(0, 0, 0) scale(0.92); }
  to { transform: translate3d(24vw, 20vh, 0) scale(1.12); }
}

@keyframes mm-ambient-two {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-22vw, 17vh, 0) scale(1.15); }
}

@keyframes mm-light-sweep {
  0% { transform: translate3d(-28vw, -12vh, 0) rotate(-12deg); opacity: 0; }
  18%, 66% { opacity: 0.72; }
  100% { transform: translate3d(28vw, 15vh, 0) rotate(-12deg); opacity: 0; }
}

@keyframes mm-entry-scan {
  0% { transform: translateX(-85%); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translateX(85%); opacity: 0; }
}

@keyframes mm-enter-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

body > .site-header,
body > .topbar,
body > main > .hero,
body > .hero {
  animation: mm-enter-up .72s cubic-bezier(.2,.72,.16,1) both;
}

body > main > .hero,
body > .hero {
  animation-delay: .12s;
}

/* Let the weave show through page bands without reducing legibility. */
main,
main > section,
.section-soft,
.mm-media-section,
.hero {
  background-color: rgba(8, 10, 14, 0.72) !important;
  background-image: none !important;
}

main > section:nth-of-type(even) {
  background-color: rgba(18, 22, 28, 0.76) !important;
}

.topbar,
header.site,
.navbar,
.site-header,
.utility-bar {
  background: rgba(5, 7, 10, 0.94) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li,
main label,
main .lead,
main .content-prose p,
main .content-prose li,
main .content-prose h2,
main .content-prose h3,
main .content-prose h4 {
  color: var(--carbon-text) !important;
}

main .text-secondary,
main .small-note,
main .muted,
main .fine,
main figcaption {
  color: var(--carbon-muted) !important;
}

/* Keep information surfaces bright, with explicit dark copy. */
main :is(.bg-white, .info-card, .service-card, .area-card, .faq-card, .payment-logo-panel,
  .inspection-tile:not(.premium), .terms-panel, .sale-price-card:not(.featured),
  .seo-link-grid a, .fact, .card.light-card) {
  background: rgba(249, 250, 252, 0.98) !important;
  color: #18212b !important;
  border-color: rgba(255, 138, 0, 0.22) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
}

main :is(.bg-white, .info-card, .service-card, .area-card, .faq-card, .payment-logo-panel,
  .inspection-tile:not(.premium), .terms-panel, .sale-price-card:not(.featured),
  .seo-link-grid a, .fact, .card.light-card)
  :is(h1, h2, h3, h4, h5, h6, p, li, label, span, strong, small) {
  color: #18212b !important;
}

main :is(.bg-white, .info-card, .service-card, .area-card, .faq-card, .payment-logo-panel,
  .inspection-tile:not(.premium), .terms-panel, .sale-price-card:not(.featured),
  .seo-link-grid a, .fact, .card.light-card) .text-secondary {
  color: #525d69 !important;
}

main :is(.bg-white, .info-card, .service-card, .area-card, .faq-card, .payment-logo-panel,
  .inspection-tile:not(.premium), .terms-panel, .sale-price-card:not(.featured),
  .seo-link-grid a, .fact, .card.light-card) a:not(.btn),
main a:is(.info-card, .service-card, .area-card, .faq-card):not(.btn) {
  color: #863800 !important;
  text-decoration: underline;
  text-decoration-thickness: .09em;
}

main :is(.bg-white, .info-card, .service-card, .area-card, .faq-card, .payment-logo-panel,
  .inspection-tile:not(.premium), .terms-panel, .sale-price-card:not(.featured),
  .seo-link-grid a, .fact, .card.light-card) :is(.text-warning, .text-orange) {
  color: #8b3c00 !important;
}

.mm-feature-media img {
  width: 100%;
  max-height: 44rem;
  object-fit: cover;
  object-position: center;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 180, 0, 0.22);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}

/* Dark glass surfaces retain white text over the carbon weave. */
.card:not(.light-card):not(.info-card):not(.service-card):not(.area-card):not(.faq-card),
.panel,
.area-tile,
.trust-card,
.dark-card,
.hero-card,
details,
.premium-panel,
.inspection-tile.premium,
.sale-price-card.featured {
  background: linear-gradient(145deg, rgba(31, 37, 45, 0.96), rgba(12, 15, 20, 0.95)) !important;
  color: var(--carbon-text) !important;
  border-color: rgba(255, 180, 0, 0.18) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3) !important;
}

.card:not(.light-card):not(.info-card):not(.service-card):not(.area-card):not(.faq-card)
  :is(h1, h2, h3, h4, h5, h6, p, li, span, strong),
.panel :is(h1, h2, h3, h4, h5, h6, p, li, span, strong),
.area-tile :is(h1, h2, h3, h4, h5, h6, p, li, span, strong),
.hero-card :is(h1, h2, h3, h4, h5, h6, p, li, span, strong),
details :is(summary, p, li) {
  color: var(--carbon-text) !important;
}

a:not(.btn):not(.brand) {
  text-underline-offset: 0.18em;
}

main a:not(.btn):not(.brand) {
  color: #ffb13b;
}

input,
select,
textarea,
.form-control,
.form-select {
  background: #fff !important;
  color: #151a20 !important;
  border-color: #7f8994 !important;
}

input::placeholder,
textarea::placeholder {
  color: #5c6670 !important;
  opacity: 1;
}

table,
.table {
  --bs-table-bg: #fff;
  --bs-table-color: #18212b;
  background: #fff !important;
  color: #18212b !important;
}

table :is(th, td),
.table :is(th, td) {
  color: #18212b !important;
}

.booking-shell,
.booking-box,
.booking-frame,
iframe {
  background: #fff !important;
}

.mm-service-steps {
  counter-reset: service-step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mm-service-step {
  counter-increment: service-step;
  position: relative;
  min-height: 100%;
  padding: 1.35rem 1.35rem 1.35rem 4.35rem;
  border: 1px solid rgba(255, 180, 0, 0.2);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(31, 37, 45, 0.96), rgba(12, 15, 20, 0.95));
}

.mm-service-step::before {
  content: counter(service-step, decimal-leading-zero);
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd34d, #ff7a00);
  color: #111;
  font-weight: 950;
}

.mm-service-step h3,
.mm-service-step p {
  color: var(--carbon-text) !important;
}

.mm-callout {
  border-left: 5px solid var(--carbon-orange);
  border-radius: 1.15rem;
  padding: 1.2rem 1.35rem;
  background: rgba(255, 138, 0, 0.1);
  color: var(--carbon-text);
}

.mm-nvh-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 122, 0, 0.18), transparent 34rem),
    linear-gradient(135deg, rgba(15, 18, 23, 0.98), rgba(28, 32, 39, 0.98));
}

.mm-nvh-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.mm-nvh-copy :is(h2, p, li, strong),
.mm-nvh-logo-panel figcaption {
  color: var(--carbon-text) !important;
}

.mm-nvh-copy h2 {
  max-width: 16ch;
}

.mm-nvh-list {
  display: grid;
  gap: .7rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.mm-nvh-list li {
  position: relative;
  padding-left: 1.8rem;
}

.mm-nvh-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd34d, #ff7900);
  box-shadow: 0 0 1rem rgba(255, 122, 0, .55);
}

.mm-nvh-logo-panel {
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255, 180, 0, .26);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 122, 0, .12), transparent 55%),
    rgba(4, 6, 9, .82);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .4);
}

.mm-nvh-logo-panel img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1rem 1.6rem rgba(0, 0, 0, .45));
}

.mm-nvh-logo-panel figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: .9rem;
  letter-spacing: .03em;
  opacity: .84;
}

@media (max-width: 991.98px) {
  .mm-nvh-showcase {
    grid-template-columns: 1fr;
  }

  .mm-nvh-logo-panel {
    max-width: 44rem;
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  .mm-service-steps {
    grid-template-columns: 1fr;
  }

  .mm-motion-layer span:nth-child(3) {
    height: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll !important;
  }

  .mm-motion-layer,
  .mm-motion-layer span,
  .mm-motion-layer::after,
  body > .site-header,
  body > .topbar,
  body > main > .hero,
  body > .hero {
    animation: none !important;
  }
}