:root {
    /* Colors */
    --primary: #111111;       /* Jet Black */
    --primary-light: #333333; /* Dark Gray */
    --primary-dark: #000000;  /* Pure Black */
    --secondary: #E0E0E0;     /* Metallic Silver */
    --tertiary: #D4AF37;      /* Luxury Gold Accent */
    --tertiary-light: #ddc062;
    --tertiary-dark: #af8f25;
    --quaternary: #d70000;    /* Vivid Red Accent */
    --quaternary-light: #ff0202;
    --quaternary-dark: #ac0000;
    --text-clr: #000000;
    --dark-gray: #333333;
    --gray: #B0B0B0;
    --light-gray: #F2F2F2;
/* Font */
    --ff:'Figtree', sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --big: 1.25rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff);
    --small: 0.75rem/2em var(--ff);

    /* Spacing */
    font-size: 16px;
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.5rem;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
main {
    padding-top: 0;
}
body {
    font-family: var(--ff);
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main { 
    flex: 1;
}
/* Front Introduction */
.backgroundimg {
    background-image: url('../assets/images/homepagebackground2.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 90vh; /* Adjust for header height if needed */
    display: flex;
    justify-content: center;
    align-items: center;
}
.front-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.75rem;
    color: var(--secondary);
    width: 75%;
}
.hero1 {
    font-size: 5rem;
}
.hero2 {
    font-size: 3rem;
    font-weight: 400;
    margin-top: 0.25rem;
}
.gallery-btn {
    text-decoration: none;
    color: var(--secondary);
    font-size: 1.75rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    background-color: var(--tertiary-dark);
    border-radius: 20px;
    margin-top: 1rem;
    border: 1px solid var(--dark-gray);
    transition: all 0.3s ease-in-out;
}
.gallery-btn:hover {
    background-color: var(--quaternary);
    color: var(--primary);
}
.services-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--secondary);
    margin: 3rem 0 3rem 0;
}
.service1 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/images/hr1.png');
    background-size: cover;
}
.service1 h2 {
    font-size: 2.5rem;
    color: var(--secondary);
}
.service1 a {
    text-decoration: none;
    color: var(--tertiary);
    font-weight: bold;
    font-size: 1.75rem;
    transition: all 0.15s ease-in-out;
}
.service1 a:hover {
    color: var(--quaternary);
}
.service2 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/images/headlightcoating.png');
    background-size: cover;
}
.service2 h2 {
    font-size: 2.5rem;
    color: var(--secondary);
}
.service2 a {
    text-decoration: none;
    color: var(--tertiary);
    font-weight: bold;
    font-size: 1.75rem;
    transition: all 0.15s ease-in-out;
}
.service2 a:hover {
    color: var(--quaternary);
}
.service2 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/images/headlightcoating.png');
    background-size: cover;
}
.service2 h2 {
    font-size: 2.5rem;
    color: var(--secondary);
}
.service3 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/images/trimrestoration.png');
    background-size: cover;
}
.service3 h2 {
    font-size: 2.5rem;
    color: var(--secondary);
}
.service3 a {
    text-decoration: none;
    color: var(--tertiary);
    font-weight: bold;
    font-size: 1.75rem;
    transition: all 0.15s ease-in-out;
}
.service3 a:hover {
    color: var(--quaternary);
}
.service4 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/images/foglightrestoration.png');
    background-size: cover;
}
.service4 h2 {
    font-size: 2.5rem;
    color: var(--secondary);
}
.service4 a {
    text-decoration: none;
    color: var(--tertiary);
    font-weight: bold;
    font-size: 1.75rem;
    transition: all 0.15s ease-in-out;
}
.service4 a:hover {
    color: var(--quaternary);
}
/* Start Gallery Section */
.galleryHero {
    padding: 3rem;
    color: var(--secondary);
    font-size: 1.75rem;
    text-align: center;
}
.galleryMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* Before / After layout */
.before-after {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem;
}

.before-after-item {
    text-align: center;
    flex: 1 1 340px;
    max-width: 520px;
}
.before-after-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--tertiary-light);
    transition: transform .4s ease, box-shadow .4s ease;
}

.before-after-item img:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px -6px rgba(0,0,0,.55);
}

