/* ==========================================================================
   CarX Wash 2026
   Brand: navy #1B4F8C / deep #0F1B33 / orange #E87722
   ========================================================================== */

:root {
  --navy:        #1B4F8C;
  --navy-deep:   #0F1B33;
  --navy-mid:    #16305A;
  --orange:      #E87722;
  --orange-dark: #C25F13;

  --ink:      #1A1F2B;
  --body:     #4A5567;
  --muted:    #7A8598;
  --line:     #E2E7EF;
  --bg:       #FFFFFF;
  --bg-alt:   #F4F7FB;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 2px 8px rgba(15, 27, 51, .06), 0 12px 32px rgba(15, 27, 51, .07);
  --shadow-lg: 0 4px 14px rgba(15, 27, 51, .09), 0 24px 60px rgba(15, 27, 51, .13);

  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1200px;
  --gutter:    22px;
}

/* ------------------------------- Reset ---------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The mobile nav panel is parked off-screen at translateX(100%). Being
     position:fixed it still extends the document's scroll width, which on a
     phone makes the browser lay the whole page out ~300px too wide and render
     it zoomed out. Clip that overflow away.
     `clip` rather than `hidden` because hidden would turn this into a scroll
     container and break the sticky header. */
  overflow-x: clip;
}

body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--orange); }

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--ink);
  line-height: 1.08;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.005em;
}

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

/* Long service names and addresses must never force the page wider than the
   screen. Cheap insurance across every text element. */
h1, h2, h3, h4, p, li, dt, dd, figcaption, td, th, summary {
  overflow-wrap: break-word;
}

svg { width: 1em; height: 1em; fill: currentColor; }

/* Hidden with clip rather than a large negative offset, which would itself
   contribute to horizontal overflow. */
.carx-skip {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--navy); color: #fff; padding: 12px 20px; z-index: 999;
}
.carx-skip:focus {
  width: auto; height: auto;
  clip: auto; clip-path: none;
  left: 12px; top: 12px; color: #fff;
}

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ------------------------------ Layout ---------------------------------- */

.carx-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.carx-container--narrow { max-width: 840px; }

.carx-section { padding: 92px 0; }
.carx-section--tight { padding: 68px 0; }
.carx-section--alt { background: var(--bg-alt); }

.carx-section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.carx-section__title { font-size: clamp(2rem, 4vw, 3rem); }
.carx-section__lead { font-size: 1.08rem; color: var(--body); margin: 0; }
.carx-section__foot { text-align: center; margin-top: 46px; }

.carx-eyebrow {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 .7em;
}
.carx-eyebrow--light { color: #FFC48A; }

.carx-accent { color: var(--orange); }

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

/* ------------------------------ Buttons --------------------------------- */

.carx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-align: center;
}
.carx-btn:hover { transform: translateY(-2px); }
.carx-btn--lg { padding: 18px 36px; font-size: 1.02rem; }

.carx-btn--primary { background: var(--orange); color: #fff; }
.carx-btn--primary:hover { background: var(--orange-dark); color: #fff; }

.carx-btn--outline { border-color: currentColor; color: var(--navy); background: transparent; }
.carx-btn--outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.carx-btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.carx-btn--ghost:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }

/* ---------------------------- Utility bar ------------------------------- */

.carx-utility {
  background: var(--navy-deep);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}
.carx-utility__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  flex-wrap: wrap;
}
.carx-utility__left, .carx-utility__right { display: flex; gap: 22px; align-items: center; }
.carx-utility__item { display: inline-flex; align-items: center; gap: .45em; color: inherit; }
.carx-utility__item svg { color: var(--orange); }
.carx-utility a:hover { color: #fff; }
.carx-utility__phone { font-weight: 600; color: #fff; }

/* ------------------------------ Header ---------------------------------- */

.carx-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(15,27,51,.16);
}
.carx-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}
.carx-logo img { width: auto; height: 46px; }

.carx-nav { display: flex; align-items: center; gap: 28px; }

