/* LR Best palette and type, applied to the reference's responsive grid. */
:root {
  --bg: #f6f7f4;
  --bg2: #e9ede9;
  --card: #fff;
  --ink: #151a1b;
  --ink2: #35413e;
  --mute: #536461;
  --line: #c8ceca;
  --dark: #0e1112;
  --dark2: #1a2022;
  --on-dark: #f6f7f4;
  --on-dark2: #c8ceca;
  --green: #005a3c;
  --green-hover: #003020;
  --accent-on-dark: #a6cbb6;
  --r: 6px;
  --r-s: 4px;
  --display: "TT Firs Neue", Arial, Helvetica, sans-serif;
  --text: "TT Firs Neue", Arial, Helvetica, sans-serif;
}

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #398baf;
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 50;
  padding: 12px;
  background: #fff;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

.hdr {
  background: #0e1112;
  border-bottom: 1px solid #333b3b;
}
#top {
  scroll-margin-top: calc(min(6.64vw, 102px) + 1px);
}
.logo img {
  width: clamp(128px, 13.7vw, 203px);
  height: auto;
}
.nav a,
.hdr-phone {
  color: #fff;
}
.nav a:hover,
.hdr-phone:hover {
  color: var(--accent-on-dark);
}
.hdr .btn-sm {
  background: #fff;
  color: var(--ink);
}
.hdr .btn-sm:hover {
  background: var(--bg2);
}

.offer {
  border-radius: var(--r);
}
.offer-photo::before {
  background: linear-gradient(
    90deg,
    var(--dark) 0%,
    var(--dark) 6%,
    #0e1112d9 9%,
    #0e111266 14%,
    #0e111200 25%
  );
}
.offer-text h2 {
  font-weight: 500;
  letter-spacing: -0.035em;
}
.offer-free {
  font-size: min(6.65vw, 102px);
  font-weight: 600;
  letter-spacing: -0.06em;
}
.hero h1 {
  font-weight: 500;
  letter-spacing: -0.05em;
}
.hero .h1i {
  transform: none;
  white-space: normal;
}
.hero .lead {
  color: var(--ink2);
}
.hero .proof {
  color: var(--mute);
}
.proof-panel {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  max-width: 100%;
  padding: 8px 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.proof-item {
  display: grid;
  gap: 3px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}
.proof-item + .proof-item {
  border-left: 1px solid var(--line);
}
.proof-item strong {
  color: var(--ink);
  font-size: clamp(14px, 3.7vw, 17px);
  font-weight: 600;
}
.proof-star {
  color: var(--green);
}
a.proof-item:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn,
.hero .actions .btn,
.offer-text .btn,
.dock a {
  border-radius: 4px;
  font-weight: 600;
  transition:
    background-color 180ms ease,
    transform 180ms ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-ghost {
  border-color: var(--line);
}
.price,
.vit-price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vit-name {
  font-weight: 600;
}
.tab {
  border-radius: 4px;
}
.price-disclaimer {
  margin-top: 10px;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.4;
}
.price-disclaimer + .pricetable {
  margin-top: 12px;
}
.towing-actions {
  gap: 12px 20px;
}
.pricetable,
.work,
.review,
.person,
.step,
.story {
  border-radius: var(--r);
}
.pin-entry {
  left: 16%;
  top: 50%;
}
.pin-workshop {
  left: 63.5%;
  top: 47%;
}
.ymap__img {
  background-image: url("img/map.png");
}
.ymap__btn {
  border-radius: 4px;
}
.ymap:hover .ymap__btn {
  background: var(--bg2);
}
.sec-dark .actions a:first-child {
  background: #fff;
  color: var(--ink);
}
.sec-dark .actions a:first-child:hover {
  background: var(--bg2);
}
.sec-dark .btn:hover {
  background: #c8ded0;
}
.dock {
  background: var(--dark);
}
.dock a:first-child {
  background: #fff;
  color: var(--ink);
}

.foot {
  background: var(--dark);
  color: var(--on-dark2);
  padding-bottom: 40px;
  border-top: 1px solid #333b3b;
}
.foot .wrap {
  gap: 12px 24px;
}
.legal {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 16px;
  border-top: 1px solid #333b3b;
}
.legal a {
  color: var(--on-dark);
  text-underline-offset: 4px;
}
.landing-cookie-settings {
  padding: 0;
  border: 0;
  color: var(--on-dark);
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.landing-cookie-panel {
  position: fixed;
  z-index: 45;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 620px;
  margin-left: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 24px #0e111226;
  font-size: 15px;
  line-height: 1.45;
}
.landing-cookie-panel h2 {
  margin: 0 0 6px;
  font-size: 21px;
}
.landing-cookie-panel p {
  margin: 0 0 12px;
}
.landing-cookie-panel p a {
  text-decoration: underline;
}
.landing-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.landing-cookie-actions .btn {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
}
.landing-cookie-actions [data-analytics-choice='declined'] {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}
@media (max-width: 820px) {
  .landing-cookie-panel {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .hero h1 {
    font-size: 5vw;
  }
}
@media (max-width: 820px) {
  #top {
    scroll-margin-top: 65px;
  }
  .logo img {
    width: 130px;
    height: auto;
  }
  .hdr-right .btn-sm {
    display: inline-flex;
    padding-inline: 12px;
    font-size: 14px;
  }
  .offer-photo::before {
    background: linear-gradient(180deg, #0e111200 74%, var(--dark) 100%);
  }
  .offer-free {
    font-size: clamp(43px, 14vw, 66px);
  }
  .actions.contact .btn:first-child {
    grid-column: auto;
  }
  .actions.contact .btn,
  .hero .actions.contact .btn {
    font-size: clamp(13px, 4vw, 17px);
  }
  .foot {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .legal {
    gap: 0 20px;
  }
}
@media (max-width: 460px) {
  .hdr .hdr-phone {
    display: none;
  }
}
@media (max-width: 370px) {
  .proof-item {
    padding-inline: 8px;
    font-size: 11px;
  }
  h2 {
    font-size: 34px;
  }
  .tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  .tab {
    padding-inline: 12px;
    font-size: 15px;
  }
  .row .price {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .offer-text {
    animation: arrive 420ms ease-out both;
  }
  @keyframes arrive {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
  .btn:hover,
  .vit:hover .vit-ph img {
    transform: none;
  }
}