/*
 * Bastion site design layer (Claude, 2026-10-09).
 * Loaded after unified-site.css on every page. It only restyles the shared
 * us-* components, the global header, footer and phone call bar; markup and
 * behaviour stay in the unified theme. Compact scale, the colour tones and
 * straight accent lines approved by the owner on the Manitowoc page.
 */

:root {
  --sp-ink: #0e2230;
  --sp-text: #2a3c48;
  --sp-muted: #5a6a75;
  --sp-brand: #006680;
  --sp-brand-2: #00708a;
  --sp-brand-dark: #004d60;
  --sp-blue: #2b55c0;
  --sp-violet: #5f45c4;
  --sp-green: #1b7a43;
  --sp-amber: #955400;
  --sp-rose: #b0304f;
  --sp-sky: #0a6f9c;
  --sp-ice: #e8f4f8;
  --sp-ice-soft: #f4f9fb;
  --sp-line: #dde7ec;
  --sp-line-strong: #c4d3da;
  --sp-star: #e9a425;
  --sp-shadow: 0 1px 2px rgba(14, 34, 48, .05), 0 8px 24px rgba(14, 34, 48, .07);
  --sp-shadow-lg: 0 1px 3px rgba(14, 34, 48, .05), 0 16px 40px rgba(6, 47, 66, .12);
}

/* ------------------------------------------------------------------ */
/* Global header                                                       */
/* ------------------------------------------------------------------ */

.site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--sp-line);
}

.site-header .header-inner {
  gap: 20px;
  min-height: 66px;
}

.site-header .brand-logo-img {
  height: auto;
  width: 172px;
}

.site-header .brand-tagline {
  color: var(--sp-muted);
  font-size: 12px;
  letter-spacing: .01em;
  margin-top: 1px;
}

.site-header .desktop-nav {
  gap: 4px;
}

.site-header .desktop-nav a {
  border-radius: 8px;
  color: var(--sp-ink);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 11px;
}

.site-header .desktop-nav a:hover {
  background: var(--sp-ice-soft);
  color: var(--sp-brand-dark);
}

.site-header .header-actions {
  gap: 8px;
}

.site-header .header-actions .btn {
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  padding: 9px 16px;
}

.site-header .header-actions .btn-ghost {
  border-color: var(--sp-line-strong);
}

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

.us-page {
  --us-ink: var(--sp-ink);
  --us-text: var(--sp-text);
  --us-muted: var(--sp-muted);
  --us-brand: var(--sp-brand);
  --us-brand-dark: var(--sp-brand-dark);
  --us-sky: var(--sp-ice);
  --us-soft: var(--sp-ice-soft);
  --us-line: var(--sp-line);
  font-size: 15px;
  line-height: 1.55;
}

.us-page h1,
.us-page h2,
.us-page h3 {
  font-weight: 700;
  letter-spacing: -.015em;
}

.us-page p {
  text-wrap: pretty;
}

.us-shell {
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
}

.us-eyebrow {
  font-size: 12px;
  letter-spacing: .08em;
  margin-bottom: 8px !important;
}

.us-section {
  padding: 52px 0;
}

.us-section-head {
  margin-bottom: 22px;
  max-width: 660px;
}

.us-section-head h2,
.us-diagnosis h2,
.us-home-about h2 {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.15;
}

.us-section-head > p:last-child {
  font-size: 14.5px;
  margin-top: 8px;
}

/* Buttons */
.us-btn {
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
}

.us-btn .us-icon {
  height: 17px;
  width: 17px;
}

.us-page .us-btn--primary {
  box-shadow: 0 6px 16px rgba(0, 102, 128, .2);
}

.us-page .us-btn--secondary {
  border-color: var(--sp-line-strong);
}

.us-btn:focus-visible,
.us-page a:focus-visible,
.us-page summary:focus-visible {
  outline-color: var(--sp-brand);
}

/* Breadcrumbs */
.us-breadcrumbs {
  font-size: 12px;
}

.us-breadcrumbs .us-shell {
  min-height: 36px;
}

/* ------------------------------------------------------------------ */
/* Hero (inner pages)                                                  */
/* ------------------------------------------------------------------ */

