/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com/
Description: Child theme for GeneratePress. Add custom styles here without editing the parent theme.
Author: Site Administrator
Author URI: https://generatepress.com/
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* Add your custom CSS below. */
/* Fonts (Fraunces + Plus Jakarta Sans) now load from function.php. No @import here, it made the page slow. */

/* Home page sections. Paste this whole file into the child theme style.css (keep the theme header comment at the very top). */

/* One left/right gap for every home section. Change --cs-pad-x and all sections follow.
   Section backgrounds alternate after the hero: light blue, white, light blue, white. */
:root {
  --cs-pad-x: 72px;
}

@media (max-width: 1024px) {
  :root {
    --cs-pad-x: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --cs-pad-x: 16px;
  }
}


/* Hero banner. Banner photo is the Elementor container background.
   Replace it in Elementor: hero container → Style → Background.
   This file keeps the left navy fade, type, and mobile scroller. */

.cs-hero.e-con {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  --min-height: 420px !important;
  --flex-direction: column !important;
  --justify-content: center !important;
  --align-items: flex-start !important;
  --padding-top: 36px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 28px !important;
  --padding-left: var(--cs-pad-x) !important;
  min-height: 420px;
  padding: 36px var(--cs-pad-x) 28px;
  background-color: #01162a;
  background-image: url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1600&q=70");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.cs-hero.e-con::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    #01162a 0%,
    #01162a 28%,
    rgba(1, 22, 42, 0.78) 44%,
    rgba(1, 22, 42, 0.28) 60%,
    rgba(1, 22, 42, 0) 76%
  ) !important;
}

.cs-hero.e-con > .e-con,
.cs-hero.e-con > .elementor-element {
  position: relative;
  z-index: 2;
}

.cs-hero-copy.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  background: transparent;
  --width: 100% !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-hero .elementor-heading-title,
.cs-hero .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-eyebrow .elementor-heading-title {
  margin: 0 0 10px;
  color: #f3f7f8 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.cs-title .elementor-heading-title {
  margin: 0 0 12px;
  max-width: 16em;
  color: #ffffff !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  font-weight: 600 !important;
  font-optical-sizing: auto;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

.cs-title .elementor-heading-title .cs-accent {
  color: #00a39c !important;
}

.cs-sub {
  max-width: 380px;
}

.cs-sub .elementor-widget-container,
.cs-sub p {
  margin: 0 0 18px;
  color: #c9d4dc !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.cs-actions.e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  --flex-direction: row !important;
  --align-items: center !important;
  --justify-content: flex-start !important;
  --flex-wrap: wrap !important;
  --gap: 12px 12px !important;
  --row-gap: 12px !important;
  --column-gap: 12px !important;
  --margin-bottom: 16px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
  background: transparent;
}

.cs-btn-quote .elementor-button,
.cs-btn-wa .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 999px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.cs-btn-quote .elementor-button {
  background-color: #00a39c !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 12px 20px !important;
}

.cs-btn-quote .elementor-button:hover,
.cs-btn-quote .elementor-button:focus-visible {
  background-color: #008f89 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 163, 156, 0.35);
}

.cs-btn-wa .elementor-button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  padding: 12px 20px 12px 18px !important;
}

.cs-btn-wa .elementor-button:hover,
.cs-btn-wa .elementor-button:focus-visible {
  background-color: #ffffff !important;
  color: #061c30 !important;
  border-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.cs-btn-wa .elementor-button:hover .elementor-button-icon,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon,
.cs-btn-wa .elementor-button:hover .elementor-button-icon i,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon i,
.cs-btn-wa .elementor-button:hover .elementor-button-icon svg,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon svg,
.cs-btn-wa .elementor-button:hover .elementor-button-icon svg path,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon svg path {
  color: #061c30 !important;
  fill: #061c30 !important;
}

.cs-btn-quote .elementor-button-icon,
.cs-btn-wa .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-btn-quote .elementor-button:hover .elementor-button-icon,
.cs-btn-wa .elementor-button:hover .elementor-button-icon,
.cs-btn-quote .elementor-button:focus-visible .elementor-button-icon,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon {
  transform: translateX(5px);
}

.cs-trust .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-trust .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  color: #e7eef2;
  transition: transform 0.3s ease;
}

.cs-trust .elementor-icon-list-item:hover {
  transform: translateY(-2px);
}

.cs-trust .elementor-icon-list-text {
  color: #e7eef2 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.cs-trust .elementor-icon-list-icon {
  color: #e7eef2;
  font-size: 14px;
  line-height: 1;
}

.cs-trust .elementor-icon-list-icon i,
.cs-trust .elementor-icon-list-icon svg {
  width: 14px;
  height: 14px;
  color: #e7eef2;
  fill: currentColor;
}

.cs-trust .elementor-icon-list-item:first-child .elementor-icon-list-icon,
.cs-trust .elementor-icon-list-item:first-child .elementor-icon-list-icon i,
.cs-trust .elementor-icon-list-item:first-child .elementor-icon-list-icon svg {
  color: #f5c14a;
  fill: #f5c14a;
}

@media (max-width: 1024px) {
  .cs-hero.e-con {
    --min-height: 400px !important;
    --padding-top: 32px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 26px !important;
    --padding-left: var(--cs-pad-x) !important;
    min-height: 400px;
    padding: 32px var(--cs-pad-x) 26px;
  }
}

@media (max-width: 767px) {
  .cs-hero.e-con {
    --min-height: 0px !important;
    --justify-content: center !important;
    --align-items: stretch !important;
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 22px !important;
    --padding-left: var(--cs-pad-x) !important;
    min-height: 0;
    justify-content: center;
    align-items: stretch;
    padding: 28px var(--cs-pad-x) 22px;
    background-position: center center !important;
  }

  .cs-hero.e-con::before {
    background: linear-gradient(
      180deg,
      rgba(1, 22, 42, 0.72) 0%,
      rgba(1, 22, 42, 0.9) 38%,
      #01162a 72%
    ) !important;
  }

  .cs-hero-copy.e-con {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .cs-hero .elementor-widget {
    margin-bottom: 0 !important;
    width: 100%;
  }

  .cs-eyebrow .elementor-heading-title {
    margin: 0 0 8px;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  .cs-title .elementor-heading-title {
    max-width: none;
    margin: 0 0 10px;
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .cs-sub {
    max-width: none;
  }

  .cs-sub .elementor-widget-container,
  .cs-sub p {
    margin: 0 0 16px;
    font-size: 14px !important;
  }

  .cs-actions.e-con {
    --flex-direction: column !important;
    --align-items: stretch !important;
    --flex-wrap: nowrap !important;
    --gap: 10px 10px !important;
    --row-gap: 10px !important;
    --column-gap: 10px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 0 16px;
  }

  .cs-btn-quote,
  .cs-btn-wa,
  .cs-btn-quote .elementor-widget-container,
  .cs-btn-wa .elementor-widget-container,
  .cs-btn-quote .elementor-button-wrapper,
  .cs-btn-wa .elementor-button-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  .cs-btn-quote .elementor-button,
  .cs-btn-wa .elementor-button {
    width: 100% !important;
    min-height: 52px;
    justify-content: center;
  }

  .elementor-widget-icon-list.cs-trust {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .elementor-widget-icon-list.cs-trust .elementor-widget-container {
    overflow: hidden;
    max-width: 100%;
  }

  .elementor-widget-icon-list.cs-trust .elementor-icon-list-items,
  .elementor-widget-icon-list.cs-trust .elementor-icon-list-items.elementor-inline-items {
    display: flex !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 20px 6px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .elementor-widget-icon-list.cs-trust .elementor-icon-list-items::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .elementor-widget-icon-list.cs-trust .elementor-icon-list-item,
  .elementor-widget-icon-list.cs-trust .elementor-inline-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .cs-title .elementor-heading-title {
    font-size: 26px !important;
  }
}


/* Services. Photos sit on each card image widget.
   Swap a photo in Elementor: click the image → choose another file.
   Mobile shows one full card and 15% of the next, then scrolls sideways. */

.cs-services.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 40px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x) 40px;
}

.cs-services-head.e-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 0 0 22px;
  background: transparent;
  --flex-direction: row !important;
  --align-items: center !important;
  --justify-content: space-between !important;
  --flex-wrap: nowrap !important;
  --gap: 20px 20px !important;
  --margin-bottom: 22px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-services-intro.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: 640px;
  min-width: 0;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-services .elementor-heading-title,
.cs-services .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-services-kicker .elementor-heading-title {
  margin: 0 0 6px;
  color: #6a767e !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-services-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.cs-view-all .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px !important;
  border: 1px solid #d5dee4 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.cs-view-all .elementor-button i,
.cs-view-all .elementor-button svg,
.cs-view-all .elementor-button-icon {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-view-all .elementor-button:hover,
.cs-view-all .elementor-button:focus-visible {
  border-color: #00a39c !important;
  color: #ffffff !important;
  background: #00a39c !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 163, 156, 0.28);
}

.cs-view-all .elementor-button:hover i,
.cs-view-all .elementor-button:hover svg,
.cs-view-all .elementor-button:hover .elementor-button-icon,
.cs-view-all .elementor-button:focus-visible i,
.cs-view-all .elementor-button:focus-visible svg,
.cs-view-all .elementor-button:focus-visible .elementor-button-icon {
  transform: translateX(5px);
}

.cs-services-track.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 14px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --gap: 14px 14px !important;
  --column-gap: 14px !important;
  --row-gap: 14px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 2px 0 8px;
}

.cs-card.e-con {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto;
  overflow: visible;
  background: #ffffff !important;
  border: 1px solid #e4eef0;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --width: auto !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-card-photo {
  margin: 0 !important;
  line-height: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.cs-card-photo .elementor-widget-container,
.cs-card-photo img {
  width: 100% !important;
  height: 128px !important;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  display: block;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-card-body.e-con {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100%;
  min-height: 0;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --padding-top: 0px !important;
  --padding-right: 14px !important;
  --padding-bottom: 14px !important;
  --padding-left: 14px !important;
  padding: 0 14px 14px;
}

.cs-card-icon {
  position: relative;
  z-index: 2;
  margin: -21px 0 8px !important;
}

.cs-card-icon .elementor-icon-wrapper {
  line-height: 0;
  text-align: left;
}

.cs-card-icon .elementor-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e7f6f4;
  color: #00a39c;
  font-size: 16px;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.4s ease, color 0.4s ease;
}

.cs-card-icon .elementor-icon i,
.cs-card-icon .elementor-icon svg {
  width: 16px;
  height: 16px;
  color: #00a39c;
  fill: #00a39c;
}

.cs-card-name .elementor-heading-title {
  margin: 0 0 6px;
  min-height: 2.5em;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

.cs-card-desc .elementor-widget-container,
.cs-card-desc p {
  margin: 0;
  color: #6b7785 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.cs-card-price {
  margin-top: auto !important;
  padding-top: 14px;
}

.cs-card-price p {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.cs-card-price .cs-from {
  color: #8a949c;
  font-size: 12px;
  font-weight: 500;
}

.cs-card-price strong {
  color: #00a39c;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cs-card-link {
  margin-top: 4px !important;
}

.cs-card-link .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #00a39c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none;
  transition: color 0.3s ease, gap 0.3s ease;
}

.cs-card-link .elementor-button-icon,
.cs-card-link .elementor-button i,
.cs-card-link .elementor-button svg {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-card-link .elementor-button:hover,
.cs-card-link .elementor-button:focus-visible {
  color: #008f89 !important;
  background: transparent !important;
  gap: 10px;
}

.cs-card-link .elementor-button:hover .elementor-button-icon,
.cs-card-link .elementor-button:hover i,
.cs-card-link .elementor-button:hover svg,
.cs-card-link .elementor-button:focus-visible .elementor-button-icon,
.cs-card-link .elementor-button:focus-visible i,
.cs-card-link .elementor-button:focus-visible svg {
  transform: translateX(5px);
}

@media (hover: hover) {
  .cs-card.e-con:hover {
    z-index: 3;
    transform: translateY(-10px);
    border-color: #b7e6e2;
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.18);
  }

  .cs-card.e-con:hover .cs-card-photo img,
  .cs-card.e-con:hover .cs-card-photo .elementor-widget-container img {
    transform: scale(1.08);
  }

  .cs-card.e-con:hover .cs-card-icon .elementor-icon {
    background: #00a39c;
    color: #ffffff;
    transform: scale(1.08) rotate(-8deg);
  }

  .cs-card.e-con:hover .cs-card-icon .elementor-icon i,
  .cs-card.e-con:hover .cs-card-icon .elementor-icon svg {
    color: #ffffff;
    fill: #ffffff;
  }
}

@media (max-width: 1100px) {
  .cs-services-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-services-track.e-con {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-services-track.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-services-track > .cs-card.e-con {
    flex: 0 0 calc((100% - 28px) / 2.15) !important;
    width: calc((100% - 28px) / 2.15) !important;
    --width: calc((100% - 28px) / 2.15) !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .cs-services.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 24px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x) 24px;
  }

  .cs-services-head.e-con {
    --flex-direction: column !important;
    --align-items: flex-start !important;
    --justify-content: flex-start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px;
    width: 100%;
    margin: 0 0 16px;
  }

  .cs-services-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-services-track.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding-right: 0;
  }

  .cs-services-track > .cs-card.e-con {
    flex: 0 0 calc((100% - 12px) / 1.15) !important;
    width: calc((100% - 12px) / 1.15) !important;
    --width: calc((100% - 12px) / 1.15) !important;
  }

  .cs-card-photo .elementor-widget-container,
  .cs-card-photo img {
    height: 168px !important;
  }

  .cs-card-name .elementor-heading-title {
    min-height: 0;
    font-size: 18px !important;
  }

  .cs-card-desc .elementor-widget-container,
  .cs-card-desc p {
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card.e-con,
  .cs-card-photo img,
  .cs-card-icon .elementor-icon,
  .cs-view-all .elementor-button,
  .cs-card-link .elementor-button,
  .cs-card-link .elementor-button-icon {
    transition: none !important;
  }

  .cs-services-track.e-con,
  .cs-results-track.e-con,
  .cs-why-grid.e-con,
  .cs-steps-track.e-con,
  .cs-fixes-track.e-con,
  .cs-reviews-track.e-con {
    scroll-behavior: auto;
  }

  .cs-result-card.e-con,
  .cs-ba-handle,
  .cs-why-card.e-con,
  .cs-why-photo.e-con,
  .cs-why-badge.e-con,
  .cs-why-icon .elementor-icon,
  .cs-why-badge-icon .elementor-icon {
    transition: none !important;
    animation: none !important;
  }

  .cs-why-card.e-con,
  .cs-why-photo.e-con,
  .cs-step.e-con,
  .cs-fix.e-con {
    opacity: 1 !important;
  }

  .cs-step.e-con,
  .cs-step-photo img,
  .cs-step-num .elementor-heading-title,
  .cs-steps-cta .elementor-button,
  .cs-steps-cta .elementor-button-icon,
  .cs-fix.e-con,
  .cs-fix-img img,
  .cs-fix-link .elementor-button,
  .cs-fix-link .elementor-button-icon,
  .cs-audience-photo.e-con,
  .cs-audience-btn .elementor-button,
  .cs-audience-btn .elementor-button-icon,
  .cs-review.e-con {
    transition: none !important;
    animation: none !important;
  }
}

/* Results — before / after */

.cs-results.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 40px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x) 40px;
}

.cs-results-head.e-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 0 0 22px;
  background: transparent;
  --flex-direction: row !important;
  --align-items: center !important;
  --justify-content: space-between !important;
  --flex-wrap: nowrap !important;
  --gap: 20px 20px !important;
  --margin-bottom: 22px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-results-intro.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: 640px;
  min-width: 0;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-results .elementor-heading-title {
  margin: 0;
  padding: 0;
}

.cs-results-kicker .elementor-heading-title {
  margin: 0 0 6px;
  color: #6a767e !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-results-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.cs-results-track.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 14px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --gap: 14px 14px !important;
  --column-gap: 14px !important;
  --row-gap: 14px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 12px 0 16px;
}

.cs-result-card.e-con {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e4eef0;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  --flex-direction: column !important;
  --align-items: stretch !important;
  --width: auto !important;
  --padding-top: 14px !important;
  --padding-right: 12px !important;
  --padding-bottom: 12px !important;
  --padding-left: 12px !important;
  padding: 14px 12px 12px;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.cs-result-name .elementor-heading-title {
  margin: 0 0 10px;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.cs-result-ba,
.cs-ba-boot {
  margin: 0 !important;
  width: 100%;
}

.cs-ba-boot {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.cs-ba {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: 12px;
  background: #d5dee3;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}

.cs-ba-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cs-ba-before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 50%;
  overflow: hidden;
  box-shadow: 2px 0 0 #ffffff;
}

.cs-ba-before img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100cqi;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.cs-ba-tag {
  position: absolute;
  bottom: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.cs-ba-tag-before {
  left: 10px;
  background: #0a2a5e;
  color: #ffffff;
}

.cs-ba-tag-after {
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #1c2430;
}

/* button.cs-ba-handle (+ hover/focus/active) so the theme's grey "button" colour can never win */
button.cs-ba-handle,
button.cs-ba-handle:hover,
button.cs-ba-handle:focus,
button.cs-ba-handle:active {
  background: linear-gradient(135deg, #00b4b0 0%, #0a5f86 55%, #0a2a5e 100%);
  color: #ffffff;
  border: 3px solid #ffffff;
}

.cs-ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(135deg, #00b4b0 0%, #0a5f86 55%, #0a2a5e 100%);
  box-shadow: 0 6px 16px rgba(10, 42, 94, 0.35);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  touch-action: none;
}

.cs-ba-handle svg {
  display: block;
}

@media (hover: hover) {
  .cs-result-card.e-con:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: #b7e6e2;
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.16);
  }

  .cs-ba-handle:hover {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 1100px) {
  .cs-results-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-results-track.e-con {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-results-track.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-results-track > .cs-result-card.e-con {
    flex: 0 0 calc((100% - 28px) / 2.15) !important;
    width: calc((100% - 28px) / 2.15) !important;
    --width: calc((100% - 28px) / 2.15) !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .cs-results.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 24px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x) 24px;
  }

  .cs-results-head.e-con {
    --flex-direction: column !important;
    --align-items: flex-start !important;
    --justify-content: flex-start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px;
    width: 100%;
    margin: 0 0 16px;
  }

  .cs-results-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-results-track.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
    width: 100%;
    margin: 0;
  }

  .cs-results-track > .cs-result-card.e-con {
    flex: 0 0 calc((100% - 12px) / 1.15) !important;
    width: calc((100% - 12px) / 1.15) !important;
    --width: calc((100% - 12px) / 1.15) !important;
  }

  .cs-ba {
    height: 210px;
  }
}

/* Why people trust us. Left side is a full banner.
   Swap the photo in Elementor: photo container → Style → Background. */

.cs-why.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 40px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x) 40px;
}

.cs-why-head.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 22px;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 6px 6px !important;
  --margin-bottom: 22px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-why .elementor-heading-title,
.cs-why .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-why-kicker .elementor-heading-title {
  margin: 0 0 6px;
  color: #6a767e !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-why-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.cs-why-body.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 18px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --gap: 18px 18px !important;
  --column-gap: 18px !important;
  --row-gap: 18px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-why-banner.e-con {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 42% !important;
  width: 42% !important;
  max-width: 42%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  border-radius: 18px !important;
  background: #d5e4e6;
  --width: 42% !important;
  --flex-grow: 0 !important;
  --flex-shrink: 0 !important;
  --align-self: stretch !important;
  --min-height: 0px !important;
  --border-radius: 18px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-why-banner.e-con::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 28, 48, 0) 0%, rgba(6, 28, 48, 0.28) 100%);
}

.cs-why-photo.e-con {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  border-radius: inherit;
  background-color: #d5e4e6;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: cs-why-fade 0.6s ease both;
  --width: 100% !important;
  --min-height: 100% !important;
  --position: absolute !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-why-badge.e-con {
  position: absolute !important;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px;
  width: auto !important;
  max-width: calc(100% - 32px);
  margin: 0;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(6, 28, 48, 0.16);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
  --width: auto !important;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --justify-content: flex-start !important;
  --gap: 10px 10px !important;
  --z-index: 2 !important;
  --padding-top: 8px !important;
  --padding-right: 14px !important;
  --padding-bottom: 8px !important;
  --padding-left: 8px !important;
  padding: 8px 14px 8px 8px;
}

.cs-why-badge-icon,
.cs-why-icon {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
  --width: auto !important;
}

.cs-why-badge-icon .elementor-icon-wrapper,
.cs-why-icon .elementor-icon-wrapper {
  line-height: 0;
  text-align: left;
}

.cs-why-badge-icon .elementor-icon,
.cs-why-icon .elementor-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e7f6f4;
  color: #00a39c;
  font-size: 16px;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.4s ease, color 0.4s ease;
}

.cs-why-badge-icon .elementor-icon i,
.cs-why-badge-icon .elementor-icon svg,
.cs-why-icon .elementor-icon i,
.cs-why-icon .elementor-icon svg {
  width: 16px;
  height: 16px;
  color: #00a39c;
  fill: #00a39c;
}

.cs-why-badge-text .elementor-heading-title {
  margin: 0;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.cs-why-grid.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  align-content: flex-start;
  gap: 12px;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: row !important;
  --flex-wrap: wrap !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --align-content: flex-start !important;
  --gap: 12px 12px !important;
  --column-gap: 12px !important;
  --row-gap: 12px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 2px 0 8px;
}

.cs-why-grid > .cs-why-card.e-con {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 calc(50% - 6px) !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px;
  width: calc(50% - 6px) !important;
  min-width: 0 !important;
  max-width: calc(50% - 6px);
  background: #ffffff !important;
  border: 1px solid #e4eef0;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  animation: cs-why-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  --width: calc(50% - 6px) !important;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 12px 12px !important;
  --border-radius: 16px !important;
  --padding-top: 16px !important;
  --padding-right: 16px !important;
  --padding-bottom: 16px !important;
  --padding-left: 16px !important;
  padding: 16px;
}

.cs-why-grid > .cs-why-card.e-con:nth-child(2) { animation-delay: 0.05s; }
.cs-why-grid > .cs-why-card.e-con:nth-child(3) { animation-delay: 0.1s; }
.cs-why-grid > .cs-why-card.e-con:nth-child(4) { animation-delay: 0.15s; }
.cs-why-grid > .cs-why-card.e-con:nth-child(5) { animation-delay: 0.2s; }
.cs-why-grid > .cs-why-card.e-con:nth-child(6) { animation-delay: 0.25s; }

.cs-why-copy.e-con {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 4px 4px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-why-name,
.cs-why-desc,
.cs-why-badge-text,
.cs-why-kicker,
.cs-why-title {
  width: auto !important;
  margin: 0 !important;
}

.cs-why-name .elementor-heading-title {
  margin: 0;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.cs-why-desc .elementor-widget-container,
.cs-why-desc p {
  margin: 0;
  color: #6b7785 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

@keyframes cs-why-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes cs-why-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (hover: hover) {
  .cs-why-banner.e-con:hover .cs-why-photo.e-con {
    transform: scale(1.06);
  }

  .cs-why-banner.e-con:hover .cs-why-badge.e-con {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(6, 28, 48, 0.2);
  }

  .cs-why-card.e-con:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: #b7e6e2;
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.16);
  }

  .cs-why-card.e-con:hover .cs-why-icon .elementor-icon {
    background: #00a39c;
    color: #ffffff;
    transform: scale(1.08) rotate(-8deg);
  }

  .cs-why-card.e-con:hover .cs-why-icon .elementor-icon i,
  .cs-why-card.e-con:hover .cs-why-icon .elementor-icon svg {
    color: #ffffff;
    fill: #ffffff;
  }
}

@media (max-width: 1100px) {
  .cs-why-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-why-body.e-con {
    --flex-direction: column !important;
    flex-direction: column !important;
    gap: 16px;
  }

  .cs-why-banner.e-con {
    flex: none !important;
    width: 100% !important;
    max-width: none;
    height: 320px;
    min-height: 320px;
    --width: 100% !important;
    --min-height: 320px !important;
  }

  .cs-why-grid.e-con {
    flex: none !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    --flex-wrap: nowrap !important;
    --width: 100% !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-why-grid.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-why-grid > .cs-why-card.e-con {
    flex: 0 0 calc((100% - 28px) / 2.15) !important;
    width: calc((100% - 28px) / 2.15) !important;
    max-width: none;
    scroll-snap-align: start;
    --width: calc((100% - 28px) / 2.15) !important;
  }
}

@media (max-width: 767px) {
  .cs-why.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 24px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x) 24px;
  }

  .cs-why-head.e-con {
    width: 100%;
    margin: 0 0 16px;
  }

  .cs-why-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-why-body.e-con {
    --gap: 14px 14px !important;
    gap: 14px;
  }

  .cs-why-banner.e-con {
    width: 100% !important;
    height: 240px;
    min-height: 240px;
    margin-right: 0;
    --width: 100% !important;
    --min-height: 240px !important;
  }

  .cs-why-badge-text .elementor-heading-title {
    white-space: normal;
  }

  .cs-why-grid.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
    width: 100%;
    margin: 0;
  }

  .cs-why-grid > .cs-why-card.e-con {
    flex: 0 0 calc((100% - 12px) / 1.15) !important;
    width: calc((100% - 12px) / 1.15) !important;
    --width: calc((100% - 12px) / 1.15) !important;
  }

  .cs-why-name .elementor-heading-title {
    font-size: 16px !important;
  }

  .cs-why-desc .elementor-widget-container,
  .cs-why-desc p {
    font-size: 14px !important;
  }
}

/* How it works. Swap each photo in Elementor: click the image → choose another file. */

.cs-steps.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 40px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x) 40px;
}

.cs-steps-head.e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 0 26px;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: wrap !important;
  --align-items: center !important;
  --justify-content: space-between !important;
  --gap: 16px 16px !important;
  --margin-bottom: 26px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-steps-intro.e-con {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  min-width: 0;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --width: auto !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-steps .elementor-heading-title,
.cs-steps .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-steps-kicker .elementor-heading-title {
  margin: 0 0 6px;
  color: #6a767e !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-steps-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.cs-steps-cta {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

.cs-steps-cta .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #00a39c !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease, box-shadow 0.35s ease;
}

.cs-steps-cta .elementor-button-icon,
.cs-steps-cta .elementor-button i,
.cs-steps-cta .elementor-button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-steps-track.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 28px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --gap: 28px 28px !important;
  --column-gap: 28px !important;
  --row-gap: 28px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 2px 0 8px;
}

.cs-steps-track > .cs-step.e-con {
  position: relative;
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e4eef0;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  animation: cs-why-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --border-radius: 16px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-steps-track > .cs-step.e-con:nth-child(2) { animation-delay: 0.06s; }
.cs-steps-track > .cs-step.e-con:nth-child(3) { animation-delay: 0.12s; }
.cs-steps-track > .cs-step.e-con:nth-child(4) { animation-delay: 0.18s; }

.cs-steps-track > .cs-step.e-con:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 78px;
  right: -18px;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-top: 2px solid #00a39c;
  border-right: 2px solid #00a39c;
  transform: translate(50%, -50%) rotate(45deg);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.cs-step-photo.e-con {
  position: relative !important;
  overflow: hidden;
  width: calc(100% + 2px) !important;
  max-width: none !important;
  margin: -1px -1px 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: #d5e4e6;
  --width: calc(100% + 2px) !important;
  --border-radius: 16px 16px 0 0 !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-step-img {
  margin: 0 !important;
  line-height: 0;
}

.cs-step-img .elementor-widget-container,
.cs-step-img img {
  width: 100% !important;
  height: 156px !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-step-num {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: auto !important;
  margin: 0 !important;
  --width: auto !important;
}

.cs-step-num .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(6, 28, 48, 0.16);
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.cs-step-copy.e-con {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px;
  width: 100%;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 4px 4px !important;
  --padding-top: 14px !important;
  --padding-right: 14px !important;
  --padding-bottom: 14px !important;
  --padding-left: 14px !important;
  padding: 14px;
}

.cs-step-name,
.cs-step-desc,
.cs-steps-kicker,
.cs-steps-title {
  width: auto !important;
  margin: 0 !important;
}

.cs-step-name .elementor-heading-title {
  margin: 0;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.cs-step-desc .elementor-widget-container,
.cs-step-desc p {
  margin: 0;
  color: #6b7785 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

@media (hover: hover) {
  .cs-steps-cta .elementor-button:hover,
  .cs-steps-cta .elementor-button:focus-visible {
    background: #008f89 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 163, 156, 0.28);
  }

  .cs-steps-cta .elementor-button:hover .elementor-button-icon,
  .cs-steps-cta .elementor-button:hover i,
  .cs-steps-cta .elementor-button:hover svg,
  .cs-steps-cta .elementor-button:focus-visible .elementor-button-icon,
  .cs-steps-cta .elementor-button:focus-visible i,
  .cs-steps-cta .elementor-button:focus-visible svg {
    transform: translateX(5px);
  }

  .cs-step.e-con:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: #b7e6e2;
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.16);
  }

  .cs-step.e-con:hover .cs-step-img img,
  .cs-step.e-con:hover .cs-step-img .elementor-widget-container img {
    transform: scale(1.06);
  }

  .cs-step.e-con:hover .cs-step-num .elementor-heading-title {
    background: #00a39c;
    color: #ffffff !important;
    transform: scale(1.06);
  }

  .cs-step.e-con:hover::after {
    border-color: #008f89;
    transform: translate(70%, -50%) rotate(45deg);
  }
}

@media (max-width: 1100px) {
  .cs-steps-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-steps-track.e-con {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    --gap: 14px 14px !important;
    --column-gap: 14px !important;
    gap: 14px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-steps-track.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-steps-track > .cs-step.e-con {
    flex: 0 0 calc((100% - 28px) / 2.15) !important;
    width: calc((100% - 28px) / 2.15) !important;
    --width: calc((100% - 28px) / 2.15) !important;
    scroll-snap-align: start;
  }

  .cs-steps-track > .cs-step.e-con:not(:last-child)::after {
    content: none;
  }
}

@media (max-width: 767px) {
  .cs-steps.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 24px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x) 24px;
  }

  .cs-steps-head.e-con {
    --flex-direction: column !important;
    --align-items: flex-start !important;
    --justify-content: flex-start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100%;
    margin: 0 0 16px;
  }

  .cs-steps-intro.e-con {
    flex: none !important;
    width: 100% !important;
  }

  .cs-steps-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-steps-cta {
    width: 100% !important;
  }

  .cs-steps-cta .elementor-button {
    width: 100%;
    justify-content: center;
  }

  .cs-steps-track.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
  }

  .cs-steps-track > .cs-step.e-con {
    flex: 0 0 calc((100% - 12px) / 1.15) !important;
    width: calc((100% - 12px) / 1.15) !important;
    --width: calc((100% - 12px) / 1.15) !important;
  }

  .cs-step-img .elementor-widget-container,
  .cs-step-img img {
    height: 168px !important;
  }

  .cs-step-name .elementor-heading-title {
    font-size: 17px !important;
  }

  .cs-step-desc .elementor-widget-container,
  .cs-step-desc p {
    font-size: 14px !important;
  }
}

/* Surface problems. Swap each photo in Elementor: click the image → choose another file. */

.cs-fixes.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 40px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x) 40px;
}

