/* ============================================================
   CARMANTRA — Golden Premium Theme
   Multi-page website stylesheet
   ============================================================ */

/* ========================
   CSS Custom Properties
   ======================== */
:root {
  /* ── Gold palette ── */
  --gold:          #C09040;
  --gold-light:    #D4A84A;
  --gold-lighter:  #E8C87A;
  --gold-dark:     #9A7030;
  --gold-bg:       rgba(192, 144, 64, 0.08);
  --gold-border:   rgba(192, 144, 64, 0.28);
  --gold-glow:     rgba(192, 144, 64, 0.18);

  /* ── Dark palette ── */
  --dark-1:  #080A0F;
  --dark-2:  #0E1018;
  --dark-3:  #161820;
  --dark-4:  #1E2030;

  /* ── Light palette ── */
  --cream:   #F8F5EF;
  --cream-2: #EEE9DF;
  --white:   #FFFFFF;

  /* ── Typography ── */
  --text-dark:   #1A1820;
  --text-mid:    #5A5870;
  --text-muted:  #8A889A;
  --text-light:  rgba(255,255,255,0.88);
  --text-dimmed: rgba(255,255,255,0.50);

  /* ── Other ── */
  --green-wa: #25D366;
  --radius:   12px;
  --radius-lg:20px;
}

/* ========================
   Global Resets
   ======================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

img { max-width: 100%; display: block; }
a   { transition: color 0.2s; }

/* ========================
   Utilities
   ======================== */
.text-gold   { color: var(--gold) !important; }
.bg-dark     { background-color: var(--dark-1) !important; }
.bg-cream    { background-color: var(--cream) !important; }

.container-custom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========================
   Scroll Animations
   ======================== */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible  { opacity: 1 !important; transform: none !important; }
.reveal.fade-up  { transform: translateY(50px); }
.reveal.fade-in  { transform: none; }
.reveal.zoom-in  { transform: scale(0.92); }
.reveal.slide-left  { transform: translateX(-60px); }
.reveal.slide-right { transform: translateX(60px); }

@media (max-width: 768px) {
  .reveal.slide-left,
  .reveal.slide-right { transform: translateY(50px); }
}

.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }

/* ========================
   SECTION HEADER (shared)
   ======================== */
.section-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0;
}

.section-title.light { color: var(--white); }

.title-bar {
  width: 52px;
  height: 3px;
  background: linear-gradient(to right, var(--gold), var(--gold-lighter));
  border-radius: 2px;
  margin: 16px 0 0;
}

.title-bar.mx-auto { margin: 16px auto 0; }

.section-sub {
  font-size: 1.05rem;
  color: var(--text-mid);
  max-width: 580px;
  line-height: 1.7;
}

.section-sub.light { color: var(--text-dimmed); }

/* ========================
   GOLD DIVIDER
   ======================== */
.gold-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 2.5rem 0;
}
.gold-divider::before,
.gold-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-border));
}
.gold-divider::after {
  background: linear-gradient(to left, transparent, var(--gold-border));
}
.gold-divider span {
  color: var(--gold);
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* ========================
   BUTTONS
   ======================== */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--dark-1);
  border: none;
  border-radius: 50rem;
  padding: 0.75rem 2rem;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  color: var(--dark-1);
  background: linear-gradient(135deg, var(--gold-light), var(--gold-lighter));
}

.btn-gold-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold-border);
  border-radius: 50rem;
  padding: 0.72rem 2rem;
  font-weight: 600;
  font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-gold-outline:hover {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dark-1);
  color: var(--white);
  border: none;
  border-radius: 50rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-dark:hover {
  background: var(--dark-3);
  color: var(--gold-lighter);
  transform: translateY(-2px);
}

/* ========================
   HEADER / NAVBAR
   ======================== */
.navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.1rem 0;
  transition: all 0.35s ease;
  background: linear-gradient(to bottom, rgba(8,10,15,0.9), transparent);
}

.navbar.scrolled {
  background: var(--dark-1);
  padding: 0.8rem 0;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--gold-border);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo { max-height: 38px; }

/* Logo swap < 350px */
@media (max-width: 350px) {
  .logo-default { display: none !important; }
  .logo-tiny    { display: block !important; }
}

/* Desktop nav */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 992px) {
  .desktop-nav { display: flex; }
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link-custom {
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s;
}

.nav-link-custom::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1.5px;
  bottom: 0; left: 50%;
  background: linear-gradient(to right, var(--gold), var(--gold-lighter));
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--gold-lighter);
}

