/* ==================================================
   LUXURY DESIGN SYSTEM VARIABLES
================================================== */
:root {
  /* Rich Emerald Palette */
  --header-emerald-deep: #02201c;
  --header-emerald-dark: #043831;
  --header-emerald: #08594e;
  --header-mint: #118f7f;
  --header-mint-bright: #1bc4af;

  /* Luxury Gold & Champagne Accents */
  --header-gold: #cba862;
  --header-gold-light: #f2e3be;
  --header-gold-glow: rgba(203, 168, 98, 0.25);

  /* Neutrals & Glass Surface Colors */
  --header-white: #ffffff;
  --header-off-white: #f8faf9;
  --header-glass-bg: rgba(255, 255, 255, 0.88);
  --header-glass-border: rgba(255, 255, 255, 0.4);

  /* Text Colors */
  --header-text: #0d1a17;
  --header-muted: #53635e;

  /* Refined Shadows & Borders */
  --header-border: rgba(8, 89, 78, 0.08);
  --header-shadow-soft: 0 20px 40px rgba(2, 32, 28, 0.06);
  --header-shadow-luxury:
    0 30px 70px rgba(2, 32, 28, 0.12), 0 10px 20px rgba(2, 32, 28, 0.04);
  --header-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================================================
   BASE
================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--header-text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--header-white);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* ==================================================
   SITE HEADER
================================================== */
.site-header {
  position: relative;
  z-index: 10;
  background: var(--header-white);
}

/* ==================================================
   NAVBAR (LUXURY DEEP EMERALD)
================================================== */
.site-navbar {
  position: relative;
  z-index: 1000;
  min-height: 106px;
  padding: 8px 0;
  background: linear-gradient(
    135deg,
    var(--header-emerald-deep) 0%,
    var(--header-emerald-dark) 60%,
    var(--header-emerald) 100%
  );
  box-shadow: 0 10px 30px rgba(2, 32, 28, 0.25);
  border-bottom: 1px solid rgba(203, 168, 98, 0.15);
}

.site-navbar .container {
  position: relative;
}

/* NAVBAR BRAND & LOGO */
.site-navbar .navbar-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: 24px;
  padding: 0;
}

.navbar-logo {
  display: block;
  width: 330px;
  height: auto;
  max-height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* NAVBAR LAYOUT & NAVIGATION LINKS */
.site-navbar .navbar-collapse {
  align-items: center;
}

.site-navbar .navbar-nav {
  align-items: center;
  gap: 4px;
}

.site-navbar .nav-item {
  position: relative;
}

.site-navbar .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 8px;
  transition:
    color var(--header-transition),
    background-color var(--header-transition);
}

.site-navbar .nav-link::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 4px;
  left: 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--header-gold),
    var(--header-gold-light)
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--header-transition);
}
.nav-link{
color: white !important;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-link.active,
.site-navbar .nav-link.show {
  color: black;
  background: rgba(255, 255, 255, 0.06);
}

.site-navbar .nav-link:hover::before,
.site-navbar .nav-link:focus::before,
.site-navbar .nav-link.active::before,
.site-navbar .nav-link.show::before {
  transform: scaleX(1);
}

.site-navbar .dropdown-toggle::after {
  display: none;
}

/* SERVICES TOGGLE & DROPDOWN */
.services-toggle {
  cursor: pointer;
}

.services-arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 0.8rem;
  color: var(--header-gold);
  transition: transform var(--header-transition);
}

.services-dropdown:hover .services-arrow,
.services-dropdown:focus-within .services-arrow,
.services-toggle.show .services-arrow {
  transform: rotate(180deg);
}

.services-menu {
  min-width: 380px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(203, 168, 98, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 60px rgba(2, 32, 28, 0.2);
}

.services-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 35px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(203, 168, 98, 0.2);
  border-left: 1px solid rgba(203, 168, 98, 0.2);
  background: var(--header-white);
  transform: rotate(45deg);
}

.services-menu li + li {
  margin-top: 6px;
}

.services-menu .dropdown-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 14px;
  color: var(--header-text);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
  transition: all var(--header-transition);
}

.services-menu .dropdown-item:hover,
.services-menu .dropdown-item:focus {
  color: var(--header-emerald-deep);
  background: linear-gradient(
    90deg,
    rgba(8, 89, 78, 0.08),
    rgba(203, 168, 98, 0.08)
  );
  transform: translateX(4px);
}

.dropdown-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--header-white);
  font-size: 1.1rem;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--header-emerald),
    var(--header-emerald-dark)
  );
  box-shadow: 0 6px 16px rgba(8, 89, 78, 0.25);
}

.dropdown-item__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--header-gold);
  font-size: 0.9rem;
  transition: transform var(--header-transition);
}

.services-menu .dropdown-item:hover .dropdown-item__arrow,
.services-menu .dropdown-item:focus .dropdown-item__arrow {
  transform: translateX(4px);
}

/* NAVBAR CTA (GOLD ACCENT BUTTON) */
.navbar-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  margin-left: 18px;
  padding: 12px 24px;
  color: var(--header-emerald-deep);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--header-gold);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--header-gold-light),
    var(--header-gold)
  );
  box-shadow: 0 8px 20px var(--header-gold-glow);
  transition: all var(--header-transition);
}

.navbar-cta:hover,
.navbar-cta:focus {
  color: var(--header-white);
  background: var(--header-emerald-deep);
  border-color: var(--header-emerald-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(2, 32, 28, 0.3);
}

/* NAVBAR TOGGLER */
.site-navbar .navbar-toggler {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--header-gold-light);
  font-size: 1.6rem;
  border: 1px solid rgba(203, 168, 98, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

/* FOCUS STYLES */
.site-navbar .navbar-brand:focus-visible,
.site-navbar .nav-link:focus-visible,
.navbar-cta:focus-visible,
.services-menu .dropdown-item:focus-visible {
  outline: 2px solid var(--header-gold);
  outline-offset: 3px;
}

.phone-digits {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ==================================================
   TITLE AIRFLOW DIVIDER (TWO-TONE GREEN)
================================================== */
.hero-title-divider {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

.airflow-shape {
  width: 130px;
  /* Adjust scale to fit your preferred width */
  height: auto;
  overflow: visible;
}

/* Bottom / Main Wave Blade (Darker Emerald) */
.airflow-blade--main {
  fill: #08594e;
  /* Deep Emerald Green */
  opacity: 0.95;
  animation: airflowGliderMain 4s ease-in-out infinite alternate;
}

/* Top / Accent Wave Blade (Lighter Mint) */
.airflow-blade--accent {
  fill: #2cb8a1;
  /* Light Mint / Seafoam Green */
  opacity: 0.85;
  animation: airflowGliderAccent 4s ease-in-out infinite alternate-reverse;
}

/* Subtle motion effect */
@keyframes airflowGliderMain {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, -1px);
  }
}

@keyframes airflowGliderAccent {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, 1px);
  }
}

/* Center under title on mobile / stacked layouts */
@media (max-width: 767.98px) {
  .hero-title-divider {
    justify-content: center;
  }
}

/* ==================================================
   INLINE AIRFLOW SHAPE BESIDE "TX"
================================================== */
.title-with-airflow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Space between "TX" and the airflow icon */
  white-space: nowrap;
  /* Prevents icon from breaking onto a new line by itself */
}

.airflow-inline-shape {
  width: 90px;
  /* Adjust width relative to your font size */
  height: auto;
  overflow: visible;
  vertical-align: middle;
}

/* Shade 1: Darker Emerald Green */
.airflow-blade--main {
  fill: #08594e;
  opacity: 0.95;
  animation: airflowGliderMain 4s ease-in-out infinite alternate;
}

/* Shade 2: Lighter Mint Green */
.airflow-blade--accent {
  fill: #2cb8a1;
  opacity: 0.85;
  animation: airflowGliderAccent 4s ease-in-out infinite alternate-reverse;
}

/* Subtle motion effect */
@keyframes airflowGliderMain {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, -1px);
  }
}

@keyframes airflowGliderAccent {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, 1px);
  }
}

/* ==================================================
   DESKTOP NAVIGATION BREAKPOINTS
================================================== */
@media (min-width: 992px) {
  .site-navbar .navbar-toggler {
    display: none !important;
  }

  .site-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .site-navbar .navbar-nav {
    flex-direction: row;
  }

  .services-dropdown > .services-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: all var(--header-transition);
  }

  .services-dropdown:hover > .services-menu,
  .services-dropdown:focus-within > .services-menu,
  .services-dropdown > .services-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .services-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 16px;
  }
}

/* ==================================================
   HERO SECTION (LUXURY GLASS & ATMOSPHERIC AIRFLOW)
================================================== */
.hero-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 0 160px;
  background: var(--header-off-white);
}

/* REIMAGINED ATMOSPHERIC AIRFLOW BACKGROUND */
.hero-header::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  left: 0;
  height: 480px;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(27, 196, 175, 0.15) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 10% 60%,
      rgba(203, 168, 98, 0.12) 0%,
      transparent 45%
    ),
    linear-gradient(
      135deg,
      var(--header-emerald-deep) 0%,
      var(--header-emerald-dark) 50%,
      var(--header-emerald) 100%
    );
}

.hero-header::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 480px;
  opacity: 0.12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Cg fill='%23ffffff'%3E%3Cg transform='translate(0,10)'%3E%3Cpath d='M5 24C20 13 34 13 49 20C63 26 76 31 92 30C78 35 63 36 49 30C35 24 20 23 5 24Z'/%3E%3Cpath d='M46 10C58 5 71 6 82 12C91 17 101 18 113 15C104 21 94 24 82 23C70 22 58 17 46 10Z'/%3E%3C/g%3E%3Cg transform='translate(80,70)'%3E%3Cpath d='M5 24C20 13 34 13 49 20C63 26 76 31 92 30C78 35 63 36 49 30C35 24 20 23 5 24Z'/%3E%3Cpath d='M46 10C58 5 71 6 82 12C91 17 101 18 113 15C104 21 94 24 82 23C70 22 58 17 46 10Z'/%3E%3C/g%3E%3Cg transform='translate(-80,70)'%3E%3Cpath d='M5 24C20 13 34 13 49 20C63 26 76 31 92 30C78 35 63 36 49 30C35 24 20 23 5 24Z'/%3E%3Cpath d='M46 10C58 5 71 6 82 12C91 17 101 18 113 15C104 21 94 24 82 23C70 22 58 17 46 10Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 120px;
  animation: luxuryAirFlow 22s linear infinite;
  transition: opacity 0.5s ease;
}

.hero-header:hover::after {
  opacity: 0.22;
}

@keyframes luxuryAirFlow {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 80px 15px;
  }

  100% {
    background-position: 160px 0;
  }
}

/* ==================================================
   HERO PANEL (GLASSMORPHISM CARD)
================================================== */
.hero-panel {
  position: relative;
  z-index: 5;
  min-height: 540px;
  overflow: visible;
  border: 1px solid var(--header-glass-border);
  border-radius: 28px;
  background: var(--header-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--header-shadow-luxury);
}

.hero-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 29px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(203, 168, 98, 0.4),
    rgba(255, 255, 255, 0.6),
    transparent
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* GOLD BASE ACCENT LINE */
.hero-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--header-gold),
    transparent
  );
  pointer-events: none;
}

.hero-panel__bottom-line {
  display: none;
}

/* ==================================================
   HERO TEXT & TYPOGRAPHY
================================================== */
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 540px;
  padding: clamp(48px, 6vw, 78px) clamp(32px, 5.5vw, 78px);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--header-emerald-dark);
  font-size: clamp(0.8rem, 0.9vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--header-gold);
  border-radius: 999px;
}

.hero-title {
  max-width: 650px;
  margin: 0;
  color: var(--header-text);
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero-description {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--header-muted);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.8;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* ==================================================
   HERO BUTTONS
================================================== */
.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 26px;
  color: var(--header-white);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--header-emerald-dark),
    var(--header-emerald-deep)
  );
  box-shadow: 0 10px 25px rgba(2, 32, 28, 0.2);
  transition: all var(--header-transition);
}

.hero-button:hover,
.hero-button:focus-visible {
  color: var(--header-white);
  background: linear-gradient(
    135deg,
    var(--header-emerald),
    var(--header-emerald-dark)
  );
  box-shadow: 0 14px 30px rgba(2, 32, 28, 0.3);
  transform: translateY(-2px);
}

