:root{
  --bg:#ffffff;
  --fg:#0b0b0b;
  --accent:#3a7bff;
  --accent2:#00c2ff;
  --muted:#666;

  --max-width:1180px;
  --pad:16px;
  --radius:18px;

  --shadow:
    0 10px 30px rgba(0,0,0,.18);

  --transition:.3s ease;
}

/* =========================================
   FONTS
========================================= */

body,
h1,h2,h3,h4,h5,h6,
p,button,.btn,
input,select,textarea,
a,ul,li{
  font-family:'Style Script', cursive !important;
}

/* =========================================
   RESET
========================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  height:100%;
  scroll-behavior:smooth;
}

body{
  color:var(--fg);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* =========================================
   GLOBAL
========================================= */

a{
  color:inherit;
  text-decoration:none;
  transition:var(--transition);
}

img{
  max-width:100%;
  display:block;
  height:auto;
}

button,
.btn{
  font-family:
    'Montserrat',
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;

  font-weight:700;
  cursor:pointer;
}

.wrap{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--pad);
}

section{
  padding:90px 20px;
}

h1,
h2{
  text-align:center;
  margin-bottom:16px;
}

/* =========================================
   HEADER
========================================= */

header{
  position:sticky;
  top:0;
  z-index:1000;

  background:black;
  color:white;

  border-bottom:
    1px solid rgba(255,255,255,.06);

  backdrop-filter:blur(10px);
}

.nav-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
}

.logo img{
  height:110px;
  transition:.35s ease;
}

.logo img:hover{
  transform:scale(1.08);
}

.nav-links{
  display:flex;
  gap:18px;
}

.nav-links a{
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;
}

.nav-links a:hover{
  background:rgba(255,255,255,.08);
}

.hamburger{
  display:none;

  background:transparent;
  border:0;

  color:white;
  font-size:28px;
}

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:12px;
  padding:16px 0;
}

.mobile-menu.open{
  display:flex;
}

/* =========================================
   HERO
========================================= */

.hero{
  min-height:65vh;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;
  position:relative;

  color:white;

  background:
    linear-gradient(
      rgba(0,0,0,.45),
      rgba(0,0,0,.35)
    ),
    url('dapperpictures/ford11.png')
    center/cover no-repeat;

  background-attachment:fixed;

  padding:40px 16px;
}

.hero-inner{
  width:100%;
  max-width:960px;

  padding:30px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:24px;

  backdrop-filter:blur(10px);
}

.hero h1{
  font-size:clamp(2rem,5vw,4rem);
  margin-bottom:12px;
}

.hero .phone{
  font-weight:700;
  margin-bottom:16px;
}

.hero p{
  font-family:'Roboto',sans-serif;

  font-size:
    clamp(1rem,2vw,1.2rem);

  margin-bottom:24px;

  color:#f3f3f3;
}

.hero .actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

/* =========================================
   BUTTONS
========================================= */

.btn,
.service-btn{
  display:inline-block;

  padding:14px 24px;

  border-radius:14px;
  border:none;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent2)
    );

  color:white;

  text-decoration:none;
  font-weight:700;

  transition:var(--transition);
}

.btn:hover,
.service-btn:hover{
  transform:translateY(-2px);
  opacity:.94;
}

.service-btn{
  width:100%;
  text-align:center;
}

.book-btn,
.request-btn{
  display:inline-block;

  padding:16px 32px;

  font-size:1.2rem;

  text-decoration:none;

  color:white;
  background:#000;

  border-radius:8px;

  transition:var(--transition);
}

.book-btn{
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{
    box-shadow:
      0 0 0 0 rgba(0,0,0,.7);
  }

  70%{
    box-shadow:
      0 0 0 15px rgba(0,0,0,0);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(0,0,0,0);
  }
}

/* =========================================
   READ MORE DROPDOWN
========================================= */

