:root{
  /* Adjust the red palette to a deeper, more automotive inspired red */
  --red:#a01117;
  --red-700:#7c0c12;
  --ink:#0f1012;
  --muted:#9aa3ae;
  --white:#ffffff;
}
*{box-sizing:border-box}
/* Establish a darker base, larger default font and consistent typeface inspired by the hero section */
html,body{
  margin:0;
  padding:0;
  background:#0f1012;
  color:#e4e7eb;
  font-family:"Arial", Helvetica, sans-serif;
  font-size:17px;
  line-height:1.6;
}

/* Global typography rules to scale up text across the site */
h1{
  font-size:48px;
  margin:0 0 24px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}
h2{
  font-size:40px;
  margin:0 0 20px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
}
h3{
  font-size:30px;
  margin:0 0 16px;
  font-weight:800;
  letter-spacing:.3px;
}
h4{
  font-size:24px;
  margin:0 0 12px;
  font-weight:700;
  letter-spacing:.2px;
}
p{
  font-size:18px;
  margin:0 0 18px;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 22px}

/* Top bar */
.topbar{background:#000;color:#fff;font-size:14px}
.topbar .tb{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.topbar a{color:#fff;opacity:.9}

/* NAV */
.site-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--red);
  border-bottom:none;
  color:#fff;
}
/* Increase nav height and spacing */
.nav-inner{
  /* Use flexbox to better control spacing. Brand logo on the left, menu grows in the middle, call button on the right */
  display:flex;
  align-items:center;
  padding:20px 0;
}
/* Branding aligned to the left with extra right margin to separate it from the menu */
.brand-link{
  margin-right:40px;
}
/* Enlarge the logo to restore the taller strip */
.nav-logo{
  /* Ensure the logo fills the strip height without internal transparent padding. Use a fixed height so the red bar height stays the same */
  height:90px;
  width:auto;
  display:block;
  object-fit:contain;
}
/* Primary menu styling */
.nav-menu{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  flex-grow:1;
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav-link{
  color:#ffffff;
  font-weight:600;
  letter-spacing:.2px;
  position:relative;
  text-transform:none;
  font-size:18px;
  transition:color .2s;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:3px;
  width:0;
  background:#ffffff;
  transition:width .25s ease;
}
.nav-link:hover{color:#ffffff;}
.nav-link:hover::after{width:100%;}
/* Enhanced call button on the far right */
.btn-call{
  background:transparent;
  border:2px solid #ffffff;
  color:#ffffff;
  padding:12px 22px;
  border-radius:6px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.7px;
  font-size:18px;
  transition:all .2s;
  margin-left:auto;
}
.btn-call:hover{
  background:#ffffff;
  color:var(--red);
  border-color:#ffffff;
}

/* HERO */
.hero-new{
  min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:
    radial-gradient(80rem 40rem at 70% 65%, rgba(208,29,36,.25) 0%, rgba(208,29,36,0) 60%),
    linear-gradient(180deg,#0e0f11 0%, #111215 55%, #16171a 100%);
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;width:100%}
/* hero copy defaults to left column; left-aligned */
.hero-copy{grid-column:1;justify-self:start;text-align:left;max-width:640px;transform:translateY(-30px)}
/* .align-right removed */
.eyebrow{color:#e86a6e;font-weight:700;letter-spacing:.08em;margin:0 0 10px}
.hero-title{
  font-size:64px;
  line-height:1.05;
  margin:0 0 24px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.hero-sub{color:#d5d6d8;max-width:680px;margin:0 0 26px;font-size:18px;line-height:1.55}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-solid{background:var(--red);color:#fff;border:2px solid var(--red);padding:12px 20px;border-radius:4px;font-weight:900;letter-spacing:.6px}
.btn-solid:hover{background:#ff2630;border-color:#ff2630}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);padding:12px 20px;border-radius:4px;font-weight:900;letter-spacing:.6px}
.btn-outline:hover{border-color:#fff}
.hero-art{display:flex;justify-content:flex-end}
.hero-car{
  width:min(1100px, 90vw);
  max-width:1100px;
  height:auto;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.6));
  /* Shift the car slightly to the left and down */
  transform:translate(-40px, 10px);
}

/*
  The hero car image enters the viewport with a slide‑in animation defined on
  the generic .slide‑in utility class. The default timing on .slide‑in is
  0.8s which also applies to other elements using that class. To slow down
  only the car’s entrance, override the animation duration on the specific
  combination of the hero car and slide‑in class. Doubling the duration to
  1.6s preserves the same easing and delay but makes the animation twice as
  slow without affecting any other elements that use .slide‑in.
*/
.hero-car.slide-in{
  animation-duration:1.6s;
}

/*
  Swap the showcased car image when hovered. Using the CSS content property on
  the <img> element allows us to replace the displayed image source without
  altering its dimensions or layout. When the user hovers over the car, the
  image instantly switches to Car1.png; when the hover ends it reverts to
  Car.png automatically. This technique avoids any layout shifts and keeps
  the rest of the page untouched.
*/
.hero-car:hover{
  content:url("Images/Car1.png");
}

/* Entrance animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
.fade-in{opacity:0;animation:fadeUp .7s ease forwards;animation-delay:var(--d,0ms)}
.slide-in{opacity:0;animation:slideInRight .8s ease forwards;animation-delay:120ms}

/*
  Offset anchored sections so that their headings are fully visible when navigated to via
  the fixed header. Without this, clicking navigation links can result in the section
  titles being hidden behind the sticky navigation bar. The value roughly matches
  the height of the header and does not impact layout when scrolling normally.
*/
#about,
#services,
#faqs,
#gallery {
  scroll-margin-top: 120px;
}

/* What we do */
.section{padding:64px 0}
.section:nth-of-type(odd){
  background:linear-gradient(180deg,#1e1f23 0%, #292b31 100%);
  color:#e4e7eb;
}
.section:nth-of-type(even){
  background:linear-gradient(180deg,#131417 0%, #1b1d20 100%);
  color:#e4e7eb;
}
.center{text-align:center}
.cards{display:grid;gap:20px}
.cards.four{grid-template-columns:repeat(2,1fr);max-width:800px;margin:0 auto}
.card{
  background:#1b1d22;
  border:1px solid #3d3f46;
  border-radius:12px;
  overflow:hidden;
  text-align:center;
  color:#e4e7eb;
  transition:transform .3s, box-shadow .3s;
}
/* Elevate cards on hover */
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.card-img{height:140px;background:#0f4a78}
/* Ensure card titles stand out on dark cards */
.card-title{color:#ffffff}
.card-title{padding:14px;font-weight:700}

/* About */
.gradient{
  background:linear-gradient(180deg,#24262b 0%, #2b2e34 60%, #33363d 100%);
  color:#e4e7eb;
  padding:80px 0;
}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:24px 0 0;
  justify-content:center;
}
.badges li{background:#111827;border:1px solid #374151;color:#e5e7eb;border-radius:999px;padding:8px 12px;font-size:13px}

/* Brand scroller */
.brand-strip{
  background:linear-gradient(180deg,#1f2024 0%, #24262b 100%);
  padding:60px 0;
  overflow:hidden;
  color:#e4e7eb;
}
.brand-strip h2{
  text-align:center;
  margin-bottom:32px;
  color:#ffffff;
  font-weight:800;
  font-size:36px;
}
.brand-slider{width:100%;overflow:hidden;position:relative}
.brand-track{display:flex;align-items:center;gap:80px;width:calc(200%);animation:scrollSeamless 50s linear infinite reverse}
.brand-track img{height:65px;width:auto;object-fit:contain;flex-shrink:0;opacity:.9;transition:transform .25s}
.brand-track img:hover{transform:scale(1.05);opacity:1}
@keyframes scrollSeamless{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Services grid */
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:22px;
}
.service{
  background:#1b1d22;
  border:1px solid #3d3f46;
  border-radius:12px;
  padding:32px;
  text-align:center;
  color:#e4e7eb;
  transition:transform .3s, box-shadow .3s;
}
/* Make service headings legible on dark background */
.service h4{color:#ffffff;margin:0;}
/* Elevate service items on hover */
.service:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.service .icon{
  /* Maintain fixed height for service icons */
  height:200px;
  /* Remove placeholder background since images will provide content */
  background:none;
  border-radius:8px;
  margin-bottom:24px;
  overflow:hidden;
}
.service .icon img{
  /* Ensure images fill the icon container and maintain aspect ratio */
  width:100%;
  height:100%;
  object-fit:cover;
  /* Inherit border radius from the parent so images have rounded corners */
  border-radius:inherit;
  display:block;
}
.service h4{
  margin:0;
  font-weight:700;
  font-size:22px;
}

/* Alternating large rows */
.features-alt{display:flex;flex-direction:column;gap:60px}
.feature-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.feature-text h3{margin-bottom:10px}
/* Feature image container: maintain a square aspect ratio and hide overflow */
/* Feature image container: maintain a square aspect ratio */
.feature-img-large{
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  transition:transform .3s, box-shadow .3s;
}
/* Image inside the feature container fills it and crops appropriately */
.feature-img-large img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
/* Subtle scale on image hover */
.feature-img-large:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.feature-row.reverse{grid-template-areas:"img text"}
.feature-row:not(.reverse){grid-template-areas:"text img"}
.feature-row>.feature-text{grid-area:text}
.feature-row>.feature-img-large{grid-area:img}

/* FAQs */
.faqs .container{max-width:900px}
details.faq{
  border:1px solid #3d3f46;
  border-radius:12px;
  padding:20px 24px;
  margin:18px 0;
  background:#1c1e23;
  color:#e4e7eb;
}
details.faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  font-size:20px;
  color:#ffffff;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq p{
  margin:12px 0 0;
  line-height:1.6;
  color:#d9dce1;
  font-size:18px;
}

/* Footer */
.footer{
  background:#0b0c0f;
  color:#e4e7eb;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.section, .gradient, .brand-strip, .faqs{
  position:relative;
}
/* Curved separators create a smooth transition between differently coloured sections */
/*
  Replace the simple curved separators with a more fluid wave‑like divider.
  Each section and gradient, brand strip or FAQ now renders a pseudo‑element that
  extends above the section and uses a CSS clip path to carve a gentle wave.
  The element inherits the section’s background so the wave blends smoothly
  into the colour of the section beneath it. Adjust the height to control the
  amplitude of the wave; the polygon points create an “envelope” style
  transition without affecting the spacing of content inside each section.
*/
.section::before,
.gradient::before,
.brand-strip::before,
.faqs::before{
  content:"";
  position:absolute;
  /* pull the pseudo element up so it overlaps the end of the previous section */
  top:-60px;
  left:0;
  width:100%;
  height:60px;
  background:inherit;
  z-index:-1;
  /* Define a subtle wave using a polygon clip path.  The values are percentages
     relative to the element’s own width and height, producing a responsive
     wave that scales on different screen sizes.  You can tweak the middle
     points to alter the curvature; this design creates two gentle peaks. */
  clip-path: polygon(0% 100%, 0% 60%, 20% 70%, 40% 50%, 60% 70%, 80% 50%, 100% 60%, 100% 100%);
}
.footer a{color:#e4e7eb}
.footer .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;padding:40px 0}
.map{
  height:200px;
  border-radius:12px;
  overflow:hidden;
}
.map iframe{
  width:100%;
  height:100%;
  border:0;
}
.subfooter{
  border-top:1px solid #1f2937;
  background:#0a0b0e;
  padding:16px 0;
  text-align:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Responsive */
@media (max-width:1000px){
  .brand-link{margin-left:16px}
  .hero-grid{grid-template-columns:1fr}
  .hero-right .hero-copy{grid-column:auto;justify-self:center;text-align:center;align-items:center}
  .hero-car{
    width:min(680px,92vw);
    max-width:680px;
    margin:0 auto;
    /* Slight left shift on smaller screens too */
    transform:translate(-20px, 0);
  }
  .hero-title{font-size:48px;line-height:1.15}
  .columns{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  /* Adjust navigation and call button for smaller devices */
  /*
   * Enlarge the logo slightly on small screens.  Previously the logo was
   * constrained to a maximum width of 240px which made it appear quite
   * small relative to the red header strip.  Increase the max width to
   * approximately 1.25× the original size (300px) so the logo occupies
   * more of the available space without exceeding the 90px strip height.
   */
  .nav-logo{max-width:300px;}
  .nav-menu{flex-wrap:wrap;gap:16px;justify-content:flex-start;}
  .nav-link{font-size:16px;letter-spacing:.5px;}
  .btn-call{font-size:16px;padding:10px 16px;}
}

/* ============================== */
/* Gallery grid and lightbox styles */
/* Grid of square thumbnails */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
  margin-top:40px;
}
.gallery-grid a{
  display:block;
  width:100%;
  position:relative;
  padding-top:100%; /* square aspect ratio */
  border-radius:8px;
  overflow:hidden;
}
.gallery-grid img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .2s;
  border-radius:8px;
}
.gallery-grid img:hover{transform:scale(1.05);}

/* Lightbox overlay for viewing full images */
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
  border-radius:8px;
}
.lightbox .prev,
.lightbox .next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#ffffff;
  font-size:48px;
  padding:12px;
  cursor:pointer;
  user-select:none;
}
.lightbox .prev{left:20px;}
.lightbox .next{right:20px;}
.lightbox .close{
  position:absolute;
  top:20px;
  right:30px;
  color:#ffffff;
  font-size:40px;
  cursor:pointer;
}

/* Hamburger navigation toggle icon */
.nav-toggle{
  display:none;
  color:#ffffff;
  font-size:36px;
  cursor:pointer;
  margin-left:16px;
}

/* Responsive rules for gallery and navigation */
@media(max-width:992px){
  /* Four columns on medium screens */
  .gallery-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}
@media(max-width:768px){
  /* Wrap navigation items and adjust spacing */
  .nav-menu{
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
  }
  .btn-call{
    margin-top:12px;
  }
  /* Three columns on tablets */
  .gallery-grid{
    grid-template-columns:repeat(3, 1fr);
  }
  /* Stack feature rows vertically */
  .feature-row{
    grid-template-columns:1fr;
    gap:32px;
  }
  .feature-row.reverse{
    grid-template-areas:"img" "text";
  }
  .feature-row:not(.reverse){
    grid-template-areas:"img" "text";
  }

  /*
    On small screens the service cards should stack vertically instead of
    displaying four per row. Setting the grid to a single column ensures
    each service item takes up the full width of the viewport. We also
    allow the icons to determine their own height so they are not cut off.
  */
  .service-grid{
    grid-template-columns:1fr;
  }
  .service .icon{
    height:auto;
  }
}
@media(max-width:480px){
  /* Show the hamburger and hide the menu initially */
  .nav-toggle{
    display:block;
    margin-left:auto;
  }
  .nav-menu{
    display:none;
    flex-direction:column;
    align-items:center;
    width:100%;
    background:var(--red);
    margin-top:10px;
    padding:10px 0;
    border-radius:8px;
  }
  .nav-menu.open{
    display:flex;
  }
  .nav-menu li{
    margin:10px 0;
  }
  .btn-call{
    display:none;
  }
  /* Two columns on phones */
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  /* Always show image first then text for features */
  .feature-row{
    display:flex;
    flex-direction:column;
  }
  .feature-img-large{
    width:100%;
    aspect-ratio:1/1;
  }
}
/* --- MOBILE SERVICE IMAGE FIX --- */
@media only screen and (max-width: 768px) {
  .service .icon {
    /* This restricts the image width so it doesn't fill the screen */
    max-width: 220px; 
    
    /* This centers the image inside the card */
    margin: 0 auto 24px auto; 
    
    /* Ensures the container doesn't force the image to stretch */
    display: block;
  }
}
/* --- MOBILE 2-COLUMN LAYOUT FIX --- */
@media only screen and (max-width: 768px) {
  
  /* 1. Force the grid to show 2 columns instead of 1 */
  .service-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px; /* Smaller gap so they fit nicely */
  }

  /* 2. Reduce padding inside the cards so there is room for content */
  .service {
    padding: 15px; /* PC uses 32px, which is too big for 2-col mobile */
  }

  /* 3. Set a fixed, smaller height for images so they look uniform */
  .service .icon {
    height: 100px; /* Smaller than PC's 200px */
    margin-bottom: 12px;
    display: block;
  }

  /* 4. Slightly reduce text size to prevent weird wrapping */
  .service h4 {
    font-size: 14px;
    line-height: 1.3;
  }
}
/* --- CENTER TEXT ON MOBILE --- */
@media only screen and (max-width: 768px) {
  /* Target headings and paragraphs inside your sections */
  .hero-new, .section, .gradient {
    text-align: center;
  }

  /* If specific items like lists (bullet points) look weird, align them back to left */
  .hero-new ul, .section ul {
    text-align: left;
    display: inline-block; /* Helps center the list block itself */
  }
}
/* --- FIX MOBILE MENU JUMP & SCROLL --- */
@media only screen and (max-width: 768px) {
  
  /* 1. Make the menu float OVER the page (Absolute) 
        so closing it doesn't shift the layout */
  .nav-inner {
    position: relative; /* Anchor point */
  }
  
  .nav-menu {
    position: absolute;
    top: 100%; /* Start exactly at bottom of header */
    left: 0;
    width: 100%;
    margin-top: 0; /* Remove gap */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Add shadow for contrast */
    z-index: 999; /* Ensure it sits on top of everything */
  }

  /* 2. Adjust the scroll landing spot for Mobile 
        (Your PC sets this to 120px, which is too much for phone) */
  #about,
  #services,
  #faqs,
  #gallery {
    scroll-margin-top: 90px; /* Matches mobile header height roughly */
  }
}
/* --- HIDE HERO CAR ON MOBILE --- */
@media only screen and (max-width: 768px) {
  .hero-car {
    display: none !important;
  }
  
  /* Optional: Add a little bottom padding to the text since the car is gone */
  .hero-copy {
    margin-bottom: 40px;
  }
}
/* --- MOBILE PHONE ICON (Clean White & Closer) --- */
@media only screen and (max-width: 768px) {
  
  .btn-call {
    display: flex !important;   
    align-items: center;
    justify-content: center;
    font-size: 0 !important; /* Hide text */
    
    /* Remove all box styles */
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    width: auto;
    height: auto;
    padding: 0 !important;
    
    /* Positioning */
    margin-left: auto;  
    margin-right: 6px; /* TIGHTER GAP (was 15px) */
    margin-top: 0;
  }

  /* The White Phone Icon */
  .btn-call::before {
    content: "\1F4DE"; 
    font-size: 28px; /* Large, easy to tap */
    line-height: 1;
    
    /* Force White Icon (Anti-Emoji) */
    color: transparent;  
    text-shadow: 0 0 0 #ffffff; 
  }

  .nav-toggle {
    margin-left: 0 !important; 
    display: flex;
    align-items: center;
  }
}