.hero-button--secondary {
  color: var(--header-emerald-deep);
  background: var(--header-white);
  border: 1px solid rgba(8, 89, 78, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.hero-button--secondary:hover,
.hero-button--secondary:focus-visible {
  color: var(--header-emerald-dark);
  background: var(--header-off-white);
  border-color: var(--header-emerald);
}

.hero-button i {
  transition: transform var(--header-transition);
}

.hero-button:hover i,
.hero-button:focus-visible i {
  transform: translateX(4px);
}

/* ==================================================
   HERO IMAGE FRAME (LUXURY FLOATING FRAME)
================================================== */
.hero-visual-column {
  position: relative;
  min-height: 540px;
  overflow: visible;
}

.hero-image-frame {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 28px;
  left: 8px;
  height: 600px;
  margin: 0;
  padding: 8px;
  border-radius: 22px;
  background: var(--header-white);
  box-shadow: 0 25px 50px rgba(2, 32, 28, 0.15);
}

.hero-image-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12px;
  right: 12px;
  bottom: -16px;
  left: -16px;
  border-radius: 22px;
  border: 1px solid var(--header-gold);
  background: linear-gradient(135deg, rgba(203, 168, 98, 0.2), transparent);
  pointer-events: none;
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
}

/* ==================================================
   RESPONSIVE DESIGN BREAKPOINTS
================================================== */

/* MEDIUM DESKTOP */
@media (max-width: 1399.98px) and (min-width: 1200px) {
  .navbar-logo {
    width: 290px;
    max-height: 78px;
  }

  .site-navbar .nav-link {
    padding: 10px 12px;
    font-size: 0.92rem;
  }

  .navbar-cta {
    margin-left: 12px;
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}

/* SMALL DESKTOP */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .site-navbar {
    min-height: 88px;
  }

  .navbar-logo {
    width: 230px;
    max-height: 66px;
  }

  .site-navbar .nav-link {
    padding: 10px 8px;
    font-size: 0.88rem;
  }

  .navbar-cta {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .services-menu {
    min-width: 340px;
  }
}

/* TABLET AND MOBILE */
@media (max-width: 991.98px) {
  .site-navbar {
    min-height: 82px;
    padding: 10px 0;
  }

  .navbar-logo {
    width: 245px;
    max-height: 64px;
  }

  .site-navbar .navbar-toggler {
    display: inline-flex !important;
  }

  .site-navbar .navbar-collapse {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 10px);
    right: 12px;
    left: 12px;
    max-height: calc(100vh - 100px);
    padding: 18px;
    overflow-y: auto;
    border: 1px solid rgba(203, 168, 98, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 60px rgba(2, 32, 28, 0.25);
  }

  .site-navbar .navbar-nav {
    display: block;
  }

  .site-navbar .nav-item {
    width: 100%;
  }

  .site-navbar .nav-link {
    display: flex;
    justify-content: space-between;
    padding: 14px;
    color: var(--header-text);
    font-size: 1.02rem;
    font-weight: 700;
  }

  .site-navbar .nav-link::before {
    display: none;
  }

  .services-menu {
    position: static !important;
    min-width: 0;
    margin: 6px 0 10px;
    padding: 8px;
    border: 0;
    background: rgba(8, 89, 78, 0.04);
    box-shadow: none;
    transform: none !important;
  }

  .services-menu::before {
    display: none;
  }

  .navbar-cta {
    width: 100%;
    margin: 14px 0 0;
    justify-content: center;
  }

  .hero-header {
    padding-bottom: 90px;
  }

  .hero-header::before,
  .hero-header::after {
    height: 400px;
  }

  .hero-panel {
    min-height: auto;
  }

  .hero-copy {
    min-height: auto;
    padding: 50px 36px 40px;
  }

  .hero-visual-column {
    min-height: auto;
    padding: 0 36px 40px;
  }

  .hero-image-frame {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .hero-image-frame::before {
    top: 8px;
    right: 8px;
    bottom: -10px;
    left: -10px;
  }
}

/* MOBILE */
@media (max-width: 767.98px) {
  .navbar-logo {
    width: 220px;
    max-height: 58px;
  }

  .hero-header {
    padding-top: 16px;
    padding-bottom: 60px;
  }

  .hero-copy {
    padding: 38px 24px 30px;
    text-align: center;
  }

  .hero-eyebrow {
    justify-content: center;
  }

  .hero-title,
  .hero-description {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-button {
    width: 100%;
  }

  .hero-visual-column {
    padding: 0 20px 30px;
  }
}

/* SMALL MOBILE */
@media (max-width: 479.98px) {
  .site-navbar .navbar-brand {
    max-width: calc(100% - 60px);
    margin-right: 8px;
  }

  .navbar-logo {
    width: 190px;
    max-height: 52px;
  }

  .hero-header::before,
  .hero-header::after {
    height: 300px;
  }

  .hero-copy {
    padding: 32px 18px 28px;
  }

  .hero-title {
    font-size: clamp(1.8rem, 8.5vw, 2.5rem);
  }

  .hero-description {
    font-size: 0.88rem;
  }

  .hero-visual-column {
    padding: 0 16px 24px;
  }
}

/* ==================================================
   REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-header::after {
    animation: none;
  }

  .site-navbar .nav-link,
  .services-arrow,
  .services-menu,
  .services-menu .dropdown-item,
  .dropdown-item__arrow,
  .navbar-cta,
  .hero-button,
  .hero-button i {
    transition: none;
  }

  .services-menu .dropdown-item:hover,
  .navbar-cta:hover,
  .hero-button:hover {
    transform: none;
  }
}

/* 000000000000000000000000000000000000000000000000000000000000000 */


/* ==================================================
   BOOTSTRAP 5 SERVICES EXTENSIONS
================================================== */

.services-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfdfc 0%, #f4f8f7 100%);
}

.text-emerald {
  color: #053b34 !important;
}

.text-gold {
  color: #cba862 !important;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

.bg-gold {
  background: linear-gradient(135deg, #f5e4b3, #cba862) !important;
}

.fs-7 {
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Divider */
.divider-line {
  width: 50px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(8, 89, 78, 0.3),
    transparent
  );
}

.divider-airflow {
  width: 42px;
  height: auto;
}

.divider-airflow .blade-bottom {
  fill: #08594e;
}

.divider-airflow .blade-top {
  fill: #2cb8a1;
}

/* =====================================================
   SWIPER
===================================================== */

.services-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 14px 8px 8px;
}

.services-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.services-slider .swiper-slide {
  display: flex;
  height: auto;
  min-width: 0;
}

.services-slider .service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

/* Prevent Bootstrap card width conflicts */
.services-slider .card {
  margin: 0;
}

/* =====================================================
   SERVICE CARDS
===================================================== */

.service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(8, 89, 78, 0.08) !important;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(203, 168, 98, 0.4) !important;
  box-shadow: 0 20px 40px rgba(5, 59, 52, 0.1) !important;
}

.service-card__icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f0f7f6, #e1f0ee);
  color: #08594e;
  transition:
    color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
}

.service-card:hover .service-card__icon {
  color: #ffffff;
  background: linear-gradient(135deg, #08594e, #053b34);
  transform: translateY(-2px);
}

.service-card__line {
  display: block;
  width: 40px;
  height: 2px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #cba862, transparent);
  transition: width 0.3s ease;
}

.service-card:hover .service-card__line {
  width: 60px;
}

.service-card__text {
  flex-grow: 1;
}

.service-card__btn {
  margin-top: auto;
  padding: 10px 16px;
  border: 0;
  color: #08594e;
  background-color: #f4f8f7;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.service-card:hover .service-card__btn {
  color: #ffffff;
  background-color: #08594e;
}

.service-card__btn:hover {
  transform: translateX(2px);
}

/* =====================================================
   CONTROLS
===================================================== */

.services-slider-controls {
  position: relative;
  z-index: 10;
}

.btn-outline-emerald {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #08594e;
  border: 1px solid rgba(8, 89, 78, 0.25);
  background: #ffffff;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

.btn-outline-emerald:hover {
  color: #ffffff;
  border-color: #08594e;
  background-color: #08594e;
}

.btn-outline-emerald.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pagination */
.services-pagination {
  position: relative !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 80px;
}

.services-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  border-radius: 50%;
  opacity: 1;
  background: rgba(8, 89, 78, 0.25);
  transition:
    width 0.3s ease,
    border-radius 0.3s ease,
    background-color 0.3s ease;
}

.services-pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 6px;
  background: #08594e;
}

/* Mobile */
@media (max-width: 575.98px) {
  .services-slider {
    overflow: visible;
  }

  .services-section {
    overflow: hidden;
  }

  .service-card {
    padding: 24px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__icon,
  .service-card__line,
  .service-card__btn {
    transition: none;
  }
}

/* 000000000000000000000000000000000000000000000000000000000000000 */
/* ==================================================
   WHY CHOOSE US SECTION (WITH DUAL IMAGES)
================================================== */

.why-choose-us-section {
  isolation: isolate;
  background:
    radial-gradient(
      circle at 15% 22%,
      rgba(203, 168, 98, 0.08),
      transparent 35%
    ),
    linear-gradient(135deg, #021a17 0%, #053b34 50%, #032520 100%);
}

.text-gold {
  color: #cba862 !important;
}

.bg-gold {
  background: linear-gradient(135deg, #f5e4b3, #cba862) !important;
}

.bg-emerald {
  background: #08594e !important;
}

.bg-glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
}

.border-glass {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fs-7 {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Enlarged Airflow Divider */
.divider-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(203, 168, 98, 0.5),
    transparent
  );
}

.divider-airflow {
  width: 90px !important;
  height: auto;
  overflow: visible;
  vertical-align: middle;
}

.divider-airflow .blade-bottom {
  fill: #08594e;
}

.divider-airflow .blade-top {
  fill: #2cb8a1;
}

/* Visual Stage Styles */
.why-choose-visual {
  position: relative;
  width: min(100%, 560px);
  min-height: 560px;
  margin-inline: auto;
}

.why-choose-visual__main {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 20px;
  width: min(72%, 380px);
  height: 480px;
  padding: 6px;
  border-radius: 20px;
  background: linear-gradient(145deg, #cba862, #08594e);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.why-choose-visual__main img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.why-choose-visual__secondary {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 20px;
  width: min(52%, 275px);
  height: 310px;
  padding: 6px;
  border-radius: 20px;
  background: linear-gradient(145deg, #2cb8a1, #cba862);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

.why-choose-visual__secondary img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.why-choose-visual__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
}

.why-choose-visual__experience-badge {
  position: absolute;
  z-index: 5;
  left: -20px;
  bottom: 60px;
  background: rgba(3, 37, 32, 0.9);
  border: 1px solid rgba(203, 168, 98, 0.4);
  backdrop-filter: blur(10px);
  padding: 12px 22px;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Decorative Orbs & Dots */
.why-choose-visual__circle {
  position: absolute;
  z-index: 1;
  left: -25px;
  top: 40px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #2cb8a1;
  box-shadow: 0 0 30px rgba(44, 184, 161, 0.4);
}

.why-choose-visual__dotted-ring {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 40px;
  width: 160px;
  height: 160px;
  border: 1px dashed rgba(203, 168, 98, 0.3);
  border-radius: 50%;
}

.why-choose-visual__glow-dot {
  position: absolute;
  z-index: 5;
  top: 85px;
  right: 105px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cba862;
  box-shadow: 0 0 15px #cba862;
}

/* Background Elements */
.why-choose-us__bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-orb--top-left {
  position: absolute;
  width: 280px;
  height: 280px;
  top: -80px;
  left: -50px;
  border-radius: 50%;
  background: rgba(44, 184, 161, 0.06);
}

.bg-orb--bottom-right {
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -100px;
  right: -50px;
  border-radius: 50%;
  border: 1px solid rgba(203, 168, 98, 0.12);
}

.bg-dots {
  position: absolute;
  bottom: 8%;
  left: 2%;
  width: 140px;
  height: 140px;
  opacity: 0.1;
  background-image: radial-gradient(#cba862 1px, transparent 1px);
  background-size: 12px 12px;
}

/* Feature Item Hover Effect */
.feature-item {
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-4px);
  border-color: rgba(203, 168, 98, 0.4);
}

/* CTA Button */
.btn-gold {
  background: linear-gradient(135deg, #f5e4b3, #cba862);
  color: #032520;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffffff, #cba862);
  color: #032520;
  box-shadow: 0 12px 25px rgba(203, 168, 98, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
  .why-choose-visual {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .why-choose-visual {
    width: 100%;
    min-height: 480px;
  }

  .why-choose-visual__main {
    width: 70%;
    height: 380px;
  }

  .why-choose-visual__secondary {
    width: 55%;
    height: 240px;
  }

  .why-choose-content {
    text-align: center;
  }

  .divider-line {
    margin-inline: auto;
  }
}

/* 00000000000000000000000000000000000000000000000000000000000000 */
/* ==================================================
   LUXURY SPECIAL OFFER SECTION (BIG $115 & EQUAL HEIGHT)
================================================== */
:root {
  --lux-bg-dark: #021a17;
  --lux-surface-dark: #053b34;
  --lux-surface-card: rgba(5, 59, 52, 0.75);
  --lux-gold-primary: #cba862;
  --lux-gold-light: #f2e3be;
  --lux-mint-accent: #1bc4af;
  --lux-emerald-deep: #032520;
  --lux-text-main: #f4f7f6;
  --lux-text-muted: rgba(244, 247, 246, 0.72);
  --lux-border-subtle: rgba(203, 168, 98, 0.22);
  --lux-border-emerald: rgba(27, 196, 175, 0.25);
  --lux-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* ==================================================
   OFFER SECTION (Transparent / Clean Backgrounds)
================================================== */
.offer-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(60px, 7vw, 100px) 0;
  background: transparent; /* Section background removed */
}

.text-gold {
  color: #b38b38 !important;
}

.text-dark-emerald {
  color: #032520 !important;
}

.text-muted-emerald {
  color: #3b524e !important;
}

.fs-7 {
  font-size: 0.85rem;
}

/* Glass Frame Wrapper */
.offer-section .container {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(203, 168, 98, 0.35);
  border-radius: 22px;
  background: transparent; /* Container background removed */
  box-shadow: none;
  z-index: 2;
}

.offer-section .container::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #cba862;
}

/* Background Accents */
.offer-section__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.offer-section__shape {
  position: absolute;
  border-radius: 50%;
}

.offer-section__shape--one {
  width: 320px;
  height: 320px;
  top: -160px;
  right: 5%;
  background: rgba(11, 127, 112, 0.06);
}

.offer-section__shape--two {
  width: 220px;
  height: 220px;
  bottom: -110px;
  left: 2%;
  border: 1px solid rgba(203, 168, 98, 0.25);
}

/* Left Content Header */
.offer-content__badge {
  background: rgba(203, 168, 98, 0.12);
  color: #8c6a21;
  border: 1px solid rgba(203, 168, 98, 0.4);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.offer-content__title {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.offer-content__line {
  display: block;
  width: 72px;
  height: 2px;
  margin: 14px 0 16px;
  border-radius: 999px;
  background: #cba862;
}

/* BIG $115 ONLY PRICE DISPLAY */
.offer-price-tag__amount {
  font-size: clamp(3.5rem, 6vw, 5.2rem);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 15px rgba(203, 168, 98, 0.18);
}

.offer-price-tag__label {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: 0.08em;
  opacity: 0.95;
}

.offer-content__intro {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.offer-list li {
  font-size: 0.9rem;
  font-weight: 600;
}

/* CTA Button */
.btn-gold {
  background: #05675c;
  color: #ffffff;
  border: 1px solid #cba862;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  background: #08594e;
  color: #ffffff;
  box-shadow: 0 12px 25px rgba(5, 103, 92, 0.25);
}

/* ==================================================
   COUPON VISUAL (Gold Frame Background Removed)
================================================== */

.offer-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.offer-visual__coupon-link {
  padding: 0; /* REMOVED padding that showed gold background */
  background: transparent; /* REMOVED gold background color */
  box-shadow: none; /* REMOVED box shadow around link container */
  transition: transform 0.35s ease;
}

.offer-visual__coupon-link:hover {
  transform: translateY(-4px);
}

.offer-visual__main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* REMOVED inner image background */
}

.offer-visual__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.offer-visual__coupon-link:hover .offer-visual__img {
  transform: scale(1.03);
}

/* Hover Overlay */
.offer-visual__overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(3, 37, 32, 0.88);
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity 0.35s ease;
}

.offer-visual__coupon-link:hover .offer-visual__overlay {
  opacity: 1;
}

.tracking-wider {
  letter-spacing: 0.1em;
}

/* Outer Accents */
.offer-visual__dotted-box {
  position: absolute;
  z-index: -1;
  top: -12px;
  right: -12px;
  width: 180px;
  height: 180px;
  border: 1px dashed rgba(203, 168, 98, 0.4);
  pointer-events: none;
}

.offer-visual__circle {
  position: absolute;
  z-index: 3;
  left: -12px;
  bottom: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #cba862;
  box-shadow: 0 0 18px rgba(203, 168, 98, 0.3);
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
  .offer-visual {
    margin-top: 1rem;
  }
  .offer-visual__dotted-box {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .offer-content {
    text-align: center;
  }

  .offer-content__line,
  .offer-price-tag,
  .offer-list {
    justify-content: center;
    margin-inline: auto;
  }

  .offer-list {
    align-items: center;
  }
}


/* 00000000000000000000000000000000000000000000000000000000000000 */
:root {
  /* Emerald & Mint Tones */
  --header-emerald-deep: #02201c;
  --header-emerald-dark: #043831;
  --header-emerald: #08594e;
  --header-mint: #118f7f;
  --header-mint-bright: #1bc4af;

  /* Luxury Gold & Champagne Accents */
  --header-gold: #cba862;
  --header-gold-light: #f2e3be;
  --header-gold-glow: rgba(203, 168, 98, 0.25);

  /* Light Theme Surface Variables */
  --references-white: #ffffff;
  --references-background: #f3f6f5;
  --references-border: rgba(8, 89, 78, 0.16);
  --references-shadow:
    0 25px 60px rgba(2, 32, 28, 0.08), 0 8px 22px rgba(2, 32, 28, 0.04);
}

/* =========================================================
   REFERENCES SECTION
========================================================= */

.references-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 85px;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(27, 196, 175, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(203, 168, 98, 0.08),
      transparent 28%
    ),
    var(--references-background);
}

.references-section::before,
.references-section::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.references-section::before {
  top: -160px;
  right: -130px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(17, 143, 127, 0.12);
}

.references-section::after {
  bottom: -190px;
  left: -150px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(203, 168, 98, 0.15);
}

.references-section .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   SECTION HEADING & AIRFLOW DIVIDER
========================================================= */

.references-header {
  margin-bottom: 48px;
  text-align: center;
}

.references-title {
  margin: 0;
  color: var(--header-emerald-deep);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* Air Flow Divider Below Heading */
.references-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 320px;
  margin: 22px auto 0;
}

.references-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203, 168, 98, 0.45));
}

.references-divider__line:last-child {
  background: linear-gradient(90deg, rgba(203, 168, 98, 0.45), transparent);
}

.references-divider__waves {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   SLIDER TRACK
========================================================= */

.references-slider {
  position: relative;
}

.references-slider__viewport {
  width: 100%;
  overflow: hidden;
}

.references-slider__track {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.references-slide {
  min-width: 0;
  height: 100%;
}

/* =========================================================
   SHARED TESTIMONIAL CARD
========================================================= */

.reference-card {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.reference-card__client {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
}

.reference-card__photo {
  display: block;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  padding: 4px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.reference-card__identity {
  min-width: 0;
}

.reference-card__label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reference-card__name {
  margin: 0;
  font-size: clamp(1.08rem, 1.7vw, 1.55rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.reference-card__testimonial {
  position: relative;
  z-index: 2;
  margin: 0;
}

.reference-card__testimonial p {
  margin: 0;
  line-height: 1.8;
}

.reference-card__quote {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: -15px;
  font-size: 9rem;
  line-height: 1;
  transform: rotate(180deg);
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   FEATURED TESTIMONIAL CARD
========================================================= */

.reference-card--featured {
  min-height: 450px;
  padding: 48px;
  color: var(--references-white);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(203, 168, 98, 0.22),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      var(--header-mint) 0%,
      var(--header-emerald) 48%,
      var(--header-emerald-dark) 100%
    );
  box-shadow: 0 28px 65px rgba(4, 56, 49, 0.28);
}

.reference-card--featured::before,
.reference-card--featured::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(242, 227, 190, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.reference-card--featured::before {
  top: -100px;
  right: -90px;
  width: 270px;
  height: 270px;
}

.reference-card--featured::after {
  right: -55px;
  bottom: -100px;
  width: 250px;
  height: 250px;
}

.reference-card--featured .reference-card__photo {
  width: 104px;
  height: 104px;
  border: 3px solid var(--header-gold);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 25px rgba(2, 32, 28, 0.3);
}

.reference-card--featured .reference-card__label {
  color: var(--header-gold-light);
}

.reference-card--featured .reference-card__name {
  color: var(--references-white);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.reference-card--featured .reference-card__testimonial {
  margin-top: 52px;
}

.reference-card--featured .reference-card__testimonial p {
  max-width: 580px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.reference-card--featured .reference-card__quote {
  color: rgba(203, 168, 98, 0.14);
  font-size: 12rem;
}

/* =========================================================
   SECONDARY TESTIMONIAL CARDS
========================================================= */

.reference-card--secondary {
  min-height: 450px;
  padding: 38px 32px;
  border: 1px solid var(--references-border);
  border-top: 5px solid var(--header-gold);
  background: var(--references-white);
  box-shadow: var(--references-shadow);
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;
}

.reference-card--secondary:hover {
  transform: translateY(-5px);
  border-color: rgba(17, 143, 127, 0.35);
  box-shadow:
    0 32px 70px rgba(2, 32, 28, 0.12),
    0 10px 25px rgba(2, 32, 28, 0.05);
}

.reference-card--secondary .reference-card__client {
  flex-direction: column;
  align-items: flex-start;
}

.reference-card--secondary .reference-card__photo {
  border: 3px solid var(--header-gold-light);
  background: rgba(17, 143, 127, 0.08);
  box-shadow: 0 8px 18px rgba(2, 32, 28, 0.1);
}

.reference-card--secondary .reference-card__label {
  color: var(--header-emerald);
}

.reference-card--secondary .reference-card__name {
  color: var(--header-emerald-deep);
}

.reference-card--secondary .reference-card__testimonial {
  margin-top: 32px;
  padding-right: 18px;
}

.reference-card--secondary .reference-card__testimonial p {
  color: #3b4845;
  font-size: 0.98rem;
}

.reference-card--secondary .reference-card__quote {
  color: rgba(17, 143, 127, 0.07);
}

/* =========================================================
   CONTROLS & PAGINATION
========================================================= */

.references-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 38px;
}

.references-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.references-pagination__line {
  display: block;
  width: 30px;
  height: 4px;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: rgba(4, 56, 49, 0.18);
  transition:
    width 250ms ease,
    background-color 250ms ease,
    transform 250ms ease;
}

.references-pagination__line:hover {
  background: rgba(17, 143, 127, 0.5);
}

.references-pagination__line.is-active {
  width: 58px;
  background: var(--header-emerald);
}

.references-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
}

.references-navigation__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  color: var(--header-emerald-dark);
  font-size: 1.15rem;
  border: 1px solid rgba(8, 89, 78, 0.18);
  border-radius: 50%;
  background: var(--references-white);
  box-shadow: 0 10px 24px rgba(2, 32, 28, 0.06);
  transition:
    color 250ms ease,
    border-color 250ms ease,
    background-color 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
}

.references-navigation__button:hover {
  color: var(--references-white);
  border-color: var(--header-emerald);
  background: var(--header-emerald);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(8, 89, 78, 0.25);
}

.references-navigation__button--next {
  color: var(--header-emerald-deep);
  border-color: var(--header-gold);
  background: var(--header-gold);
}

.references-navigation__button--next:hover {
  border-color: var(--header-emerald-dark);
  background: var(--header-emerald-dark);
  color: var(--references-white);
}

/* Responsive & Reduced Motion rules remain structural */
@media (min-width: 992px) {
  .references-slider__viewport {
    overflow: hidden;
  }

  .references-slider__track {
    display: flex;
    gap: 24px;
  }

  .references-slide {
    flex: 0 0 calc((100% - 48px) / 3);
  }
}

@media (max-width: 991.98px) {
  .references-section {
    padding: 90px 0 72px;
  }

  .references-slider__track {
    display: flex;
    gap: 20px;
  }

  .references-slide {
    flex: 0 0 calc(50% - 10px);
  }

  .reference-card--featured,
  .reference-card--secondary {
    min-height: 410px;
  }

  .reference-card--secondary .reference-card__client {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .references-section {
    padding: 75px 0 60px;
  }

  .references-header {
    margin-bottom: 34px;
  }

  .references-slider__track {
    gap: 16px;
  }

  .references-slide {
    flex: 0 0 100%;
  }

  .reference-card {
    border-radius: 23px;
  }

  .reference-card--featured,
  .reference-card--secondary {
    min-height: 430px;
  }
}
.references-subtitle {
  display: block;
  margin-bottom: 10px;
  color: var(--header-gold, #cba862);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.references-description {
  max-width: 720px;
  margin: 22px auto 0;
  color: #66736f;
  font-size: 1rem;
  line-height: 1.8;
}

.reference-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: var(--header-gold, #cba862);
  font-size: 0.85rem;
}
/* 00000000000000000000000000000000000000000000000000000000000 */

:root {
  /* Emerald Base */
  --booking-emerald: #087f6c;
  --booking-emerald-dark: #045f52;
  --booking-emerald-deep: #02201c;
  /* Deepened for rich luxury contrast */
  --booking-mint: #1bc4af;
  --booking-white: #ffffff;

  /* Luxury Gold & Champagne Accents */
  --booking-gold: #cba862;
  --booking-gold-light: #f2e3be;
  --booking-gold-glow: rgba(203, 168, 98, 0.35);

  /* Elevation Shadows */
  --booking-shadow:
    0 32px 80px rgba(2, 32, 28, 0.3), 0 12px 30px rgba(2, 32, 28, 0.15),
    inset 0 0 0 1px rgba(203, 168, 98, 0.25);
}

/* =========================================================
   CTA SECTION
========================================================= */

.booking-cta-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: #f8faf9;
}

.booking-cta-section .container {
  position: relative;
}

/* =========================================================
   CTA BANNER
========================================================= */

.booking-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 1140px);
  min-height: 380px;
  margin: 0 auto;
  padding: 88px 70px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--booking-shadow);
  isolation: isolate;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.booking-cta__image {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  border-radius: inherit;
  background-image: url("../img/before-air-duct-cleaning.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.7) contrast(1.15);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.booking-cta:hover .booking-cta__image {
  transform: scale(1.04);
}

.booking-cta__image::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(203, 168, 98, 0.15),
      transparent 40%
    ),
    linear-gradient(90deg, rgba(2, 32, 28, 0.4), rgba(8, 127, 108, 0.2));
  pointer-events: none;
}

/* Decorative Background Ring */
.booking-cta__image::after {
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 320px;
  height: 320px;
  content: "";
  border: 1px solid var(--booking-gold-glow);
  border-radius: 50%;
  pointer-events: none;
}

/* =========================================================
   EMERALD OVERLAY
========================================================= */

.booking-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 80% 80%,
      rgba(203, 168, 98, 0.2),
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(2, 32, 28, 0.88) 0%,
      rgba(4, 95, 82, 0.82) 100%
    );
}

/* =========================================================
   INNER BORDER AND DECORATION
========================================================= */

.booking-cta__inner-border {
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 1px solid rgba(242, 227, 190, 0.3);
  border-radius: 16px;
  pointer-events: none;
}

.booking-cta__inner-border::before,
.booking-cta__inner-border::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.booking-cta__inner-border::before {
  top: 18px;
  right: 18px;
  width: 110px;
  height: 70px;
  border-top: 1.5px solid var(--booking-gold);
  border-right: 1.5px solid var(--booking-gold);
  border-radius: 0 12px 0 0;
}

.booking-cta__inner-border::after {
  bottom: 18px;
  left: 18px;
  width: 90px;
  height: 60px;
  border-bottom: 1.5px solid var(--booking-gold);
  border-left: 1.5px solid var(--booking-gold);
  border-radius: 0 0 0 12px;
}

/* =========================================================
   CONTENT
========================================================= */

.booking-cta__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.booking-cta__title {
  max-width: 920px;
  margin: 0;
  color: var(--booking-white);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.booking-cta__title::after {
  display: block;
  width: 80px;
  height: 3px;
  margin: 22px auto 0;
  content: "";
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--booking-gold),
    transparent
  );
}

/* =========================================================
   BUTTON
========================================================= */

.booking-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 54px;
  margin-top: 36px;
  padding: 14px 36px;
  color: var(--booking-emerald-deep);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid var(--booking-gold);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--booking-gold-light),
    var(--booking-gold)
  );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(203, 168, 98, 0.3);
  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.booking-cta__button:hover {
  color: var(--booking-white);
  border-color: var(--booking-gold-light);
  background: rgba(2, 32, 28, 0.85);
  transform: translateY(-4px);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(203, 168, 98, 0.4);
  backdrop-filter: blur(8px);
}

.booking-cta__button:focus-visible {
  outline: 3px solid var(--booking-gold-light);
  outline-offset: 5px;
}

/* =========================================================
   DECORATIVE SIDE BARS
========================================================= */

.booking-cta__side-bar {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 6px;
  height: 120px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--booking-gold),
    transparent
  );
  box-shadow:
    0 0 12px var(--booking-gold-glow),
    0 8px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
}

.booking-cta__side-bar--left {
  left: 0;
}

.booking-cta__side-bar--right {
  right: 0;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {
  .booking-cta {
    min-height: 400px;
    padding: 92px 80px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .booking-cta-section {
    padding: 75px 0;
  }

  .booking-cta {
    min-height: 330px;
    padding: 70px 45px;
  }

  .booking-cta__title {
    font-size: clamp(1.8rem, 5vw, 3rem);
  }

  .booking-cta__side-bar {
    height: 100px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .booking-cta-section {
    padding: 60px 0;
  }

  .booking-cta {
    min-height: 300px;
    padding: 60px 28px;
    border-radius: 18px;
  }

  .booking-cta__image {
    background-position: 58% center;
  }

  .booking-cta__inner-border {
    inset: 12px;
    border-radius: 12px;
  }

  .booking-cta__title {
    max-width: 580px;
    font-size: clamp(1.65rem, 7vw, 2.6rem);
    line-height: 1.12;
  }

  .booking-cta__button {
    min-width: 160px;
    min-height: 48px;
    margin-top: 30px;
    padding: 12px 28px;
    font-size: 0.8rem;
  }

  .booking-cta__side-bar {
    width: 5px;
    height: 85px;
  }
}

@media (max-width: 575.98px) {
  .booking-cta-section .container {
    padding-right: 18px;
    padding-left: 18px;
  }

  .booking-cta {
    min-height: 280px;
    padding: 52px 20px;
  }

  .booking-cta__title {
    max-width: 360px;
    font-size: clamp(1.45rem, 8vw, 2.15rem);
  }

  .booking-cta__button {
    min-width: 150px;
    min-height: 46px;
    margin-top: 26px;
  }

  .booking-cta__side-bar {
    height: 70px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .booking-cta__image,
  .booking-cta__button {
    transition: none;
  }

  .booking-cta:hover .booking-cta__image,
  .booking-cta__button:hover {
    transform: none;
  }
}

/* 00000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   COLOR SYSTEM
========================================================= */
:root {
  /* Deep Emerald & Mint Palette */
  --header-emerald-deep: #02201c;
  --header-emerald-dark: #043831;
  --header-emerald: #08594e;
  --header-mint: #118f7f;
  --header-mint-bright: #1bc4af;

  /* Luxury Gold & Champagne Accents */
  --header-gold: #cba862;
  --header-gold-light: #f2e3be;
  --header-gold-glow: rgba(203, 168, 98, 0.25);

  /* Surface & Base Variables */
  --contact-white: #ffffff;
  --contact-off-white: #f7faf9;
  --contact-text: #081a17;
  --contact-muted: #4e6360;

  --contact-border: rgba(8, 89, 78, 0.12);
  --contact-border-gold: rgba(203, 168, 98, 0.35);
  --contact-shadow:
    0 32px 75px rgba(2, 32, 28, 0.12), 0 10px 30px rgba(2, 32, 28, 0.05);
}

/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
  position: relative;
  overflow: visible;
  padding: 72px 0 120px;
  background: var(--contact-off-white);
}

.contact-section__background {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 360px;
  overflow: hidden;
  /* background:
    linear-gradient(135deg, rgba(2, 32, 28, 0.94), rgba(4, 56, 49, 0.9)),
    url("img/cta-coaching-background.webp"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--contact-border-gold);
}

.contact-section__background::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(
      circle at 15% 20%,
      var(--header-gold-glow),
      transparent 35%
    ),
    radial-gradient(
      circle at 88% 30%,
      rgba(27, 196, 175, 0.12),
      transparent 30%
    );
}

.contact-section .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADING
========================================================= */

.contact-section__header {
  margin-bottom: 38px;
  text-align: center;
}

.contact-section__title {
  margin: 0;
  color: var(--contact-white);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.contact-section__underline {
  display: block;
  width: 64px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--header-gold),
    var(--header-mint-bright)
  );
  box-shadow: 0 0 12px var(--header-gold-glow);
}

/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
  width: min(100%, 980px);
  margin: 0 auto -55px;
  padding: 42px;
  border: 1px solid var(--contact-border-gold);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: var(--contact-shadow);
}

.contact-form {
  width: 100%;
}

/* =========================================================
   LABELS AND FIELDS
========================================================= */

.contact-form__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--contact-text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.contact-form__label span,
.contact-form__privacy span {
  color: var(--header-gold);
}

.contact-form__control {
  min-height: 52px;
  padding: 12px 16px;
  color: var(--contact-text);
  font-size: 0.92rem;
  border: 1px solid var(--contact-border);
  border-radius: 10px;
  background: var(--contact-white);
  box-shadow: inset 0 2px 4px rgba(2, 32, 28, 0.02);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.contact-form__control::placeholder {
  color: var(--contact-muted);
  opacity: 0.7;
}

.contact-form__control:hover {
  border-color: rgba(203, 168, 98, 0.6);
}

.contact-form__control:focus {
  color: var(--contact-text);
  border-color: var(--header-gold);
  background: var(--contact-white);
  box-shadow: 0 0 0 4px var(--header-gold-glow);
}

.contact-form__textarea {
  min-height: 165px;
  resize: vertical;
}

/* =========================================================
   FORM FOOTER
========================================================= */

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding-top: 10px;
}

.contact-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 680px;
  margin: 0;
  padding-left: 0;
}

.contact-form__checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  border: 1px solid var(--contact-border-gold);
  border-radius: 6px;
  box-shadow: none;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.contact-form__checkbox:checked {
  border-color: var(--header-emerald-dark);
  background-color: var(--header-emerald-dark);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23cba862' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.contact-form__checkbox:focus {
  border-color: var(--header-gold);
  box-shadow: 0 0 0 4px var(--header-gold-glow);
}

.contact-form__privacy .form-check-label {
  color: var(--contact-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  cursor: pointer;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-form__submit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 48px;
  padding: 12px 28px;
  cursor: pointer;
  color: var(--contact-white);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--header-gold);
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    var(--header-emerald),
    var(--header-emerald-deep)
  );
  box-shadow: 0 10px 25px rgba(2, 32, 28, 0.22);
  transition:
    border-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.contact-form__submit:hover {
  border-color: var(--header-gold-light);
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(2, 32, 28, 0.28),
    0 0 15px var(--header-gold-glow);
}

.contact-form__submit:focus-visible {
  outline: 3px solid var(--header-gold);
  outline-offset: 4px;
}

.contact-form__submit:active {
  transform: translateY(0);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .contact-section {
    padding: 64px 0 105px;
  }

  .contact-section__background {
    height: 335px;
  }

  .contact-form-card {
    width: min(100%, 880px);
    padding: 34px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .contact-section {
    padding: 54px 0 80px;
  }

  .contact-section__background {
    height: 370px;
  }

  .contact-section__header {
    margin-bottom: 28px;
  }

  .contact-form-card {
    margin-bottom: -35px;
    padding: 28px 22px;
    border-radius: 16px;
  }

  .contact-form__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .contact-form__submit {
    align-self: flex-end;
  }
}

@media (max-width: 575.98px) {
  .contact-section .container {
    padding-right: 18px;
    padding-left: 18px;
  }

  .contact-section {
    padding-top: 48px;
  }

  .contact-section__background {
    height: 390px;
  }

  .contact-form-card {
    padding: 24px 18px;
  }

  .contact-form__control {
    min-height: 48px;
  }

  .contact-form__textarea {
    min-height: 145px;
  }

  .contact-form__submit {
    width: 100%;
    min-height: 48px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .contact-form__control,
  .contact-form__checkbox,
  .contact-form__submit {
    transition: none;
  }

  .contact-form__submit:hover {
    transform: none;
  }
}

/* 0000000000000000000000000000000000000000000000000000000 */
:root {
  --lux-bg-dark: #021a17;
  --lux-surface-dark: #053b34;
  --lux-surface-card: rgba(5, 59, 52, 0.75);
  --lux-gold-primary: #cba862;
  --lux-gold-light: #f2e3be;
  --lux-mint-accent: #1bc4af;
  --lux-emerald-deep: #032520;
  --lux-text-main: #f4f7f6;
  --lux-text-muted: rgba(244, 247, 246, 0.72);
  --lux-border-subtle: rgba(203, 168, 98, 0.22);
  --lux-border-emerald: rgba(27, 196, 175, 0.25);
  --lux-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

  /* Mapping to reference variables for seamless compatibility */
  --reference-footer-dark: var(--lux-bg-dark);
  --reference-footer-emerald: var(--lux-surface-dark);
  --reference-footer-emerald-dark: var(--lux-emerald-deep);
  --reference-footer-mint: var(--lux-mint-accent);
  --reference-footer-text: var(--lux-text-muted);
  --reference-footer-shadow: var(--lux-shadow);

  --header-emerald-deep: #ffffff;
  --header-emerald-dark: var(--lux-text-main);
  --header-emerald: var(--lux-surface-dark);
  --header-mint: var(--lux-mint-accent);
  --header-mint-bright: var(--lux-mint-accent);
  --header-white: rgba(255, 255, 255, 0.05);
  --header-gold: var(--lux-gold-primary);
}

/* =========================================================
   FOOTER CONTAINER & BACKGROUND
========================================================= */

.reference-footer {
  position: relative;
  margin-top: 80px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: 
    radial-gradient(
      circle at 15% 22%,
      rgba(203, 168, 98, 0.08),
      transparent 35%
    ),
    linear-gradient(135deg, #021a17 0%, #053b34 50%, #032520 100%);
  color: var(--lux-text-main);
}

/* Background Ambient Glow FX */
.reference-footer__ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(27, 196, 175, 0.12) 0%, rgba(2, 26, 23, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.reference-footer::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(203, 168, 98, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 168, 98, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
}

.reference-footer__container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   LUXURY CARD OVERLAY
========================================================= */

.reference-footer__card {
  position: relative;
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: 50px 45px 45px;
  border-radius: 32px;
  background: linear-gradient(
    180deg,
    rgba(5, 59, 52, 0.75) 0%,
    rgba(2, 26, 23, 0.88) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--lux-border-subtle);
  box-shadow: var(--lux-shadow);
}

/* Luxury Metallic Accent Bar */
.reference-footer__top-border-accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 3px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--lux-mint-accent) 20%,
    var(--lux-gold-primary) 50%,
    var(--lux-mint-accent) 80%,
    transparent 100%
  );
}

/* =========================================================
   BRANDING & DESCRIPTION
========================================================= */

.reference-footer__brand {
  padding-right: 15px;
}

.reference-footer__logo {
  display: inline-block;
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.3s ease;
}

.reference-footer__logo:hover {
  color: var(--lux-gold-light);
  transform: translateY(-1px);
}

.reference-footer__description {
  margin: 18px 0 26px;
  color: var(--lux-text-muted);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.75;
}

/* =========================================================
   ELEGANT SOCIAL BUTTONS
========================================================= */

.reference-footer__socials {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reference-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--lux-gold-light);
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--lux-border-subtle);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reference-footer__socials a:hover {
  color: var(--lux-bg-dark);
  border-color: transparent;
  background: linear-gradient(
    135deg,
    var(--lux-gold-light),
    var(--lux-gold-primary)
  );
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(203, 168, 98, 0.3);
}

.reference-footer__socials a:focus-visible {
  outline: 2px solid var(--lux-mint-accent);
  outline-offset: 3px;
}

/* =========================================================
   COLUMN HEADINGS & ACCENTS
========================================================= */

.reference-footer__heading {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.reference-footer__heading-line {
  display: block;
  width: 45px;
  height: 3px;
  margin: 10px 0 24px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--lux-gold-primary),
    var(--lux-mint-accent)
  );
}

/* =========================================================
   CONTACT DETAILS & OBFUSCATED EMAIL
========================================================= */

.reference-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-style: normal;
}

.reference-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.reference-footer__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(27, 196, 175, 0.08);
  border: 1px solid var(--lux-border-emerald);
  color: var(--lux-mint-accent);
  font-size: 1.05rem;
  margin-top: 2px;
  transition: all 0.3s ease;
}

.reference-footer__contact-item:hover .reference-footer__icon-wrapper {
  background: var(--lux-mint-accent);
  color: var(--lux-bg-dark);
  transform: scale(1.05);
}

.obfuscatedEmail {
  color: var(--lux-text-main);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  display: inline-block;
  margin-top: 6px;
}

.obfuscatedEmail a {
  color: var(--lux-text-main);
  text-decoration: none;
  transition: color 0.25s ease;
}

.obfuscatedEmail a:hover {
  color: var(--lux-gold-light);
}

.reference-footer__text-block {
  color: var(--lux-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.reference-footer__link {
  color: var(--lux-text-main);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}

.reference-footer__link:hover {
  color: var(--lux-gold-light);
}

.reference-footer__divider {
  color: var(--lux-border-subtle);
  margin: 0 6px;
}

/* =========================================================
   LUXURY GOOGLE MAP CONTAINER
========================================================= */

.reference-footer__map {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--lux-border-subtle);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.35s ease;
}

.reference-footer__map:hover {
  border-color: var(--lux-gold-primary);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.reference-footer__map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: contrast(1.05) opacity(0.9);
}

/* =========================================================
   BOTTOM COPYRIGHT SECTION
========================================================= */

.reference-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 24px 0;
  text-align: center;
  border-top: 1px solid var(--lux-border-subtle);
  margin-top: 40px;
}

.reference-footer__bottom p {
  margin: 0;
  color: var(--lux-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media (max-width: 991.98px) {
  .reference-footer {
    margin-top: 60px;
  }

  .reference-footer__card {
    padding: 38px 30px;
    border-radius: 24px;
  }

  .reference-footer__brand {
    padding-right: 0;
  }
}

@media (max-width: 767.98px) {
  .reference-footer__card {
    padding: 32px 20px;
  }

  .reference-footer__map iframe {
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-footer__socials a,
  .reference-footer__icon-wrapper,
  .reference-footer__logo,
  .reference-footer__map {
    transition: none;
  }

  .reference-footer__socials a:hover {
    transform: none;
  }
}

/* 000000000000000000000000000000000000000000000000000 */
/* ==================================
   COLOR SYSTEM
================================== */
:root {
  /* Deep Emerald & Mint Palette */
  --header-emerald-deep: #02201c;
  --header-emerald-dark: #043831;
  --header-emerald: #08594e;
  --header-mint: #118f7f;
  --header-mint-bright: #1bc4af;

  /* Luxury Gold & Champagne Accents */
  --header-gold: #cba862;
  --header-gold-light: #f2e3be;
  --header-gold-glow: rgba(203, 168, 98, 0.25);

  /* Surface & Base Variables */
  --header-white: #ffffff;
  --header-off-white: #f7faf9;
  --header-surface-card: #ffffff;

  --header-text: #081a17;
  --header-muted: #4e6360;

  --header-border: rgba(8, 89, 78, 0.12);
  --header-border-gold: rgba(203, 168, 98, 0.35);
  --header-shadow: 0 24px 65px rgba(2, 32, 28, 0.08);
}

/* ==================================
   FAQ SECTION
================================== */

.faq-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(27, 196, 175, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(203, 168, 98, 0.09),
      transparent 30%
    ),
    var(--header-off-white);
}

.faq-section__background,
.faq-section__grid,
.faq-section__glow {
  position: absolute;
  pointer-events: none;
}

.faq-section__background {
  inset: 0;
  overflow: hidden;
}

.faq-section__grid {
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(8, 89, 78, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 89, 78, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 15%,
    #000 85%,
    transparent
  );
}

.faq-section__glow {
  border-radius: 50%;
  filter: blur(20px);
}

.faq-section__glow--one {
  top: -180px;
  left: -170px;
  width: 430px;
  height: 430px;
  background: rgba(17, 143, 127, 0.08);
}

.faq-section__glow--two {
  right: -170px;
  bottom: -190px;
  width: 460px;
  height: 460px;
  background: var(--header-gold-glow);
}

.faq-section .container {
  position: relative;
  z-index: 2;
}

/* ==================================
   HEADING
================================== */

.faq-section__header {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.faq-section__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 19px;
  padding: 9px 18px;
  color: var(--header-emerald-dark);
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--header-border-gold);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(2, 32, 28, 0.05);
}

.faq-section__eyebrow i {
  color: var(--header-gold);
  font-size: 0.95rem;
}

.faq-section__title {
  max-width: 760px;
  margin: 0 auto;
  color: var(--header-text);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.faq-section__title span {
  display: inline;
  background: linear-gradient(
    135deg,
    var(--header-emerald-dark) 0%,
    var(--header-mint) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-section__description {
  max-width: 680px;
  margin: 27px auto 0;
  color: var(--header-muted);
  font-size: 1rem;
  line-height: 1.82;
}

/* ==================================
   BALANCED TWO-COLUMN LAYOUT
================================== */

.faq-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: stretch;
}

.faq-section__visual,
.faq-section__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* ==================================
   IMAGE
================================== */

.faq-section__image {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 430px;
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--header-border);
  border-radius: 26px;
  background: var(--header-white);
  box-shadow: var(--header-shadow);
}

.faq-section__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms ease;
}

.faq-section__image:hover img {
  transform: scale(1.035);
}

.faq-section__image::before {
  position: absolute;
  inset: 13px;
  z-index: 2;
  content: "";
  border: 1px solid var(--header-border-gold);
  border-radius: 19px;
  pointer-events: none;
}

.faq-section__image::after {
  position: absolute;
  top: -55px;
  right: -55px;
  width: 150px;
  height: 150px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, var(--header-gold-glow), transparent 70%);
  pointer-events: none;
}

/* ==================================
   SUPPORT CARD
================================== */

.faq-section__support {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--header-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 15px 38px rgba(2, 32, 28, 0.05);
}

.faq-section__support-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--header-white);
  font-size: 1.3rem;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    var(--header-emerald),
    var(--header-emerald-deep)
  );
  box-shadow: 0 10px 24px rgba(4, 56, 49, 0.25);
  border: 1px solid rgba(203, 168, 98, 0.3);
}

