#services-page {
  --svc-blue-950: #071a3a;
  --svc-blue-900: #0b2454;
  --svc-blue-800: #123b83;
  --svc-blue-700: #1854ba;
  --svc-blue-600: #2468e8;
  --svc-cyan: #29c7e8;
  --svc-ink: #0f172a;
  --svc-muted: #5e6c84;
  --svc-line: #dce5f2;
  --svc-soft: #f3f7fc;
  --svc-white: #fff;
  --svc-amber: #f6a90a;
  --svc-green: #0d9f6e;
  overflow-x: clip;
  background:
    radial-gradient(circle at 10% 30%, rgba(36, 104, 232, .07), transparent 28rem),
    #f5f8fc;
  color: var(--svc-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

#services-page button,
#services-page input,
#services-page select,
#services-page textarea {
  font: inherit;
}

.svc-container {
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
}

.svc-hero {
  position: relative;
  min-height: clamp(620px, 72vh, 760px);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #071324 url("assets/images/services-detailing-hero-20260726.jpg") center right / cover no-repeat;
}

.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 13, 31, .98) 0%, rgba(4, 16, 37, .94) 31%, rgba(4, 16, 37, .64) 53%, rgba(3, 13, 31, .14) 79%),
    linear-gradient(0deg, rgba(3, 13, 31, .84) 0%, transparent 43%);
}

.svc-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 180px;
  background: linear-gradient(0deg, rgba(6, 23, 52, .72), transparent);
}

.svc-hero__inner {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 76px 0 142px;
}

.svc-hero__copy {
  max-width: 680px;
  color: white;
}

.svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(117, 205, 255, .32);
  border-radius: 999px;
  background: rgba(17, 72, 142, .34);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  color: #cfeeff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.svc-eyebrow i {
  color: #63d9f2;
}

.svc-hero h1 {
  margin: 22px 0 16px;
  max-width: 650px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 900;
  text-wrap: balance;
}

.svc-hero h1 span {
  color: #61d8f2;
}

.svc-hero__lead {
  max-width: 610px;
  margin: 0;
  color: #d7e2f1;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.62;
}

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.svc-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 13px;
  padding: 0 20px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.svc-btn:hover {
  transform: translateY(-2px);
}

.svc-btn--primary {
  background: linear-gradient(135deg, #2b76f0, #1b54ca);
  box-shadow: 0 13px 34px rgba(18, 83, 205, .35);
  color: white;
}

.svc-btn--primary:hover {
  box-shadow: 0 16px 38px rgba(18, 83, 205, .46);
}

.svc-btn--glass {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: white;
  backdrop-filter: blur(10px);
}

.svc-hero__micro {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  color: #d9e6f5;
  font-size: 13px;
  font-weight: 700;
}

.svc-hero__micro li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.svc-hero__micro i {
  color: #45d19b;
}

.svc-hero__highlights {
  position: absolute;
  inset: auto 0 0;
}

.svc-highlight-grid {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.15);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  box-shadow: 0 -15px 45px rgba(0,0,0,.16);
  background: rgba(9, 29, 63, .84);
  backdrop-filter: blur(18px);
}

.svc-highlight {
  min-height: 104px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  padding: 22px 25px;
  color: white;
}

.svc-highlight + .svc-highlight {
  border-left: 1px solid rgba(255,255,255,.12);
}

.svc-highlight__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(104, 216, 240, .18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(44, 128, 224, .28), rgba(61, 170, 241, .12));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  color: #68d8f0;
  font-size: 21px;
  line-height: 1;
}

.svc-highlight__icon i {
  width: 1.25em;
  text-align: center;
}

.svc-highlight > div {
  min-width: 0;
}

.svc-highlight > div > strong,
.svc-highlight > div > span {
  display: block;
}

.svc-highlight > div > strong {
  font-size: 17px;
  line-height: 1.25;
}

.svc-highlight > div > span {
  margin-top: 4px;
  color: #b5c4d8;
  font-size: 12px;
  line-height: 1.45;
}

