/* =========================================================
   Premier Mobile Auto Care — Clean Luxury Styles (Black/Blue)
   Dealership header: centered logo + centered tabs under
========================================================= */

/* ---------- Brand tokens ---------- */
:root{
  --bg: #000000;
  --panel: #0b0b0d;
  --panel2: #050506;

  --text: #ffffff;
  --muted: #bfc3c7;
  --muted2: rgba(191,195,199,.88);

  --brand: #2f6cff;
  --brand2: #1f57ff;

  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.06);
  --shadow: 0 14px 38px rgba(0,0,0,.32);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{
  animation: pageFade .55s ease .05s both;
height:100%}

body{
  animation: pageFade .55s ease .05s both;

  margin:0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(47,108,255,.14), transparent 55%),
    radial-gradient(900px 600px at 0% 20%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height: 1.6;
  letter-spacing: .15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 16px}

/* ---------- Header (dealership style) ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(18px);
  border-bottom:1px solid var(--border2);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 0 14px;
  gap:18px;
  position: relative;
}

/* Center stack: logo/name, then tabs under */
.brand-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  min-width: 0;
  text-align:center;
}

/* Brand row */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

/* Bigger + bolder logo on desktop only */
.brand-logo{
  height:88px;
  width:auto;
  border-radius:0;
  border:none;
  background:transparent;
  display:block;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) saturate(1.12) contrast(1.08);
}

/* Subtle logo hover animation */
.brand:hover .brand-logo{
  transform: scale(1.03);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) saturate(1.18) contrast(1.10);
  opacity: .98;
}

.brand-text{display:flex; flex-direction:column; line-height:1.18}
.brand-name{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.brand-sub{
  margin-top:4px;
  color: var(--muted2);
  font-size: 12px;
  letter-spacing: .15px;
  white-space: nowrap;
}


/* Thin divider line under the logo (between logo and tabs) */
.logo-divider{
  width: min(720px, 92%);
  height: 1px;
  margin: 2px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* Tabs under logo */
.nav{
  display:flex;
  flex-wrap:wrap;
}
.nav-under{
  gap: 20px;
  justify-content:center;
  align-items: baseline; /* aligns nav with text baseline */
}
.nav-under a{
  color: rgba(229,231,235,.86);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .25px;
  line-height: 1.1;
}
.nav-under a:hover{color: var(--text)}

/* Active tab underline */
.nav-under a.active{
  color: var(--text);
  position: relative;
}
.nav-under a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:2px;
  background: var(--brand);
  border-radius: 2px;
}

/* Button in nav baseline alignment */
.nav-under .btn{
  padding: 10px 14px;
  font-size: .95rem;
  transform: translateY(-1px);
}

/* Mobile toggle stays right */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position:absolute;
  right:16px;
  top:18px;
}
.nav-toggle span{display:block; height:2px; margin:6px 10px; background:var(--text); opacity:.9}

/* Mobile nav panel (script.js toggles class "open") */
.mobile-nav{
  display:none;
  padding:10px 0 16px;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block; padding:12px 0;
  color:var(--muted2);
  border-top:1px solid var(--border2);
}
.mobile-nav a:hover{color:var(--text)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .3px;
  border:1px solid transparent;
  transition: transform .08s ease, opacity .08s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform: translateY(1px)}
.btn-full{width:100%}

.btn-gold{
  background: var(--brand);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
.btn-gold:hover{background: var(--brand2)}

.btn-ghost{
  color:var(--text);
  background: transparent;
  border-color: rgba(255,255,255,.18);
}
.btn-ghost:hover{border-color: rgba(255,255,255,.35)}

/* ---------- Hero ---------- */
.hero{padding: 44px 0 24px}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.hero h1{
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  line-height: 1.08;
  margin:0 0 12px;
  letter-spacing:-.02em;
  font-weight: 800;
  max-width: 18ch;
}
.hero p{
  color:var(--muted2);
  margin:0 0 16px;
  line-height:1.65;
  max-width: 58ch;
  font-size: 1.02rem;
}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}

