/* Orange Crew — homepage + matching subpages (e.g. in-home service)
   Scoped under body.home so shared layout/hero/trust blocks match the homepage. */

.home .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Service pages: one-line trust under hero (not the full homepage trusted bar) */
.home .service-trust-rail {
  margin: 0;
  padding: 0.85rem 1.25rem;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.home .service-trust-rail strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* —— Hero illustration layout —— */
.home .hero-illu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, #f6f8fb 0%, #eef2f7 45%, #e4eaf2 100%);
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
}

.home .hero-illu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
  z-index: 0;
}

.home .hero-illu__inner {
  position: relative;
  z-index: 1;
  max-width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .home .hero-illu__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    gap: 3rem;
  }
}

.home .hero-illu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.home .hero-illu__stars {
  color: #f0b429;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

.home .hero-illu h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
  color: var(--color-ink);
}

.home .hero-illu__accent {
  display: block;
  background: linear-gradient(120deg, #f6851f 0%, #ed6f23 45%, #d45f1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home .hero-illu__lead {
  margin: 0 0 1.75rem;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 44ch;
}

.home .hero-illu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.home .hero-illu__trust {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
}

.home .hero-illu__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}

.home .hero-illu__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(237, 111, 35, 0.1);
  color: var(--color-orange);
  flex-shrink: 0;
}

.home .hero-illu__trust-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.home .hero-illu__visual {
  position: relative;
  border-radius: 22px;
  /* The SVG carries its own sky gradient + skyline backdrop, so the old
     white card wrapper was just adding a visible "white square" behind the
     illustration. We keep border-radius + overflow:hidden so the SVG's own
     corners stay rounded against the section background. */
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  aspect-ratio: 4 / 3;
  max-height: 420px;
}

.home .hero-illu__visual svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: home-hero-float 5s ease-in-out infinite;
}

.home .hero-illu__visual--photo {
  background: transparent;
  overflow: hidden;
  border-radius: 22px;
}

.home .hero-illu__visual--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: home-hero-float 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home .hero-illu__visual svg,
  .home .hero-illu__visual--photo img {
    animation: none;
  }
}

/* Mobile-only hero refinements for every body.home page.
   1) Hide the illustration slot only on the true homepage (no secondary
      page class) — marketing + service pages keep their aside card/form.
   2) Center hero copy, lead, actions, and trust chips on all .home pages.
   3) Keep the index-only inline quick-quote form left-aligned. */
@media (max-width: 768px) {
  body.home:not(.pricing-page):not(.about-page):not(.how-page):not(.contact-page):not(.areas-page) .hero-illu__visual:not(.hero-illu__visual--form) {
    display: none;
  }

  body.home .hero-illu__copy {
    text-align: center;
  }

  body.home .hero-illu__lead {
    margin-left: auto;
    margin-right: auto;
  }

  body.home .hero-illu__actions {
    justify-content: center;
  }

  body.home .hero-illu__trust {
    justify-content: center;
  }

  body.home .hero-illu__inline-quote {
    text-align: left;
  }
}

/* —— Hero form variant: replaces the illustration on service pages —— */
.home .hero-illu__visual--form {
  background: none;
  border: 0;
  box-shadow: none;
  aspect-ratio: auto;
  max-height: none;
  border-radius: 0;
  overflow: visible;
}

.home .inhome-hero-form {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1a2431 0%, #0f1419 60%, #1a1410 100%);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(237, 111, 35, 0.35);
  box-shadow: 0 28px 56px rgba(15, 20, 25, 0.28),
    0 4px 14px rgba(237, 111, 35, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 1.65rem 1.4rem 1.75rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.home .inhome-hero-form::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  pointer-events: none;
  background: radial-gradient(circle at 80% 20%, rgba(237, 111, 35, 0.22), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(251, 187, 0, 0.08), transparent 45%);
}

.home .inhome-hero-form > * {
  position: relative;
  z-index: 1;
}

.home .inhome-hero-form__head {
  margin-bottom: 1.15rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home .inhome-hero-form__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(237, 111, 35, 0.16);
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  margin: 0 0 0.6rem;
}

.home .inhome-hero-form__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: #fff;
  line-height: 1.15;
}

.home .inhome-hero-form__sub {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
}

.home .inhome-hero-form__form .form-group {
  margin-bottom: 0.75rem;
}

.home .inhome-hero-form__form .form-group label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  display: block;
}

.home .inhome-hero-form__form .form-group input,
.home .inhome-hero-form__form .form-group textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  width: 100%;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.home .inhome-hero-form__form .form-group input::placeholder,
.home .inhome-hero-form__form .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.home .inhome-hero-form__form .form-group input:hover,
.home .inhome-hero-form__form .form-group textarea:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.home .inhome-hero-form__form .form-group input:focus,
.home .inhome-hero-form__form .form-group textarea:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(237, 111, 35, 0.22);
  outline: none;
}

.home .inhome-hero-form__form .form-group textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.45;
}

.home .inhome-hero-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 540px) {
  .home .inhome-hero-form__row {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
  }
}

.home .inhome-hero-form__form .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.35rem 0 1.1rem;
}

.home .inhome-hero-form__form .form-consent input[type="checkbox"] {
  margin-top: 0.18rem;
  accent-color: var(--color-orange);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.home .inhome-hero-form__form .form-consent label {
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.4;
}

.home .inhome-hero-form__form .btn-block {
  margin-top: 0.25rem;
  box-shadow: 0 10px 24px rgba(237, 111, 35, 0.4);
}

.home .inhome-hero-form__alt {
  margin: 0.95rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

.home .inhome-hero-form__alt a {
  color: var(--color-orange);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dashed rgba(237, 111, 35, 0.45);
}

.home .inhome-hero-form__alt a:hover {
  color: #ffd1a8;
  border-bottom-color: var(--color-orange);
}

.home .inhome-hero-form .form-alert--error {
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fecaca;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}

.home .inhome-hero-form .form-alert--error a {
  color: #fff;
  text-decoration: underline;
}

@keyframes home-hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Mini quote strip */
.home .hero-illu__inline-quote {
  margin-top: 0.25rem;
  padding: 1.1rem 1.15rem 1.15rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 20, 25, 0.06);
}

.home .hero-illu__inline-quote-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  color: var(--color-ink);
}

/* Hero quote form: stacked layout — top row is its own grid so labels align (no short field vs textarea mismatch) */
.home .hero-illu__inline-grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.home .hero-illu__inline-grid .form-group {
  margin-bottom: 0;
}

.home .hero-illu__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 0.75rem;
  align-items: start;
}

@media (min-width: 520px) {
  .home .hero-illu__form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .home .hero-illu__form-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home .hero-illu__inline-grid .hero-illu__field--message textarea {
  min-height: 5.25rem;
  resize: vertical;
}

.home .hero-illu__inline-grid .hero-illu__field--consent {
  margin-top: 0.1rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.42;
  gap: 0.5rem;
  background: #f4f7fb;
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.home .hero-illu__inline-grid .hero-illu__field--consent label {
  color: var(--color-ink-muted);
}

.home .hero-illu__inline-grid .hero-illu__field--submit {
  display: flex;
  margin-top: 0.1rem;
}

.home .hero-illu__inline-grid .hero-illu__field--submit .btn {
  width: 100%;
  min-height: 2.75rem;
  justify-content: center;
  margin-top: 0;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(237, 111, 35, 0.25);
}

@media (min-width: 520px) {
  .home .hero-illu__inline-grid .hero-illu__field--submit .btn {
    max-width: 12rem;
  }
}

/* —— Trusted bar —— */
.home .trusted-bar {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home .trusted-bar__inner {
  max-width: min(1180px, 100%);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

/* On the mobile 2-col grid the 5th item ("Donate & recycle") is alone in row 3.
   Span it across both columns and center its content so it doesn't sit lopsided
   on the left. (Above 900px the layout switches to a horizontal flex row, so
   this rule is naturally scoped to the grid breakpoint.) */
.home .trusted-bar__inner > .trusted-bar__item:nth-child(5) {
  grid-column: 1 / -1;
  justify-content: center;
}

@media (min-width: 900px) {
  .home .trusted-bar__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding: 1.1rem 1.25rem;
  }

  .home .trusted-bar__item {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 0.75rem;
    border-right: 1px solid var(--color-border);
  }

  .home .trusted-bar__item:last-child {
    border-right: none;
  }
}

.home .trusted-bar__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.home .trusted-bar__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff5ec, #ffe4cc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home .trusted-bar__copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.home .trusted-bar__copy strong {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.home .trusted-bar__copy span {
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--color-ink-muted);
}

/* —— Statement dark —— */
.home .statement-dark {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
  background: #0f1419;
  color: #fff;
  overflow: hidden;
}

.home .statement-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 15% 20%, rgba(237, 111, 35, 0.22), transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(251, 187, 0, 0.12), transparent 45%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
  background-size: auto, auto, 22px 22px;
  opacity: 0.95;
}