.nav-link-custom:hover::after,
.nav-link-custom.active::after { width: 100%; }

/* Book Now button in nav */
.nav-book-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--dark-1) !important;
  border: none;
  border-radius: 50rem;
  padding: 0.55rem 1.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.nav-book-btn:hover {
  transform: translateY(-2px);
  color: var(--dark-1) !important;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  z-index: 1051;
}

@media (min-width: 992px) { .hamburger { display: none; } }

.hamburger span {
  display: block;
  height: 2px;
  background: var(--gold-lighter);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { width: 28px; }
.hamburger span:nth-child(2) { width: 20px; }

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { width: 28px; transform: rotate(-45deg) translate(0, -1px); }

/* Mobile menu overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--dark-1);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}

.mobile-overlay.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.mobile-nav-links {
  list-style: none;
  padding: 0; margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.mobile-nav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  transition: color 0.2s;
  display: block;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--gold-lighter); }

.mobile-nav-footer {
  padding-bottom: 1rem;
}

.mobile-close-btn {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.mobile-close-btn:hover {
  border-color: var(--gold-border);
  color: var(--gold-lighter);
  background: rgba(192,144,64,0.08);
}

/* ========================
   PAGE HERO (inner pages)
   ======================== */
.page-hero {
  background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-3) 100%);
  padding: 140px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(192,144,64,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(192,144,64,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.page-hero .section-tag  { margin-bottom: 8px; }
.page-hero .page-title   {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 1rem;
}

.breadcrumb-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dimmed);
}

.breadcrumb-nav a {
  color: var(--gold);
  text-decoration: none;
}

.breadcrumb-sep { color: var(--gold-border); }

/* ========================
   HOME HERO
   ======================== */
.home-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 90px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../public/hero-home.webp') no-repeat center center / cover;
  background-color: var(--dark-2);
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8,10,15,0.92) 0%, rgba(8,10,15,0.70) 55%, rgba(8,10,15,0.45) 100%);
  z-index: 1;
}

/* Gold vertical accent bar */
.hero-gold-bar {
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.hero-eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.hero-eyebrow-text {
  font-size: 0.72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-lighter);
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero-title .gold-word {
  background: linear-gradient(135deg, var(--gold), var(--gold-lighter));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 460px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

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

/* Home hero bottom diagonal shape */
.hero-diagonal {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 80px;
  z-index: 4;
  overflow: hidden;
}

.hero-diagonal::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 100%; height: 100%;
  background: var(--white);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ========================
   STATS BAR
   ======================== */
.stats-bar {
  background: var(--white);
  padding: 3rem 0;
  border-bottom: 1px solid var(--cream-2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: repeat(1, 1fr); }
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20%; right: 0;
  width: 1px;
  height: 60%;
  background: var(--cream-2);
}

@media (max-width: 400px) {
  .stat-item:not(:last-child)::after { display: none; }
}

.stat-number {
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-mid);
}

/* ========================
   SECTION WRAPPER
   ======================== */
.section-pad { padding: 80px 0; }
.section-pad-sm { padding: 60px 0; }

/* ========================
   SERVICE CARDS (home preview)
   ======================== */
.service-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .service-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .service-preview-grid { grid-template-columns: 1fr; }
}

.service-card-gold {
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.service-card-gold:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.10);
}

.service-card-img {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.service-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,15,0.5) 0%, transparent 60%);
}

.service-card-body {
  padding: 1.5rem;
}

.service-card-body h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.service-card-body p {
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.service-price-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-dark);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 3px 12px;
  letter-spacing: 0.5px;
}

/* ========================
   WHY CHOOSE US (home)
   ======================== */
.why-section { background: var(--cream); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 768px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border-top: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.09);
}

.why-icon {
  width: 52px; height: 52px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.why-card h4 {
  font-size: 1.05rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.why-card p {
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin: 0;
}

/* ========================
   TESTIMONIALS
   ======================== */
.testimonials-section { background: var(--dark-2); }

.testimonial-card {
  background: var(--dark-3);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-lg);
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.testimonial-card:hover {
  border-color: var(--gold-border);
  box-shadow: 0 0 28px var(--gold-glow);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.t-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 1.5px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  flex-shrink: 0;
}

.t-name { font-weight: 700; font-size: 0.9rem; color: var(--white); }
.t-source { font-size: 0.75rem; color: var(--text-muted); }
.t-source a { color: var(--gold-lighter); text-decoration: none; }

/* Swiper */
.swiper          { --swiper-theme-color: var(--gold); }
.swiper-slide    { height: auto; }
.swiper-wrapper  { align-items: stretch; }

.swiper-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--dark-4);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--gold-lighter);
  font-size: 1.1rem;
}