.faq-section__support-label {
  display: block;
  margin-bottom: 6px;
  color: var(--header-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.faq-section__support p {
  margin: 0;
  color: var(--header-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ==================================
   ACCORDION
================================== */

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.faq-accordion__item {
  overflow: hidden;
  border: 1px solid var(--header-border);
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 18px 45px rgba(2, 32, 28, 0.04),
    0 3px 10px rgba(2, 32, 28, 0.02);
  transition:
    transform 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease;
}

.faq-accordion__item:hover {
  transform: translateY(-3px);
  border-color: var(--header-border-gold);
  box-shadow:
    0 25px 55px rgba(2, 32, 28, 0.08),
    0 5px 14px rgba(203, 168, 98, 0.1);
}

.faq-accordion__button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 94px;
  padding: 22px 26px;
  color: var(--header-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}

.faq-accordion__button:not(.collapsed) {
  color: var(--header-emerald-dark);
  background: linear-gradient(
    135deg,
    rgba(203, 168, 98, 0.08),
    rgba(8, 89, 78, 0.02)
  );
}

.faq-accordion__button:focus {
  box-shadow: none;
}

.faq-accordion__button:focus-visible {
  outline: 3px solid var(--header-gold);
  outline-offset: -4px;
}

.faq-accordion__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--header-emerald-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 1px solid rgba(8, 89, 78, 0.15);
  border-radius: 16px;
  background: rgba(8, 89, 78, 0.05);
  transition:
    color 250ms ease,
    background-color 250ms ease,
    transform 250ms ease;
}

.faq-accordion__button:not(.collapsed) .faq-accordion__number {
  color: var(--header-white);
  background: linear-gradient(
    145deg,
    var(--header-emerald-dark),
    var(--header-emerald-deep)
  );
  border-color: var(--header-gold);
  box-shadow: 0 10px 22px rgba(2, 32, 28, 0.2);
  transform: rotate(-3deg);
}

.faq-accordion__question {
  display: block;
  padding-right: 28px;
}

.faq-accordion__button::after {
  width: 20px;
  height: 20px;
  margin-left: 12px;
  background-size: 20px;
}

.faq-accordion__button:not(.collapsed)::after {
  filter: invert(23%) sepia(85%) saturate(540%) hue-rotate(125deg)
    brightness(92%) contrast(96%);
}

.faq-accordion__answer {
  position: relative;
  padding: 0 30px 28px 96px;
  background: linear-gradient(180deg, rgba(203, 168, 98, 0.03), transparent);
}

.faq-accordion__answer::before {
  position: absolute;
  top: 3px;
  bottom: 29px;
  left: 52px;
  width: 2px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    var(--header-gold),
    rgba(8, 89, 78, 0.1)
  );
}

.faq-accordion__answer p {
  margin: 0;
  color: var(--header-muted);
  font-size: 0.97rem;
  line-height: 1.82;
}

/* ==================================
   TABLET
================================== */

@media (max-width: 991.98px) {
  .faq-section {
    padding: 88px 0;
  }

  .faq-section__header {
    margin-bottom: 42px;
  }

  .faq-section__layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .faq-section__visual,
  .faq-section__content {
    height: auto;
  }

  .faq-section__image {
    min-height: 420px;
  }

  .faq-section__image img {
    min-height: 420px;
  }
}

/* ==================================
   MOBILE
================================== */

@media (max-width: 767.98px) {
  .faq-section {
    padding: 72px 0;
  }

  .faq-section__header {
    margin-bottom: 36px;
  }

  .faq-section__image {
    min-height: 350px;
    border-radius: 23px;
  }

  .faq-section__image img {
    min-height: 350px;
  }

  .faq-section__support {
    padding: 19px;
  }

  .faq-accordion__button {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    min-height: 90px;
    padding: 20px 21px;
  }

  .faq-accordion__number {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .faq-accordion__question {
    padding-right: 10px;
  }

  .faq-accordion__answer {
    padding: 0 22px 26px 80px;
  }

  .faq-accordion__answer::before {
    left: 44px;
  }
}

@media (max-width: 575.98px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-section__header {
    margin-bottom: 30px;
    text-align: left;
  }

  .faq-section__eyebrow {
    justify-content: flex-start;
    padding: 8px 12px;
    font-size: 0.66rem;
  }

  .faq-section__title {
    margin-left: 0;
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }

  .faq-section__title span {
    display: block;
  }

  .faq-section__title::after {
    margin-left: 0;
  }

  .faq-section__description {
    margin-left: 0;
    font-size: 0.95rem;
    line-height: 1.74;
  }

  .faq-section__image {
    min-height: 300px;
    margin-bottom: 17px;
    border-radius: 20px;
  }

  .faq-section__image img {
    min-height: 300px;
  }

  .faq-section__image::before {
    inset: 11px;
    border-radius: 14px;
  }

  .faq-section__support {
    gap: 13px;
    padding: 17px;
    border-radius: 17px;
  }

  .faq-section__support-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .faq-accordion {
    gap: 14px;
  }

  .faq-accordion__item {
    border-radius: 18px !important;
  }

  .faq-accordion__button {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    min-height: 86px;
    padding: 18px 17px;
    font-size: 0.92rem;
  }

  .faq-accordion__number {
    width: 42px;
    height: 42px;
    font-size: 0.7rem;
    border-radius: 13px;
  }

  .faq-accordion__button::after {
    width: 17px;
    height: 17px;
    margin-left: 4px;
    background-size: 17px;
  }

  .faq-accordion__question {
    padding-right: 2px;
  }

  .faq-accordion__answer {
    padding: 0 17px 23px 68px;
  }

  .faq-accordion__answer::before {
    left: 36px;
  }

  .faq-accordion__answer p {
    font-size: 0.91rem;
    line-height: 1.72;
  }
}

/* ==================================
   REDUCED MOTION
================================== */

@media (prefers-reduced-motion: reduce) {
  .faq-section__image img,
  .faq-accordion__item,
  .faq-accordion__number {
    transition: none;
  }

  .faq-section__image:hover img,
  .faq-accordion__item:hover {
    transform: none;
  }
}


/* 0000000000000000000000000000000000000000000000000000000 */
:root {
  --header-emerald: #0b7f70;
  --header-emerald-dark: #05675c;
  --header-emerald-deep: #04574e;
  --header-mint: #19a98f;

  --header-white: #ffffff;
  --header-off-white: #fafcfb;

  --header-text: #18221f;
  --header-muted: #66726d;

  --header-border: rgba(11, 127, 112, 0.13);
  --header-shadow: 0 24px 65px rgba(15, 67, 58, 0.14);
}

/* ==================================
   SECTION
================================== */

/* ==========================================================================
   LUXURY PRE-CLEANING SECTION STYLES
   ========================================================================== */

.pre-cleaning-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(27, 196, 175, 0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(203, 168, 98, 0.06),
      transparent 30%
    ),
    var(--header-off-white, #f9fbfb);
}

.pre-cleaning-section__background,
.pre-cleaning-section__grid,
.pre-cleaning-section__glow,
.pre-cleaning-section__ring {
  position: absolute;
  pointer-events: none;
}

.pre-cleaning-section__background {
  inset: 0;
  overflow: hidden;
}

.pre-cleaning-section__grid {
  inset: 0;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(8, 89, 78, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 89, 78, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 15%,
    #000 85%,
    transparent
  );
}

.pre-cleaning-section__glow {
  border-radius: 50%;
  filter: blur(40px);
}

.pre-cleaning-section__glow--one {
  top: -150px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: rgba(27, 196, 175, 0.12);
}

.pre-cleaning-section__glow--two {
  right: -150px;
  bottom: -150px;
  width: 520px;
  height: 520px;
  background: rgba(203, 168, 98, 0.1);
}

.pre-cleaning-section__ring {
  border: 1px solid rgba(203, 168, 98, 0.2);
  border-radius: 50%;
}

.pre-cleaning-section__ring--one {
  top: 60px;
  right: 6%;
  width: 240px;
  height: 240px;
}

.pre-cleaning-section__ring--two {
  right: 12%;
  bottom: -100px;
  width: 380px;
  height: 380px;
}

.pre-cleaning-section .container {
  position: relative;
  z-index: 2;
}

/* ==================================
   LUXURY MAIN SHELL
================================== */

.pre-cleaning-section__shell {
  overflow: hidden;
  border: 1px solid rgba(203, 168, 98, 0.25);
  border-radius: 36px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(2, 32, 28, 0.08);
}

.pre-cleaning-section__shell .row {
  align-items: stretch;
}

.pre-cleaning-section__shell .col-lg-6 {
  display: flex;
}

/* ==================================
   VISUAL COLUMN (LEFT)
================================== */

.pre-cleaning-section__visual {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 28px;
  background: linear-gradient(
    145deg,
    rgba(2, 32, 28, 0.03),
    rgba(17, 143, 127, 0.05)
  );
}

.pre-cleaning-section__image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 580px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--header-emerald-deep, #02201c);
  box-shadow: inset 0 0 0 1px rgba(203, 168, 98, 0.3);
}

/* Gold Frame Inset Border */
.pre-cleaning-section__image-frame::before {
  position: absolute;
  inset: 16px;
  z-index: 3;
  content: "";
  border: 1.5px solid rgba(242, 227, 190, 0.4);
  border-radius: 20px;
  pointer-events: none;
}

.pre-cleaning-section__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 580px;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(0.25, 1, 0.5, 1);
}

.pre-cleaning-section__image-frame:hover .pre-cleaning-section__image {
  transform: scale(1.04);
}

.pre-cleaning-section__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(2, 32, 28, 0.75) 0%, transparent 50%),
    linear-gradient(135deg, rgba(4, 56, 49, 0.25), transparent 60%);
}

