/* ==========================================================================
   Homepage polish (scoped to .home-page)
   The theme ships generic utilities; these rules refine the CMS-driven
   homepage bands into a consistent, card-based rhythm. Only loaded on the
   homepage, so nothing here leaks into other public pages.
   ========================================================================== */

.home-page {
  overflow-x: hidden;
}

/* Section subtitle helper */
.home-page .section-title + .home-subtitle,
.home-page .home-heading .home-subtitle {
  max-width: 720px;
  margin: -10px auto 40px;
  text-align: center;
  color: #6b7280;
  font-size: 16px;
  line-height: 26px;
}

.home-page .home-heading {
  margin-bottom: 30px;
}

/* Alternate band background */
.home-page .home-band--muted {
  background: #f7f9fc;
}

/* Popular services + browse by location cards */
.home-page .trending-cat .box {
  height: 100%;
  border: 1px solid #eef1f6;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(37, 37, 37, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-page .trending-cat .box:hover {
  transform: translateY(-4px);
  border-color: #0076d7;
  box-shadow: 0 12px 26px rgba(0, 118, 215, 0.15);
}

.home-page .trending-cat .box h4 {
  font-size: 17px;
  line-height: 24px;
}

/* Popular services: image cards with a hover lift */
.home-page .home-service-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  margin-bottom: 30px;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(37, 37, 37, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-page .home-service-card:hover,
.home-page .home-service-card:focus {
  transform: translateY(-6px);
  border-color: #0076d7;
  box-shadow: 0 16px 32px rgba(0, 118, 215, 0.16);
  text-decoration: none;
}

.home-page .home-service-card:focus-visible {
  outline: 3px solid rgba(0, 118, 215, 0.35);
  outline-offset: 3px;
}

.home-page .home-service-card__media {
  position: relative;
  display: block;
  height: 190px;
  overflow: hidden;
  background: #eef6ff;
}

.home-page .home-service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.home-page .home-service-card:hover .home-service-card__media img,
.home-page .home-service-card:focus .home-service-card__media img {
  transform: scale(1.06);
}

.home-page .home-service-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 5px 20px;
  text-align: left;
  margin-bottom: 10px;
}

.home-page .home-service-card__title {
  margin: 0;
  color: #243247;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  transition: color 0.25s ease;
}

.home-page .home-service-card:hover .home-service-card__title,
.home-page .home-service-card:focus .home-service-card__title {
  color: #0076d7;
}

/* Browse by Location: a bordered carousel holding one row of small horizontal
   cards - photo left, state name, district count and an Explore link on the
   right. The arrows slide the row one card at a time and hide at either end;
   touch devices swipe it, and without JavaScript the row still scrolls. */
.home-page .home-location-carousel {
  position: relative;
  margin-bottom: 26px;
}

.home-page .home-location-strip {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  border: 1px solid #e6ecf4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(37, 37, 37, 0.04);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-page .home-location-strip::-webkit-scrollbar {
  display: none;
}

.home-page .home-location-strip:focus-visible {
  outline: 3px solid rgba(0, 118, 215, 0.35);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-location-strip {
    scroll-behavior: auto;
  }
}

.home-page .home-location-carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  padding: 0;
  border: 1px solid #dbe6f3;
  border-radius: 50%;
  background: #fff;
  color: #0076d7;
  box-shadow: 0 4px 14px rgba(37, 37, 37, 0.14);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.home-page .home-location-carousel__btn--prev {
  left: -16px;
}

.home-page .home-location-carousel__btn--next {
  right: -16px;
}

.home-page .home-location-carousel__btn[hidden] {
  display: none;
}

.home-page .home-location-carousel__btn:hover,
.home-page .home-location-carousel__btn:focus {
  border-color: transparent;
  background: #0076d7;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 118, 215, 0.32);
}

.home-page .home-location-carousel__btn:focus-visible {
  outline: 3px solid rgba(0, 118, 215, 0.35);
  outline-offset: 2px;
}

.home-page .home-location-card {
  display: flex;
  flex: 0 0 260px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  scroll-snap-align: start;
  border-right: 1px solid #eef1f6;
  color: inherit;
  transition: background 0.2s ease;
}

.home-page .home-location-card:last-child {
  border-right: 0;
}