.swiper-nav-btn:hover {
  background: var(--gold);
  color: var(--dark-1);
  border-color: var(--gold);
}

.swiper-nav-btn.prev-btn { left: -20px; }
.swiper-nav-btn.next-btn { right: -20px; }

@media (max-width: 992px) {
  .swiper-nav-btn.prev-btn { left: 0; }
  .swiper-nav-btn.next-btn { right: 0; }
}

.carousel-wrapper { position: relative; padding: 0 50px; }

@media (max-width: 576px) { .carousel-wrapper { padding: 0; } }

/* ========================
   ESTIMATE CTA BANNER
   ======================== */
.estimate-cta-section {
  background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-3) 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

.estimate-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(192,144,64,0.10) 0%, transparent 55%);
  pointer-events: none;
}

.estimate-cta-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-border), transparent);
}

/* ========================
   SERVICES PAGE — Full Grid
   ======================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

.service-full-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-2);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.service-full-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.10);
}

.service-full-card .card-img {
  height: 200px;
  overflow: hidden;
}

.service-full-card .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-full-card:hover .card-img img { transform: scale(1.05); }

.service-full-card .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-full-card .card-body h3 {
  font-size: 1.05rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.service-full-card .card-body p {
  font-size: 0.87rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.service-includes {
  list-style: none;
  padding: 0; margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.service-includes li {
  font-size: 0.82rem;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-includes li::before {
  content: '◆';
  font-size: 0.45rem;
  color: var(--gold);
  flex-shrink: 0;
}

.service-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--cream-2);
  margin-top: auto;
}

/* ========================
   HOW IT WORKS (services page)
   ======================== */
.how-section { background: var(--dark-2); padding: 80px 0; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}

@media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr; gap: 32px; } }

.step-item {
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
}

/* Connecting line between steps */
.steps-grid::before {
  content: '';
  position: absolute;
  top: 40px; left: 16.67%;
  width: 66.67%;
  height: 1px;
  background: linear-gradient(to right, var(--gold-border), var(--gold-border));
  z-index: 0;
}

@media (max-width: 768px) { .steps-grid::before { display: none; } }

.step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-1);
  margin: 0 auto 1.2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px var(--gold-glow);
}

.step-item h4 {
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 8px;
}

.step-item p {
  font-size: 0.84rem;
  color: var(--text-dimmed);
  line-height: 1.6;
  margin: 0;
}

/* ========================
   ESTIMATE PAGE
   ======================== */
.estimate-section { background: var(--cream); padding: 80px 0; }

.estimate-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-2);
  padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
}

@media (max-width: 576px) { .estimate-card { padding: 1.5rem; } }

/* Sticky estimate result column */
.est-result-sticky {
  position: sticky;
  top: 120px;
}

/* Empty-state hint before any service is selected */
.est-result-hint {
  border: 2px dashed var(--cream-2);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.est-result-hint i {
  font-size: 2.2rem;
  color: var(--cream-2);
  display: block;
  margin-bottom: 1rem;
}

.est-result-hint p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Hide hint on mobile — stacked layout doesn't need it */
@media (max-width: 991px) {
  .est-result-hint { display: none; }
}

/* Bottom info strip */
.est-bottom-info {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--cream-2);
}

/* ========================
   STEPPER
   ======================== */
.stepper-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.stepper-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 2px solid var(--cream-2);
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  position: relative;
}

.stepper-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 0.35s;
  text-align: center;
}

.stepper-line {
  flex: 1;
  height: 2px;
  background: var(--cream-2);
  align-self: flex-start;
  margin-top: 19px;
  transition: background 0.35s;
}

.stepper-line.filled { background: var(--gold-dark); }

/* Active step */
.stepper-item.active .stepper-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-1);
}
.stepper-item.active .stepper-label { color: var(--gold-dark); }