/* Floating Glassmorphism Badge */
.pre-cleaning-section__floating-badge {
  position: absolute;
  right: 32px;
  bottom: 32px;
  left: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(203, 168, 98, 0.4);
  border-radius: 20px;
  background: rgba(2, 32, 28, 0.75);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px);
}

.pre-cleaning-section__floating-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #02201c;
  font-size: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2e3be 0%, #cba862 100%);
  box-shadow: 0 8px 18px rgba(203, 168, 98, 0.3);
}

.pre-cleaning-section__floating-badge strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pre-cleaning-section__floating-badge div > span {
  display: block;
  color: #f2e3be;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Top Label Pill */
.pre-cleaning-section__image-label {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(203, 168, 98, 0.35);
  border-radius: 999px;
  background: rgba(2, 32, 28, 0.82);
  backdrop-filter: blur(12px);
}

.pre-cleaning-section__image-label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #02201c;
  font-weight: 900;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2e3be, #cba862);
}

/* ==================================
   CONTENT COLUMN (RIGHT)
================================== */

.pre-cleaning-section__content {
  width: 100%;
  height: 100%;
  padding: clamp(44px, 5vw, 68px);
}

.pre-cleaning-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 8px 16px;
  color: #043831;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(203, 168, 98, 0.35);
  border-radius: 999px;
  background: rgba(203, 168, 98, 0.08);
}