.svc-jumpbar {
  position: sticky;
  top: 0;
  z-index: 22;
  border-bottom: 1px solid rgba(19, 54, 104, .09);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 28px rgba(15, 38, 73, .07);
  backdrop-filter: blur(16px);
}

.svc-jumpbar__inner {
  width: min(1640px, calc(100% - 32px));
  min-height: 82px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  overflow: visible;
  scrollbar-width: none;
}

.svc-jumpbar__inner::-webkit-scrollbar {
  display: none;
}

.svc-jumpbar button {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #dce6f3;
  border-radius: 15px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  color: #42516a;
  box-shadow: 0 3px 12px rgba(15, 42, 80, .05);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.svc-jumpbar__thumb {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border: 1px solid #dce7f5;
  border-radius: 11px;
  background: #eaf2ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

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

.svc-jumpbar button:hover {
  border-color: #9dbff4;
  background: #f5f9ff;
  color: var(--svc-blue-700);
  box-shadow: 0 8px 20px rgba(24, 91, 206, .11);
  transform: translateY(-1px);
}

.svc-jumpbar button.is-active {
  border-color: #2c6dea;
  background: linear-gradient(135deg, #eef5ff, #fff);
  color: var(--svc-blue-700);
  box-shadow: 0 0 0 3px rgba(44, 109, 234, .13), 0 9px 22px rgba(24, 91, 206, .13);
}

.svc-jumpbar button.is-active .svc-jumpbar__thumb {
  border-color: #6ca0f4;
  box-shadow: 0 0 0 2px rgba(44, 109, 234, .12);
}

.svc-jumpbar button:focus-visible {
  outline: 3px solid rgba(44, 109, 234, .28);
  outline-offset: 2px;
}

.svc-section {
  padding: 82px 0;
  scroll-margin-top: 86px;
}

.svc-section--white {
  background: white;
}

.svc-section--dark {
  background:
    radial-gradient(circle at 90% 10%, rgba(36, 104, 232, .18), transparent 32rem),
    #071a3a;
  color: white;
}

.svc-section__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 31px;
}

.svc-section__head > div:first-child {
  max-width: 720px;
}

.svc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--svc-blue-600);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.svc-section--dark .svc-kicker {
  color: #67daf2;
}

.svc-section h2 {
  margin: 0;
  color: var(--svc-ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.038em;
  font-weight: 900;
  text-wrap: balance;
}

.svc-section--dark h2 {
  color: white;
}

.svc-section__intro {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--svc-muted);
  font-size: 16px;
  line-height: 1.65;
}

.svc-section--dark .svc-section__intro {
  color: #b9c7da;
}

.svc-price-note {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9e5f5;
  border-radius: 999px;
  padding: 9px 13px;
  background: white;
  color: #50617a;
  font-size: 12px;
  font-weight: 800;
}

.svc-price-note i {
  color: var(--svc-blue-600);
}

.svc-size-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 32px;
  padding: 18px 20px;
  border: 1px solid #d9e4f1;
  border-radius: 17px;
  background: white;
  box-shadow: 0 9px 30px rgba(20, 49, 91, .055);
}

.svc-size-picker__title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #23334e;
  font-weight: 900;
}

.svc-size-picker__title i {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf2ff;
  color: var(--svc-blue-600);
}

.svc-size-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 7px;
}

.svc-size-options button {
  min-height: 42px;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  padding: 7px 12px;
  background: #f8fafc;
  color: #516078;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.svc-size-options button:hover {
  border-color: #b5cdf3;
  color: var(--svc-blue-700);
}

.svc-size-options button.is-active {
  border-color: var(--svc-blue-600);
  background: var(--svc-blue-600);
  color: white;
  box-shadow: 0 7px 18px rgba(36, 104, 232, .22);
}

.svc-selfwash-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 26px;
  align-items: stretch;
}

.svc-selfwash-photo {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 25px 70px rgba(12, 38, 77, .17);
  background: #0b1f44;
}

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

.svc-selfwash-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3, 13, 32, .9), transparent 58%);
}

.svc-selfwash-photo__caption {
  position: absolute;
  inset: auto 26px 25px;
  z-index: 1;
  color: white;
}