/* Completed step */
.stepper-item.completed .stepper-circle {
  background: transparent;
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  font-size: 0;
}
.stepper-item.completed .stepper-circle::after {
  content: '✓';
  font-size: 1rem;
  font-weight: 700;
}
.stepper-item.completed .stepper-label { color: var(--gold-dark); }

/* Step navigation bar */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-2);
}

/* Disabled button state */
.btn-gold:disabled,
.btn-gold[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.step-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.2rem;
}

.step-bubble {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dark-1);
  flex-shrink: 0;
}

.step-label h5 { font-size: 1rem; color: var(--text-dark); margin: 0; }

.est-divider {
  border: none;
  border-top: 1px dashed var(--cream-2);
  margin: 1.8rem 0;
  display: none;
}
.est-divider.show { display: block; }

/* Brand grid */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

@media (max-width: 480px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }

.brand-btn {
  border: 1.5px solid var(--cream-2);
  border-radius: var(--radius);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--white);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-mid);
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.brand-btn:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--gold-glow);
}

.brand-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.brand-logo-img {
  width: 48px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) opacity(0.75);
  transition: filter 0.18s;
}
.brand-btn:hover .brand-logo-img,
.brand-btn.selected .brand-logo-img { filter: grayscale(0) opacity(1); }

/* Form selects */
.form-select-gold {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--cream-2);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-dark);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23C09040' d='M6 8L1 3h10L6 8z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.form-select-gold:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Service estimate cards */
.service-est-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

@media (max-width: 480px) { .service-est-grid { grid-template-columns: 1fr 1fr; } }

.service-est-card {
  border: 1.5px solid var(--cream-2);
  border-radius: var(--radius);
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--white);
  position: relative;
  user-select: none;
}

.service-est-card:hover {
  border-color: var(--gold-border);
  box-shadow: 0 4px 16px var(--gold-glow);
}

.service-est-card.checked {
  border-color: var(--gold);
  background: var(--gold-bg);
}

.est-card-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 18px; height: 18px;
  border: 1.5px solid var(--cream-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: transparent;
  transition: all 0.2s;
}

.service-est-card.checked .est-card-check {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-1);
}

.est-card-icon { font-size: 1.3rem; color: #bbb; margin-bottom: 6px; }
.service-est-card.checked .est-card-icon { color: var(--gold); }
.est-card-name { font-weight: 700; font-size: 0.84rem; color: var(--text-dark); }
.est-card-price { font-size: 0.95rem; font-weight: 700; color: var(--gold-dark); }
.est-card-note  { font-size: 0.7rem; color: var(--text-muted); }
.est-card-desc  { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* Car chip */
.car-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-dark);
}

.change-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--gold);
  cursor: pointer;
  font-weight: 500;
}

.change-link:hover { text-decoration: underline; }

/* Estimate result */
.estimate-result-box {
  background: linear-gradient(135deg, var(--cream) 0%, var(--white) 100%);
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.est-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.9rem;
}

.est-item:last-child { border-bottom: none; }
.est-item-name { color: var(--text-mid); }
.est-item-price { font-weight: 600; color: var(--text-dark); }

/* Estimate result — two options */
.est-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-2);
}

.est-option-card {
  padding: 1rem 0;
}
.est-option-card:first-child { padding-top: 0; }
.est-option-card:last-child  { padding-bottom: 0; }

.est-option-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.est-option-desc {
  font-size: 0.79rem;
  color: var(--text-mid);
  line-height: 1.5;
  margin: 0;
}

.est-option-or {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 0;
}

.est-option-or::before,
.est-option-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cream-2);
}

.est-option-or span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 10px;
}

/* ========================
   ABOUT PAGE
   ======================== */
.story-section { padding: 80px 0; }

.story-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.story-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.story-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gold-border);
}

.values-section { background: var(--dark-2); padding: 80px 0; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 576px) { .values-grid { grid-template-columns: 1fr; } }

.value-card {
  background: var(--dark-3);
  border: 1px solid var(--dark-4);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.value-card-icon {
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.8rem;
}

.value-card h4 { color: var(--white); font-size: 1rem; margin-bottom: 6px; }
.value-card p  { color: var(--text-dimmed); font-size: 0.85rem; line-height: 1.65; margin: 0; }

/* ========================
   CONTACT PAGE
   ======================== */
.contact-section { padding: 80px 0; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

@media (max-width: 768px) { .contact-info-grid { grid-template-columns: 1fr; } }

.contact-info-card {
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
}

.contact-info-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.contact-info-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold);
  margin: 0 auto 1rem;
}

