:root {
  --bg-base: #060708;
  --panel: #121416;
  --panel-alt: #1a1d20;
  --text: #f3efe9;
  --muted: #d8d3ce;
  --accent: #f2b76b;
  --red: #b71b1d;
  --red-bright: #d3272d;
  --red-dark: #5a0c0d;
  --line: rgba(255, 255, 255, 0.2);
  --shadow: rgba(0, 0, 0, 0.45);
  --steel: #dfe0df;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: "Roboto", sans-serif;
}

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

/* Sitewide default for plain inline text links (inside paragraphs, list
   items, etc.). Anything with a more specific class — .nav-link, .cta-button,
   .business-footer a, .related-services a — already overrides this and is
   unaffected; this only catches links that would otherwise fall back to the
   browser's default blue/underline. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
  color: #fff;
}

.page-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    #060708;
}

.send-confirmation-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(1420px, calc(100% - 48px));
  margin: 18px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(105, 176, 115, 0.8);
  background: rgba(18, 31, 20, 0.9);
  color: #e9ffe7;
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}

.page-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0 auto 18px;
  padding: 10px 18px;
  width: fit-content;
  background: rgba(15, 17, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  background: rgba(255,255,255,0.06);
  color: #fff;
  transform: translateY(-1px);
}

.nav-link.active {
  background: linear-gradient(180deg, rgba(185,28,28,0.95), rgba(109,12,12,0.98));
  color: #fff;
}

/* Request Service stays gold-text everywhere, current page or not, so it
   reads as the one call-to-action item in the menu at all times. */
.nav-link-request {
  color: var(--accent);
}

.nav-link.nav-link-request.active {
  color: var(--accent);
}

.section {
  width: min(1420px, calc(100% - 48px));
  margin: 0 auto;
}

.top-brand {
  padding-top: 38px;
  padding-bottom: 18px;
}

/* Sticky header and hide-on-scroll behavior */
.top-brand.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 10px 18px;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transition: transform 0.26s ease, box-shadow 0.26s ease, background 0.26s ease;
  z-index: 60;
}

.top-brand.hidden {
  transform: translateY(-120%);
}

/* When header is sticky, add top spacing to page content */
.has-fixed-header .page-shell {
  padding-top: 76px; /* matches expected header height */
}

.brand-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 660px;
  background: rgba(11, 11, 12, 0.82);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), inset 0 0 22px rgba(255,255,255,0.03);
}

.brand-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04), transparent 30%, transparent 70%, rgba(255,255,255,0.04)),
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.08), transparent 40%),
    linear-gradient(180deg, rgba(0,0,0,0.66), rgba(0,0,0,0.28));
}

.brand-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  transform: translateY(-10px);
}

.brand-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.brand-heading .logo-text,
.brand-heading .garage-line {
  display: block;
}

.logo-text {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(5rem, 11vw, 18rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 0 20px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.7);
  transform: rotate(-2deg);
  font-style: italic;
}

.garage-line {
  margin-top: 8px;
}

.garage-red {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: clamp(2.5rem, 5vw, 6rem);
  color: #f7f0ea;
  position: relative;
}

.garage-red::before,
.garage-red::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 7px;
  background: var(--red-bright);
  top: 50%;
  transform: translateY(-50%);
}

.garage-red::before {
  left: -26%;
}

.garage-red::after {
  right: -26%;
}

.tagline-row {
  margin-top: 14px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.6rem, 2vw, 2.8rem);
  letter-spacing: 0.1em;
  color: var(--text);
  text-transform: uppercase;
}

.star {
  color: var(--red-bright);
  font-size: 1.1em;
  margin: 0 0.15em;
}