.home .statement-dark__inner {
  position: relative;
  z-index: 1;
  max-width: min(960px, 100%);
  margin: 0 auto;
  text-align: center;
}

.home .statement-dark .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: #fbbb00;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.home .statement-dark .section__title {
  color: #fff;
}

.home .statement-dark .section__title::after {
  background: linear-gradient(90deg, #f6851f, #fbbb00);
  margin-left: auto;
  margin-right: auto;
}

.home .statement-dark .section__subtitle {
  color: rgba(255, 255, 255, 0.78);
  margin-left: auto;
  margin-right: auto;
}

.home .iso-pillars {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
}

@media (min-width: 760px) {
  .home .iso-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.home .iso-pillar {
  position: relative;
  padding: 1.65rem 1.35rem 1.5rem;
  background: #fff;
  border-radius: 18px;
  color: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}

.home .iso-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(237, 111, 35, 0.2);
}

/* —— Staggered iso pillars + dashed connector (service pages) —— */
.home .iso-pillars--staggered {
  position: relative;
}

.home .iso-pillars--staggered .iso-pillar {
  position: relative;
  z-index: 1;
  --stagger-y: 0px;
  transform: translateY(var(--stagger-y));
}

.home .iso-pillars--staggered .iso-pillar:hover {
  transform: translateY(calc(var(--stagger-y) - 6px));
}

.home .iso-connector {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

@media (min-width: 760px) {
  .home .iso-connector {
    display: block;
  }

  .home .iso-pillars--staggered .iso-pillar:nth-of-type(1) {
    --stagger-y: 28px;
  }

  .home .iso-pillars--staggered .iso-pillar:nth-of-type(2) {
    --stagger-y: -28px;
  }

  .home .iso-pillars--staggered .iso-pillar:nth-of-type(3) {
    --stagger-y: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .iso-pillars--staggered .iso-pillar {
    --stagger-y: 0px;
  }

  .home .iso-pillars--staggered .iso-pillar:hover {
    transform: translateY(0);
  }
}

.home .iso-pillar__art {
  width: 100%;
  max-width: 120px;
  margin: 0 auto 1rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home .iso-pillar__art svg {
  width: 100%;
  height: auto;
  display: block;
}

.home .iso-pillar__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.home .iso-pillar__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 0.35rem;
  text-align: center;
}

.home .iso-pillar h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  text-align: center;
}

.home .iso-pillar p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* —— How it works alternating —— */
.home .howto-stack {
  max-width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.home .howto-row {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 880px) {
  .home .howto-row {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 3rem;
  }

  .home .howto-row.howto-row--reverse {
    gap: clamp(1rem, 2.2vw, 1.65rem);
  }

  .home .howto-row--reverse .howto-copy {
    order: 2;
  }

  .home .howto-row--reverse .howto-art {
    order: 1;
  }

  /* Same art tile width on normal + reverse rows (photo grids on commercial / outdoor). */
  .home .howto-stack--uniform-howto-art .howto-row {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  }

  .home .howto-stack--uniform-howto-art .howto-row--reverse {
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  }

  .home .howto-stack--uniform-howto-art .howto-art {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

.home .howto-art {
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 400px;
  justify-self: center;
}

/* Pricing intro: larger crew-at-door illustration */
.home.pricing-page .section[aria-labelledby="pricing-intro-heading"] .howto-art {
  max-width: min(480px, 100%);
}

/* Pricing intro background: clean white to match art card */
.home.pricing-page .section[aria-labelledby="pricing-intro-heading"] {
  background: #fff;
}

.home.pricing-page .section[aria-labelledby="pricing-intro-heading"]::before {
  opacity: 0;
}

@media (min-width: 880px) {
  .home.pricing-page .section[aria-labelledby="pricing-intro-heading"] .howto-row {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  }

  .home.pricing-page .section[aria-labelledby="pricing-intro-heading"] .howto-art {
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }
}

.home .howto-art svg,
.home .howto-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

/* About — "Our story" art: flex children default to min-height:auto, which
   blocks overflow:hidden + radius from clipping imgs — force min 0 so corners
   match every other howto tile. */
.home.about-page .about-story-section .howto-art {
  --about-story-art-radius: 20px;
  border-radius: var(--about-story-art-radius);
  overflow: hidden;
  isolation: isolate;
}

.home.about-page .about-story-section .howto-art.howto-art--oval {
  --about-story-art-radius: 42px;
}

.home.about-page .about-story-section .howto-art img,
.home.about-page .about-story-section .howto-art svg {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  border-radius: var(--about-story-art-radius);
}

.home.about-page .about-story-section .howto-art svg {
  overflow: hidden;
}

.home .howto-copy .eyebrow {
  margin-bottom: 0.65rem;
}

.home .howto-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--color-ink);
}

.home .howto-copy p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.58;
  color: var(--color-ink-muted);
}

.home .howto-copy__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-orange);
  text-decoration: none;
}

.home .howto-copy__link:hover {
  gap: 0.5rem;
}

/* —— How-it-works mobile carousel ——————————————————————————————
   Only the homepage stack carries the .howto-stack--carousel modifier,
   so the alternating layout used by service pages stays untouched.
   The dots are hidden by default and only rendered alongside the
   carousel layout below 768px. */
.howto-dots {
  display: none;
}

