/* Moe's Mobile Detailing, the page below the hero, shared by the homepage
   and the commercial page.

   The hero and its nav live in homepage.css and are the kit's own panel.
   Everything here extends downward from that panel using the same tokens.
   Light ground below the dark hero, the way the kit's own cards sit on white.

   The one scroll animation on the site is the visit rail, because that
   section's argument is a morning unfolding. Nothing else animates in. */

@import url("tokens.css");

/* ---------------------------------------------------------------- layout */

.col {
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding-left: var(--s4);
  padding-right: var(--s4);
}

.col--narrow {
  max-width: 880px;
}

main {
  background: var(--page);
  color: var(--graphite);
}

/* section rhythm, opened up on the captain's instruction: the whole page
   should breathe, not just the hero */
main section {
  padding: clamp(88px, 8vw, 128px) 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: var(--s2) var(--s3);
}

.skip:focus {
  left: 0;
  z-index: 60;
}

/* ------------------------------------------------------------------ type */

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--navy);
}

.h2--onDark {
  color: var(--white);
}

.lede {
  margin: var(--s3) 0 0;
  max-width: 38em;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--muted);
}

.kicker {
  margin: 0 0 var(--s2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--royal);
}

main h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--navy);
}

main p {
  line-height: 1.7;
}

/* ------------------------------------------------------------ return bar */

.returnbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--navy);
  transform: translateY(-100%);
  transition: transform 200ms ease;
}

.returnbar.is-shown {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(6, 11, 20, 0.35);
}

.returnbar__inner {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.returnbar__logo img {
  display: block;
  height: 38px;
  width: auto;
}

.returnbar__note {
  margin: 0;
  font-size: 13px;
  color: var(--silver);
}

.returnbar__phone {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.returnbar__phone:hover {
  color: var(--ice);
}

.btn--bar {
  height: 38px;
  padding: 0 var(--s3);
  font-size: 11.5px;
}

.btn--wide {
  height: 50px;
  padding: 0 var(--s4);
}

.btn--outlineDark {
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--white);
}

/* ------------------------------------------------------------ hero extras */

.hero__fineprint {
  margin: clamp(20px, 1.8vw, 26px) 0 0;
  max-width: 34em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--silver);
}

/* ----------------------------------------------------------------- visit */

.visit__head {
  max-width: 44em;
}

.visit__steps {
  position: relative;
  list-style: none;
  margin: clamp(var(--s5), 6vw, 96px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(72px, 7vw, 112px);
}

/* the rail: one vertical rule down the centre, filled by scroll */
.visit__rail {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--silver) 45%, var(--white));
}

.visit__rail-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--royal);
}

.visit__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s4), 6vw, 96px);
  align-items: center;
}

.visit__step:nth-child(2n+1) .visit__text {
  order: 0;
  justify-self: end;
}

.visit__step:nth-child(2n+1) .visit__photo {
  order: 1;
}

.visit__step:nth-child(2n) .visit__text {
  order: 1;
}

.visit__step:nth-child(2n) .visit__photo {
  order: 0;
}

.visit__text {
  max-width: 26em;
}

.visit__text p {
  margin: var(--s2) 0 0;
  color: var(--muted);
}

.visit__photo {
  margin: 0;
}

.visit__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-panel);
}

/* ------------------------------------------------------------------ menu */

.menu {
  background: var(--surface);
}

/* The bento: one dominant feature panel, the rest stacked beside it.
   The arrangement is the old site's; the design is ours. */

.menu__bento {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--s4), 4vw, var(--s5));
  align-items: start;
}

/* the feature reads as one object: photo and dark block, no seam */
.menu__feature {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--navy);
}

.menu__feature figure {
  margin: 0;
}

.menu__feature img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.menu__feature-body {
  padding: var(--s4);
  color: var(--white);
}

.menu__feature-body h3 {
  font-size: clamp(21px, 1.9vw, 26px);
  text-transform: uppercase;
  color: var(--white);
}

.menu__feature-body p {
  margin: var(--s3) 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--silver);
}

.menu__incl {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s4);
}

.menu__incl li {
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule-dark);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--white);
}

/* the secondary services: plain stacked rows, separated by the hairlines
   they need and nothing else */
.menu__stack {
  display: flex;
  flex-direction: column;
}

.menu__svc {
  padding: var(--s3) 0;
}

.menu__svc + .menu__svc {
  border-top: 1px solid var(--rule);
}

.menu__svc:first-child {
  padding-top: 0;
}