.service-strip {
  margin-top: 10px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.9rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-brief {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.8rem, 1.3vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}

.trust-brief span:nth-child(odd) {
  color: #f5f1ee;
}

.trust-brief span:nth-child(even) {
  color: var(--red-bright);
}

.feature-banner {
  padding: 22px 0 18px;
}

.feature-headline {
  text-align: center;
  background: rgba(9,9,10,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 44px 22px 48px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.small-label,
.available-callout,
.date-block,
.repair-line,
.red-badge {
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.small-label {
  display: block;
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 600;
}

.feature-headline h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(3rem, 7vw, 8rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: #f5f0ed;
  font-weight: 700;
  text-shadow: 0 7px 16px rgba(0,0,0,0.45);
}

.available-callout {
  display: inline-block;
  margin-top: 12px;
  font-size: clamp(2rem, 5vw, 6.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--red-bright);
}

.date-block {
  display: inline-block;
  margin-top: 18px;
  width: min(100%, 1150px);
  padding: 26px 12px 18px;
  background: linear-gradient(180deg, rgba(152,18,21,0.85), rgba(116,10,13,0.9));
  border: 3px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.28);
  font-size: clamp(3rem, 7vw, 10rem);
  line-height: 0.9;
  font-weight: 700;
  color: #f5f0ee;
}

.repair-line {
  margin-top: 20px;
  font-size: clamp(1.4rem, 2vw, 3rem);
  letter-spacing: 0.06em;
  color: var(--text);
  word-spacing: 0.18em;
}

.feature-headline p {
  margin-top: 14px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.info-cards {
  padding-top: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
}

.service-card {
  min-height: 260px;
  background: rgba(18, 20, 22, 0.94);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 22px 16px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.feature-card {
  background: rgba(18, 20, 22, 0.94);
}

.icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  position: relative;
  filter: brightness(1.1);
}

.icon-electrical::before,
.icon-electrical::after,
.icon-leak::before,
.icon-leak::after,
.icon-recharge::before,
.icon-recharge::after,
.icon-compressor::before,
.icon-compressor::after,
.icon-electrical-system::before,
.icon-electrical-system::after,
.icon-blowing-hot-air::before,
.icon-blowing-hot-air::after {
  content: "";
  position: absolute;
}

.icon-electrical::before {
  inset: 8px 18px 8px 18px;
  border: 4px solid rgba(255,255,255,0.88);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}

.icon-electrical::after {
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icon-leak::before {
  inset: 13px 16px 13px 16px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.9);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

.icon-leak::after {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.9);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icon-recharge::before {
  width: 58px;
  height: 18px;
  border-radius: 10px;
  border: 4px solid rgba(255,255,255,0.9);
  left: 2px;
  top: 22px;
}

.icon-recharge::after {
  width: 10px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  left: 26px;
  top: 10px;
}

.icon-compressor::before {
  width: 54px;
  height: 54px;
  border: 4px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  left: 4px;
  top: 4px;
}

.icon-compressor::after {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: 22px;
  top: 22px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 8px rgba(255,255,255,0.08), 0 0 0 18px rgba(255,255,255,0.04);
}

.icon-electrical-system::before {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  left: 9px;
  top: 9px;
}

.icon-electrical-system::after {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  left: 20px;
  top: 20px;
  box-shadow: -18px 0 0 rgba(255,255,255,0.9), 18px 0 0 rgba(255,255,255,0.9), 0 -18px 0 rgba(255,255,255,0.9), 0 18px 0 rgba(255,255,255,0.9);
}

.icon-blowing-hot-air::before {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(255,255,255,0.9);
  left: 5px;
  top: 6px;
  border-radius: 50%;
}

.icon-blowing-hot-air::after {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  left: 22px;
  top: 22px;
  box-shadow: 12px 12px 0 rgba(255,255,255,0.9), -12px 12px 0 rgba(255,255,255,0.9), 0 -12px 0 rgba(255,255,255,0.9);
}

.service-card h3 {
  margin: 0 0 12px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.94rem, 1vw, 1.1rem);
  letter-spacing: 0.08em;
  line-height: 1.08;
  text-transform: uppercase;
  color: #f6f1ee;
}

.service-card p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.service-spotlight {
  padding-top: 26px;
}

.service-spotlight-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: rgba(10,10,11,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}

.service-copy {
  padding: 48px 36px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.red-badge {
  display: inline-block;
  margin-bottom: 18px;
  font-size: clamp(1.2rem, 2vw, 3rem);
  font-weight: 700;
  color: var(--red-bright);
  letter-spacing: 0.06em;
}

.service-copy h3 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(2.5rem, 6vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #f7f2ef;
}

.service-copy p {
  margin-top: 16px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.1rem, 1.9vw, 2.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.service-visual {
  position: relative;
  min-height: 280px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.07), transparent 46%), rgba(8,9,10,1);
  border-left: 1px solid rgba(255,255,255,0.1);
}

.gauge-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

.gauge {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 10px solid rgba(255,255,255,0.74);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0) 52%);
  box-shadow: inset 0 0 0 8px rgba(10,10,12,0.75), 0 0 20px rgba(255,255,255,0.08);
  position: relative;
}

.gauge::before,
.gauge::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.22);
}