@media (max-width: 768px) {
  /* Edge-to-edge horizontal scroll-snap rail. Cards fill the full visible
     content width (no peek of the neighbor) so the first card lands
     perfectly centered on initial render — the dots below already cue
     "more steps to swipe through". */
  .home .howto-stack--carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    /* Gap matches the rail's left+right padding (1.25rem) so the second
       card's left edge lands exactly at the viewport's right edge when
       scrollLeft = 0 — no sliver of card 2 peeks in, and card 1 reads as
       fully centered with equal 1.25rem margins on both sides. */
    gap: 1.25rem;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 2rem -1.25rem 0;
    /* Override the base .home .howto-stack max-width: min(1120px, 100%).
       Without this, the negative L/R margins are over-constrained and the
       browser silently recomputes margin-right, shifting the rail (and
       therefore the first card) off-center on mobile. */
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home .howto-stack--carousel::-webkit-scrollbar {
    display: none;
  }

  .home .howto-stack--carousel .howto-row {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(15, 20, 25, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 20, 25, 0.05);
    text-align: center;
  }

  /* Drop the desktop reverse-row ordering on mobile — every card is
     image-on-top, copy-below for consistent rhythm. */
  .home .howto-stack--carousel .howto-row--reverse .howto-copy,
  .home .howto-stack--carousel .howto-row--reverse .howto-art {
    order: initial;
  }

  .home .howto-stack--carousel .howto-art {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: min(400px, 100%);
    max-height: none;
    border-radius: 12px;
    padding: 0;
    margin-inline: auto;
    background: transparent;
    box-shadow: none;
    justify-self: center;
  }

  .home .howto-stack--carousel .howto-art svg,
  .home .howto-stack--carousel .howto-art img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  .home .howto-stack--carousel .howto-copy {
    text-align: center;
  }

  .home .howto-stack--carousel .howto-copy .eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .home .howto-stack--carousel .howto-copy__link {
    margin: 0 auto;
  }

  .home .howto-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
  }

  .home .howto-dots__dot {
    appearance: none;
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 20, 25, 0.18);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .home .howto-dots__dot.is-active {
    background: var(--color-orange);
    transform: scale(1.3);
  }

  .home .howto-dots__dot:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
  }

  /* —— Generic card rails (about / how / pricing; not used on index) —— */
  .home .howto-options--carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    align-items: stretch;
    gap: 1.25rem;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 2rem -1.25rem 0;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* Price cards: flex row; stretch + JS rail height = max slide for equal shells. */
  .home .price-cards--carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 0.5rem;
    margin: 2rem -1.25rem 0;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
    min-height: 0;
  }

  .home .price-cards--carousel .price-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    box-sizing: border-box;
  }

  .home .price-cards--carousel .price-card__list {
    flex: 1 1 auto;
    min-height: 0;
  }

  .home .price-cards--carousel::-webkit-scrollbar,
  .home .howto-options--carousel::-webkit-scrollbar {
    display: none;
  }

  .home .price-cards--carousel .price-card:hover {
    transform: none;
  }

  .home .howto-options--carousel .howto-option {
    align-self: stretch;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    align-items: center;
    text-align: center;
  }

  .home .howto-options--carousel .howto-option:hover {
    transform: none;
  }

  .home .howto-options--carousel .howto-option .btn {
    align-self: center;
    width: min(100%, 20rem);
    margin-top: auto;
  }

  /* Service areas: 4-up office cards → horizontal rail on mobile */
  .home.areas-page .region-cards--carousel {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.25rem;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 2rem -1.25rem 0;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home.areas-page .region-cards--carousel::-webkit-scrollbar {
    display: none;
  }

  .home.areas-page .region-cards--carousel .region-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .home.areas-page .region-cards--carousel .region-card:hover {
    transform: none;
  }

  /* Contact page: hours / reply / what-to-send cards */
  .home.contact-page .info-trio--carousel {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.25rem;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 2rem -1.25rem 0;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home.contact-page .info-trio--carousel::-webkit-scrollbar {
    display: none;
  }

  .home.contact-page .info-trio--carousel .info-trio__card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    align-items: center;
    text-align: center;
  }

  .home.contact-page .info-trio--carousel .info-trio__list li {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  .home.contact-page .info-trio--carousel .info-trio__card:hover {
    transform: none;
  }

  /* Center the "How it works" eyebrow pill above the centered title on
     mobile. .eyebrow is normally inline-flex (so it can sit inline next
     to other text); switching to flex + fit-content + auto margins keeps
     the pill shape but centers it as a block. Scoped via the section's
     aria-labelledby so other eyebrows on the page are untouched. */
  .home [aria-labelledby="c1-howto-heading"] > .section__inner > .eyebrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Pricing page: center intro + truck-tier copy column on mobile */
  .home.pricing-page .section[aria-labelledby="pricing-intro-heading"] .howto-copy,
  .home.pricing-page .section[aria-labelledby="pricing-multi-heading"] .howto-copy {
    text-align: center;
  }

  .home.pricing-page .section[aria-labelledby="pricing-intro-heading"] .howto-copy .eyebrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .home.pricing-page .section[aria-labelledby="pricing-intro-heading"] .howto-copy .stack-sm {
    justify-content: center;
  }

  .home.pricing-page .section[aria-labelledby="pricing-multi-heading"] .howto-copy .multi-price-table {
    margin-inline: auto;
    max-width: min(100%, 26rem);
  }
}

.home .eyebrow--badge {
  color: #c5571a;
  background: linear-gradient(180deg, rgba(237, 111, 35, 0.16) 0%, rgba(237, 111, 35, 0.07) 100%);
  border: 1px solid rgba(237, 111, 35, 0.28);
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  gap: 0.45rem;
  box-shadow: 0 2px 6px rgba(237, 111, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.home .eyebrow--badge svg {
  color: var(--color-orange);
  flex-shrink: 0;
  display: block;
}

/* —— Services isometric —— */
.home .services-iso__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.home .services-iso__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .home .services-iso__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .home .services-iso__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* about.html “Who we help” — three columns on small screens (6 cards = 3×2).
   Default .services-iso__grid is 1fr below 640px; this overrides for a compact grid. */
@media (max-width: 639px) {
  .home.about-page .services-iso__grid:not(.services-iso__grid--carousel) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home.about-page .services-iso__head {
    margin-bottom: 1.25rem;
  }

  .home.about-page .services-iso__grid:not(.services-iso__grid--carousel) .service-iso {
    padding: 0.55rem 0.4rem 0.5rem;
    border-radius: 12px;
    min-height: 0;
  }

  .home.about-page .services-iso__grid:not(.services-iso__grid--carousel) .service-iso__art {
    max-width: 48px;
    margin-bottom: 0.35rem;
  }

  .home.about-page .services-iso__grid:not(.services-iso__grid--carousel) .service-iso h3 {
    font-size: clamp(0.75rem, 3.1vw, 0.88rem);
    line-height: 1.2;
    margin: 0 0 0.25rem;
  }

  .home.about-page .services-iso__grid:not(.services-iso__grid--carousel) .service-iso p {
    font-size: clamp(0.65rem, 2.5vw, 0.74rem);
    line-height: 1.32;
    margin: 0 0 0.35rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .home.about-page .services-iso__grid:not(.services-iso__grid--carousel) .service-iso__cta {
    font-size: clamp(0.62rem, 2.3vw, 0.72rem);
    line-height: 1.2;
  }
}

/* —— Services mobile carousel ——————————————————————————————————
   Only the homepage grid carries the .services-iso__grid--carousel
   modifier, so the contact-page service grid is untouched. The dots
   are hidden by default and only render alongside the carousel
   layout below 640px. */
.services-dots {
  display: none;
}

@media (max-width: 639px) {
  /* Original flex-row carousel — cards keep their min(85vw, 320px) size
     and left-aligned content (which read well). The only structural
     change vs. the previous version is symmetric inline padding sized
     so the first card sits visually centered in the viewport on initial
     render, with a matching peek of card 2 on the right. */
  .home .services-iso__grid--carousel {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 0 max(1.25rem, calc((100vw - min(85vw, 320px)) / 2)) 0.5rem;
    margin: 0 -1.25rem;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(1.25rem, calc((100vw - min(85vw, 320px)) / 2));
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home .services-iso__grid--carousel::-webkit-scrollbar {
    display: none;
  }

  .home .services-iso__grid--carousel .service-iso {
    flex: 0 0 min(85vw, 320px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Desktop hover lift can stutter snap-scroll on touch — disable it
     while the carousel layout is active. */
  .home .services-iso__grid--carousel .service-iso:hover {
    transform: none;
  }

  .home .services-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
  }

  .home .services-dots__dot {
    appearance: none;
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 20, 25, 0.18);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .home .services-dots__dot.is-active {
    background: var(--color-orange);
    transform: scale(1.3);
  }

  .home .services-dots__dot:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
  }
}

.home .service-iso {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.75rem 1.25rem;
  background: transparent;
  border: 0;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.home .service-iso:hover {
  transform: translateY(-5px);
  color: inherit;
}

.home .service-iso:hover .service-iso__art img {
  transform: scale(1.03);
}

.home .service-iso__art {
  width: 100%;
  max-width: none;
  margin: 0 0 1rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
}

.home .service-iso__art img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.home .service-iso__art svg,
.home .service-iso__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home .service-iso h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  margin: 0 0 0.45rem;
  color: var(--color-ink);
}

.home .service-iso p {
  margin: 0 0 0.85rem;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}

.home .service-iso__cta {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-orange);
}

/* —— Coverage mod —— */
.home .coverage-mod .coverage__inner {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 12px 36px rgba(15, 20, 25, 0.06);
}

.home .coverage-mod .coverage__map {
  box-shadow: 0 8px 28px rgba(15, 20, 25, 0.08);
}

/* —— Coverage mobile centering ——————————————————————————————
   Stack the copy column above the map (already done via the global
   single-column grid below 960px) and center every piece of content:
   eyebrow pill, headline, lead, list rows (tag stacked above
   description), and action buttons. */
@media (max-width: 768px) {
  .home .coverage-mod .coverage__copy {
    text-align: center;
  }

  .home .coverage-mod .coverage__copy .eyebrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .home .coverage-mod .coverage__list li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .home .coverage-mod .coverage__actions {
    justify-content: center;
  }
}

/* —— Reviews split —— */
.home .reviews-split__inner {
  display: grid;
  gap: 2rem;
  align-items: start;
  /* Below 900px we want a single column. Without an explicit
     grid-template-columns, the implicit track resolves to auto =
     max(min-content of all children). The Google Maps iframe in the
     widget reports a min-content of ~1009px (iframe min-content does
     not honour width:100%), which inflates the single track and
     pushes both grid items past the viewport. minmax(0, 1fr) pins
     the track to the grid's own width and lets the iframe shrink. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .home .reviews-split__inner {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: stretch;
  }
}

.home .reviews-widget {
  position: sticky;
  top: calc(5.5rem + env(safe-area-inset-top, 0px));
  padding: 1.75rem 1.5rem;
  background: linear-gradient(165deg, #121820 0%, #1a2431 100%);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 48px rgba(15, 20, 25, 0.18);
}

.home .reviews-widget__score {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 0.35rem;
  background: linear-gradient(180deg, #fff 0%, #e8ecf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home .reviews-widget__stars {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: #f0b429;
  margin-bottom: 0.75rem;
}

.home .reviews-widget__meta {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 1.25rem;
  line-height: 1.45;
}

.home .reviews-widget__g {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.home .reviews-widget .btn-secondary {
  width: 100%;
  justify-content: center;
}

.home .reviews-widget__contact {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.home .reviews-widget__contact-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0 0 0.65rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.home .reviews-widget__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.home .reviews-widget__contact-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.15rem;
}

.home .reviews-widget__contact a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
}

.home .reviews-widget__contact a:hover {
  border-bottom-color: var(--color-orange);
  color: #ffd1a8;
}

.home .reviews-widget__map {
  margin-top: 1.1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0f1419;
  aspect-ratio: 4 / 3;
}

.home .reviews-widget__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.home .reviews-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 899px) {
  .home .reviews-widget {
    position: static;
  }

  .home .reviews-rail {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin: 0 -1.25rem;
    /* Symmetric inline padding so the first review card sits visually
       centered in the viewport on initial render, matching the services
       slider pattern. (100vw - cardWidth) / 2 with a 1.25rem floor for
       larger viewports where the card hits its 340px cap. */
    padding: 0 max(1.25rem, calc((100vw - min(88vw, 340px)) / 2)) 0.5rem;
    scroll-padding-inline: max(1.25rem, calc((100vw - min(88vw, 340px)) / 2));
    -webkit-overflow-scrolling: touch;
  }

  .home .reviews-rail .review-mod {
    flex: 0 0 min(88vw, 340px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* Center the title + subtitle of the reviews column on phones, matching
   the centered layout used by the rest of the homepage on mobile. */
@media (max-width: 768px) {
  .home .reviews-split__main > .section__title,
  .home .reviews-split__main > .section__subtitle {
    text-align: center;
  }
}

/* —— Final CTA mobile centering ————————————————————————————————
   Center every block in the copy column above the form: eyebrow pill,
   headline, lead, the three checklist points, and the
   "Book online + Or call (888) ..." action row. Scoped to .home so the
   .finalcta utility is safe to reuse on other pages later. */
@media (max-width: 768px) {
  .home .finalcta__copy {
    text-align: center;
  }

  .home .finalcta__copy .eyebrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .home .finalcta__pts li {
    justify-content: center;
  }

  .home .finalcta__sidebyside {
    justify-content: center;
  }

  .home .finalcta__phone {
    align-items: center;
  }
}

/* —— Service pages: statement pillars + itemized list columns ———
   Matches the centered rhythm used on the homepage / service carousels. */
@media (max-width: 768px) {
  .home .iso-pillar p {
    text-align: center;
  }

  .home .inhome-itemlist__col {
    text-align: center;
  }

  .home .inhome-itemlist__col ul {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 28rem;
  }

  /* about.html — “Who we help” uses a 3-column grid <640px; center each tile. */
  .home.about-page .services-iso__grid .service-iso {
    align-items: center;
    text-align: center;
  }

  .home.about-page .about-trust__item {
    text-align: center;
    align-items: center;
  }

  .home.about-page .about-trust__item h3 {
    text-align: center;
    width: 100%;
  }

  .home.about-page .about-trust__icon {
    margin-left: auto;
    margin-right: auto;
  }

  .home.how-page .process-step__body {
    text-align: center;
  }

  .home.how-page .process-step__icon {
    margin-left: auto;
    margin-right: auto;
  }

  .home.how-page .process-step__num {
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  .home.how-page .dont-take__item {
    justify-content: center;
    text-align: center;
  }

  .home.how-page .dont-take__head {
    text-align: center;
  }
}

/* —— Reviews widget mobile layout ——————————————————————————————
   On phones the dark widget stacks above the reviews rail. Center
   every block of content (rating, meta, Google badge, contact list,
   map). Width overflow is prevented at the grid track level via the
   minmax(0, 1fr) on .reviews-split__inner above; no per-child
   overflow guards are needed here. */
@media (max-width: 768px) {
  .home .reviews-widget {
    padding: 1.5rem 1.25rem;
    text-align: center;
  }

  .home .reviews-widget__g {
    justify-content: center;
  }

  .home .reviews-widget__contact {
    text-align: center;
  }
}

/* —— In-home service page: 3-column household items list —— */
.home .inhome-itemlist {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .home .inhome-itemlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home .inhome-itemlist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home .inhome-itemlist__col {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.4rem 1.4rem;
  box-shadow: 0 2px 10px rgba(15, 20, 25, 0.04);
}

.home .inhome-itemlist__col h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-ink);
}

.home .inhome-itemlist__price {
  margin: 0 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.home .inhome-itemlist__price strong {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

.home .inhome-itemlist__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--color-ink-muted);
}

.home .inhome-itemlist__col li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.45;
}

.home .inhome-itemlist__col li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--color-orange);
  flex: 0 0 0.4rem;
}

/* —— In-home service page: pricing tier mini-trucks —— */
.truck-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
  width: 100%;
  padding: 1.5rem 1rem;
}

@media (min-width: 480px) {
  .truck-tiers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.truck-tiers figure {
  margin: 0;
  text-align: center;
}

.truck-tiers__full-image {
  grid-column: 1 / -1;
}

.truck-tiers__full-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 48rem;
  margin: 0 auto 0.5rem;
}

.truck-tiers svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 7rem;
  margin: 0 auto 0.5rem;
}

.truck-tiers figcaption {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.truck-tiers__attention {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  padding: 0.75rem 0.95rem;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-ink);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  background: rgba(237, 111, 35, 0.07);
  border: 1px solid rgba(237, 111, 35, 0.35);
  border-radius: var(--radius-md);
}

.truck-tiers__attention strong:first-of-type {
  color: var(--color-orange);
}

/* Truck-tier artwork is a wide strip, so avoid square art boxes on mobile. */
@media (max-width: 879px) {
  .home .howto-art--truck-tiers {
    aspect-ratio: auto;
    align-items: flex-start;
  }

  .home .howto-art--truck-tiers .truck-tiers {
    padding-top: 0.35rem !important;
    padding-bottom: 0.2rem !important;
    gap: 0.35rem 0.75rem;
  }

  .home .howto-art--truck-tiers .truck-tiers__full-image img {
    margin: 0 auto 0.15rem;
  }

  .home .howto-art--truck-tiers .truck-tiers__attention {
    margin-top: 0;
  }
}

.home .tier-chips + .pricing-tiers__attention {
  box-sizing: border-box;
  max-width: 42rem;
  margin: 1rem auto 0;
  padding: 0.75rem 0.95rem;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-ink);
  text-align: left;
  background: rgba(237, 111, 35, 0.07);
  border: 1px solid rgba(237, 111, 35, 0.35);
  border-radius: var(--radius-md);
}