.before-after-label {
    margin-top: .75rem;
    font: var(--h4);
    font-weight: 600;
    color: var(--secondary);
    letter-spacing: .5px;
    text-transform: uppercase;
}
.galleryCTA {
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
}
.aboutSection {
    padding: 4rem 1.5rem 3rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #0b0b0b 40%, #000 100%);
    color: var(--secondary);
}
.aboutInner {
    max-width: 1200px;
    margin: 0 auto;
}
.aboutTitle {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}
.aboutLead {
    font-size: 1.25rem;
    line-height: 1.55;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2.5rem;
    color: var(--secondary);
}
.aboutGrid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 2.5rem;
}
.aboutCard {
    background: #161616;
    border: 1px solid #232323;
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.aboutCard:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(212,175,55,0.25), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.aboutCard:hover {
    border-color: var(--tertiary);
    transform: translateY(-6px);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.7);
}
.aboutCard:hover:before {
    opacity: 1;
}
.aboutCard h3 {
    font-size: 1.35rem;
    margin-bottom: .65rem;
    color: var(--tertiary);
    letter-spacing: .5px;
}
.aboutCard p {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--secondary);
    opacity: .9;
}
.about-btn {
    display: inline-block;
    text-decoration: none;
    background: var(--tertiary-dark);
    color: var(--secondary);
    font-weight: 700;
    font-size: 1.5rem;
    padding: .5rem 1.75rem;
    border-radius: 30px;
    border: 1px solid var(--tertiary-dark);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,.7);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    margin: 0 auto;
}
.about-btn:hover {
    background: var(--quaternary);
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.75);
}
.about-btn:active {
    transform: translateY(-1px);
}
.aboutCTA {
    text-align: center;
    margin-bottom: 10vh;
}
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}
.guaranteeBand {
    padding: 3.5rem 1.5rem 4rem;
    background: radial-gradient(circle at 20% 25%, rgba(212,175,55,.15), transparent 60%) #090909;
    border-top: 1px solid #181818;
    border-bottom: 1px solid #181818;
    color: var(--secondary);
}
.guaranteeInner {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.guaranteeBadge {
    background: linear-gradient(140deg,#141414,#1d1d1d);
    border: 1px solid #262626;
    border-radius: 22px;
    padding: 1.75rem 2rem 2rem;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.65);
    isolation: isolate; /* prevents glow bleed from blending weirdly */
    background-clip: padding-box;
}

.guaranteeBadge:before {
    content:"";
    position:absolute;
    inset:2px; /* pull in so glow doesn’t hit border edge */
    border-radius: inherit;
    background:
        radial-gradient(circle at 45% 35%, rgba(212,175,55,.32), transparent 70%);
    pointer-events:none;
    opacity:.9;
    mix-blend-mode: screen; /* softer blend; remove if undesired */
}

.guaranteeBadge.no-blend:before {
    mix-blend-mode: normal;
}
.g-icon {
    display:block;
    font-size:2.2rem;
    line-height:1;
    margin-bottom:.4rem;
    color: var(--tertiary);
    text-shadow:0 0 12px rgba(212,175,55,.45);
}
.g-duration {
    display:block;
    font-weight:700;
    font-size:1rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color: var(--tertiary);
}
.g-label {
    display:block;
    font-size:.85rem;
    letter-spacing:.5px;
    opacity:.85;
    margin-top:.2rem;
}
.guaranteeText {
    flex:1 1 420px;
    max-width: 640px;
}
.guaranteeText h2 {
    font-size:2.2rem;
    margin:0 0 .75rem;
    letter-spacing:.5px;
}
.guaranteeText p {
    line-height:1.55;
    font-size:1.05rem;
    opacity:.9;
    margin:0 0 1.5rem;
}
.guarantee-btn {
    display:inline-block;
    background: var(--tertiary-dark);
    color: var(--primary-dark);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.5px;
    padding:.85rem 2.2rem;
    font-size:1.05rem;
    border-radius:40px;
    border:1px solid var(--tertiary);
    box-shadow:0 8px 26px -10px rgba(0,0,0,.7);
    transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.guarantee-btn:hover {
    background: var(--quaternary);
    transform: translateY(-4px);
    box-shadow:0 16px 36px -14px rgba(0,0,0,.75);
}
.faqSection {
    background:#050505;
    padding:4rem 1.5rem 4.5rem;
    border-top:1px solid #111;
    border-bottom:1px solid #111;
    color:var(--secondary);
}
.faqInner {
    max-width:1050px;
    margin:0 auto;
}
.faqTitle {
    text-align:center;
    font-size:2.4rem;
    margin:0 0 1rem;
    letter-spacing:.5px;
}
.faqLead {
    text-align:center;
    max-width:760px;
    margin:0 auto 2.5rem;
    font-size:1.05rem;
    line-height:1.55;
    opacity:.85;
}
.faqList {
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:2.5rem;
}
.faqList details {
    background:#121212;
    border:1px solid #1f1f1f;
    border-radius:14px;
    padding:.2rem 0;
    transition:border-color .35s ease, background .35s ease;
    overflow:hidden;
}
.faqList details[open] {
    border-color:var(--tertiary);
    background:#161616;
}
.faqList summary {
    cursor:pointer;
    list-style:none;
    outline:none;
    padding:1rem 1.15rem 1rem 1.15rem;
    font-weight:600;
    font-size:1rem;
    letter-spacing:.4px;
    position:relative;
    display:flex;
    align-items:center;
    gap:.75rem;
}
.faqList summary::-webkit-details-marker { display:none; }
.faqList summary:after {
    content:"+";
    margin-left:auto;
    font-weight:700;
    transition:transform .35s ease;
    color:var(--tertiary);
}
.faqList details[open] summary:after {
    transform:rotate(45deg);
}
.faqAnswer {
    padding:0 1.15rem 1.2rem 1.15rem;
    font-size:.93rem;
    line-height:1.55;
    opacity:.9;
}
.faqCTA-btn {
    display:inline-block;
    background:var(--quaternary);
    color:var(--secondary);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.5px;
    padding:.85rem 2rem;
    border-radius:40px;
    border:1px solid var(--quaternary-dark);
    box-shadow:0 8px 26px -10px rgba(0,0,0,.65);
    transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
    position:relative;
    left:50%;
    transform:translateX(-50%);
}
.faqCTA-btn:hover {
    background:var(--tertiary);
    color:var(--primary-dark);
    transform:translate(-50%, -4px);
    box-shadow:0 16px 38px -14px rgba(0,0,0,.75);
}
.faqCTA-btn:active {
    transform:translate(-50%, -1px);
}
@media (max-width: 767px) {

  .backgroundimg {
    padding: 0 1.25rem;
    align-items: center;
    min-height: 70vh;
    background-position: center;
  }

  .front-intro { width:100%; max-width:640px; }
  .hero1 { font-size: clamp(2.4rem, 9vw, 3rem); line-height:1.05; }
  .hero2 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height:1.15; margin-top:.6rem; }

  .gallery-btn {
      font-size:1.1rem;
      padding:.75rem 1.4rem;
      border-radius:18px;
      margin-top:1.25rem;
  }

  .services-title { font-size:1.5rem; margin:2.5rem 0 2rem; }

  .service1, .service2, .service3, .service4 {
      height:52vw;
      min-height:240px;
      padding:1.25rem;
      background-position:center;
      background-size:cover;
  }
  .service1 h2, .service2 h2, .service3 h2, .service4 h2 {
      font-size:clamp(1.6rem, 6.4vw, 2rem);
  }
  .service1 a, .service2 a, .service3 a, .service4 a {
      font-size:1.1rem;
      margin-top:.4rem;
  }

  .before-after { gap:1.1rem; padding:0 .75rem; }
  .before-after-item { flex:1 1 100%; max-width:100%; }
  .before-after-item img { aspect-ratio:4/3; border-radius:14px; }
  .before-after-label { font-size:1.05rem; margin-top:.55rem; }

  .aboutSection { padding:3.25rem 1.25rem 2.75rem; }
  .aboutTitle { font-size:2.2rem; margin-bottom:1.1rem; }
  .aboutLead { font-size:1.05rem; line-height:1.5; margin-bottom:2rem; padding:0 .25rem; }
  .aboutGrid { grid-template-columns:1fr; gap:1.15rem; margin-bottom:2rem; }
  .aboutCard { padding:1.15rem 1rem 1.35rem; }
  .aboutCard h3 { font-size:1.15rem; }
  .aboutCard p { font-size:.85rem; }
  .about-btn { font-size:1.05rem; padding:.7rem 1.6rem; }

  .guaranteeBand { padding:3rem 1.25rem 3.25rem; }
  .guaranteeInner { flex-direction:column; gap:2rem; }
  .guaranteeBadge { width:100%; max-width:360px; padding:1.5rem 1.25rem 1.7rem; }
  .g-icon { font-size:2rem; }
  .g-duration { font-size:.9rem; }
  .g-label { font-size:.75rem; }
  .guaranteeText h2 { font-size:1.85rem; }
  .guaranteeText p { font-size:.95rem; line-height:1.5; }
  .guarantee-btn { width:100%; text-align:center; }

  .faqSection { padding:3.25rem 1.25rem 3.5rem;
                margin-top: -10rem; }
  .faqTitle { font-size:2rem; }
  .faqLead { font-size:.95rem; margin-bottom:2rem; }
  .faqList { gap:.75rem; margin-bottom:2rem; }
  .faqList summary { padding:.9rem 1rem; font-size:.95rem; }
  .faqAnswer { padding:0 1rem 1rem; font-size:.85rem; line-height:1.45; }
  .faqCTA-btn {
      left:0;
      transform:none;
      width:100%;
      text-align:center;
      font-size:1rem;
      padding:.8rem 1.25rem;
  }

  .gallery-btn,
  .about-btn,
  .guarantee-btn,
  .faqCTA-btn {
      box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  }
  .gallery-btn:hover,
  .about-btn:hover,
  .guarantee-btn:hover,
  .faqCTA-btn:hover {
      transform:translateY(-3px);
  }

  @media (prefers-reduced-motion: reduce) {
      .before-after-item img,
      .aboutCard,
      .guaranteeBadge,
      .faqList details,
      .gallery-btn,
      .about-btn,
      .guarantee-btn,
      .faqCTA-btn {
          transition:none !important;
      }
  }
}