.home-page .home-location-card:hover,
.home-page .home-location-card:focus {
  background: #f6faff;
  color: inherit;
  text-decoration: none;
}

.home-page .home-location-card:focus-visible {
  outline: 3px solid rgba(0, 118, 215, 0.35);
  outline-offset: -3px;
}

.home-page .home-location-card__media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #eef6ff;
}

.home-page .home-location-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.home-page .home-location-card:hover .home-location-card__media img,
.home-page .home-location-card:focus .home-location-card__media img {
  transform: scale(1.08);
}

.home-page .home-location-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-page .home-location-card__name {
  overflow: hidden;
  color: #243247;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.home-page .home-location-card:hover .home-location-card__name,
.home-page .home-location-card:focus .home-location-card__name {
  color: #0076d7;
}

.home-page .home-location-card__meta {
  color: #8898aa;
  font-size: 12px;
  line-height: 18px;
}

.home-page .home-location-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: #0076d7;
  font-size: 13px;
  font-weight: 600;
}

.home-page .home-location-card__arrow {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.home-page .home-location-card:hover .home-location-card__arrow,
.home-page .home-location-card:focus .home-location-card__arrow {
  transform: translateX(3px);
}

@media (max-width: 575px) {
  .home-page .home-location-card {
    flex-basis: 232px;
    padding: 12px 14px;
  }

  .home-page .home-location-carousel__btn--prev {
    left: 4px;
  }

  .home-page .home-location-carousel__btn--next {
    right: 4px;
  }
}

@media (max-width: 767px) {
  .home-page .home-service-card__media {
    height: 150px;
  }
}

/* Homepage call-to-action pill: a ghost button that fills with the brand
   gradient on hover, with the arrow sliding forward. Every content band's
   "View all ..." link and the blog CTA share it, so the page has one button. */
.home-page .home-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1.5px solid rgba(0, 118, 215, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #0076d7;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 10px rgba(0, 118, 215, 0.08);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s ease;
}

.home-page .home-cta:hover,
.home-page .home-cta:focus {
  background: linear-gradient(135deg, #0076d7 0%, #0056a0 100%);
  border-color: transparent;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 118, 215, 0.28);
  transform: translateY(-2px);
}

.home-page .home-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 118, 215, 0.22);
}

.home-page .home-cta:focus-visible {
  outline: 3px solid rgba(0, 118, 215, 0.35);
  outline-offset: 3px;
}

.home-page .home-cta__arrow {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.home-page .home-cta:hover .home-cta__arrow,
.home-page .home-cta:focus .home-cta__arrow {
  transform: translateX(4px);
}

/* Filled variant for the closing band's primary action, sitting next to the
   ghost "Contact Us" pill without either dominating by shape. */
.home-page .home-cta--solid {
  border-color: transparent;
  background: linear-gradient(135deg, #0076d7 0%, #0056a0 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 118, 215, 0.24);
}

.home-page .home-cta--solid:hover,
.home-page .home-cta--solid:focus {
  background: linear-gradient(135deg, #0056a0 0%, #00427d 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 118, 215, 0.32);
}

/* Two pills sit side by side in the closing band. */
.home-page .subscribe .home-cta {
  margin: 6px;
}

@media (max-width: 575px) {
  .home-page .home-cta {
    padding: 12px 22px;
    font-size: 14px;
  }
}

/* Features band: cards with a gradient icon tile and an accent bar that
   appears on hover. Deliberately distinct from the flat info boxes the How It
   Works and Why Choose Us bands use, so the page has a visual high point
   before the quote band. */
.home-page .home-features {
  position: relative;
  overflow: hidden;
}

.home-page .home-features::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: 920px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 118, 215, 0.1), transparent);
  pointer-events: none;
}

.home-page .home-features > .container {
  position: relative;
  z-index: 1;
}

.home-page .home-feature-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  margin-bottom: 24px;
  padding: 22px 20px 20px;
  overflow: hidden;
  border: 1px solid #e8eef7;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 50, 88, 0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.home-page .home-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #0076d7 0%, #35b0ff 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.home-page .home-feature-card:hover,
.home-page .home-feature-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(0, 118, 215, 0.35);
  box-shadow: 0 14px 28px rgba(0, 118, 215, 0.16);
}

.home-page .home-feature-card:hover::before,
.home-page .home-feature-card:focus-within::before {
  opacity: 1;
}

