/* =====================================================================
   WHEELWORX – VISUAL ENHANCEMENTS
   Backgrounds, photo heroes and textures for every public page.

   Load this file LAST on each page (after the page's own CSS) so it can
   override the plain backgrounds. Nothing in your original CSS files is
   changed; delete this file's <link> tag to undo everything.

   Images live in:
     /assets/images/backgrounds/   (hero + section backgrounds)
     /assets/images/services/      (service card photos)
   ===================================================================== */

/* Shared helpers ------------------------------------------------------ */
:root{
  /* fine dot grid used as a subtle "workshop floor" texture */
  --ww-dots: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 0);
  --ww-dots-size: 22px 22px;

  /* faint diagonal brushed-metal lines for the red bands */
  --ww-stripes: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.045) 0 2px,
    transparent 2px 16px
  );
}

/* Lets full-width backgrounds stretch edge to edge without a sideways scrollbar */
main{ overflow-x: clip; }


/* =====================================================================
   HOME PAGE
   ===================================================================== */

/* Hero: dark alloy-wheel photo across the full width of the screen,
   heavy dark fade on the left so the headline stays readable,
   red glow behind the right-hand image. Replaces the old logo background. */
.hero{
  padding: 84px 0 76px;
  min-height: 620px;
}

.hero::before{
  inset: auto;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  opacity: 1;

  background-color: #050505;
  background-image:
    radial-gradient(720px 440px at 76% 52%, rgba(196,30,58,0.26), transparent 70%),
    linear-gradient(to right,
      rgba(5,5,5,0.97) 0%,
      rgba(5,5,5,0.90) 36%,
      rgba(5,5,5,0.66) 66%,
      rgba(5,5,5,0.90) 100%),
    linear-gradient(to bottom,
      rgba(5,5,5,0.35) 0%,
      rgba(5,5,5,0) 28%,
      rgba(5,5,5,0) 70%,
      #050505 100%),
    url("/assets/images/backgrounds/home-hero-bg.jpg");
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: center, center, center, center 45%;
  background-repeat: no-repeat;
  /* "luminosity" turns the photo greyscale so only Wheelworx red shows colour */
  background-blend-mode: normal, normal, normal, luminosity;
}

/* Right-hand hero photo */
.hero-image-wrapper{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(196,30,58,0.12);
}

.hero-image-wrapper img{
  height: 460px;
}

/* typo fix: was "left: 18p" in home.css so the badge never positioned */
.stats-badge{
  left: 18px;
}

/* Services preview: add the dot texture on top of the existing gradient */
.services-preview{
  background:
    var(--ww-dots) 0 0 / var(--ww-dots-size),
    radial-gradient(900px 420px at 50% 0%, rgba(196,30,58,0.10), transparent 70%),
    radial-gradient(circle at top, #1a1d21 0%, #0f1114 40%, #0b0d10 100%);
}

/* image area of the 4 preview cards: round the top corners */
.services-preview .service-card > div img{
  border-radius: 18px 18px 0 0;
}

/* Why Wheelworx: full-width dark band with a red glow behind the cards */
.why-wheelworx{
  position: relative;
  isolation: isolate;
  padding: 100px 0;
}

.why-wheelworx::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background:
    radial-gradient(640px 380px at 72% 50%, rgba(196,30,58,0.16), transparent 70%),
    var(--ww-dots) 0 0 / var(--ww-dots-size),
    linear-gradient(to bottom, #0b0d10 0%, #050505 100%);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Red call-to-action band: brushed diagonal lines + darker edges */
.cta{
  background:
    radial-gradient(1000px 420px at 50% 50%, transparent 40%, rgba(0,0,0,0.28) 100%),
    var(--ww-stripes),
    var(--red);
}


/* =====================================================================
   SERVICES PAGE
   ===================================================================== */

/* Dot texture behind the page title, fading out as you scroll down */
.section-services::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 620px;
  background: var(--ww-dots) 0 0 / var(--ww-dots-size);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* photos: gentle zoom on hover */
.section-services .service-image img{
  transition: transform .5s ease;
}

.section-services .service-card:hover .service-image img{
  transform: scale(1.05);
}

/* dark fade at the bottom of each photo so it sits nicely on the page */
.section-services .service-image::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.45) 0%, transparent 45%);
  z-index: 1;
  pointer-events: none;
}

.section-services .service-image::after{
  z-index: 2;
}


/* =====================================================================
   REQUEST QUOTE + BOOK NOW PAGES  (photo hero banners)
   ===================================================================== */