.svc-selfwash-price {
  display: flex;
  align-items: end;
  gap: 9px;
  margin-bottom: 7px;
}

.svc-selfwash-price strong {
  font-size: 43px;
  line-height: 1;
}

.svc-selfwash-price span {
  padding-bottom: 4px;
  color: #cfe0f4;
  font-size: 14px;
  font-weight: 700;
}

.svc-selfwash-photo__caption p {
  max-width: 520px;
  margin: 0;
  color: #d8e3f1;
  font-size: 13px;
  line-height: 1.55;
}

.svc-programs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.svc-program {
  min-height: 118px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  background: white;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.svc-program:hover {
  transform: translateY(-3px);
  border-color: #bcd2f3;
  box-shadow: 0 13px 30px rgba(19, 59, 118, .09);
}

.svc-program__banner {
  position: relative;
  height: 72px;
  overflow: hidden;
  background: #0b244d;
}

.svc-program__banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.svc-program__banner span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(4, 17, 38, .55));
}

.svc-program:hover .svc-program__banner img,
.svc-service-card:hover .svc-card-banner img,
.svc-dark-card:hover .svc-card-banner img {
  transform: scale(1.045);
}

.svc-program__content {
  padding: 14px 16px 16px;
}

.svc-program__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.svc-program__credit {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eaf9f3;
  color: var(--svc-green);
  font-size: 12px;
  font-weight: 900;
}

.svc-program strong {
  display: block;
  color: #17243a;
  font-size: 14px;
  line-height: 1.35;
}

.svc-program p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.45;
}

.svc-program-tip {
  grid-column: 1 / -1;
  display: flex;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid #bfe9da;
  border-radius: 15px;
  background: #edfbf6;
  color: #276b55;
  font-size: 12px;
  line-height: 1.5;
}

.svc-program-tip i {
  margin-top: 2px;
  color: var(--svc-green);
}

.svc-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.svc-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svc-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid #dce5f2;
  border-radius: 21px;
  background: white;
  box-shadow: 0 12px 35px rgba(19, 50, 94, .055);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.svc-service-card:hover {
  transform: translateY(-5px);
  border-color: #b9d0f3;
  box-shadow: 0 22px 48px rgba(18, 57, 115, .12);
}

.svc-service-card--featured {
  border-color: #72a5ee;
  box-shadow: 0 17px 42px rgba(36, 104, 232, .14);
}

.svc-service-card__flag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  border-radius: 999px;
  padding: 6px 9px;
  background: #e8f1ff;
  color: var(--svc-blue-700);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.svc-card-banner {
  position: relative;
  height: 126px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #0a234b;
}

.svc-card-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .38s ease;
}

.svc-card-banner__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 20, 44, .02) 38%, rgba(5, 20, 44, .5)),
    linear-gradient(90deg, rgba(6, 24, 52, .12), transparent 50%);
  pointer-events: none;
}

.svc-card-banner--dark {
  height: 132px;
}

.svc-service-card__head {
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: 20px 22px;
  background: linear-gradient(150deg, #f7faff, #edf4fe);
}

.svc-service-card h3 {
  margin: 0;
  color: #11213b;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 900;
}

.svc-service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 19px 22px 22px;
}

.svc-service-card__body > p {
  min-height: 55px;
  margin: 0;
  color: #6b7890;
  font-size: 13px;
  line-height: 1.55;
}

.svc-service-card ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 19px;
  padding: 0;
  list-style: none;
  color: #44536a;
  font-size: 12px;
}

.svc-service-card li {
  display: flex;
  gap: 8px;
  line-height: 1.4;
}

.svc-service-card li i {
  margin-top: 2px;
  color: var(--svc-green);
}

.svc-service-card__price {
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #edf1f6;
}

.svc-service-card__price small {
  display: block;
  margin-bottom: 3px;
  color: #778399;
  font-size: 11px;
  font-weight: 700;
}