/* Trustbar */
.trustbar{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top: 18px;
}
.trustitem{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.trusttitle{
  font-weight: 800;
  color: var(--text);
  letter-spacing: .2px;
}
.trustsub{
  margin-top: 4px;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.5;
}


/* ---------- Service Area Map ---------- */
.service-map{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.service-map iframe{
  width: 100%;
  height: 260px; /* more presence */
  border: 0;
  display: block;

  /* luxury grayscale treatment */
  filter: grayscale(1) contrast(1.06) brightness(.92);
}

.service-map-overlay{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}


/* ---------- Sections ---------- */
.section{padding: 84px 0}
.section.alt{
  background: var(--panel2);
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
}
.section-head{margin-bottom:22px}
.section-head.left{text-align:left}
.section-head h2{
  margin:0 0 8px;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  letter-spacing:-.02em;
  font-weight: 800;
}
.section-head p{
  margin:0;
  color:var(--muted2);
  line-height:1.7;
  max-width: 72ch;
  font-size: 1.02rem;
}

/* ---------- Grid ---------- */
.grid{display:grid; gap:12px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr))}

/* ---------- Cards ---------- */
.card{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.card-title{font-weight:800; margin-bottom:6px; letter-spacing:.2px}
.card-text{color:var(--muted2); margin:0 0 10px; line-height:1.7}

.list{margin:0; padding-left:18px; color:var(--muted2)}
.list li{margin:6px 0; line-height:1.55}

/* Service icons */
.card-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.icon-badge{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(47,108,255,.14);
  border: 1px solid rgba(47,108,255,.30);
}
.icon-badge svg{
  width: 20px;
  height: 20px;
  fill: rgba(47,108,255,.95);
}

/* ---------- Callout ---------- */
.callout{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(47,108,255,.22);
  border-radius:18px;
  padding:16px;
}
.callout-title{font-weight:800}
.callout-text{color:var(--muted2); margin-top:4px; line-height:1.6}

/* ---------- Steps / Process ---------- */
.step{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.step-num{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(47,108,255,.16);
  border: 1px solid rgba(47,108,255,.35);
  color: var(--text);
  font-weight: 800;
}
.step-title{margin-top:10px; font-weight:800}
.step-text{margin-top:6px; color:var(--muted2); line-height:1.7}

/* ---------- Reviews ---------- */
.quote{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}
.stars{color: rgba(255,255,255,.9); letter-spacing:2px; font-weight:800}
.quote p{margin:10px 0 0; color:var(--muted2); line-height:1.7; font-style: italic}
.quote-by{margin-top:10px; color:var(--text); font-weight:700; font-size:13px}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:10px}
.faq-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px 14px;
}
.faq-item summary{
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  color: rgba(47,108,255,.95);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.faq-item[open] summary::after{content:"–"}
.faq-body{
  animation: pageFade .55s ease .05s both;

  margin-top: 10px;
  color: var(--muted2);
  line-height: 1.75;
}

/* ---------- Forms ---------- */
.contact-wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.contact-form label{display:block; margin-bottom:12px}
label span{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  color: var(--text);
  font-size: 13px;
  letter-spacing: .2px;
}
input, select, textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  padding:12px 12px;
  outline:none;
  font-family: inherit;
  font-size: 1rem;
}
textarea{resize:vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(47,108,255,.60);
  box-shadow: 0 0 0 4px rgba(47,108,255,.15);
}

.contact-card{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.contact-card .contact-lines{margin-top:12px; color:var(--muted2); line-height:1.9}
.k{color:var(--muted2); font-weight:700}
.v{color:var(--text)}

.divider{
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  margin:14px 0;
}

.small{color:var(--muted2); line-height:1.7; font-size:13px}
.form-status{margin-top:12px; color:var(--muted2); min-height:18px}

/* ---------- Footer ---------- */
.footer{
  padding:18px 0;
  border-top:1px solid var(--border2);
  background: rgba(0,0,0,.78);
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.footer-brand{font-weight:800; letter-spacing:.2px}
.footer-small{color:var(--muted2); font-size:13px; margin-top:2px}
.footer-right{display:flex; gap:14px; flex-wrap:wrap}
.footer-right a{color:var(--muted2); font-weight:700; font-size:13px}
.footer-right a:hover{color:var(--text)}


/* ---------- Custom Select (fully styled dropdown) ---------- */
/* Usage: add data-custom-select to a <select> */
.select-wrap{
  position: relative;
}
.select-native{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important;
  width:0 !important;
}

.select-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  user-select:none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.select-trigger:hover{
  background: rgba(255,255,255,.055);
}
.select-trigger:focus{
  outline:none;
  border-color: rgba(47,108,255,.60);
  box-shadow: 0 0 0 4px rgba(47,108,255,.15);
}

.select-caret{
  width:10px;
  height:10px;
  border-right:2px solid rgba(229,231,235,.75);
  border-bottom:2px solid rgba(229,231,235,.75);
  transform: rotate(45deg);
  transition: transform .14s ease;
  margin-top:-2px;
}
.select-wrap.open .select-caret{
  transform: rotate(-135deg);
  margin-top:2px;
}

.select-menu{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 8px);
  background: rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  overflow:hidden;
  z-index: 80;
  display:none;
}
.select-wrap.open .select-menu{display:block}

.select-search{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.select-search input{
  border-radius:12px;
  padding:10px 12px;
}

.select-options{
  max-height: 260px;
  overflow:auto;
  padding: 6px;
}
.select-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  color: rgba(229,231,235,.92);
  cursor:pointer;
  transition: background .12s ease, color .12s ease;
}
.select-option:hover{
  background: rgba(47,108,255,.16);
  color: var(--text);
}
.select-option[aria-selected="true"]{
  background: rgba(47,108,255,.22);
  color: var(--text);
}
.select-check{
  opacity: .0;
  font-weight: 800;
}
.select-option[aria-selected="true"] .select-check{
  opacity: 1;
}


/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr}
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .trustbar{grid-template-columns: 1fr}
  .contact-wrap{grid-template-columns: 1fr}
  .brand-logo{height:72px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45))}
  .nav-toggle{top:16px;}
}