.contact-info-card h4 { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 6px; }
.contact-info-card p,
.contact-info-card a {
  font-size: 0.88rem;
  color: var(--text-mid);
  text-decoration: none;
  line-height: 1.6;
  margin: 0;
}

.contact-info-card a:hover { color: var(--gold); }

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-dark);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: gap 0.2s, color 0.2s;
}

.contact-cta:hover {
  color: var(--gold);
  gap: 10px;
}

/* Contact form */
.contact-form-section { background: var(--cream); }

.form-label-gold {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  display: block;
}

.form-input-gold {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--cream-2);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input-gold::placeholder { color: var(--text-muted); }

.form-input-gold:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

textarea.form-input-gold { resize: vertical; min-height: 120px; }

.map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  min-height: 380px;
  border: 1.5px solid var(--gold-border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

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

/* Hours table */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid var(--cream-2); }
.hours-table td { padding: 8px 0; font-size: 0.86rem; color: var(--text-mid); }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--text-dark); }
.hours-open { color: var(--gold-dark) !important; }

/* ========================
   FOOTER
   ======================== */
footer {
  background: var(--dark-1);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--dark-4);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand-col p {
  font-size: 0.86rem;
  color: var(--text-dimmed);
  line-height: 1.7;
  margin: 1rem 0 1.5rem;
  max-width: 260px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dark-4);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s;
}

.social-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-1);
}

.footer-col h6 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-lighter);
  margin-bottom: 1.2rem;
}

.footer-links {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  font-size: 0.86rem;
  color: var(--text-dimmed);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--gold-lighter); }

.footer-contact-item {
  display: flex;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--text-dimmed);
  margin-bottom: 10px;
  line-height: 1.5;
}

.footer-contact-item i { color: var(--gold); margin-top: 2px; flex-shrink: 0; }

.footer-bottom {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom span,
.footer-bottom a {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  text-decoration: none;
}

.footer-bottom a:hover { color: var(--gold-lighter); }

/* ========================
   FLOATING WHATSAPP
   ======================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 999;
  background: var(--green-wa);
  color: white;
  border: none;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
  font-family: inherit;
}

@media (min-width: 768px) {
  .whatsapp-float {
    width: auto; height: auto;
    padding: 11px 22px;
    border-radius: 50rem;
    gap: 8px;
  }
  .wa-text { display: inline; }
}

.wa-text {
  font-weight: 700;
  font-size: 0.88rem;
  display: none;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  color: white;
}

/* ========================
   Responsive utilities
   ======================== */
@media (min-width: 768px) {
  .d-md-none     { display: none !important; }
  .d-md-block    { display: block !important; }
  .d-md-flex     { display: flex !important; }
}

/* ========================
   FLOATING ESTIMATE WIDGET
   ======================== */

/* Trigger button — sits just above the WA float */
.est-float-btn {
  position: fixed;
  bottom: 100px; right: 28px;
  z-index: 999;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--dark-1);
  border: none;
  border-radius: 50%;
  width: 50px; height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s;
}

@media (min-width: 768px) {
  .est-float-btn {
    width: auto; height: auto;
    border-radius: 50rem;
    padding: 11px 18px;
    gap: 7px;
    font-weight: 700;
    font-size: 0.86rem;
  }
  .est-float-label { display: inline; }
}

.est-float-label { display: none; }
.est-float-btn:hover { transform: translateY(-2px); }
.est-float-btn.panel-open { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); }

/* Panel */
.est-float-panel {
  position: fixed;
  bottom: 162px; right: 28px;
  z-index: 1001;
  width: 360px;
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(192,144,64,0.08);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

.est-float-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

@media (max-width: 440px) {
  .est-float-panel { width: calc(100vw - 32px); right: 16px; bottom: 148px; }
  .est-float-btn   { right: 16px; bottom: 88px; width: 46px; height: 46px; }
}

@media (max-width: 360px) {
  .est-float-panel { width: calc(100vw - 24px); right: 12px; bottom: 140px; }
  .est-float-btn   { right: 12px; bottom: 76px; width: 44px; height: 44px; }
}

/* Header */
.efp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--cream-2);
}

.efp-tag {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}

.efp-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
}

.efp-close-btn {
  background: none;
  border: 1.5px solid var(--cream-2);
  border-radius: 50%;
  width: 30px; height: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s;
}
.efp-close-btn:hover { border-color: var(--gold-border); color: var(--gold-dark); }