.gauge::after {
  inset: 42px;
  background: linear-gradient(160deg, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  border: 0;
  box-shadow: inset 0 0 0 8px rgba(0,0,0,0.6);
}

.gauge-left {
  border-color: rgba(255,255,255,0.8);
}

.gauge-right {
  border-color: rgba(255,0,0,0.9);
}

.contact-strip {
  padding-top: 28px;
}

.contact-panel {
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(4,4,5,0.96);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Oswald", sans-serif;
}

.pin {
  font-size: 2rem;
}

.panel-head h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.contact-panel p {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.1rem, 2vw, 2.2rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.map-cta {
  padding-top: 24px;
}

.map-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(8,10,11,0.9));
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  min-height: 640px;
}

.map-route {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: rgba(12, 14, 15, 0.95);
}

.map-route iframe {
  width: 100%;
  height: 100%;
  min-height: 640px;
  border: 0;
  display: block;
  filter: grayscale(0.2) contrast(1.1) brightness(0.9);
}

.directions-box {
  background: rgba(9, 10, 12, 0.96);
  padding: 28px 20px 24px;
  border-left: 1px solid rgba(255,255,255,0.12);
}

.directions-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.pin-big {
  font-size: 2.4rem;
}

.directions-header h3 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f7f2ef;
}

.directions-box ol {
  list-style: none;
  counter-reset: steps;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 14px;
}

.directions-box li {
  position: relative;
  padding: 0 0 0 58px;
  min-height: 52px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 2.1rem);
  line-height: 1.2;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-bottom: 14px;
}

.directions-box li::before {
  counter-increment: steps;
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-bright);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
}

.address-line {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.8vw, 2rem);
  color: #f5f1ee;
}

.pin-small {
  font-size: 1.8rem;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 16px 18px;
  border: 2px solid rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(175, 24, 24, 0.9), rgba(114, 12, 12, 0.96));
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.7rem);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button.secondary {
  background: rgba(18, 20, 22, 0.96);
  border-color: rgba(255,255,255,0.16);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.22);
}

.garage-showcase {
  padding-top: 30px;
  padding-bottom: 18px;
}


.site-footer {
  padding-bottom: 34px;
}

.business-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 22px;
  padding: 18px 16px;
  background: rgba(11, 11, 12, 0.96);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-family: "Oswald", sans-serif;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.business-footer strong {
  display: block;
  color: #fff;
  font-size: 1.1rem;
}

.business-footer span {
  display: block;
  font-size: 0.82rem;
}

.business-footer a {
  color: #f8f3ef;
  text-decoration: none;
}

.business-footer a.footer-request-link {
  color: var(--accent);
}

.business-footer a:hover {
  text-decoration: underline;
}

.request-copy a {
  color: #f8f3ef;
  text-decoration: underline;
}

/* Reviews section styling */
.reviews-section {
  margin-top: 28px;
  margin-bottom: 18px;
}
.reviews-embed {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}
.reviews-embed a {
  color: var(--text);
}

@media (max-width: 760px) {
  .reviews-embed { width: calc(100% - 24px); }
}

/* Make reviews embed more compact */
.reviews-embed {
  padding: 12px;
  gap: 8px;
}
.reviews-embed div[style] {
  aspect-ratio: 5/1.2; /* shorter strip */
  max-height: 110px;
}

/* Social icons in footer */
.social-icons {
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top:8px;
}
.social-icons a {
  display:inline-flex;
  width:34px;
  height:34px;
  border-radius:6px;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  text-decoration:none;
}
.social-icons svg { width:18px; height:18px; fill:currentColor; }

/* Pricing page styles */
.pricing-hero { padding:28px 0; text-align:center; }