@media (max-width: 760px){
  .service-map iframe{height:220px;}

  .nav-under{display:none}
  .nav-toggle{display:block}
  .mobile-nav.open{display:block}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .brand-logo{height:58px; filter: none}
}


/* Page load fade-in */
@keyframes pageFade{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}
/* ======================================
   Instagram sizing fix (prevent huge)
====================================== */
.ig-link{
  padding: 12px 12px !important;
  border-radius: 16px !important;
}
.ig-icon{
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
}
.ig-title{ font-size: 14px !important; }
.ig-sub{ font-size: 12px !important; }

.ig-link.compact{
  padding: 10px 12px !important;
}
.ig-link.compact .ig-sub{ display:none !important; }

/* Instagram under map (Home only) */
.ig-under-map{
  margin-top: 12px;
}

/* ======================================
   CUSTOM SELECT FIX (Request + Reviews)
====================================== */
[data-custom-select]{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #0b0b0d;
  color: #f9fafb;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 44px 12px 14px;
  background-image:
    linear-gradient(45deg, transparent 50%, #e5e7eb 50%),
    linear-gradient(135deg, #e5e7eb 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 4px),
    calc(100% - 16px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

[data-custom-select]:focus{
  outline: none;
  border-color: rgba(47,108,255,.6);
  box-shadow: 0 0 0 3px rgba(47,108,255,.18);
}

[data-custom-select] option{
  background-color: #0b0b0d;
  color: #f9fafb;
}

/* ==============================
   Home Instagram Size Reduction
============================== */
.ig-under-map{
  max-width: 420px;
}

.ig-under-map.ig-link{
  padding: 8px 10px !important;
}

.ig-under-map .ig-icon{
  width: 32px !important;
  height: 32px !important;
}

.ig-under-map .ig-title{
  font-size: 13px !important;
}

.ig-under-map .ig-sub{
  font-size: 11px !important;
}

/* ==============================
   Home Instagram Text Only
============================== */
.ig-text-only{
  margin-top: 10px;
}

.ig-text-only .ig-title{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.ig-link-text{
  font-size: 12px;
  color: var(--brand);
  text-decoration: none;
}

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

/* ==============================
   Request Service Layout Fix
============================== */
.contact-grid{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 24px;
  align-items: start;
}

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

/* ==============================
   Footer LLC Text (Bottom Right)
============================== */
.footer-legal{
  text-align: right;
}

.footer-llc{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}

.footer-tagline{
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

/* ==============================
   Professional Instagram Link
============================== */
.ig-text-only{
  margin-top: 14px;
  font-size: 13px;
}

.ig-text-only .ig-title{
  font-weight: 600;
  letter-spacing: .2px;
  margin-bottom: 4px;
}

.ig-link-text{
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.ig-link-text:hover{
  color: var(--text);
  text-decoration: underline;
}

/* ==============================
   Get in Touch Typography Match
============================== */
.contact-typography{
  font-size: 14px;
  line-height: 1.6;
}

.contact-typography .card-title{
  font-size: 16px;
  font-weight: 700;
}

.contact-typography .k{
  font-weight: 600;
}

.contact-typography .v{
  font-weight: 500;
  color: var(--text);
}
/* ==============================
   Home Hours + Instagram polish
============================== */
.hours-days .hours-row{
  padding: 9px 0;
  font-size: 13px;
}
.hours-days .hours-row span:first-child{
  color: rgba(229,231,235,.88);
  font-weight: 700;
}
.hours-days .hours-row span:last-child{
  color: var(--muted2);
  font-weight: 700;
}

/* Professional Instagram block (Home) */
.ig-prof{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ig-prof-label{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(229,231,235,.70);
  margin-bottom: 6px;
}
.ig-prof-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(229,231,235,.92);
  text-decoration: none;
}
.ig-prof-link:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==============================
   Get in touch typography match
============================== */
.contact-card .card-title{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
}
.contact-card .card-text{
  font-size: 13px;
  line-height: 1.65;
}
.contact-card .k{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(229,231,235,.65);
  font-weight: 800;
}
.contact-card .v{
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,244,246,.96);
}

/* ==============================
   Professional Instagram (Home)
============================== */
.ig-prof{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ig-prof-label{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(229,231,235,.65);
  margin-bottom: 6px;
}
.ig-prof-link{
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,244,246,.95);
  text-decoration: none;
}
.ig-prof-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==============================
   Get In Touch Typography Match
============================== */
.contact-card{
  font-family: inherit;
}
.contact-card .card-title{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
}
.contact-card .card-text{
  font-size: 13px;
  line-height: 1.65;
}
.contact-card .contact-lines .k{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(229,231,235,.6);
}
.contact-card .contact-lines .v{
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,244,246,.95);
}

/* ==============================
   Footer cleanup (remove left text)
============================== */
.footer-left{ display:none; }
.footer-inner{ justify-content:flex-end; }

/* ==============================
   Get in Touch – Final Match
============================== */
.contact-card{
  background: rgba(11,18,32,.70);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.contact-card .card-title{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

.contact-card .card-text{
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.6;
  margin-bottom: 12px;
}

.contact-card .contact-lines{
  display: grid;
  gap: 10px;
}

.contact-card .contact-lines .k{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(229,231,235,.65);
}

.contact-card .contact-lines .v{
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,244,246,.96);
}

/* ==============================
   Home Hours / Call / CTA Alignment
============================== */
.side-stack{
  display: grid;
  gap: 14px;
}

.side-stack .card-title{
  margin-bottom: 4px;
}

.side-stack .hours-days{
  margin-top: 0;
}

.side-stack .btn{
  width: 100%;
  justify-content: center;
}

.side-stack .nav-call,
.side-stack .phone-display{
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

/* ==============================
   Home sidebar alignment polish
============================== */
.home-info-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.home-info-card .divider{ margin: 6px 0; }

.phone-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(243,244,246,.96);
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration:none;
}
.phone-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(47,108,255,.30);
}

/* ==============================
   Global Logo Size Increase
============================== */
.brand-logo{
  height: 130px;
}

@media (max-width: 980px){
  .brand-logo{
    height: 100px;
  }
}

@media (max-width: 760px){
  .brand-logo{
    height: 80px;
  }
}

/* ==============================
   EXTRA LARGE LOGO (DEALERSHIP STYLE)
============================== */
.brand-logo{
  height: 180px;
}

@media (max-width: 1200px){
  .brand-logo{
    height: 150px;
  }
}

@media (max-width: 980px){
  .brand-logo{
    height: 120px;
  }
}

@media (max-width: 760px){
  .brand-logo{
    height: 90px;
  }
}

/* ==============================
   ULTRA LARGE LOGO (3x SCALE)
============================== */
.brand-logo{
  height: 300px;
}

@media (max-width: 1400px){
  .brand-logo{
    height: 240px;
  }
}

@media (max-width: 980px){
  .brand-logo{
    height: 180px;
  }
}

@media (max-width: 760px){
  .brand-logo{
    height: 120px;
  }
}

/* ==============================
   3X LOGO + REMOVE GAP TO NAV
============================== */
.brand-logo{
  height: 300px;
  margin-bottom: 0 !important;
}

/* Pull nav closer to logo */
.header-inner{
  padding-bottom: 0 !important;
}

.nav.nav-under{
  margin-top: -12px;
}

/* Responsive adjustments */
@media (max-width: 1400px){
  .brand-logo{ height: 240px; }
  .nav.nav-under{ margin-top: -10px; }
}

@media (max-width: 980px){
  .brand-logo{ height: 180px; }
  .nav.nav-under{ margin-top: -6px; }
}

@media (max-width: 760px){
  .brand-logo{ height: 120px; }
  .nav.nav-under{ margin-top: 0; }
}