.service-details{
  margin-top:20px;
  margin-bottom:22px;

  padding-top:18px;

  border-top:
    1px solid rgba(255,255,255,.08);
}

.service-details summary{
  list-style:none;

  cursor:pointer;

  display:flex;
  justify-content:space-between;
  align-items:center;

  font-weight:600;

  color:#d8d8d8;

  transition:.25s ease;
}

.service-details summary::-webkit-details-marker{
  display:none;
}

.service-details summary::after{
  content:"+";

  font-size:1.4rem;

  color:var(--accent);

  transition:var(--transition);
}

.service-details[open] summary::after{
  transform:rotate(45deg);
}

.service-details summary:hover{
  color:#fff;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================
   PREMIUM SERVICES
========================================= */

.premium-services{
  background:
    radial-gradient(
      circle at top,
      #111 0%,
      #050505 70%
    );
}

.services-header{
  text-align:center;

  max-width:850px;

  margin:0 auto 70px;
}

.section-tag{
  display:inline-block;

  padding:8px 18px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:999px;

  font-size:.8rem;
  letter-spacing:2px;

  margin-bottom:20px;

  color:#9ec5ff;

  background:
    rgba(255,255,255,.03);
}

.services-header h2{
  font-size:3rem;
  color:white;
}

.services-header p{
  color:#bdbdbd;

  line-height:1.8;
  font-size:1.05rem;
}

.services-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:20px;
}

/* =========================================
   PREMIUM CARD
========================================= */

.premium-card{
  position:relative;
  overflow:hidden;

  background:
    rgba(18,18,18,.92);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:28px;

  backdrop-filter:blur(10px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.45);

  transition:.4s ease;
}

.premium-card:hover{
  transform:translateY(-10px);

  border-color:
    rgba(58,123,255,.5);

  box-shadow:
    0 20px 50px rgba(58,123,255,.18);
}

.featured-card{
  border:
    1px solid rgba(58,123,255,.5);
}

/* IMAGE */

.card-image{
  position:relative;
  height:240px;
  overflow:hidden;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:.5s ease;
}

.premium-card:hover img{
  transform:scale(1.06);
}

.card-overlay{
  position:absolute;
  inset:0;
}

/* CARD CONTENT */

.card-content{
  padding:30px;
}

.service-badge{
  display:inline-block;

  padding:6px 14px;

  border-radius:999px;

  background:#222;
  color:white;

  font-size:.75rem;
  font-weight:700;
  letter-spacing:1px;

  margin-bottom:18px;
}

.service-badge.blue{
  background:#3a7bff;
}

.service-badge.gold{
  background:#caa55b;
  color:black;
}

.service-badge.red{
  background:#c93838;
}

.card-content h3{
  font-size:1.8rem;
  margin-bottom:12px;
  color:white;
}

.price{
  font-size:1.2rem;
  font-weight:700;

  color:#3a7bff;

  margin-bottom:22px;
}

/* =========================================
   SERVICE LIST
========================================= */

.service-list{
  list-style:none;

  display:grid;
  gap:12px;

  margin:
    18px 0 28px;

  animation:fadeIn .3s ease;
}

.service-list li{
  color:#d5d5d5;

  font-size:.96rem;

  padding-bottom:10px;

  border-bottom:
    1px solid rgba(255,255,255,.05);
}

/* =========================================
   GALLERY
========================================= */

.gallery-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:8px;
}

.gallery{
  display:grid;
  gap:18px;
}

.gallery img{
  width:100%;

  aspect-ratio:1/1;

  object-fit:cover;

  border-radius:20px;

  transition:.35s ease;

  box-shadow:
    0 6px 18px rgba(11,11,11,.08);
}

.gallery img:hover{
  transform:scale(1.04);
}

/* =========================================
   PREMIUM GALLERY SECTION
========================================= */

.premium-gallery-section{
  padding:90px 20px;
  background:#050505;
}

.gallery-header{
  text-align:center;
  margin-bottom:50px;
}

