/* 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);
}

/* ------------------------------------------------------------ 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);
}

/* ------------------------------------------------------------------ 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;
  }

  .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);
  }

  .returnbar__note {
    display: none;
  }

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

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