.menu__svc p {
  margin: var(--s1) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------- compare */

.compare__table {
  width: 100%;
  margin-top: var(--s5);
  border-collapse: collapse;
  font-size: 15px;
}

.compare__table th,
.compare__table td {
  padding: var(--s3);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
  line-height: 1.55;
}

.compare__table thead th {
  border-top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.compare__table tbody th {
  font-weight: 600;
  color: var(--graphite);
  width: 11em;
}

.compare__table td {
  color: var(--muted);
}

.compare__table td:last-child,
.compare__table thead th:last-child {
  background: color-mix(in srgb, var(--ice) 12%, var(--white));
  color: var(--graphite);
}

.compare__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.compare__concede {
  margin: var(--s4) 0 0;
  max-width: 44em;
  font-size: 15px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- recent */

/* The homepage's glimpse of the gallery: four frames in a contact-sheet row,
   one line of caption each. The full set, with the longer story of every
   job, stays on the gallery page this section links to. Static on purpose,
   for the same reason the gallery page is: the photographs are the argument. */

.recent {
  background: var(--surface);
}

.recent__head {
  max-width: 44em;
}

.recent__strip {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}

.recent__shot {
  margin: 0;
}

.recent__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-panel);
  background: var(--white);
}

.recent__shot figcaption b {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}

.recent__shot figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.recent__more {
  margin: var(--s4) 0 0;
  max-width: 44em;
  color: var(--muted);
}

.recent__more a {
  font-weight: 600;
  color: var(--royal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ commercial */

.commercial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--navy);
  color: var(--white);
  padding: 0 !important;
}

.commercial__photo {
  margin: 0;
  min-height: 100%;
}

.commercial__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commercial__panel {
  padding: var(--s5) clamp(var(--s4), 5vw, 80px);
}

.commercial__lede {
  margin: var(--s3) 0 0;
  max-width: 34em;
  line-height: 1.7;
  color: var(--silver);
}

.commercial__links {
  margin: var(--s4) 0;
  padding: 0;
  list-style: none;
  max-width: 30em;
}

.commercial__links a {
  display: block;
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule-dark);
  font-weight: 600;
  color: var(--white);
}

.commercial__links li:last-child a {
  border-bottom: 1px solid var(--rule-dark);
}

.commercial__links a:hover {
  color: var(--ice);
}

/* --------------------------------------------------------------- reviews */

.reviews__head {
  max-width: 44em;
}

.reviews__rating {
  margin: var(--s3) 0 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--muted);
}

.stars {
  width: 110px;
  height: 20px;
  color: var(--royal);
  flex: none;
}

.reviews__wall {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  align-items: start;
}

.reviews__group h3 {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
}

.reviews__group blockquote {
  margin: var(--s3) 0 0;
  padding: var(--s4);
  background: var(--surface);
  border-radius: var(--r-panel);
}

.reviews__group blockquote p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--graphite);
}

.reviews__group blockquote footer {
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--muted);
}

.reviews__more {
  margin: var(--s4) 0 0;
}

.reviews__more a {
  font-weight: 600;
  color: var(--royal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- scale */

/* The business's own tally. Numbers large, labels plain beneath, nothing
   else: no boxes, no marks, no counting up. The figures are the content. */

.scale__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}

/* the commercial page states only the two figures a fleet buyer wants */
.scale__row--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 640px;
}

.scale__item {
  margin: 0;
}

.scale__item b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.scale__item span {
  display: block;
  margin-top: var(--s2);
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* ------------------------------------------------------------------ gift */

.gift {
  background: var(--surface);
}

.gift__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s4), 6vw, 96px);
  align-items: center;
}

.gift__form {
  margin-top: var(--s4);
}

.gift__amounts {
  margin: 0 0 var(--s3);
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.gift__amounts legend {
  padding: 0;
  margin-bottom: var(--s2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.gift__amounts label {
  cursor: pointer;
}

.gift__amounts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gift__amounts span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  background: var(--white);
  font-weight: 600;
  color: var(--graphite);
}

.gift__amounts input:checked + span {
  border-color: var(--royal);
  background: var(--navy);
  color: var(--white);
}

.gift__amounts input:focus-visible + span {
  outline: 2px solid var(--royal);
  outline-offset: 2px;
}

.gift__note {
  margin: var(--s3) 0 0;
  max-width: 32em;
  font-size: 14px;
  color: var(--muted);
}

.gift__note a {
  color: var(--royal);
  font-weight: 600;
}

/* the card itself, drawn with the brand's own parts */
.giftcard {
  aspect-ratio: 8 / 5;
  max-width: 420px;
  margin-left: auto;
  border-radius: var(--r-panel);
  background:
    linear-gradient(
      152deg,
      color-mix(in srgb, var(--navy) 88%, var(--royal)) 0%,
      var(--navy) 46%,
      color-mix(in srgb, var(--navy) 55%, var(--panel-dark)) 100%
    );
  color: var(--white);
  padding: clamp(var(--s3), 2.5vw, var(--s4));
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(6, 11, 20, 0.28);
}

.giftcard__logo {
  width: clamp(76px, 8vw, 104px);
  height: auto;
}

.giftcard__label {
  margin: auto 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ice);
}

.giftcard__amount {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
}

.giftcard__foot {
  margin: var(--s3) 0 0;
  font-size: 12px;
  color: var(--silver);
}

/* ------------------------------------------------------------------- ask */

/* The pre-booking questions, answered on the page the way the old homepage
   carried its FAQ. Native details/summary, every answer present in the HTML
   whether or not it is open. The plus-that-becomes-a-minus matches the FAQ
   page; it is restated here because faq.css belongs to that page. */

.ask__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--s4), 6vw, 96px);
  align-items: start;
}