.home-page .home-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eaf3fd 0%, #d9ecff 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 118, 215, 0.1);
  color: #0076d7;
  font-size: 21px;
  line-height: 1;
  transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.home-page .home-feature-card:hover .home-feature-card__icon,
.home-page .home-feature-card:focus-within .home-feature-card__icon {
  background: linear-gradient(135deg, #0076d7 0%, #0056a0 100%);
  color: #fff;
  transform: scale(1.04);
}

.home-page .home-feature-card__title {
  margin: 0 0 6px;
  color: #243247;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.home-page .home-feature-card__text {
  flex: 1 1 auto;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 22px;
}

/* How It Works: a three-step journey. Gradient medallions with numbered badges
   are joined by dashed connectors whose dashes flow towards the next step, so
   the sequence is readable without labels. Cards lift on hover. */
.home-page .home-how__steps {
  display: flex;
  align-items: flex-start;
  margin-top: 18px;
}

.home-page .home-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 20px 0;
  text-align: center;
}

.home-page .home-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  left: calc(50% + 54px);
  right: calc(-50% + 54px);
  height: 2px;
  background-image: linear-gradient(90deg, #a9d3f5 0 10px, transparent 10px 20px);
  background-size: 20px 2px;
  background-repeat: repeat-x;
  animation: home-step-flow 1.4s linear infinite;
}