.svc-service-card__price strong {
  display: block;
  color: var(--svc-blue-900);
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.svc-service-card__price span {
  display: block;
  margin-top: 3px;
  color: #7b8799;
  font-size: 11px;
}

.svc-service-card__choose {
  width: 100%;
  min-height: 43px;
  margin-top: 15px;
  border: 1px solid #cddcf0;
  border-radius: 11px;
  background: white;
  color: var(--svc-blue-700);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.svc-service-card__choose:hover {
  border-color: var(--svc-blue-600);
  background: #edf4ff;
}

.svc-service-card--featured .svc-service-card__choose {
  border-color: var(--svc-blue-600);
  background: var(--svc-blue-600);
  color: white;
}

.svc-dark-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}

.svc-dark-card-grid--ppf {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
  border-radius: 22px;
  background: #071a3a;
}

.svc-dark-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(145, 180, 228, .18);
  border-radius: 21px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  color: white;
}

.svc-dark-card__content {
  min-height: 240px;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 23px 23px;
}

.svc-dark-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.svc-dark-card p {
  margin: 9px 0 0;
  color: #b8c6da;
  font-size: 12px;
  line-height: 1.55;
}

.svc-dark-card__price {
  margin-top: auto;
  padding-top: 19px;
}

.svc-dark-card__price small,
.svc-dark-card__price strong,
.svc-dark-card__price span {
  display: block;
}

.svc-dark-card__price small {
  color: #91a4bf;
  font-size: 11px;
}

.svc-dark-card__price strong {
  margin-top: 3px;
  color: white;
  font-size: 24px;
}

.svc-dark-card__price span {
  margin-top: 2px;
  color: #9eb0c8;
  font-size: 11px;
}

.svc-dark-card button {
  width: 100%;
  min-height: 42px;
  margin-top: 15px;
  border: 1px solid rgba(113, 185, 243, .28);
  border-radius: 11px;
  background: rgba(29, 103, 222, .15);
  color: #d8f4ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.svc-dark-card button:hover {
  background: rgba(36, 104, 232, .32);
}

.svc-legal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid #f1d289;
  border-radius: 16px;
  background: #fff9e9;
  color: #664a11;
}

.svc-legal__icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #ffecb7;
  color: #b67100;
}

.svc-legal strong {
  display: block;
  margin-bottom: 3px;
  color: #5a3b00;
  font-size: 13px;
}

.svc-legal p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.svc-material-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.svc-material {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  padding: 24px 21px 21px;
  border: 1px solid #dde5ef;
  border-radius: 17px;
  background: white;
  box-shadow: 0 9px 24px rgba(24, 63, 116, .045);
}

.svc-material::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--svc-blue-700), var(--svc-cyan));
}

.svc-material strong {
  display: block;
  color: #1a2941;
  font-size: 15px;
  line-height: 1.35;
}

.svc-material p {
  margin: 9px 0 0;
  color: #6c7890;
  font-size: 12px;
  line-height: 1.5;
}

.svc-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 30px;
}

.svc-process__step {
  position: relative;
  padding-right: 28px;
}

.svc-process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 10px;
  width: calc(100% - 54px);
  height: 1px;
  transform: translateX(100%);
  background: #c9d7e9;
}

.svc-process__number {
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 5px solid #f5f8fc;
  border-radius: 999px;
  background: var(--svc-blue-600);
  box-shadow: 0 0 0 1px #bbd0ef;
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.svc-process__step strong {
  display: block;
  margin-top: 13px;
  color: #20304a;
  font-size: 14px;
}

.svc-process__step p {
  margin: 5px 0 0;
  color: #6f7d92;
  font-size: 11px;
  line-height: 1.5;
}

.svc-booking {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  overflow: hidden;
  border: 1px solid #d4e0ef;
  border-radius: 27px;
  background: white;
  box-shadow: 0 30px 85px rgba(12, 44, 90, .12);
}

.svc-booking__aside {
  position: relative;
  padding: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 12%, rgba(85, 207, 239, .2), transparent 20rem),
    linear-gradient(145deg, #071a3a, #103b80);
  color: white;
}

.svc-booking__aside::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border: 45px solid rgba(255,255,255,.035);
  border-radius: 50%;
}

.svc-booking__aside h2 {
  color: white;
  font-size: clamp(31px, 4vw, 45px);
}