/* Stepper bar */
.efp-stepper {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.4rem;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-2);
  gap: 0;
}

.efp-s-item {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.efp-s-circle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 2px solid var(--cream-2);
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.efp-s-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.3s;
}

.efp-s-line {
  flex: 1;
  height: 2px;
  background: var(--cream-2);
  margin: 0 10px;
  border-radius: 2px;
  transition: background 0.3s;
}

.efp-s-line.filled { background: var(--gold); }

.efp-s-item.active .efp-s-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-1);
}
.efp-s-item.active .efp-s-label { color: var(--gold-dark); }

.efp-s-item.completed .efp-s-circle {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: var(--gold-dark);
}
.efp-s-item.completed .efp-s-circle::after {
  content: '\2713';
  position: absolute;
  font-size: 0.75rem;
}
.efp-s-item.completed .efp-s-circle { font-size: 0; }
.efp-s-item.completed .efp-s-label { color: var(--gold-dark); }

/* Body */
.efp-body {
  padding: 1rem 1.2rem 1.2rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* Brand grid — 4 cols inside panel */
.efp-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.efp-brand-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 5px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-mid);
  font-family: 'Inter', sans-serif;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  text-align: center;
  line-height: 1.3;
}

.efp-brand-btn:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.efp-brand-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.efp-brand-logo-img {
  width: 38px;
  height: 24px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) opacity(0.75);
  transition: filter 0.18s;
}
.efp-brand-btn:hover .efp-brand-logo-img,
.efp-brand-btn.selected .efp-brand-logo-img { filter: grayscale(0) opacity(1); }

/* Step 2 — back row */
.efp-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.efp-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.efp-back-btn:hover { color: var(--gold-dark); }

.efp-brand-chip {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-dark);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: 50rem;
  padding: 3px 10px;
}

/* Step 2 selects */
.efp-selects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Redirect state */
.efp-redirect-bar {
  height: 3px;
  background: var(--cream-2);
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
}

.efp-redirect-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--gold), var(--gold-lighter));
  border-radius: 2px;
  animation: efp-fill 0.7s ease forwards;
}

@keyframes efp-fill {
  from { width: 0; }
  to   { width: 100%; }
}

.efp-redirect-msg {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ========================
   MODEL CARD GRID (step 2 — main estimate page)
   ======================== */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.model-btn {
  padding: 9px 10px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-mid);
  text-align: center;
  line-height: 1.3;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.model-btn:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.model-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

@media (max-width: 360px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Year card grid (main estimate page) ── */
.year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.year-btn {
  padding: 9px 6px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-mid);
  text-align: center;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.year-btn:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.year-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

/* ── Float panel: mini model grid ── */
.efp-model-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 0 0 7px;
}

.efp-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 0;
}

.efp-model-btn {
  padding: 6px 4px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 7px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.63rem;
  font-weight: 600;
  color: var(--text-mid);
  text-align: center;
  line-height: 1.3;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.efp-model-btn:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.efp-model-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

/* ── Float panel: year grid ── */
.efp-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.efp-year-btn {
  padding: 6px 4px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 7px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-mid);
  text-align: center;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.efp-year-btn:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.efp-year-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

/* ========================
   ESTIMATE SLOT PICKER
   ======================== */
.est-slot-picker {
  margin: 16px 0 0;
  padding: 14px 0 8px;
  border-top: 1px solid var(--cream-2);
}

.est-slot-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 11px;
}

.est-slot-heading i { color: var(--gold); }

.est-slot-optional {
  font-size: 0.67rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--cream);
  border: 1px solid var(--cream-2);
  border-radius: 50rem;
  padding: 1px 7px;
  margin-left: 2px;
}

.est-date-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.est-date-chips::-webkit-scrollbar { display: none; }

.est-date-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 12px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.18s, background 0.18s;
}

.est-date-chip:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
}

.est-date-chip.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
}

.edc-main {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dark);
}

.est-date-chip.selected .edc-main { color: var(--gold-dark); }

.edc-sub {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-muted);
}

.est-date-chip.selected .edc-sub { color: var(--gold); }

.est-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.est-time-slot {
  padding: 7px 4px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--text-mid);
  font-family: inherit;
  text-align: center;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.est-time-slot:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.est-time-slot.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

/* ========================
   HOME ESTIMATE WIDGET
   ======================== */