.pricing-hero h1 {
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  margin: 0.83em 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.pricing-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(260px,1fr));
  gap:14px;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto 28px;
}
.price-card {
  width:100%;
  background: rgba(18,20,22,0.95);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  color:var(--text);
  text-align:left;
  padding:18px;
  cursor:pointer;
  font:inherit;
  transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.price-card:hover,
.price-card:focus-visible {
  transform:translateY(-2px);
  border-color:rgba(251,191,36,0.55);
  background:rgba(25,28,31,0.98);
}
.price-card:focus-visible,
.service-modal button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.price-card-main {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.price-name { margin:0;font-family:Oswald, sans-serif;font-size:1rem;text-transform:uppercase; }
.price { font-weight:700;color:var(--accent); }
.price-card-action {
  display:block;
  margin-top:14px;
  color:var(--accent);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.price-card-action span { display:inline-block; margin-left:5px; transition:transform 0.2s ease; }
.price-card:hover .price-card-action span { transform:translateX(4px); }
.service-modal {
  width:min(620px, calc(100% - 32px));
  padding:0;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  background:transparent;
  color:var(--text);
  box-shadow:0 24px 80px rgba(0,0,0,0.55);
}
.service-modal::backdrop { background:rgba(5,7,8,0.78); backdrop-filter:blur(5px); }
.service-modal-inner { position:relative; padding:38px 40px 32px; background:linear-gradient(145deg, #202427, #111416); }
.service-modal-close {
  position:absolute;
  top:16px;
  right:18px;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  color:var(--text);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.service-modal-eyebrow { margin:0 0 10px; color:var(--accent); font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; }
.service-modal h2 { max-width:520px; margin:0; font-family:Oswald, sans-serif; font-size:clamp(1.6rem, 4vw, 2.35rem); line-height:1.12; text-transform:uppercase; }
.service-modal-price { margin:14px 0 22px; color:var(--accent); font-size:1.1rem; font-weight:700; }
.service-modal-description { min-height:84px; margin:0; color:var(--muted); font-size:1.03rem; line-height:1.7; }
.service-modal-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); }
.service-modal-nav button { border:0; background:transparent; color:var(--text); cursor:pointer; font:inherit; font-size:0.84rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.service-modal-nav button:hover { color:var(--accent); }
.service-modal-count { color:var(--muted); font-size:0.8rem; }

/* Small icon for pricing rows */
.price-card .icon-small {
  width:36px;
  height:36px;
  margin-right:12px;
  flex:0 0 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.price-meta { display:flex; align-items:center; gap:12px; }

/* Hide pricing SVG icons (user requested removal) */
.price-meta .icon-small { display: none; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 760px) {
  .menu-toggle { display: inline-flex; align-items:center; gap:8px; }
  .page-links { display: none !important; }
  .page-links.open {
    display: flex !important;
    position: fixed;
    top: 64px;
    right: 12px;
    flex-direction: column;
    gap: 8px;
    background: rgba(6,7,8,0.95);
    padding: 12px;
    border-radius: 8px;
    z-index: 60;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  }
}

/* USMC badge in footer */
.usmc-badge {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 1em; /* same height as surrounding text */
  margin-left: 8px;
}

.business-footer div:nth-child(2) img.usmc-badge { margin-top: 0; }

@media (max-width:760px) {
  .pricing-grid { grid-template-columns: 1fr; width: calc(100% - 28px); }
  .social-icons { justify-content:flex-start; }
}


@media (max-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .service-spotlight-grid,
  .map-card {
    grid-template-columns: 1fr;
  }

  .garage-image {
    grid-template-columns: 1fr;
    transform: scale(0.9);
  }
}

@media (max-width: 760px) {
  .section {
    width: min(100% - 24px, 1420px);
  }

  .brand-plate {
    min-height: 460px;
  }

  .service-strip {
    gap: 6px;
    letter-spacing: 0.08em;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .map-card {
    grid-template-columns: 1fr;
  }

  .map-route {
    min-height: 320px;
  }

  .map-label {
    left: 16px;
    top: 16px;
  }

  .site-pin-map {
    right: 14px;
    top: 18px;
    font-size: 0.8rem;
  }

  .route-arrow {
    left: 50%;
    top: 30%;
    height: 46%;
  }

  .map-pins {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 3;
    margin-top: 18px;
  }

  .map-pins span {
    position: static;
    display: inline-flex;
    width: auto;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 8px 10px;
  }

  .directions-box {
    padding: 22px 16px 18px;
  }

  .directions-box li {
    font-size: 1.1rem;
  }

  .bottom-bar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .card-grid,
  .bottom-bar {
    grid-template-columns: 1fr;
  }

  .garage-red::before,
  .garage-red::after {
    width: 12%;
  }

  .service-copy {
    padding: 32px 20px;
  }
}

/* Styles moved from request-service.html <style> block */
.request-page {
  width: min(1100px, calc(100% - 32px));
  margin: 48px auto 60px;
  color: #f1efe9;
}

.request-shell {
  background: rgba(13, 14, 15, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  padding: 28px 22px 32px;
}

.request-header {
  text-align: center;
  margin-bottom: 28px;
}

.request-header .request-brand {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: #f1eee9;
}

.request-header h1 {
  margin: 10px 0 0;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.2rem, 2vw, 2.1rem);
  color: #d82d30;
}

.request-copy {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px 18px 12px;
  margin-bottom: 18px;
}

.request-copy p {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
}

.request-copy strong {
  color: #fff;
}

.request-copy .lead {
  font-size: 1.18rem;
  font-weight: 700;
}

.request-copy ul {
  margin: 8px 0 10px 18px;
  padding: 0;
  line-height: 1.7;
}

.request-form {
  display: grid;
  gap: 18px;
}

.form-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 22px 18px 18px;
}

.form-section h3 {
  margin: 0 0 16px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: #d92d30;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

label {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}

input,
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  color: #fff;
  font: inherit;
}

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

.service-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.service-add-button {
  padding: 10px 14px;
  border: 1px solid rgba(242, 183, 107, 0.55);
  background: rgba(242, 183, 107, 0.12);
  color: #f8e6cd;
  font: inherit;
  cursor: pointer;
}

.service-add-button:hover,
.service-add-button:focus-visible {
  background: rgba(242, 183, 107, 0.24);
}

.appointment-picker {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 12px;
}

.field-help {
  color: rgba(255,255,255,0.62);
  font-size: 0.85rem;
}

.date-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  color: rgba(255,255,255,0.74);
  font-size: 0.82rem;
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
}

.legend-available { background: #75c48a; }
.legend-closed { background: #b6b6b6; }

.submit-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(185,28,28,0.95), rgba(109,12,12,0.98));
  color: white;
  border: 1px solid rgba(255,255,255,0.22);
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.form-status {
  display: none;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #f6f1ee;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-status.visible {
  display: block;
}

.form-status.error {
  border-color: rgba(211, 39, 45, 0.7);
  color: #ffd8d8;
}

.form-status.success {
  border-color: rgba(105, 176, 115, 0.7);
  color: #d9fde0;
}

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

  .appointment-picker {
    grid-template-columns: 1fr;
  }

  .service-picker {
    grid-template-columns: 1fr;
  }

  .request-shell {
    padding: 18px 14px 22px;
  }
}


/* ==========================================================================
   RESPONSIVE LAYER
   --------------------------------------------------------------------------
   Everything below is scoped to tablet/phone widths so the desktop design is
   left exactly as it was. Rules live here (rather than as edits to the
   clamp() minimums above) so that nothing can leak into the desktop layout.
   Breakpoints: 1100px (tablet) / 760px (phone) / 480px (small phone).
   ========================================================================== */

/* Safety net: nothing may push the page sideways. `clip` (not `hidden`) is
   used so `position: sticky` / `position: fixed` children keep working. */
.page-shell {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Mobile navigation
   The open menu used `position: fixed; right: 12px`, which anchors to the
   document -- so any horizontal overflow threw it off screen. It is now
   anchored to the header itself and spans the full width.
   -------------------------------------------------------------------------- */
.top-brand {
  position: relative;
}

.mobile-request-btn {
  display: none;
}

@media (max-width: 760px) {
  .top-brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .mobile-request-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 10px 16px;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(185,28,28,0.95), rgba(109,12,12,0.98));
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .menu-toggle {
    min-height: 44px;
    padding: 10px 14px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(15, 17, 18, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .menu-toggle[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(185,28,28,0.95), rgba(109,12,12,0.98));
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  .page-links.open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    background: #0a0b0c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
    z-index: 70;
  }

  .page-links.open .nav-link {
    justify-content: flex-start;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
  }

  /* Sticky header is shorter on phones than the 76px desktop allowance. */
  .has-fixed-header .page-shell {
    padding-top: 62px;
  }
}

/* --------------------------------------------------------------------------
   Hero / brand plate
   The clamp() minimums (5rem logo, 3rem headline) are wider than a phone
   screen, so the type was being clipped by the plate. Scaled to fit.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .brand-plate {
    min-height: 0;
    padding: 42px 16px 46px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .brand-wrap {
    transform: none;
    max-width: 100%;
  }

  .logo-text {
    font-size: clamp(2.6rem, 13vw, 5rem);
    letter-spacing: -0.04em;
    line-height: 0.95;
  }

  .garage-red {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }

  /* Keep the flanking red bars inside the screen. */
  .garage-red::before,
  .garage-red::after {
    width: 14%;
    height: 5px;
  }

  .garage-red::before { left: -18%; }
  .garage-red::after  { right: -18%; }

  .tagline-row {
    font-size: clamp(1.05rem, 5vw, 1.6rem);
    margin-top: 12px;
  }

  .service-strip {
    font-size: clamp(0.8rem, 3.4vw, 1.1rem);
    letter-spacing: 0.06em;
    gap: 6px;
  }

  .trust-brief {
    font-size: clamp(0.68rem, 3vw, 0.8rem);
    letter-spacing: 0.06em;
    gap: 6px;
  }
}

/* --------------------------------------------------------------------------
   Feature banner
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .feature-headline {
    padding: 28px 16px 30px;
  }

  .small-label {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
    margin-bottom: 8px;
  }

  .feature-headline h2 {
    font-size: clamp(1.9rem, 9vw, 3rem);
    line-height: 1;
    overflow-wrap: break-word;
  }

  .available-callout {
    font-size: clamp(1.5rem, 8vw, 2rem);
    margin-top: 8px;
  }

  .date-block {
    margin-top: 14px;
    padding: 16px 10px 12px;
    border-width: 2px;
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  .repair-line {
    margin-top: 14px;
    font-size: clamp(0.95rem, 4.2vw, 1.4rem);
    word-spacing: normal;
  }

  .feature-headline p {
    font-size: clamp(1rem, 4.4vw, 1.5rem);
  }
}

/* --------------------------------------------------------------------------
   Service cards -- let the cards size to their content on phones instead of
   holding a 260px floor that leaves big empty gaps.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .service-card {
    min-height: 0;
    padding: 18px 12px 16px;
  }

  /* The icon pseudo-elements are hard-coded for a 62px box, so scale the
     whole thing rather than resizing the box (which distorts them). */
  .icon {
    margin-bottom: 10px;
    transform: scale(0.85);
    transform-origin: center;
  }

  .service-card h3 {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }

  .service-card p {
    font-size: 0.84rem;
  }
}

/* --------------------------------------------------------------------------
   A/C spotlight -- the two 160px gauges plus their 42px gap are wider than a
   phone screen, so they get scaled down and the divider moves to the top.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .service-visual {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 760px) {
  .service-copy {
    padding: 30px 18px 26px;
  }

  .service-copy h3 {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
    line-height: 1;
  }

  .service-copy p {
    font-size: clamp(0.95rem, 4vw, 1.3rem);
  }

  .red-badge {
    font-size: clamp(1rem, 4.6vw, 1.4rem);
    margin-bottom: 12px;
  }

  .service-visual {
    min-height: 210px;
  }

  .gauge-scene {
    gap: 20px;
    padding: 0 12px;
  }

  .gauge {
    width: 118px;
    height: 118px;
    border-width: 7px;
  }

  .gauge::before { inset: 14px; border-width: 3px; }
  .gauge::after  { inset: 30px; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.6); }
}

@media (max-width: 400px) {
  .gauge {
    width: 96px;
    height: 96px;
  }

  .gauge::before { inset: 11px; }
  .gauge::after  { inset: 24px; }
}

/* --------------------------------------------------------------------------
   Contact strip
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .contact-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }

  .panel-head {
    gap: 10px;
  }

  .panel-head h3 {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }

  .pin {
    font-size: 1.5rem;
  }

  .contact-panel p {
    font-size: clamp(0.95rem, 4.2vw, 1.2rem);
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------
   Map + directions -- the card carried a 640px floor meant for the desktop
   two-column layout, which made the map ~740px tall on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .map-card {
    min-height: 0;
  }

  .directions-box {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 760px) {
  .map-route,
  .map-route iframe {
    min-height: 320px;
    height: 320px;
  }

  .directions-header h3 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .pin-big {
    font-size: 1.8rem;
  }

  .directions-box li {
    font-size: 1rem;
    padding-left: 46px;
    min-height: 40px;
  }

  .directions-box li::before {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .address-line {
    font-size: 1rem;
  }

  .pin-small {
    font-size: 1.3rem;
  }

  .cta-button {
    font-size: 1rem;
    padding: 14px 16px;
    min-height: 48px;
  }
}

/* --------------------------------------------------------------------------
   Service / article pages (diesel, fleet, A/C diagnostics, brakes, hub, etc.)
   -------------------------------------------------------------------------- */
.brand-subtitle {
  display: block;
  margin-top: 14px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,0.82);
}

.service-page {
  width: min(1100px, calc(100% - 32px));
  margin: 40px auto 60px;
  color: #f1efe9;
}

.service-hero {
  text-align: center;
  padding: 20px 0 8px;
}

.service-hero .eyebrow {
  display: block;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.service-hero h1 {
  margin: 0 0 14px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: #fff;
}

.service-hero .lead {
  max-width: 760px;
  margin: 0 auto 22px;
  color: rgba(255,255,255,0.82);
  font-size: 1.08rem;
  line-height: 1.7;
}

.service-hero-media {
  display: flex;
  justify-content: center;
  margin: 0 auto 30px;
}

.service-hero-media img {
  width: 220px;
  height: 220px;
  max-width: 60vw;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5));
}

.article-block {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 26px 24px 22px;
  margin-bottom: 22px;
}

.article-block h2 {
  margin: 0 0 14px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: #d92d30;
}

.article-block h3 {
  margin: 18px 0 8px;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: #f6f1ee;
  text-transform: uppercase;
}

.article-block p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
}

.article-block p:last-child {
  margin-bottom: 0;
}

.article-block ul,
.article-block ol {
  margin: 0 0 14px 20px;
  padding: 0;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}

.article-block li {
  margin-bottom: 6px;
}

.article-block strong {
  color: #fff;
}

.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(180deg, rgba(185,28,28,0.16), rgba(109,12,12,0.22));
  border: 1px solid rgba(255,255,255,0.14);
  padding: 24px 26px;
  margin-bottom: 22px;
}