.svc-booking__aside > p {
  margin: 14px 0 0;
  color: #bccce0;
  font-size: 14px;
  line-height: 1.65;
}

.svc-booking__summary {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.075);
}

.svc-booking__summary small,
.svc-booking__summary strong,
.svc-booking__summary span {
  display: block;
}

.svc-booking__summary small {
  color: #96aac4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.svc-booking__summary strong {
  margin-top: 9px;
  font-size: 18px;
  line-height: 1.35;
}

.svc-booking__summary span {
  margin-top: 8px;
  color: #67daf2;
  font-size: 24px;
  font-weight: 900;
}

.svc-booking__trust {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 23px 0 0;
  padding: 0;
  list-style: none;
  color: #dce6f3;
  font-size: 12px;
}

.svc-booking__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.svc-booking__trust i {
  color: #47d8a3;
}

.svc-booking__form-wrap {
  padding: 40px;
}

.svc-booking__form-wrap h3 {
  margin: 0 0 5px;
  color: #15243c;
  font-size: 23px;
  font-weight: 900;
}

.svc-booking__form-wrap > p {
  margin: 0 0 24px;
  color: #6b7890;
  font-size: 13px;
}

.svc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.svc-field {
  display: grid;
  gap: 6px;
}

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

.svc-field label {
  color: #34435a;
  font-size: 12px;
  font-weight: 800;
}

.svc-field input,
.svc-field select,
.svc-field textarea {
  width: 100%;
  border: 1px solid #cfdaea;
  border-radius: 11px;
  outline: none;
  padding: 11px 12px;
  background: #fbfdff;
  color: #14223a;
  font-size: 13px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.svc-field input,
.svc-field select {
  min-height: 46px;
}

.svc-field textarea {
  min-height: 104px;
  resize: vertical;
}

.svc-field input:focus,
.svc-field select:focus,
.svc-field textarea:focus {
  border-color: var(--svc-blue-600);
  background: white;
  box-shadow: 0 0 0 3px rgba(36, 104, 232, .11);
}

.svc-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #6b7890;
  font-size: 11px;
  line-height: 1.45;
}

.svc-consent input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--svc-blue-600);
}

.svc-form-submit {
  grid-column: 1 / -1;
  min-height: 51px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2b76f0, #1551c2);
  box-shadow: 0 12px 30px rgba(23, 82, 192, .22);
  color: white;
  cursor: pointer;
  font-weight: 900;
}

.svc-form-submit:hover {
  filter: brightness(1.04);
}

.svc-form-submit:disabled {
  cursor: wait;
  opacity: .7;
}

.svc-form-success {
  display: none;
  grid-column: 1 / -1;
  gap: 11px;
  align-items: flex-start;
  padding: 15px;
  border: 1px solid #a7e4ce;
  border-radius: 12px;
  background: #edfbf6;
  color: #186449;
  font-size: 12px;
  line-height: 1.5;
}

.svc-form-success.is-visible {
  display: flex;
}

.svc-form-success i {
  margin-top: 2px;
  color: var(--svc-green);
  font-size: 17px;
}

.svc-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.svc-faq {
  align-self: start;
  width: 100%;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 15px;
  background: white;
}

.svc-faq summary {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: #24334b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

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

.svc-faq summary::after {
  content: "+";
  color: var(--svc-blue-600);
  font-size: 21px;
  font-weight: 500;
}

.svc-faq[open] summary::after {
  content: "–";
}

.svc-faq p {
  margin: 0;
  padding: 0 18px 17px;
  color: #68768c;
  font-size: 12px;
  line-height: 1.65;
}

.svc-bottom-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 15px 17px;
  border-radius: 14px;
  background: #eef3f9;
  color: #617087;
  font-size: 11px;
  line-height: 1.55;
}

.svc-bottom-note i {
  margin-top: 2px;
  color: var(--svc-blue-600);
}