.pre-cleaning-section__eyebrow i {
  color: #cba862;
  font-size: 0.95rem;
}

.pre-cleaning-section__title {
  max-width: 650px;
  margin: 0;
  color: #02201c;
  font-size: clamp(2.25rem, 4.2vw, 3.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.pre-cleaning-section__title span {
  display: block;
  background: linear-gradient(135deg, #08594e 0%, #118f7f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pre-cleaning-section__title::after {
  display: block;
  width: 90px;
  height: 4px;
  margin-top: 22px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #cba862, #118f7f);
}

.pre-cleaning-section__lead {
  max-width: 650px;
  margin: 24px 0 0;
  color: #4a5d5a;
  font-size: 1rem;
  line-height: 1.8;
}

/* ==================================
   PROCESS STEPS
================================== */

.pre-cleaning-section__steps {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

/* Connected Timeline Line */
.pre-cleaning-section__steps::before {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 25px;
  width: 2px;
  content: "";
  background: linear-gradient(
    to bottom,
    #cba862,
    #118f7f,
    rgba(8, 89, 78, 0.1)
  );
}

.pre-cleaning-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(8, 89, 78, 0.12);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(2, 32, 28, 0.03);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pre-cleaning-step:hover {
  transform: translateX(6px);
  border-color: rgba(203, 168, 98, 0.5);
  box-shadow: 0 16px 36px rgba(2, 32, 28, 0.08);
}

.pre-cleaning-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #02201c;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  border: 3px solid #ffffff;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2e3be 0%, #cba862 100%);
  box-shadow: 0 8px 18px rgba(203, 168, 98, 0.28);
}

.pre-cleaning-step__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.pre-cleaning-step__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #118f7f;
  font-size: 0.95rem;
  border-radius: 10px;
  background: rgba(17, 143, 127, 0.08);
}

.pre-cleaning-step h3 {
  margin: 0;
  color: #02201c;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.pre-cleaning-step p {
  margin: 0;
  color: #586d69;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ==================================
   SUMMARY CARD
================================== */

.pre-cleaning-section__summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid rgba(203, 168, 98, 0.3);
  border-left: 4px solid #cba862;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(242, 227, 190, 0.15) 0%,
    rgba(17, 143, 127, 0.04) 100%
  );
}

.pre-cleaning-section__summary-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  font-size: 1.05rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #08594e, #02201c);
  box-shadow: 0 6px 14px rgba(2, 32, 28, 0.15);
}

.pre-cleaning-section__summary p {
  margin: 0;
  color: #02201c;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.65;
}

/* Disable default CSS underline on the heading */
.pre-cleaning-section__title::after {
  display: none !important;
}

/* Custom Divider Wrapper */
.pre-cleaning-divider {
  max-width: 420px;
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

/* Glowing Gold Gradient Divider Lines */
.pre-cleaning-divider .divider-line {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(203, 168, 98, 0.1) 0%,
    rgba(203, 168, 98, 0.85) 50%,
    rgba(242, 227, 190, 1) 100%
  );
}

/* Reverse line gradient for the right side line */
.pre-cleaning-divider .divider-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(242, 227, 190, 1) 0%,
    rgba(203, 168, 98, 0.85) 50%,
    rgba(203, 168, 98, 0.1) 100%
  );
}

/* Airflow Blade Wave Colors */
.divider-airflow .blade-top {
  fill: #1bc4af;
  /* Bright Mint */
}

.divider-airflow .blade-bottom {
  fill: #08594e;
  /* Deep Emerald */
}

/* Mobile Alignment Adjustments */
@media (max-width: 575.98px) {
  .pre-cleaning-divider {
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==================================
   RESPONSIVE BREAKPOINTS
================================== */

@media (max-width: 1199.98px) {
  .pre-cleaning-section {
    padding: 90px 0;
  }

  .pre-cleaning-section__content {
    padding: 42px 36px;
  }

  .pre-cleaning-section__image-frame,
  .pre-cleaning-section__image {
    min-height: 520px;
  }
}

@media (max-width: 991.98px) {
  .pre-cleaning-section {
    padding: 80px 0;
  }

  .pre-cleaning-section__shell {
    border-radius: 30px;
  }

  .pre-cleaning-section__shell .col-lg-6 {
    display: block;
  }

  .pre-cleaning-section__visual {
    height: auto;
    padding: 22px;
  }

  .pre-cleaning-section__image-frame,
  .pre-cleaning-section__image {
    min-height: 460px;
  }

  .pre-cleaning-section__content {
    height: auto;
    padding: 48px 36px;
  }
}

@media (max-width: 575.98px) {
  .pre-cleaning-section {
    padding: 60px 0;
  }

  .pre-cleaning-section__visual {
    padding: 14px;
  }

  .pre-cleaning-section__image-frame,
  .pre-cleaning-section__image {
    min-height: 350px;
  }

  .pre-cleaning-section__image-frame {
    border-radius: 20px;
  }

  .pre-cleaning-section__floating-badge {
    right: 16px;
    bottom: 16px;
    left: 16px;
    padding: 14px;
    border-radius: 16px;
  }

  .pre-cleaning-section__floating-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

  .pre-cleaning-section__content {
    padding: 36px 20px;
  }

  .pre-cleaning-section__steps::before {
    left: 21px;
  }

  .pre-cleaning-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px;
  }

  .pre-cleaning-step__number {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pre-cleaning-section__image,
  .pre-cleaning-step {
    transition: none;
  }

  .pre-cleaning-section__image-frame:hover .pre-cleaning-section__image,
  .pre-cleaning-step:hover {
    transform: none;
  }
}

/* 000000000000000000000000000000000000000000000000000000000000000000000000 */
:root {
  --header-emerald: #0b7f70;
  --header-emerald-dark: #05675c;
  --header-emerald-deep: #04574e;
  --header-mint: #19a98f;

  --header-white: #ffffff;
  --header-off-white: #fafcfb;

  --header-text: #18221f;
  --header-muted: #66726d;

  --header-border: rgba(11, 127, 112, 0.13);
  --header-shadow: 0 24px 65px rgba(15, 67, 58, 0.14);
}

/* ==================================
   SECTION
================================== */

/* ==================================
   LUXURY VARIABLES & BASE SECTION
================================== */
:root {
  --lux-bg-dark: #021a17;
  --lux-surface-dark: #053b34;
  --lux-gold-primary: #cba862;
  --lux-gold-light: #f2e3be;
  --lux-mint-accent: #1bc4af;
  --lux-emerald-deep: #032520;
  --lux-text-light: #f4f7f6;
  --lux-text-muted: rgba(244, 247, 246, 0.72);
  --lux-glass-border: rgba(203, 168, 98, 0.22);
}

/* ==================================================
   PRESSURE FLOW SECTION (BACKGROUND MATCHED TO RULE)
================================================== */
.pressure-flow-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  isolation: isolate;
  background: 
    radial-gradient(
      circle at 15% 22%,
      rgba(203, 168, 98, 0.08),
      transparent 35%
    ),
    linear-gradient(135deg, #021a17 0%, #053b34 50%, #032520 100%);
  color: var(--lux-text-light);
}

/* Background Grids & Ambient Lighting */
.pressure-flow-section__background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.pressure-flow-section__grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(203, 168, 98, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 168, 98, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
}

.pressure-flow-section__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.pressure-flow-section__orb--one {
  top: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: rgba(27, 196, 175, 0.1);
}

.pressure-flow-section__orb--two {
  right: -120px;
  bottom: -100px;
  width: 500px;
  height: 500px;
  background: rgba(203, 168, 98, 0.08);
}

.pressure-flow-section .container {
  position: relative;
  z-index: 2;
}

/* Header & Divider */
.pressure-flow-section__header {
  max-width: 900px;
  margin: 0 auto 52px;
  text-align: center;
}

.pressure-flow-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  color: var(--lux-gold-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--lux-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.pressure-flow-section__eyebrow i {
  color: var(--lux-mint-accent);
}

.pressure-flow-section__title {
  margin: 20px 0 0;
  color: #ffffff;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.pressure-flow-section__title span {
  display: block;
  background: linear-gradient(135deg, #ffffff 30%, var(--lux-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Custom Gold Airflow Divider */
.pressure-flow-divider {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.pressure-flow-divider .divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lux-gold-primary));
}

.pressure-flow-divider .divider-line:last-child {
  background: linear-gradient(90deg, var(--lux-gold-primary), transparent);
}

.divider-airflow .blade-top {
  fill: var(--lux-mint-accent);
}

.divider-airflow .blade-bottom {
  fill: var(--lux-gold-primary);
}

.pressure-flow-section__intro {
  max-width: 720px;
  margin: 18px auto 0;
  color: var(--lux-text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Stage & Visual Showcase */
.pressure-flow-section__stage {
  padding: 32px;
  border: 1px solid var(--lux-glass-border);
  border-radius: 32px;
  background: linear-gradient(
    180deg,
    rgba(5, 59, 52, 0.75) 0%,
    rgba(2, 26, 23, 0.88) 100%
  );
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.pressure-flow-section__visual {
  position: relative;
  margin-bottom: 40px;
}

.pressure-flow-section__image-wrap {
  position: relative;
  height: 500px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
}

.pressure-flow-section__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pressure-flow-section__image-wrap:hover .pressure-flow-section__image {
  transform: scale(1.03);
}

.pressure-flow-section__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2, 26, 23, 0.85) 0%,
    transparent 60%
  );
}

/* Glass Status Badges */
.pressure-flow-section__image-badge {
  position: absolute;
  right: 28px;
  bottom: 24px;
  left: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  padding: 16px 20px;
  border: 1px solid var(--lux-glass-border);
  border-radius: 18px;
  background: rgba(2, 26, 23, 0.82);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.pressure-flow-section__image-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--lux-bg-dark);
  font-size: 1.2rem;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    var(--lux-gold-light),
    var(--lux-gold-primary)
  );
}

.pressure-flow-section__image-badge strong {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
}



/* Floating Glass Cards */
.pressure-flow-section__data {
  position: absolute;
  top: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--lux-glass-border);
  border-radius: 16px;
  background: rgba(5, 59, 52, 0.85);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.pressure-flow-section__data--left {
  left: 24px;
}

.pressure-flow-section__data--right {
  right: 24px;
}

.pressure-flow-section__data > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--lux-gold-light);
  font-size: 1.1rem;
  border-radius: 10px;
  background: rgba(203, 168, 98, 0.12);
}

.pressure-flow-section__data strong {
  display: block;
  color: #ffffff;
  font-size: 0.88rem;
}

.pressure-flow-section__data small {
  display: block;
  color: var(--lux-text-muted);
  font-size: 0.75rem;
}

/* Process Cards */
.pressure-flow-section__process {
  display: grid;
  gap: 16px;
}

.pressure-flow-step {
  display: grid;
  grid-template-columns: 56px 48px 1fr 42px;
  gap: 20px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 300ms ease;
}

.pressure-flow-step:hover {
  transform: translateX(6px);
  border-color: var(--lux-glass-border);
  background: rgba(203, 168, 98, 0.04);
}

.pressure-flow-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--lux-gold-light);
  font-size: 0.9rem;
  font-weight: 800;
  border: 1px solid var(--lux-glass-border);
  border-radius: 14px;
  background: rgba(203, 168, 98, 0.08);
}

.pressure-flow-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--lux-mint-accent);
  font-size: 1.2rem;
  border-radius: 12px;
  background: rgba(27, 196, 175, 0.08);
}

.pressure-flow-step__content h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
}

.pressure-flow-step__content p {
  margin: 0;
  color: var(--lux-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.pressure-flow-step__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--lux-gold-light);
  font-size: 1.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

/* Result Banner */
.pressure-flow-section__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 26px 30px;
  border: 1px solid var(--lux-glass-border);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(203, 168, 98, 0.08) 0%,
    rgba(5, 59, 52, 0.4) 100%
  );
}

.pressure-flow-section__result-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pressure-flow-section__result-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--lux-bg-dark);
  font-size: 1.3rem;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--lux-gold-light),
    var(--lux-gold-primary)
  );
}

.pressure-flow-section__result strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 1.02rem;
}

.pressure-flow-section__result p {
  margin: 0;
  color: var(--lux-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.pressure-flow-section__result-tags {
  display: flex;
  gap: 10px;
}

.pressure-flow-section__result-tags span {
  padding: 8px 14px;
  color: var(--lux-gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--lux-glass-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
  .pressure-flow-section__data {
    position: static;
    margin-top: 12px;
  }

  .pressure-flow-section__visual {
    display: flex;
    flex-direction: column;
  }

  .pressure-flow-section__result {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .pressure-flow-step {
    grid-template-columns: 48px 1fr;
  }

  .pressure-flow-step__icon,
  .pressure-flow-step__arrow {
    display: none;
  }

  .pressure-flow-section__stage {
    padding: 18px;
  }
}
/* 00000000000000000000000000000000000000000000000000000000000 */
:root {
  /* Primary Tones */
  --header-emerald-deep: #02201c;
  --header-emerald-dark: #043831;
  --header-emerald: #08594e;
  --header-mint: #118f7f;
  --header-mint-bright: #1bc4af;

  /* Luxury Gold & Champagne Accents */
  --header-gold: #cba862;
  --header-gold-light: #f2e3be;
  --header-gold-glow: rgba(203, 168, 98, 0.25);

  /* Light Theme Surface Variables */
  --header-off-white: #f3f6f5;
  --header-white: #ffffff;
  --header-text: #02201c;
  --header-muted: #4a5c58;
  --header-border: rgba(8, 89, 78, 0.14);
  --header-shadow:
    0 25px 60px rgba(2, 32, 28, 0.08), 0 8px 22px rgba(2, 32, 28, 0.04);
}

/* =========================================================
   LUXURY ADVANCED TOOLS SECTION
========================================================= */

.duct-tools-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 5% 15%,
      rgba(27, 196, 175, 0.07),
      transparent 30%
    ),
    radial-gradient(
      circle at 95% 85%,
      rgba(203, 168, 98, 0.08),
      transparent 30%
    ),
    var(--header-off-white);
}

.duct-tools-section__background,
.duct-tools-section__grid,
.duct-tools-section__glow,
.duct-tools-section__ring {
  position: absolute;
  pointer-events: none;
}

.duct-tools-section__background {
  inset: 0;
  overflow: hidden;
}

.duct-tools-section__grid {
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(8, 89, 78, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 89, 78, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 15%,
    #000 85%,
    transparent
  );
}

.duct-tools-section__glow {
  border-radius: 50%;
  filter: blur(20px);
}

.duct-tools-section__glow--one {
  top: -150px;
  left: -130px;
  width: 450px;
  height: 450px;
  background: rgba(27, 196, 175, 0.09);
}

.duct-tools-section__glow--two {
  right: -160px;
  bottom: -180px;
  width: 480px;
  height: 480px;
  background: var(--header-gold-glow);
}

.duct-tools-section__ring {
  border: 1px solid rgba(203, 168, 98, 0.18);
  border-radius: 50%;
}

.duct-tools-section__ring--one {
  top: 80px;
  right: 5%;
  width: 220px;
  height: 220px;
}

.duct-tools-section__ring--two {
  bottom: -120px;
  left: 6%;
  width: 360px;
  height: 360px;
  border-color: rgba(17, 143, 127, 0.12);
}

.duct-tools-section .container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADER
========================================================= */

.duct-tools-section__header {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}

.duct-tools-section__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 10px 18px;
  color: var(--header-emerald-deep);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(203, 168, 98, 0.35);
  border-radius: 999px;
  background: var(--header-white);
  box-shadow: 0 8px 24px rgba(2, 32, 28, 0.06);
}

.duct-tools-section__eyebrow i {
  color: var(--header-gold);
  font-size: 0.95rem;
}

.duct-tools-section__title {
  margin: 0;
  color: var(--header-emerald-deep);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.duct-tools-section__title span {
  display: block;
  background: linear-gradient(
    135deg,
    var(--header-emerald),
    var(--header-mint)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.duct-tools-section__intro {
  max-width: 760px;
  margin: 26px auto 0;
  color: var(--header-muted);
  font-size: 1.02rem;
  line-height: 1.82;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.duct-tools-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: stretch;
}

/* =========================================================
   FEATURED VISUAL
========================================================= */

.duct-tools-section__visual {
  min-width: 0;
}

.duct-tools-section__image-wrap {
  position: sticky;
  top: 30px;
  height: 100%;
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(203, 168, 98, 0.3);
  border-radius: 32px;
  background: var(--header-emerald-deep);
  box-shadow: var(--header-shadow);
}

.duct-tools-section__image-wrap::before {
  position: absolute;
  inset: 15px;
  z-index: 3;
  content: "";
  border: 1px solid rgba(242, 227, 190, 0.35);
  border-radius: 24px;
  pointer-events: none;
}

.duct-tools-section__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.duct-tools-section__image-wrap:hover .duct-tools-section__image {
  transform: scale(1.05);
}

.duct-tools-section__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      var(--header-emerald-deep) 0%,
      rgba(2, 32, 28, 0.4) 50%,
      transparent 100%
    ),
    linear-gradient(135deg, rgba(8, 89, 78, 0.35), transparent 60%);
}

.duct-tools-section__image-label {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  color: var(--header-gold-light);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--header-gold);
  border-radius: 999px;
  background: rgba(2, 32, 28, 0.75);
  backdrop-filter: blur(12px);
}

.duct-tools-section__image-badge {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid var(--header-gold);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 45px rgba(2, 32, 28, 0.25);
  backdrop-filter: blur(16px);
}

.duct-tools-section__image-badge-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--header-emerald-deep);
  font-size: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--header-gold),
    var(--header-gold-light)
  );
  box-shadow: 0 8px 18px rgba(203, 168, 98, 0.3);
}