.carx-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carx-nav-list a {
  display: block;
  padding: 10px 15px;
  color: rgba(255,255,255,.9);
  font-weight: 500;
  font-size: .95rem;
  border-radius: var(--radius-sm);
}
.carx-nav-list a:hover,
.carx-nav-list .is-current > a,
.carx-nav-list a.is-current,
.carx-nav-list .current-menu-item > a {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.carx-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: rgba(255,255,255,.12);
  border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.carx-burger span {
  display: block; height: 2px; width: 100%;
  background: #fff; border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.carx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.carx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.carx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------- Hero ---------------------------------- */

.carx-hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.carx-hero__media { position: absolute; inset: 0; z-index: -2; }
.carx-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.carx-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(15,27,51,.94) 0%, rgba(15,27,51,.78) 42%, rgba(15,27,51,.42) 100%);
}
.carx-hero__inner { padding: 120px 0 108px; max-width: 760px; }
.carx-hero__title {
  font-size: clamp(2.4rem, 7vw, 5.1rem);
  color: #fff;
  margin-bottom: .28em;
  /* "X-Factor" is long and unbreakable at small sizes — never let it push
     the layout wider than the screen. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.carx-hero__lead {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: rgba(255,255,255,.86);
  max-width: 560px;
  margin-bottom: 2em;
}
.carx-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.carx-hero__actions .carx-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.carx-hero__actions .carx-btn--outline:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }

.carx-hero__points {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  list-style: none; margin: 0; padding: 0;
  font-size: .93rem; color: rgba(255,255,255,.82);
}
.carx-hero__points li { position: relative; padding-left: 26px; }
.carx-hero__points li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: inset 0 0 0 3px var(--navy-deep);
}

/* ------------------------------- Cards ---------------------------------- */

.carx-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: inherit;
}
.carx-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  color: inherit;
}
.carx-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.carx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carx-card:hover .carx-card__media img { transform: scale(1.05); }
.carx-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.carx-card__title { font-size: 1.65rem; margin-bottom: .3em; }
.carx-card__text { font-size: .95rem; margin-bottom: 1em; }
.carx-card__price { font-size: 1rem; color: var(--muted); margin: auto 0 .8em; }
.carx-card__price strong { font-size: 1.5rem; color: var(--navy); font-family: var(--head); }
.carx-card__link { font-weight: 600; color: var(--orange); font-size: .93rem; }

/* ------------------------------- Steps ---------------------------------- */

.carx-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none; margin: 0; padding: 0;
  counter-reset: step;
}
.carx-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  position: relative;
}
.carx-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--head);
  font-size: 1.5rem; font-weight: 700;
  margin-bottom: 16px;
}
.carx-step__title { font-size: 1.32rem; margin-bottom: .35em; }
.carx-step__text { font-size: .93rem; margin: 0; }

/* ------------------------------ Feature --------------------------------- */

.carx-feature { background: var(--navy-deep); color: rgba(255,255,255,.84); }
.carx-feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 92px 0;
}
.carx-feature__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.carx-feature__title { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.carx-feature__text { color: rgba(255,255,255,.8); }
.carx-feature__price {
  font-family: var(--head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin: .35em 0 .7em;
}

.carx-ticks { list-style: none; margin: 0 0 1.4em; padding: 0; }
.carx-ticks li { position: relative; padding-left: 30px; margin-bottom: .55em; font-size: .96rem; }
.carx-ticks li::before {
  content: '';
  position: absolute; left: 0; top: .42em;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--orange);
  border-bottom: 2.5px solid var(--orange);
  transform: rotate(-45deg);
}

/* --------------------------- Feature cards ------------------------------ */

.carx-feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.carx-feature-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.carx-feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.carx-feature-card__title { font-size: 1.42rem; margin: 24px 26px .35em; }
.carx-feature-card__text { font-size: .94rem; margin: 0 26px 26px; }

/* ------------------------------- Addons --------------------------------- */

.carx-addons {
  columns: 2;
  column-gap: 56px;
  list-style: none; margin: 0; padding: 0;
}
.carx-addon {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px dashed var(--line);
  break-inside: avoid;
}
/* min-width:0 lets a long name wrap instead of forcing the row wider than
   its column — flex items refuse to shrink below their content otherwise. */
.carx-addon__name {
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  flex: 1 1 auto;
}
.carx-addon__dots { flex: 1 1 20px; min-width: 16px; border-bottom: 1px dotted var(--line); }
.carx-addon__price { flex: none; }
.carx-addon__price {
  font-family: var(--head);
  font-size: 1.35rem; font-weight: 700;
  color: var(--navy);
}

/* ------------------------------- Promo ---------------------------------- */

.carx-promo { background: var(--navy); color: #fff; }
.carx-promo__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  padding: 84px 0;
}
.carx-promo__title { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.carx-promo__text { color: rgba(255,255,255,.85); margin-bottom: 1.8em; }

.carx-giftcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1.6 / 1;
  max-width: 420px;
  margin-left: auto;
  padding: 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 55%, var(--orange) 155%);
  box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
}
.carx-giftcard__label {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.carx-giftcard__brand {
  font-family: var(--head);
  font-size: 2.4rem; font-weight: 700; color: #fff; letter-spacing: .04em;
}
.carx-giftcard__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; letter-spacing: .18em;
  color: rgba(255,255,255,.75);
}