.home-page .home-step__num {
  position: absolute;
  top: -6px;
  left: calc(50% + 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 118, 215, 0.22);
  color: #0076d7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home-page .home-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0076d7 0%, #0056a0 100%);
  box-shadow: 0 0 0 8px rgba(0, 118, 215, 0.08), 0 10px 22px rgba(0, 86, 160, 0.25);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-page .home-step:hover .home-step__icon {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 0 10px rgba(0, 118, 215, 0.12), 0 14px 28px rgba(0, 86, 160, 0.3);
}

.home-page .home-step__title {
  margin: 26px 0 8px;
  color: #243247;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

.home-page .home-step__text {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 24px;
}

@keyframes home-step-flow {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: 20px;
  }
}

@keyframes home-step-flow-y {
  from {
    background-position-y: 0;
  }

  to {
    background-position-y: 20px;
  }
}

@media (max-width: 767px) {
  .home-page .home-how__steps {
    display: block;
  }

  .home-page .home-step {
    padding: 0 0 46px;
  }

  .home-page .home-step:last-child {
    padding-bottom: 0;
  }

  .home-page .home-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 50%;
    width: 2px;
    height: 28px;
    margin-left: -1px;
    background-image: linear-gradient(180deg, #a9d3f5 0 10px, transparent 10px 20px);
    background-size: 2px 20px;
    background-repeat: repeat-y;
    animation-name: home-step-flow-y;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-step:not(:last-child)::after {
    animation: none;
  }

  .home-page .home-step__icon {
    transition: none;
  }
}

/* Feature / how it works / why choose us cards */
.home-page .services .services-item {
  height: 100%;
}

.home-page .services .services-item .services-content h3 {
  font-size: 18px;
  line-height: 26px;
  color: #333;
}

.home-page .services .services-item .services-content p {
  color: #6b7280;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}

/* Request a quote CTA band */
.home-page .home-quote {
  background: linear-gradient(135deg, #0076d7 0%, #0056a0 100%);
  text-align: center;
  color: #fff;
}

.home-page .home-quote .home-quote-inner {
  max-width: 820px;
  margin: 0 auto;
}

.home-page .home-quote h2 {
  color: #fff;
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  margin-bottom: 16px;
}

.home-page .home-quote p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 28px;
}

.home-page .home-quote .btn-quote {
  background: #fff;
  color: #0076d7;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 4px;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}

.home-page .home-quote .btn-quote:hover {
  background: #eaf3fd;
  color: #0056a0;
}

/* Latest articles cards */
.home-page .home-articles .blog-post {
  background: #fff;
  border: 1px solid #eef1f6;
  border-bottom: 3px solid #eef1f6;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(37, 37, 37, 0.05);
  height: calc(100% - 30px);
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-page .home-articles .blog-post:hover {
  transform: translateY(-4px);
  border-bottom-color: #0076d7;
  box-shadow: 0 12px 28px rgba(0, 118, 215, 0.14);
}

.home-page .home-articles .blog-post .post-content {
  padding: 24px;
}

.home-page .home-articles .post-title {
  font-size: 18px;
  line-height: 26px;
  margin-top: 0;
  margin-bottom: 10px;
}

.home-page .home-articles .post-title a {
  color: #333;
}

.home-page .home-articles .post-title a:hover {
  color: #0076d7;
}

.home-page .home-articles .cat-meta {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

.home-page .home-articles .cat-meta li a {
  display: inline-block;
  background: #eaf3fd;
  color: #0076d7;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 3px;
}

.home-page .home-articles .entry-summary {
  margin: 8px 0 18px;
  font-size: 14px;
  line-height: 24px;
  color: #6b7280;
}

/* Closing CTA band */
.home-page .wrapper-sub h2 {
  font-size: 26px;
  line-height: 38px;
  color: #333;
  margin-bottom: 12px;
}

.home-page .wrapper-sub p {
  color: #6b7280;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 0;
}

.home-page .subscribe .btn {
  margin: 0 4px 8px;
}

/* Popular categories list above the footer. It is an index rather than a
   band, so it stays small: a compact, left-aligned heading and every
   category on one wrapped line, the names separated by a pipe. */
.home-page .home-categories {
  padding: 28px 0;
}

.home-page .home-categories .section-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  padding-bottom: 0;
  margin-bottom: 6px;
}

/* The theme hangs a centred blue bar under its section titles, which reads
   wrong once the heading is flush left. */
.home-page .home-categories .section-title:before {
  display: none;
}

.home-page .home-categories__list {
  margin: 0;
  line-height: 26px;
}

.home-page .home-categories__list a {
  display: inline-block;
  color: #2c3e50;
  font-size: 12px;
  font-weight: 400;
  transition: color 0.2s ease;
}

.home-page .home-categories__list a:hover,
.home-page .home-categories__list a:focus {
  color: #0076d7;
}

/* The bar between two names belongs to the name before it, so the gap is the
   same everywhere and the list reads as one line however it wraps. */
.home-page .home-categories__list a:not(:last-child)::after {
  content: "|";
  margin: 0 7px;
  color: #4a4545;
  font-weight: 400;
}

/* Certificates the theme's section titles already handle; keep subtitles
   from inheriting the uppercase heading treatment. */
.home-page .home-subtitle {
  text-transform: none;
}

/* "Follow Us on": the heading and its icons share one row, the app store
   badges sit on the right. */
.home-page .home-connect {
  padding: 34px 0;
}

/* The heading and the icons are one line: the title sits next to the first
   icon rather than above the whole row. */
.home-page .home-connect__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.home-page .home-connect__title {
  margin: 0 18px 0 0;
  color: #2c3e50;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.home-page .home-connect__subtitle {
  margin: 12px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.home-page .home-connect__icons {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-page .home-connect__icons li {
  margin: 0 10px 0 0;
}

.home-page .home-connect__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.home-page .home-connect__icon:hover,
.home-page .home-connect__icon:focus {
  color: #fff;
  transform: translateY(-2px);
  opacity: 0.9;
}

.home-page .home-connect__icon--facebook {
  background: #3b5998;
}

.home-page .home-connect__icon--twitter {
  background: #1da1f2;
}

.home-page .home-connect__icon--instagram {
  background: #c13584;
}

.home-page .home-connect__icon--linkedin {
  background: #0e76a8;
}

/* The store badges keep the same height whichever artwork they use, so the
   pair sits on one line. The two files share an aspect ratio, so they also
   come out the same width. */
.home-page .home-connect__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.home-page .home-connect__badge {
  display: inline-block;
  margin: 6px 0 6px 12px;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-page .home-connect__badge img {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* The theme shrinks the App Store artwork (its own store button) with an
   !important rule. The band shows the two badges side by side, so they have
   to be the same height - this puts the App Store badge back to the height
   of the Google Play one. */
.home-page .home-connect__badge img.app_store {
  height: 52px !important;
}

.home-page .home-connect__badge:hover,
.home-page .home-connect__badge:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

@media (max-width: 991px) {
  .home-page .home-connect__stores {
    justify-content: flex-start;
    margin-top: 18px;
  }

  .home-page .home-connect__badge {
    margin-left: 0;
    margin-right: 12px;
  }
}