.quote-hero,
.book-hero{
  position: relative;
  padding: 130px 0 100px;
  background-color: #050505;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, luminosity;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.quote-hero{
  background-image:
    radial-gradient(800px 360px at 50% 0%, rgba(196,30,58,0.30), transparent 70%),
    linear-gradient(to bottom, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0.80) 70%, rgba(15,17,20,0.98) 100%),
    url("/assets/images/backgrounds/quote-hero-bg.jpg");
}

.book-hero{
  background-image:
    radial-gradient(800px 360px at 50% 0%, rgba(196,30,58,0.30), transparent 70%),
    linear-gradient(to bottom, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0.80) 70%, rgba(15,17,20,0.98) 100%),
    url("/assets/images/backgrounds/booking-hero-bg.jpg");
}

.quote-hero p,
.book-hero p{
  color: rgba(255,255,255,0.78);
}

/* Form areas: dot texture + soft red glows on the sides */
.section-quote,
.section-booking{
  background:
    radial-gradient(520px 520px at 0% 30%, rgba(196,30,58,0.10), transparent 70%),
    radial-gradient(520px 520px at 100% 75%, rgba(196,30,58,0.08), transparent 70%),
    var(--ww-dots) 0 0 / var(--ww-dots-size),
    radial-gradient(circle at top, #15181c 0%, #0f1114 45%, #0b0d10 100%);
}

/* slightly lift the form cards off the textured background */
.quote-form,
.booking-form{
  background: rgba(5,5,5,0.78);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.10);
}


/* =====================================================================
   CONTACT PAGE
   ===================================================================== */

/* Photo behind the "Contact Us / Get in Touch" heading, fading to black */
.contact.section{
  background-color: #050505;
  background-image:
    radial-gradient(900px 380px at 50% 120px, rgba(196,30,58,0.24), transparent 70%),
    linear-gradient(to bottom,
      rgba(5,5,5,0.62) 0px,
      rgba(5,5,5,0.85) 300px,
      #050505 460px),
    url("/assets/images/backgrounds/contact-hero-bg.jpg");
  background-size: 100% 100%, 100% 100%, 100% auto;
  background-position: center, center, center top;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, luminosity;
}

/* the grey band behind the cards/form gets the dot texture too */
.contact.section::before{
  background:
    var(--ww-dots) 0 0 / var(--ww-dots-size),
    #15171a;
}


/* =====================================================================
   ABOUT PAGE
   ===================================================================== */

/* dot texture behind the intro, under the existing red glow */
.about-hero{
  background:
    var(--ww-dots) 0 0 / var(--ww-dots-size),
    linear-gradient(to bottom, #0b0d10 0%, #050505 100%);
}

/* stats bar: darker panel with a thin red line on top */
.stats-bar{
  background:
    linear-gradient(to right, transparent, rgba(196,30,58,0.10), transparent),
    #0b0d10;
  border-top: 1px solid rgba(196,30,58,0.30);
}

/* founder quote + bottom CTA: brushed diagonal lines on the red */
.founder-quote,
.cta-band{
  background:
    radial-gradient(1000px 420px at 50% 50%, transparent 40%, rgba(0,0,0,0.28) 100%),
    var(--ww-stripes),
    var(--red);
}

/* big faint quote mark behind the founder's words */
.founder-quote{
  position: relative;
  overflow: hidden;
}

.founder-quote::before{
  content: "\201C";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 320px;
  line-height: 1;
  font-weight: 900;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
}

.founder-quote .container{
  position: relative;
}

/* values section: dot texture + red glow */
.values{
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(196,30,58,0.12), transparent 70%),
    var(--ww-dots) 0 0 / var(--ww-dots-size),
    #0b0d10;
}

/* photos on the About page: subtle zoom on hover */
.about-image img,
.story-image img,
.why-image img{
  transition: transform .5s ease;
}

.about-image:hover img,
.story-image:hover img,
.why-image:hover img{
  transform: scale(1.04);
}


/* =====================================================================
   CONTACT PAGE – GOOGLE MAP
   ===================================================================== */
.map-section{
  padding: 0 0 90px;
  background: #050505;
}

.map-card{
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(196,30,58,0.12);
  background: #15171a;
}

.map-card iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--red);
  font-weight: 800;
}

.map-link:hover{
  color: #fff;
}

/* tap-to-call number on the contact card */
.contact-card-text a[href^="tel:"]{
  color: rgba(255,255,255,0.78);
}