.home-est-widget {
  background: var(--cream);
  padding: 60px 0;
  border-bottom: 1px solid var(--cream-2);
}

.hew-inner {
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.06);
}

.hew-header { margin-bottom: 2rem; }

.hew-title {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--text-dark);
  margin: 6px 0 8px;
}

.hew-sub {
  font-size: 0.9rem;
  color: var(--text-mid);
  margin: 0;
}

.hew-step-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Brand grid */
.hew-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

@media (max-width: 900px) { .hew-brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .hew-brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .hew-brand-grid { grid-template-columns: repeat(2, 1fr); } }

.hew-brand-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--cream);
  border: 1.5px solid var(--cream-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-mid);
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  text-align: center;
  line-height: 1.3;
}

.hew-brand-btn:hover {
  border-color: var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.hew-brand-btn.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.hew-brand-icon {
  font-size: 1.3rem;
  color: var(--gold);
}

/* Step 2 */
.hew-step-details {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cream-2);
}

.hew-selects-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}

@media (max-width: 640px) {
  .hew-selects-row { grid-template-columns: 1fr; }
  .hew-submit-wrap .btn-gold { width: 100%; justify-content: center; }
}

.hew-select-wrap { display: flex; flex-direction: column; gap: 6px; }

.hew-submit-wrap {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1px;
}

.hew-change-btn {
  background: none;
  border: none;
  color: var(--gold-dark);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
  transition: color 0.2s;
}

.hew-change-btn:hover { color: var(--gold); }

/* Mobile inner padding */
@media (max-width: 576px) { .hew-inner { padding: 1.5rem; } }
@media (max-width: 360px) { .hew-inner { padding: 1.1rem; } }

/* ========================
   GLOBAL SMALL-SCREEN FIXES
   ======================== */

/* Reduce container padding on very small screens */
@media (max-width: 360px) {
  .container-custom { padding-left: 14px; padding-right: 14px; }
}

/* Mobile overlay on tiny screens */
@media (max-width: 360px) {
  .mobile-overlay { padding: 18px; }
  .mobile-nav-links a { font-size: 1.45rem; }
  .mobile-overlay-header { margin-bottom: 2rem; }
}

/* Section vertical rhythm */
@media (max-width: 576px) {
  .section-pad    { padding: 56px 0; }
  .section-pad-sm { padding: 40px 0; }
}

/* Hero — compact on phones */
@media (max-width: 576px) {
  .home-hero { padding-top: 80px; min-height: 100svh; }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 2rem; max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-gold,
  .hero-actions .btn-gold-outline { width: 100%; justify-content: center; text-align: center; }
}

/* Page hero (inner pages) */
@media (max-width: 576px) {
  .page-hero { padding: 110px 0 56px; }
}

/* Stats bar single column on very small */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item:not(:last-child)::after { display: none; }
}

/* Stepper — compact on tiny screens */
@media (max-width: 400px) {
  .stepper-circle { width: 32px; height: 32px; font-size: 0.85rem; }
  .stepper-label  { font-size: 0.6rem; }
  .stepper-line   { margin: 0 4px; }
}

/* Brand grid — 2 cols on very small screens */
@media (max-width: 360px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Service estimate grid — 1 col on very small */
@media (max-width: 360px) {
  .service-est-grid { grid-template-columns: 1fr; }
}

/* Estimate card inner padding */
@media (max-width: 360px) {
  .estimate-card { padding: 1rem; }
}

/* Estimate CTA section button full-width on mobile */
@media (max-width: 576px) {
  .estimate-cta-section .btn-gold { width: 100%; justify-content: center; }
}

/* Contact info cards */
@media (max-width: 480px) {
  .contact-info-card { padding: 1.5rem; }
}

/* Value / service cards don't overflow */
@media (max-width: 400px) {
  .value-card, .commitment-card { padding: 1.5rem; }
}

/* Step nav buttons full-width on tiny */
@media (max-width: 400px) {
  .step-nav { flex-direction: column-reverse; gap: 10px; }
  .step-nav .btn-gold,
  .step-nav .btn-gold-outline { width: 100%; justify-content: center; }
}



/* WhatsApp float — shrink on tiny */
@media (max-width: 360px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
}

/* Footer bottom wrap */
@media (max-width: 400px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* Prevent horizontal overflow on all pages */
section, header, footer, main { max-width: 100vw; overflow-x: hidden; }