.home .tier-chips + .pricing-tiers__attention strong:first-of-type {
  color: var(--color-orange);
}

/* CTA band on subpages can also host an actions row */
.home .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .home .iso-pillar:hover,
  .home .service-iso:hover {
    transform: none;
  }
}

/* =============================================================== */
/* Pricing page                                                    */
/* .pricing-hero-card  — hero-side at-a-glance tier card           */
/* .price-cards        — 3-col single-item price cards             */
/* .multi-price-table  — full-width tier table                     */
/* .howto-options      — "three ways to book" cards                */
/* =============================================================== */

/*
 * The shared .hero-illu__visual styling (white gradient bg, border, shadow,
 * 4:3 aspect-ratio) is designed to host the homepage SVG illustration.
 * On the pricing and about pages the aside hosts a content card directly,
 * so we strip the wrapper styling — same approach as .hero-illu__visual--form
 * on the service pages.
 */
.pricing-page .hero-illu__visual,
.about-page .hero-illu__visual,
.how-page .hero-illu__visual,
.contact-page .hero-illu__visual,
.areas-page .hero-illu__visual {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
}

/* —— Hero-side pricing card (tabbed) —— */
.pricing-page .pricing-hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1.4rem;
  box-shadow: 0 22px 48px rgba(15, 20, 25, 0.16), 0 6px 16px rgba(237, 111, 35, 0.08);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