.cta-banner-copy h2 {
  margin: 0 0 6px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: #fff;
}

.cta-banner-copy p {
  margin: 0;
  color: rgba(255,255,255,0.82);
}

.cta-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-banner-actions .cta-button,
.svc-index-card .cta-button {
  width: auto;
  margin-top: 0;
}

.faq-block details {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 14px 2px;
}

.faq-block details:first-of-type {
  border-top: none;
}

.faq-block summary {
  cursor: pointer;
  list-style: none;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.02em;
  font-size: 1.02rem;
  color: #f6f1ee;
  padding-right: 26px;
  position: relative;
}

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

.faq-block summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--accent);
  font-size: 1.2rem;
}

.faq-block details[open] summary::after {
  content: "\2212";
}

.faq-block details p {
  margin: 10px 0 4px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}

.related-services {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.related-services a {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  text-decoration: none;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.related-services a:hover {
  background: rgba(185,28,28,0.35);
  transform: translateY(-1px);
}

.svc-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.svc-category {
  margin: 0 0 12px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.blog-index-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 26px;
}

.blog-post-card {
  background: rgba(18, 20, 22, 0.94);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 24px 24px 22px;
}

.blog-post-card h2 {
  margin: 0 0 6px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.25;
}

.blog-post-card h2 a {
  color: #fff;
  text-decoration: none;
}

.blog-post-card h2 a:hover {
  color: var(--accent);
}

.blog-meta {
  display: block;
  margin-bottom: 10px;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--accent);
}

.blog-post-card p {
  margin: 0 0 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
}

.blog-post-card p:last-child {
  margin-bottom: 0;
}

.blog-post-hero .blog-meta {
  text-align: center;
  margin-bottom: 6px;
}

/* Wrapper for images/figures inside blog post body_html. The sanitizer
   strips inline style="" attributes, so centering has to live in a class. */
.blog-figure {
  text-align: center;
  margin: 16px 0;
}

.blog-figure img {
  display: inline-block;
  border-radius: 8px;
}

.svc-index-card {
  background: rgba(18, 20, 22, 0.94);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-index-card img {
  width: 84px;
  height: 84px;
  align-self: center;
}

.svc-index-card h2,
.svc-index-card h3 {
  margin: 0;
  text-align: center;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  color: #fff;
}

.svc-index-card p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  font-size: 0.96rem;
  text-align: center;
}

.svc-index-card .cta-button {
  margin-top: auto;
  align-self: center;
}

.usmc-photo {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 18px auto 0;
  border: 1px solid rgba(255,255,255,0.16);
}

@media (max-width: 760px) {
  .service-page {
    margin-top: 24px;
  }

  .svc-index-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-banner-actions {
    width: 100%;
  }

  .cta-banner-actions .cta-button {
    flex: 1;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Service areas
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .service-areas {
    padding-bottom: 4px;
  }

  .service-areas p {
    font-size: 0.92rem;
    line-height: 1.6;
  }
}

/* --------------------------------------------------------------------------
   Footer -- this was the source of the sideways scroll on every page: three
   180px-minimum columns need 564px, far more than a phone has.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .business-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .business-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 14px;
  }

  .business-footer > div {
    min-width: 0;
  }

  .business-footer strong {
    font-size: 1rem;
  }

  .business-footer span {
    font-size: 0.8rem;
    overflow-wrap: break-word;
  }

  .contact-nap {
    min-width: 0;
  }

  .phone-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .social-icons {
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
  }

  .social-icons a {
    width: 42px;
    height: 42px;
  }

  .social-icons svg {
    width: 20px;
    height: 20px;
  }

  .site-footer {
    padding-bottom: 26px;
  }
}

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .pricing-hero {
    padding: 20px 0 6px;
  }

  .pricing-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  .pricing-hero p {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .price-card {
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px;
  }

  .price-card h4 {
    font-size: 0.95rem;
    line-height: 1.35;
    flex: 1 1 100%;
  }

  .price-meta {
    flex: 1 1 100%;
    min-width: 0;
  }

  .price {
    flex: 0 0 auto;
    font-size: 0.95rem;
  }
}

/* --------------------------------------------------------------------------
   Request service page
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .request-page {
    width: min(1100px, calc(100% - 24px));
    margin: 24px auto 40px;
  }

  .request-header {
    margin-bottom: 20px;
  }

  .request-header .request-brand {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .request-header h1 {
    font-size: clamp(1rem, 5vw, 1.4rem);
  }

  .request-copy {
    padding: 16px 14px 10px;
  }

  .request-copy p {
    font-size: 0.94rem;
  }

  .request-copy .lead {
    font-size: 1.05rem;
  }

  .form-section {
    padding: 18px 14px 16px;
  }

  .form-section h3 {
    font-size: clamp(1.05rem, 5vw, 1.4rem);
    margin-bottom: 14px;
  }

  /* 16px keeps iOS from zooming the page in when a field is focused. */
  input,
  textarea,
  select {
    font-size: 16px;
    min-height: 46px;
  }

  textarea {
    min-height: 120px;
  }

  .submit-wrap {
    padding-top: 4px;
  }

  .submit-btn {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    font-size: 1.05rem;
  }
}

/* The VIN lookup sits beside the "Vehicle Information" heading on desktop and
   stacks underneath it on phones. */
.vehicle-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.vin-block {
  min-width: 260px;
  margin-left: auto;
}

.vin-label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 6px;
}

.vin-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.vin-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}

.vin-row .submit-btn {
  min-width: 120px;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.vin-status {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .vin-block {
    min-width: 0;
    margin-left: 0;
    width: 100%;
  }

  .vin-row .submit-btn {
    width: auto;
    min-width: 110px;
    min-height: 46px;
    font-size: 0.85rem;
  }
}

/* Only stack the VIN row on the very narrowest screens -- keeping the button
   beside the input stops it reading as the form's main submit button. */
@media (max-width: 340px) {
  .vin-row {
    flex-direction: column;
  }

  .vin-row .submit-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .send-confirmation-banner {
    width: min(1420px, calc(100% - 24px));
    padding: 14px;
    font-size: 0.92rem;
  }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .top-brand.sticky {
    transition: none;
  }
}