.cs-fixes-head.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 22px;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 6px 6px !important;
  --margin-bottom: 22px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-fixes .elementor-heading-title,
.cs-fixes .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-fixes-kicker .elementor-heading-title {
  margin: 0 0 6px;
  color: #6a767e !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-fixes-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.cs-fixes-track.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 14px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --justify-content: flex-start !important;
  --gap: 14px 14px !important;
  --column-gap: 14px !important;
  --row-gap: 14px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 2px 0 8px;
}

.cs-fixes-track > .cs-fix.e-con {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e4eef0;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  animation: cs-why-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --border-radius: 16px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-fixes-track > .cs-fix.e-con:nth-child(2) { animation-delay: 0.05s; }
.cs-fixes-track > .cs-fix.e-con:nth-child(3) { animation-delay: 0.1s; }
.cs-fixes-track > .cs-fix.e-con:nth-child(4) { animation-delay: 0.15s; }
.cs-fixes-track > .cs-fix.e-con:nth-child(5) { animation-delay: 0.2s; }
.cs-fixes-track > .cs-fix.e-con:nth-child(6) { animation-delay: 0.25s; }

.cs-fix-img {
  margin: -1px -1px 0 !important;
  width: calc(100% + 2px) !important;
  max-width: none !important;
  line-height: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.cs-fix-img .elementor-widget-container,
.cs-fix-img img {
  width: 100% !important;
  height: 118px !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-fix-copy.e-con {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px;
  width: 100%;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 4px 4px !important;
  --padding-top: 12px !important;
  --padding-right: 14px !important;
  --padding-bottom: 14px !important;
  --padding-left: 14px !important;
  padding: 12px 14px 14px;
}

.cs-fix-name,
.cs-fix-desc,
.cs-fixes-kicker,
.cs-fixes-title,
.cs-fix-link {
  width: auto !important;
  margin: 0 !important;
}

.cs-fix-name .elementor-heading-title {
  margin: 0;
  min-height: 2.6em;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.cs-fix-desc .elementor-widget-container,
.cs-fix-desc p {
  margin: 0;
  color: #6b7785 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.cs-fix-link {
  margin-top: auto !important;
  padding-top: 8px;
}

.cs-fix-link .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #00a39c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: color 0.3s ease, gap 0.3s ease;
}

.cs-fix-link .elementor-button-icon,
.cs-fix-link .elementor-button i,
.cs-fix-link .elementor-button svg {
  color: #00a39c !important;
  fill: #00a39c !important;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
  .cs-fix.e-con:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: #b7e6e2;
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.16);
  }

  .cs-fix.e-con:hover .cs-fix-img img,
  .cs-fix.e-con:hover .cs-fix-img .elementor-widget-container img {
    transform: scale(1.06);
  }

  .cs-fix-link .elementor-button:hover,
  .cs-fix-link .elementor-button:focus-visible {
    color: #008f89 !important;
    background: transparent !important;
    gap: 10px;
  }

  .cs-fix-link .elementor-button:hover .elementor-button-icon,
  .cs-fix-link .elementor-button:hover i,
  .cs-fix-link .elementor-button:hover svg,
  .cs-fix-link .elementor-button:focus-visible .elementor-button-icon,
  .cs-fix-link .elementor-button:focus-visible i,
  .cs-fix-link .elementor-button:focus-visible svg {
    color: #008f89 !important;
    fill: #008f89 !important;
    transform: translateX(4px);
  }
}

@media (max-width: 1100px) {
  .cs-fixes-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-fixes-track.e-con {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-fixes-track.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-fixes-track > .cs-fix.e-con {
    flex: 0 0 calc((100% - 28px) / 2.15) !important;
    width: calc((100% - 28px) / 2.15) !important;
    --width: calc((100% - 28px) / 2.15) !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .cs-fixes.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 24px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x) 24px;
  }

  .cs-fixes-head.e-con {
    width: 100%;
    margin: 0 0 16px;
  }

  .cs-fixes-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-fixes-track.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
  }

  .cs-fixes-track > .cs-fix.e-con {
    flex: 0 0 calc((100% - 12px) / 1.15) !important;
    width: calc((100% - 12px) / 1.15) !important;
    --width: calc((100% - 12px) / 1.15) !important;
  }

  .cs-fix-img .elementor-widget-container,
  .cs-fix-img img {
    height: 168px !important;
  }

  .cs-fix-name .elementor-heading-title {
    min-height: 0;
    font-size: 18px !important;
  }

  .cs-fix-desc .elementor-widget-container,
  .cs-fix-desc p {
    font-size: 14px !important;
  }
}

/* Residential and commercial. Each panel has its own photo.
   Swap a photo in Elementor: photo container → Style → Background.
   The left fade is the same on both, like the hero banner. */

.cs-audiences.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 28px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 40px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 28px var(--cs-pad-x) 40px;
}

.cs-audiences-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 16px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --gap: 16px 16px !important;
  --column-gap: 16px !important;
  --row-gap: 16px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-audiences-row > .cs-audience.e-con {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 240px;
  border-radius: 18px !important;
  background: #d5e4e6;
  --width: auto !important;
  --flex-direction: column !important;
  --justify-content: center !important;
  --align-items: flex-start !important;
  --min-height: 240px !important;
  --border-radius: 18px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-audience-photo.e-con {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  background-color: #d5e4e6;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-index: 0 !important;
  --width: 100% !important;
  --min-height: 100% !important;
  --position: absolute !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-audience.e-con::before,
.cs-audience.e-con::after,
.cs-audience-photo.e-con::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 2 !important;
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    #f8efe6 0%,
    rgba(248, 239, 230, 0.98) 26%,
    rgba(248, 239, 230, 0.9) 40%,
    rgba(248, 239, 230, 0.42) 58%,
    rgba(248, 239, 230, 0) 78%
  ) !important;
}

.cs-audience-copy.e-con {
  position: relative;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px;
  width: auto !important;
  max-width: 320px;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 6px 6px !important;
  --padding-top: 28px !important;
  --padding-right: 20px !important;
  --padding-bottom: 28px !important;
  --padding-left: 28px !important;
  padding: 28px 20px 28px 28px;
}

.cs-audiences .elementor-heading-title,
.cs-audiences .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-audience-kicker,
.cs-audience-title,
.cs-audience-desc,
.cs-audience-btn {
  width: auto !important;
  margin: 0 !important;
}

.cs-audience-kicker .elementor-heading-title {
  margin: 0;
  color: #00a39c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.cs-audience-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

.cs-audience-desc .elementor-widget-container,
.cs-audience-desc p {
  margin: 2px 0 0;
  max-width: 280px;
  color: #24303a !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.cs-audience-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 10px;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #00a39c !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.cs-audience-btn .elementor-button-icon,
.cs-audience-btn .elementor-button i,
.cs-audience-btn .elementor-button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  .cs-audience.e-con:hover .cs-audience-photo.e-con {
    transform: scale(1.06);
  }

  .cs-audience-btn .elementor-button:hover,
  .cs-audience-btn .elementor-button:focus-visible {
    background: #008f89 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 163, 156, 0.28);
  }

  .cs-audience-btn .elementor-button:hover .elementor-button-icon,
  .cs-audience-btn .elementor-button:hover i,
  .cs-audience-btn .elementor-button:hover svg,
  .cs-audience-btn .elementor-button:focus-visible .elementor-button-icon {
    transform: translateX(4px);
  }
}

@media (max-width: 767px) {
  .cs-audiences.e-con {
    --padding-top: 20px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 24px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 20px var(--cs-pad-x) 24px;
  }

  .cs-audiences-row.e-con {
    --flex-direction: column !important;
    flex-direction: column !important;
    gap: 14px;
  }

  .cs-audiences-row > .cs-audience.e-con {
    flex: none !important;
    width: 100% !important;
    min-height: 220px;
    --width: 100% !important;
    --min-height: 220px !important;
  }

  .cs-audience-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-audience-copy.e-con {
    max-width: 100%;
    --padding-top: 22px !important;
    --padding-right: 18px !important;
    --padding-bottom: 22px !important;
    --padding-left: 18px !important;
    padding: 22px 18px;
  }
}

/* Customer reviews. Background is the dark theme navy. */

.cs-reviews.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #061c30 !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 48px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x);
}