/* —— Tab bar —— */
.pricing-page .pricing-hero-card__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f4f6f8;
  border-radius: 999px;
  padding: 0.3rem;
  margin: 0 0 1.1rem;
  isolation: isolate;
}

.pricing-page .pricing-hero-card__tab {
  position: relative;
  z-index: 2;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.25s var(--ease-out);
}

.pricing-page .pricing-hero-card__tab:hover {
  color: var(--color-ink);
}

.pricing-page .pricing-hero-card__tab.is-active {
  color: #fff;
}

.pricing-page .pricing-hero-card__tab:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.pricing-page .pricing-hero-card__tab-glider {
  position: absolute;
  z-index: 1;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  width: calc(50% - 0.3rem);
  background: linear-gradient(135deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(237, 111, 35, 0.32);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-page .pricing-hero-card[data-pricing-active="items"] .pricing-hero-card__tab-glider {
  transform: translateX(100%);
}

/* —— Panels —— */
.pricing-page .pricing-hero-card__panel {
  display: none;
}

.pricing-page .pricing-hero-card__panel.is-active {
  display: block;
  animation: pricingHeroFade 0.36s var(--ease-out);
}

@keyframes pricingHeroFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .pricing-hero-card__panel.is-active {
    animation: none;
  }
  .pricing-page .pricing-hero-card__tab-glider {
    transition: none;
  }
}

.pricing-page .pricing-hero-card__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 0.85rem;
}

.pricing-page .pricing-hero-card__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.pricing-page .pricing-hero-card__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.pricing-page .pricing-hero-card__sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-ink-muted);
}

.pricing-page .pricing-hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.pricing-page .pricing-hero-card__list li {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.92rem;
  color: var(--color-ink-muted);
}

.pricing-page .pricing-hero-card__label {
  flex: 0 1 auto;
  font-weight: 600;
}

.pricing-page .pricing-hero-card__dots {
  flex: 1 1 auto;
  border-bottom: 2px dotted #d8dee6;
  transform: translateY(-3px);
  min-width: 1rem;
}

.pricing-page .pricing-hero-card__amt {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-ink);
  font-size: 0.98rem;
}

.pricing-page .pricing-hero-card__list-row--accent .pricing-hero-card__label,
.pricing-page .pricing-hero-card__list-row--accent .pricing-hero-card__amt {
  color: var(--color-orange);
}

.pricing-page .pricing-hero-card__foot {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.pricing-page .pricing-hero-card__foot + .pricing-hero-card__foot {
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: none;
}

/* —— Single-item price cards (3-col) —— */
.pricing-page .price-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .pricing-page .price-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pricing-page .price-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pricing-page .price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.06);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.pricing-page .price-card:hover {
  transform: translateY(-4px);
  border-color: rgba(237, 111, 35, 0.4);
  box-shadow: 0 18px 40px rgba(15, 20, 25, 0.1), 0 4px 12px rgba(237, 111, 35, 0.08);
}

/*
 * Card head: fixed minimum height so all three cards line up regardless of
 * how many lines the intro text wraps to. Content is vertically centered.
 */
.pricing-page .price-card__head {
  background: #0f1419;
  color: #fff;
  padding: 1.5rem 1.4rem;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pricing-page .price-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

/*
 * Intro paragraph lives inside the dark head, so it needs a warm, readable
 * color (peach/orange) — NOT the default ink-muted which disappears on black.
 * The thin underline below it acts as the section divider visible on the card.
 */
.pricing-page .price-card__intro {
  margin: 0.85rem 0 0;
  padding: 0 0 1rem;
  border: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #ffc499;
  position: relative;
}

.pricing-page .price-card__intro::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

/*
 * Body list takes whatever space is left in the card so all three cards
 * are the same total height. align-content keeps items anchored to the top
 * (rather than spreading), which preserves a tidy reading rhythm even when
 * cards have a different number of rows.
 */
.pricing-page .price-card__list {
  list-style: none;
  margin: 0;
  padding: 1rem 1.4rem 1.4rem;
  display: grid;
  gap: 0.4rem;
  flex: 1;
  align-content: start;
}

.pricing-page .price-card__list li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.93rem;
  color: var(--color-ink-muted);
  padding: 0.3rem 0;
}

.pricing-page .price-card__list li::before {
  content: "→";
  color: var(--color-orange);
  font-weight: 800;
  flex: 0 0 auto;
  line-height: 1;
}

.pricing-page .price-card__list li > span:first-of-type {
  flex: 0 1 auto;
  color: var(--color-ink);
}

.pricing-page .price-card__dots {
  flex: 1 1 auto;
  border-bottom: 2px dotted #d8dee6;
  transform: translateY(-3px);
  min-width: 0.75rem;
}

.pricing-page .price-card__amt {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-orange);
  font-size: 0.98rem;
  white-space: nowrap;
  line-height: 1.15;
}

.pricing-page .price-card__amt small {
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.pricing-page .price-card__list-row--multi {
  align-items: flex-start;
}

/* —— Multi-item truck-tier table —— */
.pricing-page .multi-price-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.06);
}

.pricing-page .multi-price-table__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
  color: var(--color-ink);
}

.pricing-page .multi-price-table__row:nth-child(odd):not(.multi-price-table__row--head):not(.multi-price-table__row--accent) {
  background: #f7f8fa;
}

.pricing-page .multi-price-table__row:last-child {
  border-bottom: 0;
}