.duct-tools-section__image-badge strong {
  display: block;
  margin-bottom: 2px;
  color: var(--header-emerald-deep);
  font-size: 0.96rem;
  font-weight: 800;
}

.duct-tools-section__image-badge div > span {
  display: block;
  color: var(--header-muted);
  font-size: 0.8rem;
}

/* =========================================================
   TOOL GRID CARDS
========================================================= */

.duct-tools-section__content {
  min-width: 0;
}

.duct-tools-section__tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.duct-tool-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  min-height: 215px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--header-border);
  border-top: 4px solid var(--header-gold);
  border-radius: 24px;
  background: var(--header-white);
  box-shadow: var(--header-shadow);
  transition:
    transform 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.duct-tool-card::after {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  content: "";
  border: 1px solid rgba(203, 168, 98, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.duct-tool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(17, 143, 127, 0.35);
  border-top-color: var(--header-emerald);
  box-shadow:
    0 30px 60px rgba(2, 32, 28, 0.12),
    0 8px 20px rgba(2, 32, 28, 0.04);
}

.duct-tool-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: var(--header-white);
  font-size: 1.25rem;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--header-mint),
    var(--header-emerald)
  );
  box-shadow: 0 10px 24px rgba(8, 89, 78, 0.22);
  transition:
    transform 300ms ease,
    background 300ms ease;
}

.duct-tool-card:hover .duct-tool-card__icon {
  transform: scale(1.05);
  background: linear-gradient(
    135deg,
    var(--header-emerald),
    var(--header-emerald-dark)
  );
}

.duct-tool-card__content {
  position: relative;
  z-index: 2;
}

.duct-tool-card__number {
  display: block;
  margin-bottom: 6px;
  color: var(--header-gold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.duct-tool-card h3 {
  margin: 0 0 10px;
  color: var(--header-emerald-deep);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.duct-tool-card p {
  margin: 0;
  color: var(--header-muted);
  font-size: 0.89rem;
  line-height: 1.68;
}

/* =========================================================
   LUXURY SUMMARY BANNER
========================================================= */

.duct-tools-section__summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px solid rgba(203, 168, 98, 0.3);
  border-left: 6px solid var(--header-gold);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(203, 168, 98, 0.1),
      transparent 50%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 246, 245, 0.8));
  box-shadow: 0 12px 32px rgba(2, 32, 28, 0.05);
}

.duct-tools-section__summary-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--header-white);
  font-size: 1.15rem;
  border-radius: 14px;
  background: var(--header-emerald-dark);
  box-shadow: 0 8px 20px rgba(4, 56, 49, 0.2);
}

.duct-tools-section__summary strong {
  display: block;
  margin-bottom: 6px;
  color: var(--header-emerald-deep);
  font-size: 0.98rem;
  font-weight: 800;
}

.duct-tools-section__summary p {
  margin: 0;
  color: var(--header-muted);
  font-size: 0.9rem;
  line-height: 1.68;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
========================================================= */

@media (max-width: 1199.98px) {
  .duct-tools-section__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 38px;
  }

  .duct-tools-section__image-wrap,
  .duct-tools-section__image {
    min-height: 700px;
  }

  .duct-tool-card {
    min-height: 225px;
  }
}

@media (max-width: 991.98px) {
  .duct-tools-section {
    padding: 90px 0;
  }

  .duct-tools-section__header {
    margin-bottom: 42px;
  }

  .duct-tools-section__layout {
    grid-template-columns: 1fr;
  }

  .duct-tools-section__image-wrap {
    position: relative;
    top: auto;
    min-height: 480px;
  }

  .duct-tools-section__image {
    min-height: 480px;
  }

  .duct-tool-card {
    min-height: 195px;
  }
}

@media (max-width: 767.98px) {
  .duct-tools-section {
    padding: 75px 0;
  }

  .duct-tools-section__header {
    margin-bottom: 36px;
    text-align: left;
  }

  .duct-tools-section__eyebrow {
    justify-content: flex-start;
  }

  .duct-tools-section__title::after {
    margin-left: 0;
  }

  .duct-tools-section__intro {
    margin-left: 0;
  }

  .duct-tools-section__image-wrap,
  .duct-tools-section__image {
    min-height: 400px;
  }

  .duct-tools-section__image-wrap {
    border-radius: 24px;
  }

  .duct-tools-section__image-wrap::before {
    inset: 12px;
    border-radius: 17px;
  }

  .duct-tools-section__image-label {
    top: 24px;
    left: 24px;
  }

  .duct-tools-section__image-badge {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .duct-tools-section__tool-grid {
    grid-template-columns: 1fr;
  }

  .duct-tool-card {
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .duct-tools-section {
    padding: 60px 0;
  }

  .duct-tools-section__title {
    font-size: clamp(2.1rem, 9vw, 3rem);
  }

  .duct-tools-section__intro {
    font-size: 0.94rem;
    line-height: 1.7;
  }

  .duct-tools-section__image-wrap,
  .duct-tools-section__image {
    min-height: 340px;
  }

  .duct-tools-section__image-wrap {
    border-radius: 20px;
  }

  .duct-tools-section__image-wrap::before {
    inset: 9px;
    border-radius: 13px;
  }

  .duct-tools-section__image-label {
    top: 18px;
    left: 18px;
    padding: 7px 11px;
    font-size: 0.62rem;
  }

  .duct-tools-section__image-badge {
    right: 16px;
    bottom: 16px;
    left: 16px;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .duct-tools-section__image-badge-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    border-radius: 12px;
  }

  .duct-tools-section__image-badge strong {
    font-size: 0.88rem;
  }

  .duct-tools-section__image-badge div > span {
    font-size: 0.74rem;
  }

  .duct-tool-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px;
    border-radius: 20px;
  }

  .duct-tool-card__icon {
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
    border-radius: 14px;
  }

  .duct-tool-card h3 {
    font-size: 0.96rem;
  }

  .duct-tool-card p {
    font-size: 0.86rem;
    line-height: 1.62;
  }

  .duct-tools-section__summary {
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
  }

  .duct-tools-section__summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .duct-tools-section__summary strong {
    font-size: 0.91rem;
  }

  .duct-tools-section__summary p {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .duct-tools-section__image,
  .duct-tool-card,
  .duct-tool-card__icon {
    transition: none;
  }

  .duct-tools-section__image-wrap:hover .duct-tools-section__image,
  .duct-tool-card:hover,
  .duct-tool-card:hover .duct-tool-card__icon {
    transform: none;
  }
}

/* Custom Airflow Divider Styling */
.pressure-flow-divider .divider-line {
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--header-gold),
    transparent
  );
  border-radius: 999px;
}

.pressure-flow-divider .blade-bottom {
  fill: #04574e;
}

.pressure-flow-divider .blade-top {
  fill: var(--header-mint-bright);
}