.ask__more {
  margin: var(--s4) 0 0;
  max-width: 34em;
  font-size: 15px;
  color: var(--muted);
}

.ask__more a {
  font-weight: 600;
  color: var(--royal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ask__list details {
  background: var(--surface);
  border-radius: var(--r-tile);
  margin-bottom: var(--s2);
}

.ask__list summary {
  padding: var(--s3) var(--s4);
  padding-right: calc(var(--s4) + 28px);
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  position: relative;
}

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

.ask__list summary::after {
  content: "+";
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--royal);
}

.ask__list details[open] summary::after {
  content: "\2212";
}

.ask__list summary:hover {
  color: var(--royal);
}

.ask__list p {
  margin: 0;
  padding: 0 var(--s4) var(--s3);
  max-width: 44em;
  line-height: 1.7;
  color: var(--muted);
}

.ask__list p a {
  color: var(--royal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ book */

.book {
  background: var(--navy);
  color: var(--white);
}

.book__paths {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.book__path {
  padding: var(--s4);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-panel);
}

.book__path h3 {
  color: var(--white);
}

.book__path p {
  margin: var(--s2) 0 var(--s4);
  color: var(--silver);
}

.book__faq {
  margin: var(--s4) 0 0;
  font-size: 15px;
  color: var(--silver);
}

.book__faq a {
  color: var(--ice);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.book__area {
  margin: var(--s3) 0 0;
  font-size: 14px;
  color: var(--silver);
}

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--panel-dark);
  color: var(--silver);
  padding: var(--s5) 0 var(--s4);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr;
  gap: var(--s4);
}

.footer__brand img {
  height: 60px;
  width: auto;
}

.footer__brand p {
  margin: var(--s3) 0 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__licensed {
  color: var(--ice);
}

.footer h3 {
  margin: 0 0 var(--s3);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li {
  margin: 0 0 var(--s2);
  font-size: 14px;
  line-height: 1.6;
}

.footer a:hover {
  color: var(--ice);
}

.footer__legal {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
}

.footer__legal p {
  margin: 0;
  font-size: 13px;
}

/* ------------------------------------------------------------- narrower */

@media (max-width: 980px) {
  .visit__rail {
    left: 7px;
  }

  .visit__step {
    grid-template-columns: 1fr;
    gap: var(--s3);
    padding-left: var(--s4);
  }

  .visit__step:nth-child(2n+1) .visit__text {
    justify-self: start;
  }

  .visit__step:nth-child(2n+1) .visit__photo,
  .visit__step:nth-child(2n) .visit__photo {
    order: 1;
  }

  .menu__bento {
    grid-template-columns: 1fr;
  }

  .recent__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ask__grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .commercial {
    grid-template-columns: 1fr;
  }

  .commercial__photo img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .reviews__wall {
    grid-template-columns: 1fr;
  }

  .scale__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s4);
  }

  .gift__grid {
    grid-template-columns: 1fr;
  }

  .giftcard {
    margin-left: 0;
  }

  .book__paths {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .col {
    padding-left: var(--s3);
    padding-right: var(--s3);
  }

  main section {
    padding: clamp(56px, 13vw, 72px) 0;
  }

  .menu__incl {
    grid-template-columns: 1fr;
  }

  .compare__table thead {
    display: none;
  }

  .compare__table,
  .compare__table tbody,
  .compare__table tr,
  .compare__table th,
  .compare__table td {
    display: block;
    width: auto;
  }

  .compare__table tr {
    border-top: 1px solid var(--rule);
    padding: var(--s3) 0;
  }

  .compare__table th,
  .compare__table td {
    border: 0;
    padding: var(--s1) 0;
  }

  .compare__table td::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
  }

  .compare__table td:nth-child(2)::before { content: "The tunnel wash"; }
  .compare__table td:nth-child(3)::before { content: "A detail shop"; }
  .compare__table td:nth-child(4)::before { content: "Moe's, at your address"; }

  .compare__table td:last-child {
    background: color-mix(in srgb, var(--ice) 12%, var(--white));
    padding: var(--s2);
    border-radius: var(--r-tile);
  }

  /* the strip stays two-up on a phone: four stacked frames would double
     the scroll this section is meant to save */
  .recent__strip {
    gap: var(--s3);
  }

  .returnbar__note {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .returnbar {
    transition: none;
  }
}