.pricing-page .multi-price-table__row--head {
  background: linear-gradient(155deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.95rem 1.4rem;
  text-align: center;
  justify-items: center;
}

.pricing-page .multi-price-table__row--head > span {
  text-align: center;
}

.pricing-page .multi-price-table__row--head .multi-price-table__amt {
  display: none;
}

.pricing-page .multi-price-table__row strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  display: block;
  color: var(--color-ink);
}

.pricing-page .multi-price-table__amt {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
}

.pricing-page .multi-price-table__row--accent {
  background: linear-gradient(180deg, rgba(237, 111, 35, 0.08) 0%, rgba(237, 111, 35, 0.03) 100%);
}

.pricing-page .multi-price-table__note {
  background: #f4f6f8;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  text-align: center;
  line-height: 1.55;
}

/* —— "Three ways to book" cards —— */
.pricing-page .howto-options {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .pricing-page .howto-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pricing-page .howto-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.06);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.pricing-page .howto-option:hover {
  transform: translateY(-4px);
  border-color: rgba(237, 111, 35, 0.4);
  box-shadow: 0 18px 40px rgba(15, 20, 25, 0.1), 0 4px 12px rgba(237, 111, 35, 0.08);
}

.pricing-page .howto-option__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffe8d2 0%, #ffc48a 100%);
  color: var(--color-orange);
}

.pricing-page .howto-option__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-orange);
}

.pricing-page .howto-option h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.pricing-page .howto-option p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--color-ink-muted);
  flex: 1;
}

.pricing-page .howto-option .btn {
  align-self: stretch;
  text-align: center;
}

.pricing-page .howto-option--feature {
  background: linear-gradient(160deg, #fff 0%, #fff7ec 100%);
  border-color: rgba(237, 111, 35, 0.35);
  box-shadow: 0 14px 36px rgba(237, 111, 35, 0.12), 0 4px 12px rgba(15, 20, 25, 0.06);
}

.pricing-page .howto-option--feature .howto-option__icon {
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .price-card:hover,
  .pricing-page .howto-option:hover {
    transform: none;
  }
}

/* =============================================================== */
/* About page                                                      */
/* .about-hero-card  — hero-side "Our promise" card                */
/* .about-stats      — 4-column big-number stats band              */
/* .about-trust      — 6-item trust-signals grid                   */
/* =============================================================== */

/* —— Hero-side promise card —— */
.about-page .about-hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 22px 48px rgba(15, 20, 25, 0.16), 0 6px 16px rgba(237, 111, 35, 0.08);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

.about-page .about-hero-card__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.about-page .about-hero-card__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.about-page .about-hero-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}

.about-page .about-hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.about-page .about-hero-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--color-ink);
}

.about-page .about-hero-card__icon {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 168, 83, 0.12);
  color: #16874f;
  margin-top: 0.05rem;
}

/* —— Stats band (shared by .about-page, .how-page, .contact-page, .areas-page) —— */
.about-page .about-stats,
.how-page .about-stats,
.contact-page .about-stats,
.areas-page .about-stats {
  background: linear-gradient(180deg, #fff7ec 0%, #fff 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(2.5rem, 5vw, 3.75rem) 1.25rem;
}

.about-page .about-stats__inner,
.how-page .about-stats__inner,
.contact-page .about-stats__inner,
.areas-page .about-stats__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

@media (min-width: 720px) {
  .about-page .about-stats__inner,
  .how-page .about-stats__inner,
  .contact-page .about-stats__inner,
  .areas-page .about-stats__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-page .about-stats__item,
.how-page .about-stats__item,
.contact-page .about-stats__item,
.areas-page .about-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem;
  position: relative;
}

@media (min-width: 720px) {
  .about-page .about-stats__item:not(:last-child)::after,
  .how-page .about-stats__item:not(:last-child)::after,
  .contact-page .about-stats__item:not(:last-child)::after,
  .areas-page .about-stats__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    right: -1rem;
    width: 1px;
    background: var(--color-border);
  }
}

.about-page .about-stats__num,
.how-page .about-stats__num,
.contact-page .about-stats__num,
.areas-page .about-stats__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

.about-page .about-stats__unit,
.how-page .about-stats__unit,
.contact-page .about-stats__unit,
.areas-page .about-stats__unit {
  font-size: 0.7em;
  color: var(--color-orange);
  font-weight: 800;
}

.about-page .about-stats__label,
.how-page .about-stats__label,
.contact-page .about-stats__label,
.areas-page .about-stats__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  line-height: 1.4;
  max-width: 16ch;
}

/* —— Trust-signal 6-card grid —— */
.about-page .about-trust {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .about-page .about-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .about-page .about-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-page .about-trust__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.05);
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.about-page .about-trust__item:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 111, 35, 0.32);
  box-shadow: 0 14px 32px rgba(15, 20, 25, 0.08), 0 4px 10px rgba(237, 111, 35, 0.06);
}

.about-page .about-trust__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffe8d2 0%, #ffc48a 100%);
  color: var(--color-orange);
}

.about-page .about-trust__item h3 {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-page .about-trust__item p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
}

/* Mobile: 3 across (6 trust cards = 3×2). Placed after base .about-trust__item
   so align-items / padding override the desktop flex defaults. */
@media (max-width: 639px) {
  .about-page .about-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .about-page .about-trust__item {
    padding: 0.55rem 0.4rem 0.5rem;
    border-radius: 12px;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    min-height: 0;
  }

  .about-page .about-trust__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .about-page .about-trust__icon svg {
    width: 18px;
    height: 18px;
  }

  .about-page .about-trust__item h3 {
    font-size: clamp(0.72rem, 3vw, 0.86rem);
    line-height: 1.2;
    text-align: center;
    width: 100%;
  }

  .about-page .about-trust__item p {
    font-size: clamp(0.6rem, 2.4vw, 0.72rem);
    line-height: 1.32;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
  }
}

/* —— Body unified hover-disable for reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .about-page .about-trust__item:hover {
    transform: none;
  }
}

/* =============================================================== */
/* How it works page                                               */
/* .how-hero-card     — hero-side "process at a glance" card       */
/* .process-timeline  — vertical numbered 6-step timeline          */
/* .dont-take         — dark-bg hazmat callout block               */
/* .tier-chips        — pricing teaser chips                       */
/* =============================================================== */

/* —— Hero-side process-overview card —— */
.how-page .how-hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 22px 48px rgba(15, 20, 25, 0.16), 0 6px 16px rgba(237, 111, 35, 0.08);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

.how-page .how-hero-card__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.how-page .how-hero-card__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.how-page .how-hero-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-ink);
}

.how-page .how-hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  counter-reset: how-hero;
}

.how-page .how-hero-card__list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--color-ink);
}

.how-page .how-hero-card__num {
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.how-page .how-hero-card__text {
  font-weight: 600;
}

/* —— 6-step vertical timeline —— */
.how-page .process-timeline {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  counter-reset: process;
}

.how-page .process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem 1.5rem;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.05);
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  position: relative;
}

.how-page .process-step:hover {
  transform: translateY(-2px);
  border-color: rgba(237, 111, 35, 0.32);
  box-shadow: 0 14px 32px rgba(15, 20, 25, 0.08), 0 4px 10px rgba(237, 111, 35, 0.06);
}

.how-page .process-step__num {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(237, 111, 35, 0.28), inset 0 -2px 4px rgba(0, 0, 0, 0.06);
  flex: 0 0 3.4rem;
  align-self: start;
}

/* Connector dotted line linking the orbs visually */
.how-page .process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.4rem + 1.7rem);
  top: calc(1.6rem + 3.4rem);
  bottom: -1.5rem;
  width: 0;
  border-left: 2px dashed rgba(237, 111, 35, 0.35);
  z-index: 0;
}

.how-page .process-step__body {
  min-width: 0;
}

