/* DSR client colour revision — preserve original layout, spacing and interactions. */
:root {
  --dsr-white: #ffffff;
  --dsr-paper: #f7f7f4;
  --dsr-yellow: #f5c400;
  --dsr-yellow-light: #ffd633;
  --dsr-black: #080809;
  --dsr-ink: #141416;
  --dsr-muted: #66666b;
  --dsr-line: #deded8;
}

html, body { background: var(--dsr-white); color: var(--dsr-ink); }
body { background-color: var(--dsr-white) !important; color: var(--dsr-ink) !important; }
::selection { background: var(--dsr-yellow); color: var(--dsr-black); }
::-webkit-scrollbar-track { background: #f1f1ed; }
::-webkit-scrollbar-thumb { background: #b8b8b2; }
::-webkit-scrollbar-thumb:hover { background: var(--dsr-yellow); }
.noise-overlay { opacity: .018; mix-blend-mode: multiply; }

/* Core light palette utilities used by the original build. */
.bg-background, .bg-surface, main .bg-deep { background-color: var(--dsr-white) !important; }
.text-ink { color: var(--dsr-ink) !important; }
.text-muted { color: var(--dsr-muted) !important; }
.border-divider { border-color: var(--dsr-line) !important; }
.divide-divider > :not([hidden]) ~ :not([hidden]) { border-color: var(--dsr-line) !important; }
.grid-bg { background-image: linear-gradient(rgba(8,8,9,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(8,8,9,.045) 1px,transparent 1px); }
.gradient-text { background: linear-gradient(135deg,#9b7c00 0%,#f5c400 48%,#161616 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.chrome-text { background: linear-gradient(180deg,#111 0%,#4d4d4d 50%,#111 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Navigation: same glass form, now white-led. */
nav.fixed { background: rgba(255,255,255,.88) !important; border: 1px solid rgba(8,8,9,.09) !important; box-shadow: 0 18px 50px rgba(8,8,9,.10) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
nav.fixed .text-muted { color: #55555a !important; }
nav.fixed .hover\:bg-white\/5:hover { background-color: rgba(8,8,9,.045) !important; }
.glass, .glass-dark { background: rgba(255,255,255,.88) !important; border-color: rgba(8,8,9,.10) !important; color: var(--dsr-ink) !important; box-shadow: 0 16px 42px rgba(8,8,9,.10); }
.bg-deep\/97 { background-color: rgba(255,255,255,.98) !important; }
.bg-deep\/35 { background-color: rgba(255,255,255,.76) !important; }
.border-white\/5, .border-white\/10 { border-color: rgba(8,8,9,.10) !important; }

/* Homepage hero: original full-screen composition, recoloured rather than rebuilt. */
#home { background: var(--dsr-white) !important; }
#home > img { opacity: .52; filter: brightness(1.12) saturate(.82) contrast(.94) !important; }
#home .bg-gradient-to-r { background-image: linear-gradient(to right,#fff 0%,rgba(255,255,255,.98) 47%,rgba(255,255,255,.34) 100%) !important; }
#home .bg-gradient-to-t { background-image: linear-gradient(to top,#fff 0%,rgba(255,255,255,.08) 52%,rgba(255,255,255,.88) 100%) !important; }
#home .text-white { color: var(--dsr-ink) !important; }
#home .text-white\/55 { color: rgba(20,20,22,.58) !important; }
#home .text-white\/70 { color: rgba(20,20,22,.70) !important; }
#home .bg-white\/\[0\.06\] { background-color: rgba(255,255,255,.82) !important; }
#home .border-white\/10 { border-color: rgba(8,8,9,.12) !important; }
#home .glass-dark { background: rgba(255,255,255,.78) !important; color: var(--dsr-ink) !important; }
#home .hero-kicker { background: rgba(245,196,0,.10) !important; }

/* The service image cards remain black-led accents within the white page. */
.core-service-card { background: var(--dsr-black) !important; border-color: rgba(8,8,9,.12) !important; box-shadow: 0 22px 60px rgba(8,8,9,.12); }
.core-service-card .text-white { color: #fff !important; }
.core-service-card .text-white\/65 { color: rgba(255,255,255,.68) !important; }
.core-service-card .text-white\/85 { color: rgba(255,255,255,.88) !important; }
.core-service-card .bg-white\/\[0\.08\] { background-color: rgba(255,255,255,.09) !important; }
.core-service-card .border-white\/10 { border-color: rgba(255,255,255,.14) !important; }

/* Repairs section: same grid, white base. */
#repairs { background: var(--dsr-white) !important; color: var(--dsr-ink) !important; }
#repairs .text-white { color: var(--dsr-ink) !important; }
#repairs .text-white\/55, #repairs .text-white\/60 { color: var(--dsr-muted) !important; }
#repairs .bg-white\/10 { background-color: var(--dsr-line) !important; }
#repairs .border-white\/10 { border-color: var(--dsr-line) !important; }
#repairs .repair-tile { background: #fff !important; }
#repairs .repair-tile:hover { background: var(--dsr-paper) !important; }

/* Why DSR and contact stay structurally identical, with professional white surfaces. */
#why-dsr .bg-surface, #contact .bg-surface, #contact .bg-background, #contact .bg-deep { background: #fff !important; }
#why-dsr article { box-shadow: 0 18px 50px rgba(8,8,9,.06); }
#why-dsr article.relative .text-white { color: #fff !important; }
#why-dsr article.relative .text-white\/65 { color: rgba(255,255,255,.68) !important; }
#why-dsr article.relative .from-deep { --tw-gradient-from: #080809 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(8 8 9 / 0) var(--tw-gradient-to-position) !important; }
#contact { background: var(--dsr-paper) !important; }
#contact input, #contact select, #contact textarea { background: #fff !important; color: var(--dsr-ink) !important; border-color: #d5d5cf !important; }
#contact input::placeholder, #contact textarea::placeholder { color: #8b8b8f !important; }
#contact form, #contact [class*="rounded-4xl"] { box-shadow: 0 20px 58px rgba(8,8,9,.055); }
.form-label { color: #55555a; }

/* Keep the footer as the restrained black third colour. */
footer.bg-deep { background: var(--dsr-black) !important; color: #fff !important; }
footer .text-white, footer .text-ink { color: #fff !important; }
footer .text-white\/40 { color: rgba(255,255,255,.42) !important; }
footer .text-white\/55 { color: rgba(255,255,255,.58) !important; }
footer .text-white\/60 { color: rgba(255,255,255,.62) !important; }
footer .text-white\/70 { color: rgba(255,255,255,.72) !important; }
footer .border-white\/10 { border-color: rgba(255,255,255,.12) !important; }
footer .footer-list { color: rgba(255,255,255,.62); }

/* Mobile fixed enquiry controls retain contrast on the white page. */
.fixed.bottom-3 .glass { background: #fff !important; color: var(--dsr-ink) !important; border-color: rgba(8,8,9,.12) !important; }

@media (max-width: 760px) {
  #home > img { opacity: .34; object-position: 62% center; }
  #home .bg-gradient-to-r { background-image: linear-gradient(to right,#fff 0%,rgba(255,255,255,.94) 72%,rgba(255,255,255,.62) 100%) !important; }
}


/* Readability refinement — colour hierarchy remains white > yellow > black. */
:root { --dsr-yellow-text: #816700; --dsr-copy-strong: #45454a; }

/* Yellow remains bright for fills, gradients and large display treatments.
   Small yellow text on white uses a deeper logo-derived tone for contrast. */
#home .hero-kicker {
  color: var(--dsr-yellow-text) !important;
  font-weight: 700 !important;
  border-color: rgba(129,103,0,.28) !important;
  background: rgba(245,196,0,.13) !important;
}
#home .hero-proof > div {
  color: var(--dsr-copy-strong) !important;
  font-weight: 650 !important;
  font-size: .75rem !important;
  letter-spacing: .075em !important;
}
#home .hero-proof > div .text-primary { color: #987900 !important; }
#home .hero-proof a .text-primary { color: #e5b600 !important; }

/* Section eyebrows and small operational labels on white surfaces. */
#services > .max-w-3xl > .text-primary,
#repairs .max-w-3xl > .text-primary,
#why-dsr > .max-w-3xl > .text-primary,
#contact .max-w-3xl > .text-primary {
  color: var(--dsr-yellow-text) !important;
  font-weight: 750 !important;
  font-size: .78rem !important;
}
#repairs .repair-tile .text-primary,
#why-dsr article:not(.relative) .text-primary,
#contact .font-mono.text-primary {
  color: var(--dsr-yellow-text) !important;
}
#contact .font-mono.text-primary,
#contact .font-mono.text-muted {
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .105em !important;
}
#contact .font-mono.text-muted { color: #505056 !important; }

/* The smallest interface type was technically legible but visually too delicate. */
.text-\[9px\] { font-size: .625rem !important; font-weight: 650 !important; }
.text-\[10px\] { font-size: .72rem !important; font-weight: 650 !important; }
nav.fixed .text-muted { color: #4d4d52 !important; }
nav.fixed .font-display { font-weight: 700 !important; }

/* Supporting copy receives a modest contrast lift, without making the page heavy. */
#home .text-white\/55 { color: #505056 !important; }
#home .text-white\/70 { color: #4b4b50 !important; }
#repairs .text-white\/55,
#repairs .text-white\/60 { color: #5a5a5f !important; }
#why-dsr .text-muted,
#contact .text-muted { color: #5a5a60 !important; }

/* Preserve bright yellow where it is intentionally used over black imagery. */
.core-service-card .text-primary,
#why-dsr article.relative .text-primary,
footer .text-primary { color: var(--dsr-yellow) !important; }
.core-service-card .text-\[10px\],
#why-dsr article.relative .text-\[10px\] { font-weight: 700 !important; }

@media (min-width: 640px) {
  .sm\:text-\[11px\] { font-size: .75rem !important; }
}


/* Final client-requested refinements — no layout or copy changes. */
#home > img {
  opacity: .72 !important;
  filter: brightness(1.02) saturate(.94) contrast(1.01) !important;
  object-position: 58% center !important;
}
#home .bg-gradient-to-r {
  background-image: linear-gradient(to right,#fff 0%,rgba(255,255,255,.94) 42%,rgba(255,255,255,.18) 100%) !important;
}
#home .bg-gradient-to-t {
  background-image: linear-gradient(to top,#fff 0%,rgba(255,255,255,.03) 54%,rgba(255,255,255,.68) 100%) !important;
}
@media (max-width: 760px) {
  #home > img {
    opacity: .56 !important;
    object-position: 61% center !important;
  }
  #home .bg-gradient-to-r {
    background-image: linear-gradient(to right,#fff 0%,rgba(255,255,255,.88) 64%,rgba(255,255,255,.34) 100%) !important;
  }
  #home .bg-gradient-to-t {
    background-image: linear-gradient(to top,#fff 0%,rgba(255,255,255,.02) 56%,rgba(255,255,255,.62) 100%) !important;
  }
}
@media (max-width: 639px) {
  .whatsapp-rail {
    right: 16px !important;
    bottom: 84px !important;
  }
}

/* Final navigation legibility refinement: brand strapline only. */
nav.fixed a[aria-label="DSR Automotive home"] .font-mono {
  font-size: .70rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  color: #4b4b50 !important;
}