/* ------------------------------ Reviews --------------------------------- */

.carx-review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  margin: 0;
}
.carx-review__stars { display: flex; gap: 3px; color: var(--orange); font-size: 1.15rem; margin-bottom: 14px; }
.carx-review__text { font-size: .99rem; color: var(--ink); margin-bottom: 1.2em; }
.carx-review__by { display: flex; flex-direction: column; font-size: .89rem; }
.carx-review__by strong { color: var(--ink); font-size: .96rem; }
.carx-review__by span { color: var(--muted); }

/* -------------------------------- FAQ ----------------------------------- */

.carx-faq { border-top: 1px solid var(--line); }
.carx-faq__item { border-bottom: 1px solid var(--line); }
.carx-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.carx-faq__q::-webkit-details-marker { display: none; }
.carx-faq__q::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--orange);
  border-bottom: 2.5px solid var(--orange);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .22s ease;
}
.carx-faq__item[open] .carx-faq__q::after { transform: rotate(-135deg) translateY(-3px); }
.carx-faq__a { padding-bottom: 22px; }
.carx-faq__a p { margin: 0; font-size: .99rem; }

/* ------------------------------- Locate --------------------------------- */

.carx-locate {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.carx-locate__text { margin-bottom: 1.4em; }
.carx-locate__details { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 0 0 1.8em; }
.carx-locate__details dt { font-weight: 600; color: var(--ink); font-size: .93rem; }
.carx-locate__details dd { margin: 0; font-size: .96rem; }
.carx-locate__map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.carx-locate__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------ CTA band -------------------------------- */

.carx-cta-band {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
}
.carx-cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 52px 0;
  flex-wrap: wrap;
}
.carx-cta-band__title { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .18em; }
.carx-cta-band__text { color: rgba(255,255,255,.92); margin: 0; }
.carx-cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.carx-cta-band .carx-btn--primary { background: #fff; color: var(--orange-dark); }
.carx-cta-band .carx-btn--primary:hover { background: var(--navy-deep); color: #fff; }

/* ------------------------------- Footer --------------------------------- */

.carx-footer { background: var(--navy-deep); color: rgba(255,255,255,.68); font-size: .93rem; }
.carx-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding: 72px 0 56px;
}
.carx-footer__brand img { height: 52px; width: auto; margin-bottom: 18px; }
.carx-footer__tagline { color: var(--orange); font-weight: 600; margin-bottom: .6em; }
.carx-footer__blurb { margin-bottom: 1.3em; }
.carx-footer__heading {
  color: #fff; font-size: 1.2rem;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 1em;
}
.carx-footer__list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.carx-footer__list li { margin-bottom: .5em; }
.carx-footer a { color: rgba(255,255,255,.68); }
.carx-footer a:hover { color: var(--orange); }
.carx-footer__address { font-style: normal; margin-bottom: 1.1em; }
.carx-footer__hours { color: rgba(255,255,255,.85); margin: 0; }

.carx-social { display: flex; gap: 10px; }
.carx-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1.15rem;
  transition: background .18s ease;
}
.carx-social a:hover { background: var(--orange); color: #fff; }

.carx-footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.carx-footer__bar-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 22px 0; flex-wrap: wrap;
  font-size: .87rem;
}
.carx-footer__bar p { margin: 0; }
.carx-footer__legal { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }

/* ---------------------------- Page basics ------------------------------- */