.us-hero {
  background:
    radial-gradient(520px 300px at 92% 6%, rgba(43, 85, 192, .08), transparent 70%),
    radial-gradient(560px 320px at 70% 0%, rgba(0, 112, 138, .10), transparent 70%),
    linear-gradient(180deg, #f2f8fb 0%, #fff 100%);
  border-bottom: 1px solid var(--sp-line);
  padding: 32px 0 40px;
}

.us-hero__grid {
  gap: 44px;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
}

.us-hero h1 {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 18ch;
}

.us-hero__lead {
  font-size: 16px;
  margin-top: 12px !important;
  max-width: 36em;
}

.us-brand-logo {
  height: 44px;
  margin-bottom: 12px;
}

.us-brand-logo img {
  max-height: 40px;
}

.us-actions {
  gap: 10px;
  margin-top: 20px;
}

.us-highlights {
  border-top: 1px solid var(--sp-line);
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 14px;
}

.us-highlights li {
  font-size: 13.5px;
  font-weight: 600;
  gap: 6px;
}

.us-highlights .us-icon {
  height: 15px;
  width: 15px;
}

.us-highlights li:nth-child(1) .us-icon { color: var(--sp-amber); }
.us-highlights li:nth-child(2) .us-icon { color: var(--sp-violet); }
.us-highlights li:nth-child(3) .us-icon { color: var(--sp-green); }

.us-rating {
  font-size: 13.5px;
  gap: 6px;
  margin-top: 12px;
}

.us-rating__stars {
  color: var(--sp-star);
}

.us-rating__stars .us-icon {
  height: 15px;
  width: 15px;
}

.us-rating strong {
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Booking card                                                        */
/* ------------------------------------------------------------------ */

.us-booking .us-booking-card {
  border: 1px solid var(--sp-line);
  border-radius: 18px;
  box-shadow: var(--sp-shadow-lg);
  max-width: 440px;
  padding: 22px 22px 20px;
  position: relative;
}

.us-booking .us-booking-card::before {
  background: linear-gradient(90deg, var(--sp-brand-2) 0%, var(--sp-blue) 55%, var(--sp-violet) 100%);
  content: "";
  height: 2px;
  left: 22px;
  position: absolute;
  right: 22px;
  top: -1px;
}

.us-booking .booking-card h2 {
  font-size: 19px;
  letter-spacing: -.015em;
  margin: 2px 0 4px;
  text-align: left;
}

.us-booking .booking-card > p {
  font-size: 13.5px;
  margin-bottom: 12px;
  text-align: left;
}

.us-booking .booking-form {
  gap: 10px;
}

.us-booking .booking-form label > span,
.us-booking .bastion-service-setting legend {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.us-booking .booking-form input,
.us-booking .booking-form select,
.us-booking .booking-form textarea {
  border-color: #8396a0;
  border-radius: 10px;
  font-size: 16px;
  min-height: 44px;
  padding: 9px 12px;
}

.us-booking .booking-form select {
  background-position: right 8px center;
  padding-left: 10px;
  padding-right: 28px;
}

.us-booking .booking-form .btn-full {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  max-width: none;
  min-height: 46px;
}

.us-booking .bastion-service-setting label > span {
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
}

/* ------------------------------------------------------------------ */
/* Service terms strip                                                 */
/* ------------------------------------------------------------------ */

.us-terms {
  background: #fff;
  border-bottom: 0;
  padding: 16px 0 4px;
}

.us-terms__grid {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(14, 34, 48, .04);
  padding: 0;
}

.us-terms__grid > div,
.us-terms__grid > div:first-child {
  border-left: 1px solid var(--sp-line);
  padding: 12px 16px 12px 16px;
  position: relative;
}

.us-terms__grid > div:first-child {
  border-left: 0;
}

.us-terms__grid > div::before {
  background: var(--sp-tone, var(--sp-brand-2));
  content: "";
  height: 2px;
  left: 16px;
  position: absolute;
  right: 16px;
  top: -1px;
}

.us-terms__grid > div:nth-child(1) { --sp-tone: var(--sp-green); }
.us-terms__grid > div:nth-child(2) { --sp-tone: var(--sp-blue); }
.us-terms__grid > div:nth-child(3) { --sp-tone: var(--sp-amber); }
.us-terms__grid > div:nth-child(4) { --sp-tone: var(--sp-violet); }

.us-terms__grid strong {
  font-size: 13.5px;
  font-weight: 700;
}

.us-terms__grid span {
  font-size: 12px;
  margin-top: 1px;
}

/* ------------------------------------------------------------------ */
/* Brands: dense logo wall                                             */
/* ------------------------------------------------------------------ */

.us-brand-grid {
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  max-width: none;
}

.us-brand-link {
  border-radius: 12px;
  height: 64px;
  padding: 10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.us-brand-link:hover {
  border-color: var(--sp-line-strong);
  box-shadow: var(--sp-shadow);
}

.us-brand-link img {
  max-height: 32px;
  max-width: min(100%, 104px);
}

/* ------------------------------------------------------------------ */
/* Problems, diagnosis, check list                                     */
/* ------------------------------------------------------------------ */

.us-issue-grid {
  gap: 12px;
}

.us-issue,
.us-issue.us-tone-2,
.us-issue.us-tone-3 {
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
}

.us-issue::before {
  background: var(--sp-tone, var(--sp-brand-2));
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: -1px;
}

.us-issue:nth-child(6n + 1) { --sp-tone: #0a6f9c; }
.us-issue:nth-child(6n + 2) { --sp-tone: #955400; }
.us-issue:nth-child(6n + 3) { --sp-tone: #5f45c4; }
.us-issue:nth-child(6n + 4) { --sp-tone: #2b55c0; }
.us-issue:nth-child(6n + 5) { --sp-tone: #00708a; }
.us-issue:nth-child(6n + 6) { --sp-tone: #1b7a43; }

.us-issue__number {
  color: var(--sp-tone, var(--sp-muted));
  font-size: 12px;
}

.us-issue h3 {
  font-size: 16px;
  line-height: 1.3;
  margin-top: 4px;
}

.us-issue p {
  font-size: 14px;
  margin-top: 6px;
}

.us-diagnosis {
  gap: 44px;
}

.us-diagnosis > div > p:last-child {
  font-size: 14.5px;
  margin-top: 10px;
}

.us-check-list {
  gap: 8px;
}

.us-check-list li {
  border-radius: 12px;
  font-size: 14.5px;
  gap: 10px;
  padding: 12px 14px;
}

.us-check-list .us-icon {
  color: var(--sp-green);
  height: 18px;
  width: 18px;
}

/* ------------------------------------------------------------------ */
/* Dark band (about / maintenance)                                     */
/* ------------------------------------------------------------------ */

.us-maintenance {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(43, 85, 192, .28), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(0, 150, 170, .30), transparent 70%),
    #062f42;
}

.us-home-about,
.us-maintenance .us-shell {
  gap: 36px;
}

.us-maintenance__grid {
  background: transparent;
  border: 0;
  gap: 10px;
}

.us-maintenance__grid article,
.us-maintenance__grid article:nth-child(2),
.us-maintenance__grid article:nth-child(3) {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 18px;
  position: relative;
}

.us-maintenance__grid article::before {
  background: var(--sp-tone, #7fd6e8);
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: -1px;
}

.us-maintenance__grid article:nth-child(3n + 1) { --sp-tone: #7fd6e8; }
.us-maintenance__grid article:nth-child(3n + 2) { --sp-tone: #a9bcff; }
.us-maintenance__grid article:nth-child(3n + 3) { --sp-tone: #8fe0ad; }

.us-maintenance__grid h3 {
  font-size: 15.5px;
}

.us-maintenance__grid p {
  font-size: 14px;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Service areas: chips                                                */
/* ------------------------------------------------------------------ */

.us-area-grid {
  background: transparent;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.us-area-grid a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
}

.us-area-grid a::before {
  background: var(--sp-brand-2);
  border-radius: 50%;
  content: "";
  flex: none;
  height: 6px;
  opacity: .7;
  width: 6px;
}

.us-area-grid a:hover {
  background: var(--sp-ice-soft);
  border-color: var(--sp-line-strong);
}

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

.us-review-grid {
  gap: 12px;
}

.us-review {
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  position: relative;
}

.us-review::before {
  background: var(--sp-star);
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: -1px;
}

.us-review__head {
  gap: 10px;
}

.us-review__head img {
  height: 36px;
  width: 36px;
}

.us-review__head strong {
  font-size: 14.5px;
  text-transform: capitalize;
}

.us-review__stars {
  font-size: 14px;
  margin-top: 10px;
}

.us-review blockquote {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 6px;
  overflow: hidden;
}

.us-review.is-expanded blockquote {
  -webkit-line-clamp: unset;
  display: block;
}

.sp-review-more {
  background: none;
  border: 0;
  color: var(--sp-brand-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
  padding: 4px 0;
  text-align: left;
}

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

.us-faq__layout {
  gap: 48px;
}

.us-faq summary {
  align-items: center;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 14px;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 0;
}

.us-faq summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.75px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.75px 10px no-repeat;
  border: 1.5px solid var(--sp-line-strong);
  border-radius: 50%;
  color: var(--sp-brand-2);
  content: "";
  flex: none;
  height: 24px;
  position: static;
  width: 24px;
}

.us-faq details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 10px 1.75px no-repeat;
  border-color: var(--sp-brand-2);
  content: "";
}

.us-faq details p {
  font-size: 14px;
  padding: 0 38px 14px 0;
}

/* ------------------------------------------------------------------ */
/* Final call to action                                                */
/* ------------------------------------------------------------------ */

.us-final {
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(95, 69, 196, .35), transparent 70%),
    linear-gradient(120deg, #06304a 0%, #00607a 45%, #2b55c0 100%);
  padding: 40px 0;
}

.us-final h2 {
  font-size: clamp(22px, 2.4vw, 30px);
}

.us-final p:last-child {
  font-size: 14.5px;
}

.us-final .us-actions {
  gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Home page                                                           */
/* ------------------------------------------------------------------ */

.us-home-hero {
  background:
    radial-gradient(520px 300px at 92% 6%, rgba(43, 85, 192, .08), transparent 70%),
    radial-gradient(560px 320px at 60% 0%, rgba(0, 112, 138, .10), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgba(233, 164, 37, .07), transparent 70%),
    linear-gradient(180deg, #f2f8fb 0%, #fff 100%);
  border-bottom: 0;
}

.us-home-hero > .us-shell {
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  max-width: 1240px;
  padding: 32px 20px 28px;
}

.us-home-hero__copy {
  padding: 8px 0 0;
}

.us-home-hero h1 {
  font-size: clamp(34px, 3.8vw, 48px);
  letter-spacing: -.03em;
  line-height: 1.02;
}

.us-home-hero__offer {
  background: linear-gradient(90deg, var(--sp-brand-2) 0%, var(--sp-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -.015em;
  margin-top: 4px !important;
}

.us-home-about > div:first-child > p:last-child {
  font-size: 14.5px;
  margin-top: 10px;
}

/* Collapsed long lists (site-pro.js) */
.sp-more {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--sp-line-strong);
  border-radius: 999px;
  color: var(--sp-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  margin: 12px auto 0;
  min-height: 42px;
  padding: 0 18px;
}

.sp-more:hover {
  border-color: var(--sp-brand);
  color: var(--sp-brand-dark);
}

.sp-more:focus-visible {
  outline: 3px solid var(--sp-brand);
  outline-offset: 2px;
}

.sp-collapsed > .sp-extra {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Footer and phone call bar                                           */
/* ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--sp-line);
}

.site-footer .landing-footer {
  gap: 14px 28px;
  padding-bottom: 22px;
  padding-top: 22px;
}

.site-footer .landing-footer__about strong {
  font-size: 15px;
}

.site-footer .landing-footer__about p,
.site-footer .landing-footer__copyright {
  color: var(--sp-muted);
  font-size: 12.5px;
}

.site-footer .landing-footer__nav a,
.site-footer .landing-footer__legal a {
  font-size: 13.5px;
}

.mobile-call a {
  font-size: 14.5px;
  font-weight: 600;
  min-height: 48px;
}

/* ------------------------------------------------------------------ */
/* Tablet                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1050px) {
  .us-hero__grid {
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }

  .us-terms__grid > div:nth-child(3) {
    border-left: 0;
  }

  .us-terms__grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--sp-line);
  }

  .us-home-hero > .us-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    padding-right: 20px;
  }

  .us-home-hero__copy {
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Phone                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 780px) {
  .us-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .us-section {
    padding: 36px 0;
  }

  .us-section-head {
    margin-bottom: 16px;
  }

  
.us-section-head h2,
  .us-diagnosis h2,
  .us-home-about h2,
  .us-final h2 {
    font-size: 22px;
    line-height: 1.2;
  }

  .us-hero {
    padding: 18px 0 26px;
  }

  .us-hero__grid {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .us-hero h1 {
    font-size: 27px;
  }

  .us-hero__lead {
    font-size: 15px;
  }

  .us-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    margin-top: 16px;
  }

  .us-actions .us-btn {
    align-self: stretch;
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
  }

  .us-highlights {
    gap: 6px 14px;
    margin-top: 12px;
    padding-top: 10px;
  }

  .us-highlights li {
    font-size: 12.5px;
  }

  .us-booking .us-booking-card {
    border-radius: 16px;
    max-width: none;
    padding: 18px 16px 16px;
  }

  .us-booking .us-booking-card::before {
    left: 16px;
    right: 16px;
  }

  .us-booking .booking-form-row--two {
    gap: 8px;
  }

  .us-terms {
    padding-top: 12px;
  }

  .us-terms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }

  .us-terms__grid > div,
  .us-terms__grid > div:first-child,
  .us-terms__grid > div:nth-child(3) {
    padding: 10px 10px;
  }

  .us-terms__grid > div:nth-child(2n + 1) {
    border-left: 0;
  }

  .us-terms__grid > div:nth-child(2n) {
    border-left: 1px solid var(--sp-line);
  }

  .us-terms__grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--sp-line);
  }

  .us-terms__grid > div::before {
    left: 10px;
    right: 10px;
  }

  .us-terms__grid strong {
    font-size: 12.5px;
  }

  .us-terms__grid span {
    font-size: 11.5px;
  }

  .us-brand-grid {
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .us-brand-link {
    height: 52px;
    padding: 6px 8px;
  }

  .us-brand-link img {
    max-height: 26px;
    max-width: min(100%, 86px);
  }

  .us-issue-grid,
  .us-review-grid,
  .us-maintenance__grid {
    gap: 8px;
  }

  .us-issue,
  .us-issue.us-tone-2,
  .us-issue.us-tone-3,
  .us-review,
  .us-maintenance__grid article {
    padding: 14px;
  }

  .us-issue::before,
  .us-review::before,
  .us-maintenance__grid article::before {
    left: 14px;
    right: 14px;
  }

  .us-area-grid {
    gap: 5px;
  }

  .us-area-grid a {
    font-size: 12.5px;
    min-height: 32px;
    padding: 4px 10px;
  }

  .us-faq__layout,
  .us-diagnosis {
    gap: 16px;
  }

  .us-faq summary {
    font-size: 14.5px;
    min-height: 46px;
    padding: 10px 0;
  }

  .us-faq details p {
    font-size: 13.5px;
    padding-right: 0;
  }

  .us-final {
    padding: 32px 0;
  }

  .us-final .us-actions {
    width: 100%;
  }

  .us-home-hero > .us-shell {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px 8px;
  }

  .us-home-hero__copy {
    padding: 0;
  }

  .us-home-hero h1 {
    font-size: 32px;
  }

  .us-home-hero__offer {
    font-size: 19px;
  }

  
.us-home-about {
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
  }

  .site-header .brand-logo-img {
    width: 150px;
  }
}

@media (max-width: 380px) {
  .us-actions,
  .us-final .us-actions {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .site-header .brand-logo-img {
    width: 120px;
  }

  .site-header .header-actions .btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .us-page *,
  .us-page *::before,
  .us-page *::after {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Fixes and home booking layout                                       */
/* ------------------------------------------------------------------ */

.sp-more[hidden] {
  display: none !important;
}

/* The terms strip is also a .us-shell: keep the card inside the content width. */
.us-terms__grid.us-shell {
  max-width: 1200px;
  width: calc(100% - 40px);
}

@media (max-width: 780px) {
  .us-terms__grid.us-shell {
    width: calc(100% - 32px);
  }
}

/* Inner pages: copy starts at the top next to the tall booking card. */
@media (min-width: 781px) {
  .us-hero__grid {
    align-items: start;
  }

  .us-hero__copy {
    padding-top: 18px;
    position: sticky;
    top: 84px;
  }

  .us-hero .us-booking .booking-form {
    gap: 8px;
  }

  .us-hero .us-booking .booking-form input,
  .us-hero .us-booking .booking-form select,
  .us-hero .us-booking .booking-form textarea {
    min-height: 42px;
    padding-bottom: 8px;
    padding-top: 8px;
  }

  .us-hero .us-booking .booking-form label > span,
  .us-hero .us-booking .bastion-service-setting legend {
    margin-bottom: 3px;
  }
}

/* ------------------------------------------------------------------ */
/* "Where is it used?" Home / Business switch — every booking form     */
/* (home, inner pages, brand pages and /book-service/).                */
/* ------------------------------------------------------------------ */

.booking-form .bastion-service-setting {
  border: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  min-width: 0;
  padding: 0;
}

.booking-form .bastion-service-setting legend {
  color: var(--sp-ink);
  float: left;
  font-size: 12.5px;
  font-weight: 600;
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 0;
  width: 100%;
}

.booking-form .bastion-service-setting label {
  display: block;
  margin: 0;
  position: relative;
}

body .booking-form .bastion-service-setting input[type="radio"] {
  border: 0 !important;
  height: 1px !important;
  margin: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  position: absolute !important;
  width: 1px !important;
}

body .booking-form .bastion-service-setting label > span {
  align-items: center;
  background: var(--sp-ice-soft);
  border: 1px solid var(--sp-line-strong);
  border-radius: 10px;
  color: var(--sp-ink);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  margin: 0;
  min-height: 40px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body .booking-form .bastion-service-setting label:hover > span {
  border-color: var(--sp-brand);
}

body .booking-form .bastion-service-setting input:checked + span {
  background: var(--sp-brand);
  border-color: var(--sp-brand);
  color: #fff;
}

body .booking-form .bastion-service-setting input:focus-visible + span {
  outline: 3px solid var(--sp-brand);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* /review/ page                                                       */
/* ------------------------------------------------------------------ */

.bastion-review-page-grid {
  gap: 12px !important;
}

.bastion-review-page-card {
  border: 1px solid var(--sp-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  position: relative;
}

.bastion-review-page-card::before {
  background: var(--sp-star);
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: -1px;
}

.bastion-review-page-card-head {
  align-items: center;
  display: flex;
  gap: 10px;
}

.bastion-review-page-card-head img {
  background: var(--sp-ice);
  border-radius: 50%;
  color: transparent;
  flex: none;
  font-size: 0;
  height: 36px !important;
  overflow: hidden;
  width: 36px !important;
}

.bastion-review-page-card-head h3 {
  font-size: 14.5px !important;
  line-height: 1.25;
  margin: 0 !important;
  text-transform: capitalize;
}

.bastion-review-page-source {
  color: var(--sp-muted);
  font-size: 12px !important;
}

.bastion-review-page-stars {
  color: var(--sp-star);
  font-size: 14px;
  margin-top: 8px;
}

.bastion-review-page-card > p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 6px;
  overflow: hidden;
}

.bastion-review-page-card.is-expanded > p {
  -webkit-line-clamp: unset;
  display: block;
}

.sp-avatar {
  align-items: center;
  background: var(--sp-ice);
  border-radius: 50%;
  color: var(--sp-brand-dark);
  display: inline-flex;
  flex: none;
  font-size: 14px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.sp-hidden-card {
  display: none !important;
}

/* ================================================================== */
/* Round 2 (designer review, 2026-10-09 night)                         */
/* ================================================================== */

/* --- Home hero: copy left, booking card right ---------------------- */
.us-home-hero {
  background:
    radial-gradient(560px 320px at 88% 0%, rgba(0, 112, 138, .09), transparent 70%),
    linear-gradient(180deg, #f2f8fb 0%, #fff 100%);
}

.us-home-hero > .us-shell {
  align-items: center;
  column-gap: 64px;
  grid-template-columns: minmax(0, 1fr) 392px;
  padding: 32px 20px 36px;
}

.us-home-hero .us-hero__lead {
  max-width: 34em;
}

.us-home-hero__booking {
  width: 100%;
}

.us-home-about__image {
  border-radius: 14px;
  margin: 22px 0 0;
  overflow: hidden;
}

.us-home-about__image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* --- Booking card (every page) ------------------------------------- */
.us-booking .us-booking-card {
  border: 1px solid #dde7ec;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 34, 48, .05), 0 12px 32px rgba(6, 47, 66, .10);
  max-width: 392px;
  padding: 20px 20px 16px;
}

.us-booking .us-booking-card::before {
  left: 20px;
  right: 20px;
}

.us-booking .booking-card__eyebrow {
  color: #006680;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.us-booking .booking-card h2 {
  font-size: 18px;
  line-height: 1.25;
  margin: 4px 0 14px;
  text-align: left;
}

/* The fee line under the button replaces the description paragraph. */
.us-booking .us-booking-card > p {
  display: none;
}

/* Home / Business as one segmented control. */
.us-booking .booking-form .bastion-service-setting,
.mw-booking .booking-form .bastion-service-setting,
.booking-form .bastion-service-setting {
  background: #eef4f7;
  border-radius: 10px;
  gap: 0;
  padding: 3px;
}

.booking-form .bastion-service-setting legend {
  float: none;
  margin-bottom: 4px;
}

body .booking-form .bastion-service-setting label > span {
  background: none;
  border: 0;
  border-radius: 8px;
  color: #5a6a75;
  font-size: 13.5px;
  min-height: 34px;
}

body .booking-form .bastion-service-setting label:hover > span {
  color: #004d60;
}

body .booking-form .bastion-service-setting input:checked + span {
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 34, 48, .12), 0 0 0 1px rgba(0, 102, 128, .22);
  color: #004d60;
}

/* The legend sits outside the grey track. */
.booking-form .bastion-service-setting {
  position: relative;
  margin-top: 20px;
}

.booking-form .bastion-service-setting legend {
  left: 0;
  position: absolute;
  top: -20px;
}

/* Fields */
.us-booking .booking-form {
  gap: 10px;
}

.us-booking .booking-form label > span {
  color: #2a3c48;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.us-booking .booking-form input,
.us-booking .booking-form select,
.us-booking .booking-form textarea {
  border: 1px solid #8396a0;
  border-radius: 10px;
  font-size: 15px;
  min-height: 42px;
  padding: 0 12px;
}

.us-booking .booking-form textarea {
  line-height: 1.4;
  padding-bottom: 10px;
  padding-top: 10px;
}

.us-booking .booking-form input::placeholder,
.us-booking .booking-form textarea::placeholder {
  color: #66767f;
}

.us-booking .booking-form select,
.mw-booking .booking-form select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding: 0 28px 0 10px;
}

.us-booking .booking-form select:disabled {
  background-color: #eef3f5;
  border-color: #c4d3da;
  color: #66767f;
}

.us-booking .booking-form .booking-form-row--two {
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.us-booking .booking-form .btn-full {
  box-shadow: 0 6px 16px rgba(0, 102, 128, .2);
  justify-self: stretch;
  max-width: none;
  min-height: 46px;
}

/* Inner pages: card top-aligned beside the copy */
.us-hero__grid {
  grid-template-columns: minmax(0, 1fr) 392px;
  column-gap: 64px;
}

/* --- Header brand block -------------------------------------------- */
.site-header .brand-wrap {
  align-items: center;
  display: flex;
  gap: 12px;
}

.site-header .brand-tagline {
  border-left: 1px solid #dde7ec;
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
  max-width: 9.5em;
  padding-left: 12px;
}


/* --- Terms strip: tinted icon chips (as on the Manitowoc page) ------ */
.us-terms__grid > div::before {
  display: none;
}

.us-terms__grid > div,
.us-terms__grid > div:first-child {
  align-items: center;
  column-gap: 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
}

.us-terms__grid > div > strong,
.us-terms__grid > div > span {
  grid-column: 2;
}

.us-terms__grid > div::after {
  background: var(--sp-chip-bg, #e8f4f8) center / 16px no-repeat var(--sp-chip-icon);
  border-radius: 8px;
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 30px;
  width: 30px;
}

.us-terms__grid > div:nth-child(1) {
  --sp-chip-bg: #e4f5ea;
  --sp-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b7a43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.75 9.25c-.5-1-1.55-1.65-2.75-1.65-1.6 0-2.75.95-2.75 2.15 0 2.95 5.5 1.55 5.5 4.5 0 1.2-1.15 2.15-2.75 2.15-1.2 0-2.25-.65-2.75-1.65M12 5.75V7.6M12 16.4v1.85'/%3E%3C/svg%3E");
}

.us-terms__grid > div:nth-child(2) {
  --sp-chip-bg: #e9eeff;
  --sp-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b55c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='17' rx='2.5'/%3E%3Crect x='9' y='2.5' width='6' height='4' rx='1'/%3E%3Cpath d='M8.75 13.75l2.25 2.25 4.25-4.25'/%3E%3C/svg%3E");
}

.us-terms__grid > div:nth-child(3) {
  --sp-chip-bg: #fff1d6;
  --sp-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23955400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3.5 2'/%3E%3C/svg%3E");
}

.us-terms__grid > div:nth-child(4) {
  --sp-chip-bg: #efebff;
  --sp-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f45c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6.1-7-11.5a7 7 0 0 1 14 0c0 5.4-7 11.5-7 11.5z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.us-home .us-terms__grid > div:nth-child(4) {
  --sp-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f45c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l7.5 3V11c0 4.7-3.1 8.6-7.5 10.5C7.6 19.6 4.5 15.7 4.5 11V5.5z'/%3E%3Cpath d='M8.75 12.25l2.25 2.25 4.25-4.25'/%3E%3C/svg%3E");
}

/* --- Brand wall: 6 rows of 7, size caps ----------------------------- */
.us-brand-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.us-brand-link {
  height: 60px;
}

.us-brand-link img {
  max-height: 28px;
  max-width: min(100%, 112px);
}

/* --- Calmer dark band and closing block (no glows) ------------------ */
.us-maintenance {
  background: linear-gradient(180deg, #072f42 0%, #0a3547 100%);
}

.us-final {
  background: linear-gradient(110deg, #073449 0%, #00607a 100%);
}

/* --- Reviews: left-aligned heading ----------------------------------- */
.us-section-head--center {
  margin-left: 0;
  text-align: left;
}

/* --- Footer ----------------------------------------------------------- */
.site-footer {
  background: #f4f9fb;
}

.site-footer .landing-footer {
  align-items: center;
}

.site-footer .landing-footer__nav a,
.site-footer .landing-footer__legal a {
  font-weight: 600;
}

.site-footer .landing-footer__contact a:first-child {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

a[href^="tel:"] {
  font-variant-numeric: tabular-nums;
}

/* --- Breakpoints ------------------------------------------------------ */
@media (max-width: 1180px) {
  .site-header .brand-tagline {
    display: none;
  }
}

@media (max-width: 1100px) {
  .us-home-hero > .us-shell,
  .us-hero__grid {
    column-gap: 40px;
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .us-brand-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .us-home-hero > .us-shell,
  .us-hero__grid {
    column-gap: 28px;
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (max-width: 780px) {
  .us-home-hero > .us-shell,
  .us-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .us-home-hero > .us-shell {
    padding: 16px 16px 24px;
  }

  .us-home-hero h1 {
    font-size: 30px;
  }

  .us-booking .us-booking-card {
    border-radius: 14px;
    max-width: none;
    padding: 16px 16px 14px;
  }

  .us-booking .us-booking-card::before {
    left: 16px;
    right: 16px;
  }

  .us-booking .booking-form input,
  .us-booking .booking-form select,
  .us-booking .booking-form textarea {
    font-size: 16px;
    min-height: 44px;
  }

  .us-booking .booking-form .booking-form-row--two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .us-home-about__image {
    display: none;
  }

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

  .us-brand-link {
    height: 52px;
  }

  .us-brand-link img {
    max-height: 24px;
    max-width: min(100%, 86px);
  }

  .us-terms__grid > div,
  .us-terms__grid > div:first-child {
    column-gap: 8px;
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .us-terms__grid > div::after {
    background-size: 14px;
    border-radius: 7px;
    height: 24px;
    width: 24px;
  }

  /* Reviews: one swipeable row instead of a tall stack. */
  .us-review-grid {
    display: grid;
    gap: 10px;
    grid-auto-columns: 85%;
    grid-auto-flow: column;
    grid-template-columns: none;
    margin-left: -16px;
    margin-right: -16px;
    overflow-x: auto;
    padding: 2px 16px 6px;
    scroll-padding: 16px;
    scroll-snap-type: x mandatory;
  }

  .us-review {
    scroll-snap-align: start;
  }

  .site-footer .landing-footer__contact a:first-child {
    font-size: 16px;
  }
}

@media (max-width: 340px) {
  .us-booking .booking-form .booking-form-row--two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Brand-page breadcrumb (manitowoc-pro template) ------------------ */
nav.mw-crumbs {
  background: #fff;
  border-bottom: 1px solid #dde7ec;
}

nav.mw-crumbs .mw-shell {
  align-items: center;
  color: #5a6a75;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px;
  min-height: 36px;
}

nav.mw-crumbs a {
  color: #5a6a75;
  text-decoration: none;
}

nav.mw-crumbs a:hover {
  color: #004d60;
  text-decoration: underline;
}

nav.mw-crumbs span[aria-current] {
  color: #0e2230;
  font-weight: 600;
}

/* ================================================================== */
/* Two-step booking card (booking UX spec, 2026-10-09).                 */
/* Needs the head flag <html class="bk-js"> from inc/site-pro.php.      */
/* ================================================================== */

/* 1. Step 2 (and Book Now) hidden from the first paint, no JS-added attributes needed. */
.bk-js .us-booking-card .booking-form:not([data-bk-step="2"]):not([data-bk-off]) > .booking-form-row--two ~ label,
.bk-js .us-booking-card .booking-form:not([data-bk-step="2"]):not([data-bk-off]) > .booking-form-row--two ~ .booking-form-row--two,
.bk-js .us-booking-card .booking-form:not([data-bk-step="2"]):not([data-bk-off]) > .bastion-booking-open {
  display: none;
}

/* 2. The other step's parts (attributes set by JS before any switch). */
.us-booking-card .booking-form[data-bk-step="2"] > [data-bk-part="1"],
.us-booking-card .booking-form:not([data-bk-step="2"]) > [data-bk-part="2"],
.us-booking-card .booking-form:not([data-bk-step="2"]) > .bk-change,
.us-booking-card[data-bk-step="2"] > p {
  display: none;
}
/* Fallback if init failed on a form: back to the old one-step form. Kept as its own
 * rule so an unsupported selector can never drop the rules above. */
.us-booking-card .booking-form[data-bk-off] > .bk-steps,
.us-booking-card .booking-form[data-bk-off] > .bk-continue,
.us-booking-card .booking-form[data-bk-off] > .bk-change,
.us-booking-card .booking-form[data-bk-off] > .bk-note {
  display: none;
}

/* 3. Card and grid */
.us-booking .us-booking-card {
  max-width: 440px;
  scroll-margin-top: 80px;
}
.us-booking .us-booking-card > p { margin-bottom: 10px; }
.us-booking .us-booking-card .booking-form { gap: 10px; margin-top: 0; }
@media (min-width: 900px) {
  .us-booking-card .booking-form[data-bk-step="2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .us-booking-card .booking-form[data-bk-step="2"] > * { grid-column: 1 / -1; }
  .us-booking-card .booking-form[data-bk-step="2"] > [data-bk-field="name"],
  .us-booking-card .booking-form[data-bk-step="2"] > [data-bk-field="phone"] { grid-column: auto; }
}

/* 4. Step tracker. Selectors start with .us-booking-card: main.css has
 *    ".booking-card p { max-width: 42ch; font-size: .98rem; line-height: 1.65 }". */
.us-booking-card .booking-form label { gap: 4px; }
.us-booking-card .booking-form label > span { margin-bottom: 0; }
.us-booking-card .bk-steps { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
.us-booking-card .bk-steps li { border-top: 3px solid var(--sp-line, #dde7ec); color: var(--sp-muted, #5a6a75); font-size: 12px; font-weight: 600; line-height: 1.3; padding-top: 5px; }
.us-booking-card .bk-steps li[aria-current="step"],
.us-booking-card .booking-form[data-bk-step="2"] .bk-steps li:first-child { border-top-color: var(--sp-brand, #006680); color: var(--sp-ink, #0e2230); }
.us-booking-card .bk-steps li:focus { outline: none; }   /* tabindex=-1 landmark for screen readers, not a control */

/* 5. Fee line, status, notes, errors */
.us-booking-card .booking-form p { max-width: none; }
.us-booking-card .bk-fee { color: var(--sp-text, #2a3c48); font-size: 13px; line-height: 1.4; margin: -4px 0 0; min-height: 18px; }
.us-booking-card .bk-fee strong { color: var(--sp-brand-dark, #004d60); }
.us-booking-card .bk-status { color: #8a2c43; font-size: 13px; font-weight: 600; line-height: 1.4; margin: -2px 0 0; }
.us-booking-card .bk-status:empty { display: none; }   /* visual only; announcements go to .bk-sr */
.us-booking-card .bk-status a,
.us-booking-card .bk-note a { color: var(--sp-brand, #006680); font-weight: 600; white-space: nowrap; }
.us-booking-card .bk-note { color: var(--sp-muted, #5a6a75); font-size: 12.5px; line-height: 1.4; margin: -2px 0 0; text-align: center; }
.us-booking .booking-form label > .bk-error { color: #a32845; display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.us-booking .booking-form :is(input, select, textarea)[aria-invalid="true"] { border-color: #a32845; }
.us-booking .booking-form :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: #a32845; box-shadow: 0 0 0 3px rgba(163, 40, 69, .14); }
.us-booking-card .bk-alert { background: #fff4f6; border: 1px solid #f0c4cf; border-radius: 10px; color: #6e1d31; font-size: 13.5px; line-height: 1.4; margin: 0; padding: 9px 12px; }
.us-booking-card .bk-alert[hidden] { display: none; }
.us-booking-card .bk-sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: 0; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

/* 6. Disabled time select: neutral, readable, not an error (iOS fades it). */
.us-booking .booking-form select:disabled {
  background-color: #f4f7f9; border-color: #c4d3da; color: #5a6a75; cursor: not-allowed;
  opacity: 1; -webkit-text-fill-color: #5a6a75;
}

/* 7. "Change" chip that also works as Back */
.us-booking-card .bk-change {
  align-items: center; background: var(--sp-ice-soft, #f4f9fb); border: 1px solid var(--sp-line, #dde7ec);
  border-radius: 10px; color: var(--sp-ink, #0e2230); cursor: pointer; display: flex; font: inherit;
  font-size: 14px; gap: 10px; justify-content: space-between; min-height: 44px; padding: 8px 12px;
  text-align: left; width: 100%;
}
.us-booking-card .bk-change__link { color: var(--sp-brand, #006680); flex: none; font-weight: 600; text-decoration: underline; }

/* 8. Step switch: opacity only, only after a user switch (no load flash); no transform:
 *    the modal is position:fixed inside the card. */
@media (prefers-reduced-motion: no-preference) {
  .us-booking-card .booking-form[data-bk-moved] > :not([type="hidden"]) { animation: bk-in .16s ease-out; }
  @keyframes bk-in { from { opacity: .35; } to { opacity: 1; } }
}

/* 9. Phones: the fixed call bar hides while a booking field has focus. */
@media (max-width: 782px) {
  html body.bk-typing .mobile-call { visibility: hidden; pointer-events: none; }
  .us-booking .us-booking-card { padding: 16px 16px 14px; }
  .us-booking .us-booking-card > p { display: none; }
}

/* Two-step card, final touches: designer's card width, thin straight tracker lines. */
.us-booking .us-booking-card {
  max-width: 392px;
}

.us-booking-card .bk-steps li {
  border-top-width: 2px;
}

@media (max-width: 780px) {
  .us-booking .us-booking-card {
    max-width: none;
  }
}

/* Home hero: the section is also .us-hero; padding lives on the inner shell only. */
.us-hero.us-home-hero {
  padding: 0;
}

/* ================================================================== */
/* Round 3 (QA review, 2026-10-09 late)                                */
/* ================================================================== */

/* Home hero: top-aligned so Continue (card grows ~35 px) does not move the copy. */
.us-home-hero > .us-shell {
  align-items: start;
}

.us-home-hero__copy {
  padding-top: 40px;
}

/* Home / Business: clear selected state, larger targets. */
body .booking-form .bastion-service-setting label > span {
  min-height: 38px;
}

body .booking-form .bastion-service-setting input:checked + span {
  background: #006680;
  box-shadow: 0 1px 2px rgba(14, 34, 48, .18);
  color: #fff;
}

body .booking-form .bastion-service-setting label:hover > span {
  color: inherit;
}

body .booking-form .bastion-service-setting input:not(:checked) + span:hover {
  color: #004d60;
}

.booking-form .bastion-service-setting legend {
  left: -3px;
}

/* Fee line also on /book-service/ and brand cards. */
.booking-form .bk-fee {
  color: #2a3c48;
  font-size: 13px;
  line-height: 1.4;
  margin: -2px 0 0;
  text-wrap: balance;
}

.booking-form .bk-fee strong {
  color: #004d60;
  font-variant-numeric: tabular-nums;
}

.us-booking-card .bk-note {
  text-wrap: balance;
}

.us-booking-card .bk-status .bk-info {
  color: #2a3c48;
  font-weight: 600;
}

/* Focus rings on the card and the modal. */
.us-booking-card .btn-full:focus-visible,
.us-booking-card .bk-change:focus-visible,
.bastion-booking-modal button:focus-visible,
.bastion-success-modal button:focus-visible {
  outline: 3px solid #004d60;
  outline-offset: 2px;
}

/* "Almost done": same language as the card. */
.bastion-booking-modal__dialog,
.bastion-success-modal__dialog {
  border-radius: 16px;
}

.bastion-booking-modal__title {
  font-size: 20px;
  letter-spacing: -.015em;
}

.bastion-booking-modal__content textarea {
  border: 1px solid #8396a0;
  border-radius: 10px;
  font-size: 16px;
}

.bastion-booking-service-call-note {
  border: 1px solid #dde7ec !important;
  border-radius: 12px;
  position: relative;
}

.bastion-booking-service-call-note::before {
  background: #1b7a43;
  content: "";
  height: 2px;
  left: 14px;
  position: absolute;
  right: 14px;
  top: -1px;
}

.bastion-booking-modal__actions .btn,
.bastion-booking-confirm {
  border-radius: 999px;
}

@media (max-height: 700px) {
  .bastion-booking-modal__dialog {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .bastion-booking-modal__content textarea {
    min-height: 64px;
  }
}

/* Home: dark band — three cards stacked beside the copy and photo. */
@media (min-width: 781px) {
  .us-home-about {
    align-items: start;
  }

  .us-home-about .us-maintenance__grid {
    align-content: start;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
  }
}

.us-home-about > div:first-child > h2 + p {
  margin-top: 10px;
}

/* /book-service/: arrows on selects, even field heights. */
.booking-card--standalone .booking-form select {
  -webkit-appearance: none;
  appearance: none;
  background: #fbfcfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  padding-right: 36px;
}

.booking-card--standalone .booking-form textarea {
  min-height: 54px;
}

/* Footer (the live footer is .compact-footer). */
.site-footer .compact-footer__about p,
.site-footer .compact-footer__copyright {
  color: #5a6a75;
}

.site-footer .compact-footer__nav a,
.site-footer .compact-footer__legal a,
.site-footer .compact-footer__contact a {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  min-height: 40px;
}

.site-footer .compact-footer__contact a[href^="tel:"] {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Header: solid background, phone gutters match the page. */
.site-header {
  background: #fff;
}

/* /review/: no card inside a card. */
.page-standard:has(.bastion-review-page-grid) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Model search on brand pages: 16 px so iOS does not zoom. */
@media (max-width: 780px) {
  .mw-cat-search input,
  .bastion-v2-model-catalog input[type="search"] {
    font-size: 16px;
  }
}

@media (min-width: 600px) and (max-width: 780px) {
  .us-booking .us-booking-card {
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
  }

}

@media (max-width: 782px) {
  /* Cookie notice above the call bar, never over it; hidden while a booking dialog is open. */
  #cookie-notice.cookie-notice-visible.cn-position-bottom {
    z-index: 998 !important;
  }

  body.scrolled-hero #cookie-notice.cookie-notice-visible.cn-position-bottom {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  .site-header .header-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

body.bastion-modal-open #cookie-notice {
  display: none !important;
}

@media (max-width: 780px) {
  body .booking-form .bastion-service-setting label > span {
    min-height: 44px;
  }

  .us-hero .us-eyebrow,
  .us-home-hero .us-eyebrow {
    font-size: 11px;
    letter-spacing: .06em;
  }

  .us-home-hero__copy {
    padding-top: 0;
  }
}

@media (max-width: 380px) {
  .us-hero .us-actions,
  .us-home-hero .us-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .us-actions .us-btn--secondary .us-icon {
    display: none;
  }

  .us-actions .us-btn {
    font-size: 13.5px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
 * Round 4 service icons: one stroke weight (about 1.7 px at 54 and 48 px),
 * accent zones as a light tint of the icon colour. Drawings: PHP.
 * ===================================================================== */
.us-service-link__icon svg,
.service-icon-art-ref svg {
  stroke-width: 2;
}

@media (max-width: 699px) {
  .us-service-link__icon svg,
  .service-icon-art-ref svg {
    stroke-width: 2.25;
  }
}

.us-service-link__icon .service-icon-accent,
.service-icon-art-ref .service-icon-accent {
  fill: currentColor;
  fill-opacity: .1;
  stroke: none;
}

/* =====================================================================
 * Bastion site — design proposal r4, UI refinement (2026-10-10).
 *
 * Owner-approved 2026-10-10 («Одобряю всё»); kept as its own section after the
 * earlier site-pro rules so it can be reviewed and reverted as one block.
 * Every rule starts with body:not(.mw-pro): the approved Manitowoc pages
 * (body.mw-pro / .mw-page) stay untouched, and the prefix lifts these rules
 * one class above the matching site-pro rules without !important.
 *
 * Widths
 *   >= 820  desktop and tablet landscape. The two-column hero starts at 781
 *           (site-pro): at 781–819 the card still fits beside the copy and
 *           Continue stays above the fold, so that band is kept on purpose.
 *   <= 819  tablet portrait and phones: 44 px targets, header 60 px,
 *           footer stack, chip hit areas
 *   541–780 single-column hero: buttons and card capped (480 / 520 px)
 *   <= 540  phone-only layouts (terms strip as a list)
 *   <= 359  narrow phones (hero buttons stacked)
 *   pointer: coarse — 16 px fields on touch tablets too
 *
 * Icon drawings live in PHP (bastion_v2_service_icon_svg, the .us-icon
 * $paths arrays); their stroke and accent rules are in the block just above.
 * No copy is added or changed.
 * ===================================================================== */

:root {
  --r4-ring: #006680;
  --r4-field: #8396a0;          /* 3.07:1 on white: passes 1.4.11 */
  --r4-field-hover: #5a6a75;
  --r4-focus-halo: 0 0 0 3px rgba(0, 102, 128, .24);
  --r4-tile-hover: #9cc3cf;
  --r4-tile-shadow: 0 1px 2px rgba(14, 34, 48, .04), 0 6px 16px rgba(14, 34, 48, .07);
}

/* One focus ring everywhere: 2 px brand teal, 2 px gap (white on dark bands). */
body:not(.mw-pro) .site-header a:focus-visible,
body:not(.mw-pro) .site-footer a:focus-visible,
body:not(.mw-pro) .mobile-call a:focus-visible,
body:not(.mw-pro) .us-page a:focus-visible,
body:not(.mw-pro) .us-page summary:focus-visible,
body:not(.mw-pro) .sp-more:focus-visible,
body:not(.mw-pro) .sp-review-more:focus-visible {
  outline: 2px solid var(--r4-ring);
  outline-offset: 2px;
}

body:not(.mw-pro) .us-maintenance a:focus-visible,
body:not(.mw-pro) .us-final a:focus-visible {
  outline-color: #fff;
}

/* ===================================================================== */
/* 1. Header                                                             */
/* ===================================================================== */

body:not(.mw-pro) .site-header .desktop-nav a {
  transition: background-color .15s ease, color .15s ease;
}

/* ice-soft (#f4f9fb) was 1.05:1 against white: the hover was invisible. */
body:not(.mw-pro) .site-header .desktop-nav a:hover {
  background: var(--sp-ice);
  color: var(--sp-brand-dark);
}

body:not(.mw-pro) .site-header .header-actions .btn {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Secondary buttons (header "Book Online", hero "Book service"): the grey
 * #c4d3da outline (1.5:1) and ink text read as disabled next to the solid
 * teal button; a teal outline and teal text make the pair. */
body:not(.mw-pro) .site-header .header-actions .btn-ghost,
body:not(.mw-pro) .us-page .us-hero .us-btn--secondary {
  border-color: var(--r4-tile-hover);
  color: var(--sp-brand-dark);
}

body:not(.mw-pro) .us-page .us-hero .us-btn--secondary:hover {
  background: var(--sp-ice-soft);
  border-color: var(--sp-brand);
}

body:not(.mw-pro) .site-header .header-actions .btn-ghost:hover {
  background: var(--sp-ice-soft);
  border-color: var(--sp-brand);
  color: var(--sp-brand-dark);
}

body:not(.mw-pro) .site-header .header-actions .btn-solid:hover {
  background: var(--sp-brand-dark);
  border-color: var(--sp-brand-dark);
  color: #fff;
}

@media (max-width: 819px) {
  /* 67 -> 60 px sticky bar; the call button was 42 px tall: now 44. */
  body:not(.mw-pro) .site-header .header-inner {
    min-height: 60px;
  }

  body:not(.mw-pro) .site-header .brand-logo-img {
    width: 140px;
  }

  /* The home link was only as tall as the logo (31 px). */
  body:not(.mw-pro) .site-header .brand-logo-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  body:not(.mw-pro) .site-header .header-actions .btn {
    font-size: 14px;
    min-height: 44px;
    padding: 0 16px;
  }
}

@media (max-width: 380px) {
  body:not(.mw-pro) .site-header .brand-logo-img {
    width: 120px;
  }

  body:not(.mw-pro) .site-header .header-actions .btn {
    font-size: 13.5px;
    padding: 0 12px;
  }
}

/* ===================================================================== */
/* 2. Home hero                                                          */
/* ===================================================================== */

@media (min-width: 781px) {
  /* The copy was vertically centred against the card (unified-site
   * align-self:center), so it jumped ~18 px when step 2 made the card
   * taller. Top-aligned with a fixed offset it sits at the same optical
   * centre for step 1 and stays still afterwards. */
  body:not(.mw-pro) .us-home-hero__copy {
    align-self: start;
    padding-top: 100px;
  }
}

@media (min-width: 781px) and (max-width: 1100px) {
  body:not(.mw-pro) .us-home-hero__copy {
    padding-top: 64px;
  }
}

/* The trust row's hairline ran 744 px to the card gutter while its items
 * end at 574 px: end the rule with the content. */
body:not(.mw-pro) .us-home-hero .us-highlights,
body:not(.mw-pro) .us-hero .us-highlights {
  max-width: 600px;
}

/* Tablet portrait (541–780): one column. The two hero buttons stretched to
 * 350 px each and the card to 736 px (a main.css max-width:100% !important
 * beat site-pro's 520 px cap). Cap both, left edge on the copy. */
@media (min-width: 541px) and (max-width: 780px) {
  body:not(.mw-pro) .us-home-hero .us-actions,
  body:not(.mw-pro) .us-hero .us-actions {
    max-width: 480px;
  }

  /* main.css forces the card to width/max-width 100% !important: cap its
   * wrapper instead. */
  body:not(.mw-pro) .us-hero .us-booking {
    max-width: 520px;
  }
}

/* Phones: the "4.9 · 82 Google reviews" link was a 22 px target; an
 * invisible hit area takes it to 44 px without moving anything (only plain
 * text sits above and below it). */
@media (max-width: 819px) {
  body:not(.mw-pro) .us-hero .us-rating {
    position: relative;
  }

  body:not(.mw-pro) .us-hero .us-rating::after {
    bottom: -11px;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: -11px;
  }
}

/* <= 359: "Call (323) 433-6360" wrapped onto two lines inside its pill
 * beside "Book service" (site-pro's 1fr/auto row). Stack the two. */
@media (max-width: 359px) {
  body:not(.mw-pro) .us-home-hero .us-actions,
  body:not(.mw-pro) .us-hero .us-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.mw-pro) .us-actions .us-btn {
    white-space: nowrap;
  }
}

/* ===================================================================== */
/* 3. Booking card (home hero, inner pages, brand pages)                 */
/* ===================================================================== */

/* 901–1100: 360 -> 380 px card so the fee line and the note under Continue
 * fit on one line at 1024 (they broke as "… · applied / toward …" and
 * "… work / · Or call …"). */
@media (min-width: 901px) and (max-width: 1100px) {
  body:not(.mw-pro) .us-home-hero > .us-shell,
  body:not(.mw-pro) .us-hero__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

@media (min-width: 781px) {
  body:not(.mw-pro) .us-booking .us-booking-card {
    padding-bottom: 18px;
  }
}

/* Two-field rows: an error under one field pushed its neighbour down 12 px
 * (rows were end-aligned). Keep the controls on one line. */
body:not(.mw-pro) .us-booking .booking-form .booking-form-row--two,
body:not(.mw-pro) .us-booking-card .booking-form {
  align-items: start;
}

/* Step tracker: the idle bar (#dde7ec, 1.2:1) was nearly invisible. */
body:not(.mw-pro) .us-booking-card .bk-steps li {
  border-top-color: var(--sp-line-strong);
}

body:not(.mw-pro) .us-booking-card .bk-steps li[aria-current="step"],
body:not(.mw-pro) .us-booking-card .booking-form[data-bk-step="2"] .bk-steps li:first-child {
  border-top-color: var(--sp-brand);
}

/* Field states: hover darkens the border; focus = brand border + a halo
 * strong enough to see (the old 12 % halo was ~1.2:1). */
body:not(.mw-pro) .us-booking .booking-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
body:not(.mw-pro) .us-booking .booking-form select,
body:not(.mw-pro) .us-booking .booking-form textarea {
  transition: border-color .15s ease, box-shadow .15s ease;
}

body:not(.mw-pro) .us-booking .booking-form input:not([type="radio"]):not([type="checkbox"]):not(:focus):not([aria-invalid="true"]):hover,
body:not(.mw-pro) .us-booking .booking-form select:not(:disabled):not(:focus):not([aria-invalid="true"]):hover,
body:not(.mw-pro) .us-booking .booking-form textarea:not(:focus):not([aria-invalid="true"]):hover {
  border-color: var(--r4-field-hover);
}

body:not(.mw-pro) .us-booking .booking-form input:focus,
body:not(.mw-pro) .us-booking .booking-form select:focus,
body:not(.mw-pro) .us-booking .booking-form textarea:focus {
  border-color: var(--sp-brand);
  box-shadow: var(--r4-focus-halo);
  outline: 0;
}

body:not(.mw-pro) .us-booking .booking-form input[aria-invalid="true"]:focus,
body:not(.mw-pro) .us-booking .booking-form select[aria-invalid="true"]:focus,
body:not(.mw-pro) .us-booking .booking-form textarea[aria-invalid="true"]:focus {
  border-color: #a32845;
  box-shadow: 0 0 0 3px rgba(163, 40, 69, .18);
}

body:not(.mw-pro) .us-booking .booking-form input[aria-invalid="true"],
body:not(.mw-pro) .us-booking .booking-form select[aria-invalid="true"],
body:not(.mw-pro) .us-booking .booking-form textarea[aria-invalid="true"] {
  background-color: #fffafb;
}

body:not(.mw-pro) .us-booking .booking-form label > .bk-error {
  margin-top: 1px;
}

/* Loading: a small spinner replaces the chevron while open times load
 * (static dots under reduced motion). The select stays disabled as before. */
body:not(.mw-pro) .us-booking .booking-form select[aria-busy="true"],
body:not(.mw-pro) .booking-card--standalone .booking-form select[aria-busy="true"]:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='%23c4d3da'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 8.5 8.5' stroke='%23006680'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.mw-pro) .us-booking .booking-form select[aria-busy="true"],
  body:not(.mw-pro) .booking-card--standalone .booking-form select[aria-busy="true"]:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23006680'%3E%3Ccircle cx='6' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='18' cy='12' r='1.8'/%3E%3C/svg%3E");
  }
}

/* Touch tablets (iPad portrait is 810–834 px, where the desktop card
 * uses 15 px text): 16 px in every field so iOS does not zoom on focus. */
@media (pointer: coarse) {
  body:not(.mw-pro) .us-booking .booking-form input:not([type="radio"]):not([type="checkbox"]),
  body:not(.mw-pro) .us-booking .booking-form select,
  body:not(.mw-pro) .us-booking .booking-form textarea,
  body:not(.mw-pro) .bastion-booking-modal__content textarea {
    font-size: 16px;
  }
}

/* "No open times" / "Online times unavailable" are notices, not the
 * visitor's mistake: a soft amber box instead of red text. */
body:not(.mw-pro) .us-booking-card .bk-status:not(:empty) {
  background: #fff7e9;
  border: 1px solid #efd7a6;
  border-radius: 10px;
  color: #5c3600;           /* 9.9:1 on the tint */
  font-weight: 500;
  margin: 0;
  padding: 9px 12px;
}

body:not(.mw-pro) .us-booking-card .bk-status a {
  color: var(--sp-brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "Loading open times…" stays a plain line (no box). */
body:not(.mw-pro) .us-booking-card .bk-status:has(> .bk-info) {
  background: none;
  border: 0;
  padding: 0;
}

/* Primary buttons in the card: hover and pressed states. */
body:not(.mw-pro) .us-booking .booking-form .btn-full {
  transition: background-color .15s ease, box-shadow .15s ease;
}

body:not(.mw-pro) .us-booking .booking-form .btn-full:hover {
  background: var(--sp-brand-dark);
  border-color: var(--sp-brand-dark);
}

body:not(.mw-pro) .us-booking .booking-form .btn-full:active {
  box-shadow: 0 2px 6px rgba(0, 102, 128, .22);
}

/* "Change" chip: hover + tabular date/time. */
body:not(.mw-pro) .us-booking-card .bk-change {
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background-color .15s ease;
}

body:not(.mw-pro) .us-booking-card .bk-change:hover {
  background: var(--sp-ice);
  border-color: var(--r4-tile-hover);
}

/* ===================================================================== */
/* 4. "Almost done" dialog (client-side; nothing here submits)           */
/* ===================================================================== */

body:not(.mw-pro) .bastion-booking-modal__backdrop,
body:not(.mw-pro) .bastion-success-modal__backdrop {
  background: rgba(8, 28, 40, .5);
}

body:not(.mw-pro) .bastion-booking-modal__dialog,
body:not(.mw-pro) .bastion-success-modal__dialog {
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(6, 30, 44, .24);
  padding: 22px 24px 20px;
  width: min(460px, calc(100vw - 32px));
}

/* main.css adds 24 px padding inside the dialog's own padding (48 px in
 * total, 35 px on phones): one padding only. */
body:not(.mw-pro) .bastion-booking-modal__content {
  padding: 0;
}

body:not(.mw-pro) .bastion-booking-modal__close,
body:not(.mw-pro) .bastion-success-modal__close {
  background: #fff;
  border: 1px solid var(--sp-line-strong);
  color: var(--sp-muted);
  height: 40px;
  right: 16px;
  top: 18px;
  width: 40px;
}

body:not(.mw-pro) .bastion-booking-modal__close:hover,
body:not(.mw-pro) .bastion-success-modal__close:hover {
  background: var(--sp-ice);
  border-color: var(--sp-brand);
  color: var(--sp-brand-dark);
  transform: none;
}

body:not(.mw-pro) .bastion-booking-modal__close:focus-visible,
body:not(.mw-pro) .bastion-success-modal__close:focus-visible {
  outline: 2px solid var(--r4-ring);
  outline-offset: 2px;
}

/* Title: left-aligned on the close button's row, the card's type scale
 * (was 28 px centred with 44 px side margins). */
body:not(.mw-pro) .bastion-booking-modal__content .bastion-booking-modal__title {
  font-size: 20px;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 4px 52px 16px 0;
  text-align: left;
}

body:not(.mw-pro) .bastion-booking-modal__content > label > span:first-child {
  color: var(--sp-text);
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}

body:not(.mw-pro) .bastion-booking-modal__content textarea {
  background: #fff;
  border: 1px solid var(--r4-field);
  border-radius: 10px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.45;
  min-height: 68px;
  padding: 10px 12px;
}

body:not(.mw-pro) .bastion-booking-modal__content textarea::placeholder {
  color: #66767f;
}

body:not(.mw-pro) .bastion-booking-modal__content textarea:hover {
  border-color: var(--r4-field-hover);
}

body:not(.mw-pro) .bastion-booking-modal__content textarea:focus {
  border-color: var(--sp-brand);
  box-shadow: var(--r4-focus-halo);
}

/* Fee box: one hairline family, a straight green line on top (site-pro),
 * smaller figure (36 -> 28 px) and 1 px dividers instead of 2 px. */
body:not(.mw-pro) .bastion-booking-service-call-note {
  background: #f5faf7;
  border-radius: 12px;
  gap: 14px;
  grid-template-columns: 92px minmax(0, 1fr);
  margin: 14px 0 16px;
  padding: 14px 16px;
}

body:not(.mw-pro) .bastion-booking-service-call-note::before {
  left: 16px;
  right: 16px;
}

body:not(.mw-pro) .bastion-booking-service-call-note__amount {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

body:not(.mw-pro) .bastion-booking-service-call-note__details {
  border-left: 1px solid #cfe2d9;
  padding-left: 14px;
}

body:not(.mw-pro) .bastion-booking-service-call-note__details strong {
  font-size: 14px;
}

/* Consent: checkbox column 24 px, the "No advertising" line under the
 * text (it was centred under both columns, off the text's left edge). */
body:not(.mw-pro) .bastion-booking-consent {
  column-gap: 12px;
  grid-template-columns: 22px minmax(0, 1fr);
  margin-top: 4px;
}

body:not(.mw-pro) .bastion-booking-consent input[type="checkbox"] {
  height: 20px;
  margin-top: 1px;
  min-height: 20px;
  min-width: 20px;
  width: 20px;
}

body:not(.mw-pro) .bastion-booking-consent__copy {
  color: var(--sp-text);
  font-size: 14px;
  line-height: 1.5;
}

body:not(.mw-pro) .bastion-booking-consent__privacy {
  color: var(--sp-brand-dark);
  font-size: 13px;
  grid-column: 2;
  margin-top: 4px;
  text-align: left;
  white-space: normal;
}

body:not(.mw-pro) .bastion-booking-modal__actions {
  margin-top: 18px;
}

body:not(.mw-pro) .bastion-booking-modal__actions .btn,
body:not(.mw-pro) .bastion-success-modal__actions .btn {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
}

/* Disabled "Book appointment": white on #cbd5e1 was 1.5:1 and read as
 * broken; a quiet grey button that is still legible. */
body:not(.mw-pro) .bastion-booking-confirm[disabled],
body:not(.mw-pro) .bastion-booking-confirm.is-disabled {
  background: #e7eef1;
  border-color: #e7eef1;
  color: #5f6f79;           /* 4.4:1 */
}

@media (max-width: 767px) {
  body:not(.mw-pro) .bastion-booking-modal__dialog,
  body:not(.mw-pro) .bastion-success-modal__dialog {
    border-radius: 16px;
    padding: 18px 16px 16px;
    width: calc(100vw - 20px);
  }

  body:not(.mw-pro) .bastion-booking-modal__close,
  body:not(.mw-pro) .bastion-success-modal__close {
    height: 44px;
    right: 12px;
    top: 12px;
    width: 44px;
  }

  body:not(.mw-pro) .bastion-booking-modal__content .bastion-booking-modal__title {
    font-size: 19px;
    margin: 4px 56px 14px 0;
  }

  body:not(.mw-pro) .bastion-booking-modal__content textarea {
    font-size: 16px;
  }

  body:not(.mw-pro) .bastion-booking-service-call-note {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px;
  }

  body:not(.mw-pro) .bastion-booking-service-call-note::before {
    left: 14px;
    right: 14px;
  }

  body:not(.mw-pro) .bastion-booking-service-call-note__details {
    border-left: 0;
    border-top: 1px solid #cfe2d9;
    padding: 10px 0 0;
  }

  body:not(.mw-pro) .bastion-booking-consent {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  body:not(.mw-pro) .bastion-booking-consent input[type="checkbox"] {
    height: 22px;
    min-height: 22px;
    min-width: 22px;
    width: 22px;
  }
}

/* ===================================================================== */
/* 5. Terms strip (container and chip box only; glyphs: icon designer)   */
/* ===================================================================== */

/* The strip is also a .us-shell: at <=780 the shell's 16 px side padding
 * returned inside the card, so the cells sat 17 px in from its border and
 * their dividers stopped short. */
body:not(.mw-pro) .us-terms__grid.us-shell {
  padding-left: 0;
  padding-right: 0;
}

/* Inner pages: the hero's bottom border plus the strip's border read as a
 * double rule 17 px apart. Home already has none. */
body:not(.mw-pro) .us-hero:not(.us-home-hero) {
  border-bottom: 0;
}

/* Phones: a 2 x 2 grid of 160 px cells wrapped every label
 * ("$85 / $120 / service call", "Licensed and / insured"). One row each. */
@media (max-width: 540px) {
  body:not(.mw-pro) .us-terms__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.mw-pro) .us-terms__grid > div,
  body:not(.mw-pro) .us-terms__grid > div:first-child,
  body:not(.mw-pro) .us-terms__grid > div:nth-child(2n),
  body:not(.mw-pro) .us-terms__grid > div:nth-child(2n + 1),
  body:not(.mw-pro) .us-terms__grid > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--sp-line);
    column-gap: 12px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 9px 14px;
  }

  body:not(.mw-pro) .us-terms__grid > div:first-child {
    border-top: 0;
  }

  body:not(.mw-pro) .us-terms__grid > div::after {
    border-radius: 8px;
    height: 28px;
    width: 28px;
  }

  body:not(.mw-pro) .us-terms__grid strong {
    font-size: 13.5px;
    line-height: 1.3;
  }

  body:not(.mw-pro) .us-terms__grid span {
    font-size: 12.5px;
    line-height: 1.3;
  }
}

/* ===================================================================== */
/* 6. Services grid — live layout kept (owner: «оставь значки как были»): */
/*    4 columns, 54 px icons (48 on phones), uppercase labels, no tiles.  */
/*    Only states and spacing are tuned. A 7-column tile variant was      */
/*    drafted and dropped because of that rule.                           */
/* ===================================================================== */

/* The whole link is the target: a rounded box so the focus ring and the
 * hover tint have a shape (the ring hugged the text before). */
body:not(.mw-pro) .us-service-link {
  border-radius: 12px;
  padding: 8px 4px 10px;
  transition: background-color .15s ease, color .15s ease;
}

body:not(.mw-pro) .us-service-link:hover {
  background: rgba(232, 244, 248, .7);
  color: var(--sp-brand-dark);
}

body:not(.mw-pro) .us-service-link:focus-visible {
  outline-offset: 0;
}

/* Rhythm: a label sat 34 px above the next icon but only 12 px below its
 * own; with the 8/10 px link padding and an 8 px row gap the visual gap is
 * 26 px, and the grid keeps its height (492 -> 488 px). */
body:not(.mw-pro) .us-services-grid {
  row-gap: 8px;
}

/* Phones: two columns as live; a 24 px row gap + 12 px inner gap made
 * 7 rows 739 px tall (-> ~690). Icon, label size and case unchanged. */
@media (max-width: 780px) {
  body:not(.mw-pro) .us-services-grid {
    row-gap: 4px;
  }

  body:not(.mw-pro) .us-service-link {
    gap: 8px;
    padding: 6px 4px 8px;
  }
}

/* ===================================================================== */
/* 7. Brand wall                                                         */
/* ===================================================================== */

body:not(.mw-pro) .us-brand-link {
  height: 56px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body:not(.mw-pro) .us-brand-link:hover {
  border-color: var(--r4-tile-hover);
  box-shadow: var(--r4-tile-shadow);
}

body:not(.mw-pro) .us-brand-link img {
  max-height: 26px;
}

/* Optical balance: solid-block logos (filled red/gold/blue plates) look
 * twice as heavy as wordmarks at the same height. */
body:not(.mw-pro) .us-brand-link img[src*="/miele."],
body:not(.mw-pro) .us-brand-link img[src*="/traulsen."],
body:not(.mw-pro) .us-brand-link img[src*="/pitco."],
body:not(.mw-pro) .us-brand-link img[src*="/southbend."] {
  max-height: 21px;
}

@media (max-width: 780px) {
  body:not(.mw-pro) .us-brand-link {
    height: 52px;
  }

  body:not(.mw-pro) .us-brand-link img {
    max-height: 24px;
  }

  body:not(.mw-pro) .us-brand-link img[src*="/miele."],
  body:not(.mw-pro) .us-brand-link img[src*="/traulsen."],
  body:not(.mw-pro) .us-brand-link img[src*="/pitco."],
  body:not(.mw-pro) .us-brand-link img[src*="/southbend."] {
    max-height: 19px;
  }
}

/* "Show all 42 brands / 31 areas": 42 -> 44 px. */
body:not(.mw-pro) .sp-more {
  min-height: 44px;
  transition: border-color .15s ease, color .15s ease;
}

/* ===================================================================== */
/* 8. Dark band ("why us" cards)                                         */
/* ===================================================================== */

/* Phones: card 1 had 14 px padding, cards 2–3 kept 18 px (an
 * :nth-child rule outranked the phone rule), so their text and accent
 * lines did not line up. One padding for all three. */
@media (max-width: 780px) {
  body:not(.mw-pro) .us-maintenance__grid article,
  body:not(.mw-pro) .us-maintenance__grid article:nth-child(2),
  body:not(.mw-pro) .us-maintenance__grid article:nth-child(3) {
    padding: 14px 16px;
  }

  body:not(.mw-pro) .us-maintenance__grid article::before {
    left: 16px;
    right: 16px;
  }
}

/* Home, desktop: the copy + photo column (417 px) was 130 px taller than
 * the three cards, leaving a dead corner under them. Cards share the
 * column's height and centre their text; the photo goes 16:10 -> 16:9. */
@media (min-width: 781px) {
  body:not(.mw-pro) .us-home-about {
    align-items: stretch;
  }

  body:not(.mw-pro) .us-home-about .us-maintenance__grid {
    align-content: stretch;
    grid-auto-rows: 1fr;
  }

  body:not(.mw-pro) .us-home-about .us-maintenance__grid article {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body:not(.mw-pro) .us-home-about__image img {
    aspect-ratio: 16 / 9;
  }
}

/* ===================================================================== */
/* 9. Service areas                                                      */
/* ===================================================================== */

body:not(.mw-pro) .us-area-grid a {
  color: var(--sp-ink);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

body:not(.mw-pro) .us-area-grid a:hover {
  background: #fff;
  border-color: var(--r4-tile-hover);
  color: var(--sp-brand-dark);
}

/* Phones: chips were 32 px targets 5 px apart. Visible chip 34 px, the
 * invisible hit area grows to 44 px and the row gap (10 px) keeps
 * neighbouring hit areas from overlapping. */
@media (max-width: 819px) {
  body:not(.mw-pro) .us-area-grid {
    gap: 10px 6px;
  }

  body:not(.mw-pro) .us-area-grid a {
    min-height: 34px;
    padding: 5px 10px;
    position: relative;
  }

  body:not(.mw-pro) .us-area-grid a::after {
    bottom: -5px;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: -5px;
  }
}

/* ===================================================================== */
/* 10. Reviews (home/inner sections and /review/)                        */
/* ===================================================================== */

/* Avatars: a blocked or slow photo left an empty 36 px hole; the initials
 * fallback was knocked out of shape by ".us-review__head span"
 * (display:block, 12 px grey). */
body:not(.mw-pro) .us-review__head img {
  background: var(--sp-ice);
  border-radius: 50%;
  color: transparent;
  flex: none;
  font-size: 0;
  object-fit: cover;
  overflow: hidden;
}

body:not(.mw-pro) .us-review__head .sp-avatar {
  color: var(--sp-brand-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

body:not(.mw-pro) .us-review__stars,
body:not(.mw-pro) .bastion-review-page-stars,
body:not(.mw-pro) .bastion-review-page-rating span {
  color: var(--sp-star);
  letter-spacing: .06em;
}

body:not(.mw-pro) .sp-review-more {
  align-items: center;
  align-self: flex-start;
  display: inline-flex;
  min-height: 32px;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

body:not(.mw-pro) .sp-review-more:hover {
  text-decoration-color: currentColor;
}

/* "Read more customer reviews": the same quiet pill as "Show all …". */
body:not(.mw-pro) .us-more-link {
  margin-top: 16px !important;   /* base rule is !important */
}

body:not(.mw-pro) .us-more-link a {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--sp-line-strong);
  border-radius: 999px;
  color: var(--sp-ink);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

body:not(.mw-pro) .us-more-link a:hover {
  border-color: var(--sp-brand);
  color: var(--sp-brand-dark);
}

@media (max-width: 819px) {
  body:not(.mw-pro) .sp-review-more {
    margin-top: 2px;
    min-height: 44px;
  }
}

/* /review/: the page H1 was 48 px weight 500, the summary heading 33 px
 * weight 500 with a 1.6 line height, the kicker a pill unlike every other
 * eyebrow. Same type system as the rest of the site. */
body:not(.mw-pro) .content-shell:has(.bastion-review-page) {
  padding-top: 32px;
}

body:not(.mw-pro) .page-standard:has(.bastion-review-page) {
  padding-top: 0;
}

body:not(.mw-pro) .page-standard:has(.bastion-review-page) .page-header h1 {
  color: var(--sp-ink);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 18px;
}

body:not(.mw-pro) .bastion-review-page-summary {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 34, 48, .04);
  padding: 20px 24px;
}

body:not(.mw-pro) .bastion-review-page-summary .section-kicker {
  background: none;
  border-radius: 0;
  color: var(--sp-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0;
  text-transform: uppercase;
}

body:not(.mw-pro) .bastion-review-page-summary h2 {
  color: var(--sp-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 6px 0 6px;
}

body:not(.mw-pro) .bastion-review-page-summary p {
  color: var(--sp-muted);
  font-size: 14.5px;
}

body:not(.mw-pro) .bastion-review-page-rating strong {
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

body:not(.mw-pro) .bastion-review-page-rating small {
  color: var(--sp-muted);
  font-size: 12.5px;
}

body:not(.mw-pro) .bastion-review-page-card-head h3 {
  font-weight: 600;
}

@media (max-width: 780px) {
  body:not(.mw-pro) .content-shell:has(.bastion-review-page) {
    padding-top: 20px;
  }

  body:not(.mw-pro) .bastion-review-page-summary {
    padding: 16px;
  }

  body:not(.mw-pro) .bastion-review-page-summary h2 {
    font-size: 20px;
  }

  body:not(.mw-pro) .bastion-review-page-rating strong {
    font-size: 28px;
  }
}

/* ===================================================================== */
/* 11. FAQ                                                               */
/* ===================================================================== */

/* Answers ran 110 characters per line at 1440 (778 px column). */
body:not(.mw-pro) .us-faq details p {
  max-width: 68ch;
}

body:not(.mw-pro) .us-faq summary {
  transition: color .15s ease;
}

body:not(.mw-pro) .us-faq summary:hover {
  color: var(--sp-brand-dark);
}

body:not(.mw-pro) .us-faq summary:hover::after {
  border-color: var(--sp-brand-2);
}

/* ===================================================================== */
/* 12. Final call to action                                              */
/* ===================================================================== */

/* The H2 inherited a 1.55 line height (46.5 px for 30 px type). */
body:not(.mw-pro) .us-final h2 {
  line-height: 1.15;
}

body:not(.mw-pro) .us-final .us-btn--light:hover {
  background: var(--sp-ice);
  color: var(--sp-ink);
}

/* ===================================================================== */
/* 13. Footer (.compact-footer)                                          */
/* ===================================================================== */

@media (min-width: 820px) {
  /* Desktop: brand | nav | contact on one top line, then a hairline bar
   * with © left and legal right on one baseline (they were 10 px apart,
   * and "Book service" stopped 53 px short of the right edge). */
  body:not(.mw-pro) .compact-footer {
    column-gap: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: 16px;
  }

  body:not(.mw-pro) .compact-footer__about strong {
    line-height: 28px;
    margin-bottom: 2px;
  }

  body:not(.mw-pro) .compact-footer__nav {
    gap: 4px 22px;
    padding: 0 44px;
  }

  body:not(.mw-pro) .compact-footer__contact {
    gap: 4px 22px;
    justify-content: flex-end;
  }

  body:not(.mw-pro) .site-footer .compact-footer__nav a,
  body:not(.mw-pro) .site-footer .compact-footer__contact a,
  body:not(.mw-pro) .site-footer .compact-footer__legal a {
    min-height: 28px;
  }

  body:not(.mw-pro) .compact-footer__copyright,
  body:not(.mw-pro) .compact-footer__legal {
    align-items: center;
    align-self: stretch;
    border-top: 1px solid var(--sp-line);
    display: flex;
    grid-row: 2;
    min-height: 41px;
    padding-top: 12px;
  }

  body:not(.mw-pro) .compact-footer__copyright {
    font-size: 12.5px;
    grid-column: 1;
  }

  body:not(.mw-pro) .compact-footer__legal {
    gap: 4px 22px;
    grid-column: 2 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 819px) {
  /* Phones: 40 px links -> 44 px targets; tighter rhythm. */
  body:not(.mw-pro) .site-footer .compact-footer__nav a,
  body:not(.mw-pro) .site-footer .compact-footer__contact a,
  body:not(.mw-pro) .site-footer .compact-footer__legal a {
    min-height: 44px;
    padding: 0 4px;
  }

  body:not(.mw-pro) .compact-footer__nav,
  body:not(.mw-pro) .compact-footer__contact,
  body:not(.mw-pro) .compact-footer__legal {
    gap: 0 14px;
  }

  body:not(.mw-pro) .compact-footer {
    row-gap: 10px;
  }
}

/* ===================================================================== */
/* 14. Inner pages and /book-service/                                    */
/* ===================================================================== */

body:not(.mw-pro) .us-breadcrumbs [aria-current="page"] {
  color: var(--sp-ink);
  font-weight: 600;
}

body:not(.mw-pro) .us-breadcrumbs .us-shell > span:not([aria-current]) {
  color: var(--sp-line-strong);
}

/* Issue cards: even figures for "01 / 02 / 03". */
body:not(.mw-pro) .us-issue__number {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Diagnosis check list: tinted icon boxes in the site's tones (colour on
 * the container only). */
body:not(.mw-pro) .us-check-list li:nth-child(3n + 1) .us-icon { color: var(--sp-sky); }
body:not(.mw-pro) .us-check-list li:nth-child(3n + 2) .us-icon { color: var(--sp-violet); }
body:not(.mw-pro) .us-check-list li:nth-child(3n + 3) .us-icon { color: var(--sp-green); }

/* /book-service/: one form language with the booking card — 16 px card
 * radius, 1 px #8396a0 field borders (were 2 px #b7c8d0, 1.7:1), 46 px
 * fields (were 54), pill button, 700-weight heading. Single-step form and
 * its behaviour are unchanged. */
/* 700 -> 620 px column: 638 px wide fields were longer than any answer. */
body:not(.mw-pro) .book-service-clean-shell {
  max-width: 620px;
}

body:not(.mw-pro) .booking-card--standalone {
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 34, 48, .05), 0 12px 32px rgba(6, 47, 66, .08);
  padding: 28px 30px 26px;
  position: relative;
}

body:not(.mw-pro) .booking-card--standalone::before {
  background: linear-gradient(90deg, var(--sp-brand-2) 0%, var(--sp-blue) 55%, var(--sp-violet) 100%);
  content: "";
  height: 2px;
  left: 30px;
  position: absolute;
  right: 30px;
  top: -1px;
}

body:not(.mw-pro) .booking-card--standalone .booking-card__eyebrow {
  color: var(--sp-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:not(.mw-pro) .booking-card--standalone h1 {
  color: var(--sp-ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 6px 0 8px;
}

body:not(.mw-pro) .booking-card--standalone > p {
  color: var(--sp-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: none;
}

body:not(.mw-pro) .booking-card--standalone .booking-form {
  gap: 12px;
}

body:not(.mw-pro) .booking-card--standalone .booking-form label > span:first-child {
  color: var(--sp-text);
  font-size: 12.5px;
  font-weight: 600;
}

body:not(.mw-pro) .booking-card--standalone .bastion-service-setting label > span {
  font-size: 13.5px;
}

body:not(.mw-pro) .booking-card--standalone .booking-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
body:not(.mw-pro) .booking-card--standalone .booking-form select,
body:not(.mw-pro) .booking-card--standalone .booking-form textarea {
  background-color: #fff;
  border: 1px solid var(--r4-field);
  border-radius: 10px;
  box-shadow: none;
  color: var(--sp-ink);
  font-size: 16px;
  min-height: 46px;
  padding-bottom: 0;
  padding-top: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body:not(.mw-pro) .booking-card--standalone .booking-form textarea {
  line-height: 1.4;
  padding-bottom: 11px;
  padding-top: 11px;
}

body:not(.mw-pro) .booking-card--standalone .booking-form input::placeholder,
body:not(.mw-pro) .booking-card--standalone .booking-form textarea::placeholder {
  color: #66767f;
}

body:not(.mw-pro) .booking-card--standalone .booking-form :is(input, select, textarea):hover:not(:focus):not(:disabled) {
  border-color: var(--r4-field-hover);
}

body:not(.mw-pro) .booking-card--standalone .booking-form :is(input, select, textarea):focus {
  border-color: var(--sp-brand);
  box-shadow: var(--r4-focus-halo);
  outline: 0;
}

body:not(.mw-pro) .booking-card--standalone .booking-form select:disabled {
  background-color: #f4f7f9;
  border-color: var(--sp-line-strong);
  color: var(--sp-muted);
  -webkit-text-fill-color: var(--sp-muted);
  opacity: 1;
}

body:not(.mw-pro) .booking-card--standalone .booking-form .btn-full {
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 102, 128, .2);
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
}

body:not(.mw-pro) .booking-card--standalone .booking-form .btn-full:hover {
  background: var(--sp-brand-dark);
}

@media (max-width: 780px) {
  body:not(.mw-pro) .booking-card--standalone {
    border-radius: 14px;
    padding: 20px 16px 18px;
  }

  body:not(.mw-pro) .booking-card--standalone::before {
    left: 16px;
    right: 16px;
  }

  body:not(.mw-pro) .booking-card--standalone h1 {
    font-size: 26px;
  }

  body:not(.mw-pro) .booking-card--standalone .booking-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  body:not(.mw-pro) .booking-card--standalone .booking-form select,
  body:not(.mw-pro) .booking-card--standalone .booking-form textarea {
    min-height: 44px;
  }
}

/* ===================================================================== */
/* 15. Phone call bar and cookie notice                                  */
/* ===================================================================== */

@media (max-width: 782px) {
  /* Bar: 70 -> 63 px, lighter button shadow, a soft edge instead. */
  body:not(.mw-pro) .mobile-call {
    box-shadow: 0 -6px 18px rgba(14, 34, 48, .06);
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  body:not(.mw-pro) .mobile-call a {
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    min-height: 46px;
    padding: 0 12px;
  }

  body:not(.mw-pro) .mobile-call a.mobile-call__phone {
    box-shadow: 0 4px 12px rgba(0, 102, 128, .22);
  }

  /* r4.js: hidden while the booking card or the closing call-to-action
   * (both already show Call and Book) is on screen, so the bar never
   * covers Continue / Book Now. */
  body:not(.mw-pro).r4-bar-off .mobile-call {
    pointer-events: none;
    transform: translateY(16px);
    visibility: hidden;
  }

  /* Cookie notice: one 9 px gap above the 63 px bar; back to the bottom
   * when the bar is hidden. */
  body:not(.mw-pro).scrolled-hero #cookie-notice.cookie-notice-visible.cn-position-bottom {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.mw-pro).scrolled-hero.r4-bar-off #cookie-notice.cookie-notice-visible.cn-position-bottom,
  body:not(.mw-pro).scrolled-hero.bk-typing #cookie-notice.cookie-notice-visible.cn-position-bottom {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /* "OK" was 34 px tall. */
  body:not(.mw-pro) #cookie-notice #cn-accept-cookie {
    min-height: 44px;
    min-width: 56px;
    padding: 0 16px;
  }

  body:not(.mw-pro) #cookie-notice .cookie-notice-container {
    padding: 6px 6px 6px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.mw-pro).r4-bar-off .mobile-call {
    transform: none;
  }
}

/* =====================================================================
 * Hero photos (owner-approved 2026-10-10, «Да, выпускай так»): the page's own
 * featured photo under the hero copy — left of the booking card on desktop,
 * between the copy and the card on phones. Markup: bastion_unified_hero_photo_html().
 * ===================================================================== */
.us-hero__photo {
  margin: 22px 0 0;
  max-width: 560px;
  border-radius: 16px;
  overflow: hidden;
  background: #e8eff2;
  box-shadow: 0 0 0 1px rgba(14, 34, 48, .08), 0 6px 18px rgba(14, 34, 48, .08);
}

/* The whole photo in its own 3:2 frame: no crop, no zoom (owner: «полноценные фотографии»). */
.us-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 819px) {
  .us-hero__photo {
    margin-top: 18px;
    max-width: none;
    border-radius: 14px;
  }
}

/* =====================================================================
 * Booking card without the step labels (owner, 2026-10-10: «1 · Visit details /
 * 2 · Address & phone … ни к чему не привязаны … они там не нужны»). The list stays
 * for screen readers only: the script still moves focus to it on Continue/Change.
 * ===================================================================== */
body .us-booking-card .booking-form .bk-steps {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* =====================================================================
 * Booking card title (owner-approved 2026-10-10): only "Book online", centred.
 * "Schedule a service visit" leaves the screen but stays for screen readers,
 * so the form keeps its name; the explanation line is hidden on every card.
 * ===================================================================== */
body .us-booking-card > .booking-card__eyebrow {
  margin: 0 0 14px;
  text-align: center;
}

body .us-booking-card > h2 {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body .us-booking-card > h2 + p {
  display: none;
}