/* 0000000000000000000000000000000000000000000000000000000000 */
:root {
      /* Core Emerald Base */
      --header-emerald: #0b7f70;
      --header-emerald-dark: #05675c;
      --header-emerald-deep: #02201c;
      --header-mint: #1bc4af;

      /* Premium Background Canvas */
      --header-white: #ffffff;
      --header-off-white: #f4f7f6;

      /* Typography Colors */
      --header-text: #0f1c18;
      --header-muted: #52635d;

      /* Luxury Metallic & Champagne Accents */
      --header-gold: #cba862;
      --header-gold-light: #f2e3be;
      --header-gold-glow: rgba(203, 168, 98, 0.35);

      /* Elevation Shadows & Borders */
      --header-border: rgba(203, 168, 98, 0.22);
      --header-shadow:
        0 32px 80px rgba(2, 32, 28, 0.28), 0 12px 30px rgba(2, 32, 28, 0.12),
        inset 0 0 0 1px rgba(203, 168, 98, 0.2);
    }

    /* ==================================
       SECTION
    ================================== */

    .pollutant-spectrum {
      position: relative;
      overflow: hidden;
      padding: 120px 0;
      background:
        radial-gradient(
          circle at 10% 10%,
          rgba(203, 168, 98, 0.08),
          transparent 30%
        ),
        radial-gradient(
          circle at 90% 90%,
          rgba(11, 127, 112, 0.08),
          transparent 35%
        ),
        var(--header-off-white);
    }

    .pollutant-spectrum__background,
    .pollutant-spectrum__grid,
    .pollutant-spectrum__glow,
    .pollutant-spectrum__ring {
      position: absolute;
      pointer-events: none;
    }

    .pollutant-spectrum__background {
      inset: 0;
      overflow: hidden;
    }

    .pollutant-spectrum__grid {
      inset: 0;
      opacity: 0.28;
      background-image:
        linear-gradient(rgba(203, 168, 98, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(203, 168, 98, 0.06) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 15%,
        #000 85%,
        transparent
      );
    }

    .pollutant-spectrum__glow {
      border-radius: 50%;
      filter: blur(20px);
    }

    .pollutant-spectrum__glow--one {
      top: -190px;
      left: -160px;
      width: 480px;
      height: 480px;
      background: rgba(203, 168, 98, 0.12);
    }

    .pollutant-spectrum__glow--two {
      right: -190px;
      bottom: -220px;
      width: 540px;
      height: 540px;
      background: rgba(11, 127, 112, 0.09);
    }

    .pollutant-spectrum__ring {
      border: 1px solid var(--header-gold-glow);
      border-radius: 50%;
    }

    .pollutant-spectrum__ring--one {
      top: 100px;
      right: 4%;
      width: 240px;
      height: 240px;
    }

    .pollutant-spectrum__ring--two {
      bottom: -150px;
      left: 6%;
      width: 380px;
      height: 380px;
    }

    .pollutant-spectrum .container {
      position: relative;
      z-index: 2;
    }

    /* ==================================
       HEADER
    ================================== */

    .pollutant-spectrum__header {
      margin-bottom: 56px;
    }

    .pollutant-spectrum__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      padding: 10px 18px;
      color: var(--header-emerald-deep);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border: 1px solid var(--header-gold);
      border-radius: 999px;
      background: linear-gradient(135deg, #ffffff, var(--header-gold-light));
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    }

    .pollutant-spectrum__eyebrow i {
      color: var(--header-emerald);
      font-size: 1rem;
    }

    .pollutant-spectrum__title {
      max-width: 900px;
      margin: 0;
      color: var(--header-text);
      font-size: clamp(2.5rem, 5vw, 4.8rem);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.04em;
    }

    .pollutant-spectrum__title span {
      display: block;
      background: linear-gradient(
        135deg,
        var(--header-emerald-dark),
        var(--header-emerald)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pollutant-spectrum__header-copy {
      margin: 0;
      padding-left: 26px;
      color: var(--header-muted);
      font-size: 1rem;
      line-height: 1.85;
      border-left: 3px solid var(--header-gold);
    }

    /* ==================================
       MAIN PANEL
    ================================== */

    .pollutant-spectrum__panel {
      position: relative;
      padding: 32px;
      overflow: hidden;
      border-radius: 36px;
      background:
        radial-gradient(
          circle at 90% 10%,
          rgba(203, 168, 98, 0.15),
          transparent 40%
        ),
        linear-gradient(145deg, var(--header-emerald-deep), #032b26);
      box-shadow: var(--header-shadow);
    }

    .pollutant-spectrum__panel::before {
      position: absolute;
      top: -160px;
      right: -140px;
      width: 420px;
      height: 420px;
      content: "";
      border: 1px solid var(--header-gold-glow);
      border-radius: 50%;
    }

    .pollutant-spectrum__panel::after {
      position: absolute;
      bottom: -180px;
      left: -150px;
      width: 450px;
      height: 450px;
      content: "";
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 50%;
    }

    /* ==================================
       INTRO PANEL
    ================================== */

    .pollutant-spectrum__intro-panel {
      position: relative;
      z-index: 2;
      height: 100%;
      padding: 34px;
      border: 1px solid rgba(242, 227, 190, 0.22);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(16px);
    }

    .pollutant-spectrum__panel-label {
      display: inline-flex;
      margin-bottom: 16px;
      color: var(--header-gold-light);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .pollutant-spectrum__intro-panel > h3 {
      margin: 0;
      color: var(--header-white);
      font-size: clamp(1.7rem, 2.7vw, 2.5rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .pollutant-spectrum__intro-panel > p {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.93rem;
      line-height: 1.75;
    }

    .pollutant-spectrum__stats {
      display: grid;
      gap: 14px;
      margin-top: 30px;
    }

    .pollutant-spectrum__stat {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.05);
      transition: border-color 300ms ease;
    }

    .pollutant-spectrum__stat:hover {
      border-color: var(--header-gold);
    }

    .pollutant-spectrum__stat-icon {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      color: var(--header-emerald-deep);
      font-size: 1.1rem;
      border: 1px solid var(--header-gold);
      border-radius: 14px;
      background: linear-gradient(
        135deg,
        var(--header-gold-light),
        var(--header-gold)
      );
    }

    .pollutant-spectrum__stat strong {
      display: block;
      margin-bottom: 2px;
      color: var(--header-white);
      font-size: 0.88rem;
      font-weight: 800;
    }

    .pollutant-spectrum__stat div > span {
      display: block;
      color: rgba(255, 255, 255, 0.62);
      font-size: 0.72rem;
    }

    .pollutant-spectrum__scan-status {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .pollutant-spectrum__scan-dot {
      position: relative;
      flex: 0 0 auto;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--header-gold);
      box-shadow: 0 0 10px var(--header-gold);
    }

    .pollutant-spectrum__scan-dot::after {
      position: absolute;
      inset: -7px;
      content: "";
      border: 1px solid var(--header-gold);
      border-radius: 50%;
      animation: pollutantStatusPulse 2.2s ease-out infinite;
    }

    @keyframes pollutantStatusPulse {
      0% {
        opacity: 0.9;
        transform: scale(0.7);
      }

      100% {
        opacity: 0;
        transform: scale(1.8);
      }
    }

    .pollutant-spectrum__scan-status strong {
      display: block;
      margin-bottom: 2px;
      color: var(--header-white);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .pollutant-spectrum__scan-status div > span {
      display: block;
      color: rgba(255, 255, 255, 0.58);
      font-size: 0.7rem;
      line-height: 1.4;
    }

    /* ==================================
       LARGE SQUARE LUXURY IMAGE FRAME
    ================================== */

    .pollutant-spectrum__visual {
      position: relative;
      z-index: 2;
      display: flex;
      min-height: 680px; /* Expanded height to complement larger image frame */
      padding: 70px 20px 80px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(242, 227, 190, 0.22);
      border-radius: 28px;
      background:
        radial-gradient(
          circle at center,
          rgba(203, 168, 98, 0.15),
          rgba(2, 32, 28, 0.4) 60%
        ),
        rgba(255, 255, 255, 0.03);
    }

    .pollutant-spectrum__visual-label {
      position: absolute;
      top: 22px;
      left: 22px;
      z-index: 5;
      padding: 8px 14px;
      color: var(--header-gold-light);
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: 1px solid var(--header-gold-glow);
      border-radius: 999px;
      background: rgba(2, 32, 28, 0.75);
      backdrop-filter: blur(8px);
    }

    /* Outer Container for Large Square Frame */
    .pollutant-spectrum__image-frame {
      position: relative;
      display: flex;
      width: min(420px, 92%); /* INCREASED SIZE FROM 300px TO 420px */
      aspect-ratio: 1 / 1;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
    }

    /* Ambient Outer Glow */
    .pollutant-spectrum__frame-glow {
      position: absolute;
      inset: -20px;
      border-radius: 44px;
      background: radial-gradient(
        circle,
        rgba(203, 168, 98, 0.38) 0%,
        rgba(11, 127, 112, 0.18) 50%,
        transparent 75%
      );
      filter: blur(20px);
      pointer-events: none;
    }

    /* Square Gold Accent Border Ring */
    .pollutant-spectrum__frame-ring {
      position: absolute;
      inset: -10px;
      border: 1px solid var(--header-gold);
      border-radius: 36px;
      opacity: 0.7;
      box-shadow: 0 0 25px var(--header-gold-glow);
      pointer-events: none;
    }

    /* Large Square Main Image Wrapper */
    .pollutant-spectrum__image-wrapper {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 2px solid var(--header-gold-light);
      border-radius: 28px;
      box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.65),
        inset 0 0 35px rgba(2, 32, 28, 0.85);
    }

    .pollutant-spectrum__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.03);
      transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pollutant-spectrum__visual:hover .pollutant-spectrum__img {
      transform: scale(1.1);
    }

    /* Gradient Overlay on Square Image */
    .pollutant-spectrum__img-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle,
        transparent 45%,
        rgba(2, 32, 28, 0.5) 80%,
        var(--header-emerald-deep) 100%
      );
      pointer-events: none;
    }

    /* Floating Luxury Badge on Bottom */
    .pollutant-spectrum__image-badge {
      position: absolute;
      bottom: 16px;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      color: var(--header-emerald-deep);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border: 1px solid var(--header-gold);
      border-radius: 999px;
      background: linear-gradient(135deg, #ffffff, var(--header-gold-light));
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    }

    .pollutant-spectrum__image-badge i {
      color: var(--header-emerald-dark);
      font-size: 0.9rem;
    }

    /* Ambient Floating Particles */
    .pollutant-particle {
      position: absolute;
      z-index: 3;
      display: block;
      border-radius: 50%;
      background: var(--header-gold-light);
      box-shadow: 0 0 12px var(--header-gold);
      animation: pollutantParticleFloat 4s ease-in-out infinite;
    }

    .pollutant-particle--one {
      top: -4%;
      left: 15%;
      width: 9px;
      height: 9px;
    }

    .pollutant-particle--two {
      top: 10%;
      right: -4%;
      width: 13px;
      height: 13px;
      animation-delay: -0.8s;
    }

    .pollutant-particle--three {
      right: -3%;
      bottom: 20%;
      width: 8px;
      height: 8px;
      animation-delay: -1.6s;
    }

    .pollutant-particle--four {
      bottom: -4%;
      left: 18%;
      width: 11px;
      height: 11px;
      animation-delay: -2.1s;
    }

    .pollutant-particle--five {
      top: 45%;
      left: -5%;
      width: 7px;
      height: 7px;
      animation-delay: -2.8s;
    }

    .pollutant-particle--six {
      top: 35%;
      right: -5%;
      width: 6px;
      height: 6px;
      animation-delay: -3.3s;
    }

    @keyframes pollutantParticleFloat {
      0%, 100% {
        opacity: 0.45;
        transform: translateY(0);
      }
      50% {
        opacity: 1;
        transform: translateY(-12px);
      }
    }

    .pollutant-spectrum__visual-result {
      position: absolute;
      right: 22px;
      bottom: 22px;
      left: 22px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--header-gold-glow);
      border-radius: 18px;
      background: rgba(2, 32, 28, 0.82);
      backdrop-filter: blur(14px);
    }

    .pollutant-spectrum__visual-result > span {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      color: var(--header-emerald-deep);
      border-radius: 12px;
      background: var(--header-gold);
    }

    .pollutant-spectrum__visual-result strong {
      display: block;
      margin-bottom: 2px;
      color: var(--header-white);
      font-size: 0.84rem;
      font-weight: 800;
    }

    .pollutant-spectrum__visual-result small {
      display: block;
      color: var(--header-gold-light);
      font-size: 0.7rem;
    }

    /* ==================================
       POLLUTANT TYPES
    ================================== */

    .pollutant-spectrum__types {
      position: relative;
      z-index: 2;
      display: grid;
      height: 100%;
      gap: 14px;
    }

    .pollutant-type {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 16px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.05);
      transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pollutant-type:hover {
      transform: translateX(-6px);
      border-color: var(--header-gold);
      background: rgba(255, 255, 255, 0.09);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .pollutant-type__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      color: var(--header-emerald-deep);
      font-size: 1.15rem;
      border-radius: 16px;
      background: linear-gradient(135deg, #ffffff, var(--header-gold-light));
    }

    .pollutant-type__category {
      display: block;
      margin-bottom: 4px;
      color: var(--header-gold);
      font-size: 0.64rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .pollutant-type h3 {
      margin: 0 0 6px;
      color: var(--header-white);
      font-size: 0.98rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .pollutant-type p {
      margin: 0;
      color: rgba(255, 255, 255, 0.68);
      font-size: 0.83rem;
      line-height: 1.6;
    }

    /* ==================================
       LOWER WARNING
    ================================== */

    .pollutant-spectrum__warning {
      position: relative;
      z-index: 3;
      margin-top: 28px;
      padding: 28px;
      border: 1px solid var(--header-border);
      border-radius: 26px;
      background: #ffffff;
      box-shadow: 0 20px 50px rgba(2, 32, 28, 0.12);
    }

    .pollutant-spectrum__warning-copy {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .pollutant-spectrum__warning-icon {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      color: var(--header-emerald-deep);
      font-size: 1.25rem;
      border-radius: 18px;
      background: linear-gradient(
        135deg,
        var(--header-gold-light),
        var(--header-gold)
      );
      box-shadow: 0 8px 20px rgba(203, 168, 98, 0.25);
    }

    .pollutant-spectrum__warning-label {
      display: block;
      margin-bottom: 5px;
      color: var(--header-emerald-dark);
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .pollutant-spectrum__warning h3 {
      margin: 0 0 7px;
      color: var(--header-text);
      font-size: 1.08rem;
      font-weight: 800;
      line-height: 1.4;
    }

    .pollutant-spectrum__warning p {
      margin: 0;
      color: var(--header-muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .pollutant-spectrum__recommendation {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--header-gold-glow);
      border-radius: 20px;
      background: linear-gradient(
        135deg,
        rgba(203, 168, 98, 0.08),
        rgba(11, 127, 112, 0.03)
      );
    }

    .pollutant-spectrum__recommendation > span {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      color: var(--header-white);
      border-radius: 14px;
      background: var(--header-emerald-dark);
    }

    .pollutant-spectrum__recommendation p {
      margin: 0;
      color: var(--header-muted);
      font-size: 0.85rem;
      line-height: 1.62;
    }

    /* ==================================
       PRESSURE FLOW DIVIDER
    ================================== */

    .pressure-flow-divider .divider-line {
      flex-grow: 1;
      max-width: 120px;
      height: 1px;
      background: linear-gradient(90deg, var(--header-gold), transparent);
    }

    .pressure-flow-divider .blade-bottom {
      fill: var(--header-emerald);
      opacity: 0.85;
    }

    .pressure-flow-divider .blade-top {
      fill: var(--header-gold);
      opacity: 0.9;
    }

    /* ==================================
       RESPONSIVE BREAKPOINTS
    ================================== */

    @media (max-width: 1199.98px) {
      .pollutant-spectrum {
        padding: 96px 0;
      }

      .pollutant-spectrum__visual {
        min-height: 560px;
      }

      .pollutant-spectrum__image-frame {
        width: min(340px, 88%);
      }

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

    @media (max-width: 991.98px) {
      .pollutant-spectrum {
        padding: 84px 0;
      }

      .pollutant-spectrum__header-copy {
        max-width: 720px;
        padding-left: 20px;
      }

      .pollutant-spectrum__panel {
        padding: 24px;
        border-radius: 30px;
      }

      .pollutant-spectrum__warning-copy {
        max-width: 720px;
      }
    }

    @media (max-width: 767.98px) {
      .pollutant-spectrum {
        padding: 70px 0;
      }

      .pollutant-spectrum__header {
        margin-bottom: 40px;
      }

      .pollutant-spectrum__title {
        font-size: clamp(2.2rem, 8.5vw, 3.4rem);
      }

      .pollutant-spectrum__panel {
        padding: 18px;
        border-radius: 24px;
      }

      .pollutant-spectrum__intro-panel,
      .pollutant-spectrum__visual {
        border-radius: 20px;
      }

      .pollutant-spectrum__types {
        grid-template-columns: 1fr;
      }

      .pollutant-spectrum__warning {
        padding: 20px;
        border-radius: 20px;
      }
    }

    @media (max-width: 575.98px) {
      .pollutant-spectrum {
        padding: 58px 0;
      }

      .pollutant-spectrum__eyebrow {
        padding: 8px 14px;
        font-size: 0.63rem;
      }

      .pollutant-spectrum__title {
        font-size: clamp(2rem, 10vw, 2.95rem);
      }

      .pollutant-spectrum__header-copy {
        font-size: 0.92rem;
        line-height: 1.7;
      }

      .pollutant-spectrum__panel {
        padding: 12px;
        border-radius: 20px;
      }

      .pollutant-spectrum__intro-panel {
        padding: 24px 20px;
        border-radius: 16px;
      }

      .pollutant-spectrum__intro-panel > h3 {
        font-size: 1.65rem;
      }

      .pollutant-spectrum__intro-panel > p {
        font-size: 0.88rem;
      }

      .pollutant-spectrum__stat {
        padding: 14px;
      }

      .pollutant-spectrum__visual {
        min-height: 440px;
        padding: 60px 14px 70px;
        border-radius: 16px;
      }

      .pollutant-spectrum__image-frame {
        width: min(280px, 88%);
      }

      .pollutant-spectrum__image-badge {
        font-size: 0.62rem;
        padding: 5px 10px;
      }

      .pollutant-spectrum__visual-label {
        top: 16px;
        left: 16px;
        font-size: 0.58rem;
      }

      .pollutant-spectrum__visual-result {
        right: 16px;
        bottom: 16px;
        left: 16px;
        padding: 14px;
      }

      .pollutant-type {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 14px;
        border-radius: 16px;
      }

      .pollutant-type__icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
      }

      .pollutant-type h3 {
        font-size: 0.9rem;
      }

      .pollutant-type p {
        font-size: 0.8rem;
      }

      .pollutant-spectrum__warning {
        padding: 18px;
        border-radius: 18px;
      }

      .pollutant-spectrum__warning-copy {
        gap: 14px;
      }

      .pollutant-spectrum__warning-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
      }

      .pollutant-spectrum__warning h3 {
        font-size: 0.92rem;
      }

      .pollutant-spectrum__warning p {
        font-size: 0.82rem;
      }
    }

    /* ==================================
       REDUCED MOTION
    ================================== */

    @media (prefers-reduced-motion: reduce) {
      .pollutant-spectrum__scan-dot::after,
      .pollutant-particle {
        animation: none;
      }

      .pollutant-type,
      .pollutant-spectrum__img {
        transition: none;
      }

      .pollutant-type:hover {
        transform: none;
      }
    }

.pollutant-spectrum__recommendation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--header-gold-glow);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(203, 168, 98, 0.08),
    rgba(11, 127, 112, 0.03)
  );
}

.pollutant-spectrum__phone-icon {
  font-size: 2.2rem;
  color: var(--header-emerald-dark);
}

.pollutant-spectrum__phone-link {
  color: var(--header-emerald-dark);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 200ms ease, transform 200ms ease;
}

.pollutant-spectrum__phone-link:hover {
  color: var(--header-emerald);
  transform: scale(1.03);
}

@media (max-width: 575.98px) {
  .pollutant-spectrum__phone-icon,
  .pollutant-spectrum__phone-link {
    font-size: 1.75rem;
  }
}
/* 0000000000000000000000000000000000000000000000000000000000 */
/* Luxury Theme Tokens */
:root {
  --lux-bg-dark: #021a17;
  --lux-surface-dark: #053b34;
  --lux-gold-primary: #cba862;
  --lux-gold-light: #f2e3be;
  --lux-mint-accent: #1bc4af;
  --lux-emerald-deep: #032520;
  --lux-text-light: #f4f7f6;
  --lux-text-muted: rgba(244, 247, 246, 0.72);
  --lux-glass-border: rgba(203, 168, 98, 0.22);
}

/* ==================================================
   SERVICE MAP SECTION (BACKGROUND MATCHED TO RULE)
================================================== */
.service-map-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  isolation: isolate;
  background: 
    radial-gradient(
      circle at 15% 22%,
      rgba(203, 168, 98, 0.08),
      transparent 35%
    ),
    linear-gradient(135deg, #021a17 0%, #053b34 50%, #032520 100%);
  color: var(--lux-text-light);
}

/* Background Atmosphere & Grid */
.service-map-section__background,
.service-map-section__grid,
.service-map-section__glow {
  position: absolute;
  pointer-events: none;
}

.service-map-section__background {
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.service-map-section__grid {
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(203, 168, 98, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 168, 98, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
}

.service-map-section__glow {
  border-radius: 50%;
  filter: blur(80px);
}

.service-map-section__glow--one {
  top: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: rgba(27, 196, 175, 0.1);
}

.service-map-section__glow--two {
  right: -120px;
  bottom: -100px;
  width: 500px;
  height: 500px;
  background: rgba(203, 168, 98, 0.08);
}

.service-map-section .container {
  position: relative;
  z-index: 2;
}

/* Shell & Glassmorphism */
.service-map-section__shell {
  overflow: hidden;
  border: 1px solid var(--lux-glass-border);
  border-radius: 32px;
  background: linear-gradient(
    180deg,
    rgba(5, 59, 52, 0.75) 0%,
    rgba(2, 26, 23, 0.88) 100%
  );
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Intro Column */
.service-map-section__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: clamp(40px, 5vw, 64px);
  background: linear-gradient(
    160deg,
    rgba(5, 59, 52, 0.85),
    rgba(2, 26, 23, 0.95)
  );
  border-right: 1px solid var(--lux-glass-border);
}

.service-map-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px 18px;
  width: fit-content;
  color: var(--lux-gold-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--lux-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.service-map-section__eyebrow i {
  color: var(--lux-mint-accent);
}

.service-map-section__intro h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.service-map-section__intro h2 span {
  display: block;
  background: linear-gradient(135deg, #ffffff 30%, var(--lux-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.service-map-section__intro p {
  margin: 20px 0 32px;
  color: var(--lux-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Stat Cards */
.service-map-section__stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-map-section__stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.service-map-section__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--lux-mint-accent);
  font-size: 1.1rem;
  border-radius: 12px;
  background: rgba(27, 196, 175, 0.08);
}

.service-map-section__stat-card strong {
  display: block;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
}

.service-map-section__stat-card span {
  display: block;
  color: var(--lux-text-muted);
  font-size: 0.75rem;
}

/* Directory Column */
.service-map-section__directory {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: clamp(36px, 4vw, 56px);
  background: rgba(2, 26, 23, 0.4);
}

.service-map-section__directory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.service-map-section__sub-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--lux-gold-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-map-section__directory-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-map-section__directory-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--lux-gold-light);
  font-size: 1.25rem;
  border: 1px solid var(--lux-glass-border);
  border-radius: 16px;
  background: rgba(203, 168, 98, 0.08);
}

/* Location Grid Links */
.service-map-section__locations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.service-location-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  color: var(--lux-text-light);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-location-link:hover,
.service-location-link:focus-visible {
  color: #ffffff;
  border-color: var(--lux-glass-border);
  background: rgba(203, 168, 98, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

.service-location-link__number {
  color: var(--lux-gold-light);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.service-location-link__name {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-location-link__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--lux-gold-light);
  font-size: 0.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  transition: all 300ms ease;
}

.service-location-link:hover .service-location-link__arrow {
  color: var(--lux-bg-dark);
  background: linear-gradient(
    135deg,
    var(--lux-gold-light),
    var(--lux-gold-primary)
  );
  transform: rotate(45deg);
}

/* CTA Section */
.service-map-section__cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--lux-glass-border);
}

.service-map-section__cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lux-gold-light);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-map-section__cta-eyebrow i {
  color: var(--lux-mint-accent);
}

.service-map-section__cta-content h3 {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
}

.service-map-section__cta-buttons {
  display: flex;
  gap: 12px;
}

.service-map-section__call,
.service-map-section__estimate {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 300ms ease;
}

.service-map-section__call {
  background: linear-gradient(
    135deg,
    var(--lux-gold-light),
    var(--lux-gold-primary)
  );
  color: var(--lux-bg-dark);
  box-shadow: 0 8px 20px rgba(203, 168, 98, 0.25);
}

.service-map-section__call:hover {
  color: var(--lux-bg-dark);
  box-shadow: 0 12px 28px rgba(203, 168, 98, 0.4);
  transform: translateY(-2px);
}

.service-map-section__call small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  text-transform: uppercase;
}

.service-map-section__call strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1;
}

.service-map-section__estimate {
  border: 1px solid var(--lux-glass-border);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.service-map-section__estimate:hover {
  border-color: var(--lux-gold-primary);
  color: var(--lux-gold-light);
  background: rgba(203, 168, 98, 0.1);
  transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 1199.98px) {
  .service-map-section__locations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .service-map-section__intro {
    border-right: none;
    border-bottom: 1px solid var(--lux-glass-border);
  }
}

@media (max-width: 575.98px) {
  .service-map-section__locations {
    grid-template-columns: 1fr;
  }

  .service-map-section__cta-buttons {
    flex-direction: column;
  }
}
/* 000000000000000000000000000000000000000000000000000000000000000 */
/* Custom CSS Variables for Luxury Styling */
:root {
  --lux-bg-dark: #021a17;
  --lux-surface-dark: #053b34;
  --lux-surface-card: rgba(5, 59, 52, 0.75);
  --lux-gold-primary: #cba862;
  --lux-gold-light: #f2e3be;
  --lux-mint-accent: #1bc4af;
  --lux-emerald-deep: #032520;
  --lux-text-main: #f4f7f6;
  --lux-text-muted: rgba(244, 247, 246, 0.72);
  --lux-border-subtle: rgba(203, 168, 98, 0.22);
  --lux-border-emerald: rgba(27, 196, 175, 0.25);
  --lux-glass-bg: rgba(5, 59, 52, 0.65);
  --lux-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* ==================================================
   APPOINTMENT PROCESS SECTION
================================================== */
.appointment-process {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  isolation: isolate;
  background: 
    radial-gradient(
      circle at 15% 22%,
      rgba(203, 168, 98, 0.08),
      transparent 35%
    ),
    linear-gradient(135deg, #021a17 0%, #053b34 50%, #032520 100%);
  color: var(--lux-text-main);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/* Background Atmosphere & Grid */
.appointment-process__background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.appointment-process__ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.appointment-process__ambient-glow--primary {
  top: -10%;
  left: 15%;
  width: 500px;
  height: 500px;
  background: rgba(27, 196, 175, 0.1);
}

.appointment-process__ambient-glow--secondary {
  bottom: -10%;
  right: 10%;
  width: 550px;
  height: 550px;
  background: rgba(203, 168, 98, 0.08);
}

.appointment-process__grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(203, 168, 98, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 168, 98, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
}

.appointment-process .container {
  position: relative;
  z-index: 2;
}

/* Header */
.appointment-process__header {
  max-width: 800px;
  margin: 0 auto 70px;
  text-align: center;
}

.appointment-process__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px 18px;
  border: 1px solid var(--lux-border-subtle);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  color: var(--lux-gold-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.appointment-process__badge i {
  color: var(--lux-mint-accent);
}

.appointment-process__title {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.appointment-process__title-highlight {
  background: linear-gradient(135deg, #ffffff 30%, var(--lux-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.appointment-process__subtitle {
  margin: 0;
  color: var(--lux-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

/* Main Shell Container */
.appointment-process__shell {
  position: relative;
  padding: clamp(32px, 5vw, 60px);
  border: 1px solid var(--lux-border-subtle);
  border-radius: 32px;
  background: linear-gradient(
    180deg,
    rgba(5, 59, 52, 0.75) 0%,
    rgba(2, 26, 23, 0.88) 100%
  );
  backdrop-filter: blur(16px);
  box-shadow: var(--lux-shadow);
}

/* Timeline Rail */
.appointment-process__rail {
  position: absolute;
  top: 90px;
  bottom: 280px;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  z-index: 1;
}

.appointment-process__rail-progress {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--lux-gold-primary),
    var(--lux-mint-accent)
  );
  box-shadow: 0 0 12px rgba(27, 196, 175, 0.4);
}

/* Steps Layout */
.appointment-process__steps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.appointment-step {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 20px;
}

/* Step Card */
.appointment-step__card {
  position: relative;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.appointment-step__card:hover {
  transform: translateY(-5px);
  border-color: var(--lux-border-subtle);
  background: rgba(203, 168, 98, 0.06);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(203, 168, 98, 0.15);
}

.appointment-step--left .appointment-step__card {
  grid-column: 1;
  text-align: right;
}

.appointment-step--right .appointment-step__card {
  grid-column: 3;
  text-align: left;
}

.appointment-step__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.appointment-step--left .appointment-step__header {
  justify-content: flex-end;
}

.appointment-step__tag {
  color: var(--lux-gold-light);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.appointment-step__category {
  color: var(--lux-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.appointment-step__title {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.appointment-step__description {
  margin: 0 0 18px;
  color: var(--lux-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.appointment-step__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(27, 196, 175, 0.08);
  border: 1px solid var(--lux-border-emerald);
  color: var(--lux-mint-accent);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Center Node */
.appointment-step__node {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--lux-bg-dark);
  border: 2px solid var(--lux-gold-primary);
  box-shadow: 0 0 15px rgba(203, 168, 98, 0.3);
}

.appointment-step__node-number {
  color: var(--lux-gold-light);
  font-size: 0.85rem;
  font-weight: 800;
}

/* Visual Icon Box */
.appointment-step__visual {
  display: flex;
  align-items: center;
}

.appointment-step--left .appointment-step__visual {
  grid-column: 3;
  justify-content: flex-start;
}

.appointment-step--right .appointment-step__visual {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-end;
}

.appointment-step__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 18px;
  border: 1px solid var(--lux-border-subtle);
  background: linear-gradient(
    145deg,
    rgba(27, 196, 175, 0.12),
    rgba(203, 168, 98, 0.05)
  );
  color: var(--lux-mint-accent);
  font-size: 1.75rem;
  box-shadow: inset 0 0 15px rgba(27, 196, 175, 0.1);
}

/* Completion Banner */
.appointment-process__completion {
  position: relative;
  z-index: 3;
  margin-top: 60px;
  padding: 40px;
  border-radius: 24px;
  background: linear-gradient(
    160deg,
    rgba(5, 59, 52, 0.85),
    rgba(2, 26, 23, 0.95)
  );
  border: 1px solid var(--lux-border-subtle);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.appointment-process__completion-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lux-gold-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.appointment-process__completion-badge i {
  color: var(--lux-mint-accent);
}

.appointment-process__completion-title {
  margin: 10px 0;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.35;
}

.appointment-process__completion-text {
  margin: 0;
  color: var(--lux-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.appointment-process__completion-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.completion-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--lux-border-subtle);
  color: var(--lux-text-main);
  font-size: 0.8rem;
  font-weight: 700;
}

.completion-pill i {
  color: var(--lux-gold-light);
}

/* Responsive Styles */
@media (max-width: 991.98px) {
  .appointment-process__shell {
    padding: 40px 24px;
  }

  .appointment-process__rail {
    left: 30px;
    transform: none;
  }

  .appointment-step {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }

  .appointment-step__node {
    grid-column: 1;
    grid-row: 1;
    width: 50px;
    height: 50px;
  }

  .appointment-step--left .appointment-step__card,
  .appointment-step--right .appointment-step__card {
    grid-column: 2;
    text-align: left;
  }

  .appointment-step--left .appointment-step__header {
    justify-content: flex-start;
  }

  .appointment-step__visual {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .appointment-process {
    padding: 70px 0;
  }

  .appointment-process__shell {
    padding: 24px 16px;
  }

  .appointment-process__rail {
    left: 20px;
  }

  .appointment-step {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .appointment-step__node {
    width: 40px;
    height: 40px;
  }

  .appointment-step__node-number {
    font-size: 0.75rem;
  }

  .appointment-step__card {
    padding: 20px;
  }

  .appointment-process__completion {
    padding: 24px;
  }
}
/* 000000000000000000000000000000000000000000 */
:root {
  --header-emerald-deep: #02201c;
  --header-emerald-dark: #043831;
  --header-emerald: #08594e;
  --header-mint: #118f7f;
  --header-mint-bright: #1bc4af;
  --header-gold: #cba862;
  --header-gold-light: #f2e3be;
  --header-white: #fff;
  --header-off-white: #f7fbfa;
  --header-text: #14211f;
  --header-muted: #66736f;
  --header-border: rgba(8, 89, 78, 0.14);
  --header-shadow: 0 28px 75px rgba(2, 32, 28, 0.15);
  --header-transition: 240ms ease;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--header-text);
  background: var(--header-off-white);
}
.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 88px 0;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(27, 196, 175, 0.13),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(203, 168, 98, 0.13),
      transparent 26%
    ),
    linear-gradient(180deg, #f9fcfb 0%, #eef7f5 100%);
}
.contact-section__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    linear-gradient(rgba(8, 89, 78, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 89, 78, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
}
.contact-section__header {
  max-width: 880px;
  margin: 0 auto 34px;
  text-align: center;
}
.contact-section__title {
  margin: 0;
  color: var(--header-emerald-deep);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.pressure-flow-divider {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}
.divider-line {
  display: block;
  width: min(110px, 24vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(8, 89, 78, 0.46),
    transparent
  );
}
.divider-airflow {
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(8, 89, 78, 0.15));
}
.contact-form-card {
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--header-shadow);
  backdrop-filter: blur(16px);
}
.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 28px 0 0 28px;
  background: linear-gradient(
    180deg,
    var(--header-mint-bright),
    var(--header-gold)
  );
}
.booking-form,
.booking-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.booking-field {
  position: relative;
}
.booking-field__control {
  width: 100%;
  min-height: 58px;
  padding: 22px 48px 9px 17px;
  border: 1px solid var(--header-border);
  border-radius: 14px;
  color: var(--header-text);
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
  outline: 0;
  transition:
    border-color var(--header-transition),
    box-shadow var(--header-transition),
    background var(--header-transition);
}
textarea.booking-field__control {
  min-height: 145px;
  resize: vertical;
  padding-top: 25px;
}
select.booking-field__control {
  appearance: none;
  padding-right: 46px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--header-emerald) 50%),
    linear-gradient(135deg, var(--header-emerald) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 26px,
    calc(100% - 14px) 26px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}
.booking-field__control:hover {
  border-color: rgba(8, 89, 78, 0.28);
}
.booking-field__control:focus {
  border-color: var(--header-mint);
  box-shadow: 0 0 0 0.25rem rgba(17, 143, 127, 0.13);
  background: #fff;
}
.booking-field label {
  position: absolute;
  top: 17px;
  left: 17px;
  z-index: 2;
  max-width: calc(100% - 66px);
  margin: 0;
  color: var(--header-muted);
  font-size: 0.97rem;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform var(--header-transition),
    color var(--header-transition),
    top var(--header-transition);
}
.booking-field__control:focus + label,
.booking-field__control:not(:placeholder-shown) + label,
select.booking-field__control:valid + label {
  top: 7px;
  color: var(--header-emerald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.booking-field__icon {
  position: absolute;
  top: 50%;
  right: 17px;
  z-index: 2;
  color: var(--header-mint);
  font-size: 1.05rem;
  pointer-events: none;
  transform: translateY(-50%);
}
.booking-field--textarea .booking-field__icon {
  top: 20px;
  transform: none;
}
.booking-form__subject {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.booking-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  margin-top: 4px;
  padding: 15px 24px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--header-emerald),
    var(--header-mint)
  );
  box-shadow: 0 14px 30px rgba(8, 89, 78, 0.22);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform var(--header-transition),
    box-shadow var(--header-transition),
    filter var(--header-transition);
}
.booking-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(8, 89, 78, 0.28);
  filter: saturate(1.05);
}
.booking-form__submit:focus-visible {
  outline: 3px solid rgba(203, 168, 98, 0.55);
  outline-offset: 3px;
}
.booking-form__submit-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.booking-form__submit-arrow {
  margin-left: auto;
  transition: transform var(--header-transition);
}
.booking-form__submit:hover .booking-form__submit-arrow {
  transform: translateX(4px);
}
.booking-form__note {
  margin: 18px 0 0;
  color: var(--header-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: center;
}
@media (max-width: 767.98px) {
  .contact-section {
    padding: 64px 0;
  }
  .contact-section__header {
    text-align: left;
  }
  .pressure-flow-divider {
    justify-content: flex-start !important;
  }
  .contact-form-card {
    padding: 24px 18px;
    border-radius: 22px;
  }
  .contact-form-card::before {
    border-radius: 22px 0 0 22px;
  }
  .booking-form__submit-arrow {
    margin-left: 0;
  }
}

.obfuscatedEmail a{
    color: white
}


/* ==================================================
   VENT COVER STATUS BADGE — CORRECTED
================================================== */

.pressure-flow-section__image-badge {
  position: absolute;
  left: 28px;
  bottom: 28px;
  right: auto;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 14px;

  width: auto;
  max-width: calc(100% - 56px);

  padding: 13px 18px 13px 13px;

  border: 1px solid rgba(203, 168, 98, 0.32);
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(2, 32, 28, 0.96),
      rgba(4, 56, 49, 0.9)
    );

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pressure-flow-section__image-badge-icon {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;
  flex: 0 0 54px;

  color: #ffffff;
  font-size: 25px;
  line-height: 1;

  border: 1px solid rgba(242, 227, 190, 0.42);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #118f7f 0%,
      #08594e 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(2, 32, 28, 0.28);

  overflow: hidden;
}

.pressure-flow-section__image-badge-icon::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255, 255, 255, 0.2),
      transparent 42%
    );

  pointer-events: none;
}

.pressure-flow-section__image-badge-icon i {
  position: relative;
  z-index: 1;

  color: #ffffff;
  font-size: 25px;
  line-height: 1;
}

.pressure-flow-section__image-badge > div {
  min-width: 0;
}

.pressure-flow-section__image-badge strong {
  display: block;
  margin: 0 0 4px;

  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.pressure-flow-section__image-badge > div > span {
  display: block;

  color: rgba(244, 247, 246, 0.74);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Subtle hover */
.pressure-flow-section__image-badge {
  transition:
    transform 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

.pressure-flow-section__image-badge:hover {
  transform: translateY(-3px);

  border-color: rgba(203, 168, 98, 0.5);

  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pressure-flow-section__image-badge-icon {
  transition:
    transform 280ms ease,
    background 280ms ease;
}

.pressure-flow-section__image-badge:hover
.pressure-flow-section__image-badge-icon {
  transform: scale(1.04);

  background:
    linear-gradient(
      145deg,
      #1bc4af 0%,
      #118f7f 100%
    );
}

/* Mobile */
@media (max-width: 575.98px) {
  .pressure-flow-section__image-badge {
    left: 14px;
    right: 14px;
    bottom: 14px;

    width: auto;
    max-width: none;

    gap: 11px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .pressure-flow-section__image-badge-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 13px;
  }

  .pressure-flow-section__image-badge-icon i {
    font-size: 21px;
  }

  .pressure-flow-section__image-badge strong {
    font-size: 0.9rem;
  }

  .pressure-flow-section__image-badge > div > span {
    font-size: 0.78rem;
  }
}


#ac-refrigerant-electrical-connections .pollutant-spectrum__stat-icon,
#ac-refrigerant-electrical-connections .pollutant-type__icon,
#ac-refrigerant-electrical-connections .pollutant-spectrum__visual-result > span,
#ac-refrigerant-electrical-connections .pollutant-spectrum__warning-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#8c6a21 !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:initial !important;
  line-height:1 !important;
}
#ac-refrigerant-electrical-connections svg{
  display:block !important;
  width:1.4rem !important;
  height:1.4rem !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#8c6a21 !important;
}



#post-repair-duct-pressure-testing
.pollutant-spectrum__stat-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  flex: 0 0 46px;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden;
  font-size: 0 !important;
  line-height: 0 !important;
  color: #8c6a21 !important;
}

#post-repair-duct-pressure-testing
.pollutant-spectrum__stat-icon .pollutant-inline-icon {
  display: block !important;
  width: 23px !important;
  height: 23px !important;

  color: #8c6a21 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

#post-repair-duct-pressure-testing
.pollutant-spectrum__stat-icon svg path {
  stroke: currentColor !important;
}

#post-repair-duct-pressure-testing
.pollutant-spectrum__scan-dot {
  display: block;
  width: 10px;
  height: 10px;
  min-width: 10px;

  padding: 0;
  border-radius: 50%;
  background: #cba862;
  box-shadow: 0 0 0 6px rgba(203, 168, 98, 0.1),
              0 0 18px rgba(203, 168, 98, 0.7);

  font-size: 0 !important;
  overflow: hidden;
}

#post-repair-duct-pressure-testing
.pollutant-spectrum__stat > div {
  min-width: 0;
}

#post-repair-duct-pressure-testing
.pollutant-spectrum__stat > div > span {
  display: block;
  margin-top: 3px;
}