@media (max-width: 1100px) {
  .svc-card-grid,
  .svc-dark-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .svc-material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .svc-hero {
    min-height: 700px;
    background-position: 65% center;
  }

  .svc-hero::before {
    background:
      linear-gradient(90deg, rgba(3, 13, 31, .97), rgba(3, 13, 31, .74) 70%, rgba(3, 13, 31, .43)),
      linear-gradient(0deg, rgba(3, 13, 31, .89), transparent 50%);
  }

  .svc-highlight {
    padding: 18px;
  }

  .svc-jumpbar__inner {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 184px;
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .svc-jumpbar button {
    scroll-snap-align: start;
  }

  .svc-size-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .svc-selfwash-feature,
  .svc-booking {
    grid-template-columns: 1fr;
  }

  .svc-selfwash-photo {
    min-height: 420px;
  }

  .svc-booking__aside,
  .svc-booking__form-wrap {
    padding: 32px;
  }
}

@media (max-width: 720px) {
  .svc-container,
  .svc-hero__inner,
  .svc-highlight-grid {
    width: min(100% - 28px, 1240px);
  }

  .svc-hero {
    min-height: 770px;
    background-position: 69% center;
  }

  .svc-hero::before {
    background:
      linear-gradient(90deg, rgba(3, 13, 31, .98), rgba(3, 13, 31, .8)),
      linear-gradient(0deg, rgba(3, 13, 31, .93), transparent 54%);
  }

  .svc-hero__inner {
    padding: 64px 0 255px;
  }

  .svc-hero h1 {
    font-size: clamp(39px, 12vw, 55px);
  }

  .svc-hero__lead {
    font-size: 16px;
  }

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

  .svc-btn {
    width: 100%;
  }

  .svc-hero__micro {
    display: grid;
    gap: 8px;
  }

  .svc-highlight-grid {
    grid-template-columns: 1fr;
    border-radius: 19px 19px 0 0;
  }

  .svc-highlight {
    min-height: 68px;
    padding: 12px 16px;
  }

  .svc-highlight + .svc-highlight {
    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 0;
  }

  .svc-highlight__icon {
    width: 39px;
    height: 39px;
    border-radius: 11px;
  }

  .svc-highlight > div > strong {
    font-size: 14px;
  }

  .svc-highlight > div > span {
    margin-top: 1px;
    font-size: 11px;
  }

  .svc-jumpbar__inner {
    width: calc(100% - 16px);
    min-height: 72px;
    gap: 8px;
    padding: 8px 0;
    grid-auto-columns: 188px;
  }

  .svc-jumpbar button {
    min-height: 54px;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border-radius: 13px;
    font-size: 12px;
  }

  .svc-jumpbar__thumb {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 9px;
  }

  .svc-section {
    padding: 59px 0;
  }

  .svc-section__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .svc-section h2 {
    font-size: clamp(29px, 9vw, 39px);
  }

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

  .svc-programs,
  .svc-card-grid,
  .svc-dark-card-grid,
  .svc-material-grid,
  .svc-faq-grid {
    grid-template-columns: 1fr;
  }

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

  .svc-selfwash-photo {
    min-height: 360px;
  }

  .svc-program {
    min-height: 0;
  }

  .svc-process {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .svc-process__step {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 13px;
    padding: 0;
  }

  .svc-process__step:not(:last-child)::after {
    top: 41px;
    right: auto;
    bottom: -17px;
    left: 19px;
    width: 1px;
    height: auto;
    transform: none;
  }

  .svc-process__number {
    grid-row: 1 / span 2;
  }

  .svc-process__step strong {
    margin-top: 2px;
  }

  .svc-process__step p {
    grid-column: 2;
  }

  .svc-booking {
    border-radius: 21px;
  }

  .svc-booking__aside,
  .svc-booking__form-wrap {
    padding: 26px 20px;
  }

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

  .svc-field--full,
  .svc-consent,
  .svc-form-submit,
  .svc-form-success {
    grid-column: 1;
  }
}

@media (max-width: 390px) {
  .svc-container,
  .svc-hero__inner,
  .svc-highlight-grid {
    width: min(100% - 20px, 1240px);
  }

  .svc-eyebrow {
    font-size: 10px;
  }

  .svc-hero h1 {
    font-size: 38px;
  }

  .svc-service-card__head,
  .svc-service-card__body,
  .svc-dark-card {
    padding-left: 18px;
    padding-right: 18px;
  }
}

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