/*
 * Common Appliance Repair -- additions on top of the template stylesheet.
 * Loaded after css/style.css, so every rule here is an addition or an override
 * for the pieces the template has no equivalent for. Keep template CSS untouched.
 */

/* ---------- Brand palette ----------
 * Colours taken from appliancerepairsboston.com: #0086C9 primary blue,
 * #062C41 deep navy, #0BA5EC accent blue, #FAC515 rating stars.
 * The template drives everything from these variables, so re-pointing them
 * here recolours the whole site.
 */

:root {
  --theme-color1: #0086C9;
  --theme-color2: #062C41;
  --theme-color3: #0BA5EC;
  --theme-color1-rgb: 0, 134, 201;
  --theme-color2-rgb: 6, 44, 65;
  --theme-color3-rgb: 11, 165, 236;
  --theme-color-light: #E4F3FC;
  --theme-color-lighter: #E0ECF3;
  --theme-color-ghost-white: #F1F5F8;
  --review-color: #FAC515;
  --theme-color-blue-gray: #6D7882;
  --gradient-1: linear-gradient(102.22deg, #0086C9 14.34%, #FFFFFF 95.5%);
  --gradient-2: linear-gradient(102.22deg, #0086C9 14.34%, #0BA5EC 95.5%);
  --gradient-3: linear-gradient(90deg, #0086C9 0%, rgba(0, 134, 201, 0) 90.39%);
  --gradient-4: linear-gradient(251.9deg, #062C41 37.79%, #0BA5EC 87.6%);
  --gradient-5: linear-gradient(269.76deg, #0BA5EC 2.84%, #062C41 54.27%);
  --gradient-6: linear-gradient(180deg, #062C41 35%, #0086C9 139.99%);
  --gradient-7: linear-gradient(180deg, #062C41 34.7%, #0086C9 138.8%);
  --gradient-8: linear-gradient(180deg, #FFFFFF 69.43%, #E4F3FC 98.99%);
  --gradient-9: linear-gradient(270deg, #0086C9 -1.75%, #0BA5EC 97.85%);
  --gradient-10: linear-gradient(360deg, #0086C9 0%, rgba(0, 134, 201, 0.13) 100%);
  --gradient-11: linear-gradient(0deg, #0086C9 8.58%, rgba(8, 17, 57, 0) 95.08%);
  --gradient-12: linear-gradient(180deg, #062C41 34.89%, #0086C9 139.54%);
  --gradient-13: linear-gradient(122.28deg, #E4F3FC 13.28%, #FFFFFF 75.57%);
  --gradient-14: linear-gradient(180deg, #062C41 0%, #0086C9 100%);
  --gradient-15: linear-gradient(180deg, #062C41 36.1%, #0086C9 144.4%);
  --gradient-16: linear-gradient(360deg, #0086C9 7.65%, rgba(8, 17, 57, 0) 80.35%);
  --gradient-17: linear-gradient(270deg, #38BDF8 0%, #0086C9 100%);
  --gradient-18: linear-gradient(180deg, #FFFFFF 86.16%, #E4F3FC 98.02%);
  --gradient-19: linear-gradient(360deg, #062C41 7.65%, rgba(8, 17, 57, 0) 80.35%);
  --gradient-20: linear-gradient(360deg, #062C41 7.65%, rgba(8, 17, 57, 0) 80.35%);
  --gradient-21: linear-gradient(168.16deg, #FFFFFF -0.39%, #E4F3FC 96.18%);
  --gradient-22: linear-gradient(129.02deg, #0086C9 39.69%, #062C41 91.52%);
  --gradient-23: linear-gradient(270deg, #0086C9 0%, rgba(0, 134, 201, 0.13) 99.36%);
  --gradient-24: linear-gradient(39.17deg, #0BA5EC -0.68%, #062C41 59.03%);
  --gradient-25: linear-gradient(30.6deg, rgba(0, 134, 201, 0.13) 9.27%, #0086C9 82.2%);
  --gradient-26: linear-gradient(161.42deg, #062C41 11.31%, #0086C9 89.28%);
  --gradient-27: linear-gradient(168.1deg, #FFFFFF -0.39%, #E4F3FC 96.55%);
  --gradient-28: linear-gradient(180deg, #0BA5EC 0%, #062C41 54.52%);
  /* 0.6 only reached ~4:1 against white/ghost-white backgrounds -- under
     WCAG AA's 4.5:1 for normal text, and this is the default body-copy
     color used sitewide. 0.68 clears 4.5:1 on both with a small margin. */
  --text-color: rgba(6, 44, 65, 0.68);
  --headings-color: #062C41;
}

/* The handful of places the template hardcodes the old brand colours instead
   of reading the variables above. */

.project-section-two .project-block-two .inner-block .image-box .readmore-btn {
  background: var(--theme-color3);
}

.project-block-three .inner-box .content-box {
  background: linear-gradient(168.16deg, #FFFFFF -0.39%, var(--theme-color-light) 96.18%);
  border: 1px solid rgba(var(--theme-color2-rgb), 0.1);
}

.price-block .pricing-bottom {
  background: linear-gradient(180deg, rgba(241, 245, 248, 0.01) 0%, var(--theme-color-ghost-white) 100%);
}

.feature-section-three:before {
  background: linear-gradient(180deg, var(--theme-color2) -0.98%, var(--theme-color1) 100%);
}

.about1-image2-column .counter-box .inner-box .text,
.news-post .inner-box .post-meta .date {
  color: rgba(var(--theme-color2-rgb), 0.6);
}

.home2-tab-service-imgbox .content-area {
  border: 1px solid var(--theme-color-light);
}

.contact-section-two .outer-box {
  border: 1px solid rgba(var(--theme-color2-rgb), 0.1);
}

.testimonial-block-one .inner-box .testi-logo {
  border: 1px solid var(--theme-color1);
}

.process-section-two:before {
  background: linear-gradient(180deg, #FFFFFF 69.43%, var(--theme-color-light) 98.99%);
  box-shadow: inset 0px -294px 250px var(--theme-color-light);
}

.client-slider .swiper-slide {
  border-right: 1px solid rgba(var(--theme-color2-rgb), 0.2);
  border-top: 1px solid rgba(var(--theme-color2-rgb), 0.2);
}

/* ---------- Keyboard focus ----------
 * The template blanket-removes the focus ring site-wide:
 *   :active, :focus { outline: none !important; }
 *   button { outline: none !important; }
 * That leaves keyboard users with no way to see where they are on the page
 * at all (WCAG 2.4.7). Both rules are !important, so this has to match
 * that specificity to win -- :focus-visible only shows for keyboard/
 * programmatic focus, not mouse clicks, so it doesn't bring back a ring
 * every time someone clicks a button with a mouse.
 */

:focus-visible {
  outline: 2px solid var(--theme-color1) !important;
  outline-offset: 2px !important;
}

/* ---------- Reduced motion ----------
 * Every section fades/slides in on scroll via wow.js with no regard for
 * visitors who've asked their OS/browser to reduce motion. wow.js sets
 * visibility/animation-name via inline style, so this needs !important to
 * win regardless of whether it runs before or after that JS.
 */

@media (prefers-reduced-motion: reduce) {
  .wow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ---------- Accessible CTAs ----------
 * White on the light accent blue only reaches ~2.8:1, so solid buttons use a
 * deeper blue instead. Even the primary brand blue (--theme-color1) only
 * reaches ~4.2:1 with white text -- short of WCAG AA's 4.5:1 for normal-size
 * text -- so this is one step darker again (~5:1), still clearly the same
 * blue family. The light accent stays for dots, icons and highlights.
 */

.btn-style-three {
  background-color: #0077B3;
}

/* The hover sweep fills a deeper blue (white text ~6.9:1 on it). Sharing the
   resting #0077B3, as it did, left the sweep running with nothing to see. */
.btn-style-three:before {
  background-color: #005F8F;
}

/* ---------- Logo ----------
 * The Common Appliance Repair lockup is much taller than the wordmark the
 * template shipped (2:1 against 5:1), so each slot gets an explicit height.
 */

.main-header .logo img {
  height: 66px;
  width: auto;
}

/* the sticky bar is shorter than the main header */
.sticky-header .logo img {
  height: 48px;
  width: auto;
}

@media (max-width: 767.98px) {
  .main-header .logo img {
    height: 54px;
  }
}

.mobile-menu .nav-logo img {
  height: 64px;
  width: auto;
}

.main-footer .footer-column .image img {
  height: 88px;
  width: auto;
}

.contact-section-one .conpany-logo img {
  height: 64px;
  width: auto;
}

/* ---------- Calmer colour usage ----------
 * The template mixes many gradients per screen, which reads as busy. These
 * keep the same shapes but pull them into one blue family and one direction.
 */

.banner-section .content-column .banner-title span:first-child:before,
.banner-section .content-column .banner-title span:last-child:before {
  background: linear-gradient(90deg, var(--theme-color2) 0%, var(--theme-color1) 100%);
  border: 5px solid rgba(var(--theme-color-white-rgb), 0.12);
}

/* ---------- Hero shape photo ----------
 * The template's outlined figure is an SVG stroke used as a mask. The same path
 * filled becomes a mask for the photo, so the picture sits inside the outline.
 */

.banner-section .image-column .hero-shape-photo {
  bottom: 0;
  height: 663px;
  left: -118px;
  mask-image: url(../images/common-ar/banner-shape-fill-2.svg);
  -webkit-mask-image: url(../images/common-ar/banner-shape-fill-2.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 20px;
  width: 993.17px;
}

/* .image-pattern is the decorative outline that frames the photo above --
   same shape, same original offsets, so it has to move down by the same
   amount or the outline separates from the photo it's meant to trace. */
.banner-section .image-column .image-pattern {
  /* Same contour as the photo's mask, minus the arm, so the outline traces
     the picture instead of reaching across the headline on its own. */
  mask-image: url(../images/common-ar/banner-line-shape-2.svg);
  -webkit-mask-image: url(../images/common-ar/banner-line-shape-2.svg);
  top: 20px;
}

.banner-section .image-column .hero-shape-photo img {
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

/* The masked geometry only lines up with the outline at full size. Below that
   the outline is hidden by the template, so the photo becomes a plain rounded
   image filling the column instead of disappearing with it. */
@media (max-width: 1499.98px) {
  .banner-section .image-column .hero-shape-photo {
    border-radius: 24px;
    height: auto;
    left: auto;
    mask-image: none;
    -webkit-mask-image: none;
    overflow: hidden;
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
  }

  .banner-section .image-column .hero-shape-photo img {
    aspect-ratio: 4 / 3;
    object-position: center 35%;
  }
}

@media (max-width: 1199.98px) {
  /* stacked layout: keep the photo from swallowing the screen. Spacing
     above the photo now comes from .banner-grid's own gap, not a margin
     here (this used to stack on top of that gap and double the space). */
  .banner-section .image-column .hero-shape-photo img {
    aspect-ratio: 16 / 10;
    max-height: 420px;
  }
}

/* Hero copy sat flush against the viewport edge. */
@media (min-width: 992px) {
  .banner-section .content-column {
    padding-left: 45px;
  }
}

/* ---------- Hero ---------- */

/* Grid instead of a Bootstrap row/col pair so the photo can sit between the
   heading and the body copy on mobile without duplicating it in the markup
   -- desktop reassembles heading+copy into one column with the photo
   beside it, same as the original two-column layout. */
.banner-grid {
  display: grid;
  gap: 30px;
  grid-template-areas: "heading" "image" "content";
}

.banner-heading-column {
  grid-area: heading;
}

.image-column {
  grid-area: image;
}

.banner-body-column {
  grid-area: content;
}

@media (min-width: 1200px) {
  .banner-grid {
    /* .image-column spans both rows but has no in-flow content of its own
       (the photo above 1500px is position:absolute) -- align-items:center
       would shrink it to 0 height and center that empty box in the span,
       collapsing the positioning context the absolute photo anchors to.
       stretch (the grid default) keeps it spanning the full row height. */
    align-items: stretch;
    column-gap: 60px;
    grid-template-areas: "heading image" "content image";
    grid-template-columns: 1fr 1fr;
    row-gap: 0;
  }
}

.banner-section .content-column .banner-eyebrow {
  align-items: center;
  border: 2px solid rgba(var(--theme-color-white-rgb), 0.35);
  border-radius: 50px;
  color: var(--theme-color-white);
  display: inline-flex;
  font-weight: 600;
  margin-bottom: 25px;
  padding: 6px 20px;
}

@media (max-width: 767.98px) {
  /* Dropped on mobile rather than reshaped -- the title says the same
     thing more prominently, so the pill was redundant once it no longer
     fit on one line. */
  .banner-section .content-column .banner-eyebrow {
    display: none;
  }
}

.banner-section .content-column .banner-eyebrow .dot {
  background-color: var(--theme-color3);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin-right: 10px;
  width: 8px;
}

/* Our headline runs longer than the template's three words, so it needs a
   smaller ceiling to stay inside the hero without crowding the CTAs. */
.banner-section .content-column .banner-title {
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.14;
  max-width: 660px;
}

/* The template's .banner-text is a fixed-height slot pinned beside the title.
   Our hero copy is a full paragraph, so it flows in the column instead. */
.banner-section .content-column .banner-lead {
  color: rgba(var(--theme-color-white-rgb), 0.85);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
  margin-top: 30px;
  max-width: 640px;
}

@media (max-width: 1199.98px) {
  /* Below xl the lead is the first thing in its own grid area (.banner-grid
     already puts 30px above it), so this margin used to double the gap. */
  .banner-section .content-column .banner-lead {
    margin-top: 0;
  }
}

.banner-section .content-column .banner-lead strong {
  color: var(--theme-color-white);
  font-weight: 700;
}

.banner-section .content-column .banner-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 40px;
}

/* ---------- Phone CTA ----------
 * One component, used in the hero, the steps section, the CTA offer and the
 * service pages, so the call-to-action reads the same everywhere.
 */

.call-cta {
  background: var(--theme-color-white);
  border-radius: 20px;
  display: inline-block;
  padding: 14px 34px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.call-cta:hover {
  background: var(--theme-color1);
}

.call-cta .label {
  color: var(--theme-color1);
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.call-cta .label .icon {
  margin-right: 8px;
}

.call-cta .number {
  color: var(--theme-color1);
  display: block;
  font-family: var(--heading-font-family);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.call-cta:hover .label,
.call-cta:hover .number {
  color: var(--theme-color-white);
}

/* A white button on a white section disappears, so there it sits on the light
   blue surface instead -- same blue lettering either way. */
.cta-offer-section .call-cta,
.service-detail-content .call-cta {
  background: var(--theme-color-light);
  border: 1px solid rgba(var(--theme-color1-rgb), 0.18);
}

/* the service areas band is already tinted, so white reads as the raised layer */
.service-areas-section .call-cta {
  background: var(--theme-color-white);
  border: 1px solid rgba(var(--theme-color1-rgb), 0.18);
}

.cta-offer-section .call-cta,
.service-detail-content .call-cta {
  margin-top: 30px;
}

.cta-offer-section .call-cta .label,
.service-detail-content .call-cta .label {
  font-size: 17px;
}

.cta-offer-section .call-cta .number,
.service-detail-content .call-cta .number {
  font-size: 34px;
}

/* Rating stars stay gold -- blue stars on a blue card read as decoration. */
.banner-section .image-column .video-reivew-box .content-box .review i {
  color: var(--review-color);
}

/* The hero review card sits on the dark navy panel, so it needs light text. */
.banner-section .image-column .video-reivew-box .google-mark {
  color: var(--theme-color-white);
  font-family: var(--heading-font-family);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  /* Full-width CTAs so both are comfortable tap targets on a phone. */
  .banner-section .content-column .banner-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .banner-section .content-column .call-cta {
    display: block;
    padding: 16px 25px;
    width: 100%;
  }

  .banner-section .content-column .banner-actions .theme-btn {
    align-self: center;
    justify-content: center;
  }
}

/* ---------- Social proof band ----------
 * Kept deliberately plain: no card, no rule, no third background colour --
 * it sits on white between the dark hero and the tinted services section.
 */

.social-proof-band {
  background-color: var(--theme-color-white);
  padding: 46px 0;
}

.social-proof-band .band-inner {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

@media (min-width: 992px) {
  .social-proof-band .band-inner {
    padding: 0 45px;
  }
}

.social-proof-band .rating-line {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.social-proof-band .rating-line .stars {
  color: var(--review-color);
  font-size: 15px;
  letter-spacing: 2px;
}

.social-proof-band .rating-line .score {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-weight: 800;
}

.social-proof-band .rating-line .count {
  color: var(--text-color);
  font-weight: 600;
}

.social-proof-band .band-title {
  color: var(--headings-color);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  max-width: 640px;
}

@media (max-width: 991.98px) {
  .social-proof-band .band-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

/* ---------- Page title banner (Locations) ----------
 * The template's min-height:450px is sized for the 64px desktop headline;
 * at the 34px mobile headline size it leaves a large empty gap under the
 * breadcrumb, so scale it down together with the heading on small screens.
 */

@media (max-width: 767.98px) {
  .page-title {
    min-height: 260px;
  }
}

@media (max-width: 575.98px) {
  .page-title {
    min-height: 220px;
  }
}

/* ---------- What to expect (home hero follow-up) ----------
 * A 5-step process strip directly under the hero: numbered icon circles on
 * a dashed connector, collapsing to a stacked list on narrow screens.
 */

.expect-section {
  background-color: var(--theme-color-white);
}

.expect-steps {
  counter-reset: expect-step;
  display: grid;
  gap: 40px 24px;
  grid-template-columns: repeat(5, 1fr);
  margin: 50px 0 10px;
  position: relative;
}

@media (min-width: 992px) {
  .expect-steps:before {
    background-image: linear-gradient(to right, rgba(var(--theme-color1-rgb), 0.35) 0, rgba(var(--theme-color1-rgb), 0.35) 8px, transparent 8px, transparent 16px);
    background-repeat: repeat-x;
    background-size: 16px 2px;
    content: '';
    height: 2px;
    left: 10%;
    position: absolute;
    right: 10%;
    top: 36px;
  }
}

.expect-step {
  position: relative;
  text-align: center;
}

.expect-step .step-icon {
  align-items: center;
  background-color: var(--theme-color1);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: flex;
  font-size: 26px;
  height: 72px;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  width: 72px;
  z-index: 1;
}

.expect-step .step-number {
  align-items: center;
  background-color: var(--theme-color2);
  border: 2px solid var(--theme-color-white);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  position: absolute;
  right: -4px;
  top: -4px;
  width: 24px;
}

.expect-step .step-title {
  color: var(--headings-color);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.expect-step .step-text {
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.6;
}

.expect-actions {
  margin-top: 50px;
}

@media (max-width: 991.98px) {
  .expect-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  /* Icon-left rows instead of centered stacked blocks -- the centered
     layout takes ~280px per step on a phone; a row is under 100px. */
  .expect-steps {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 30px 0 6px;
  }

  .expect-step {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    text-align: left;
  }

  .expect-step .step-icon {
    flex-shrink: 0;
    font-size: 20px;
    height: 52px;
    margin: 0;
    width: 52px;
  }

  .expect-step .step-body {
    min-width: 0;
  }

  .expect-step .step-number {
    height: 20px;
    width: 20px;
  }
}

/* ---------- Site search results ----------
 * Live dropdown filled client-side from search-index.json (see
 * js/common-ar.js). In the header search popup it overlays the input as a
 * floating panel; everywhere else (e.g. the 404 page) it just flows in
 * normally below the field.
 */

.search-results {
  background-color: var(--theme-color-white);
  border-radius: 5px;
  display: none;
  list-style: none;
  margin: 8px 0 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  text-align: left;
}

.search-results.is-open {
  display: block;
}

.search-results li + li {
  border-top: 1px solid rgba(var(--theme-color2-rgb), 0.08);
}

.search-results a {
  border-radius: 4px;
  display: block;
  padding: 12px 14px;
  transition: background-color 0.2s ease;
}

.search-results a:hover,
.search-results a:focus-visible {
  background-color: var(--theme-color-ghost-white);
}

.search-results .result-title {
  color: var(--headings-color);
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.search-results .result-text {
  color: var(--text-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 13px;
  margin-top: 2px;
  overflow: hidden;
}

.search-results .no-results {
  color: var(--text-color);
  font-size: 14px;
  padding: 12px 14px;
}

.search-popup .search-results {
  border: 1px solid rgba(var(--theme-color2-rgb), 0.1);
  box-shadow: 0 20px 40px rgba(var(--theme-color2-rgb), 0.15);
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 2;
}

/* ---------- Section spacing (mobile) ----------
 * Every section uses a flat pt-90/100/120 + pb-70/90/100/120 desktop utility
 * class with no mobile override, so two adjacent sections stack to 180-240px
 * of empty padding between their content -- roughly half a phone screen of
 * dead space at every section boundary. Scale it down for small screens.
 */

@media (max-width: 767.98px) {
  /* 60 + 60 still left 120px between one section's last element and the
     next one's first -- a third of the screen width, and it reads as a gap
     rather than a break, most obviously under a slider's control row. */
  .pt-90 { padding-top: 36px !important; }
  .pt-100 { padding-top: 40px !important; }
  .pt-120 { padding-top: 44px !important; }
  .pb-70 { padding-bottom: 32px !important; }
  .pb-90 { padding-bottom: 36px !important; }
  .pb-100 { padding-bottom: 40px !important; }
  .pb-120 { padding-bottom: 44px !important; }
}

/* ---------- Compact footer (mobile) ----------
 * All 4 footer columns fall back to Bootstrap's default full-width column
 * below the sm breakpoint, so on a phone they stack into ~1470px of pure
 * link lists. The logo/contact columns stay visible; the two pure link
 * lists (Quick Links, Popular Services, Company) become tap-to-expand
 * accordions instead, cutting the collapsed height dramatically.
 */

.footer-accordion-toggle .accordion-icon {
  display: none;
}

@media (max-width: 767.98px) {
  .about-widget .image.mb-80 {
    margin-bottom: 24px !important;
  }

  .footer-accordion-toggle .accordion-icon {
    display: inline-block;
  }

  .footer-accordion-toggle {
    align-items: center;
    border-top: 1px solid rgba(var(--theme-color-white-rgb), 0.12);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 16px 2px;
  }

  .footer-accordion-toggle .accordion-icon {
    font-size: 13px;
    transition: transform 0.25s ease;
  }

  .footer-widget.is-open .footer-accordion-toggle .accordion-icon {
    transform: rotate(180deg);
  }

  .footer-accordion-panel {
    display: none;
    padding-bottom: 16px;
  }

  .footer-widget.is-open .footer-accordion-panel {
    display: block;
  }

  .footer-column {
    margin-bottom: 0 !important;
  }

  .footer-column + .footer-column .footer-widget.contact-widget {
    padding-top: 4px;
  }
}

/* ---------- Prevent sticky :hover on touch (theme buttons) ----------
 * Touch devices have no real "pointer leave" -- tapping one of these
 * buttons triggers :hover and it visually sticks (fully filled) until the
 * visitor taps something else. hover:none targets touch/no-hover input
 * specifically and resets each button style back to its resting look.
 */

@media (hover: none) {
  .btn-style-one:hover:before {
    transform: scaleX(0);
  }
  .btn-style-one:hover .icon {
    background-color: var(--theme-color3);
    color: var(--theme-color3-text-color);
  }

  .btn-style-two:hover:before {
    transform: scale(0, 1);
  }
  .btn-style-two:hover .btn-title {
    color: var(--theme-color1);
  }
  .btn-style-two:hover .icon {
    background-color: var(--theme-color3);
    color: var(--theme-color3-text-color);
  }

  .btn-style-three:hover {
    color: var(--theme-color1-text-color);
  }
  .btn-style-three:hover:before {
    transform: scale(0, 1);
  }

  .btn-style-four:hover .btn-title {
    color: var(--theme-color-white);
  }
  .btn-style-four:hover:before {
    transform: scale(0, 1);
  }
  .btn-style-four:hover .icon {
    background-color: var(--theme-color-white);
    color: var(--theme-color4-text-color);
  }
}

/* ---------- Tap target sizes (mobile) ----------
 * The template's close icons are just a bare glyph with no padding -- about
 * 11-15px wide, well under the ~44px minimum comfortable touch target.
 * Padding enlarges the hit area without changing how the icon looks.
 */

.mobile-menu .close-btn {
  align-items: center;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.search-popup .close-search {
  align-items: center;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

/* ---------- Footer newsletter input ----------
 * 14px triggers iOS Safari's auto-zoom-on-focus (any input under 16px does);
 * this field is in the sitewide footer, so it hits every page on mobile.
 */

.footer-middle .outer-box .newsletter-form .form-group input[type=email] {
  font-size: 16px;
}

/* ---------- Trust CTA band ----------
 * Sits above the footer on every page: a final, low-friction nudge to book
 * before the visitor leaves. Solid brand blue so it reads as a distinct
 * "stop" between page content and the dark footer, not another content
 * section.
 */

.trust-cta-band {
  background-color: var(--theme-color1);
  padding: 32px 0;
}

.trust-cta-band .band-inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

@media (min-width: 992px) {
  .trust-cta-band .band-inner {
    padding: 0 45px;
  }
}

.trust-cta-band .band-title {
  color: var(--theme-color-white);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
}

.trust-cta-band .band-text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
  font-size: 16px;
  margin: 0;
}

.trust-cta-band .band-btn {
  align-items: center;
  background-color: var(--theme-color2);
  border-radius: 50px;
  color: var(--theme-color-white);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  gap: 10px;
  padding: 15px 30px;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.trust-cta-band .band-btn:hover {
  background-color: var(--theme-color-white);
  color: var(--theme-color2);
}

@media (max-width: 767.98px) {
  .trust-cta-band .band-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ================================================================
 * Home page sections built for Common Appliance Repair
 * ================================================================ */

/* ---------- Services intro ---------- */

.service-section .sec-title .text,
.problems-section .sec-title .text,
.brands-section .sec-title .text,
.at-work-section .sec-title .text,
.reviews-section .sec-title .text,
.faq-section .sec-title .text {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

.service-block .inner-box .image-box .icon-box img {
  height: 40px;
  width: 40px;
}

/* ---------- Service cards, simplified ----------
 * The template stacks a gradient plate behind the photo, a gradient icon disc
 * with a translucent ring, and a large ghost number. That is three decorative
 * layers competing with the photo, so the card keeps the photo, a flat blue
 * icon disc, and the text.
 */

.service-block .inner-box .image-box .bg-gradient-shape {
  display: none;
}

.service-block .inner-box .image-box .icon-box {
  background: var(--theme-color1);
  outline: none;
}

.service-block .inner-box .content-box .count {
  display: none;
}

/* Titles that wrap to two lines used to make one card taller than the rest, so
   the slides share a height and the title reserves two lines in every card. */

.service-two-slider .swiper-slide {
  height: auto;
}

.service-two-slider .swiper-slide .service-block,
.service-two-slider .swiper-slide .service-block .inner-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-block .inner-box .content-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-block .inner-box .content-box .title {
  min-height: 2.3em;
}

.service-block .inner-box .content-box .text {
  flex-grow: 1;
}

/* The template cuts the card photo with a notched path so the icon disc can
   nest into it. With the gradient plate gone that curve reads as a glitch, so
   the photo is a plain rounded rectangle -- the same shape the template already
   falls back to below 1200px. */

.service-block .inner-box .image-box .image,
.service-block .inner-box .image-box .bg-gradient-shape {
  border-radius: 20px;
  clip-path: none;
}

.service-block .inner-box .image-box .icon-box {
  bottom: -22px;
  left: 26px;
}

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

.reviews-slider {
  padding-bottom: 60px;
}

.reviews-slider .swiper-slide {
  height: auto;
}

.review-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.review-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.review-card .stars {
  color: var(--review-color);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.review-card .text {
  color: var(--text-color);
  flex-grow: 1;
  line-height: 1.75;
}

.review-card .author {
  align-items: center;
  border-top: 1px solid var(--theme-color-light);
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
}

.review-card .author .avatar {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: flex;
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.review-card .author .meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.review-card .author .name {
  color: var(--headings-color);
  font-weight: 700;
}

.review-card .author .date {
  color: var(--text-color);
  font-size: 14px;
}

.review-card .author .source {
  color: var(--theme-color1);
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 700;
}

.reviews-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.reviews-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  opacity: 1;
  width: 26px;
  border-radius: 6px;
}

/* ---------- Common appliance problems ---------- */

.problem-block .inner-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-block .inner-box:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-block .image {
  margin: 0;
  overflow: hidden;
}

.problem-block .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.problem-block .inner-box:hover .image img {
  transform: scale(1.05);
}

.problem-block .content-box {
  padding: 30px;
}

.problem-block .content-box .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.problem-block .content-box .title a {
  color: var(--headings-color);
}

.problem-block .content-box .title a:hover {
  color: var(--theme-color1);
}

.problem-block .content-box .btn-more {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Brands ---------- */

.brands-section {
  background: var(--theme-color-ghost-white);
}

.brands-slider .swiper-slide {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
}

.brands-section .brand-logo {
  align-items: center;
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 18px;
  display: flex;
  height: 110px;
  justify-content: center;
  padding: 22px;
  width: 100%;
}

.brands-section .brand-logo img {
  filter: grayscale(100%);
  max-height: 100%;
  max-width: 100%;
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
  width: auto;
}

.brands-section .brand-logo:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- Easy steps ---------- */

.steps-section {
  background: var(--gradient-14);
}

.steps-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.step-block .inner-box {
  background: rgba(var(--theme-color-white-rgb), 0.06);
  border: 1px solid rgba(var(--theme-color-white-rgb), 0.15);
  border-radius: 24px;
  height: 100%;
  padding: 40px 32px;
}

.step-block .inner-box .count {
  color: rgba(var(--theme-color-white-rgb), 0.35);
  font-family: var(--heading-font-family);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
}

.step-block .inner-box .title {
  color: var(--theme-color-white);
  font-size: 24px;
  font-weight: 700;
  margin: 14px 0 12px;
}

.step-block .inner-box .text {
  color: rgba(var(--theme-color-white-rgb), 0.8);
  line-height: 1.75;
}

.steps-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 55px;
}




@media (max-width: 991.98px) {
  .steps-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ---------- Technicians at work ---------- */

.at-work-slider {
  padding-bottom: 60px;
}

.at-work-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.at-work-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  border-radius: 6px;
  opacity: 1;
  width: 26px;
}

.at-work-slider .swiper-slide .image {
  margin: 0;
}

.at-work-slider .swiper-slide img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* ---------- Service areas ---------- */

.service-areas-section {
  background: var(--theme-color-ghost-white);
}



.area-map {
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
}

.area-map iframe {
  border: 0;
  display: block;
  height: 460px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .area-map {
    margin-top: 50px;
  }

  .area-map iframe {
    height: 360px;
  }
}

/* ---------- CTA offer ---------- */

.cta-offer-section .cta-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.2;
}

.cta-offer-section .cta-content .text {
  color: var(--text-color);
  line-height: 1.75;
  margin-top: 20px;
  max-width: 560px;
}

/* the photo grows to the bottom of the row so it and the form card end on the
   same line instead of the image stopping short */
.cta-offer-section .row {
  align-items: stretch;
}

.cta-offer-section .cta-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cta-offer-section .cta-content .image {
  /* flex-basis 0 so the photo contributes no intrinsic height and simply fills
     whatever the form card leaves -- both columns then end on the same line */
  /* basis 0 so the photo adds no intrinsic height and simply fills what the
     form card leaves -- the two columns then end on the same line. The floor
     keeps it visible if the embed reports no height. */
  flex: 1 1 0;
  margin: 34px 0 0;
  min-height: 240px;
}

.cta-offer-section .cta-content .image img {
  /* the van shot is portrait -- crop low so the van stays in frame */
  border-radius: 24px;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-offer-section .cta-content .image {
    /* below xl the columns stack, so .image is no longer stretched by a
       side-by-side row -- min-height:auto lets it size to the img's own
       aspect-ratio instead of collapsing to the flex-basis of 0 */
    min-height: auto;
  }

  .cta-offer-section .cta-content .image img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}





.cta-form-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
  padding: 34px 30px;
}

@media (max-width: 575.98px) {
  .cta-form-box {
    padding: 22px 18px;
  }
}

.cta-form-box iframe {
  border: none;
  display: block;
  height: 620px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-form-box {
    margin-top: 50px;
  }
}

/* No photo behind the hero -- just the brand gradient. */
.banner-section:after {
  background-image: none;
}

/* The template's overlay stops at 1300px, which leaves a visible seam down the
   hero. Full width and a softer falloff removes the edge. */
.banner-section:before {
  background: linear-gradient(115deg, var(--theme-color1) 0%, rgba(var(--theme-color1-rgb), 0) 78%);
  max-width: none;
  width: 100%;
}

/* With the photo box gone the card sits alone in the right column. It has to
   turn white -- the template's navy card is the same colour as the hero now. */
.banner-section .image-column .video-reivew-box {
  left: auto;
  margin-left: auto;
  max-width: 300px;
  position: absolute;
  right: 0;
  top: 130px;
}

.banner-section .image-column .video-reivew-box .content-box {
  background: var(--theme-color-white);
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  padding: 28px 30px;
  width: 100%;
}

.banner-section .image-column .video-reivew-box .content-box .google-mark,
.banner-section .image-column .video-reivew-box .content-box .text {
  color: var(--headings-color);
}

.banner-section .image-column .video-reivew-box .content-box .text {
  font-weight: 600;
}


/* ---------- Service detail pages ---------- */

.service-detail-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 22px;
}

.service-detail-content .text {
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 18px;
}

.service-detail-content .sub-heading {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin: 34px 0 16px;
}

.service-detail-content .check-list {
  margin: 0 0 10px;
  padding: 0;
}

.service-detail-content .check-list li {
  color: var(--text-color);
  list-style: none;
  padding: 8px 0 8px 34px;
  position: relative;
}

.service-detail-content .check-list li:before {
  color: var(--theme-color1);
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 8px;
}

.service-detail-side .image {
  margin: 0 0 30px;
}

.service-detail-side .image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

.service-detail-side .side-box {
  background: var(--theme-color-ghost-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  margin-bottom: 30px;
  padding: 30px;
}

.service-detail-side .side-box .title {
  color: var(--headings-color);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-detail-side .side-box .text {
  color: var(--text-color);
  margin-bottom: 20px;
}

.service-detail-side .service-links {
  margin: 0;
  padding: 0;
}

.service-detail-side .service-links li {
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.08);
  list-style: none;
}

.service-detail-side .service-links li:last-child {
  border-bottom: none;
}

.service-detail-side .service-links a {
  color: var(--headings-color);
  display: block;
  font-weight: 600;
  padding: 12px 0;
}

.service-detail-side .service-links a:hover {
  color: var(--theme-color1);
  padding-left: 6px;
}

@media (max-width: 1199.98px) {
  .service-detail-side {
    margin-top: 50px;
  }
}

/* The two floating badges were overlays on the hero photo. Without it they are
   just stray pills in empty space, so they are dropped. */
.banner-section .image-column .object-1,
.banner-section .image-column .object-2 {
  display: none;
}

@media (max-width: 1199.98px) {
  /* Stays an overlay on the photo (like desktop) but shrunk into a small
     corner badge -- the stacked layout doesn't have room for the full-size
     card sitting in normal flow. */
  .banner-section .image-column .video-reivew-box {
    bottom: 12px;
    max-width: 170px;
    position: absolute;
    right: 12px;
    top: auto;
  }

  .banner-section .image-column .video-reivew-box .content-box {
    border-radius: 16px;
    padding: 14px 16px;
  }

  .banner-section .image-column .video-reivew-box .content-box .review i {
    font-size: 12px;
  }

  .banner-section .image-column .video-reivew-box .google-mark {
    font-size: 13px;
  }

  .banner-section .image-column .video-reivew-box .content-box .text {
    font-size: 12px;
  }

  .banner-section .image-column .object-1,
  .banner-section .image-column .object-2 {
    display: none;
  }
}

/* ================================================================
 * Services page
 * ================================================================ */

.services-hero {
  background: var(--gradient-14);
  padding: 90px 0 100px;
}

@media (max-width: 767.98px) {
  /* the 44px bottom matches the section scale, so the hero hands over to the
     next section on the same rhythm as every other boundary */
  .services-hero {
    padding: 40px 0 44px;
  }
}

/* Grid instead of a Bootstrap row/col pair so the image can sit between the
   title and the body copy on mobile without duplicating it in the markup --
   desktop reassembles title+copy into one column with the image beside it. */
.services-hero-grid {
  display: grid;
  gap: 30px;
  grid-template-areas: "title" "image" "content";
}

.services-hero-title {
  grid-area: title;
}

.services-hero-image {
  grid-area: image;
}

.services-hero-content {
  grid-area: content;
}

@media (min-width: 1200px) {
  .services-hero-grid {
    align-items: stretch;
    column-gap: 60px;
    grid-template-areas: "title image" "content image";
    grid-template-columns: 1fr 1fr;
    /* the photo spans both rows and is taller than the copy, so auto rows would
       split the surplus and push the title away from the text below it -- pin
       the title row to its own height and let the second row absorb the rest */
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
}

.services-hero-title.title {
  color: var(--theme-color-white);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.16;
  max-width: 620px;
}

.services-hero-content .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
  font-size: 17px;
  line-height: 1.75;
  max-width: 600px;
}

/* The template's global b/strong rule sets a dark gray (#333) meant for
   light backgrounds -- invisible against this hero's dark gradient. */
.services-hero-content .text strong {
  color: var(--theme-color-white);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .services-hero-content .text {
    margin-top: 24px;
  }
}

.services-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 36px;
}

.services-hero-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

@media (min-width: 1200px) {
  /* Below this the columns stack and a fixed ratio keeps the photo a
     sensible height; side-by-side, stretch it to match the text column
     instead of leaving a gap under a shorter fixed-ratio image. */
  .services-hero-image {
    position: relative;
  }

  /* Taken out of flow so the photo no longer contributes its own height: the
     column height comes from the copy, and the photo fills it exactly, so it
     ends on the same line as the last button. */
  .services-hero-image img {
    aspect-ratio: auto;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }
}

/* Service Areas reuses the portrait van shot (cta-offer.jpg) as its page
   hero -- the default crop for landscape technician photos cuts the van's
   wheels off, so this page gets its own lower crop point. */
.areas-hero .services-hero-image img {
  object-position: center 60%;
}

@media (max-width: 767.98px) {
  .services-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .services-hero-actions .call-cta {
    display: block;
    width: 100%;
  }

  .services-hero-actions .theme-btn {
    align-self: center;
    justify-content: center;
  }

  .services-hero-actions .theme-btn .btn-title {
    line-height: 68px;
  }

  .services-hero-actions .theme-btn .icon {
    height: 68px;
    line-height: 68px;
    width: 68px;
  }
}

/* ---------- Popular services ---------- */

.popular-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.popular-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.popular-card .image {
  margin: 0;
  overflow: hidden;
}

.popular-card .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.popular-card:hover .image img {
  transform: scale(1.05);
}

.popular-card .content {
  padding: 30px;
}

.popular-card .content .title {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-card .content .text {
  color: var(--text-color);
  line-height: 1.75;
}

.popular-card .content .link {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Other services ---------- */

.other-services-section {
  background: var(--theme-color-ghost-white);
}

.other-service-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  padding: 30px 26px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.other-service-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.other-service-card .icon {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  display: flex;
  height: 66px;
  justify-content: center;
  margin-bottom: 22px;
  width: 66px;
}

.other-service-card .icon img {
  height: 34px;
  width: 34px;
}

/* the eighth tile is a prompt rather than a service */
.other-service-card.is-cta {
  background: var(--theme-color1);
  border-color: var(--theme-color1);
}

.other-service-card.is-cta .icon {
  background: rgba(var(--theme-color-white-rgb), 0.16);
}

.other-service-card.is-cta .title,
.other-service-card.is-cta .link {
  color: var(--theme-color-white);
}

.other-service-card.is-cta .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
}

.other-service-card.is-cta .link {
  display: inline-block;
  font-weight: 700;
  margin-top: 16px;
}

.other-service-card.is-cta:hover {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
}

.other-service-card .title {
  color: var(--headings-color);
  font-size: 20px;
  min-height: 2.6em;
  font-weight: 700;
  margin-bottom: 10px;
}

.other-service-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

/* ================================================================
 * Individual service pages
 * ================================================================ */

/* ---------- Card grid spacing ----------
 * The cards carried their own margin-bottom, which left the rows almost
 * touching. The rows own the spacing now: 30px across, 34px down.
 */

.sp-problems-section .row,
.sp-why-section .row,
.popular-services-section .row,
.other-services-section .row,
.problems-section .row {
  --bs-gutter-x: 30px;
  row-gap: 34px;
}

.problem-card,
.why-card,
.popular-card,
.other-service-card,
.problem-block .inner-box {
  margin-bottom: 0;
}

/* ---------- Common problems ----------
 * A six-card grid reads better than a long list beside a photo: equal-height
 * cards, one symptom each, and no image that has to match the appliance.
 */

.sp-why-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* The photo tracks the height of the copy beside it, so a long description
   makes it taller rather than leaving a gap under it. */
.sp-solutions-section .row {
  align-items: stretch;
}

/* the column becomes a flex container so the photo wrapper stretches to the
   row height, which the copy column drives */
.sp-solutions-section .row > [class*="col-"] {
  display: flex;
}

.sp-solutions-image {
  flex: 1;
  min-height: 340px;
  position: relative;
}

/* absolute so the photo adds no intrinsic height of its own -- the wrapper is
   sized by the stretched column, which the copy beside it drives */
.sp-solutions-image img {
  border-radius: 24px;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .sp-solutions-section .row > [class*="col-"] {
    display: block;
  }

  .sp-solutions-image {
    height: auto;
    min-height: 0;
  }

  .sp-solutions-image img {
    aspect-ratio: 4 / 3;
    height: auto;
    position: static;
  }
}

.problem-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 20px;
  height: 100%;
  margin-bottom: 30px;
  padding: 30px 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-card .marker {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 14px;
  color: var(--theme-color1);
  display: flex;
  font-size: 18px;
  height: 50px;
  justify-content: center;
  margin-bottom: 20px;
  width: 50px;
}

.problem-card .title {
  color: var(--headings-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  min-height: 2.6em;
}

.problem-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

.problem-note {
  align-items: center;
  background: var(--theme-color-ghost-white);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 20px;
  padding: 26px 34px;
}

.problem-note .note-text {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 19px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .problem-card .title {
    min-height: 0;
  }

  .problem-note {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Our solutions ---------- */

.sp-solutions-section {
  background: var(--theme-color-ghost-white);
}

.sp-solutions-content .text {
  color: var(--text-color);
  line-height: 1.8;
}

.sp-solutions-content .services-hero-actions {
  margin-top: 34px;
}

@media (max-width: 1199.98px) {
  .sp-solutions-content {
    margin-top: 50px;
  }
}

/* ---------- Why choose ----------
 * A tab set: the numbered titles on the left drive the panel on the right,
 * which shows that feature's photo and copy. Real buttons in a tablist, so
 * arrow keys move between them and screen readers announce the selection.
 * Below xl the columns stack, so the panel simply sits under the list.
 */

.sp-why-section {
  background: var(--theme-color-ghost-white);
}

.why-tab-list {
  border-top: 1px solid rgba(var(--theme-color2-rgb), 0.12);
  margin: 0;
  padding: 0;
}

.why-tab-list li {
  list-style: none;
}

.why-tab {
  align-items: center;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.12);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  gap: 22px;
  padding: 26px 20px;
  text-align: left;
  transition: background-color 0.35s ease, padding-left 0.35s ease;
  width: 100%;
}

.why-tab:hover {
  background: rgba(var(--theme-color-white-rgb), 0.7);
  padding-left: 28px;
}

.why-tab.is-active {
  background: var(--theme-color-white);
  padding-left: 28px;
}

.why-tab:focus-visible {
  outline: 2px solid var(--theme-color1);
  outline-offset: 3px;
}

.why-tab .num {
  color: var(--headings-color);
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 20px;
  font-weight: 800;
  transition: color 0.35s ease;
}

.why-tab .label {
  color: var(--headings-color);
  flex-grow: 1;
  font-family: var(--heading-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.why-tab .arrow {
  color: var(--headings-color);
  flex-shrink: 0;
  transition: color 0.35s ease, transform 0.35s ease;
}

.why-tab.is-active .num,
.why-tab.is-active .arrow,
.why-tab:hover .num,
.why-tab:hover .arrow {
  color: var(--theme-color1);
}

.why-tab.is-active .arrow {
  transform: translate(3px, -3px);
}

/* ---- panel ----
 * The two columns share a height: the panel ends level with the last tab, and
 * the photo absorbs whatever the description leaves rather than the panel
 * stopping short of the list.
 */

.why-tabs > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.why-panels {
  display: flex;
  flex: 1;
}

.why-panel {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.why-panel[hidden] {
  display: none;
}

.why-panel .image {
  flex: 1 1 0;
  margin: 0;
  min-height: 240px;
  position: relative;
}

.why-panel .image img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  /* the portrait's subject sits high in frame */
  object-position: center 22%;
  position: absolute;
  width: 100%;
}

.why-panel .text {
  color: var(--text-color);
  flex-shrink: 0;
  line-height: 1.8;
  padding: 30px 32px 34px;
}

/* the panel swaps in rather than snapping */
.why-panel.is-active {
  animation: whyPanelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes whyPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1199.98px) {
  .why-panels {
    margin-top: 40px;
  }

  /* stacked: the photo goes back to its own ratio */
  .why-panel .image {
    flex: none;
    min-height: 0;
  }

  .why-panel .image img {
    aspect-ratio: 4 / 3;
    height: auto;
    position: static;
  }
}

@media (max-width: 767.98px) {
  .why-tab {
    gap: 14px;
    padding: 22px 14px;
  }

  .why-tab .num,
  .why-tab .label {
    font-size: 17px;
  }

  .why-panel .text {
    padding: 24px 22px 26px;
  }
}

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

.reviews-slider {
  padding-bottom: 60px;
}

.reviews-slider .swiper-slide {
  height: auto;
}

.review-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.review-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.review-card .stars {
  color: var(--review-color);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.review-card .text {
  color: var(--text-color);
  flex-grow: 1;
  line-height: 1.75;
}

.review-card .author {
  align-items: center;
  border-top: 1px solid var(--theme-color-light);
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
}

.review-card .author .avatar {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: flex;
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.review-card .author .meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.review-card .author .name {
  color: var(--headings-color);
  font-weight: 700;
}

.review-card .author .date {
  color: var(--text-color);
  font-size: 14px;
}

.review-card .author .source {
  color: var(--theme-color1);
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 700;
}

.reviews-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.reviews-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  opacity: 1;
  width: 26px;
  border-radius: 6px;
}

/* ---------- Common appliance problems ---------- */

.problem-block .inner-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-block .inner-box:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-block .image {
  margin: 0;
  overflow: hidden;
}

.problem-block .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.problem-block .inner-box:hover .image img {
  transform: scale(1.05);
}

.problem-block .content-box {
  padding: 30px;
}

.problem-block .content-box .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.problem-block .content-box .title a {
  color: var(--headings-color);
}

.problem-block .content-box .title a:hover {
  color: var(--theme-color1);
}

.problem-block .content-box .btn-more {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Brands ---------- */

.brands-section {
  background: var(--theme-color-ghost-white);
}

.brands-slider .swiper-slide {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
}

.brands-section .brand-logo {
  align-items: center;
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 18px;
  display: flex;
  height: 110px;
  justify-content: center;
  padding: 22px;
  width: 100%;
}

.brands-section .brand-logo img {
  filter: grayscale(100%);
  max-height: 100%;
  max-width: 100%;
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
  width: auto;
}

.brands-section .brand-logo:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- Easy steps ---------- */

.steps-section {
  background: var(--gradient-14);
}

.steps-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.step-block .inner-box {
  background: rgba(var(--theme-color-white-rgb), 0.06);
  border: 1px solid rgba(var(--theme-color-white-rgb), 0.15);
  border-radius: 24px;
  height: 100%;
  padding: 40px 32px;
}

.step-block .inner-box .count {
  color: rgba(var(--theme-color-white-rgb), 0.35);
  font-family: var(--heading-font-family);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
}

.step-block .inner-box .title {
  color: var(--theme-color-white);
  font-size: 24px;
  font-weight: 700;
  margin: 14px 0 12px;
}

.step-block .inner-box .text {
  color: rgba(var(--theme-color-white-rgb), 0.8);
  line-height: 1.75;
}

.steps-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 55px;
}




@media (max-width: 991.98px) {
  .steps-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ---------- Technicians at work ---------- */

.at-work-slider {
  padding-bottom: 60px;
}

.at-work-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.at-work-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  border-radius: 6px;
  opacity: 1;
  width: 26px;
}

.at-work-slider .swiper-slide .image {
  margin: 0;
}

.at-work-slider .swiper-slide img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* ---------- Service areas ---------- */

.service-areas-section {
  background: var(--theme-color-ghost-white);
}



.area-map {
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
}

.area-map iframe {
  border: 0;
  display: block;
  height: 460px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .area-map {
    margin-top: 50px;
  }

  .area-map iframe {
    height: 360px;
  }
}

/* ---------- CTA offer ---------- */

.cta-offer-section .cta-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.2;
}

.cta-offer-section .cta-content .text {
  color: var(--text-color);
  line-height: 1.75;
  margin-top: 20px;
  max-width: 560px;
}

/* the photo grows to the bottom of the row so it and the form card end on the
   same line instead of the image stopping short */
.cta-offer-section .row {
  align-items: stretch;
}

.cta-offer-section .cta-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cta-offer-section .cta-content .image {
  /* flex-basis 0 so the photo contributes no intrinsic height and simply fills
     whatever the form card leaves -- both columns then end on the same line */
  /* basis 0 so the photo adds no intrinsic height and simply fills what the
     form card leaves -- the two columns then end on the same line. The floor
     keeps it visible if the embed reports no height. */
  flex: 1 1 0;
  margin: 34px 0 0;
  min-height: 240px;
}

.cta-offer-section .cta-content .image img {
  /* the van shot is portrait -- crop low so the van stays in frame */
  border-radius: 24px;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-offer-section .cta-content .image {
    /* below xl the columns stack, so .image is no longer stretched by a
       side-by-side row -- min-height:auto lets it size to the img's own
       aspect-ratio instead of collapsing to the flex-basis of 0 */
    min-height: auto;
  }

  .cta-offer-section .cta-content .image img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}





.cta-form-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
  padding: 34px 30px;
}

@media (max-width: 575.98px) {
  .cta-form-box {
    padding: 22px 18px;
  }
}

.cta-form-box iframe {
  border: none;
  display: block;
  height: 620px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-form-box {
    margin-top: 50px;
  }
}

/* No photo behind the hero -- just the brand gradient. */
.banner-section:after {
  background-image: none;
}

/* The template's overlay stops at 1300px, which leaves a visible seam down the
   hero. Full width and a softer falloff removes the edge. */
.banner-section:before {
  background: linear-gradient(115deg, var(--theme-color1) 0%, rgba(var(--theme-color1-rgb), 0) 78%);
  max-width: none;
  width: 100%;
}

/* With the photo box gone the card sits alone in the right column. It has to
   turn white -- the template's navy card is the same colour as the hero now. */
.banner-section .image-column .video-reivew-box {
  left: auto;
  margin-left: auto;
  max-width: 300px;
  position: absolute;
  right: 0;
  top: 130px;
}

.banner-section .image-column .video-reivew-box .content-box {
  background: var(--theme-color-white);
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  padding: 28px 30px;
  width: 100%;
}

.banner-section .image-column .video-reivew-box .content-box .google-mark,
.banner-section .image-column .video-reivew-box .content-box .text {
  color: var(--headings-color);
}

.banner-section .image-column .video-reivew-box .content-box .text {
  font-weight: 600;
}


/* ---------- Service detail pages ---------- */

.service-detail-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 22px;
}

.service-detail-content .text {
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 18px;
}

.service-detail-content .sub-heading {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin: 34px 0 16px;
}

.service-detail-content .check-list {
  margin: 0 0 10px;
  padding: 0;
}

.service-detail-content .check-list li {
  color: var(--text-color);
  list-style: none;
  padding: 8px 0 8px 34px;
  position: relative;
}

.service-detail-content .check-list li:before {
  color: var(--theme-color1);
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 8px;
}

.service-detail-side .image {
  margin: 0 0 30px;
}

.service-detail-side .image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

.service-detail-side .side-box {
  background: var(--theme-color-ghost-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  margin-bottom: 30px;
  padding: 30px;
}

.service-detail-side .side-box .title {
  color: var(--headings-color);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-detail-side .side-box .text {
  color: var(--text-color);
  margin-bottom: 20px;
}

.service-detail-side .service-links {
  margin: 0;
  padding: 0;
}

.service-detail-side .service-links li {
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.08);
  list-style: none;
}

.service-detail-side .service-links li:last-child {
  border-bottom: none;
}

.service-detail-side .service-links a {
  color: var(--headings-color);
  display: block;
  font-weight: 600;
  padding: 12px 0;
}

.service-detail-side .service-links a:hover {
  color: var(--theme-color1);
  padding-left: 6px;
}

@media (max-width: 1199.98px) {
  .service-detail-side {
    margin-top: 50px;
  }
}

/* The two floating badges were overlays on the hero photo. Without it they are
   just stray pills in empty space, so they are dropped. */
.banner-section .image-column .object-1,
.banner-section .image-column .object-2 {
  display: none;
}

@media (max-width: 1199.98px) {
  /* Stays an overlay on the photo (like desktop) but shrunk into a small
     corner badge -- the stacked layout doesn't have room for the full-size
     card sitting in normal flow. */
  .banner-section .image-column .video-reivew-box {
    bottom: 12px;
    max-width: 170px;
    position: absolute;
    right: 12px;
    top: auto;
  }

  .banner-section .image-column .video-reivew-box .content-box {
    border-radius: 16px;
    padding: 14px 16px;
  }

  .banner-section .image-column .video-reivew-box .content-box .review i {
    font-size: 12px;
  }

  .banner-section .image-column .video-reivew-box .google-mark {
    font-size: 13px;
  }

  .banner-section .image-column .video-reivew-box .content-box .text {
    font-size: 12px;
  }

  .banner-section .image-column .object-1,
  .banner-section .image-column .object-2 {
    display: none;
  }
}

/* ================================================================
 * Services page
 * ================================================================ */

.services-hero {
  background: var(--gradient-14);
  padding: 90px 0 100px;
}

@media (max-width: 767.98px) {
  /* the 44px bottom matches the section scale, so the hero hands over to the
     next section on the same rhythm as every other boundary */
  .services-hero {
    padding: 40px 0 44px;
  }
}

/* Grid instead of a Bootstrap row/col pair so the image can sit between the
   title and the body copy on mobile without duplicating it in the markup --
   desktop reassembles title+copy into one column with the image beside it. */
.services-hero-grid {
  display: grid;
  gap: 30px;
  grid-template-areas: "title" "image" "content";
}

.services-hero-title {
  grid-area: title;
}

.services-hero-image {
  grid-area: image;
}

.services-hero-content {
  grid-area: content;
}

@media (min-width: 1200px) {
  .services-hero-grid {
    align-items: stretch;
    column-gap: 60px;
    grid-template-areas: "title image" "content image";
    grid-template-columns: 1fr 1fr;
    /* the photo spans both rows and is taller than the copy, so auto rows would
       split the surplus and push the title away from the text below it -- pin
       the title row to its own height and let the second row absorb the rest */
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
}

.services-hero-title.title {
  color: var(--theme-color-white);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.16;
  max-width: 620px;
}

.services-hero-content .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
  font-size: 17px;
  line-height: 1.75;
  max-width: 600px;
}

/* The template's global b/strong rule sets a dark gray (#333) meant for
   light backgrounds -- invisible against this hero's dark gradient. */
.services-hero-content .text strong {
  color: var(--theme-color-white);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .services-hero-content .text {
    margin-top: 24px;
  }
}

.services-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 36px;
}

.services-hero-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

@media (min-width: 1200px) {
  /* Below this the columns stack and a fixed ratio keeps the photo a
     sensible height; side-by-side, stretch it to match the text column
     instead of leaving a gap under a shorter fixed-ratio image. */
  .services-hero-image {
    position: relative;
  }

  /* Taken out of flow so the photo no longer contributes its own height: the
     column height comes from the copy, and the photo fills it exactly, so it
     ends on the same line as the last button. */
  .services-hero-image img {
    aspect-ratio: auto;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }
}

/* Service Areas reuses the portrait van shot (cta-offer.jpg) as its page
   hero -- the default crop for landscape technician photos cuts the van's
   wheels off, so this page gets its own lower crop point. */
.areas-hero .services-hero-image img {
  object-position: center 60%;
}

@media (max-width: 767.98px) {
  .services-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .services-hero-actions .call-cta {
    display: block;
    width: 100%;
  }

  .services-hero-actions .theme-btn {
    align-self: center;
    justify-content: center;
  }

  .services-hero-actions .theme-btn .btn-title {
    line-height: 68px;
  }

  .services-hero-actions .theme-btn .icon {
    height: 68px;
    line-height: 68px;
    width: 68px;
  }
}

/* ---------- Popular services ---------- */

.popular-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.popular-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.popular-card .image {
  margin: 0;
  overflow: hidden;
}

.popular-card .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.popular-card:hover .image img {
  transform: scale(1.05);
}

.popular-card .content {
  padding: 30px;
}

.popular-card .content .title {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-card .content .text {
  color: var(--text-color);
  line-height: 1.75;
}

.popular-card .content .link {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Other services ---------- */

.other-services-section {
  background: var(--theme-color-ghost-white);
}

.other-service-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  padding: 30px 26px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.other-service-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.other-service-card .icon {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  display: flex;
  height: 66px;
  justify-content: center;
  margin-bottom: 22px;
  width: 66px;
}

.other-service-card .icon img {
  height: 34px;
  width: 34px;
}

/* the eighth tile is a prompt rather than a service */
.other-service-card.is-cta {
  background: var(--theme-color1);
  border-color: var(--theme-color1);
}

.other-service-card.is-cta .icon {
  background: rgba(var(--theme-color-white-rgb), 0.16);
}

.other-service-card.is-cta .title,
.other-service-card.is-cta .link {
  color: var(--theme-color-white);
}

.other-service-card.is-cta .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
}

.other-service-card.is-cta .link {
  display: inline-block;
  font-weight: 700;
  margin-top: 16px;
}

.other-service-card.is-cta:hover {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
}

.other-service-card .title {
  color: var(--headings-color);
  font-size: 20px;
  min-height: 2.6em;
  font-weight: 700;
  margin-bottom: 10px;
}

.other-service-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

/* ================================================================
 * Individual service pages
 * ================================================================ */

/* ---------- Card grid spacing ----------
 * The cards carried their own margin-bottom, which left the rows almost
 * touching. The rows own the spacing now: 30px across, 34px down.
 */

.sp-problems-section .row,
.sp-why-section .row,
.popular-services-section .row,
.other-services-section .row,
.problems-section .row {
  --bs-gutter-x: 30px;
  row-gap: 34px;
}

.problem-card,
.why-card,
.popular-card,
.other-service-card,
.problem-block .inner-box {
  margin-bottom: 0;
}

/* ---------- Common problems ----------
 * A six-card grid reads better than a long list beside a photo: equal-height
 * cards, one symptom each, and no image that has to match the appliance.
 */

.sp-why-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* The photo tracks the height of the copy beside it, so a long description
   makes it taller rather than leaving a gap under it. */
.sp-solutions-section .row {
  align-items: stretch;
}

/* the column becomes a flex container so the photo wrapper stretches to the
   row height, which the copy column drives */
.sp-solutions-section .row > [class*="col-"] {
  display: flex;
}

.sp-solutions-image {
  flex: 1;
  min-height: 340px;
  position: relative;
}

/* absolute so the photo adds no intrinsic height of its own -- the wrapper is
   sized by the stretched column, which the copy beside it drives */
.sp-solutions-image img {
  border-radius: 24px;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .sp-solutions-section .row > [class*="col-"] {
    display: block;
  }

  .sp-solutions-image {
    height: auto;
    min-height: 0;
  }

  .sp-solutions-image img {
    aspect-ratio: 4 / 3;
    height: auto;
    position: static;
  }
}

.problem-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 20px;
  height: 100%;
  margin-bottom: 30px;
  padding: 30px 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-card .marker {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 14px;
  color: var(--theme-color1);
  display: flex;
  font-size: 18px;
  height: 50px;
  justify-content: center;
  margin-bottom: 20px;
  width: 50px;
}

.problem-card .title {
  color: var(--headings-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  min-height: 2.6em;
}

.problem-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

.problem-note {
  align-items: center;
  background: var(--theme-color-ghost-white);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 20px;
  padding: 26px 34px;
}

.problem-note .note-text {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 19px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .problem-card .title {
    min-height: 0;
  }

  .problem-note {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Our solutions ---------- */

.sp-solutions-section {
  background: var(--theme-color-ghost-white);
}

.sp-solutions-content .text {
  color: var(--text-color);
  line-height: 1.8;
}

.sp-solutions-content .services-hero-actions {
  margin-top: 34px;
}

@media (max-width: 1199.98px) {
  .sp-solutions-content {
    margin-top: 50px;
  }
}

/* ---------- Why choose ----------
 * Numbered rows, but as rounded cards rather than hairline dividers -- the
 * rest of the site rounds every surface, so square rules read as foreign.
 */

.sp-why-section {
  background: var(--theme-color-ghost-white);
}

.why-list {
  margin: 0;
  padding: 0;
}

.why-row {
  align-items: flex-start;
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 20px;
  display: flex;
  gap: 30px;
  list-style: none;
  margin-bottom: 18px;
  padding: 30px 34px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.why-row:last-child {
  margin-bottom: 0;
}

.why-row:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.why-row .num {
  background: var(--theme-color-light);
  border-radius: 14px;
  color: var(--theme-color1);
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 18px;
  font-weight: 800;
  padding: 10px 16px;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.why-row:hover .num {
  background: var(--theme-color1);
  color: var(--theme-color-white);
}

.why-row .body {
  flex-grow: 1;
}

.why-row .title {
  color: var(--headings-color);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}

.why-row .text {
  color: var(--text-color);
  line-height: 1.8;
  max-width: 900px;
}

@media (max-width: 767.98px) {
  .why-row {
    gap: 16px;
    padding: 24px 22px;
  }

  .why-row .num {
    font-size: 16px;
    padding: 8px 12px;
  }

  .why-row .title {
    font-size: 20px;
  }
}

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

.reviews-slider {
  padding-bottom: 60px;
}

.reviews-slider .swiper-slide {
  height: auto;
}

.review-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.review-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.review-card .stars {
  color: var(--review-color);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.review-card .text {
  color: var(--text-color);
  flex-grow: 1;
  line-height: 1.75;
}

.review-card .author {
  align-items: center;
  border-top: 1px solid var(--theme-color-light);
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
}

.review-card .author .avatar {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: flex;
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.review-card .author .meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.review-card .author .name {
  color: var(--headings-color);
  font-weight: 700;
}

.review-card .author .date {
  color: var(--text-color);
  font-size: 14px;
}

.review-card .author .source {
  color: var(--theme-color1);
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 700;
}

.reviews-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.reviews-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  opacity: 1;
  width: 26px;
  border-radius: 6px;
}

/* ---------- Common appliance problems ---------- */

.problem-block .inner-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-block .inner-box:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-block .image {
  margin: 0;
  overflow: hidden;
}

.problem-block .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.problem-block .inner-box:hover .image img {
  transform: scale(1.05);
}

.problem-block .content-box {
  padding: 30px;
}

.problem-block .content-box .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.problem-block .content-box .title a {
  color: var(--headings-color);
}

.problem-block .content-box .title a:hover {
  color: var(--theme-color1);
}

.problem-block .content-box .btn-more {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Brands ---------- */

.brands-section {
  background: var(--theme-color-ghost-white);
}

.brands-slider .swiper-slide {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
}

.brands-section .brand-logo {
  align-items: center;
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 18px;
  display: flex;
  height: 110px;
  justify-content: center;
  padding: 22px;
  width: 100%;
}

.brands-section .brand-logo img {
  filter: grayscale(100%);
  max-height: 100%;
  max-width: 100%;
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
  width: auto;
}

.brands-section .brand-logo:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- Easy steps ---------- */

.steps-section {
  background: var(--gradient-14);
}

.steps-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.step-block .inner-box {
  background: rgba(var(--theme-color-white-rgb), 0.06);
  border: 1px solid rgba(var(--theme-color-white-rgb), 0.15);
  border-radius: 24px;
  height: 100%;
  padding: 40px 32px;
}

.step-block .inner-box .count {
  color: rgba(var(--theme-color-white-rgb), 0.35);
  font-family: var(--heading-font-family);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
}

.step-block .inner-box .title {
  color: var(--theme-color-white);
  font-size: 24px;
  font-weight: 700;
  margin: 14px 0 12px;
}

.step-block .inner-box .text {
  color: rgba(var(--theme-color-white-rgb), 0.8);
  line-height: 1.75;
}

.steps-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 55px;
}




@media (max-width: 991.98px) {
  .steps-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ---------- Technicians at work ---------- */

.at-work-slider {
  padding-bottom: 60px;
}

.at-work-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.at-work-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  border-radius: 6px;
  opacity: 1;
  width: 26px;
}

.at-work-slider .swiper-slide .image {
  margin: 0;
}

.at-work-slider .swiper-slide img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* ---------- Service areas ---------- */

.service-areas-section {
  background: var(--theme-color-ghost-white);
}



.area-map {
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
}

.area-map iframe {
  border: 0;
  display: block;
  height: 460px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .area-map {
    margin-top: 50px;
  }

  .area-map iframe {
    height: 360px;
  }
}

/* ---------- CTA offer ---------- */

.cta-offer-section .cta-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.2;
}

.cta-offer-section .cta-content .text {
  color: var(--text-color);
  line-height: 1.75;
  margin-top: 20px;
  max-width: 560px;
}

/* the photo grows to the bottom of the row so it and the form card end on the
   same line instead of the image stopping short */
.cta-offer-section .row {
  align-items: stretch;
}

.cta-offer-section .cta-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cta-offer-section .cta-content .image {
  /* flex-basis 0 so the photo contributes no intrinsic height and simply fills
     whatever the form card leaves -- both columns then end on the same line */
  /* basis 0 so the photo adds no intrinsic height and simply fills what the
     form card leaves -- the two columns then end on the same line. The floor
     keeps it visible if the embed reports no height. */
  flex: 1 1 0;
  margin: 34px 0 0;
  min-height: 240px;
}

.cta-offer-section .cta-content .image img {
  /* the van shot is portrait -- crop low so the van stays in frame */
  border-radius: 24px;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-offer-section .cta-content .image {
    /* below xl the columns stack, so .image is no longer stretched by a
       side-by-side row -- min-height:auto lets it size to the img's own
       aspect-ratio instead of collapsing to the flex-basis of 0 */
    min-height: auto;
  }

  .cta-offer-section .cta-content .image img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}





.cta-form-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
  padding: 34px 30px;
}

@media (max-width: 575.98px) {
  .cta-form-box {
    padding: 22px 18px;
  }
}

.cta-form-box iframe {
  border: none;
  display: block;
  height: 620px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-form-box {
    margin-top: 50px;
  }
}

/* No photo behind the hero -- just the brand gradient. */
.banner-section:after {
  background-image: none;
}

/* The template's overlay stops at 1300px, which leaves a visible seam down the
   hero. Full width and a softer falloff removes the edge. */
.banner-section:before {
  background: linear-gradient(115deg, var(--theme-color1) 0%, rgba(var(--theme-color1-rgb), 0) 78%);
  max-width: none;
  width: 100%;
}

/* With the photo box gone the card sits alone in the right column. It has to
   turn white -- the template's navy card is the same colour as the hero now. */
.banner-section .image-column .video-reivew-box {
  left: auto;
  margin-left: auto;
  max-width: 300px;
  position: absolute;
  right: 0;
  top: 130px;
}

.banner-section .image-column .video-reivew-box .content-box {
  background: var(--theme-color-white);
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  padding: 28px 30px;
  width: 100%;
}

.banner-section .image-column .video-reivew-box .content-box .google-mark,
.banner-section .image-column .video-reivew-box .content-box .text {
  color: var(--headings-color);
}

.banner-section .image-column .video-reivew-box .content-box .text {
  font-weight: 600;
}


/* ---------- Service detail pages ---------- */

.service-detail-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 22px;
}

.service-detail-content .text {
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 18px;
}

.service-detail-content .sub-heading {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin: 34px 0 16px;
}

.service-detail-content .check-list {
  margin: 0 0 10px;
  padding: 0;
}

.service-detail-content .check-list li {
  color: var(--text-color);
  list-style: none;
  padding: 8px 0 8px 34px;
  position: relative;
}

.service-detail-content .check-list li:before {
  color: var(--theme-color1);
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 8px;
}

.service-detail-side .image {
  margin: 0 0 30px;
}

.service-detail-side .image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

.service-detail-side .side-box {
  background: var(--theme-color-ghost-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  margin-bottom: 30px;
  padding: 30px;
}

.service-detail-side .side-box .title {
  color: var(--headings-color);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-detail-side .side-box .text {
  color: var(--text-color);
  margin-bottom: 20px;
}

.service-detail-side .service-links {
  margin: 0;
  padding: 0;
}

.service-detail-side .service-links li {
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.08);
  list-style: none;
}

.service-detail-side .service-links li:last-child {
  border-bottom: none;
}

.service-detail-side .service-links a {
  color: var(--headings-color);
  display: block;
  font-weight: 600;
  padding: 12px 0;
}

.service-detail-side .service-links a:hover {
  color: var(--theme-color1);
  padding-left: 6px;
}

@media (max-width: 1199.98px) {
  .service-detail-side {
    margin-top: 50px;
  }
}

/* The two floating badges were overlays on the hero photo. Without it they are
   just stray pills in empty space, so they are dropped. */
.banner-section .image-column .object-1,
.banner-section .image-column .object-2 {
  display: none;
}

@media (max-width: 1199.98px) {
  /* Stays an overlay on the photo (like desktop) but shrunk into a small
     corner badge -- the stacked layout doesn't have room for the full-size
     card sitting in normal flow. */
  .banner-section .image-column .video-reivew-box {
    bottom: 12px;
    max-width: 170px;
    position: absolute;
    right: 12px;
    top: auto;
  }

  .banner-section .image-column .video-reivew-box .content-box {
    border-radius: 16px;
    padding: 14px 16px;
  }

  .banner-section .image-column .video-reivew-box .content-box .review i {
    font-size: 12px;
  }

  .banner-section .image-column .video-reivew-box .google-mark {
    font-size: 13px;
  }

  .banner-section .image-column .video-reivew-box .content-box .text {
    font-size: 12px;
  }

  .banner-section .image-column .object-1,
  .banner-section .image-column .object-2 {
    display: none;
  }
}

/* ================================================================
 * Services page
 * ================================================================ */

.services-hero {
  background: var(--gradient-14);
  padding: 90px 0 100px;
}

@media (max-width: 767.98px) {
  /* the 44px bottom matches the section scale, so the hero hands over to the
     next section on the same rhythm as every other boundary */
  .services-hero {
    padding: 40px 0 44px;
  }
}

/* Grid instead of a Bootstrap row/col pair so the image can sit between the
   title and the body copy on mobile without duplicating it in the markup --
   desktop reassembles title+copy into one column with the image beside it. */
.services-hero-grid {
  display: grid;
  gap: 30px;
  grid-template-areas: "title" "image" "content";
}

.services-hero-title {
  grid-area: title;
}

.services-hero-image {
  grid-area: image;
}

.services-hero-content {
  grid-area: content;
}

@media (min-width: 1200px) {
  .services-hero-grid {
    align-items: stretch;
    column-gap: 60px;
    grid-template-areas: "title image" "content image";
    grid-template-columns: 1fr 1fr;
    /* the photo spans both rows and is taller than the copy, so auto rows would
       split the surplus and push the title away from the text below it -- pin
       the title row to its own height and let the second row absorb the rest */
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
}

.services-hero-title.title {
  color: var(--theme-color-white);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.16;
  max-width: 620px;
}

.services-hero-content .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
  font-size: 17px;
  line-height: 1.75;
  max-width: 600px;
}

/* The template's global b/strong rule sets a dark gray (#333) meant for
   light backgrounds -- invisible against this hero's dark gradient. */
.services-hero-content .text strong {
  color: var(--theme-color-white);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .services-hero-content .text {
    margin-top: 24px;
  }
}

.services-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 36px;
}

.services-hero-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

@media (min-width: 1200px) {
  /* Below this the columns stack and a fixed ratio keeps the photo a
     sensible height; side-by-side, stretch it to match the text column
     instead of leaving a gap under a shorter fixed-ratio image. */
  .services-hero-image {
    position: relative;
  }

  /* Taken out of flow so the photo no longer contributes its own height: the
     column height comes from the copy, and the photo fills it exactly, so it
     ends on the same line as the last button. */
  .services-hero-image img {
    aspect-ratio: auto;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }
}

/* Service Areas reuses the portrait van shot (cta-offer.jpg) as its page
   hero -- the default crop for landscape technician photos cuts the van's
   wheels off, so this page gets its own lower crop point. */
.areas-hero .services-hero-image img {
  object-position: center 60%;
}

@media (max-width: 767.98px) {
  .services-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .services-hero-actions .call-cta {
    display: block;
    width: 100%;
  }

  .services-hero-actions .theme-btn {
    align-self: center;
    justify-content: center;
  }

  .services-hero-actions .theme-btn .btn-title {
    line-height: 68px;
  }

  .services-hero-actions .theme-btn .icon {
    height: 68px;
    line-height: 68px;
    width: 68px;
  }
}

/* ---------- Popular services ---------- */

.popular-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.popular-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.popular-card .image {
  margin: 0;
  overflow: hidden;
}

.popular-card .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.popular-card:hover .image img {
  transform: scale(1.05);
}

.popular-card .content {
  padding: 30px;
}

.popular-card .content .title {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-card .content .text {
  color: var(--text-color);
  line-height: 1.75;
}

.popular-card .content .link {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Other services ---------- */

.other-services-section {
  background: var(--theme-color-ghost-white);
}

.other-service-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  padding: 30px 26px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.other-service-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.other-service-card .icon {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  display: flex;
  height: 66px;
  justify-content: center;
  margin-bottom: 22px;
  width: 66px;
}

.other-service-card .icon img {
  height: 34px;
  width: 34px;
}

/* the eighth tile is a prompt rather than a service */
.other-service-card.is-cta {
  background: var(--theme-color1);
  border-color: var(--theme-color1);
}

.other-service-card.is-cta .icon {
  background: rgba(var(--theme-color-white-rgb), 0.16);
}

.other-service-card.is-cta .title,
.other-service-card.is-cta .link {
  color: var(--theme-color-white);
}

.other-service-card.is-cta .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
}

.other-service-card.is-cta .link {
  display: inline-block;
  font-weight: 700;
  margin-top: 16px;
}

.other-service-card.is-cta:hover {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
}

.other-service-card .title {
  color: var(--headings-color);
  font-size: 20px;
  min-height: 2.6em;
  font-weight: 700;
  margin-bottom: 10px;
}

.other-service-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

/* ================================================================
 * Individual service pages
 * ================================================================ */

/* ---------- Card grid spacing ----------
 * The cards carried their own margin-bottom, which left the rows almost
 * touching. The rows own the spacing now: 30px across, 34px down.
 */

.sp-problems-section .row,
.sp-why-section .row,
.popular-services-section .row,
.other-services-section .row,
.problems-section .row {
  --bs-gutter-x: 30px;
  row-gap: 34px;
}

.problem-card,
.why-card,
.popular-card,
.other-service-card,
.problem-block .inner-box {
  margin-bottom: 0;
}

/* ---------- Common problems ----------
 * A six-card grid reads better than a long list beside a photo: equal-height
 * cards, one symptom each, and no image that has to match the appliance.
 */

.sp-why-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* The photo tracks the height of the copy beside it, so a long description
   makes it taller rather than leaving a gap under it. */
.sp-solutions-section .row {
  align-items: stretch;
}

/* the column becomes a flex container so the photo wrapper stretches to the
   row height, which the copy column drives */
.sp-solutions-section .row > [class*="col-"] {
  display: flex;
}

.sp-solutions-image {
  flex: 1;
  min-height: 340px;
  position: relative;
}

/* absolute so the photo adds no intrinsic height of its own -- the wrapper is
   sized by the stretched column, which the copy beside it drives */
.sp-solutions-image img {
  border-radius: 24px;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .sp-solutions-section .row > [class*="col-"] {
    display: block;
  }

  .sp-solutions-image {
    height: auto;
    min-height: 0;
  }

  .sp-solutions-image img {
    aspect-ratio: 4 / 3;
    height: auto;
    position: static;
  }
}

.problem-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 20px;
  height: 100%;
  margin-bottom: 30px;
  padding: 30px 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-card .marker {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 14px;
  color: var(--theme-color1);
  display: flex;
  font-size: 18px;
  height: 50px;
  justify-content: center;
  margin-bottom: 20px;
  width: 50px;
}

.problem-card .title {
  color: var(--headings-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  min-height: 2.6em;
}

.problem-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

.problem-note {
  align-items: center;
  background: var(--theme-color-ghost-white);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 20px;
  padding: 26px 34px;
}

.problem-note .note-text {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 19px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .problem-card .title {
    min-height: 0;
  }

  .problem-note {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Our solutions ---------- */

.sp-solutions-section {
  background: var(--theme-color-ghost-white);
}

.sp-solutions-content .text {
  color: var(--text-color);
  line-height: 1.8;
}

.sp-solutions-content .services-hero-actions {
  margin-top: 34px;
}

@media (max-width: 1199.98px) {
  .sp-solutions-content {
    margin-top: 50px;
  }
}

/* ---------- Why choose ----------
 * Numbered rows split by hairlines, in the same shape as the template's
 * offering list: index, title, copy, and an arrow marker that shifts on hover.
 */

.sp-why-section {
  background: var(--theme-color-ghost-white);
}

.why-list {
  border-top: 1px solid rgba(var(--theme-color2-rgb), 0.12);
  margin: 0;
  padding: 0;
}

.why-row {
  align-items: flex-start;
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.12);
  display: flex;
  gap: 34px;
  list-style: none;
  padding: 34px 10px;
  transition: background-color 0.35s ease, padding-left 0.35s ease;
}

.why-row:hover {
  background: var(--theme-color-white);
  padding-left: 24px;
}

.why-row .num {
  color: var(--headings-color);
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  min-width: 62px;
  transition: color 0.35s ease;
}

.why-row:hover .num {
  color: var(--theme-color1);
}

.why-row .body {
  flex-grow: 1;
}

.why-row .title {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.why-row .text {
  color: var(--text-color);
  line-height: 1.8;
  max-width: 900px;
}

@media (max-width: 767.98px) {
  .why-row {
    gap: 18px;
    padding: 26px 0;
  }

  .why-row .num {
    font-size: 18px;
    min-width: 44px;
  }

  .why-row .title {
    font-size: 20px;
  }

  .why-row .arrow {
    display: none;
  }
}

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

.reviews-slider {
  padding-bottom: 60px;
}

.reviews-slider .swiper-slide {
  height: auto;
}

.review-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.review-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.review-card .stars {
  color: var(--review-color);
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.review-card .text {
  color: var(--text-color);
  flex-grow: 1;
  line-height: 1.75;
}

.review-card .author {
  align-items: center;
  border-top: 1px solid var(--theme-color-light);
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
}

.review-card .author .avatar {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: flex;
  flex-shrink: 0;
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.review-card .author .meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.review-card .author .name {
  color: var(--headings-color);
  font-weight: 700;
}

.review-card .author .date {
  color: var(--text-color);
  font-size: 14px;
}

.review-card .author .source {
  color: var(--theme-color1);
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 700;
}

.reviews-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.reviews-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  opacity: 1;
  width: 26px;
  border-radius: 6px;
}

/* ---------- Common appliance problems ---------- */

.problem-block .inner-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-block .inner-box:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-block .image {
  margin: 0;
  overflow: hidden;
}

.problem-block .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.problem-block .inner-box:hover .image img {
  transform: scale(1.05);
}

.problem-block .content-box {
  padding: 30px;
}

.problem-block .content-box .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.problem-block .content-box .title a {
  color: var(--headings-color);
}

.problem-block .content-box .title a:hover {
  color: var(--theme-color1);
}

.problem-block .content-box .btn-more {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Brands ---------- */

.brands-section {
  background: var(--theme-color-ghost-white);
}

.brands-slider .swiper-slide {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
}

.brands-section .brand-logo {
  align-items: center;
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 18px;
  display: flex;
  height: 110px;
  justify-content: center;
  padding: 22px;
  width: 100%;
}

.brands-section .brand-logo img {
  filter: grayscale(100%);
  max-height: 100%;
  max-width: 100%;
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
  width: auto;
}

.brands-section .brand-logo:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- Easy steps ---------- */

.steps-section {
  background: var(--gradient-14);
}

.steps-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.step-block .inner-box {
  background: rgba(var(--theme-color-white-rgb), 0.06);
  border: 1px solid rgba(var(--theme-color-white-rgb), 0.15);
  border-radius: 24px;
  height: 100%;
  padding: 40px 32px;
}

.step-block .inner-box .count {
  color: rgba(var(--theme-color-white-rgb), 0.35);
  font-family: var(--heading-font-family);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
}

.step-block .inner-box .title {
  color: var(--theme-color-white);
  font-size: 24px;
  font-weight: 700;
  margin: 14px 0 12px;
}

.step-block .inner-box .text {
  color: rgba(var(--theme-color-white-rgb), 0.8);
  line-height: 1.75;
}

.steps-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 55px;
}




@media (max-width: 991.98px) {
  .steps-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ---------- Technicians at work ---------- */

.at-work-slider {
  padding-bottom: 60px;
}

.at-work-slider .swiper-pagination-bullet {
  background: var(--theme-color2);
  height: 9px;
  opacity: 0.25;
  width: 9px;
}

.at-work-slider .swiper-pagination-bullet-active {
  background: var(--theme-color1);
  border-radius: 6px;
  opacity: 1;
  width: 26px;
}

.at-work-slider .swiper-slide .image {
  margin: 0;
}

.at-work-slider .swiper-slide img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* The job photos are portraits in a 4:3 frame, so a quarter of the height has
   to go. Taken from the middle it was taking the technicians' heads with it;
   a quarter of the way down keeps them and still frames the appliance. */
.at-work-slider .swiper-slide img {
  object-position: center 25%;
}

/* ---------- Service areas ---------- */

.service-areas-section {
  background: var(--theme-color-ghost-white);
}



.area-map {
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
}

.area-map iframe {
  border: 0;
  display: block;
  height: 460px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .area-map {
    margin-top: 50px;
  }

  .area-map iframe {
    height: 360px;
  }
}

/* ---------- CTA offer ---------- */

.cta-offer-section .cta-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.2;
}

.cta-offer-section .cta-content .text {
  color: var(--text-color);
  line-height: 1.75;
  margin-top: 20px;
  max-width: 560px;
}

/* the photo grows to the bottom of the row so it and the form card end on the
   same line instead of the image stopping short */
.cta-offer-section .row {
  align-items: stretch;
}

.cta-offer-section .cta-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cta-offer-section .cta-content .image {
  /* flex-basis 0 so the photo contributes no intrinsic height and simply fills
     whatever the form card leaves -- both columns then end on the same line */
  /* basis 0 so the photo adds no intrinsic height and simply fills what the
     form card leaves -- the two columns then end on the same line. The floor
     keeps it visible if the embed reports no height. */
  flex: 1 1 0;
  margin: 34px 0 0;
  min-height: 240px;
}

.cta-offer-section .cta-content .image img {
  /* the van shot is portrait -- crop low so the van stays in frame */
  border-radius: 24px;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-offer-section .cta-content .image {
    /* below xl the columns stack, so .image is no longer stretched by a
       side-by-side row -- min-height:auto lets it size to the img's own
       aspect-ratio instead of collapsing to the flex-basis of 0 */
    min-height: auto;
  }

  .cta-offer-section .cta-content .image img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}





.cta-form-box {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(var(--theme-color2-rgb), 0.1);
  overflow: hidden;
  padding: 34px 30px;
}

@media (max-width: 575.98px) {
  .cta-form-box {
    padding: 22px 18px;
  }
}

.cta-form-box iframe {
  border: none;
  display: block;
  height: 620px;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .cta-form-box {
    margin-top: 50px;
  }
}

/* No photo behind the hero -- just the brand gradient. */
.banner-section:after {
  background-image: none;
}

/* The template's overlay stops at 1300px, which leaves a visible seam down the
   hero. Full width and a softer falloff removes the edge. */
.banner-section:before {
  background: linear-gradient(115deg, var(--theme-color1) 0%, rgba(var(--theme-color1-rgb), 0) 78%);
  max-width: none;
  width: 100%;
}

/* With the photo box gone the card sits alone in the right column. It has to
   turn white -- the template's navy card is the same colour as the hero now. */
.banner-section .image-column .video-reivew-box {
  left: auto;
  margin-left: auto;
  max-width: 300px;
  position: absolute;
  right: 0;
  top: 130px;
}

.banner-section .image-column .video-reivew-box .content-box {
  background: var(--theme-color-white);
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  padding: 28px 30px;
  width: 100%;
}

.banner-section .image-column .video-reivew-box .content-box .google-mark,
.banner-section .image-column .video-reivew-box .content-box .text {
  color: var(--headings-color);
}

.banner-section .image-column .video-reivew-box .content-box .text {
  font-weight: 600;
}


/* ---------- Service detail pages ---------- */

.service-detail-content .title {
  color: var(--headings-color);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 22px;
}

.service-detail-content .text {
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 18px;
}

.service-detail-content .sub-heading {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin: 34px 0 16px;
}

.service-detail-content .check-list {
  margin: 0 0 10px;
  padding: 0;
}

.service-detail-content .check-list li {
  color: var(--text-color);
  list-style: none;
  padding: 8px 0 8px 34px;
  position: relative;
}

.service-detail-content .check-list li:before {
  color: var(--theme-color1);
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 8px;
}

.service-detail-side .image {
  margin: 0 0 30px;
}

.service-detail-side .image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

.service-detail-side .side-box {
  background: var(--theme-color-ghost-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  margin-bottom: 30px;
  padding: 30px;
}

.service-detail-side .side-box .title {
  color: var(--headings-color);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-detail-side .side-box .text {
  color: var(--text-color);
  margin-bottom: 20px;
}

.service-detail-side .service-links {
  margin: 0;
  padding: 0;
}

.service-detail-side .service-links li {
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.08);
  list-style: none;
}

.service-detail-side .service-links li:last-child {
  border-bottom: none;
}

.service-detail-side .service-links a {
  color: var(--headings-color);
  display: block;
  font-weight: 600;
  padding: 12px 0;
}

.service-detail-side .service-links a:hover {
  color: var(--theme-color1);
  padding-left: 6px;
}

@media (max-width: 1199.98px) {
  .service-detail-side {
    margin-top: 50px;
  }
}

/* The two floating badges were overlays on the hero photo. Without it they are
   just stray pills in empty space, so they are dropped. */
.banner-section .image-column .object-1,
.banner-section .image-column .object-2 {
  display: none;
}

@media (max-width: 1199.98px) {
  /* Stays an overlay on the photo (like desktop) but shrunk into a small
     corner badge -- the stacked layout doesn't have room for the full-size
     card sitting in normal flow. */
  .banner-section .image-column .video-reivew-box {
    bottom: 12px;
    max-width: 170px;
    position: absolute;
    right: 12px;
    top: auto;
  }

  .banner-section .image-column .video-reivew-box .content-box {
    border-radius: 16px;
    padding: 14px 16px;
  }

  .banner-section .image-column .video-reivew-box .content-box .review i {
    font-size: 12px;
  }

  .banner-section .image-column .video-reivew-box .google-mark {
    font-size: 13px;
  }

  .banner-section .image-column .video-reivew-box .content-box .text {
    font-size: 12px;
  }

  .banner-section .image-column .object-1,
  .banner-section .image-column .object-2 {
    display: none;
  }
}

/* ================================================================
 * Services page
 * ================================================================ */

.services-hero {
  background: var(--gradient-14);
  padding: 90px 0 100px;
}

@media (max-width: 767.98px) {
  /* the 44px bottom matches the section scale, so the hero hands over to the
     next section on the same rhythm as every other boundary */
  .services-hero {
    padding: 40px 0 44px;
  }
}

/* Grid instead of a Bootstrap row/col pair so the image can sit between the
   title and the body copy on mobile without duplicating it in the markup --
   desktop reassembles title+copy into one column with the image beside it. */
.services-hero-grid {
  display: grid;
  gap: 30px;
  grid-template-areas: "title" "image" "content";
}

.services-hero-title {
  grid-area: title;
}

.services-hero-image {
  grid-area: image;
}

.services-hero-content {
  grid-area: content;
}

@media (min-width: 1200px) {
  .services-hero-grid {
    align-items: stretch;
    column-gap: 60px;
    grid-template-areas: "title image" "content image";
    grid-template-columns: 1fr 1fr;
    /* the photo spans both rows and is taller than the copy, so auto rows would
       split the surplus and push the title away from the text below it -- pin
       the title row to its own height and let the second row absorb the rest */
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
}

.services-hero-title.title {
  color: var(--theme-color-white);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.16;
  max-width: 620px;
}

.services-hero-content .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
  font-size: 17px;
  line-height: 1.75;
  max-width: 600px;
}

/* The template's global b/strong rule sets a dark gray (#333) meant for
   light backgrounds -- invisible against this hero's dark gradient. */
.services-hero-content .text strong {
  color: var(--theme-color-white);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .services-hero-content .text {
    margin-top: 24px;
  }
}

.services-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 36px;
}

.services-hero-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}

@media (min-width: 1200px) {
  /* Below this the columns stack and a fixed ratio keeps the photo a
     sensible height; side-by-side, stretch it to match the text column
     instead of leaving a gap under a shorter fixed-ratio image. */
  .services-hero-image {
    position: relative;
  }

  /* Taken out of flow so the photo no longer contributes its own height: the
     column height comes from the copy, and the photo fills it exactly, so it
     ends on the same line as the last button. */
  .services-hero-image img {
    aspect-ratio: auto;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }
}

/* Service Areas reuses the portrait van shot (cta-offer.jpg) as its page
   hero -- the default crop for landscape technician photos cuts the van's
   wheels off, so this page gets its own lower crop point. */
.areas-hero .services-hero-image img {
  object-position: center 60%;
}

@media (max-width: 767.98px) {
  .services-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .services-hero-actions .call-cta {
    display: block;
    width: 100%;
  }

  .services-hero-actions .theme-btn {
    align-self: center;
    justify-content: center;
  }

  .services-hero-actions .theme-btn .btn-title {
    line-height: 68px;
  }

  .services-hero-actions .theme-btn .icon {
    height: 68px;
    line-height: 68px;
    width: 68px;
  }
}

/* ---------- Popular services ---------- */

.popular-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.popular-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.popular-card .image {
  margin: 0;
  overflow: hidden;
}

.popular-card .image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.popular-card:hover .image img {
  transform: scale(1.05);
}

.popular-card .content {
  padding: 30px;
}

.popular-card .content .title {
  color: var(--headings-color);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-card .content .text {
  color: var(--text-color);
  line-height: 1.75;
}

.popular-card .content .link {
  color: var(--theme-color1);
  display: inline-block;
  font-weight: 700;
  margin-top: 18px;
}

/* ---------- Other services ---------- */

.other-services-section {
  background: var(--theme-color-ghost-white);
}

.other-service-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  display: block;
  height: 100%;
  padding: 30px 26px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.other-service-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.other-service-card .icon {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 50%;
  display: flex;
  height: 66px;
  justify-content: center;
  margin-bottom: 22px;
  width: 66px;
}

.other-service-card .icon img {
  height: 34px;
  width: 34px;
}

/* the eighth tile is a prompt rather than a service */
.other-service-card.is-cta {
  background: var(--theme-color1);
  border-color: var(--theme-color1);
}

.other-service-card.is-cta .icon {
  background: rgba(var(--theme-color-white-rgb), 0.16);
}

.other-service-card.is-cta .title,
.other-service-card.is-cta .link {
  color: var(--theme-color-white);
}

.other-service-card.is-cta .text {
  color: rgba(var(--theme-color-white-rgb), 0.85);
}

.other-service-card.is-cta .link {
  display: inline-block;
  font-weight: 700;
  margin-top: 16px;
}

.other-service-card.is-cta:hover {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
}

.other-service-card .title {
  color: var(--headings-color);
  font-size: 20px;
  min-height: 2.6em;
  font-weight: 700;
  margin-bottom: 10px;
}

.other-service-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

/* ================================================================
 * Individual service pages
 * ================================================================ */

/* ---------- Card grid spacing ----------
 * The cards carried their own margin-bottom, which left the rows almost
 * touching. The rows own the spacing now: 30px across, 34px down.
 */

.sp-problems-section .row,
.sp-why-section .row,
.popular-services-section .row,
.other-services-section .row,
.problems-section .row {
  --bs-gutter-x: 30px;
  row-gap: 34px;
}

.problem-card,
.why-card,
.popular-card,
.other-service-card,
.problem-block .inner-box {
  margin-bottom: 0;
}

/* ---------- Common problems ----------
 * A six-card grid reads better than a long list beside a photo: equal-height
 * cards, one symptom each, and no image that has to match the appliance.
 */

.sp-why-image img {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

/* The photo tracks the height of the copy beside it, so a long description
   makes it taller rather than leaving a gap under it. */
.sp-solutions-section .row {
  align-items: stretch;
}

/* the column becomes a flex container so the photo wrapper stretches to the
   row height, which the copy column drives */
.sp-solutions-section .row > [class*="col-"] {
  display: flex;
}

.sp-solutions-image {
  flex: 1;
  min-height: 340px;
  position: relative;
}

/* absolute so the photo adds no intrinsic height of its own -- the wrapper is
   sized by the stretched column, which the copy beside it drives */
.sp-solutions-image img {
  border-radius: 24px;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

@media (max-width: 1199.98px) {
  .sp-solutions-section .row > [class*="col-"] {
    display: block;
  }

  .sp-solutions-image {
    height: auto;
    min-height: 0;
  }

  .sp-solutions-image img {
    aspect-ratio: 4 / 3;
    height: auto;
    position: static;
  }
}

.problem-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 20px;
  height: 100%;
  margin-bottom: 30px;
  padding: 30px 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.problem-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.problem-card .marker {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 14px;
  color: var(--theme-color1);
  display: flex;
  font-size: 18px;
  height: 50px;
  justify-content: center;
  margin-bottom: 20px;
  width: 50px;
}

.problem-card .title {
  color: var(--headings-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  min-height: 2.6em;
}

.problem-card .text {
  color: var(--text-color);
  line-height: 1.7;
}

.problem-note {
  align-items: center;
  background: var(--theme-color-ghost-white);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 20px;
  padding: 26px 34px;
}

.problem-note .note-text {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 19px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .problem-card .title {
    min-height: 0;
  }

  .problem-note {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Our solutions ---------- */

.sp-solutions-section {
  background: var(--theme-color-ghost-white);
}

.sp-solutions-content .text {
  color: var(--text-color);
  line-height: 1.8;
}

.sp-solutions-content .services-hero-actions {
  margin-top: 34px;
}

@media (max-width: 1199.98px) {
  .sp-solutions-content {
    margin-top: 50px;
  }
}

/* ---------- Why choose ----------
 * Four equal cards instead of an accordion: nothing to click before the copy
 * is readable, no icon alignment to fight, and no photo that has to match the
 * appliance on every service page.
 */

.sp-why-section {
  background: var(--theme-color-ghost-white);
}

.why-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  height: 100%;
  margin-bottom: 30px;
  padding: 36px 34px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.why-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.why-card .icon {
  align-items: center;
  background: var(--theme-color1);
  border-radius: 16px;
  color: var(--theme-color-white);
  display: flex;
  font-size: 22px;
  height: 58px;
  justify-content: center;
  margin-bottom: 22px;
  width: 58px;
}

.why-card .title {
  color: var(--headings-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  min-height: 2.6em;
}

.why-card .text {
  color: var(--text-color);
  line-height: 1.8;
}

@media (max-width: 991.98px) {
  .why-card .title {
    min-height: 0;
  }
}



/* ---------- Locations grid ---------- */

.locations-section .row {
  --bs-gutter-x: 24px;
  row-gap: 24px;
}

.location-card {
  align-items: center;
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 18px;
  display: flex;
  gap: 14px;
  height: 100%;
  padding: 20px 22px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.location-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.location-card .icon {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 12px;
  color: var(--theme-color1);
  display: flex;
  flex-shrink: 0;
  height: 42px;
  justify-content: center;
  transition: background-color 0.45s ease, color 0.45s ease;
  width: 42px;
}

.location-card:hover .icon {
  background: var(--theme-color1);
  color: var(--theme-color-white);
}

.location-card .body {
  flex-grow: 1;
}

.location-card .city {
  color: var(--headings-color);
  display: block;
  font-family: var(--heading-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.location-card .go {
  color: var(--theme-color1);
  flex-shrink: 0;
  transition: transform 0.45s ease;
}

.location-card:hover .go {
  transform: translateX(4px);
}

/* ---------- Values grid ---------- */

.values-section .row {
  --bs-gutter-x: 30px;
  row-gap: 34px;
}

.value-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  height: 100%;
  padding: 34px 30px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.value-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.value-card .icon {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 16px;
  color: var(--theme-color1);
  display: flex;
  font-size: 24px;
  height: 62px;
  justify-content: center;
  margin-bottom: 22px;
  transition: background-color 0.45s ease, color 0.45s ease;
  width: 62px;
}

.value-card:hover .icon {
  background: var(--theme-color1);
  color: var(--theme-color-white);
}

.value-card .title {
  color: var(--headings-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.value-card .text {
  color: var(--text-color);
  line-height: 1.75;
}

/* Contact hero: the source photo is portrait, so cover with the default 4:3
   ratio crops the technician's head and cuts the handshake. This page keeps
   the whole subject in view -- the image sits in a taller box and contain-fits. */
.contact-hero .services-hero-image img {
  aspect-ratio: 3 / 4;
  max-height: 620px;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Contact info ---------- */

.contact-info-section .row {
  --bs-gutter-x: 24px;
  row-gap: 24px;
}

.contact-card {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 20px;
  height: 100%;
  padding: 28px 28px 24px;
  text-align: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

.contact-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--theme-color1-rgb), 0.05),
              0 16px 34px rgba(var(--theme-color1-rgb), 0.09);
  transform: translateY(-4px);
}

.contact-card .icon {
  align-items: center;
  background: var(--theme-color-light);
  border-radius: 14px;
  color: var(--theme-color1);
  display: flex;
  font-size: 20px;
  height: 52px;
  justify-content: center;
  margin-bottom: 18px;
  transition: background-color 0.45s ease, color 0.45s ease;
  width: 52px;
}

.contact-card:hover .icon {
  background: var(--theme-color1);
  color: var(--theme-color-white);
}

.contact-card .title {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.contact-card .link {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.contact-card .link:hover {
  color: var(--theme-color1);
}

.contact-card .lines {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}

.contact-map {
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(var(--theme-color2-rgb), 0.08);
  margin-top: 40px;
  overflow: hidden;
}

.contact-map iframe {
  border: 0;
  display: block;
  height: 440px;
  width: 100%;
}

@media (max-width: 767.98px) {
  .contact-map iframe {
    height: 320px;
  }
}

/* ---------- Blog post ---------- */

.blog-post-header {
  margin-bottom: 40px;
  text-align: center;
}

.blog-post-header .post-meta {
  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 18px;
}

.blog-post-header .post-meta .date .fa-calendar {
  color: var(--theme-color1);
  margin-right: 8px;
}

.blog-post-header .post-meta .topic {
  color: var(--theme-color1);
  font-weight: 700;
}

.blog-post-header .post-meta .topic:hover {
  color: var(--theme-color2);
}

.blog-post-header .title {
  color: var(--headings-color);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.2;
}

.blog-post-cover {
  border-radius: 24px;
  margin: 0 0 40px;
  overflow: hidden;
}

.blog-post-cover img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.blog-post-body {
  color: var(--text-color);
  font-size: 17px;
  line-height: 1.85;
}

.blog-post-body p {
  margin-bottom: 22px;
}

.blog-post-body h2 {
  color: var(--headings-color);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  margin: 44px 0 18px;
}

.blog-post-cta {
  background: var(--theme-color-ghost-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  margin-top: 60px;
  padding: 40px;
  text-align: center;
}

.blog-post-cta .title {
  color: var(--headings-color);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
}

.blog-post-cta .text {
  color: var(--text-color);
  margin-bottom: 26px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.blog-post-cta .services-hero-actions {
  justify-content: center;
}

.popular-card .content .post-meta {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

@media (max-width: 767.98px) {
  .blog-post-cta {
    padding: 28px 22px;
  }
}

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

.faq-groups-section {
  background: var(--theme-color-ghost-white);
}

.faq-group {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-light);
  border-radius: 24px;
  margin-bottom: 30px;
  padding: 40px;
}

.faq-group:last-child {
  margin-bottom: 0;
}

.faq-group-head {
  border-bottom: 1px solid var(--theme-color-light);
  margin-bottom: 12px;
  padding-bottom: 20px;
}

.faq-group-head .title {
  color: var(--headings-color);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  margin-bottom: 6px;
}

.faq-group-head .text {
  color: var(--text-color);
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .faq-group {
    padding: 26px 22px;
  }
}

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

.reviews-grid-section {
  background: var(--theme-color-ghost-white);
}

.reviews-grid-section .row {
  --bs-gutter-x: 30px;
  row-gap: 30px;
}

.reviews-grid-section .review-card {
  height: 100%;
}

/* ---------- Links the keyword rules put in ----------
 * In body copy these already take the template's link colour. In a heading
 * they inherited the heading's own colour and read as plain text, so they are
 * coloured here. Only links the rules generate carry this class -- the
 * template's own heading links, such as the service cards, are left as they
 * are designed.
 */
h1 .internal-link,
h2 .internal-link,
h3 .internal-link,
h4 .internal-link,
h5 .internal-link,
h6 .internal-link {
  color: var(--theme-color1);
  text-decoration: none;
  transition: color 0.3s ease;
}

h1 .internal-link:hover,
h2 .internal-link:hover,
h3 .internal-link:hover,
h4 .internal-link:hover,
h5 .internal-link:hover,
h6 .internal-link:hover {
  text-decoration: underline;
}

/* ---------- Legal pages ---------- */

/* Privacy Policy has no hero band, so the page's own heading opens it. */
.legal-title {
  color: var(--headings-color);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
}

.legal-intro {
  color: var(--text-color);
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 26px;
}

.legal-updated {
  color: var(--text-color);
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.legal-body {
  color: var(--text-color);
  font-size: 17px;
  line-height: 1.85;
}

.legal-body p {
  margin: 0 0 22px;
}

.legal-body h2 {
  color: var(--headings-color);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  margin: 44px 0 16px;
}

.legal-body ul {
  margin: 0 0 22px;
  padding-left: 0;
}

.legal-body li {
  color: var(--text-color);
  list-style: none;
  padding: 6px 0 6px 32px;
  position: relative;
}

.legal-body li:before {
  color: var(--theme-color1);
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 8px;
}

.legal-body a {
  color: var(--theme-color1);
  font-weight: 700;
}

.legal-body a:hover {
  color: var(--theme-color2);
}

/* ---------- Mobile menu contact icons ----------
 * The template's Linearicons set mixes a bold phone glyph, a thin map pin and
 * a spiky alarm clock at the same 34px size, so the row read as uneven. All
 * four are FontAwesome regular now, in a small rounded badge like the rest of
 * the site's icon treatment, instead of bare floating glyphs.
 */

.contact-list-one li {
  padding-left: 56px;
}

.contact-list-one li .icon {
  align-items: center;
  background: rgba(var(--theme-color-white-rgb), 0.1);
  border-radius: 12px;
  color: var(--theme-color3);
  display: flex;
  font-size: 16px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  top: 2px;
  width: 40px;
}

/* ---------- Section subtitle pill ----------
 * The template's border (--theme-color-light, a near-white blue tint) reads
 * fine on plain white but disappears on the light ghost-white sections used
 * throughout the site -- the two colors are almost identical. A translucent
 * brand-blue border keeps a visible edge on any light background instead of
 * matching two near-white opaques against each other.
 */

.sec-title .subtitle {
  border-color: rgba(var(--theme-color1-rgb), 0.3);
}

/* ---------- Logo left-alignment ----------
 * The template's .logo box is a fixed-width flex container centered around
 * its content (built for a wider wordmark). Our lockup renders narrower at
 * the same height, so centering left a ~20px gap between it and everything
 * else in the header that starts flush left. Left-align instead.
 */

.header-style-one .header-lower .logo-box .logo {
  justify-content: flex-start;
}

/* ---------- Service card "Common Problems We Fix" list (location pages) ---------- */

/* pages that don't set $svcN_problems render an empty div -- hide it so the
   home page and service pages keep the original card layout */
.service-problems:empty {
  display: none;
}

/* the description above already carries 25px of margin -- adding to it left a
   43px hole between the copy and the list */
.service-problems {
  margin-top: 0;
}

/* The template reserves two lines of title height with a min-height so cards
   line up. Every card title fits on one line, so that reserve just showed up
   as dead space between the heading and the copy. */
.service-block .inner-box .content-box .title {
  min-height: 0;
}

.service-problems .label {
  color: var(--headings-color);
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.service-problems ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-problems li {
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}

.service-problems li:before {
  background-color: var(--theme-color1);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 2px;
  position: absolute;
  top: 9px;
  width: 5px;
}

/* a section whose subheadline is intentionally empty shouldn't leave a gap */
.sec-title .text:empty {
  display: none;
}

/* On hover the card flips to the dark gradient and the template turns its
   title, text and link white -- the problem list needs the same treatment or
   it drops to near-invisible dark grey on dark blue. */
.service-block .inner-box:hover .service-problems .label,
.service-block .inner-box:hover .service-problems li {
  color: var(--theme-color1-text-color);
}

.service-block .inner-box:hover .service-problems li:before {
  background-color: var(--theme-color1-text-color);
}

/* the problem list runs right up to the link below it -- give it room */
/* :not(:empty) so pages without the list (home, service pages) keep their
   original card spacing -- the hidden empty div is still an adjacent sibling */
.service-problems:not(:empty) + .btn-more {
  display: inline-block;
  margin-top: 20px;
}

/* Seven of the eight card photos are square (1200x1200) but the gas oven one
   is 1200x960, which left that card's photo 60px shorter and its heading
   sitting higher than the rest of the row. */
.service-block .inner-box .image-box .image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* ---------- Header adjustments ---------- */

/* The template keeps the burger visible on desktop, where it opens a side
   drawer duplicating the nav that is already on screen. */
@media (min-width: 1024px) {
  .header-style-one .header-lower .outer-box .mobile-nav-toggler {
    display: none;
  }
}

/* Only the phone/email list sits in the top bar, so space-between left it on
   the left edge. */
.header-top .inner-container {
  justify-content: flex-end;
}

/* The technician portrait is a tall crop, and a short landscape frame scaled
   it up until only his head and shoulders fit. A taller frame shows more of
   the shot at the same scale, so he reads at a natural distance. */
@media (min-width: 992px) {
  .why-panel .image {
    min-height: 380px;
  }
}

/* ---------- Social proof band: rating as a badge ---------- */

.social-proof-band .rating-line {
  align-items: center;
  background-color: var(--theme-color-white);
  border: 1px solid rgba(var(--theme-color1-rgb), 0.18);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(6, 44, 65, 0.08);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 20px;
}

.social-proof-band .rating-line .stars {
  color: #F5A623;
  font-size: 18px;
  letter-spacing: 1px;
}

.social-proof-band .rating-line .score {
  color: var(--headings-color);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.social-proof-band .rating-line .count {
  border-left: 1px solid rgba(6, 44, 65, 0.15);
  color: var(--text-color);
  font-size: 14px;
  font-weight: 600;
  padding-left: 12px;
}

@media (max-width: 575.98px) {
  .social-proof-band .rating-line {
    padding: 9px 16px;
  }

  .social-proof-band .rating-line .count {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- Section rhythm (tablet and up) ----------
 * Neighbouring sections each contribute their own padding, so pt-120 + pb-120
 * put 240px of empty space at every boundary -- more than a third of a laptop
 * screen. Tighten the scale so the page reads as a sequence rather than a set
 * of separated slides. Phones keep the smaller scale set further up.
 */

@media (min-width: 768px) {
  .pt-120 { padding-top: 90px !important; }
  .pb-120 { padding-bottom: 90px !important; }
  .pt-100 { padding-top: 80px !important; }
  .pb-100 { padding-bottom: 80px !important; }
  .pt-90  { padding-top: 70px !important; }
  .pb-90  { padding-bottom: 70px !important; }
  .pb-70  { padding-bottom: 55px !important; }
}

/* The nav no longer carries a Book an Appointment item, so the sticky bar
   needs the CTA the main header has. */
.sticky-header .nav-outer {
  align-items: center;
  display: flex;
  gap: 24px;
  margin-left: auto;
}

/* Logo and CTA are different widths, so centring the nav in the space left
   over between them pushed it against the button. Pin it to the middle of the
   bar instead, the way the main header reads. */
/* 1300px is where the 855px nav still clears the button once it is centred on
   the bar; below that it keeps the normal flow layout instead of overlapping */
@media (min-width: 1300px) {
  .sticky-header .inner-container {
    position: relative;
  }

  /* the template makes .nav-outer the containing block, which would centre the
     nav inside the button instead of the bar */
  .sticky-header .nav-outer {
    position: static;
  }

  .sticky-header .nav-outer .main-menu {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    /* absolute positioning shrinks the box to the space right of the 50% mark,
       which wrapped the nav onto a second line below the bar */
    width: max-content;
  }

  .sticky-header .nav-outer .main-menu .navigation {
    flex-wrap: nowrap;
  }

  /* 20px + 30px line + 20px = 70px in a 60px bar, so the links hung over both
     edges */
  .sticky-header .main-menu .navigation > li {
    padding: 15px 0;
  }
}

/* the template gives .btn-title a 54px line-height, which stretched the
   button to the full height of the bar -- the main header resets it the same
   way */
.sticky-header .sticky-cta {
  flex: none;
  padding: 9px 20px;
}

.sticky-header .sticky-cta .btn-title {
  line-height: normal;
}

@media (max-width: 1023.98px) {
  .sticky-header .sticky-cta {
    display: none;
  }
}

/* ---------- Footer contact block ----------
 * The address and phone moved under the logo, into .about-widget. The
 * template only paints them white inside .contact-widget, so they were dark
 * navy text on the dark navy footer; and .about-widget .image carries a
 * 140px bottom margin meant for a column with nothing beneath it.
 */
.footer-style-one .about-widget .list-one .phone,
.footer-style-one .about-widget .list-one .text {
  color: var(--theme-color-white);
}

.footer-style-one .about-widget .list-one .phone {
  display: block;
}

.footer-style-one .about-widget .image {
  margin-bottom: 30px;
}

/* ---------- Services slider controls ----------
 * Dots and arrows do the same job, so stacking them as two centred rows above
 * the CTA made three competing clusters. One row -- arrow, dots, arrow -- then
 * clear space before the button that leaves the section.
 */
.service-controls {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 34px;
}

.service-section .service-pagination {
  position: static;
  width: auto;
}

.service-section .service-pagination .swiper-pagination-bullet {
  background-color: var(--theme-color1);
  height: 8px;
  margin: 0 4px;
  opacity: 0.25;
  transition: all 300ms ease;
  width: 8px;
}

.service-section .service-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.service-nav-btn {
  align-items: center;
  background-color: var(--theme-color-white);
  /* a pagination row with a dozen dots squeezed these into ellipses */
  flex: none;
  border: 1px solid rgba(var(--theme-color1-rgb), 0.25);
  border-radius: 50%;
  color: var(--theme-color1);
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  transition: all 300ms ease;
  width: 40px;
}

.service-nav-btn:hover,
.service-nav-btn:focus-visible {
  background-color: var(--theme-color1);
  border-color: var(--theme-color1);
  color: var(--theme-color-white);
}

.service-nav-btn.swiper-button-disabled {
  cursor: default;
  opacity: 0.35;
}


/* ---------- Mobile pass ---------- */

/* Search is a rare need on a five-page service site; a tap-to-call is not.
   The icon swaps for a call button on phones. */
.header-call {
  align-items: center;
  background-color: var(--theme-color1);
  border-radius: 50%;
  color: var(--theme-color-white);
  display: none;
  height: 42px;
  justify-content: center;
  margin-left: 14px;
  width: 42px;
}

.header-call i {
  color: var(--theme-color-white);
  font-size: 16px;
}

/* invert on hover: white circle, blue handset */
.header-call:hover,
.header-call:focus-visible {
  background-color: var(--theme-color-white);
  box-shadow: inset 0 0 0 1px var(--theme-color1);
}

.header-call:hover i,
.header-call:focus-visible i {
  color: var(--theme-color1);
}

@media (max-width: 1023.98px) {
  .header-call {
    display: flex;
    margin-left: 0;
  }

  .header-style-one .header-lower .outer-box .ui-btn-outer {
    display: none;
  }

  /* with the search and the appointment button gone, the 20px flex gap plus
     the call's own margin left the handset and the burger drifting apart */
  .header-style-one .header-lower .outer-box {
    gap: 10px;
  }
}

@media (max-width: 767.98px) {
  /* the opening sentence repeats what the headline just said */
  .banner-section .content-column .banner-lead .lead-intro {
    display: none;
  }

  /* the call block was as tall as the hero button stack put together */
  .call-cta {
    padding: 10px 18px;
  }

  .call-cta .label {
    font-size: 11px;
  }

  .call-cta .number {
    font-size: 20px;
  }

  /* stars first and centred so the rating reads as a badge */
  .social-proof-band .band-inner {
    text-align: center;
  }

  .social-proof-band .rating-line {
    justify-content: center;
  }

  .social-proof-band .band-title {
    margin-top: 14px;
  }

  /* the three step cards turn into three walls of text on a phone; the number
     and the step name carry the meaning */
  .steps-section .step-block .inner-box .text {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  /* Service areas already carries a call button in the header and the hero, and
     the section's job here is the area list, not another phone number */
  .service-areas-section .call-cta {
    display: none;
  }

  /* CTA offer: the form is the point of the section on a phone, so the copy
     goes and the call sits under the form rather than above it */
  .cta-offer-section .cta-content .text {
    display: none;
  }

  .cta-offer-section .row {
    display: flex;
    flex-direction: column;
  }

  .cta-offer-section .row > .col-xl-6,
  .cta-offer-section .cta-content {
    display: contents;
  }

  /* display:contents drops the column, and with it the 15px gutter that keeps
     every other section off the screen edge */
  .cta-offer-section .row {
    margin-left: 0;
    margin-right: 0;
  }

  .cta-offer-section .cta-content .title,
  .cta-offer-section .cta-content .image,
  .cta-offer-section .cta-form-box,
  .cta-offer-section .cta-content .call-cta {
    padding-left: 15px;
    padding-right: 15px;
  }

  .cta-offer-section .cta-content .title { order: 1; }
  .cta-offer-section .cta-content .image { order: 2; }
  .cta-offer-section .cta-form-box { order: 3; }
  .cta-offer-section .cta-content .call-cta {
    margin-top: 24px;
    order: 4;
  }
}

/* Why Choose Us as an accordion on phones and tablets: each panel is moved
   inside its own row by the script, so it needs room there. */
.why-tabs--stacked .why-tab-list li {
  display: block;
}

.why-tabs--stacked .why-panel {
  padding: 0 0 22px;
}

.why-tabs--stacked .why-panel .image {
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.why-tabs--stacked .why-panel .image img {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  position: static;
  width: 100%;
}

.why-tabs--stacked .why-panels {
  display: none;
}

/* One control strip for every slider, same shape as the services one */
.slider-controls {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 34px;
}

/* Swiper's dynamic bullets slide a short window of dots with transforms, so
   this cannot be a flex row -- it keeps the default inline layout and only
   restyles the dots themselves. */
.slider-controls .swiper-pagination {
  position: static;
  width: auto;
}

.slider-controls .swiper-pagination-bullet {
  background-color: var(--theme-color1);
  height: 8px;
  margin: 0 4px;
  opacity: 0.25;
  transition: all 300ms ease;
  width: 8px;
}

.slider-controls .swiper-pagination-bullet-active {
  opacity: 1;
}

/* the sticky bar is shorter than the main header, so the call button follows it */
@media (max-width: 1023.98px) {
  .sticky-header .header-call {
    height: 36px;
    margin-left: 10px;
    width: 36px;
  }

  .sticky-header .header-call i {
    font-size: 14px;
  }

  /* the sticky bar's own 24px flex gap sat on top of the button's margin, and
     the burger carries a 20px margin of its own */
  .sticky-header .nav-outer {
    gap: 10px;
  }

  .sticky-header .header-call {
    margin-left: 0;
  }

  .sticky-header .mobile-nav-toggler {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  /* the call block ran the full width while the button below hugged its text,
     so the pair looked mismatched */
  .banner-section .content-column .banner-actions {
    align-items: center;
  }

  .banner-section .content-column .banner-actions .call-cta,
  .banner-section .content-column .banner-actions .theme-btn {
    width: 250px;
  }

  /* at a fixed width the centred content left a white sliver to the right of
     the arrow; the icon belongs flush against the pill's end */
  .banner-section .content-column .banner-actions .theme-btn {
    justify-content: space-between;
    padding-right: 0;
  }

  /* the band's badge and heading are centred, so the button should be too */
  .social-proof-band .band-inner {
    align-items: center;
    flex-direction: column;
  }

  .social-proof-band .band-inner .theme-btn {
    align-self: center;
  }
}

@media (max-width: 767.98px) {
  /* 60px of section-title margin on top of the slider left the cards floating
     away from the copy that introduces them */
  .service-section .sec-title,
  .problems-section .sec-title,
  .at-work-section .sec-title,
  .brands-section .sec-title,
  .reviews-section .sec-title,
  .steps-section .sec-title,
  .sp-why-section .sec-title,
  .service-areas-section .sec-title,
  .faq-section .sec-title {
    margin-bottom: 28px !important;
  }
}

@media (max-width: 767.98px) {
  /* twelve review dots plus two buttons is more than a phone row can hold */
  .slider-controls,
  .service-controls {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
  }

  .slider-controls .swiper-pagination,
  .service-section .service-pagination {
    max-width: 150px;
  }
}

@media (max-width: 767.98px) {
  /* the scroll-to-top button sits over the right edge of this line */
  .footer-bottom .copyright-text {
    line-height: 1.7;
    padding: 0 12px;
  }
}

@media (max-width: 767.98px) {
  /* same treatment as the home hero: the call block ran full width while the
     button hugged its text */
  .services-hero-actions {
    align-items: center;
  }

  .services-hero-actions .call-cta,
  .services-hero-actions .theme-btn {
    width: 250px;
  }

  .services-hero-actions .theme-btn {
    justify-content: space-between;
    padding-right: 0;
  }
}

@media (max-width: 767.98px) {
  /* the hero photo sits between the headline and the copy, and at 4:3 it
     pushed them far enough apart that the block stopped reading as one unit */
  .services-hero-image img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767.98px) {
  /* Service page titles are broken onto two short lines (Refrigerator /
     Repair Service), and at the clamp's 32px floor each line filled barely
     half the width, so the heading read as thin. Only the forced-break titles
     get the larger size -- location heroes are long sentences and would grow
     into a wall of text. */
  .services-hero-title.title:has(br) {
    font-size: 38px;
    line-height: 1.15;
  }
}

@media (max-width: 767.98px) {
  /* 15px of side margin leaves text almost touching the bezel on a phone;
     22px gives the content room to breathe without losing line length */
  .auto-container,
  .xl-container,
  .container-fluid {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* the CTA children stand in for the column that display:contents removed */
  .cta-offer-section .cta-content .title,
  .cta-offer-section .cta-content .image,
  .cta-offer-section .cta-form-box,
  .cta-offer-section .cta-content .call-cta {
    padding-left: 0;
    padding-right: 0;
  }

  .cta-offer-section .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Swiper's dynamic-bullet CSS sets overflow and font-size but not nowrap, so
   the dots still wrapped; a fixed window keeps them on one line. */
.slider-controls .swiper-pagination-bullets-dynamic,
.service-section .service-pagination.swiper-pagination-bullets-dynamic {
  white-space: nowrap;
}

/* Swiper centres the dynamic strip with left:50% and translateX(-50%), which
   is right for its absolute default but drags the dots 56px left -- onto the
   prev arrow -- now that they sit in our flex row. Its selector is more
   specific, so this has to be forced. */
.slider-controls .swiper-pagination-bullets-dynamic,
.service-section .service-pagination.swiper-pagination-bullets-dynamic {
  /* Swiper slides the window by transforming the bullets; the transform on
     this element is only the -50% centring meant for its absolute default,
     which drags the strip sideways inside our flex row. */
  left: auto !important;
  transform: none !important;
}

/* Five-dot window: the strip slides under a fixed-width mask so the active
   dot stays in the middle. */
.slider-controls .swiper-pagination,
.service-section .service-pagination {
  overflow: hidden;
  white-space: nowrap;
  /* exactly five 16px steps, so the mask never slices a dot in half */
  width: 80px;
}

.slider-controls .swiper-pagination-bullet,
.service-section .service-pagination .swiper-pagination-bullet {
  transition: margin-left 300ms ease, opacity 300ms ease;
}

.slider-controls .swiper-pagination-bullet.is-near,
.service-section .service-pagination .swiper-pagination-bullet.is-near {
  opacity: 0.15;
}

@media (max-width: 767.98px) {
  /* "Explore All Appliance Repair Services" is 373px on a 331px column, and
     the pill has nowrap, so it ran off the right edge */
  .theme-btn.btn-style-three {
    font-size: 14px;
    max-width: 100%;
    padding-left: 18px;
  }

  .theme-btn.btn-style-three .btn-title {
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  /* WOW.js decides an element is on screen from offsetTop + clientHeight, and
     both are 0 for the display:contents box above -- so isVisible() is only
     true while pageYOffset is 0. Land on the page already scrolled (a reload
     part-way down, a back navigation, an anchor jump) and the reveal never
     fires: the heading, van photo and call button stay visibility:hidden and
     the section is a tall blank gap above the form. Its inline style has to
     be beaten, hence !important. */
  .cta-offer-section .cta-content {
    visibility: visible !important;
    animation: none !important;
  }
}

/* The 60px was headroom for Swiper's own absolutely positioned pagination.
   The dots and arrows now sit in their own row underneath, so it was left as
   dead space: 96px from the last photo to the controls, against 46px on the
   service and brand sliders. */
.reviews-slider,
.at-work-slider {
  padding-bottom: 10px;
}

/* The hero H1 was 3.6vw -- 46px at a 1280 viewport, against the 50px section
   headings on the same page. The page's own heading came out smaller than its
   subheads, which is what made it read as thin. The tighter tracking is what
   type this size needs to stop looking loose. */
.services-hero-title.title {
  font-size: clamp(32px, 4.2vw, 58px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

@media (min-width: 1200px) {
  /* Service titles are two deliberately short lines (Refrigerator / Repair
     Service) and looked stranded at the shared size, so they take the room
     those short lines leave. Excluded: the forced-break titles that are full
     phrases -- they would wrap and lose their own line structure. */
  .services-hero-title.title:has(br):not(.services-hero-title--long) {
    font-size: clamp(48px, 4.6vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1.06;
  }
}

/* Contact and Book an Appointment break a full phrase across two lines rather
   than two short ones, so the larger shared size wraps "Need Appliance
   Repair?" and turns their two lines into three. They keep the old scale.
   Only where the hero is two columns -- below that the line has the full
   width and the mobile rule for forced-break titles should still win. */
@media (min-width: 1200px) {
  .services-hero-title.title.services-hero-title--long {
    font-size: clamp(32px, 3.6vw, 52px);
  }
}

@media (min-width: 768px) {
  /* The call block ran to a 41px number and a 106px-tall card: louder than
     the h2 beside it and more than twice the height of the button next to it.
     These are the sizes the CTA-offer and service-detail variants already
     used, so the block now reads the same everywhere it appears. */
  .call-cta {
    padding: 12px 28px;
  }

  .call-cta .label {
    font-size: 17px;
  }

  .call-cta .number {
    font-size: clamp(28px, 2.6vw, 38px);
  }
}

/* The review source now carries Google's mark, so the label and the logo need
   to sit on one baseline. */
.review-card .author .source {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.review-card .author .source img {
  height: 16px;
  width: 16px;
}

/* ---------- Footer links, contact block and location strip ---------- */

/* The template's a:hover sets `color: inherit`, which in the footer is the
   column's own dark navy -- the label disappeared into the background. */
.footer-style-one .footer-widget .list a:hover,
.footer-style-one .footer-widget .user-links a:hover,
.footer-style-one .about-widget .phone:hover,
.footer-style-one .footer-locations-list a:hover {
  color: var(--theme-color-white);
}

/* Address and phone as icon + value rather than a heading above each: the
   headings pushed this column far below the three link columns beside it. */
.footer-style-one .footer-contact {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-style-one .footer-contact li {
  align-items: start;
  color: var(--theme-color-white);
  display: grid;
  gap: 12px;
  grid-template-columns: 16px 1fr;
  line-height: 1.6;
}

.footer-style-one .footer-contact i {
  color: var(--theme-color1);
  font-size: 14px;
  line-height: inherit;
}

.footer-style-one .footer-contact .phone,
.footer-style-one .footer-contact .text {
  color: var(--theme-color-white);
}

.footer-locations {
  border-top: 1px solid rgba(var(--theme-color-white-rgb), 0.12);
  margin-top: 50px;
  padding-top: 26px;
}

.footer-locations-toggle {
  background: none;
  border: 0;
  color: var(--theme-color-white);
  font-family: var(--heading-font-family);
  font-size: 17px;
  font-weight: 700;
  padding: 0;
}

.footer-locations-toggle .accordion-icon {
  font-size: 12px;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.footer-locations-toggle[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.footer-locations-list {
  columns: 4;
  column-gap: 30px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.footer-locations-list li {
  break-inside: avoid;
  margin-bottom: 10px;
}

.footer-locations-list a {
  color: var(--theme-color1);
}

@media (max-width: 991.98px) {
  .footer-locations-list {
    columns: 2;
  }
}

/* ---------- Service Areas menu ----------
 * 22 city pages in one column would run off the bottom of the screen.
 */
@media (min-width: 1200px) {
  .main-menu .navigation > li > ul.areas-menu {
    column-count: 3;
    column-gap: 0;
    width: 660px;
  }

  .main-menu .navigation > li > ul.areas-menu > li {
    break-inside: avoid;
    width: 100%;
  }
}

/* Two maps on the contact pages: the shop address and the area it covers.
   Side by side above tablet, stacked below. */
.contact-maps {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}

@media (min-width: 992px) {
  .contact-maps {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-maps .contact-map {
  margin: 0;
  position: relative;
}

.contact-maps .contact-map iframe {
  height: 400px;
}

@media (max-width: 767.98px) {
  .contact-maps .contact-map iframe {
    height: 300px;
  }
}

/* Section intros were breaking with a single word alone on the last line
   ("...need professional / repair."). Balanced wrapping keeps the lines an
   even length, so the last one never ends up an orphan. */
.sec-title .text {
  text-wrap: balance;
}

/* A reviewer's own Google profile picture where we have it. The initials stay
   underneath, so a photo that is missing or fails to load leaves the same
   lettered circle every other card uses rather than an empty ring. */
.review-card .author .avatar.has-photo {
  overflow: hidden;
  position: relative;
}

.review-card .author .avatar.has-photo img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.review-card .author .avatar.has-photo img[src=""],
.review-card .author .avatar.has-photo img:not([src]) {
  display: none;
}

/* The icons sat high beside their text: a 14px icon with line-height 1.6 gets
   a 22.4px line box against the 25.6px of the 16px text, both pinned to the
   top, and the envelope glyph is short and wide besides. Each icon now gets
   exactly one text line of height and is centred inside it, so it lines up
   with a single-line value and with the first line of the address. */
.footer-style-one .footer-contact i {
  align-items: center;
  display: flex;
  height: 25.6px;
  justify-content: center;
  line-height: 1;
}

/* ---------- Appointment request form (CTA section) ----------
 * Our own form in place of the LeadConnector embed. Scoped to .ca-form: the
 * template's .contact-form styles are built for dark sections -- white
 * labels, translucent fields -- and would vanish on this white card.
 */
.ca-form {
  position: relative;
}

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

@media (min-width: 768px) {
  .ca-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ca-field--wide {
    grid-column: 1 / -1;
  }
}

.ca-field label {
  color: var(--headings-color);
  display: block;
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ca-field label span {
  color: var(--theme-color1);
}

.ca-field input,
.ca-field select,
.ca-field textarea {
  background-color: var(--theme-color-white);
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  color: var(--headings-color);
  display: block;
  font-size: 15px;
  height: 52px;
  line-height: 1.4;
  padding: 0 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.ca-field textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
}

.ca-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 40px;
}

.ca-field input::placeholder,
.ca-field textarea::placeholder {
  color: #8a94a3;
}

.ca-field input:focus,
.ca-field select:focus,
.ca-field textarea:focus {
  border-color: var(--theme-color1);
  box-shadow: 0 0 0 3px rgba(0, 134, 201, 0.15);
  outline: none;
}

.ca-field [aria-invalid="true"] {
  border-color: #d64545;
}

/* the honeypot: out of sight and out of the tab order */
.ca-hp {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.ca-form .ca-submit {
  justify-content: center;
  margin-top: 24px;
  width: 100%;
}

.ca-form .ca-submit[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.ca-status {
  font-size: 15px;
  line-height: 1.6;
  margin: 14px 0 0;
}

.ca-status:empty {
  display: none;
}

.ca-status.is-error {
  color: #c0392b;
}

.ca-status.is-success {
  color: #1e7a4f;
  font-weight: 600;
}

/* once sent, the thank-you message stands in for the fields */
.ca-form.is-sent .ca-form-grid,
.ca-form.is-sent .ca-submit {
  display: none;
}

/* The home and 404 headlines were a div and an h3, so neither page had an h1.
   Now they are h1s, and the template's element rules for headings (margin,
   colour, weight, position: relative) would otherwise restyle them; these pin
   the values they had before, so only the tag changes. position stays static
   so the highlight boxes behind the spans keep their positioning context. */
.banner-section .content-column h1.banner-title {
  color: var(--theme-color-white);
  font-weight: 600;
  margin: 0;
  position: static;
}

.error-page__inner h1.error-page__sub-title {
  font-weight: 700;
}

@media (min-width: 1200px) {
  /* The photo used to fill whatever height the form card left over. With the
     taller custom form that came to less than its 240px floor, so the van lost
     its roof and wheels and the left column still overran the card by
     55-68px. The photo now keeps a 16:9 frame, which always shows 443px of
     the 1400px source, centred on the van so it sits whole with even room
     above and below. The card stretches to the left column instead, the
     message box taking the extra height, so both columns end on one line;
     if the card is ever the taller one, the photo grows to meet it. */
  .cta-offer-section .cta-content .image {
    flex: 1 0 auto;
    min-height: 0;
  }

  .cta-offer-section .cta-content .image img {
    aspect-ratio: 16 / 9;
    object-position: center 64%;
  }

  .cta-offer-section .cta-form-box {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .cta-offer-section .ca-form {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .cta-offer-section .ca-form-grid {
    flex: 1;
    grid-template-rows: auto auto auto 1fr;
  }

  .cta-offer-section .ca-form-grid .ca-field:last-child {
    display: flex;
    flex-direction: column;
  }

  .cta-offer-section .ca-form-grid .ca-field:last-child textarea {
    flex: 1;
  }
}

/* Get Started is full width, so the template's centred label + icon pair
   left the arrow circle floating mid-button, 179px short of the right end.
   On this button only, the circle sits flush at the right end the way it
   does on every content-width button of this style (it is 56px, the
   button's own height), and equal 56px padding either side keeps the label
   at the true centre. The icon's rotation and hover stay the template's. */
.ca-form .ca-submit {
  padding-left: 56px;
  padding-right: 56px;
  position: relative;
}

.ca-form .ca-submit .icon {
  position: absolute;
  right: 0;
  top: 0;
}

/* With the circle out of flow the button took its height from the label
   alone, 54px, and the 56px circle overhung it by a pixel top and bottom.
   Held at the 56px it had before. */
.ca-form .ca-submit {
  min-height: 56px;
}

@media (max-width: 767.98px) {
  /* The rule that strips the old column gutter from the CTA's children also
     took the form card's own side padding, so on phones the fields ran into
     the card's border: 22px above and below, nothing at the sides. The card
     gets 22px all round, the page's own gutter, so the inset inside the card
     matches the one at the edge of the screen. */
  .cta-offer-section .cta-form-box {
    padding: 22px;
  }
}

@media (max-width: 767.98px) {
  /* Phone footer, one rhythm for every divider. The location strip sat
     50px + 26px below the Policies row with a 17px, content-width toggle,
     so its chevron hugged the text and the gap read as a stray extra line;
     the first divider touched the email above it. The strip now reads as a
     fourth accordion row: full width, chevron at the right, same padding,
     and 18px of space before every divider, the gap the accordion rows
     already leave. */
  .footer-style-one .about-widget .footer-contact {
    margin-bottom: 18px;
  }

  .footer-locations {
    margin-top: 0;
    padding-top: 0;
  }

  .footer-locations-toggle {
    align-items: center;
    display: flex;
    font-size: 20px;
    justify-content: space-between;
    /* the accordion titles' 28.33px line, so the row is the same height */
    line-height: 1.4167;
    padding: 16px 2px 0;
    text-align: left;
    width: 100%;
  }

  .footer-locations-toggle .accordion-icon {
    font-size: 13px;
    margin-left: 0;
  }

  .footer-style-one .widgets-section {
    padding-bottom: 18px;
  }
}

.footer-maps {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
}

/* On a wide screen the address column is taller than the three lists beside
   it, which left a band of empty footer under them and pushed the maps below
   everything. The row becomes a grid there: the address spans both rows, the
   lists take the first, and the maps fill the band under them -- 300px wide at
   405, 735 and 1065, the same left edges as Services, Resources and Policies.
   The 15px padding is what the columns themselves carry, so the edges line up. */
@media (min-width: 992px) {
  .main-footer .widgets-section .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* the columns already carry 45px under them, which is the spacing the
       rest of the footer uses */
    row-gap: 0;
  }

  .main-footer .widgets-section .footer-column {
    flex: none;
    max-width: none;
    width: auto;
  }

  .main-footer .widgets-section .footer-column:first-child {
    grid-row: 1 / span 2;
  }

  .main-footer .widgets-section .footer-maps {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 0;
    /* the lists are indented inside their columns, so the maps start where
       their headings do rather than at the column edge: 15px of column
       padding plus the indent the template gives a links-widget */
    padding: 0 15px 0 115px;
  }

  .main-footer .widgets-section .footer-maps iframe {
    height: 118px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-footer .widgets-section .footer-maps {
    padding-left: 85px;
  }
}

.footer-maps figure {
  border-radius: 18px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.footer-maps iframe {
  border: 0;
  display: block;
  height: 130px;
  width: 100%;
}

@media (max-width: 991.98px) {
  .footer-maps {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .footer-maps {
    gap: 14px;
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .footer-maps iframe {
    height: 160px;
  }
}

/* ---------- Google rating pill (hero) ----------
 * Sits between the headline and the paragraph under it, on the home hero and
 * on the service-page heroes that set $sp_rating_html.
 */
.hero-rating {
  align-items: center;
  background: var(--theme-color-white);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(var(--theme-color2-rgb), 0.18);
  color: var(--theme-color1);
  display: inline-flex;
  font-family: var(--heading-font-family);
  font-size: 16px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: -0.01em;
  margin: 22px 0 0;
  padding: 9px 20px;
}

.hero-rating i {
  color: #f5b93f;
  font-size: 15px;
}

/* in the service hero the paragraph follows it, so the gap goes underneath */
.services-hero-content .hero-rating {
  margin: 0 0 18px;
}

@media (max-width: 767.98px) {
  .hero-rating {
    font-size: 14px;
    margin-top: 18px;
    padding: 8px 16px;
  }

  .services-hero-content .hero-rating {
    margin: 0 0 14px;
  }
}

/* Five stars read as one mark, so they sit tight together and keep the pill's
   gap before the score. */
.hero-rating .stars {
  color: #f5b93f;
  display: inline-flex;
  gap: 3px;
}

.hero-rating .stars i {
  font-size: 14px;
}

/* ---------- Rating row in the service hero ----------
 * Mobile stacks title, image, copy -- with the pill inside the copy it read
 * below the photo. It is its own grid row now, between the headline and the
 * photo. :has keeps the row out of the heroes that set no rating, which
 * would otherwise carry an empty row and its gap.
 */
.services-hero-grid .hero-rating {
  grid-area: rating;
  justify-self: start;
  margin: 0;
}

.services-hero-grid:has(.hero-rating) {
  grid-template-areas: "title" "rating" "image" "content";
}

@media (min-width: 1200px) {
  .services-hero-grid:has(.hero-rating) {
    grid-template-areas: "title image" "rating image" "content image";
    grid-template-rows: auto auto 1fr;
  }

  .services-hero-grid .hero-rating {
    margin: 20px 0 22px;
  }
}

/* ---------- Fixed call/booking bar (phones) ----------
 * The two actions that matter on a phone stay within thumb reach on every
 * page. The wrapper gets bottom padding so the bar never covers the end of
 * the footer, and the scroll-to-top button moves above it.
 */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 767.98px) {
  .mobile-cta-bar {
    background: var(--theme-color-white);
    bottom: 0;
    box-shadow: 0 -6px 24px rgba(var(--theme-color2-rgb), 0.14);
    display: flex;
    gap: 10px;
    left: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 999;
  }

  .mobile-cta {
    align-items: center;
    border-radius: 999px;
    display: flex;
    flex: 1;
    font-family: var(--heading-font-family);
    font-size: 15px;
    font-weight: 700;
    gap: 8px;
    height: 48px;
    justify-content: center;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .mobile-cta--call {
    border: 2px solid #0077b3;
    color: #0077b3;
  }

  .mobile-cta--book {
    background-color: #0077b3;
    color: var(--theme-color-white);
  }

  .mobile-cta i {
    font-size: 15px;
  }

  .page-wrapper {
    padding-bottom: 78px;
  }

  .scroll-to-top {
    bottom: 92px !important;
  }
}

/* Three maps in the contact section too: three across on a wide screen, and
   on tablets the two-up grid keeps its shape with the third spanning the row
   rather than sitting in a half-empty one. */
@media (min-width: 1200px) {
  .contact-maps {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-maps .contact-map iframe {
    height: 340px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .contact-maps .contact-map:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* Once the form is sent the card is otherwise empty, and the thank-you was
   sitting small in the top-left corner of it, easy to miss. It now stands in
   the middle of the card, at a size worth reading, behind a tick. */
.ca-form.is-sent {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.ca-form.is-sent .ca-status {
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
  max-width: 24em;
  text-align: center;
}

/* the number gets a line of its own, big enough to read from across the room
   and tappable on a phone */
.ca-form.is-sent .ca-status-text { display: block; }

.ca-form.is-sent .ca-status-sooner {
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin-top: 22px;
  opacity: 0.75;
}

.ca-form.is-sent .ca-status-call {
  color: inherit;
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 4px;
  text-decoration: none;
}

.ca-form.is-sent .ca-status-call:hover,
.ca-form.is-sent .ca-status-call:focus-visible { text-decoration: underline; }

.ca-form.is-sent .ca-status.is-success::before {
  align-items: center;
  background: #1e7a4f;
  border-radius: 50%;
  color: #fff;
  content: "\2713";
  display: flex;
  font-size: 30px;
  height: 58px;
  justify-content: center;
  margin: 0 auto 20px;
  width: 58px;
}

@media (max-width: 575.98px) {
  .ca-form.is-sent .ca-status { font-size: 18px; }
  .ca-form.is-sent .ca-status-sooner { margin-top: 18px; }
  .ca-form.is-sent .ca-status-call { font-size: 26px; }
  .ca-form.is-sent .ca-status.is-success::before {
    font-size: 26px;
    height: 50px;
    margin-bottom: 16px;
    width: 50px;
  }
}