.how-page .process-step__icon {
  margin: 0 0 0.5rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffe8d2 0%, #ffc48a 100%);
  color: var(--color-orange);
}

.how-page .process-step__body h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.25;
}

.how-page .process-step__body > p {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.how-page .process-step__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.how-page .process-step__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.how-page .process-step__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(237, 111, 35, 0.18);
}

.how-page .process-step__note {
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: #fff7ec;
  border-left: 3px solid var(--color-orange);
  border-radius: 6px;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--color-ink);
}

.how-page .process-step--feature {
  background: linear-gradient(160deg, #fff 0%, #fff7ec 100%);
  border-color: rgba(237, 111, 35, 0.35);
  box-shadow: 0 14px 36px rgba(237, 111, 35, 0.12), 0 4px 12px rgba(15, 20, 25, 0.06);
}

.how-page .process-step__art {
  grid-column: 2;
  margin-top: 0.5rem;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff7ec 0%, #ffe4c4 100%);
  border: 1px solid rgba(237, 111, 35, 0.2);
  aspect-ratio: 16 / 9;
  max-height: 260px;
}

.how-page .process-step__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .how-page .process-step {
    grid-template-columns: 1fr;
    padding: 1.4rem 1.25rem;
  }
  .how-page .process-step__num {
    margin-bottom: 0.25rem;
  }
  .how-page .process-step:not(:last-child)::before {
    left: 2.95rem;
    top: 4.5rem;
  }
  .how-page .process-step__art {
    grid-column: 1;
  }
}

/* How-it-works: horizontal scroll-snap for the 6-step timeline (mobile only). */
@media (max-width: 768px) {
  .how-page .process-timeline--carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 2rem -1.25rem 0;
    padding: 0.5rem 1.25rem 0.5rem;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
  }

  .how-page .process-timeline--carousel::-webkit-scrollbar {
    display: none;
  }

  .how-page .process-timeline--carousel .process-step {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1.25rem 1.2rem 1.35rem;
  }

  .how-page .process-timeline--carousel .process-step__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .how-page .process-timeline--carousel .process-step__list {
    flex: 1 1 auto;
    width: 100%;
    text-align: left;
  }

  .how-page .process-timeline--carousel .process-step:hover {
    transform: none;
  }

  .how-page .process-timeline--carousel .process-step:not(:last-child)::before {
    content: none;
    display: none;
  }

  .how-page .process-timeline--carousel .process-step__num {
    align-self: center;
    margin-bottom: 0;
  }

  .how-page .process-timeline--carousel .process-step__icon {
    margin-left: auto;
    margin-right: auto;
  }

  .how-page .process-timeline--carousel .process-step__list li {
    text-align: left;
  }

  /* Step 3 hero illustration — omit in the mobile slider (tall + redundant). */
  .how-page .process-step__art {
    display: none;
  }
}

/* —— Hazmat "What we cannot transport" callout —— */
.how-page .dont-take {
  background: linear-gradient(160deg, #1a2431 0%, #0f1419 100%);
  color: #fff;
  padding: clamp(2.75rem, 5vw, 4rem) 1.25rem;
  position: relative;
  overflow: hidden;
}

.how-page .dont-take::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 10%, rgba(237, 111, 35, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(251, 187, 0, 0.10) 0%, transparent 40%);
  pointer-events: none;
}

.how-page .dont-take__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.how-page .dont-take__head {
  text-align: center;
  margin-bottom: 2rem;
  max-width: 720px;
  margin-inline: auto;
}

.how-page .dont-take__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.4rem 0.85rem;
  background: rgba(237, 111, 35, 0.18);
  color: #ffc48a;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.how-page .dont-take__head h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.how-page .dont-take__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.how-page .dont-take__grid {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.7rem 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .how-page .dont-take__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .how-page .dont-take__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.how-page .dont-take__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.how-page .dont-take__x {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

.how-page .dont-take__cta {
  margin: 0;
  padding: 1.1rem 1.4rem;
  background: rgba(237, 111, 35, 0.12);
  border: 1px solid rgba(237, 111, 35, 0.35);
  border-radius: var(--radius-lg);
  text-align: center;
}

.how-page .dont-take__cta p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #fff;
}

.how-page .dont-take__cta a {
  color: #ffc48a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.how-page .dont-take__cta a:hover {
  color: #fff;
}

/* —— Pricing teaser chips ——
 * Shared between the how-it-works page and the service-areas page so both
 * render the same flat-tier price chips strip (rather than a default <ul>
 * with bullets, which is what unscoped markup falls back to).
 */
.how-page .tier-chips,
.areas-page .tier-chips {
  list-style: none;
  margin: 2.25rem 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.how-page .tier-chip,
.areas-page .tier-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.95rem 1.4rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.05);
  min-width: 7.25rem;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.how-page .tier-chip:hover,
.areas-page .tier-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 111, 35, 0.4);
}

.how-page .tier-chip__label,
.areas-page .tier-chip__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.how-page .tier-chip__price,
.areas-page .tier-chip__price {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-orange);
}

.how-page .tier-chip--feature,
.areas-page .tier-chip--feature {
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  border-color: var(--color-orange);
  box-shadow: 0 14px 36px rgba(237, 111, 35, 0.28);
}

.how-page .tier-chip--feature .tier-chip__label,
.areas-page .tier-chip--feature .tier-chip__label {
  color: rgba(255, 255, 255, 0.85);
}

.how-page .tier-chip--feature .tier-chip__price,
.areas-page .tier-chip--feature .tier-chip__price {
  color: #fff;
}

.how-page .tier-chips__note,
.areas-page .tier-chips__note {
  text-align: center;
  margin: 0.5rem auto 0;
  max-width: 56ch;
  font-size: 0.95rem;
  color: var(--color-ink-muted);
}

.how-page .tier-chips__note a,
.areas-page .tier-chips__note a {
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 111, 35, 0.4);
}

.how-page .tier-chips__note a:hover,
.areas-page .tier-chips__note a:hover {
  border-bottom-color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
  .how-page .process-step:hover,
  .how-page .tier-chip:hover,
  .areas-page .tier-chip:hover {
    transform: none;
  }
}

/* =============================================================== */
/* Contact page                                                    */
/* .contact-hero-card  — hero-side "pick your channel" card        */
/* .contact-grid       — 2-col layout: form + sidebar              */
/* .contact-sidebar    — "what happens next" + tips panel          */
/* .info-trio          — 3-up info card grid (hours/reply/share)   */
/* + small form-alert--success and form polish                     */
/* =============================================================== */

/* —— Hero-side channel-chooser card —— */
.contact-page .contact-hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 22px 48px rgba(15, 20, 25, 0.16), 0 6px 16px rgba(237, 111, 35, 0.08);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

.contact-page .contact-hero-card__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.contact-page .contact-hero-card__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.contact-page .contact-hero-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-ink);
}

.contact-page .contact-hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.contact-page .contact-hero-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contact-page .contact-hero-card__icon {
  flex: 0 0 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffe8d2 0%, #ffc48a 100%);
  color: var(--color-orange);
  margin-top: 0.05rem;
}

.contact-page .contact-hero-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.contact-page .contact-hero-card__label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}

.contact-page .contact-hero-card__hint {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  line-height: 1.4;
}

.contact-page .contact-hero-card__hint--link {
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
  transition: color 0.15s var(--ease-out);
}

.contact-page .contact-hero-card__hint--link:hover {
  color: var(--color-orange-dark, #d45f1a);
  text-decoration: underline;
}

/* —— 2-column form + sidebar layout —— */
.contact-page .contact-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
  align-items: start;
}

@media (min-width: 960px) {
  .contact-page .contact-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
  }
}

.contact-page .contact-grid__form {
  /* relies on existing .form-card from global.css */
  position: relative;
}