.gallery-tag{
  display:inline-block;

  color:#3a7bff;

  font-size:.9rem;
  letter-spacing:3px;
  font-weight:700;

  margin-bottom:14px;
}

.gallery-header h2{
  font-size:
    clamp(2rem,5vw,3.5rem);

  color:white;

  margin-bottom:16px;
}

.gallery-header p{
  max-width:700px;
  margin:auto;

  color:#a8a8a8;

  line-height:1.7;
  font-size:1.05rem;
}

.premium-gallery{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:20px;

  max-width:800px;
  margin:auto;
}

/* CARD */

.gallery-card{
  position:relative;
  overflow:hidden;

  border-radius:24px;

  background:#111;

  min-height:480px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.45);

  transition:.45s ease;
}

.gallery-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .6s ease;
}

.gallery-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:flex-end;

  padding:30px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.88) 10%,
      rgba(0,0,0,.15) 60%,
      transparent 100%
    );
}

.gallery-content h3{
  color:white;

  font-size:1.7rem;

  margin-bottom:10px;
}

.gallery-content span{
  color:#d6d6d6;
  font-size:1rem;
}

.gallery-card:hover{
  transform:translateY(-10px);
}

.gallery-card:hover img{
  transform:scale(1.08);
}

/* =========================================
   FORMS
========================================= */

.form-wrap{
  width:100%;
  max-width:700px;
  margin:0 auto;
}

form{
  width:100%;

  display:grid;
  gap:14px;
}

input,
select,
textarea{
  width:100%;

  padding:14px;

  border-radius:12px;
  border:1px solid #ddd;

  font-size:1rem;

  font-family:'Roboto',sans-serif;
}

textarea{
  min-height:120px;
  resize:vertical;
}

details{
  width:100%;
}

#photoPreview{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

/* VEHICLE FORM GRID */

.vehicle-fields{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

  gap:14px;
}

/* =========================================
   FAQ
========================================= */

.faq-item{
  max-width:900px;
  margin:10px auto;

  border-radius:16px;
  overflow:hidden;
}

.faq-question{
  width:100%;

  text-align:left;

  border:0;

  padding:18px;

  background:#f8f8f8;

  display:flex;
  justify-content:space-between;
  align-items:center;

  cursor:pointer;
}

.faq-answer{
  padding:18px;

  background:white;

  display:none;
}

/* =========================================
   MAP
========================================= */

.map-container{
  width:100%;
  max-width:1200px;

  border-radius:16px;
  overflow:hidden;

  margin:20px auto;
}

/* =========================================
   FOOTER
========================================= */

footer{
  background:black;
  color:white;

  padding:40px 20px;
}

footer .foot-row{
  display:flex;
  flex-direction:column;
  gap:12px;

  max-width:var(--max-width);
  margin:0 auto;
}

.socials{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* =========================================
   FOCUS
========================================= */

:focus{
  outline:
    3px solid rgba(58,123,255,.2);

  outline-offset:2px;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .hero{
    background-attachment:scroll;
  }

  .nav-links{
    display:none;
  }

  .hamburger{
    display:inline-block;
  }

  .logo img{
    height:75px;
  }

  .services-header h2{
    font-size:2.2rem;
  }

  .card-content{
    padding:24px;
  }

  .card-content h3{
    font-size:1.5rem;
  }

  .gallery{
    grid-template-columns:1fr;
  }

  .premium-gallery{
    grid-template-columns:1fr;
  }

  .gallery-card{
    min-height:240px;
  }

  .gallery-content h3{
    font-size:1.4rem;
  }

  .vehicle-fields{
    grid-template-columns:1fr;
  }

  .form-wrap{
    max-width:100%;
  }

  input,
  select,
  textarea{
    max-width:100%;
  }

}

@media(min-width:768px){

  .gallery{
    grid-template-columns:
      repeat(3,1fr);
  }

  .gallery img{
    height:240px;
  }

}