/* ==========================================================================
   Mayor Auto Repair LTD — brand stylesheet
   Palette: ink black · gold/amber accent · chrome silver
   ========================================================================== */

:root{
  --ink:#07090C;
  --ink-800:#0B0E13;
  --ink-700:#10151C;
  --ink-600:#161C25;
  --gold:#F5B915;
  --gold-light:#FFD66B;
  --gold-pale:#FFE9A3;
  --gold-deep:#C88A06;
  --chrome:#C9CFD6;
  --chrome-dim:#8B95A1;
  --line:#242C36;
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; scroll-padding-top:112px; }
@media (max-width:1023px){ html{ scroll-padding-top:80px; } }

body{ overflow-x:hidden; }

/* Selection + scrollbar --------------------------------------------------- */
::selection{ background:var(--gold); color:var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink-800); }
::-webkit-scrollbar-thumb{ background:#2A323D; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep); }

/* Accessibility ----------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:700; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* Layout helpers ---------------------------------------------------------- */
.section-pad{ padding-block:6rem; }
@media (min-width:1024px){ .section-pad{ padding-block:8rem; } }

.eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::after{ content:""; height:1px; width:3rem; background:linear-gradient(90deg,var(--gold),transparent); }

.section-title{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:clamp(2.5rem,6vw,4.25rem);
  line-height:.98; letter-spacing:.02em; margin-top:1rem; color:#fff;
}

.text-gradient-gold{
  background:linear-gradient(100deg,var(--gold-pale) 0%,var(--gold) 42%,var(--gold-deep) 72%,var(--gold-light) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Breadcrumbs — added for the multi-page split (not present on the single-
   page live site, whose styles.css this file otherwise matches exactly). */
.breadcrumb{ font-size:.8rem; color:var(--chrome-dim); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.breadcrumb li{ display:flex; align-items:center; gap:.4rem; }
.breadcrumb li:not(:last-child)::after{ content:"/"; color:var(--chrome-line); }
.breadcrumb a{ color:var(--gold); font-weight:600; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current="page"]{ color:var(--chrome); }

/* Header ------------------------------------------------------------------ */
#siteHeader.is-scrolled{ box-shadow:0 12px 40px -18px rgba(0,0,0,.95); }
#siteHeader.is-scrolled .backdrop-blur-xl{ background:rgba(7,9,12,.96); }

.leading-none{ line-height: 1; zoom: 0.8; }

.nav-link{
  position:relative; color:var(--chrome); transition:color .25s ease;
  padding-block:.35rem;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width .3s ease;
}
.nav-link:hover, .nav-link.is-active{ color:#fff; }
.nav-link:hover::after, .nav-link.is-active::after{ width:100%; }

.mobile-link{
  display:block; padding:.9rem 0; color:var(--chrome);
  border-bottom:1px solid rgba(255,255,255,.06); transition:color .2s;
}
.mobile-link:hover, .mobile-link:focus{ color:var(--gold); }

/* Buttons ----------------------------------------------------------------- */
.btn-gold{
  display:inline-flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 45%,var(--gold-deep));
  color:var(--ink); font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; border-radius:.5rem; position:relative; overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(245,185,21,.7);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.btn-gold::before{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transition:transform .6s ease;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(245,185,21,.8); filter:brightness(1.05); }
.btn-gold:hover::before{ transform:translateX(120%); }
.btn-gold:active{ transform:translateY(0); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border:1px solid var(--line); color:#fff; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; border-radius:.5rem;
  background:rgba(255,255,255,.02);
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.btn-ghost:hover{ border-color:var(--gold); background:rgba(245,185,21,.08); transform:translateY(-2px); }

.link-gold{ color:var(--gold); font-weight:600; font-size:.875rem; }
.link-gold:hover{ text-decoration:underline; }

/* Hero -------------------------------------------------------------------- */
.hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);
}

/* Marquee strip ----------------------------------------------------------- */
.marquee{ animation:scroll-x 38s linear infinite; }
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.strip-item{ white-space:nowrap; }
.dot{ height:5px; width:5px; border-radius:99px; background:var(--gold); flex:none; }

/* Service cards ----------------------------------------------------------- */
.service-card{
  position:relative; border:1px solid var(--line); border-radius:1rem;
  background:linear-gradient(160deg,var(--ink-700),var(--ink-800));
  padding:2rem 1.75rem; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-card::after{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),transparent); transition:width .45s ease;
}
.service-card:hover{
  transform:translateY(-6px); border-color:rgba(245,185,21,.45);
  box-shadow:0 26px 50px -30px rgba(245,185,21,.55);
}
.service-card:hover::after{ width:100%; }
.service-card h3{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:1.6rem; letter-spacing:.03em; color:#fff; margin-top:1.25rem;
}
.service-card p{ margin-top:.6rem; font-size:.925rem; line-height:1.65; color:var(--chrome-dim); }

.svc-icon{
  display:inline-flex; align-items:center; justify-content:center;
  height:3.25rem; width:3.25rem; border-radius:.75rem;
  background:rgba(245,185,21,.1); border:1px solid rgba(245,185,21,.28);
  color:var(--gold); transition:background .3s ease, color .3s ease;
}
.svc-icon svg{ height:1.6rem; width:1.6rem; }
.service-card:hover .svc-icon{ background:var(--gold); color:var(--ink); }

.service-card--cta{
  background:linear-gradient(140deg,var(--gold-light),var(--gold) 50%,var(--gold-deep));
  border-color:transparent; display:flex; flex-direction:column; justify-content:center;
}
.service-card--cta h3{ margin-top:0; color:var(--ink); }
.service-card--cta:hover{ box-shadow:0 26px 50px -25px rgba(245,185,21,.85); }

/* MOT panels -------------------------------------------------------------- */
.panel{
  border:1px solid var(--line); border-radius:1rem; padding:1.75rem;
  background:rgba(255,255,255,.02);
  transition:border-color .3s ease, background .3s ease;
}
.panel:hover{ border-color:rgba(245,185,21,.4); background:rgba(245,185,21,.04); }
.panel-num{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:2rem; color:rgba(245,185,21,.45); line-height:1;
}
.panel-title{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:1.5rem; letter-spacing:.03em; color:#fff; margin-top:.5rem;
}
.panel-copy{ margin-top:.6rem; font-size:.9rem; line-height:1.65; color:var(--chrome-dim); }

.check-item{
  position:relative; padding-left:2.25rem; color:var(--chrome); line-height:1.6;
}
.check-item::before{
  content:""; position:absolute; left:0; top:.15rem;
  height:1.4rem; width:1.4rem; border-radius:99px;
  background:rgba(245,185,21,.15); border:1px solid rgba(245,185,21,.4);
}
.check-item::after{
  content:""; position:absolute; left:.42rem; top:.5rem;
  height:.32rem; width:.62rem; border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold); transform:rotate(-45deg);
}

/* Why-us cards ------------------------------------------------------------ */
.why-card{
  border:1px solid var(--line); border-radius:1rem; padding:2rem 1.75rem;
  background:linear-gradient(160deg,var(--ink-700),var(--ink));
  transition:border-color .3s ease, transform .3s ease;
}
.why-card:hover{ border-color:rgba(245,185,21,.4); transform:translateY(-4px); }
.why-card h3{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:1.5rem; letter-spacing:.03em; color:#fff; margin-top:1.25rem;
}
.why-card p{ margin-top:.6rem; font-size:.9rem; line-height:1.65; color:var(--chrome-dim); }
.why-icon{
  display:inline-flex; align-items:center; justify-content:center;
  height:3rem; width:3rem; color:var(--gold);
}
.why-icon svg{ height:2.25rem; width:2.25rem; }

.pill{
  display:inline-block; border:1px solid var(--line); border-radius:99px;
  padding:.5rem 1.1rem; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--chrome);
}

/* FAQ ----------------------------------------------------------------------- */
.faq-item{
  border:1px solid var(--line); border-radius:1rem;
  background:rgba(255,255,255,.02); overflow:hidden;
  transition:border-color .3s ease;
}
.faq-item:hover{ border-color:rgba(245,185,21,.4); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:1.35rem 1.6rem;
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:1.2rem; letter-spacing:.02em; color:#fff;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; color:var(--gold); font-size:1.6rem; line-height:1;
  flex:none; transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-answer{
  padding:0 1.6rem 1.4rem; font-size:.9rem; line-height:1.7; color:var(--chrome-dim);
}

/* Reviews ----------------------------------------------------------------- */
.google-badge{
  display:flex; align-items:center; gap:1rem; width:100%;
  border:1px solid var(--line); border-radius:1rem;
  background:var(--ink-700); padding:1.1rem 1.5rem;
}
@media (min-width:1024px){ .google-badge{ width:auto; min-width:30rem; } }

.stars{ color:var(--gold); letter-spacing:.15em; font-size:1rem; }

.review-card{
  border:1px solid var(--line); border-radius:1rem; padding:2rem;
  background:linear-gradient(160deg,var(--ink-700),var(--ink-800));
  position:relative; transition:border-color .3s ease, transform .3s ease;
}
.review-card::before{
  content:"\201C"; position:absolute; top:.5rem; right:1.5rem;
  font-family:Georgia,serif; font-size:5rem; line-height:1; color:rgba(245,185,21,.14);
}
.review-card:hover{ border-color:rgba(245,185,21,.35); transform:translateY(-4px); }
.review-card blockquote{ font-size:.95rem; line-height:1.75; }

.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.5rem; width:2.5rem; border-radius:99px; flex:none;
  background:rgba(245,185,21,.15); border:1px solid rgba(245,185,21,.35);
  color:var(--gold); font-weight:700;
}

/* Placeholder panels (case studies) — added for the multi-page split, same
   pattern as the source site's honestly-marked "coming soon" cards. */
.placeholder-panel{
  border:1.5px dashed var(--chrome-line); border-radius:1rem; padding:2rem;
  background:var(--ink-700); text-align:center;
  transition:border-color .3s ease;
}
.placeholder-panel:hover{ border-color:rgba(245,185,21,.4); }
.placeholder-icon{
  display:inline-flex; align-items:center; justify-content:center;
  height:3rem; width:3rem; border-radius:99px; margin:0 auto;
  background:var(--ink-600); color:var(--chrome-dim);
}
.placeholder-icon svg{ height:1.5rem; width:1.5rem; }
.placeholder-panel h2{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:1.35rem; letter-spacing:.02em; color:#fff; margin-top:1rem;
}
.placeholder-panel p{ margin-top:.5rem; font-size:.875rem; line-height:1.6; color:var(--chrome-dim); }

/* Contact ----------------------------------------------------------------- */
.info-card{
  display:flex; gap:1.1rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:1rem; padding:1.6rem;
  background:var(--ink-700); transition:border-color .3s ease;
}
.info-card:hover{ border-color:rgba(245,185,21,.35); }
.info-icon{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  height:2.75rem; width:2.75rem; border-radius:.7rem;
  background:rgba(245,185,21,.1); border:1px solid rgba(245,185,21,.28); color:var(--gold);
}
.info-icon svg{ height:1.35rem; width:1.35rem; }
.info-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;
  color:var(--chrome-dim); margin-bottom:.45rem;
}
.hours-row{ display:flex; justify-content:space-between; gap:1.5rem; }
.hours-row dt{ color:var(--chrome-dim); }
.hours-row dd{ color:#fff; font-weight:600; }
.hours-row.is-today dt, .hours-row.is-today dd{ color:var(--gold); }

.status-open{ color:#4ADE80; }
.status-closed{ color:#F87171; }

/* Form -------------------------------------------------------------------- */
.field-label{
  display:block; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--chrome-dim); margin-bottom:.5rem;
}
.field{
  width:100%; border-radius:.6rem; border:1px solid var(--line);
  background:var(--ink); color:#fff; padding:.85rem 1rem; font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder{ color:#7B8695; }
.field:focus{
  border-color:var(--gold); outline:none;
  box-shadow:0 0 0 3px rgba(245,185,21,.16);
}
.field.is-invalid{ border-color:#F87171; }
select.field{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:1.1rem;
  padding-right:2.5rem;
}
select.field option{ background:var(--ink); color:#fff; }
.field-error{
  display:none; margin-top:.4rem; font-size:.8rem; color:#F87171;
}
.field-error.is-visible{ display:block; }

#formStatus.is-success{ display:block; background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.35); color:#86EFAC; }
#formStatus.is-error{ display:block; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); color:#FCA5A5; }

/* Footer ------------------------------------------------------------------ */
.footer-head{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:1.15rem; letter-spacing:.12em; text-transform:uppercase; color:#fff;
}
.footer-link{ color:var(--chrome-dim); transition:color .2s, padding-left .2s; }
.footer-link:hover{ color:var(--gold); padding-left:.3rem; }
.social{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.4rem; width:2.4rem; border-radius:.6rem;
  border:1px solid var(--line); color:var(--chrome);
  transition:border-color .25s, color .25s, background .25s;
}
.social:hover{ border-color:var(--gold); color:var(--gold); background:rgba(245,185,21,.08); }

/* Mobile sticky call bar --------------------------------------------------- */
.mobile-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  display:flex; gap:.6rem; padding:.7rem;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(7,9,12,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.mobile-bar-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:.55rem; padding:.85rem; font-size:.8rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.mobile-bar-btn--gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); color:var(--ink); }
.mobile-bar-btn--ghost{ border:1px solid var(--line); color:#fff; }
@media (max-width:639px){ body{ padding-bottom:4.75rem; } }

/* Scroll reveal ----------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee{ animation:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Print ------------------------------------------------------------------- */
@media print{
  #siteHeader,.mobile-bar,iframe,.marquee{ display:none !important; }
  body{ background:#fff; color:#000; }
}