/* —— Sidebar block stack —— */
.contact-page .contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

@media (max-width: 959px) {
  .contact-page .contact-sidebar {
    position: static;
  }
}

.contact-page .contact-sidebar__block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.05);
}

.contact-page .contact-sidebar__block--accent {
  background: linear-gradient(160deg, #fff 0%, #fff7ec 100%);
  border-color: rgba(237, 111, 35, 0.32);
}

.contact-page .contact-sidebar__block--quiet {
  background: #f7f8fa;
  border-color: rgba(15, 20, 25, 0.08);
}

.contact-page .contact-sidebar__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--color-orange);
}

.contact-page .contact-sidebar__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.contact-page .contact-sidebar__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.contact-page .contact-sidebar__num {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}

.contact-page .contact-sidebar__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.contact-page .contact-sidebar__checks li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.contact-page .contact-sidebar__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.65rem;
  height: 0.4rem;
  border-left: 2px solid var(--color-orange);
  border-bottom: 2px solid var(--color-orange);
  transform: rotate(-45deg);
}

.contact-page .contact-sidebar__block--quiet p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
}

/* —— Info trio (hours / reply / share) —— */
.contact-page .info-trio {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}

@media (min-width: 720px) {
  .contact-page .info-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.contact-page .info-trio__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.4rem;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.05);
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.contact-page .info-trio__card:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 111, 35, 0.32);
  box-shadow: 0 14px 32px rgba(15, 20, 25, 0.08), 0 4px 10px rgba(237, 111, 35, 0.06);
}

.contact-page .info-trio__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffe8d2 0%, #ffc48a 100%);
  color: var(--color-orange);
}

.contact-page .info-trio__card h3 {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.contact-page .info-trio__list {
  list-style: none;
  margin: 0.4rem 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  width: 100%;
}

.contact-page .info-trio__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.93rem;
  color: var(--color-ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(15, 20, 25, 0.08);
}

.contact-page .info-trio__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact-page .info-trio__list li > span {
  color: var(--color-ink-muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.contact-page .info-trio__list li > strong {
  color: var(--color-ink);
  font-weight: 700;
  text-align: right;
}

.contact-page .info-trio__list--bullets li {
  display: list-item;
  list-style: none;
  position: relative;
  padding: 0 0 0.35rem 1.4rem;
  border-bottom: 0;
}

.contact-page .info-trio__list--bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(237, 111, 35, 0.18);
}

.contact-page .info-trio__note {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  line-height: 1.5;
}

/* —— "Who to contact" 4-tile audience grid: force single row on desktop —— */
@media (min-width: 900px) {
  .contact-page .services-iso__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* —— Form-success alert (mirrors form-alert--error from global.css) —— */
.contact-page .form-alert--success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.4);
  color: #14532d;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-page .form-alert--success strong {
  color: #166534;
}

/* —— Small form polish —— */
.contact-page .form-group__optional {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  margin-left: 0.25rem;
}

.contact-page .form-footnote {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .info-trio__card:hover {
    transform: none;
  }
}

/* =============================================================== */
/* Service areas page                                              */
/* .areas-hero-card  — hero-side "pick your office" card           */
/* .popular-areas    — quick-glance pill grid of common cities     */
/* .region-cards     — 2x2 grid of regional office cards           */
/* .region-card      — individual office card                      */
/* =============================================================== */

/* —— Hero-side regional-office picker card —— */
.areas-page .areas-hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 22px 48px rgba(15, 20, 25, 0.16), 0 6px 16px rgba(237, 111, 35, 0.08);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

.areas-page .areas-hero-card__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.areas-page .areas-hero-card__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.areas-page .areas-hero-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-ink);
}

.areas-page .areas-hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.areas-page .areas-hero-card__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.areas-page .areas-hero-card__dot {
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.areas-page .areas-hero-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.areas-page .areas-hero-card__label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}

.areas-page .areas-hero-card__phone {
  font-size: 0.82rem;
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: none;
}

.areas-page .areas-hero-card__phone:hover {
  text-decoration: underline;
}

.areas-page .areas-hero-card__foot {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.areas-page .areas-hero-card__foot a {
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: none;
}

.areas-page .areas-hero-card__foot a:hover {
  text-decoration: underline;
}

/* —— Popular service-areas pill grid —— */
.areas-page .popular-areas {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.65rem;
}

.areas-page .popular-areas__pill a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 20, 25, 0.04);
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.areas-page .popular-areas__pill a:hover {
  transform: translateY(-2px);
  border-color: var(--color-orange);
  background: linear-gradient(145deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
  color: #fff;
}

/* —— 4-up regional office card grid —— */
.areas-page .region-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .areas-page .region-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.areas-page .region-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.65rem 1.5rem;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.05);
  scroll-margin-top: 1.5rem;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.areas-page .region-card:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 111, 35, 0.32);
  box-shadow: 0 14px 32px rgba(15, 20, 25, 0.08), 0 4px 10px rgba(237, 111, 35, 0.06);
}

/* Subtle orange ribbon on the top edge */
.areas-page .region-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
}

.areas-page .region-card__head {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.areas-page .region-card__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.areas-page .region-card__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}

.areas-page .region-card__address {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: var(--color-ink-muted);
  line-height: 1.45;
}

.areas-page .region-card__phone {
  margin: 0;
}

.areas-page .region-card__phone a {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-orange);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.areas-page .region-card__phone a:hover {
  text-decoration: underline;
}

.areas-page .region-card__intro {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.areas-page .region-card__city-page-link {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.areas-page .region-card__city-page-link a {
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: none;
}

.areas-page .region-card__city-page-link a:hover {
  text-decoration: underline;
}

.areas-page .region-card__cities-label {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.areas-page .region-card__cities {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem 1rem;
  flex: 1;
}

@media (max-width: 480px) {
  .areas-page .region-card__cities {
    grid-template-columns: 1fr 1fr;
  }
}

.areas-page .region-card__cities li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-ink);
}

.areas-page .region-card__cities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-orange);
  opacity: 0.7;
}

.areas-page .region-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: auto;
}

.areas-page .region-card__actions .btn {
  flex: 1 1 calc(50% - 0.35rem);
  text-align: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .areas-page .region-card:hover,
  .areas-page .popular-areas__pill a:hover {
    transform: none;
  }
}

/* —— Price-cards / howto mobile carousel: cascade overrides + equal-height slides. —— */
@media (max-width: 768px) {
  /* Later `.pricing-page .price-cards { display: grid; gap: 1.5rem }` wins the
     cascade over `.home .price-cards--carousel` — force the horizontal flex rail.
     `body.pricing-page` covers pricing.html; nested `section.pricing-page` covers
     about / how-it-works / contact (body is e.g. .about-page, not .pricing-page). */
  body.home.pricing-page .price-cards.price-cards--carousel,
  body.home .pricing-page .price-cards.price-cards--carousel {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0 !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    padding: 0.5rem 1.25rem 0.5rem;
    margin: 2rem -1.25rem 0;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
    min-height: 0;
  }

  body.home .price-cards--carousel .price-card {
    height: auto !important;
    min-height: 0 !important;
  }

  body.home .price-cards--carousel .price-card__list {
    flex: none !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    min-height: 0 !important;
  }

  body.home .price-cards--carousel .price-card__head {
    min-height: 0 !important;
  }

  /* Same cascade issue as price-cards: `.pricing-page .howto-options { display: grid }`
     overrides the mobile rail — see price-cards block above for dual selector. */
  body.home.pricing-page .howto-options.howto-options--carousel,
  body.home .pricing-page .howto-options.howto-options--carousel {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0 !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 2.5rem -1.25rem 0;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
    min-height: 0;
  }

  body.home.pricing-page .howto-options.howto-options--carousel .howto-option,
  body.home .pricing-page .howto-options.howto-options--carousel .howto-option {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}