.carx-pagehead {
  background: var(--navy-deep);
  color: #fff;
  padding: 76px 0 68px;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.carx-pagehead__media { position: absolute; inset: 0; z-index: -2; }
.carx-pagehead__media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.carx-pagehead::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,27,51,.9), rgba(15,27,51,.78));
}
.carx-pagehead__title { color: #fff; font-size: clamp(2.3rem, 5vw, 3.6rem); margin-bottom: .22em; }
.carx-pagehead__lead { color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto; }

.carx-prose { padding: 76px 0; }
.carx-prose h2 { font-size: 2rem; margin-top: 1.4em; }
.carx-prose h3 { font-size: 1.5rem; margin-top: 1.3em; }
.carx-prose img { border-radius: var(--radius); margin: 1.5em 0; }

/* ------------------------ Booking form tweaks --------------------------- */

/* The 1-2-3-4-5 progress chips take a screen of vertical space on mobile and
   tell the customer nothing the form itself does not. Hidden rather than
   deleted from the template, because the booking script still targets
   #step-ind-N when moving between steps. */
.carx-steps { display: none; }

/* --------------------------- Pricing table ------------------------------ */

.carx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.carx-pricing {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.carx-pricing thead th {
  background: var(--navy);
  color: #fff;
  padding: 20px 18px;
  text-align: center;
  vertical-align: top;
  font-family: var(--sans);
  font-weight: 600;
}
.carx-pricing thead th.carx-pricing__service { text-align: left; }
.carx-pricing__class {
  display: block;
  font-family: var(--head);
  font-size: 1.5rem;
  font-weight: 700;
}
.carx-pricing__classsub {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}
.carx-pricing tbody th,
.carx-pricing tbody td {
  padding: 20px 18px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.carx-pricing tbody tr:nth-child(even) { background: var(--bg-alt); }
.carx-pricing tbody th {
  text-align: left;
  font-weight: 400;
  max-width: 340px;
}
.carx-pricing__name {
  display: block;
  font-family: var(--head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.carx-pricing__desc {
  display: block;
  font-size: .87rem;
  color: var(--muted);
  margin-top: 5px;
}

/* Service inclusions ------------------------------------------------------
   The "what's included" list lives on the WooCommerce product, so this panel
   shows whatever the shop wrote there. Collapsed by default: the table is a
   price comparison first, and six open lists would bury the prices. */
.carx-detail { margin-top: 10px; }

.carx-detail__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  list-style: none;          /* Firefox */
}
.carx-detail__toggle::-webkit-details-marker { display: none; }   /* Safari */

.carx-detail__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.carx-detail[open] .carx-detail__toggle::after { transform: rotate(-135deg); }

.carx-detail__toggle:hover { color: var(--orange-dark); }
.carx-detail__toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

.carx-detail__body {
  padding-top: 9px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--body);
  max-width: 46ch;
}

/* Ceramic Coating is prose; the wash tiers are lists. Style both. */
.carx-detail__body p { margin: 0 0 9px; }
.carx-detail__body p:last-child { margin-bottom: 0; }

.carx-detail__body ul,
.carx-detail__body ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.carx-detail__body li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 5px;
}
.carx-detail__body li:last-child { margin-bottom: 0; }
.carx-detail__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.carx-pricing tbody td { text-align: center; }
.carx-pricing__price {
  display: block;
  font-family: var(--head);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.carx-pricing__book {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
}
.carx-pricing__book:hover { background: var(--orange-dark); color: #fff; }
.carx-pricing__na { color: var(--muted); font-size: 1.3rem; }
.carx-pricing__note {
  margin: 20px 0 0;
  font-size: .89rem;
  color: var(--muted);
  text-align: center;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------------------------- Gift cards -------------------------------- */

.carx-gift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.carx-gift-steps { list-style: none; margin: 0; padding: 0; counter-reset: gs; }
.carx-gift-steps li {
  position: relative;
  padding: 0 0 22px 52px;
  counter-increment: gs;
}
.carx-gift-steps li::before {
  content: counter(gs);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--head);
  font-size: 1.15rem;
  font-weight: 700;
}
.carx-gift-steps li:not(:last-child)::after {
  content: '';
  position: absolute; left: 16.5px; top: 36px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.carx-gift-steps strong { display: block; color: var(--ink); font-size: 1.05rem; }

/* ------------------------------ Contact --------------------------------- */

.carx-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.carx-contact-cards { display: grid; gap: 18px; }
.carx-contact-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.carx-contact-card__icon {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(232,119,34,.12);
  color: var(--orange);
  font-size: 1.25rem;
}
.carx-contact-card h3 { font-size: 1.2rem; margin-bottom: .2em; }
.carx-contact-card p { margin: 0; font-size: .95rem; }

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1024px) {
  .carx-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .carx-steps { grid-template-columns: repeat(2, 1fr); }
  .carx-feature__inner,
  .carx-promo__inner,
  .carx-locate { grid-template-columns: 1fr; gap: 42px; }
  .carx-giftcard { margin: 0 auto; transform: none; }
  .carx-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .carx-utility__hours { display: none; }
  .carx-gift-grid,
  .carx-contact-grid { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 860px) {
  .carx-burger { display: flex; }

  /* Closed state is display:none, not a transform off-screen.
     A position:fixed panel parked at translateX(100%) is included in
     horizontal scroll by iOS Safari, which made the whole page scroll
     sideways and render too wide on phones. Fixed elements escape
     overflow clipping on ancestors, so the only reliable fix is for the
     panel not to occupy space outside the viewport at rest. */
  .carx-nav {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--navy-deep);
    padding: 92px 24px 32px;
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(0,0,0,.3);
  }
  .carx-nav.is-open {
    display: flex;
    animation: carx-nav-in .24s ease;
  }
  /* Slides in only while open — and body scrolling is locked then, so the
     transient off-screen start position cannot be scrolled to. */
  @keyframes carx-nav-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  .carx-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .carx-nav-list a { padding: 14px 16px; font-size: 1.05rem; }
  .carx-nav__cta { margin-top: 20px; }
  .carx-nav__cta .carx-btn { width: 100%; }

  body.carx-nav-open { overflow: hidden; }
  .carx-nav-scrim {
    position: fixed; inset: 0;
    background: rgba(15,27,51,.55);
    z-index: 99;
    opacity: 0; pointer-events: none;
    transition: opacity .26s ease;
  }
  .carx-nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* Pricing table on phones: a 720px table inside a horizontal scroller means
   the customer never sees a price and a Book button at once. Stack each
   service into a card, with the vehicle class as a row label. */
@media (max-width: 720px) {
  .carx-table-scroll { overflow-x: visible; }
  .carx-pricing,
  .carx-pricing tbody,
  .carx-pricing tr,
  .carx-pricing th,
  .carx-pricing td { display: block; width: auto; }
  .carx-pricing { min-width: 0; border: 0; background: none; }
  .carx-pricing thead { display: none; }
  .carx-pricing tbody tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 16px;
    padding: 18px 18px 8px;
  }
  .carx-pricing tbody tr:nth-child(even) { background: #fff; }
  .carx-pricing tbody th { border: 0; padding: 0 0 12px; max-width: none; }
  .carx-pricing tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 10px 0;
    border-top: 1px solid var(--line);
  }
  .carx-pricing tbody td::before {
    content: attr(data-label);
    font-size: .9rem;
    font-weight: 600;
    color: var(--body);
  }
  .carx-pricing__price { font-size: 1.4rem; margin-left: auto; }
  .carx-pricing__book  { margin-top: 0; }
  .carx-pricing__na    { margin-left: auto; }
}

@media (max-width: 480px) {
  /* Wide letter-spacing on the gift-card code and the big brand type are the
     two places a narrow phone runs out of room. */
  .carx-giftcard__code  { font-size: .88rem; letter-spacing: .1em; }
  .carx-giftcard__brand { font-size: 1.9rem; letter-spacing: .02em; }
  .carx-giftcard        { padding: 24px; aspect-ratio: auto; min-height: 190px; }
  .carx-feature__price  { font-size: 2.4rem; }
  .carx-locate__details { grid-template-columns: 1fr; gap: 2px 0; }
  .carx-locate__details dt { margin-top: 10px; }
  .carx-addon { flex-wrap: wrap; }
  .carx-addon__dots { display: none; }
  .carx-addon__price { margin-left: auto; }
}

@media (max-width: 720px) {
  .carx-section { padding: 62px 0; }
  .carx-section--tight { padding: 48px 0; }
  .carx-section__head { margin-bottom: 36px; }
  .carx-hero__inner { padding: 76px 0 66px; }
  .carx-grid--3, .carx-grid--2, .carx-steps { grid-template-columns: 1fr; }
  .carx-addons { columns: 1; }
  .carx-footer__grid { grid-template-columns: 1fr; gap: 34px; padding: 52px 0 40px; }
  .carx-utility__inner { justify-content: center; font-size: .78rem; }
  .carx-utility__left .carx-utility__item:first-child { display: none; }
  .carx-cta-band__inner { flex-direction: column; text-align: center; align-items: center; }
  .carx-footer__bar-inner { flex-direction: column; text-align: center; }
  .carx-btn { width: 100%; }
  .carx-hero__actions .carx-btn,
  .carx-cta-band__actions .carx-btn { width: 100%; }
}

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