.cs-reviews-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 28px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 28px 28px !important;
  --column-gap: 28px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-reviews-intro.e-con {
  display: flex !important;
  flex: 0 0 340px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  width: 340px !important;
  min-width: 0;
  background: transparent;
  --width: 340px !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 8px 8px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-reviews .elementor-heading-title,
.cs-reviews .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-reviews-title .elementor-heading-title {
  margin: 0;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.cs-reviews-sub .elementor-heading-title {
  margin: 0;
  color: #00a39c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.cs-reviews-google.e-con {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
  margin-top: 8px;
  background: transparent;
  --flex-direction: row !important;
  --align-items: center !important;
  --width: auto !important;
  --gap: 8px 8px !important;
  --padding-top: 8px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 8px 0 0;
}

.cs-google-word,
.cs-google-stars,
.cs-google-score,
.cs-review-name,
.cs-review-stars,
.cs-review-meta,
.cs-review-quote {
  width: auto !important;
  margin: 0 !important;
}

.cs-google-word p {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.cs-google-word .g1,
.cs-google-word .g4 { color: #4285f4; }
.cs-google-word .g2,
.cs-google-word .g6 { color: #ea4335; }
.cs-google-word .g3 { color: #fbbc05; }
.cs-google-word .g5 { color: #34a853; }

.cs-google-stars p,
.cs-review-stars p {
  margin: 0;
  color: #f5b942 !important;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.cs-google-score .elementor-heading-title {
  margin: 0;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.cs-reviews-track.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 14px;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --gap: 14px 14px !important;
  --column-gap: 14px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 4px 0;
}

.cs-reviews-track > .cs-review.e-con {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
  width: auto !important;
  min-width: 0 !important;
  background: #0e3148 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --gap: 8px 8px !important;
  --border-radius: 16px !important;
  --padding-top: 16px !important;
  --padding-right: 16px !important;
  --padding-bottom: 16px !important;
  --padding-left: 16px !important;
  padding: 16px;
}

.cs-review-top.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 10px 10px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-review-avatar {
  flex: 0 0 40px;
  width: 40px !important;
  margin: 0 !important;
  --width: 40px !important;
}

.cs-review-avatar .elementor-widget-container,
.cs-review-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cs-review-name {
  flex: 1 1 auto;
  min-width: 0;
}

.cs-review-name .elementor-heading-title {
  margin: 0;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.cs-review-stars {
  flex: 0 0 auto;
  margin-left: auto !important;
}

.cs-review-quote .elementor-widget-container,
.cs-review-quote p {
  margin: 0;
  color: rgba(231, 238, 242, 0.88) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.cs-review-meta .elementor-heading-title {
  margin: 4px 0 0;
  color: #9bb0c0 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

@media (hover: hover) {
  .cs-review.e-con:hover {
    z-index: 2;
    transform: translateY(-6px);
    border-color: rgba(0, 163, 156, 0.45);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
  }
}

@media (max-width: 1100px) {
  .cs-reviews-row.e-con {
    --flex-direction: column !important;
    --align-items: flex-start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .cs-reviews-intro.e-con {
    flex: none !important;
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-reviews-track.e-con {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    --width: 100% !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-reviews-track.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-reviews-track > .cs-review.e-con {
    flex: 0 0 calc((100% - 28px) / 2.15) !important;
    width: calc((100% - 28px) / 2.15) !important;
    --width: calc((100% - 28px) / 2.15) !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .cs-reviews.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 28px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x);
  }

  .cs-reviews-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-reviews-track.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
  }

  .cs-reviews-track > .cs-review.e-con {
    flex: 0 0 calc((100% - 12px) / 1.15) !important;
    width: calc((100% - 12px) / 1.15) !important;
    --width: calc((100% - 12px) / 1.15) !important;
  }

  .cs-review-quote .elementor-widget-container,
  .cs-review-quote p {
    font-size: 14px !important;
  }
}

/* Areas we serve. Three cards: info, map, WhatsApp help. */

.cs-areas.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 48px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x);
}

.cs-areas-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 20px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --gap: 20px 20px !important;
  --column-gap: 20px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-areas-row > .cs-areas-card.e-con {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden;
  background: #ffffff !important;
  border: 1px solid #e4eef0;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
  --width: auto !important;
  --border-radius: 16px !important;
}

.cs-areas-row > .cs-areas-map.e-con {
  flex: 1.15 1 0 !important;
  flex-direction: column !important;
  --flex-direction: column !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-areas-row > .cs-areas-info.e-con {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 10px 10px !important;
  --padding-top: 22px !important;
  --padding-right: 22px !important;
  --padding-bottom: 22px !important;
  --padding-left: 22px !important;
  padding: 22px;
}

.cs-areas-row > .cs-areas-cta.e-con {
  position: relative;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 210px;
  gap: 8px;
  background: linear-gradient(135deg, #e2f6f5 0%, #f2fbfb 100%) !important;
  --flex-direction: column !important;
  --flex-wrap: nowrap !important;
  --align-items: flex-start !important;
  --gap: 8px 8px !important;
  --padding-top: 22px !important;
  --padding-right: 22px !important;
  --padding-bottom: 22px !important;
  --padding-left: 22px !important;
  padding: 22px;
}

.cs-areas-kicker .elementor-heading-title {
  margin: 0;
  color: #6a767e !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
}

.cs-areas-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.cs-areas-desc .elementor-widget-container,
.cs-areas-desc p {
  margin: 0;
  color: #44525c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.cs-areas-list .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-areas-list .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.cs-areas-list .elementor-icon-list-icon i,
.cs-areas-list .elementor-icon-list-icon svg {
  color: #00a39c !important;
  fill: #00a39c !important;
  font-size: 12px !important;
  width: 12px !important;
}

.cs-areas-list .elementor-icon-list-text {
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-left: 6px !important;
}

.cs-areas-map .elementor-widget-google_maps,
.cs-areas-map .elementor-widget-container,
.cs-areas-map .elementor-custom-embed {
  width: 100%;
  height: 100%;
}

.cs-areas-map iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px;
  border: 0;
}

.cs-areas-cta-copy.e-con {
  position: relative;
  z-index: 2;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 8px;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 8px 8px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
  align-self: stretch;
}

/* text stays clear of the photo; the button sits above it */
.cs-areas-cta-title,
.cs-areas-cta-desc {
  max-width: 60% !important;
}

.cs-areas-cta-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.cs-areas-cta-desc .elementor-widget-container,
.cs-areas-cta-desc p {
  margin: 0;
  color: #44525c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.cs-areas-btn {
  position: relative;
  z-index: 3;
  width: auto !important;
  max-width: 100%;
  margin-top: 6px !important;
}

.cs-areas-btn .elementor-button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #00a39c !important;
  border: 0;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-areas-btn .elementor-button-icon {
  transition: transform 0.3s ease;
}

.cs-areas-btn .elementor-button-icon i,
.cs-areas-btn .elementor-button-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.cs-areas-agent.elementor-widget {
  position: absolute !important;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 130px !important;
  max-width: 130px;
  margin: 0 !important;
  pointer-events: none;
  --width: 130px !important;
}

.cs-areas-agent .elementor-widget-container {
  display: block;
  width: 100%;
  line-height: 0;
}

.cs-areas-agent img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: 170px !important;
  object-fit: cover;
  object-position: center top;
  border-radius: 0 !important;
}

@media (hover: hover) {
  .cs-areas-row > .cs-areas-card.e-con:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.16);
  }

  .cs-areas-btn .elementor-button:hover {
    background: #008f89 !important;
    box-shadow: 0 8px 20px rgba(0, 163, 156, 0.35);
  }

  .cs-areas-btn .elementor-button:hover .elementor-button-icon {
    transform: translateX(4px);
  }
}

@media (max-width: 1100px) {
  .cs-areas-row.e-con {
    flex: none !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 0 14px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-areas-row.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-areas-row > .cs-areas-card.e-con,
  .cs-areas-row > .cs-areas-map.e-con {
    flex: 0 0 calc((100% - 40px) / 2.15) !important;
    width: calc((100% - 40px) / 2.15) !important;
    --width: calc((100% - 40px) / 2.15) !important;
    scroll-snap-align: start;
  }

  /* let a swipe on the map move the row, not the map itself */
  .cs-areas-map iframe {
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .cs-areas.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 28px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x);
  }

  .cs-areas-row.e-con {
    --gap: 12px 12px !important;
    --column-gap: 12px !important;
    gap: 12px;
  }

  /* grid: row 1 = info + map (swipe), row 2 = WhatsApp card, full width, below */
  .cs-areas-row.e-con {
    display: grid !important;
    grid-template-columns: repeat(2, calc((100% - 12px) / 1.15));
    grid-template-rows: auto auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cs-areas-row > .cs-areas-info.e-con,
  .cs-areas-row > .cs-areas-map.e-con {
    grid-row: 1;
    flex: none !important;
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-areas-row > .cs-areas-cta.e-con {
    grid-row: 2;
    grid-column: 1;
    position: sticky;
    left: 0;
    flex: none !important;
    width: calc(100% * 1.15 + 12px) !important;
    max-width: none;
    min-height: 200px;
    scroll-snap-align: none;
    --width: auto !important;
  }

  .cs-areas-agent.elementor-widget {
    width: 140px !important;
    max-width: 140px;
    --width: 140px !important;
  }

  .cs-areas-agent img {
    height: 180px !important;
  }

  .cs-areas-map iframe {
    min-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-areas-row.e-con {
    scroll-behavior: auto;
  }

  .cs-areas-row > .cs-areas-card.e-con,
  .cs-areas-btn .elementor-button,
  .cs-areas-btn .elementor-button-icon {
    transition: none !important;
  }
}

/* FAQ. Left: heading + photo. Middle and right: toggles (all closed on load). */

.cs-faq.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 48px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 48px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 48px var(--cs-pad-x);
}

.cs-faq-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 24px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: flex-start !important;
  --gap: 24px 24px !important;
  --column-gap: 24px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-faq-left.e-con {
  display: flex !important;
  flex: 0 0 28% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
  width: 28% !important;
  min-width: 0 !important;
  background: transparent;
  --width: 28% !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --gap: 10px 10px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-faq-col.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-faq-title .elementor-heading-title {
  margin: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.cs-faq-sub .elementor-widget-container,
.cs-faq-sub p {
  margin: 0;
  color: #44525c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.cs-faq-photo,
.cs-faq-photo .elementor-widget-container {
  width: 100%;
  line-height: 0;
}

.cs-faq-photo img {
  display: block;
  width: 100% !important;
  height: 200px !important;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(14, 23, 32, 0.1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-faq-photo .elementor-widget-container {
  overflow: hidden;
  border-radius: 16px;
}

/* Accordion cards */

.cs-faq-acc .elementor-toggle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-faq-acc .elementor-toggle-item {
  box-sizing: border-box;
  margin: 0 !important;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e4eef0 !important;
  border-left: 3px solid #cfdde2 !important;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(14, 23, 32, 0.07);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.cs-faq-acc .elementor-toggle-item:has(.elementor-tab-title.elementor-active) {
  border-left-color: #00a39c !important;
  box-shadow: 0 10px 24px rgba(0, 163, 156, 0.14);
}

.cs-faq-acc .elementor-tab-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}

.cs-faq-acc .elementor-toggle-title,
.cs-faq-acc .elementor-tab-title a {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.cs-faq-acc .elementor-toggle-icon {
  order: 2;
  flex: 0 0 auto;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #0e1720 !important;
  font-size: 12px;
  text-align: center;
}

.cs-faq-acc .elementor-toggle-icon i,
.cs-faq-acc .elementor-toggle-icon svg {
  color: #0e1720 !important;
  fill: #0e1720 !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

.cs-faq-acc .elementor-tab-title.elementor-active .elementor-toggle-icon i,
.cs-faq-acc .elementor-tab-title.elementor-active .elementor-toggle-icon svg {
  color: #00a39c !important;
  fill: #00a39c !important;
}

.cs-faq-acc .elementor-toggle-icon .elementor-toggle-icon-closed,
.cs-faq-acc .elementor-toggle-icon .elementor-toggle-icon-opened {
  display: inline-block;
  line-height: 1;
}

.cs-faq-acc .elementor-tab-title.elementor-active .elementor-toggle-icon-closed,
.cs-faq-acc .elementor-tab-title:not(.elementor-active) .elementor-toggle-icon-opened {
  display: none !important;
}

.cs-faq-acc .elementor-tab-content {
  margin: 0 !important;
  padding: 0 16px 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: #44525c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.cs-faq-acc .elementor-tab-content p {
  margin: 0;
  color: #44525c !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

@media (hover: hover) {
  .cs-faq-acc .elementor-toggle-item:hover {
    transform: translateY(-2px);
    border-left-color: #00a39c !important;
    box-shadow: 0 12px 26px rgba(0, 163, 156, 0.14);
  }

  .cs-faq-photo:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 1100px) {
  .cs-faq-row.e-con {
    flex-wrap: wrap !important;
    --flex-wrap: wrap !important;
  }

  .cs-faq-left.e-con {
    flex: 0 0 100% !important;
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-faq-col.e-con {
    flex: 1 1 calc(50% - 12px) !important;
  }

  .cs-faq-photo img {
    height: 220px !important;
  }
}

@media (max-width: 767px) {
  .cs-faq.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 28px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x);
  }

  .cs-faq-row.e-con {
    --gap: 14px 14px !important;
    --column-gap: 14px !important;
    gap: 14px;
  }

  .cs-faq-col.e-con {
    flex: 1 1 100% !important;
  }

  .cs-faq-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-faq-photo img {
    height: 200px !important;
  }

  .cs-faq-acc .elementor-toggle-title,
  .cs-faq-acc .elementor-tab-title a {
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-faq-acc .elementor-toggle-item,
  .cs-faq-photo img {
    transition: none !important;
  }
}

/* Ready to see your surfaces restored? Dark call-to-action bar. */

.cs-cta.e-con {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background-color: #061c30 !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 44px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 44px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 44px var(--cs-pad-x);
}

/* navy veil: the banner photo only shows at the two edges */
.cs-cta.e-con::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    rgba(6, 28, 48, 0.5) 0%,
    rgba(6, 28, 48, 0.94) 24%,
    rgba(6, 28, 48, 0.94) 76%,
    rgba(6, 28, 48, 0.5) 100%
  ) !important;
}

.cs-cta-row.e-con {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 32px 32px !important;
  --column-gap: 32px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-cta-main.e-con {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 10px 10px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-cta-kicker .elementor-heading-title {
  margin: 0;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.2 !important;
}

.cs-cta-title .elementor-heading-title {
  margin: 0;
  color: #ffffff !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}

.cs-cta-sub .elementor-widget-container,
.cs-cta-sub p {
  margin: 0;
  color: rgba(231, 238, 242, 0.86) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.cs-cta-sub .cs-accent {
  color: #00a39c;
  font-weight: 600;
}

.cs-cta-actions.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px;
  width: auto !important;
  max-width: 100%;
  margin-top: 8px;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 12px 12px !important;
  --column-gap: 12px !important;
  --padding-top: 4px !important;
  --padding-right: 0px !important;
  --padding-bottom: 8px !important;
  --padding-left: 0px !important;
  padding: 4px 0 8px;
}

.cs-cta-actions > .elementor-widget {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
  --width: auto !important;
}

.cs-cta-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.35s ease;
}

.cs-cta-btn .elementor-button-icon {
  display: inline-flex;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s ease;
}

.cs-cta-btn .elementor-button-icon i,
.cs-cta-btn .elementor-button-icon svg,
.cs-cta-btn .elementor-button-icon path {
  color: #ffffff !important;
  fill: #ffffff !important;
  font-size: 15px;
  transition: color 0.3s ease, fill 0.3s ease;
}

.cs-cta-btn-primary .elementor-button {
  background: #00a39c !important;
  border-color: #00a39c;
  box-shadow: 0 8px 20px rgba(0, 163, 156, 0.3);
}

.cs-cta-btn-wa .elementor-button {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.7);
}

.cs-cta-btn-call .elementor-button {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(0, 163, 156, 0.6);
}

.cs-cta-btn .elementor-button:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Trust list */

.cs-cta-trust.e-con {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: auto !important;
  min-width: 0;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-cta-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-cta-list .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-cta-list .elementor-icon-list-icon i,
.cs-cta-list .elementor-icon-list-icon svg {
  color: rgba(255, 255, 255, 0.92) !important;
  fill: rgba(255, 255, 255, 0.92) !important;
  font-size: 16px !important;
  width: 16px !important;
  transition: color 0.3s ease, fill 0.3s ease;
}

.cs-cta-list .elementor-icon-list-text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-left: 10px !important;
  white-space: nowrap;
}

@keyframes cs-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-16deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-9deg); }
  80% { transform: rotate(6deg); }
}

@media (hover: hover) {
  .cs-cta-btn-primary .elementor-button:hover {
    transform: translateY(-3px);
    background: #00b5ad !important;
    box-shadow: 0 14px 30px rgba(0, 163, 156, 0.45);
  }

  .cs-cta-btn-primary .elementor-button:hover .elementor-button-icon {
    transform: translateX(5px);
  }

  .cs-cta-btn-wa .elementor-button:hover {
    transform: translateY(-3px);
    background: #ffffff !important;
    border-color: #ffffff;
    color: #061c30 !important;
    box-shadow: 0 12px 26px rgba(255, 255, 255, 0.2);
  }

  .cs-cta-btn-wa .elementor-button:hover .elementor-button-icon i,
  .cs-cta-btn-wa .elementor-button:hover .elementor-button-icon svg,
  .cs-cta-btn-wa .elementor-button:hover .elementor-button-icon path,
  .cs-cta-btn-wa .elementor-button:hover .elementor-button-text {
    color: #061c30 !important;
    fill: #061c30 !important;
  }

  .cs-cta-btn-call .elementor-button:hover {
    transform: translateY(-3px);
    background: rgba(0, 163, 156, 0.18) !important;
    border-color: #00a39c;
    box-shadow: 0 12px 26px rgba(0, 163, 156, 0.28);
  }

  .cs-cta-btn-call .elementor-button:hover .elementor-button-icon {
    animation: cs-ring 0.7s ease;
  }

  .cs-cta-list .elementor-icon-list-item:hover {
    transform: translateX(5px);
  }

  .cs-cta-list .elementor-icon-list-item:hover .elementor-icon-list-icon i,
  .cs-cta-list .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
    color: #00a39c !important;
    fill: #00a39c !important;
  }
}

@media (max-width: 1100px) {
  .cs-cta-row.e-con {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px;
    --flex-direction: column !important;
    --align-items: stretch !important;
    --gap: 18px 18px !important;
  }

  .cs-cta-main.e-con,
  .cs-cta-trust.e-con {
    flex: none !important;
    width: 100% !important;
    max-width: 100%;
    --width: 100% !important;
  }

  .cs-cta-actions.e-con,
  .cs-cta-trust.e-con {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  .cs-cta-actions.e-con {
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-cta-actions.e-con::-webkit-scrollbar,
  .cs-cta-trust.e-con::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .cs-cta-actions > .elementor-widget {
    scroll-snap-align: start;
  }

  .cs-cta-list .elementor-icon-list-items {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: max-content;
    padding: 2px 28px 6px 0;
  }

  .cs-cta-list .elementor-icon-list-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
  }
}

@media (max-width: 767px) {
  .cs-cta.e-con {
    --padding-top: 28px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 28px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 28px var(--cs-pad-x);
  }

  .cs-cta.e-con::before {
    background: linear-gradient(180deg, rgba(6, 28, 48, 0.88) 0%, rgba(6, 28, 48, 0.96) 100%) !important;
  }

  .cs-cta-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-cta-sub .elementor-widget-container,
  .cs-cta-sub p {
    font-size: 14px !important;
  }

  /* buttons: smaller, wrap so everything is visible at once (no sideways scroll) */
  .cs-cta-actions.e-con {
    overflow: visible !important;
    flex-wrap: wrap !important;
    gap: 10px;
    -webkit-mask-image: none;
    mask-image: none;
    --flex-wrap: wrap !important;
    --gap: 10px 10px !important;
    --column-gap: 10px !important;
  }

  .cs-cta-actions > .elementor-widget {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  .cs-cta-actions > .cs-cta-btn-call {
    flex: 1 1 100%;
  }

  .cs-cta-btn .elementor-button {
    box-sizing: border-box;
    width: 100%;
    gap: 6px;
    padding: 11px 12px;
    font-size: 13px !important;
  }

  .cs-cta-btn .elementor-button-icon i,
  .cs-cta-btn .elementor-button-icon svg {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-cta-actions.e-con,
  .cs-cta-trust.e-con {
    scroll-behavior: auto;
  }

  .cs-cta-btn .elementor-button,
  .cs-cta-btn .elementor-button-icon,
  .cs-cta-list .elementor-icon-list-item {
    transition: none !important;
    animation: none !important;
  }
}

/* Header + footer (header.php / footer.php). Every selector starts with .csx- so nothing else is affected. */

body.csx-open {
  overflow: hidden;
}

.csx-header,
.csx-header *,
.csx-drawer,
.csx-drawer *,
.csx-footer,
.csx-footer * {
  box-sizing: border-box;
}

/* ---------- Header ---------- */

.csx-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(14, 23, 32, 0.07);
}

.admin-bar .csx-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .csx-header {
    top: 46px;
  }
}

.csx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 14px var(--cs-pad-x, 72px);
}

.csx-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  color: #061c30;
  text-decoration: none;
}

.csx-brand-img {
  display: block;
  width: auto;
  max-width: none;
  height: 74px;
  margin: -12px 0;
  object-fit: contain;
  mix-blend-mode: multiply; /* hides the faint off-white box of the logo file on white */
}

.csx-brand-text {
  white-space: nowrap;
  color: #061c30;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.csx-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.csx-menu,
.csx-footer-menu,
.csx-drawer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-menu li,
.csx-footer-menu li,
.csx-drawer-menu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.csx-menu > li > a,
.csx-footer-menu > li > a {
  position: relative;
  display: block;
  padding: 10px 14px;
  color: #1b3a50;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.3s ease;
}

.csx-menu > li > a::after,
.csx-footer-menu > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: #00a39c;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.csx-menu > li.current-menu-item > a,
.csx-menu > li.current_page_item > a,
.csx-menu > li.current-menu-ancestor > a,
.csx-footer-menu > li.current-menu-item > a {
  color: #00a39c;
}

.csx-menu > li.current-menu-item > a::after,
.csx-menu > li.current_page_item > a::after,
.csx-menu > li.current-menu-ancestor > a::after,
.csx-footer-menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* desktop sub menu (level 2 drops down, level 3 flies out to the side) */
.csx-menu > li.menu-item-has-children > a {
  padding-right: 30px;
}

.csx-menu > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.csx-menu > li.menu-item-has-children > a::after {
  right: 28px;
}

.csx-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: max-content;
  min-width: 240px;
  max-width: 330px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e4eef0;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(14, 23, 32, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.csx-menu .sub-menu .sub-menu {
  top: -9px;
  left: calc(100% - 2px);
  transform: translateX(8px);
}

.csx-menu li:hover > .sub-menu,
.csx-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* last two top items open to the left so the box stays on screen */
.csx-menu > li:nth-last-child(-n + 2) > .sub-menu {
  left: auto;
  right: 0;
}

.csx-menu > li:nth-last-child(-n + 2) .sub-menu .sub-menu {
  left: auto;
  right: calc(100% - 2px);
}

.csx-menu .sub-menu a {
  position: relative;
  display: block;
  padding: 10px 28px 10px 14px;
  border-radius: 10px;
  color: #1b3a50;
  font: 600 13.5px/1.35 "Plus Jakarta Sans", sans-serif;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.csx-menu .sub-menu li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.csx-menu .sub-menu li:hover > a,
.csx-menu .sub-menu li.current-menu-item > a {
  background: #f0f8fa;
  color: #00a39c;
}

/* ---------- Buttons ---------- */

.csx-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

a.csx-btn,
a.csx-btn:visited,
a.csx-btn:focus,
a.csx-btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.csx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, background-position 0.5s ease, box-shadow 0.35s ease;
}

.csx-btn .csx-ico {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.csx-btn--quote {
  background: #00a39c;
  box-shadow: 0 6px 16px rgba(0, 163, 156, 0.28);
}

/* brand gradient from the logo: deep navy -> teal */
.csx-btn--wa {
  background: linear-gradient(120deg, #0a2a5e 0%, #0a5f86 45%, #00a39c 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  box-shadow: 0 6px 16px rgba(10, 42, 94, 0.28);
}

.csx-btn:active {
  transform: scale(0.97);
}

/* ---------- Burger (button.csx-burger beats GeneratePress "button" styles) ---------- */

button.csx-burger,
button.csx-burger:hover,
button.csx-burger:focus,
button.csx-burger:active {
  background: #f0f8fa;
  color: #061c30;
  border: 1px solid #e4eef0;
  box-shadow: none;
}

button.csx-burger {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.csx-burger-line {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: #061c30;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease, width 0.3s ease;
}

.csx-burger-line:nth-child(1) {
  top: 13px;
}

.csx-burger-line:nth-child(2) {
  top: 19px;
  width: 12px;
}

.csx-burger-line:nth-child(3) {
  top: 25px;
}

.csx-open .csx-burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.csx-open .csx-burger-line:nth-child(2) {
  opacity: 0;
}

.csx-open .csx-burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Slide-in drawer (hidden on desktop) ---------- */

.csx-overlay,
.csx-drawer {
  display: none;
}

.csx-drawer-menu {
  display: flex;
  flex-direction: column;
}

.csx-drawer-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #eef4f5;
  color: #0e1720;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, padding-left 0.3s ease;
}

.csx-drawer-menu > li.current-menu-item > a,
.csx-drawer-menu > li.current_page_item > a,
.csx-drawer-menu > li.current-menu-ancestor > a {
  color: #00a39c;
  background: #f0f8fa;
  box-shadow: inset 3px 0 0 #00a39c;
}

.csx-drawer-menu li {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.csx-drawer-menu li > a {
  flex: 1 1 0;
  min-width: 0;
}

.csx-drawer-menu .sub-menu {
  flex: 0 0 100%;
  width: 100%;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: #f7fbfc;
  transition: max-height 0.45s ease;
}

.csx-drawer-menu li.csx-sub-open > .sub-menu {
  max-height: 2400px;
}

.csx-drawer-menu .sub-menu a {
  display: block;
  padding: 13px 14px 13px 40px;
  border-bottom: 1px solid #eef4f5;
  color: #44525c;
  font: 500 14.5px/1.3 "Plus Jakarta Sans", sans-serif;
  text-decoration: none;
}

.csx-drawer-menu .sub-menu .sub-menu {
  background: #eff6f8;
}

.csx-drawer-menu .sub-menu .sub-menu a {
  padding-left: 58px;
  font-size: 14px;
}

.csx-drawer-menu .sub-menu li.current-menu-item > a {
  color: #00a39c;
  font-weight: 600;
}

button.csx-sub-toggle,
button.csx-sub-toggle:hover,
button.csx-sub-toggle:focus,
button.csx-sub-toggle:active {
  background: transparent;
  color: #061c30;
  border: 0;
  box-shadow: none;
}

button.csx-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  margin: 0;
  padding: 0;
  border-left: 1px solid #eef4f5;
  border-bottom: 1px solid #eef4f5;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.csx-sub-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.csx-drawer-menu li.csx-sub-open > .csx-sub-toggle svg {
  transform: rotate(180deg);
}

.csx-drawer-menu li.csx-sub-open > .csx-sub-toggle {
  color: #00a39c;
}

/* ---------- Tablet + mobile ---------- */

@media (max-width: 1024px) {
  /* 3 columns: logo (left) | WhatsApp (center) | hamburger (right) */
  .csx-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .csx-header-inner > .csx-brand {
    justify-self: start;
  }

  .csx-header-inner > .csx-actions {
    justify-self: center;
  }

  button.csx-burger {
    display: block;
    justify-self: end;
  }

  .csx-nav,
  .csx-actions .csx-btn--quote {
    display: none;
  }

  .csx-brand-img {
    height: 62px;
    margin: -10px 0;
  }

  .csx-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1090;
    background: rgba(6, 28, 48, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }

  .csx-open .csx-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }

  .csx-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: min(50vw, 380px);
    min-width: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border-radius: 24px 0 0 24px;
    box-shadow: -24px 0 60px rgba(6, 28, 48, 0.25);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.55s;
  }

  .csx-open .csx-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .csx-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 16px 24px;
    border-bottom: 1px solid #eef4f5;
  }

  .csx-brand--drawer .csx-brand-img {
    height: 60px;
    margin: -10px 0;
  }

  button.csx-drawer-close,
  button.csx-drawer-close:hover,
  button.csx-drawer-close:focus,
  button.csx-drawer-close:active {
    background: #f0f8fa;
    color: #061c30;
    border: 1px solid #e4eef0;
    box-shadow: none;
  }

  button.csx-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .csx-drawer-close svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .csx-drawer-nav {
    flex: 1 1 auto;
    padding: 8px 0;
  }

  /* menu items glide in one after another */
  .csx-drawer-menu > li {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .csx-open .csx-drawer-menu > li {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .csx-open .csx-drawer-menu > li:nth-child(1) { transition-delay: 0.16s; }
  .csx-open .csx-drawer-menu > li:nth-child(2) { transition-delay: 0.22s; }
  .csx-open .csx-drawer-menu > li:nth-child(3) { transition-delay: 0.28s; }
  .csx-open .csx-drawer-menu > li:nth-child(4) { transition-delay: 0.34s; }
  .csx-open .csx-drawer-menu > li:nth-child(5) { transition-delay: 0.4s; }
  .csx-open .csx-drawer-menu > li:nth-child(6) { transition-delay: 0.46s; }
  .csx-open .csx-drawer-menu > li:nth-child(n + 7) { transition-delay: 0.52s; }

  .csx-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 24px 28px;
    border-top: 1px solid #eef4f5;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .csx-open .csx-drawer-actions {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease 0.5s, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s;
  }

  .csx-drawer-actions .csx-btn {
    width: 100%;
    padding: 15px 20px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .csx-header-inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .csx-brand-img {
    height: 54px;
    margin: -9px 0;
  }

  .csx-brand-text {
    font-size: 16px;
  }

  .csx-actions .csx-btn--wa {
    padding: 10px 14px;
    font-size: 12.5px;
  }

  button.csx-burger {
    width: 40px;
    height: 40px;
  }

  .csx-burger-line {
    left: 10px;
  }

  .csx-drawer {
    width: 82vw;
    min-width: 0;
    max-width: 380px;
  }
}

@media (max-width: 380px) {
  .csx-actions .csx-btn--wa {
    padding: 9px 11px;
    gap: 6px;
  }
}

@media (hover: hover) {
  .csx-menu > li:hover > a::before {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .csx-menu > li > a:hover,
  .csx-footer-menu > li > a:hover {
    color: #00a39c;
  }

  .csx-menu > li > a:hover::after,
  .csx-footer-menu > li > a:hover::after {
    transform: scaleX(1);
  }

  a.csx-btn--quote:hover {
    background: #008f89;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 163, 156, 0.38);
  }

  a.csx-btn--wa:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(10, 42, 94, 0.38);
  }

  .csx-btn--quote:hover .csx-ico {
    transform: translateX(4px);
  }

  button.csx-drawer-close:hover {
    transform: rotate(90deg);
  }

  .csx-drawer-menu > li > a:hover {
    color: #00a39c;
    background: #f0f8fa;
    padding-left: 30px;
  }
}

/* ---------- Footer ---------- */

.csx-footer {
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e4eef0;
}

.csx-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 20px var(--cs-pad-x, 72px);
}

.csx-brand--footer .csx-brand-img {
  height: 66px;
  margin: -11px 0;
}

.csx-footer-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.csx-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.csx-footer-menu > li > a {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
}

.csx-footer-menu > li > a::after {
  left: 10px;
  right: 10px;
  bottom: 2px;
}

.csx-footer-social {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-footer-social li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #0e1720;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
}

.csx-footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
}

.csx-footer-copy {
  flex: 0 0 auto;
  margin: 0;
  color: #44525c;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
}

@media (hover: hover) {
  .csx-footer-social a:hover {
    background: #00a39c;
    color: #ffffff;
    transform: translateY(-3px);
  }
}

@media (max-width: 1100px) {
  .csx-footer-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
  }

  .csx-brand--footer {
    order: 1;
  }

  .csx-footer-social {
    order: 2;
  }

  .csx-footer-nav {
    order: 3;
    flex: 1 1 100%;
  }

  .csx-footer-copy {
    order: 4;
    flex: 1 1 100%;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .csx-footer-inner {
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .csx-footer-nav {
    flex: none;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-btn,
  .csx-btn .csx-ico,
  .csx-burger-line,
  .csx-menu > li > a::after,
  .csx-footer-menu > li > a::after,
  .csx-drawer,
  .csx-overlay,
  .csx-drawer-menu > li,
  .csx-drawer-actions,
  .csx-drawer-close,
  .csx-footer-social a {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Full width pages (page.php + body class "cs-full-page"). Elementor layout edge to edge. */

body.cs-full-page #page,
body.cs-full-page .site.grid-container,
body.cs-full-page .site-content,
body.cs-full-page .content-area,
body.cs-full-page .site-main,
body.cs-full-page .cs-page-article,
body.cs-full-page .inside-article,
body.cs-full-page .entry-content {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.cs-full-page .site-content {
  display: block !important;
}

body.cs-full-page .site-main > * {
  margin-bottom: 0 !important;
}

body.cs-full-page .entry-content > .elementor {
  width: 100%;
}

/* sidebar / page title never show on pages */
body.cs-full-page #right-sidebar,
body.cs-full-page #left-sidebar,
body.cs-full-page .sidebar,
body.cs-full-page .entry-header {
  display: none !important;
}

/* no sideways scroll from full-bleed sections */
body.cs-full-page {
  overflow-x: hidden;
}

/* Trust logos. One container, a grid of 9 empty image widgets: 9 across on desktop/tablet, 3 x 3 on mobile. */

.cs-trust.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff !important;
  border-top: 1px solid #e4eef0;
  border-bottom: 1px solid #e4eef0;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 22px !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: 22px !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: 22px var(--cs-pad-x);
}

.cs-trust-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center;
  gap: 16px 24px;
  width: 100% !important;
  background: transparent;
  --gap: 16px 24px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-trust-grid > .cs-trust-logo.elementor-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  min-height: 44px;
  margin: 0 !important;
  --width: 100% !important;
}

.cs-trust-logo .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cs-trust-logo img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 48px;
  object-fit: contain;
}

/* tablet: still 9 across, a little tighter */
@media (max-width: 1024px) {
  .cs-trust-grid.e-con {
    gap: 14px 14px;
    --gap: 14px 14px !important;
  }

  .cs-trust-logo img {
    max-height: 40px;
  }
}

/* mobile: 3 rows of 3 */
@media (max-width: 767px) {
  .cs-trust.e-con {
    --padding-top: 20px !important;
    --padding-right: var(--cs-pad-x) !important;
    --padding-bottom: 20px !important;
    --padding-left: var(--cs-pad-x) !important;
    padding: 20px var(--cs-pad-x);
  }

  .cs-trust-grid.e-con {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 12px;
    --gap: 14px 12px !important;
  }

  .cs-trust-logo img {
    max-height: 36px;
  }
}


/* ==========================================================================
   Polish round 2: more space, readable text, WhatsApp green, faster.
   Keep this block LAST in the file so it wins over the sections above.
   Change the spacing in one place: --cs-sec-y (section top/bottom space).
   ========================================================================== */

:root {
  --cs-sec-y: 88px;
  --cs-head-gap: 40px;
  --cs-wa: #25d366;
  --cs-wa-dark: #1ebe5a;
}

@media (max-width: 1024px) {
  :root {
    --cs-sec-y: 64px;
    --cs-head-gap: 30px;
  }
}

@media (max-width: 767px) {
  :root {
    --cs-sec-y: 48px;
    --cs-head-gap: 24px;
  }
}

/* ---------- Smooth + fast basics ---------- */

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body.cs-full-page {
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sections below the first screen are painted only when you scroll near them. */
body:not(.elementor-editor-active) :is(.cs-services, .cs-results, .cs-why, .cs-steps, .cs-fixes, .cs-audiences, .cs-reviews, .cs-areas, .cs-faq, .cs-cta, .cs-ss, .cs-sf).e-con {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

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

/* ---------- Section spacing (all sections) ---------- */

:is(.cs-services, .cs-results, .cs-why, .cs-steps, .cs-fixes, .cs-audiences, .cs-reviews, .cs-areas, .cs-faq).e-con {
  --padding-top: var(--cs-sec-y) !important;
  --padding-bottom: var(--cs-sec-y) !important;
  padding-top: var(--cs-sec-y);
  padding-bottom: var(--cs-sec-y);
}

.cs-cta.e-con {
  --padding-top: calc(var(--cs-sec-y) * 0.85) !important;
  --padding-bottom: calc(var(--cs-sec-y) * 0.85) !important;
  padding-top: calc(var(--cs-sec-y) * 0.85);
  padding-bottom: calc(var(--cs-sec-y) * 0.85);
}

.cs-trust.e-con {
  --padding-top: calc(var(--cs-sec-y) * 0.45) !important;
  --padding-bottom: calc(var(--cs-sec-y) * 0.45) !important;
  padding-top: calc(var(--cs-sec-y) * 0.45);
  padding-bottom: calc(var(--cs-sec-y) * 0.45);
}

/* Space between a section heading and its cards */
:is(.cs-services-head, .cs-results-head, .cs-why-head, .cs-steps-head, .cs-fixes-head).e-con {
  --margin-bottom: var(--cs-head-gap) !important;
  margin-bottom: var(--cs-head-gap);
}

.cs-results-track.e-con,
.cs-services-track.e-con,
.cs-fixes-track.e-con,
.cs-reviews-track.e-con {
  padding-top: 8px;
  padding-bottom: 12px;
}

@media (min-width: 1101px) {
  :is(.cs-services-track, .cs-results-track, .cs-fixes-track, .cs-reviews-track, .cs-audiences-row).e-con {
    --gap: 24px 24px !important;
    --column-gap: 24px !important;
    --row-gap: 24px !important;
    gap: 24px;
  }
}

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

.cs-hero.e-con {
  --min-height: 500px !important;
  --padding-top: 72px !important;
  --padding-bottom: 64px !important;
  min-height: 500px;
  padding-top: 72px;
  padding-bottom: 64px;
}

.cs-hero.e-con::before {
  background: linear-gradient(
    90deg,
    #01162a 0%,
    #01162a 34%,
    rgba(1, 22, 42, 0.86) 48%,
    rgba(1, 22, 42, 0.36) 62%,
    rgba(1, 22, 42, 0) 80%
  ) !important;
}

.cs-hero-copy.e-con {
  max-width: 560px;
}

/* Hero text spacing. One place: the gaps between eyebrow, title, text, buttons, chips.
   The container gap is zeroed so these margins are the only spacing. */
.cs-hero-copy.e-con {
  --gap: 0px 0px !important;
  --row-gap: 0px !important;
  gap: 0;
}

.cs-hero .cs-eyebrow.elementor-widget { margin-bottom: 14px !important; }
.cs-hero .cs-title.elementor-widget { margin-bottom: 18px !important; }
.cs-hero .cs-sub.elementor-widget { margin-bottom: 30px !important; }

.cs-hero .cs-sub .elementor-widget-container,
.cs-hero .cs-sub p {
  margin: 0 !important;
}

.cs-title .elementor-heading-title {
  max-width: 13em;
  margin: 0;
  text-shadow: 0 2px 18px rgba(1, 22, 42, 0.45);
}

.cs-hero .cs-eyebrow .elementor-heading-title {
  margin: 0;
}

.cs-hero .cs-actions.e-con {
  --margin-bottom: 30px !important;
  margin-bottom: 30px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-hero.e-con {
    --min-height: 460px !important;
    --padding-top: 56px !important;
    --padding-bottom: 52px !important;
    min-height: 460px;
    padding-top: 56px;
    padding-bottom: 52px;
  }

  .cs-hero.e-con::before {
    background: linear-gradient(
      90deg,
      #01162a 0%,
      #01162a 44%,
      rgba(1, 22, 42, 0.86) 60%,
      rgba(1, 22, 42, 0.3) 78%,
      rgba(1, 22, 42, 0) 95%
    ) !important;
  }

  .cs-hero-copy.e-con {
    max-width: 58%;
  }
}

/* Phone: the photo is the full background (swap it in Elementor, mobile view).
   A soft navy veil keeps the text readable and the photo still visible. */
@media (max-width: 767px) {
  .cs-hero.e-con {
    --padding-top: 52px !important;
    --padding-bottom: 44px !important;
    padding-top: 52px;
    padding-bottom: 44px;
    background-color: #01162a;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  .cs-hero.e-con::before {
    background: linear-gradient(
      180deg,
      rgba(1, 22, 42, 0.5) 0%,
      rgba(1, 22, 42, 0.6) 45%,
      rgba(1, 22, 42, 0.84) 100%
    ) !important;
  }

  .cs-title .elementor-heading-title {
    max-width: none;
    font-size: 29px !important;
    text-shadow: 0 2px 14px rgba(1, 22, 42, 0.6);
  }

  .cs-title .elementor-heading-title .cs-accent {
    color: #1fd0c8 !important;
  }

  .cs-hero .cs-sub.elementor-widget { margin-bottom: 28px !important; }

  .cs-sub .elementor-widget-container,
  .cs-sub p {
    color: #e3ebf0 !important;
  }

  .cs-hero .cs-actions.e-con {
    --margin-bottom: 28px !important;
    margin-bottom: 28px !important;
  }
  /* Trust chips: wrap in 2 columns, nothing is cut off */
  .elementor-widget-icon-list.cs-trust .elementor-widget-container {
    overflow: visible;
  }

  .elementor-widget-icon-list.cs-trust .elementor-icon-list-items,
  .elementor-widget-icon-list.cs-trust .elementor-icon-list-items.elementor-inline-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-flow: initial !important;
    gap: 12px 14px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .elementor-widget-icon-list.cs-trust .elementor-icon-list-item,
  .elementor-widget-icon-list.cs-trust .elementor-inline-item {
    min-width: 0;
  }

  .elementor-widget-icon-list.cs-trust .elementor-icon-list-text {
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}

/* ---------- WhatsApp buttons: WhatsApp green everywhere ---------- */

/* Hero */
.cs-btn-wa .elementor-button {
  background-color: var(--cs-wa) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
}

.cs-btn-wa .elementor-button .elementor-button-icon,
.cs-btn-wa .elementor-button .elementor-button-icon i,
.cs-btn-wa .elementor-button .elementor-button-icon svg,
.cs-btn-wa .elementor-button .elementor-button-icon svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.cs-btn-wa .elementor-button:hover,
.cs-btn-wa .elementor-button:focus-visible,
.cs-btn-wa .elementor-button:active {
  background-color: var(--cs-wa-dark) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(37, 211, 102, 0.4);
}

.cs-btn-wa .elementor-button:hover .elementor-button-icon,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon,
.cs-btn-wa .elementor-button:hover .elementor-button-icon i,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon i,
.cs-btn-wa .elementor-button:hover .elementor-button-icon svg,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon svg,
.cs-btn-wa .elementor-button:hover .elementor-button-icon svg path,
.cs-btn-wa .elementor-button:focus-visible .elementor-button-icon svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Header */
.csx-btn--wa {
  background: var(--cs-wa);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.32);
}

@media (hover: hover) {
  a.csx-btn--wa:hover,
  a.csx-btn--wa:focus-visible {
    background: var(--cs-wa-dark);
    box-shadow: 0 12px 24px rgba(37, 211, 102, 0.42);
  }
}

/* Bottom call-to-action */
.cs-cta-btn-wa .elementor-button {
  background: var(--cs-wa) !important;
  border-color: var(--cs-wa) !important;
  color: #ffffff !important;
}

@media (hover: hover) {
  .cs-cta-btn-wa .elementor-button:hover {
    background: var(--cs-wa-dark) !important;
    border-color: var(--cs-wa-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.35);
  }

  .cs-cta-btn-wa .elementor-button:hover .elementor-button-icon i,
  .cs-cta-btn-wa .elementor-button:hover .elementor-button-icon svg,
  .cs-cta-btn-wa .elementor-button:hover .elementor-button-icon path,
  .cs-cta-btn-wa .elementor-button:hover .elementor-button-text {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
}

/* Areas card "WhatsApp Us" */
.cs-areas-btn .elementor-button {
  background: var(--cs-wa) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
}

@media (hover: hover) {
  .cs-areas-btn .elementor-button:hover {
    background: var(--cs-wa-dark) !important;
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.4);
  }
}

/* ---------- Residential / Commercial cards: text always on a clean background ---------- */

/* One soft fade instead of three stacked ones; it stays solid behind the text. */
.cs-audience.e-con::after,
.cs-audience-photo.e-con::after {
  content: none !important;
  display: none !important;
}

.cs-audience.e-con::before {
  background: linear-gradient(
    90deg,
    #f8efe6 0%,
    #f8efe6 50%,
    rgba(248, 239, 230, 0.86) 58%,
    rgba(248, 239, 230, 0.4) 72%,
    rgba(248, 239, 230, 0) 90%
  ) !important;
}

.cs-audience-copy.e-con {
  max-width: 52%;
}

.cs-audience-desc .elementor-widget-container,
.cs-audience-desc p {
  max-width: 250px;
}

.cs-audience-title .elementor-heading-title {
  text-shadow: none;
}

@media (min-width: 1101px) {
  .cs-audience-copy.e-con {
    --padding-top: 36px !important;
    --padding-bottom: 36px !important;
    --padding-left: 36px !important;
    padding: 36px 20px 36px 36px;
  }

  .cs-audiences-row > .cs-audience.e-con {
    min-height: 280px;
    --min-height: 280px !important;
  }
}

@media (max-width: 767px) {
  .cs-audiences-row > .cs-audience.e-con {
    min-height: 250px;
    --min-height: 250px !important;
  }

  .cs-audience.e-con::before {
    background: linear-gradient(
      90deg,
      #f8efe6 0%,
      #f8efe6 62%,
      rgba(248, 239, 230, 0.8) 72%,
      rgba(248, 239, 230, 0.3) 86%,
      rgba(248, 239, 230, 0) 100%
    ) !important;
  }

  .cs-audience-copy.e-con {
    max-width: 68%;
  }

  .cs-audience-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-audience-desc .elementor-widget-container,
  .cs-audience-desc p {
    max-width: none;
    font-size: 13.5px !important;
  }

  .cs-audience-btn .elementor-button {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ---------- Heading + "view all" button: small button on the right (phone too) ---------- */

@media (max-width: 767px) {
  :is(.cs-services-head, .cs-results-head).e-con {
    --flex-direction: row !important;
    --flex-wrap: nowrap !important;
    --align-items: flex-end !important;
    --justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px;
  }

  :is(.cs-services-intro, .cs-results-intro).e-con {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  :is(.cs-services-head, .cs-results-head) > .cs-view-all {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 4px !important;
    --width: auto !important;
  }

  .cs-view-all .elementor-button {
    min-height: 0;
    gap: 6px;
    max-width: 118px;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    white-space: normal;
    text-align: left;
  }

  .cs-view-all .elementor-button-content-wrapper {
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .cs-view-all .elementor-button-icon,
  .cs-view-all .elementor-button i,
  .cs-view-all .elementor-button svg {
    font-size: 11px;
    width: 11px;
    height: 11px;
  }

  :is(.cs-services-title, .cs-results-title) .elementor-heading-title {
    font-size: 24px !important;
  }

  :is(.cs-services-kicker, .cs-results-kicker) .elementor-heading-title {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .cs-view-all .elementor-button {
    min-height: 36px;
    padding: 7px 14px !important;
  }
}


/* ==========================================================================
   Logo (wide logo with the name inside it). The file has empty space around
   the drop, so the image is taller than the header and pulled in with a
   negative margin. White box of the file is hidden (multiply + brightness).
   ========================================================================== */

.csx-brand-img {
  height: 86px;
  margin: -16px 0;
  mix-blend-mode: multiply;
  filter: brightness(1.04);
}

.csx-brand--drawer .csx-brand-img {
  height: 68px;
  margin: -12px 0;
}

.csx-brand--footer .csx-brand-img {
  height: 74px;
  margin: -12px 0;
}

@media (max-width: 1024px) {
  .csx-brand-img {
    height: 74px;
    margin: -13px 0;
  }

  /* logo is wide: give it its own width, WhatsApp stays between logo and menu button */
  .csx-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (max-width: 767px) {
  .csx-brand-img {
    height: 56px;
    margin: -9px 0;
  }
}

@media (max-width: 380px) {
  .csx-brand-img {
    height: 50px;
    margin: -8px 0;
  }
}

/* ==========================================================================
   Service page hero (template: service-hero.json)
   Buttons reuse .cs-btn-quote / .cs-btn-wa, so their look is not repeated here.
   Photo: Elementor → container "cs-sv" → Style → Background (desktop image on
   the right, mobile image goes on top). Left side has a light fade only.
   ========================================================================== */

.cs-sv.e-con {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  --flex-direction: column !important;
  --justify-content: center !important;
  --align-items: flex-start !important;
  --min-height: 480px !important;
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-left: var(--cs-pad-x) !important;
  min-height: 480px;
  padding: calc(var(--cs-sec-y, 88px) * 0.8) var(--cs-pad-x);
  background-color: #f8efe6;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.cs-sv.e-con::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f8efe6 0%,
    #f8efe6 38%,
    rgba(248, 239, 230, 0.8) 52%,
    rgba(248, 239, 230, 0.2) 68%,
    rgba(248, 239, 230, 0) 82%
  ) !important;
}

.cs-sv.e-con > .e-con,
.cs-sv.e-con > .elementor-element {
  position: relative;
  z-index: 2;
}

.cs-sv-copy.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 720px; /* wide enough for the 3 points in one row; title and text have their own max-width */
  gap: 0;
  background: transparent;
  --width: 100% !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 0px 0px !important;
  --row-gap: 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sv .elementor-heading-title,
.cs-sv .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-sv .cs-sv-eyebrow.elementor-widget { margin-bottom: 14px !important; }
.cs-sv .cs-sv-title.elementor-widget { margin-bottom: 18px !important; }
.cs-sv .cs-sv-sub.elementor-widget { margin-bottom: 28px !important; }

.cs-sv-eyebrow .elementor-heading-title {
  color: #061c30 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-sv-title .elementor-heading-title {
  max-width: 15em;
  color: #061c30 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(30px, 3.1vw, 40px) !important;
  font-weight: 600 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.cs-sv-sub .elementor-widget-container,
.cs-sv-sub p {
  margin: 0;
  max-width: 500px;
  color: #3c4a55 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.cs-sv-actions.e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0 0 32px;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: wrap !important;
  --gap: 12px 12px !important;
  --margin-bottom: 32px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sv .cs-sv-actions .elementor-widget {
  width: auto;
  margin: 0 !important;
}

/* three points under the buttons */
.cs-sv-points .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-sv-points .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

.cs-sv-points .elementor-icon-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 163, 156, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: #00a39c;
  font-size: 15px;
}

.cs-sv-points .elementor-icon-list-icon i,
.cs-sv-points .elementor-icon-list-icon svg {
  width: 15px;
  height: 15px;
  color: #00a39c;
  fill: currentColor;
}

.cs-sv-points .elementor-icon-list-text {
  max-width: 130px;
  padding: 0 !important;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-sv.e-con {
    --min-height: 440px !important;
    min-height: 440px;
  }

  .cs-sv.e-con::before {
    background: linear-gradient(
      90deg,
      #f8efe6 0%,
      #f8efe6 46%,
      rgba(248, 239, 230, 0.82) 62%,
      rgba(248, 239, 230, 0.2) 80%,
      rgba(248, 239, 230, 0) 94%
    ) !important;
  }

  .cs-sv-copy.e-con {
    max-width: 60%;
  }
}

/* Phone: photo on top, text below on the light background, buttons side by side */
@media (max-width: 767px) {
  .cs-sv.e-con {
    --sv-img: min(58vw, 320px);
    --min-height: 0px !important;
    --padding-top: calc(var(--sv-img) - 20px) !important;
    --padding-bottom: 40px !important;
    min-height: 0;
    padding-top: calc(var(--sv-img) - 20px);
    padding-bottom: 40px;
    background-position: center top !important;
    background-size: 100% auto !important;
  }

  .cs-sv.e-con::before {
    background: linear-gradient(
      180deg,
      rgba(248, 239, 230, 0) 0,
      rgba(248, 239, 230, 0) calc(var(--sv-img) - 110px),
      rgba(248, 239, 230, 0.85) calc(var(--sv-img) - 40px),
      #f8efe6 calc(var(--sv-img) + 4px)
    ) !important;
  }

  .cs-sv-copy.e-con {
    max-width: none;
  }

  .cs-sv-title .elementor-heading-title {
    max-width: none;
    font-size: 28px !important;
  }

  .cs-sv-sub .elementor-widget-container,
  .cs-sv-sub p {
    max-width: none;
    font-size: 14px !important;
  }

  .cs-sv .cs-sv-actions.e-con {
    --flex-wrap: nowrap !important;
    --margin-bottom: 28px !important;
    flex-wrap: nowrap;
    margin-bottom: 28px;
  }

  .cs-sv .cs-sv-actions .elementor-widget {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }

  .cs-sv .cs-sv-actions .elementor-widget-container,
  .cs-sv .cs-sv-actions .elementor-button-wrapper {
    width: 100% !important;
  }

  .cs-sv .cs-sv-actions .elementor-button {
    width: 100% !important;
    min-height: 44px;
    padding: 10px 10px !important;
    gap: 6px;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .cs-sv-points .elementor-icon-list-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cs-sv-points .elementor-icon-list-text {
    max-width: none;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   Service page: all services grid (template: service-grid.json)
   Same section background, card look, hover and animation as the home page
   services (.cs-services / .cs-card). Only the grid is new.
   Desktop 4 columns, tablet 3, phone: one card per row (no scroller).
   ========================================================================== */

.cs-sp-head.e-con {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0 0 var(--cs-head-gap, 40px);
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: flex-end !important;
  --justify-content: space-between !important;
  --gap: 24px 24px !important;
  --margin-bottom: var(--cs-head-gap, 40px) !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sp-intro.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  max-width: 720px;
  min-width: 0;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 0px 0px !important;
  --row-gap: 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sp-intro .cs-services-title .elementor-heading-title {
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.cs-sp-sub .elementor-widget-container,
.cs-sp-sub p {
  margin: 12px 0 0;
  max-width: 640px;
  color: #4a5a66 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.cs-sp-head > .cs-sp-all {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 0 6px !important;
}

.cs-sp-all .elementor-button {
  font-size: 14px !important;
}

.cs-sp-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 8px 0 12px;
}

.cs-sp-grid > .cs-card.e-con {
  flex: none !important;
  width: auto !important;
  max-width: none;
  --width: auto !important;
}

.cs-sp-grid .cs-card-photo .elementor-widget-container,
.cs-sp-grid .cs-card-photo img {
  height: 140px !important;
}

.cs-sp-grid .cs-card-name .elementor-heading-title {
  min-height: 2.4em;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.cs-sp-grid .cs-card-desc .elementor-widget-container,
.cs-sp-grid .cs-card-desc p {
  color: #5f6c78 !important;
}

/* "Learn More" sits at the bottom of every card, so the row looks even */
.cs-sp-grid .cs-card-body.e-con {
  flex: 1 1 auto;
}

.cs-sp-grid .cs-card-link {
  margin-top: auto !important;
  padding-top: 14px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-sp-grid.e-con {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .cs-sp-grid .cs-card-photo .elementor-widget-container,
  .cs-sp-grid .cs-card-photo img {
    height: 120px !important;
  }
}

/* Phone: one card per row, photo on the left, text on the right, stacked downwards */
@media (max-width: 767px) {
  .cs-sp-head.e-con {
    --flex-direction: column !important;
    --align-items: flex-start !important;
    --justify-content: flex-start !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
  }

  .cs-sp-head > .cs-sp-all {
    margin: 0 !important;
  }

  .cs-sp-intro .cs-services-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .cs-sp-sub .elementor-widget-container,
  .cs-sp-sub p {
    font-size: 14px !important;
  }

  .cs-sp-grid.e-con {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding-top: 0;
  }

  .cs-sp-grid > .cs-card.e-con {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr);
    position: relative;
    min-height: 136px;
    overflow: hidden;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(14, 23, 32, 0.08);
  }

  .cs-sp-grid .cs-card-photo.elementor-widget {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    border-radius: 14px 0 0 14px;
  }

  .cs-sp-grid .cs-card-photo .elementor-widget-container,
  .cs-sp-grid .cs-card-photo img {
    height: 100% !important;
    min-height: 136px;
    border-radius: 14px 0 0 14px;
  }

  .cs-sp-grid .cs-card-body.e-con {
    grid-column: 2;
    grid-row: 1;
    position: static !important;
    justify-content: center;
    --padding-top: 14px !important;
    --padding-right: 14px !important;
    --padding-bottom: 14px !important;
    --padding-left: 14px !important;
    padding: 14px;
  }

  /* round icon sits on the bottom-left of the photo */
  .cs-sp-grid .cs-card-icon.elementor-widget {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    margin: 0 !important;
  }

  .cs-sp-grid .cs-card-icon .elementor-icon {
    width: 34px;
    height: 34px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(14, 23, 32, 0.18);
  }

  .cs-sp-grid .cs-card-name .elementor-heading-title {
    min-height: 0;
    margin-bottom: 4px;
    font-size: 16px !important;
  }

  .cs-sp-grid .cs-card-desc p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .cs-sp-grid .cs-card-link {
    margin-top: 8px !important;
    padding-top: 0;
  }
}

/* ==========================================================================
   Service page: spaces we serve (template: service-spaces.json)
   Elementor handles type, colour, padding, radius. This file only does the
   3x2 grid, hover/click reveal, photo fill, and the phone swiper.
   ========================================================================== */

.cs-ss.e-con {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.64) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.64) !important;
  --padding-left: var(--cs-pad-x) !important;
}

.cs-ss .elementor-heading-title,
.cs-ss .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-ss-head.e-con {
  width: 100%;
  margin: 0 0 28px;
  --margin-bottom: 28px !important;
}

/* heading block keeps its size; the paragraph gets the free space (2-3 lines) */
.cs-ss-intro.e-con {
  flex: 0 0 auto !important;
  width: auto !important;
  --width: auto !important;
}

.cs-ss-sub.elementor-widget {
  flex: 1 1 520px;
  width: auto !important;
  min-width: 0;
  max-width: 580px;
  margin: 0 !important;
}

.cs-ss-sub .elementor-widget-container,
.cs-ss-sub p {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.6;
}

.cs-ss-all.elementor-widget {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

.cs-ss-all .elementor-button {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.cs-ss-all .elementor-button-icon {
  transition: transform 0.3s ease;
}

.cs-ss-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
}

.cs-ss-grid > .cs-ss-tile.e-con {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  cursor: pointer;
  --width: auto !important;
  --min-height: 0px !important;
  --gap: 0px 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-ss-photo.e-con {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-index: 0 !important;
  --width: 100% !important;
  --min-height: 100% !important;
  --position: absolute !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-ss-tile.e-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 28, 48, 0.88) 0%, rgba(6, 28, 48, 0.42) 42%, rgba(6, 28, 48, 0) 68%);
  transition: background 0.4s ease;
}

.cs-ss-body.e-con {
  position: relative;
  z-index: 3;
  width: 100% !important;
  --width: 100% !important;
  --gap: 6px 6px !important;
}

.cs-ss-name.elementor-widget,
.cs-ss-copy.elementor-widget {
  width: 100% !important;
  margin: 0 !important;
}

.cs-ss-copy.elementor-widget {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-ss-copy p + p {
  margin-top: 8px;
}

.cs-ss-copy strong {
  display: block;
  margin-bottom: 2px;
  color: #7fdad4;
  font-weight: 600;
}

.cs-ss-tile.is-open .cs-ss-copy.elementor-widget,
.cs-ss-tile.is-open.e-con::after {
  max-height: 16em;
  opacity: 1;
  transform: none;
}

.cs-ss-tile.is-open.e-con::after {
  background: linear-gradient(0deg, rgba(6, 28, 48, 0.94) 0%, rgba(6, 28, 48, 0.72) 55%, rgba(6, 28, 48, 0.2) 100%);
}

.cs-ss-arrow {
  display: none;
}

@media (hover: hover) {
  .cs-ss-tile.e-con:hover .cs-ss-photo.e-con,
  .cs-ss-tile.is-open .cs-ss-photo.e-con {
    transform: scale(1.07);
  }

  .cs-ss-tile.e-con:hover .cs-ss-copy.elementor-widget,
  .cs-ss-tile.is-open .cs-ss-copy.elementor-widget {
    max-height: 16em;
    opacity: 1;
    transform: none;
  }

  .cs-ss-tile.e-con:hover::after,
  .cs-ss-tile.is-open.e-con::after {
    background: linear-gradient(0deg, rgba(6, 28, 48, 0.94) 0%, rgba(6, 28, 48, 0.72) 55%, rgba(6, 28, 48, 0.2) 100%);
  }

  .cs-ss-all .elementor-button:hover,
  .cs-ss-all .elementor-button:focus-visible {
    color: #1fbdb5 !important;
  }

  .cs-ss-all .elementor-button:hover .elementor-button-icon {
    transform: translateX(4px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-ss-head.e-con {
    flex-wrap: wrap !important;
    gap: 14px 24px;
  }

  .cs-ss-sub.elementor-widget {
    flex: 1 1 260px;
  }

  .cs-ss-grid.e-con {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .cs-ss-grid > .cs-ss-tile.e-con {
    aspect-ratio: 1.3 / 1;
  }
}

@media (max-width: 767px) {
  .cs-ss-head.e-con {
    margin-bottom: 22px;
  }

  .cs-ss-sub.elementor-widget {
    flex: none;
    max-width: 100%;
  }

  .cs-ss-grid.e-con {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(var(--cs-pad-x) * -1);
    padding-right: var(--cs-pad-x);
    --flex-direction: row !important;
    --flex-wrap: nowrap !important;
  }

  .cs-ss-grid.e-con::-webkit-scrollbar {
    display: none;
  }

  .cs-ss-grid > .cs-ss-tile.e-con {
    flex: 0 0 calc(85% - 14px) !important;
    width: calc(85% - 14px) !important;
    min-height: 240px;
    aspect-ratio: auto;
    scroll-snap-align: start;
    --width: calc(85% - 14px) !important;
    --min-height: 240px !important;
  }

  .cs-ss-tile.is-open .cs-ss-copy.elementor-widget {
    max-height: 16em;
    opacity: 1;
    transform: none;
  }

  .cs-ss-arrow {
    position: absolute;
    z-index: 6;
    bottom: calc(var(--cs-sec-y, 88px) * 0.64 + 120px - 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 0 2px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: #00a39c;
    box-shadow: 0 6px 14px rgba(0, 163, 156, 0.35);
    color: #ffffff;
    font: 22px/1 "Plus Jakarta Sans", sans-serif;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  }

  .cs-ss-arrow:hover,
  .cs-ss-arrow:focus-visible,
  .cs-ss-arrow:active {
    background: #008f89;
  }

  .cs-ss-prev { left: calc(var(--cs-pad-x) + 10px); }
  .cs-ss-next { right: calc(var(--cs-pad-x) + 10px); }

  .cs-ss-arrow[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  .cs-ss-arrow:active {
    transform: scale(0.92);
  }
}
/* ==========================================================================
   Service page: FAQ + help card (template: service-faq.json)
   Left: heading + accordion (all closed). Right: photo with a floating help
   card. Accordion reuses .cs-faq-acc. Buttons reuse .cs-btn-quote (theme teal);
   the WhatsApp link is green. Type, colours, radius and shadow are Elementor
   settings; this file keeps the layout steady and adds the hover effects.
   ========================================================================== */

.cs-sf.e-con {
  box-sizing: border-box;
  width: 100%;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --gap: 0px 0px !important;
  --padding-top: var(--cs-sec-y, 88px) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: var(--cs-sec-y, 88px) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: var(--cs-sec-y, 88px) var(--cs-pad-x);
}

.cs-sf .elementor-heading-title,
.cs-sf .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-sf-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 48px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: stretch !important;
  --gap: 48px 48px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sf-faq.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --gap: 18px 18px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sf-kicker.elementor-widget {
  margin: 0 0 8px !important;
}

.cs-sf-title .elementor-heading-title {
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}

.cs-sf-sub.elementor-widget {
  margin: 10px 0 24px !important;
}

/* Accordion: same simple list as before. Question + teal chevron, no tint. */
.cs-sf .cs-sf-acc .elementor-toggle {
  gap: 0;
}

.cs-sf .cs-sf-acc .elementor-toggle-item,
.cs-sf .cs-sf-acc .elementor-toggle-item:has(.elementor-tab-title.elementor-active) {
  margin: 0 !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e4ecee !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.cs-sf .cs-sf-acc .elementor-tab-title {
  padding: 16px 2px 16px 0 !important;
}

.cs-sf .cs-sf-acc .elementor-toggle-title,
.cs-sf .cs-sf-acc .elementor-tab-title a {
  color: #24303a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: color 0.3s ease;
}

.cs-sf .cs-sf-acc .elementor-toggle-icon,
.cs-sf .cs-sf-acc .elementor-toggle-icon i,
.cs-sf .cs-sf-acc .elementor-toggle-icon svg {
  color: #00a39c !important;
  fill: #00a39c !important;
}

.cs-sf .cs-sf-acc .elementor-tab-content {
  display: none;
  padding: 0 8px 16px 0 !important;
  color: #4a5a66 !important;
}

.cs-sf .cs-sf-acc .elementor-tab-title.elementor-active + .elementor-tab-content,
.cs-sf .cs-sf-acc .elementor-toggle-item:has(.elementor-tab-title.elementor-active) .elementor-tab-content {
  display: block;
}
/* Right: photo panel */
.cs-sf-cta.e-con {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  flex: 0 0 46% !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 46% !important;
  min-width: 0 !important;
  min-height: 520px;
  overflow: hidden;
  border-radius: 22px !important;
  background: #e7f6f6 !important;
  box-shadow: 0 18px 40px rgba(6, 28, 48, 0.12);
  --width: 46% !important;
  --min-height: 520px !important;
  --flex-direction: column !important;
  --justify-content: flex-end !important;
  --gap: 0px 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sf-photo.e-con {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-index: 0 !important;
  --width: 100% !important;
  --min-height: 100% !important;
  --position: absolute !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

/* Floating help card */
.cs-sf-card.e-con {
  position: relative !important;
  z-index: 3;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px;
  width: auto !important;
  margin: 0 16px 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 16px 16px !important;
  --padding-top: 16px !important;
  --padding-right: 18px !important;
  --padding-bottom: 16px !important;
  --padding-left: 18px !important;
}

.cs-sf-icon.elementor-widget {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

.cs-sf-copy.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0;
  width: auto !important;
  min-width: 0;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 0px 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sf-cta-title .elementor-heading-title {
  letter-spacing: -0.01em !important;
}

.cs-sf-cta-sub.elementor-widget {
  margin: 4px 0 0 !important;
}

.cs-sf-actions.e-con {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px;
  width: auto !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --gap: 6px 6px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sf-actions > .elementor-widget {
  width: 100% !important;
  margin: 0 !important;
}

.cs-sf-actions .cs-btn-quote .elementor-button {
  display: flex;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

/* WhatsApp link: default WhatsApp green, no button background */
.cs-sf-chat .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1ebe5a !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.3s ease, transform 0.35s ease;
}

.cs-sf-chat .elementor-button-icon,
.cs-sf-chat .elementor-button i,
.cs-sf-chat .elementor-button svg {
  color: #25d366 !important;
  fill: #25d366 !important;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  .cs-sf .cs-sf-acc .elementor-toggle-item:hover .elementor-toggle-title,
  .cs-sf .cs-sf-acc .elementor-toggle-item:hover .elementor-tab-title a {
    color: #00a39c !important;
  }

  .cs-sf-cta.e-con:hover .cs-sf-photo.e-con {
    transform: scale(1.05);
  }

  .cs-sf-cta.e-con:hover .cs-sf-card.e-con {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(6, 28, 48, 0.24) !important;
  }

  .cs-sf-chat .elementor-button:hover,
  .cs-sf-chat .elementor-button:focus-visible {
    background: transparent !important;
    color: #25d366 !important;
    transform: translateX(3px);
  }

  .cs-sf-chat .elementor-button:hover .elementor-button-icon,
  .cs-sf-chat .elementor-button:hover i,
  .cs-sf-chat .elementor-button:hover svg {
    transform: scale(1.15);
  }
}

/* tablet: FAQ on top, photo panel below */
@media (max-width: 1024px) {
  .cs-sf-row.e-con {
    flex-direction: column !important;
    gap: 32px;
    --flex-direction: column !important;
    --gap: 32px 32px !important;
  }

  .cs-sf-faq.e-con {
    flex: none !important;
    width: 100% !important;
  }

  .cs-sf-cta.e-con {
    flex: none !important;
    width: 100% !important;
    min-height: 460px;
    --width: 100% !important;
    --min-height: 460px !important;
  }
}

/* phone: card sits at the bottom of the photo, buttons under the text */
@media (max-width: 767px) {
  .cs-sf-sub.elementor-widget {
    margin-bottom: 18px !important;
  }

  .cs-sf .cs-sf-acc .elementor-tab-title {
    padding: 14px 2px 14px 0 !important;
  }

  .cs-sf .cs-sf-acc .elementor-toggle-title,
  .cs-sf .cs-sf-acc .elementor-tab-title a {
    font-size: 14.5px !important;
  }

  .cs-sf .cs-sf-acc .elementor-tab-content {
    padding: 0 6px 14px 0 !important;
  }

  .cs-sf-cta.e-con {
    min-height: 440px;
    border-radius: 18px !important;
    --min-height: 440px !important;
  }

  .cs-sf-card.e-con {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    align-items: center;
    margin: 0 12px 12px;
    --gap: 12px 14px !important;
    --padding-top: 14px !important;
    --padding-right: 14px !important;
    --padding-bottom: 14px !important;
    --padding-left: 14px !important;
  }

  .cs-sf-actions.e-con {
    grid-column: 1 / -1;
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-sf-actions .cs-btn-quote .elementor-button {
    padding: 13px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-sf-photo.e-con,
  .cs-sf-card.e-con,
  .cs-sf .cs-sf-acc .elementor-toggle-item {
    transition: none !important;
  }
}
/* Results header: paragraph under the title, button last on the phone */
.cs-results-intro.e-con {
  max-width: 820px;
}

.cs-results-intro .elementor-widget-text-editor .elementor-widget-container,
.cs-results-intro .elementor-widget-text-editor p {
  margin: 10px 0 0;
  max-width: 100%;
  color: #4a5a66 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

@media (max-width: 767px) {
  .cs-results-head.e-con {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px;
    --flex-direction: column !important;
    --flex-wrap: nowrap !important;
    --align-items: flex-start !important;
    --justify-content: flex-start !important;
    --gap: 16px 16px !important;
  }

  .cs-results-intro.e-con {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .cs-results-head .cs-results-title .elementor-heading-title {
    font-size: clamp(18px, 5.6vw, 22px) !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
  }

  .cs-results-intro .elementor-widget-text-editor .elementor-widget-container,
  .cs-results-intro .elementor-widget-text-editor p {
    margin-top: 8px;
    font-size: 14px !important;
  }

  .cs-results-head > .cs-view-all {
    flex: none !important;
    order: 3;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    --width: auto !important;
  }

  .cs-results-head > .cs-view-all .elementor-button {
    min-height: 36px;
    max-width: none;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center;
  }
}

/* ==========================================================================
   Service page: quote banner (template: service-cta.json)
   Colours, type, buttons, icon list and entrance animation are Elementor
   settings. This file only keeps the layout steady and adds the soft glow.
   Buttons reuse .cs-btn-quote (theme teal) and .cs-btn-wa (WhatsApp green).
   ========================================================================== */

.cs-sc.e-con {
  box-sizing: border-box;
  width: 100%;
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.64) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.64) !important;
  --padding-left: var(--cs-pad-x) !important;
}

.cs-sc .elementor-heading-title,
.cs-sc .elementor-widget-text-editor p {
  margin: 0;
}

.cs-sc-card.e-con {
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(6, 28, 48, 0.18);
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 40px 40px !important;
}

/* soft teal glow that drifts slowly behind the content */
.cs-sc-card.e-con::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -8%;
  z-index: 0;
  width: 56%;
  height: 220%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 163, 156, 0.34), rgba(0, 163, 156, 0) 70%);
  animation: cs-sc-glow 11s ease-in-out infinite alternate;
}

/* fine diagonal texture */
.cs-sc-card.e-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px);
}

.cs-sc-card > .e-con,
.cs-sc-card > .elementor-widget {
  position: relative;
  z-index: 2;
}

.cs-sc-copy.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: auto !important;
  min-width: 0;
  max-width: 560px;
  gap: 0;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 0px 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sc-kicker.elementor-widget {
  margin: 0 0 8px !important;
}

.cs-sc-title.elementor-widget {
  margin: 0 !important;
}

.cs-sc-title .elementor-heading-title {
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}

.cs-sc-sub.elementor-widget {
  margin: 12px 0 0 !important;
  max-width: 520px;
}

.cs-sc-actions.e-con {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px;
  width: auto !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: center !important;
  --gap: 12px 12px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-sc-actions > .elementor-widget {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

.cs-sc-actions .elementor-button {
  white-space: nowrap;
}

.cs-sc-points.elementor-widget {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

.cs-sc-points .elementor-icon-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-sc-points .elementor-icon-list-item {
  align-items: center;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-sc-points .elementor-icon-list-icon {
  display: inline-flex;
  align-items: center;
  width: auto !important;
}

.cs-sc-points .elementor-icon-list-icon i,
.cs-sc-points .elementor-icon-list-icon svg {
  transition: transform 0.35s ease;
}

/* WhatsApp icon: calm pulse so the button draws the eye */
.cs-sc .cs-btn-wa .elementor-button-icon {
  animation: cs-sc-pulse 2.8s ease-in-out infinite;
}

@keyframes cs-sc-glow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-8%, 6%, 0) scale(1.12); }
}

@keyframes cs-sc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@media (hover: hover) {
  .cs-sc-points .elementor-icon-list-item:hover {
    transform: translateX(4px);
  }

  .cs-sc-points .elementor-icon-list-item:hover .elementor-icon-list-icon i,
  .cs-sc-points .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
    transform: scale(1.2);
  }
}

/* tablet: copy on top, buttons and points side by side below */
@media (max-width: 1100px) {
  .cs-sc-card.e-con {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px 32px;
    --flex-wrap: wrap !important;
    --gap: 24px 32px !important;
  }

  .cs-sc-copy.e-con {
    flex: 1 1 100% !important;
    max-width: 100%;
  }

  .cs-sc-sub.elementor-widget {
    max-width: 620px;
  }
}

/* phone: everything stacked, full-width buttons */
@media (max-width: 767px) {
  .cs-sc-card.e-con {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 22px;
    --flex-direction: column !important;
    --flex-wrap: nowrap !important;
    --align-items: stretch !important;
    --gap: 22px 22px !important;
    border-radius: 18px !important;
  }

  .cs-sc-copy.e-con {
    flex: none !important;
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-sc-actions.e-con {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px;
    --flex-direction: column !important;
    --align-items: stretch !important;
    --gap: 10px 10px !important;
    --width: 100% !important;
  }

  .cs-sc-actions > .elementor-widget {
    width: 100% !important;
  }

  .cs-sc-actions .elementor-button {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 14px 18px !important;
  }

  .cs-sc-points.elementor-widget {
    width: 100% !important;
  }

  .cs-sc-points .elementor-icon-list-item {
    white-space: normal;
  }

  .cs-sc-card.e-con::before {
    top: -30%;
    right: -30%;
    width: 90%;
    height: 120%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-sc-card.e-con::before,
  .cs-sc .cs-btn-wa .elementor-button-icon {
    animation: none !important;
  }
}

/* ==========================================================================
   Service DETAIL page hero (template: service-detail-hero.json)
   Same banner as .cs-sv (cream overlay, photo right, mobile photo on top).
   Only the differences live here: outline button, 3 points with dividers,
   slightly bigger title.
   ========================================================================== */

/* outline button (dark outline on the light background) */
.cs-btn-ghost .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px !important;
  border: 1.5px solid #061c30 !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  color: #061c30 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.cs-btn-ghost .elementor-button:hover,
.cs-btn-ghost .elementor-button:focus-visible {
  background-color: #061c30 !important;
  border-color: #061c30 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(6, 28, 48, 0.22);
}

/* title */
.cs-sv--detail .cs-sv-title .elementor-heading-title {
  max-width: 14em;
  font-size: clamp(30px, 3.1vw, 44px) !important;
}

/* desktop: text stays on the left half, photo shows clearly on the right */
@media (min-width: 1025px) {
  .cs-sv--detail .cs-sv-copy.e-con {
    max-width: 56%;
  }

  .cs-sv--detail.e-con::before {
    background: linear-gradient(
      90deg,
      #f8efe6 0%,
      #f8efe6 46%,
      rgba(248, 239, 230, 0.85) 56%,
      rgba(248, 239, 230, 0.25) 70%,
      rgba(248, 239, 230, 0) 84%
    ) !important;
  }
}

/* points: plain teal icon + two-line label, thin dividers between */
.cs-sv--detail .cs-sv-points .elementor-icon-list-items {
  flex-wrap: nowrap;
  gap: 0;
}

.cs-sv--detail .cs-sv-points .elementor-icon-list-item {
  gap: 12px;
  padding: 0 26px !important;
  border-left: 1px solid rgba(6, 28, 48, 0.16);
}

.cs-sv--detail .cs-sv-points .elementor-icon-list-item:first-child {
  padding-left: 0 !important;
  border-left: 0;
}

.cs-sv--detail .cs-sv-points .elementor-icon-list-item:last-child {
  padding-right: 0 !important;
}

.cs-sv--detail .cs-sv-points .elementor-icon-list-icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 22px;
}

.cs-sv--detail .cs-sv-points .elementor-icon-list-icon i,
.cs-sv--detail .cs-sv-points .elementor-icon-list-icon svg {
  width: 22px;
  height: 22px;
  font-size: 22px;
}

.cs-sv--detail .cs-sv-points .elementor-icon-list-text {
  max-width: 100px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-sv--detail .cs-sv-points .elementor-icon-list-item {
    padding: 0 16px !important;
  }
}

/* phone: 3 equal columns, icon on top, label under it */
@media (max-width: 767px) {
  .cs-sv--detail .cs-sv-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .cs-sv--detail .cs-sv-points .elementor-icon-list-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .cs-sv--detail .cs-sv-points .elementor-icon-list-item {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 8px !important;
    text-align: center;
  }

  .cs-sv--detail .cs-sv-points .elementor-icon-list-item:first-child {
    padding-left: 0 !important;
  }

  .cs-sv--detail .cs-sv-points .elementor-icon-list-item:last-child {
    padding-right: 0 !important;
  }

  .cs-sv--detail .cs-sv-points .elementor-icon-list-text {
    max-width: none;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   Service detail page: enquiry section (template: service-detail-enquiry.json)
   Left: photo with the text sitting in its top-right corner. Right: form card.
   The Contact Form 7 form (Shortcode widget, styled by the .wpcf7 block at the end)
   goes into the container "cs-en-slot".
   ========================================================================== */

.cs-en.e-con {
  --cs-en-bg: #ffffff;
  --cs-en-r: 22px;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--cs-en-bg);
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: calc(var(--cs-sec-y, 88px) * 0.8) var(--cs-pad-x);
}

.cs-en-row.e-con {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 48px;
  --width: 100% !important;
  --flex-direction: row !important;
  --align-items: flex-start !important;
  --gap: 48px 48px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-en-main.e-con {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  --width: auto !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-en .cs-en-photo.elementor-widget {
  width: 72% !important;
  margin: 0 !important;
}

.cs-en-photo .elementor-widget-container {
  overflow: hidden;
  border-radius: var(--cs-en-r);
}

.cs-en-photo img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-en-photo:focus-visible img,
.cs-en-main.is-open .cs-en-photo img {
  transform: scale(1.04);
}

@media (hover: hover) {
  .cs-en-photo:hover img {
    transform: scale(1.04);
  }
}

/* keeps the zoom while the pointer is on the text box (text box sits over the photo) */
.cs-en-main:has(.cs-en-copy:hover) .cs-en-photo img {
  transform: scale(1.04);
}

/* text box sits over the photo's top-right corner.
   It is HIDDEN by default and appears when the photo is hovered (desktop),
   focused with the keyboard, or tapped (touch / phone: script.js adds .is-open).
   Put any content in it (heading, text, button ...), the box grows with it. */
.cs-en-copy.e-con {
  position: absolute;
  top: 0;
  right: 0;
  left: 27%;
  z-index: 2;
  box-sizing: border-box;
  align-items: flex-start;
  background: var(--cs-en-bg);
  border-radius: 0 0 0 var(--cs-en-r);
  --width: auto !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 22px !important;
  --padding-left: 30px !important;
  padding: 0 0 22px 30px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transform-origin: top right;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.4s;
}

.cs-en-photo:focus-visible ~ .cs-en-copy.e-con,
.cs-en-copy.e-con:focus-within,
.cs-en-main.is-open .cs-en-copy.e-con {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* mouse: reveal on hover (touch screens use the tap instead, so the hover does not get stuck) */
@media (hover: hover) {
  .cs-en-photo:hover ~ .cs-en-copy.e-con,
  .cs-en-copy.e-con:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
}

/* small hint on the photo while the text is hidden */
.cs-en-photo .elementor-widget-container {
  position: relative;
}

.cs-en-photo .elementor-widget-container::after {
  content: "Know more  +";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(6, 28, 48, 0.18);
  color: #061c30;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cs-en-main.is-open .cs-en-photo .elementor-widget-container::after {
  opacity: 0;
  transform: translateY(-6px);
}

@media (hover: hover) {
  .cs-en-photo:hover .elementor-widget-container::after {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.cs-en-photo[aria-expanded] {
  cursor: pointer;
}

/* rounds the photo corner where it meets the text box */
.cs-en-copy.e-con::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--cs-en-r) * -1);
  width: var(--cs-en-r);
  height: var(--cs-en-r);
  pointer-events: none;
  background: radial-gradient(
    circle at 0 100%,
    transparent calc(var(--cs-en-r) - 0.5px),
    var(--cs-en-bg) var(--cs-en-r)
  );
}

.cs-en .elementor-heading-title,
.cs-en .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-en-title .elementor-heading-title {
  color: #061c30 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(24px, 2.5vw, 30px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}

.cs-en-text p {
  max-width: 62ch;
  color: #3c4a55 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* form card */
.cs-en-card.e-con {
  flex: 0 0 min(380px, 32%);
  box-sizing: border-box;
  --width: min(380px, 32%) !important;
}

.cs-en-card-title .elementor-heading-title {
  color: #061c30 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.cs-en-slot.e-con {
  width: 100%;
  --width: 100% !important;
}

/* tablet: form card goes under the photo block */
@media (max-width: 1024px) {
  .cs-en-row.e-con {
    flex-direction: column;
    gap: 36px;
    --flex-direction: column !important;
    --gap: 36px 36px !important;
  }

  .cs-en-main.e-con {
    flex: 0 0 auto;
    width: 100%;
    --width: 100% !important;
  }

  .cs-en-card.e-con {
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    --width: 100% !important;
  }
}

/* phone: photo, then text, then the form card (no overlap) */
@media (max-width: 767px) {
  .cs-en .cs-en-photo.elementor-widget {
    width: 100% !important;
  }

  .cs-en-photo img {
    height: 240px;
  }

  .cs-en-copy.e-con {
    position: static;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    transform: none;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    padding: 0;
    transition: opacity 0.4s ease, max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), margin-top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
  }

  /* opens below the photo */
  .cs-en-photo:focus-visible ~ .cs-en-copy.e-con,
  .cs-en-copy.e-con:focus-within,
  .cs-en-main.is-open .cs-en-copy.e-con {
    max-height: 900px;
    margin-top: 22px;
  }

  @media (hover: hover) {
    .cs-en-photo:hover ~ .cs-en-copy.e-con,
    .cs-en-copy.e-con:hover {
      max-height: 900px;
      margin-top: 22px;
    }
  }

  .cs-en-photo .elementor-widget-container::after {
    content: "Tap to know more  +";
    top: auto;
    right: 12px;
    bottom: 12px;
  }

  .cs-en-copy.e-con::before {
    display: none;
  }

  .cs-en-card.e-con {
    max-width: none;
  }
}


/* ==========================================================================
   Contact Form 7 inside the enquiry section (.cs-en)
   Paste form template: see the CF7 code given with this section.
   CF7 sends / checks the form itself, this block is only the look.
   (!important is used on purpose: the theme and CF7 set their own field styles.)
   ========================================================================== */

.cs-en .wpcf7 {
  width: 100%;
  margin: 0;
}

.cs-en .wpcf7 form.wpcf7-form {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.cs-en .wpcf7 form.wpcf7-form > p,
.cs-en .wpcf7 form.wpcf7-form > div:not(.wpcf7-response-output) {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.cs-en .wpcf7 form br {
  display: none !important;
}

.cs-en .wpcf7 .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  position: relative;
}

/* fields */
.cs-en .wpcf7 input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cs-en .wpcf7 select.wpcf7-form-control,
.cs-en .wpcf7 textarea.wpcf7-form-control {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid #d9e7ec !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  color: #12202c !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cs-en .wpcf7 textarea.wpcf7-form-control {
  height: auto !important;
  min-height: 96px !important;
  padding: 12px 16px !important;
}

.cs-en .wpcf7 .wpcf7-form-control::placeholder {
  color: #8a97a1 !important;
  opacity: 1;
}

.cs-en .wpcf7 select.wpcf7-form-control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 42px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061c30' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 13px !important;
}

.cs-en .wpcf7 input.wpcf7-form-control:focus,
.cs-en .wpcf7 select.wpcf7-form-control:focus,
.cs-en .wpcf7 textarea.wpcf7-form-control:focus {
  border-color: #00a39c !important;
  box-shadow: 0 0 0 3px rgba(0, 163, 156, 0.15) !important;
}

/* submit button: theme teal, full width */
.cs-en .wpcf7 .wpcf7-submit,
.cs-en .wpcf7 input[type="submit"],
.cs-en .wpcf7 button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 4px 0 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background-color: #00a39c !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  text-align: center;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease, box-shadow 0.35s ease !important;
}

.cs-en .wpcf7 .wpcf7-submit:hover,
.cs-en .wpcf7 .wpcf7-submit:focus-visible,
.cs-en .wpcf7 input[type="submit"]:hover,
.cs-en .wpcf7 button[type="submit"]:hover {
  background-color: #008f89 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 163, 156, 0.35) !important;
}

/* while sending: dim the button, hide CF7's spinner (it would push the layout) */
.cs-en .wpcf7 form.submitting .wpcf7-submit {
  opacity: 0.7;
  pointer-events: none;
}

.cs-en .wpcf7 .wpcf7-spinner {
  display: none !important;
}

/* errors */
.cs-en .wpcf7 .wpcf7-not-valid {
  border-color: #d64545 !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12) !important;
}

.cs-en .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 5px;
  color: #b03030;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* message under the button */
.cs-en .wpcf7 form .wpcf7-response-output {
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 10px;
  background: rgba(214, 69, 69, 0.1);
  color: #b03030;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.cs-en .wpcf7 form.sent .wpcf7-response-output {
  background: rgba(0, 163, 156, 0.1);
  color: #00716c;
}

.cs-en .wpcf7 form.init .wpcf7-response-output,
.cs-en .wpcf7 form.resetting .wpcf7-response-output {
  display: none !important;
}

/* ==========================================================================
   Service detail page: "What our service does" strip (template: service-detail-about.json)
   Same banner as .cs-sv (cream overlay, photo right, phone: photo on top),
   only shorter and without buttons / points.
   ========================================================================== */

.cs-sv--info.e-con {
  --min-height: 280px !important;
  --padding-top: 56px !important;
  --padding-bottom: 56px !important;
  min-height: 280px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.cs-sv--info .cs-sv-title .elementor-heading-title {
  max-width: 13em;
  font-size: clamp(26px, 2.6vw, 34px) !important;
}

.cs-sv--info .cs-sv-title.elementor-widget {
  margin-bottom: 16px !important;
}

.cs-sv--info .cs-sv-sub.elementor-widget {
  margin-bottom: 0 !important;
}

.cs-sv--info .cs-sv-sub .elementor-widget-container,
.cs-sv--info .cs-sv-sub p {
  max-width: 470px;
}

/* desktop: text on the left half, photo clearly visible on the right */
@media (min-width: 1025px) {
  .cs-sv--info .cs-sv-copy.e-con {
    max-width: 48%;
  }

  .cs-sv--info.e-con::before {
    background: linear-gradient(
      90deg,
      #f8efe6 0%,
      #f8efe6 40%,
      rgba(248, 239, 230, 0.85) 48%,
      rgba(248, 239, 230, 0.25) 60%,
      rgba(248, 239, 230, 0) 74%
    ) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-sv--info.e-con {
    --min-height: 260px !important;
    --padding-top: 48px !important;
    --padding-bottom: 48px !important;
    min-height: 260px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 767px) {
  .cs-sv--info.e-con {
    --min-height: 0px !important;
    --padding-top: calc(var(--sv-img) - 20px) !important;
    --padding-bottom: 36px !important;
    min-height: 0;
    padding-top: calc(var(--sv-img) - 20px);
    padding-bottom: 36px;
  }

  .cs-sv--info .cs-sv-title .elementor-heading-title {
    font-size: 24px !important;
  }

  .cs-sv--info .cs-sv-sub .elementor-widget-container,
  .cs-sv--info .cs-sv-sub p {
    max-width: none;
  }
}

/* ==========================================================================
   Service detail page: common problems (template: service-detail-problems.json)
   Same look as the home page: light blue section (#f0f8fa), white cards
   (.cs-card: shadow, hover lift, photo zoom, icon fill) and the same entrance.
   Desktop 4 cards in a row (icon beside the text), tablet 2 x 2,
   phone 2 x 2 (icon sits on the photo, text below).
   ========================================================================== */

.cs-pr.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --padding-top: var(--cs-sec-y, 88px) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: var(--cs-sec-y, 88px) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: var(--cs-sec-y, 88px) var(--cs-pad-x);
}

.cs-pr .elementor-heading-title,
.cs-pr .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-pr .cs-pr-title.elementor-widget {
  margin-bottom: var(--cs-head-gap, 40px) !important;
}

.cs-pr-title .elementor-heading-title {
  color: #0e1720 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

/* Desktop: as many columns as there are cards (max 4 per row), so deleting a card makes
   the rest grow to the full width. auto-fit drops the empty columns. */
.cs-pr-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 8px 0 12px;
}

.cs-pr-grid > .cs-pr-card.e-con {
  flex: none !important;
  width: auto !important;
  max-width: none;
  --width: auto !important;
}

.cs-pr .cs-card-photo .elementor-widget-container,
.cs-pr .cs-card-photo img {
  height: 150px !important;
}

/* desktop: round icon on the left, name + text on the right */
.cs-pr .cs-card-body.e-con {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px;
  --flex-direction: row !important;
  --align-items: flex-start !important;
  --gap: 12px 12px !important;
  --padding-top: 16px !important;
  --padding-right: 16px !important;
  --padding-bottom: 18px !important;
  --padding-left: 16px !important;
  padding: 16px 16px 18px;
}

.cs-pr .cs-card-icon.elementor-widget {
  flex: 0 0 auto;
  width: auto;
  margin: 0 !important;
}

.cs-pr .cs-card-icon .elementor-icon {
  width: 38px;
  height: 38px;
  font-size: 15px;
}

.cs-pr-text.e-con {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  background: transparent;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --width: auto !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-pr .cs-card-name .elementor-heading-title {
  min-height: 0;
  margin: 0 0 4px;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.cs-pr .cs-card-desc .elementor-widget-container,
.cs-pr .cs-card-desc p {
  color: #5f6c78 !important;
}

/* tablet: 2 x 2 (a lonely last card, e.g. when there are 3, takes the full width) */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-pr-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .cs-pr-grid > .cs-pr-card.e-con:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cs-pr .cs-card-photo .elementor-widget-container,
  .cs-pr .cs-card-photo img {
    height: 170px !important;
  }
}

/* phone: 2 x 2, icon sits on the photo, text below (a lonely last card takes the full width) */
@media (max-width: 767px) {
  .cs-pr-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 0;
  }

  .cs-pr-grid > .cs-pr-card.e-con:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cs-pr .cs-card-photo .elementor-widget-container,
  .cs-pr .cs-card-photo img {
    height: 104px !important;
  }

  .cs-pr .cs-card-body.e-con {
    flex-direction: column !important;
    gap: 0;
    --flex-direction: column !important;
    --gap: 0px 0px !important;
    --padding-top: 0px !important;
    --padding-right: 12px !important;
    --padding-bottom: 14px !important;
    --padding-left: 12px !important;
    padding: 0 12px 14px;
  }

  .cs-pr .cs-card-icon.elementor-widget {
    position: relative;
    z-index: 2;
    margin: -18px 0 8px !important;
  }

  .cs-pr .cs-card-icon .elementor-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .cs-pr-text.e-con {
    flex: 0 0 auto;
    width: 100%;
  }

  .cs-pr .cs-card-name .elementor-heading-title {
    font-size: 15px !important;
  }

  .cs-pr .cs-card-desc .elementor-widget-container,
  .cs-pr .cs-card-desc p {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   Service detail page: benefits (template: service-detail-benefits.json)
   White section (the section before is light blue), soft teal cards.
   Desktop 4 in a row, tablet 2 x 2, phone 2 x 2.
   ========================================================================== */

.cs-bn.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff;
  --padding-top: var(--cs-sec-y, 88px) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: var(--cs-sec-y, 88px) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: var(--cs-sec-y, 88px) var(--cs-pad-x);
}

.cs-bn .elementor-heading-title,
.cs-bn .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-bn .cs-bn-title.elementor-widget {
  margin-bottom: var(--cs-head-gap, 40px) !important;
}

.cs-bn-title .elementor-heading-title {
  color: #0e1720 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.cs-bn-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 8px 0 12px;
}

.cs-bn-card.e-con {
  box-sizing: border-box;
  flex: none !important;
  width: auto !important;
  max-width: none;
  min-width: 0;
  height: 100%;
  background-color: #eaf6f5;
  border: 1px solid #d3ecea;
  border-radius: 16px;
  --width: auto !important;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.cs-bn .cs-bn-icon.elementor-widget {
  width: auto;
  margin: 0 0 16px !important;
}

.cs-bn .cs-bn-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 18px;
  border: 1.5px solid #00a39c;
  border-radius: 50%;
  background: #ffffff;
  color: #00a39c;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.4s ease, color 0.4s ease;
}

.cs-bn .cs-bn-icon .elementor-icon i,
.cs-bn .cs-bn-icon .elementor-icon svg {
  color: #00a39c;
  fill: #00a39c;
  transition: color 0.4s ease, fill 0.4s ease;
}

.cs-bn .cs-bn-name.elementor-widget {
  margin-bottom: 8px !important;
}

.cs-bn-name .elementor-heading-title {
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.cs-bn-desc .elementor-widget-container,
.cs-bn-desc p {
  color: #4a5a66 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

@media (hover: hover) and (min-width: 768px) {
  .cs-bn-card.e-con:hover {
    transform: translateY(-8px);
    border-color: #b7e6e2;
    box-shadow: 0 18px 40px rgba(0, 163, 156, 0.18);
  }

  .cs-bn-card.e-con:hover .cs-bn-icon .elementor-icon {
    background: #00a39c;
    transform: scale(1.08) rotate(-8deg);
  }

  .cs-bn-card.e-con:hover .cs-bn-icon .elementor-icon i,
  .cs-bn-card.e-con:hover .cs-bn-icon .elementor-icon svg {
    color: #ffffff;
    fill: #ffffff;
  }
}

/* tablet: 2 x 2 */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-bn-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

/* phone: 2 x 2 */
@media (max-width: 767px) {
  .cs-bn-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 0;
  }

  .cs-bn-card.e-con {
    border-radius: 14px;
  }

  .cs-bn .cs-bn-icon.elementor-widget {
    margin-bottom: 12px !important;
  }

  .cs-bn .cs-bn-icon .elementor-icon {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .cs-bn-name .elementor-heading-title {
    font-size: 14.5px !important;
  }

  .cs-bn-desc .elementor-widget-container,
  .cs-bn-desc p {
    font-size: 12.5px !important;
  }
}

/* enquiry section colours: white section, light blue card (theme) */
.cs-en.e-con {
  background-color: #ffffff !important;
}

.cs-en .cs-en-card.e-con {
  background-color: #f0f8fa !important;
  border-color: #dcebef !important;
}

/* ==========================================================================
   Service detail page: process (template: service-detail-process.json)
   Light blue section, teal round icons joined by a thin arrow line.
   Desktop 4 steps in a row, tablet and phone 2 x 2 (no arrow lines).
   ========================================================================== */

.cs-pc.e-con {
  --pc-gap: 28px;
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --padding-top: var(--cs-sec-y, 88px) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: var(--cs-sec-y, 88px) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: var(--cs-sec-y, 88px) var(--cs-pad-x);
}

.cs-pc .elementor-heading-title,
.cs-pc .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-pc .cs-pc-title.elementor-widget {
  margin-bottom: var(--cs-head-gap, 40px) !important;
}

.cs-pc-title .elementor-heading-title {
  color: #0e1720 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.cs-pc-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--pc-gap) !important;
  align-items: start;
  width: 100%;
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-pc-step.e-con {
  position: relative;
  box-sizing: border-box;
  flex: none !important;
  width: auto !important;
  min-width: 0;
  background: transparent;
  --width: auto !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

/* thin arrow line from this step's icon to the next one */
.cs-pc-step.e-con:not(:last-child)::after {
  content: "" !important;
  position: absolute;
  top: 26px;
  left: 68px;
  width: calc(100% - 68px + var(--pc-gap) - 16px);
  height: 12px;
  margin-top: -6px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12' fill='none' stroke='%2300a39c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L7 6l-5.5 4.5'/%3E%3C/svg%3E") no-repeat right center / 9px 12px,
    linear-gradient(#a9d6d3, #a9d6d3) no-repeat left center / calc(100% - 3px) 1px;
}

.cs-pc .cs-pc-icon.elementor-widget {
  width: auto;
  margin: 0 0 16px !important;
}

.cs-pc .cs-pc-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  background: #00a39c;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 8px 18px rgba(0, 163, 156, 0.28);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, background-color 0.4s ease;
}

.cs-pc .cs-pc-icon .elementor-icon i,
.cs-pc .cs-pc-icon .elementor-icon svg {
  color: #ffffff;
  fill: #ffffff;
}

.cs-pc-num .elementor-heading-title {
  color: #6b7785 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
}

.cs-pc .cs-pc-num.elementor-widget {
  margin-bottom: 4px !important;
}

.cs-pc .cs-pc-name.elementor-widget {
  margin-bottom: 8px !important;
}

.cs-pc-name .elementor-heading-title {
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.cs-pc-desc .elementor-widget-container,
.cs-pc-desc p {
  max-width: 240px;
  color: #4a5a66 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

@media (hover: hover) and (min-width: 768px) {
  .cs-pc-step.e-con:hover .cs-pc-icon .elementor-icon {
    background: #008f89;
    box-shadow: 0 14px 26px rgba(0, 163, 156, 0.38);
    transform: translateY(-5px) scale(1.06);
  }
}

/* tablet + phone: 2 x 2, no arrow lines */
@media (max-width: 1024px) {
  .cs-pc-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 20px !important;
  }

  .cs-pc-step.e-con:not(:last-child)::after {
    display: none;
  }

  .cs-pc-desc .elementor-widget-container,
  .cs-pc-desc p {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .cs-pc-grid.e-con {
    gap: 26px 14px !important;
  }

  .cs-pc .cs-pc-icon .elementor-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .cs-pc .cs-pc-icon.elementor-widget {
    margin-bottom: 12px !important;
  }

  .cs-pc-name .elementor-heading-title {
    font-size: 14.5px !important;
  }

  .cs-pc-desc .elementor-widget-container,
  .cs-pc-desc p {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   Service detail page: care guide banner (template: service-detail-care.json)
   Same banner as .cs-sv / .cs-sv--info (cream overlay, photo right, phone:
   photo on top). Only the taller height, two text styles and the button differ.
   ========================================================================== */

.cs-sv--care.e-con {
  --min-height: 340px !important;
  --padding-top: 64px !important;
  --padding-bottom: 64px !important;
  min-height: 340px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.cs-sv--care .cs-sv-title .elementor-heading-title {
  max-width: 12em;
  font-size: clamp(28px, 3vw, 38px) !important;
}

.cs-sv--care .cs-sv-sub.elementor-widget {
  margin-bottom: 14px !important;
}

.cs-sv--care .cs-cg-text.elementor-widget {
  margin-bottom: 26px !important;
}

.cs-sv--care .cs-cg-lead p {
  color: #12202c !important;
  font-weight: 500 !important;
}

.cs-sv--care .cs-cg-text p {
  font-size: 14px !important;
}

.cs-sv--care .cs-btn-quote.elementor-widget {
  width: auto;
  margin: 0 !important;
}

@media (min-width: 1025px) {
  .cs-sv--care .cs-sv-copy.e-con {
    max-width: 46%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-sv--care.e-con {
    --min-height: 300px !important;
    --padding-top: 52px !important;
    --padding-bottom: 52px !important;
    min-height: 300px;
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

@media (max-width: 767px) {
  .cs-sv--care.e-con {
    --min-height: 0px !important;
    --padding-top: calc(var(--sv-img) - 20px) !important;
    --padding-bottom: 36px !important;
    min-height: 0;
    padding-top: calc(var(--sv-img) - 20px);
    padding-bottom: 36px;
  }

  .cs-sv--care .cs-sv-title .elementor-heading-title {
    max-width: none;
    font-size: 26px !important;
  }

  .cs-sv--care .cs-cg-text.elementor-widget {
    margin-bottom: 22px !important;
  }

  .cs-sv--care .cs-btn-quote.elementor-widget,
  .cs-sv--care .cs-btn-quote .elementor-widget-container,
  .cs-sv--care .cs-btn-quote .elementor-button-wrapper {
    width: 100% !important;
  }

  .cs-sv--care .cs-btn-quote .elementor-button {
    width: 100% !important;
    padding: 13px 16px !important;
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   Service detail page: care lists (template: service-detail-lists.json)
   Three soft cards: teal (tips), warm red (avoid), light blue (signs).
   Desktop 3 in a row, tablet 2 + 1 wide, phone 1 per row.
   ========================================================================== */

.cs-cl.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff;
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: calc(var(--cs-sec-y, 88px) * 0.8) var(--cs-pad-x);
}

.cs-cl-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 8px 0 12px;
}

.cs-cl-card.e-con {
  box-sizing: border-box;
  flex: none !important;
  width: auto !important;
  min-width: 0;
  height: 100%;
  --width: auto !important;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}

.cs-cl .elementor-heading-title {
  margin: 0;
  padding: 0;
}

.cs-cl .cs-cl-title.elementor-widget {
  margin-bottom: 20px !important;
}

.cs-cl-title .elementor-heading-title {
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

/* list: icon on the left, text wraps neatly beside it */
.cs-cl-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-cl-list .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}

.cs-cl-list .elementor-icon-list-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  width: 20px;
  margin-top: 1px;
  padding: 0 !important;
  font-size: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-cl-list .elementor-icon-list-icon i,
.cs-cl-list .elementor-icon-list-icon svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.cs-cl-list .elementor-icon-list-text {
  padding: 0 !important;
  color: #3c4a55 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.cs-cl-card--tips .elementor-icon-list-icon {
  color: #00a39c;
}

.cs-cl-card--avoid .elementor-icon-list-icon {
  color: #d9534f;
}

.cs-cl-card--signs .elementor-icon-list-icon {
  color: #5e7a8a;
}

@media (hover: hover) and (min-width: 768px) {
  .cs-cl-card.e-con:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(14, 23, 32, 0.1);
  }

  .cs-cl-card.e-con:hover .elementor-icon-list-icon {
    transform: scale(1.12);
  }
}

/* tablet: 2 cards, the third one is full width */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-cl-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .cs-cl-card--signs.e-con {
    grid-column: 1 / -1;
  }
}

/* phone: one card per row */
@media (max-width: 767px) {
  .cs-cl-grid.e-con {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding-top: 0;
  }

  .cs-cl-title .elementor-heading-title {
    font-size: 16px !important;
  }

  .cs-cl-list .elementor-icon-list-items {
    gap: 12px;
  }

  .cs-cl-list .elementor-icon-list-text {
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   Service detail page: care lists (template: service-detail-lists.json)
   Three soft cards: teal (tips), warm red (avoid), light blue (signs).
   Desktop 3 in a row, tablet 2 + 1 wide, phone 1 per row.
   ========================================================================== */

.cs-cl.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff;
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: calc(var(--cs-sec-y, 88px) * 0.8) var(--cs-pad-x);
}

.cs-cl-grid.e-con {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 8px 0 12px;
}

.cs-cl-card.e-con {
  box-sizing: border-box;
  flex: none !important;
  width: auto !important;
  min-width: 0;
  height: 100%;
  --width: auto !important;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}

.cs-cl .elementor-heading-title {
  margin: 0;
  padding: 0;
}

.cs-cl .cs-cl-title.elementor-widget {
  margin-bottom: 20px !important;
}

.cs-cl-title .elementor-heading-title {
  color: #0e1720 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

/* list: icon on the left, text wraps neatly beside it */
.cs-cl-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-cl-list .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}

.cs-cl-list .elementor-icon-list-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  width: 20px;
  margin-top: 1px;
  padding: 0 !important;
  font-size: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-cl-list .elementor-icon-list-icon i,
.cs-cl-list .elementor-icon-list-icon svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.cs-cl-list .elementor-icon-list-text {
  padding: 0 !important;
  color: #3c4a55 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.cs-cl-card--tips .elementor-icon-list-icon {
  color: #00a39c;
}

.cs-cl-card--avoid .elementor-icon-list-icon {
  color: #d9534f;
}

.cs-cl-card--signs .elementor-icon-list-icon {
  color: #5e7a8a;
}

@media (hover: hover) and (min-width: 768px) {
  .cs-cl-card.e-con:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(14, 23, 32, 0.1);
  }

  .cs-cl-card.e-con:hover .elementor-icon-list-icon {
    transform: scale(1.12);
  }
}

/* tablet: 2 cards, the third one is full width */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-cl-grid.e-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .cs-cl-card--signs.e-con {
    grid-column: 1 / -1;
  }
}

/* phone: one card per row */
@media (max-width: 767px) {
  .cs-cl-grid.e-con {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding-top: 0;
  }

  .cs-cl-title .elementor-heading-title {
    font-size: 16px !important;
  }

  .cs-cl-list .elementor-icon-list-items {
    gap: 12px;
  }

  .cs-cl-list .elementor-icon-list-text {
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   Service detail page: FAQ (template: service-detail-faq.json)
   Light blue section, two columns of questions. The accordion itself is the
   home page one (.cs-faq-acc: white cards, + / - icon, teal left edge when open).
   Phone: the two columns become ONE list - same 10px gap between every item.
   ========================================================================== */

.cs-fq.e-con {
  box-sizing: border-box;
  width: 100%;
  background-color: #f0f8fa !important;
  --padding-top: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-right: var(--cs-pad-x) !important;
  --padding-bottom: calc(var(--cs-sec-y, 88px) * 0.8) !important;
  --padding-left: var(--cs-pad-x) !important;
  padding: calc(var(--cs-sec-y, 88px) * 0.8) var(--cs-pad-x);
}

.cs-fq-head.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  margin: 0 0 var(--cs-head-gap, 40px);
  background: transparent;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-fq .elementor-heading-title,
.cs-fq .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-fq-title .elementor-heading-title {
  color: #0e1720 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.cs-fq .cs-fq-title.elementor-widget {
  margin-bottom: 10px !important;
}

.cs-fq-sub .elementor-widget-container,
.cs-fq-sub p {
  max-width: 640px;
  color: #4a5a66 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.cs-fq-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px 24px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: nowrap !important;
  --align-items: flex-start !important;
  --gap: 10px 24px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-fq-col.e-con {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent;
  --width: auto !important;
  --flex-direction: column !important;
  --align-items: stretch !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-fq-col .elementor-widget {
  width: 100%;
  margin: 0 !important;
}

/* phone: one list, the gap between the two columns = the gap between items (10px) */
@media (max-width: 767px) {
  .cs-fq-row.e-con {
    flex-direction: column !important;
    gap: 10px;
    --flex-direction: column !important;
    --gap: 10px 10px !important;
    --row-gap: 10px !important;
    --column-gap: 10px !important;
  }

  .cs-fq-col.e-con {
    flex: 0 0 auto !important;
    width: 100% !important;
    --width: 100% !important;
  }

  .cs-fq-sub .elementor-widget-container,
  .cs-fq-sub p {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   Service DETAIL page: Book / Enquiry banner (template: service-detail-cta.json)
   White section, inside it a rounded cream card. Photo = card background image
   (left on desktop, on top on phone). Buttons reuse .cs-btn-quote / .cs-btn-ghost.
   ========================================================================== */

.cs-ct.e-con {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #ffffff !important;
  --flex-direction: column !important;
  --padding-left: var(--cs-pad-x) !important;
  --padding-right: var(--cs-pad-x) !important;
  padding-left: var(--cs-pad-x);
  padding-right: var(--cs-pad-x);
}

.cs-ct-card.e-con {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid #eadfd2;
  border-radius: 24px;
  background-color: #f8efe6;
  background-repeat: no-repeat;
  background-position: left center !important; /* whole photo on the left, never zoomed in */
  background-size: auto 100% !important;
  box-shadow: 0 18px 44px -24px rgba(6, 28, 48, 0.22);
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --min-height: 300px !important;
  /* copy starts after the photo: photo takes the left ~40% */
  --padding-top: 44px !important;
  --padding-bottom: 44px !important;
  --padding-right: 56px !important;
  --padding-left: 44% !important;
  padding: 44px 56px 44px 44%;
}

/* fade: photo on the left melts into the cream */
.cs-ct-card.e-con::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(248, 239, 230, 0) 0%,
    rgba(248, 239, 230, 0) 24%,
    rgba(248, 239, 230, 0.7) 36%,
    #f8efe6 44%,
    #f8efe6 100%
  ) !important;
}

.cs-ct-card.e-con > .e-con,
.cs-ct-card.e-con > .elementor-element {
  position: relative;
  z-index: 2;
}

.cs-ct-copy.e-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background: transparent;
  --width: 100% !important;
  --flex-direction: column !important;
  --align-items: flex-start !important;
  --gap: 0px 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-ct .elementor-heading-title,
.cs-ct .elementor-widget-text-editor p {
  margin: 0;
  padding: 0;
}

.cs-ct-copy .elementor-widget { margin-bottom: 0; }
.cs-ct-copy .cs-ct-eyebrow.elementor-widget { margin-bottom: 12px !important; }
.cs-ct-copy .cs-ct-title.elementor-widget { margin-bottom: 14px !important; }
.cs-ct-copy .cs-ct-sub.elementor-widget { margin-bottom: 26px !important; }

.cs-ct-eyebrow .elementor-heading-title {
  color: #00857f !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.cs-ct-title .elementor-heading-title {
  color: #061c30 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(28px, 2.9vw, 36px) !important;
  font-weight: 600 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.cs-ct-sub .elementor-widget-container,
.cs-ct-sub p {
  margin: 0;
  max-width: 520px;
  color: #3c4a55 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.cs-ct-actions.e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  background: transparent;
  --flex-direction: row !important;
  --flex-wrap: wrap !important;
  --gap: 12px 12px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  padding: 0;
}

.cs-ct-actions .elementor-widget {
  width: auto;
  margin: 0 !important;
}

/* tablet: photo a little narrower */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-ct-card.e-con {
    --min-height: 280px !important;
    --padding-top: 36px !important;
    --padding-bottom: 36px !important;
    --padding-right: 36px !important;
    --padding-left: 42% !important;
    min-height: 280px;
    padding: 36px 36px 36px 42%;
  }

  .cs-ct-card.e-con::before {
    background: linear-gradient(
      90deg,
      rgba(248, 239, 230, 0) 0%,
      rgba(248, 239, 230, 0) 22%,
      rgba(248, 239, 230, 0.7) 34%,
      #f8efe6 42%,
      #f8efe6 100%
    ) !important;
  }
}

/* phone: photo on top, text below on the cream, buttons side by side */
@media (max-width: 767px) {
  .cs-ct-card.e-con {
    --ct-img: min(58vw, 240px);
    --min-height: 0px !important;
    --padding-top: calc(var(--ct-img) - 14px) !important;
    --padding-right: 20px !important;
    --padding-bottom: 28px !important;
    --padding-left: 20px !important;
    min-height: 0;
    padding: calc(var(--ct-img) - 14px) 20px 28px;
    border-radius: 20px;
    background-position: center top !important;
    background-size: 100% auto !important;
  }

  .cs-ct-card.e-con::before {
    background: linear-gradient(
      180deg,
      rgba(248, 239, 230, 0) 0,
      rgba(248, 239, 230, 0) calc(var(--ct-img) - 90px),
      rgba(248, 239, 230, 0.85) calc(var(--ct-img) - 34px),
      #f8efe6 var(--ct-img),
      #f8efe6 100%
    ) !important;
  }

  .cs-ct-title .elementor-heading-title {
    font-size: 25px !important;
  }

  .cs-ct-sub .elementor-widget-container,
  .cs-ct-sub p {
    max-width: none;
    font-size: 14px !important;
  }

  .cs-ct-actions.e-con {
    --flex-wrap: nowrap !important;
    flex-wrap: nowrap;
  }

  .cs-ct-actions .elementor-widget {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }

  .cs-ct-actions .elementor-widget-container,
  .cs-ct-actions .elementor-button-wrapper {
    width: 100% !important;
  }

  .cs-ct-actions .elementor-button {
    width: 100% !important;
    min-height: 44px;
    padding: 10px 10px !important;
    gap: 6px;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Related Services (cs-rs)
   Output of the shortcode [cs_related_services] (function.php), shown at the
   bottom of every service detail page. Cards are filled automatically from the
   other service pages: Featured Image + page title. Light blue background so it
   alternates with the white banner above. Reveal animation: script.js block
   "Related Services reveal". Template: service-detail-related.json (just a
   Shortcode widget in an empty full width container).
   ========================================================================== */

.cs-rs-slot.e-con {
  width: 100%;
  background: transparent;
  --width: 100% !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  --gap: 0px 0px !important;
  padding: 0;
}

.cs-rs-slot .elementor-widget-shortcode,
.cs-rs-slot .elementor-shortcode {
  width: 100%;
  margin: 0 !important;
}

.cs-rs {
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--cs-sec-y, 88px) * 0.7) var(--cs-pad-x);
  background: #f0f8fa;
}

.cs-rs *,
.cs-rs *::before,
.cs-rs *::after {
  box-sizing: border-box;
}

.cs-rs-title {
  margin: 0 0 28px !important;
  padding: 0;
  color: #061c30 !important;
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 600 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-align: left;
}

.cs-rs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cs-rs-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cs-rs-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dcebef;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(6, 28, 48, 0.08);
  color: #061c30 !important;
  text-decoration: none !important;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.cs-rs-photo {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #d9eeed, #f8efe6);
  line-height: 0;
}

.cs-rs-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-rs-noimg {
  display: block;
  width: 100%;
  height: 100%;
}

.cs-rs-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
}

.cs-rs-name {
  min-width: 0;
  color: #061c30;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.cs-rs-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e3f4f3;
  color: #00a39c;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-rs-arrow svg {
  display: block;
  width: 15px;
  height: 15px;
}

.cs-rs-card:hover,
.cs-rs-card:focus-visible {
  border-color: #b9e0de;
  box-shadow: 0 20px 40px rgba(6, 28, 48, 0.16);
  transform: translateY(-6px);
}

.cs-rs-card:hover .cs-rs-photo img,
.cs-rs-card:focus-visible .cs-rs-photo img {
  transform: scale(1.07);
}

.cs-rs-card:hover .cs-rs-arrow,
.cs-rs-card:focus-visible .cs-rs-arrow {
  background: #00a39c;
  color: #ffffff;
  transform: translateX(3px);
}

.cs-rs-card:focus-visible {
  outline: 2px solid #00a39c;
  outline-offset: 3px;
}

/* entrance: only hidden when script.js is running (class cs-rs--js), so the cards never stay invisible */
.cs-rs--js .cs-rs-title,
.cs-rs--js .cs-rs-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-rs--js .cs-rs-item {
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}

.cs-rs--js.is-in .cs-rs-title,
.cs-rs--js.is-in .cs-rs-item {
  opacity: 1;
  transform: none;
}

/* hover transform must not wait for the entrance delay */
.cs-rs--js.is-in .cs-rs-item {
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}

@media (max-width: 1024px) {
  .cs-rs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cs-rs-photo {
    aspect-ratio: 16 / 10;
  }
}

/* phone: 2 + 2 */
@media (max-width: 767px) {
  .cs-rs-grid {
    gap: 12px;
  }

  .cs-rs-title {
    margin-bottom: 20px !important;
    font-size: 24px !important;
  }

  .cs-rs-photo {
    aspect-ratio: 4 / 3;
  }

  .cs-rs-body {
    align-items: flex-start;
    gap: 6px;
    padding: 11px 12px;
  }

  .cs-rs-name {
    font-size: 13px;
  }

  .cs-rs-arrow {
    width: 26px;
    height: 26px;
  }

  .cs-rs-arrow svg {
    width: 13px;
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-rs--js .cs-rs-title,
  .cs-rs--js .cs-rs-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cs-rs-card,
  .cs-rs-photo img,
  .cs-rs-arrow {
    transition: none;
  }
}

/* Elementor editor: always show the enquiry text box (hover text) so it can be edited */
.elementor-editor-active .cs-en-copy.e-con {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.elementor-editor-active .cs-en-photo .elementor-widget-container::after {
  display: none !important;
}

@media (max-width: 767px) {
  .elementor-editor-active .cs-en-copy.e-con {
    max-height: none !important;
    margin-top: 22px !important;
  }
}