/* ==========================================================================
   Coolx — AC Sales, Service & Spare Parts
   style.css — project design system
   Prefix: .cx-
   Load order: Bootstrap 5.3 → Swiper → Font Awesome 6 → this file
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary: #131d3d;
  --color-secondary: #0666a8;
  --color-accent: #23a1db;
  --color-white: #ffffff;
  --color-light: #f5f8fb;
  --color-text: #283548;
  --color-border: #e5ebf2;

  /* Derived neutrals */
  --color-muted: #64748b;
  --color-heading: var(--color-primary);
  --color-navy-soft: #1d2a52;
  --color-tint: #eaf4fb;          /* accent at ~8% over white */
  --color-tint-strong: #d8ecf9;

  /* Typography */
  --font-heading: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.4vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.7vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* Radii */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation — restrained, never muddy */
  --shadow-xs: 0 1px 2px rgba(19, 29, 61, 0.05);
  --shadow-sm: 0 2px 6px rgba(19, 29, 61, 0.06);
  --shadow-md: 0 10px 28px rgba(19, 29, 61, 0.08);
  --shadow-lg: 0 20px 48px rgba(19, 29, 61, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.28s var(--ease);

  /* Layout */
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .cx-h {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-accent); }

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
ul:last-child, ol:last-child { margin-bottom: 0; }

::selection { background: var(--color-accent); color: #fff; }

/* Keyboard focus — visible everywhere, never on mouse click */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.cx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.cx-skip-link:focus {
  left: 0;
  color: #fff;
}
.explore-our-ac{
  background: radial-gradient(45rem 28rem at 12% 20%, rgba(35, 161, 219, 0.22), transparent 62%), radial-gradient(38rem 26rem at 88% 85%, rgba(6, 102, 168, 0.28), transparent 60%), #f6f9ff;
}
/* Utility helpers */
.cx-container { max-width: 1240px; }
.cx-text-accent { color: var(--color-accent); }
.cx-text-muted { color: var(--color-muted); }
.cx-bg-light { background: var(--color-light); }
.cx-bg-navy { background: var(--color-primary); color: rgba(255, 255, 255, 0.78); }
.cx-bg-navy h1, .cx-bg-navy h2, .cx-bg-navy h3, .cx-bg-navy h4 { color: #fff; }

/* --------------------------------------------------------------------------
   3. SECTION SHELL & HEADINGS
   -------------------------------------------------------------------------- */
section#services{
  background: radial-gradient(45rem 28rem at 12% 20%, rgb(0 175 255 / 22%), transparent 62%), radial-gradient(38rem 26rem at 88% 85%, rgb(37 166 255 / 28%), transparent 60%), #f1f9ff;
}
.cx-section { padding: var(--section-y) 0; position: relative; }
.cx-section--tight { padding: clamp(2.5rem, 1.5rem + 3vw, 2rem) 0; }
.cx-section--flush-top { padding-top: 0; }

.cx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-tint);
  border: 1px solid var(--color-tint-strong);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.cx-eyebrow i { font-size: 0.8rem; color: var(--color-accent); }

.cx-bg-navy .cx-eyebrow {
  color: #9fd6f4;
  background: rgba(35, 161, 219, 0.14);
  border-color: rgba(35, 161, 219, 0.3);
}

.cx-section-heading { max-width: 40rem; }
.cx-section-heading--center { margin-inline: auto; text-align: center; }
.cx-section-heading h2 { margin-bottom: var(--sp-3); }
.cx-section-heading p {
  font-size: var(--fs-lead);
  color: var(--color-muted);
  margin-bottom: 0;
}
.cx-bg-navy .cx-section-heading p { color: rgba(255, 255, 255, 0.72); }

.cx-rule {
  height: 1px;
  background: var(--color-border);
  border: 0;
  opacity: 1;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.cx-btn {
  --btn-bg: var(--color-secondary);
  --btn-fg: #fff;
  --btn-bd: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-fast), box-shadow var(--t),
    background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cx-btn i { font-size: 0.85em; transition: transform var(--t-fast); }
.cx-btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.cx-btn:active { transform: translateY(0); }
.cx-btn:hover i.fa-arrow-right { transform: translateX(3px); }

.cx-btn-primary {
  --btn-bg: var(--color-secondary);
  --btn-bd: var(--color-secondary);
  box-shadow: 0 6px 18px rgba(6, 102, 168, 0.22);
}
.cx-btn-primary:hover {
  --btn-bg: #055a94;
  --btn-bd: #055a94;
  box-shadow: 0 12px 26px rgba(6, 102, 168, 0.3);
}

.cx-btn-accent {
  --btn-bg: var(--color-accent);
  --btn-bd: var(--color-accent);
  box-shadow: 0 6px 18px rgba(35, 161, 219, 0.28);
}
.cx-btn-accent:hover {
  --btn-bg: #1b8ec4;
  --btn-bd: #1b8ec4;
}

.cx-btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-bd: var(--color-border);
}
.cx-btn-outline:hover {
  --btn-bg: var(--color-light);
  --btn-bd: var(--color-secondary);
  --btn-fg: var(--color-secondary);
}

/* On dark / photographic backgrounds */
.cx-btn-light {
  --btn-bg: #fff;
  --btn-fg: var(--color-primary);
  --btn-bd: #fff;
  box-shadow: var(--shadow-md);
}
.cx-btn-light:hover { --btn-bg: #f2f7fb; --btn-bd: #f2f7fb; }

.cx-btn-ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
}
.cx-btn-ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.16);
  --btn-bd: #fff;
}

.cx-btn-sm { padding: 0.6rem 1.15rem; min-height: 42px; font-size: 0.875rem; }
.cx-btn-lg { padding: 1rem 2rem; min-height: 54px; font-size: 1rem; }
.cx-btn-block { width: 100%; }

/* Text link with arrow — the "Learn more" pattern */
.cx-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-secondary);
}
.cx-link i { font-size: 0.75rem; transition: transform var(--t-fast); }
.cx-link:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. NAVIGATION
   -------------------------------------------------------------------------- */
.cx-header { position: sticky; top: 0; z-index: 1030; }

.cx-navbar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem 0;
  transition: box-shadow var(--t), padding var(--t);
  height: 80px;
}
.cx-navbar .navbar-nav{
  gap: 16px;
}
.cx-navbar.is-stuck {
  box-shadow: 0 6px 24px rgba(19, 29, 61, 0.08);
  padding: 0.6rem 0;
}

.cx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  font-family: var(--font-heading);
  max-width: 240px;
}
.cx-brand img{
  width: 100%;
}
/* Plain snowflake, no tile — the mark reads as part of the wordmark */
.cx-brand__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: var(--color-secondary);
  font-size: 2rem;
  line-height: 1;
  transition: transform var(--t), color var(--t-fast);
}
.cx-brand:hover .cx-brand__mark { transform: rotate(30deg); }
.cx-brand__name {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  line-height: 1.15;
}
.cx-brand__name span { color: var(--color-secondary); }
.cx-brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-muted);
  margin-top: 0.1rem;
}
.cx-brand:hover .cx-brand__name { color: var(--color-secondary); }

.cx-nav .nav-link {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.cx-nav .nav-link:hover,
.cx-nav .nav-link:focus-visible { color: var(--color-secondary); }

.cx-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.cx-nav .nav-link:hover::after { transform: scaleX(1); }
.cx-nav .nav-link.active { color: var(--color-secondary); }
.cx-nav .nav-link.active::after { transform: scaleX(1); }

.cx-nav-actions { display: flex; align-items: center; gap: 0.85rem; }

.cx-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.cx-nav-phone span { display: block; }
.cx-nav-phone small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.cx-nav-phone__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-secondary);
  font-size: 0.9rem;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.cx-nav-phone:hover { color: var(--color-secondary); }
.cx-nav-phone:hover .cx-nav-phone__icon {
  background: var(--color-secondary);
  color: #fff;
}

/* Hamburger */
.cx-toggler {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--color-primary);
  font-size: 1.1rem;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
    .cx-toggler i {
        font-size: 24px;
    }
.cx-toggler:hover { background: var(--color-light); border-color: var(--color-secondary); }
.cx-toggler:focus { box-shadow: none; }
.cx-toggler[aria-expanded="true"] {
  background: var(--color-tint);
  border-color: var(--color-tint-strong);
  color: var(--color-secondary);
}

/* Sliding mobile menu (Bootstrap off-canvas) */
.cx-nav-panel {
  width: min(340px, 86vw);
  background: #fff;
  border-left: 1px solid var(--color-border);
  box-shadow: -18px 0 48px rgba(19, 29, 61, 0.14);
}
.cx-nav-panel__head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.cx-nav-panel__title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cx-nav-panel__close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cx-nav-panel__close:hover {
  background: var(--color-tint);
  border-color: var(--color-tint-strong);
  color: var(--color-secondary);
}
.cx-nav-panel__body { padding: 1rem 1.25rem 1.5rem; }

.offcanvas-backdrop.show { opacity: 0.45; }

/* From xl up Bootstrap makes the panel static again — let it fill the bar so
   the centred nav and right-aligned actions sit where they did before. */
@media (min-width: 1200px) {
  .cx-nav-panel { box-shadow: none; }
  .cx-nav-panel .offcanvas-body {
    flex-grow: 1;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .cx-nav .nav-link {
    padding: 0.8rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .cx-nav .nav-item:last-child .nav-link { border-bottom: 0; }
  .cx-nav .nav-link::after { display: none; }
  .cx-nav .nav-link.active {
    background: var(--color-tint);
    border-radius: var(--radius-sm);
    padding-left: 0.9rem;
  }
  .cx-nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  .cx-nav-actions .cx-btn { width: 100%; }
  .cx-nav-phone { justify-content: center; }
}

/* --------------------------------------------------------------------------
   6. HERO BANNER SLIDER
   Light banner: the photograph carries the right, a white wash keeps the
   copy on the left readable. The wash flips vertical on small screens.
   -------------------------------------------------------------------------- */
.cx-hero { position: relative; background: var(--color-light); }

.cx-hero__slide {
  position: relative;
  z-index: 1;
  min-height: clamp(30rem, 24rem + 20vw, 44rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* One looping video behind every slide. The poster carries the banner until
   the video is ready, and the same white wash keeps the copy readable. */
.cx-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-light);
}
.cx-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}
.cx-hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      95deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.95) 38%,
      rgba(255, 255, 255, 0.82) 52%,
      rgba(255, 255, 255, 0.38) 66%,
      rgba(255, 255, 255, 0) 82%
    );
}

/* Cool-air waves falling from the unit in the banner photograph.
   Each ribbon is a blue-and-white gradient masked to a sine curve, so it
   ripples the way conditioned air is drawn in product imagery. Two stacked
   animations: the span falls and fades, the mask inside it sways side to
   side. Anchored in percentages of the media box, which is where the unit
   sits once the photo is cropped at desktop widths — hidden below 992px,
   where the crop moves the unit. */
.cx-hero__air {
  --cx-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 200' preserveAspectRatio='none'%3E%3Cpath d='M20 0C34 26 6 46 20 72s14 44 0 70-14 44 0 58' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.cx-hero__air span {
  position: absolute;
  top: 31%;
  right: 26%;
  width: clamp(2.2rem, 3.8vw, 3.8rem);
  height: clamp(7.5rem, 13vw, 12rem);
  transform-origin: top center;
  opacity: 0;
  --cx-wave-bg: linear-gradient(
    180deg,
    rgba(35, 161, 219, 0) 0%,
    rgba(35, 161, 219, 0.88) 17%,
    rgba(255, 255, 255, 0.97) 45%,
    rgba(35, 161, 219, 0.82) 72%,
    rgba(35, 161, 219, 0) 100%
  );
  --cx-wave-bg-alt: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 22%,
    rgba(35, 161, 219, 0.9) 50%,
    rgba(255, 255, 255, 0.78) 76%,
    rgba(255, 255, 255, 0) 100%
  );
  will-change: transform, opacity;
  animation: cxAirFall 6.5s cubic-bezier(0.34, 0.06, 0.45, 1) infinite;
}

/* The visible wave: one blue shading through a white core, nothing else */
/* Two blurred passes per wave: a soft wide haze behind, a tighter ribbon
   in front. Neither is ever a crisp line — the pair reads as diffused air. */
.cx-hero__air span::before,
.cx-hero__air span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cx-wave-bg);
  -webkit-mask: var(--cx-wave) center / 100% 100% no-repeat;
  mask: var(--cx-wave) center / 100% 100% no-repeat;
  will-change: transform;
  animation: cxAirWave 3.4s ease-in-out infinite alternate;
}

/* Front ribbon — soft, still legible as a wave */
.cx-hero__air span::before {
  filter: blur(clamp(4px, 0.5vw, 7px));
  opacity: 0.9;
}

/* Back haze — wider, heavily blurred, half-lit; gives the stream its body */
.cx-hero__air span::after {
  filter: blur(clamp(11px, 1.3vw, 18px));
  opacity: 0.55;
  transform: scaleX(1.75);
  animation-duration: 5.2s;
  animation-direction: alternate-reverse;
}

/* Alternate waves lead with white and sway against the beat, so neighbouring
   streams never move as one */
.cx-hero__air span:nth-child(even) { --cx-wave-bg: var(--cx-wave-bg-alt); }
.cx-hero__air span:nth-child(even)::before {
  animation-direction: alternate-reverse;
  animation-duration: 4.1s;
}
.cx-hero__air span:nth-child(even)::after {
  animation-direction: alternate;
  animation-duration: 6s;
}

/* Spread across the outlet, each wave falling on its own clock */
.cx-hero__air span:nth-child(1) { right: 22%; animation-delay: 0s; }
.cx-hero__air span:nth-child(2) {
  right: 27%;
  top: 32.5%;
  height: clamp(7rem, 13vw, 12rem);
  animation-delay: 0.9s;
  animation-duration: 7.6s;
}
.cx-hero__air span:nth-child(3) {
  right: 32%;
  width: clamp(1.8rem, 3vw, 3rem);
  animation-delay: 1.8s;
  animation-duration: 5.9s;
}
.cx-hero__air span:nth-child(4) {
  right: 37%;
  top: 33.5%;
  height: clamp(8.5rem, 15vw, 14rem);
  animation-delay: 2.7s;
  animation-duration: 7.1s;
}
.cx-hero__air span:nth-child(5) {
  right: 42%;
  width: clamp(2.6rem, 4.4vw, 4.4rem);
  animation-delay: 3.6s;
  animation-duration: 6.7s;
}
.cx-hero__air span:nth-child(6) {
  right: 47%;
  top: 32%;
  height: clamp(6.5rem, 12vw, 11rem);
  animation-delay: 4.5s;
  animation-duration: 8s;
}
.cx-hero__air span:nth-child(7) {
  right: 30%;
  top: 34%;
  width: clamp(1.6rem, 2.6vw, 2.6rem);
  animation-delay: 5.4s;
  animation-duration: 6.2s;
}

@keyframes cxAirFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -14%, 0) scaleY(0.55);
  }
  16% { opacity: 0.95; }
  55% {
    opacity: 0.8;
    transform: translate3d(-3%, 55%, 0) scaleY(1);
  }
  78% { opacity: 0.3; }
  100% {
    opacity: 0;
    transform: translate3d(-7%, 105%, 0) scaleY(1.12);
  }
}

/* The ripple: the wave leans and slides across its own width */
@keyframes cxAirWave {
  from { transform: translateX(-14%) rotate(-2deg) scaleX(0.92); }
  to { transform: translateX(14%) rotate(2deg) scaleX(1.08); }
}

@media (max-width: 991.98px) {
  .cx-hero__air { display: none; }
  .cx-whatsapp::before { display: none; }
}

.cx-hero__content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(4.5rem, 3rem + 5vw, 6.5rem);
  color: var(--color-text);
}
.cx-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--sp-4);
}
.cx-hero__title {
  font-size: var(--fs-display);
  line-height: 1.08;
  color: var(--color-primary);
  max-width: 34rem;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.cx-hero__title span { color: var(--color-secondary); }
.cx-hero__text {
  font-size: var(--fs-lead);
  color: var(--color-text);
  max-width: 33rem;
  margin-bottom: var(--sp-6);
}
.cx-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* The secondary button sits over photography — give it a solid ground */
.cx-hero .cx-btn-outline {
  --btn-bg: #fff;
  --btn-bd: #d9e2ec;
  box-shadow: var(--shadow-xs);
}
.cx-hero .cx-btn-outline:hover {
  --btn-bg: #fff;
  --btn-bd: var(--color-secondary);
  --btn-fg: var(--color-secondary);
}

.cx-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.9rem;
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
}
.cx-hero__features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
}
.cx-hero__feature-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.86);
  border: 1.5px solid var(--color-tint-strong);
  box-shadow: var(--shadow-xs);
}

/* Banner copy fades up on load. `backwards` applies the start state only
   during the delay, so if animations never run the copy is simply visible. */
.cx-hero__content > * {
  animation: cxHeroIn 0.7s var(--ease) backwards;
}
.cx-hero__content > *:nth-child(1) { animation-delay: 0.10s; }
.cx-hero__content > *:nth-child(2) { animation-delay: 0.18s; }
.cx-hero__content > *:nth-child(3) { animation-delay: 0.26s; }
.cx-hero__content > *:nth-child(4) { animation-delay: 0.34s; }
.cx-hero__content > *:nth-child(5) { animation-delay: 0.42s; }

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

.cx-swiper-nav {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cx-swiper-nav:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

/* Below the desktop breakpoint the copy stops sitting on top of the media.
   A white wash strong enough to keep a headline readable over footage on a
   phone left almost nothing of the video showing, so the media becomes its
   own block at the top of the hero and the copy follows underneath. Written
   to fit both hero variants: the admin banner (video box inside .cx-hero__slide)
   and the theme's stand-in video (video box a sibling of .cx-hero__slide). */
@media (max-width: 991.98px) {
  .cx-hero { display: flex; flex-direction: column; }

  .cx-hero__slide {
    display: flex;
    flex-direction: column;
    min-height: 0;
    order: 1;
  }
  .cx-hero__slide > .container { order: 1; }

  .cx-hero__video {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 12rem; /* floor for browsers without aspect-ratio */
  }
  .cx-hero__video video,
  .cx-hero__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Nothing sits over the media now — the wash shrinks to a bottom fade that
     joins the footage to the section background with no hard seam. */
  .cx-hero__video::after {
    background: linear-gradient(
      180deg,
      rgba(245, 248, 251, 0) 68%,
      rgba(245, 248, 251, 0.45) 88%,
      var(--color-light) 100%
    );
  }

  .cx-hero__content {
    max-width: 100%;
    padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .cx-hero__features { gap: 0.9rem 1.5rem; }
}

@media (max-width: 575.98px) {
  .cx-hero__actions .cx-btn { flex: 1 1 100%; }
  .cx-hero__features li { flex: 1 1 42%; font-size: 0.75rem; }
  .cx-hero__feature-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 0.85rem; }
  .cx-swiper-nav { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   7. SERVICES TICKER STRIP
   Two identical tracks sit side by side and the pair slides left by exactly
   half its width, so the loop never shows a seam. Pauses on hover and while
   a link inside has keyboard focus; under reduced motion it stops and
   becomes an ordinary horizontal scroller.
   -------------------------------------------------------------------------- */
.cx-ticker {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-navy-soft) 55%, var(--color-secondary) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Fade the edges so items enter and leave softly */
.cx-ticker::before,
.cx-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 6vw, 5rem);
  z-index: 2;
  pointer-events: none;
}
.cx-ticker::before { left: 0; background: linear-gradient(90deg, var(--color-primary), rgba(19, 29, 61, 0)); }
.cx-ticker::after { right: 0; background: linear-gradient(270deg, var(--color-secondary), rgba(6, 102, 168, 0)); }

.cx-ticker__viewport {
  display: flex;
  width: max-content;
  animation: cxTicker 46s linear infinite;
}
.cx-ticker:hover .cx-ticker__viewport,
.cx-ticker:focus-within .cx-ticker__viewport { animation-play-state: paused; }

@keyframes cxTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cx-ticker__track {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cx-ticker__track li { display: flex; align-items: center; }
.cx-ticker__track li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  flex: 0 0 5px;
}
.cx-ticker__track a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.cx-ticker__track a:hover,
.cx-ticker__track a:focus-visible { color: #fff; }
.cx-ticker__track a i {
  font-size: 0.85em;
  color: var(--color-accent);
  transition: transform var(--t-fast);
}
.cx-ticker__track a:hover i { transform: scale(1.15); }

@media (max-width: 575.98px) {
  .cx-ticker__track a { padding: 0.8rem 1.1rem; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   8. QUICK SERVICE CARDS
   -------------------------------------------------------------------------- */
.cx-quick {
  position: relative;
  z-index: 10;
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: linear-gradient(95deg, rgb(235 235 235) 0%, rgb(255 255 255) 38%, rgba(255, 255, 255, 0.82) 52%, rgba(255, 255, 255, 0.38) 66%, rgb(246 246 246) 82%);
}
.cx-quick__grid { margin-top: 0; }

/* Layered background: a cool wash from the bottom-right corner, a soft glow
   at the top-right, a ghosted snowflake watermark and an accent rule that
   draws across the top on hover. All decoration is in pseudo-elements, so
   the card content never has to move. */
.cx-quick-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(35, 161, 219, 0.12) 0%, rgba(35, 161, 219, 0) 58%),
    linear-gradient(158deg, #ffffff 0%, #ffffff 52%, var(--color-tint) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

/* Watermark — a plain six-arm snowflake drawn inline, no icon font needed */
.cx-quick-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -38px;
  width: 132px;
  height: 132px;
  opacity: 0.55;
  transform: rotate(-10deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23bfe3f5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M50 6V94M50 20l-9-9M50 20l9-9M50 80l-9 9M50 80l9 9'/%3E%3Cpath d='M11.9 28L88.1 72M24 35l-3-12.3M24 35l-12.3 3M76 65l3 12.3M76 65l12.3-3'/%3E%3Cpath d='M88.1 28L11.9 72M76 35l12.3 3M76 35l3-12.3M24 65l-12.3-3M24 65l-3 12.3'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t), opacity var(--t);
}

/* Accent rule along the top edge */
.cx-quick-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.cx-quick-card:hover::after { transform: scaleX(1); }
.cx-quick-card:hover::before {
  transform: rotate(8deg) scale(1.06);
  opacity: 0.85;
}
.cx-quick-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-tint-strong);
}
.cx-quick-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--color-secondary);
  background: var(--color-tint);
  margin-bottom: 1.1rem;
  transition: background-color var(--t), color var(--t), transform var(--t);
}
.cx-quick-card:hover .cx-quick-card__icon {
  background: var(--color-secondary);
  color: #fff;
  transform: rotate(-6deg);
}
.cx-quick-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.cx-quick-card p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: 1.1rem;
}
.cx-quick-card .cx-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. ABOUT
   -------------------------------------------------------------------------- */
.cx-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-light);
}
.cx-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.cx-figure--tall img { aspect-ratio: 3 / 4; }
.cx-figure--wide img { aspect-ratio: 16 / 10; }

.cx-figure-stack { position: relative;  }
.cx-figure-stack__main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.cx-figure-stack__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cx-figure-stack__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  max-width: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-lg);
}
.cx-figure-stack__inset img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 575.98px) {
  .cx-figure-stack { padding-bottom: 0rem; padding-right: 0rem; }
  .cx-figure-stack__inset { width: 46%; border-width: 4px; }
}

/* Floating stat / badge card */
.cx-badge-card {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 17rem;
}
.cx-badge-card i { color: var(--color-accent); font-size: 1.5rem; }
.cx-badge-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: #fff;
  line-height: 1.3;
}
.cx-badge-card span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7); }

/* Feature highlight rows */
.cx-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.cx-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cx-feature__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-secondary);
  font-size: 1.05rem;
}
.cx-feature h4 { margin-bottom: 0.2rem; }
.cx-feature p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }

.cx-bg-navy .cx-feature__icon {
  background: rgba(35, 161, 219, 0.16);
  color: #9fd6f4;
}
.cx-bg-navy .cx-feature p { color: rgba(255, 255, 255, 0.7); }

/* Checklist */
.cx-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cx-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-sm);
}
.cx-check-list i { color: var(--color-accent); margin-top: 0.3rem; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   10. PRODUCT / CATEGORY CARDS
   -------------------------------------------------------------------------- */
.cx-product-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cx-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-tint-strong);
}
.cx-product-card__media {
  position: relative;
  overflow: hidden;
  background: var(--color-light);
}
.cx-product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cx-product-card:hover .cx-product-card__media img { transform: scale(1.06); }

.cx-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}
.cx-tag i { color: var(--color-accent); }

.cx-product-card__body {
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cx-product-card__body h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.cx-product-card__body p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: 1.15rem;
}
.cx-product-card__body .cx-link { margin-top: auto; }

/* Full category card (ac-sales.html). The compact homepage tile keeps its own
   look, so everything here is scoped away from the --compact variant. */
.cx-product-card--full { position: relative; isolation: isolate; }

/* Accent rule that draws across the top edge on hover */
.cx-product-card--full::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.cx-product-card--full:hover::after { transform: scaleX(1); }

/* A soft scrim under the tag keeps it readable on any photograph */
.cx-product-card--full .cx-product-card__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(19, 29, 61, 0.35), rgba(19, 29, 61, 0));
  pointer-events: none;
}
.cx-product-card--full .cx-tag {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(19, 29, 61, 0.18);
}

.cx-product-card--full .cx-product-card__body { padding: 1.4rem 1.4rem 1.5rem; }
.cx-product-card--full .cx-product-card__body h3 {
  font-size: 1.2rem;
  margin-bottom: 0.45rem;
}
.cx-product-card--full .cx-product-card__body > p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

/* Feature list reads as rows, not a bulleted paragraph */
.cx-product-card--full .cx-check-list {
  gap: 0;
  margin-bottom: 1.1rem !important;
  border-top: 1px dashed var(--color-border);
}
.cx-product-card--full .cx-check-list li {
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--color-border);
  line-height: 1.45;
}
.cx-product-card--full .cx-check-list li:last-child { border-bottom: 0; }
.cx-product-card--full .cx-check-list i {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

/* Footer row: text link on the left, the enquiry action on the right */
.cx-product-card--full .cx-card-actions {
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.cx-product-card--full .cx-card-actions .cx-btn { white-space: nowrap; }

@media (max-width: 575.98px) {
  .cx-product-card--full .cx-product-card__body { padding: 1.1rem 1.05rem 1.2rem; }
  .cx-product-card--full .cx-card-actions { gap: 0.75rem; }
  .cx-product-card--full .cx-card-actions .cx-btn { flex: 1 1 auto; }
}


/* Compact tile — six across on the homepage. The tinted media panel contains
   the image rather than cropping it, so product cut-outs sit centred in it. */
.cx-product-card--compact { border-radius: var(--radius); }
.cx-product-card--compact .cx-product-card__media {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f2f8fd 0%, var(--color-tint) 100%);
  border-bottom: 1px solid var(--color-border);
}
.cx-product-card--compact .cx-product-card__media img {
  width: 100%;
  height: 140px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.cx-product-card--compact:hover .cx-product-card__media img { transform: scale(1.04); }

.cx-product-card--compact .cx-product-card__body { padding: 0.95rem 1rem 1.1rem; }
.cx-product-card--compact .cx-product-card__body h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.cx-product-card--compact .cx-product-card__body p {
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin-bottom: 0.85rem;
}
.cx-product-card--compact .cx-link { font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   11. SERVICE CARDS
   -------------------------------------------------------------------------- */
.cx-service-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cx-service-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.cx-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-tint-strong);
}
.cx-service-card:hover::before { transform: scaleX(1); }

.cx-service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--color-secondary);
  background: var(--color-tint);
  margin-bottom: 1.1rem;
  transition: background-color var(--t), color var(--t);
}
.cx-service-card:hover .cx-service-card__icon {
  background: var(--color-secondary);
  color: #fff;
}
.cx-service-card h3 { font-size: 1.0625rem; margin-bottom: 0.45rem; }
.cx-service-card p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: 1.1rem;
}
.cx-service-card .cx-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. WHY CHOOSE US
   -------------------------------------------------------------------------- */
.cx-why {
  background:
  radial-gradient(45rem 28rem at 12% 20%, rgb(0 175 255 / 22%), transparent 62%), radial-gradient(38rem 26rem at 88% 85%, rgb(37 166 255 / 28%), transparent 60%), var(--color-primary)
}
.cx-why h2, .cx-why h3, .cx-why h4 { color: #fff; }

.cx-why-card {
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 1.4rem 1.35rem;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.cx-why-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(35, 161, 219, 0.5);
  transform: translateY(-4px);
}
.cx-why-card i {
  color: var(--color-accent);
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
  display: block;
}
.cx-why-card h4 { margin-bottom: 0.35rem; font-size: 1rem; }
.cx-why-card p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); margin: 0; }

/* --------------------------------------------------------------------------
   13. SPARE PARTS
   -------------------------------------------------------------------------- */
.cx-part-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  padding-bottom: 1.35rem;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cx-part-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-tint-strong);
}
.cx-part-card__media { background: var(--color-light); overflow: hidden; }
.cx-part-card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cx-part-card:hover .cx-part-card__media img { transform: scale(1.07); }
.cx-part-card h3 {
  font-size: 1rem;
  margin: 1.1rem 1rem 0.35rem;
}
.cx-part-card p {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin: 0 1rem 1rem;
  min-height: 2.4em;
}

/* --------------------------------------------------------------------------
   14. BRANDS
   -------------------------------------------------------------------------- */
.cx-brand-tile {
  height: 96px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--color-muted);
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--t), opacity var(--t), color var(--t),
    border-color var(--t), box-shadow var(--t);
}
.cx-brand-tile:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--color-secondary);
  border-color: var(--color-tint-strong);
  box-shadow: var(--shadow-sm);
}
.cx-brand-tile img { max-height: 46px; width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   15. PROCESS STEPS
   -------------------------------------------------------------------------- */
.cx-process { position: relative; }
.cx-process__track { position: relative; }

/* Connecting line on desktop only */
@media (min-width: 992px) {
  .cx-process__track::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--color-tint-strong),
      var(--color-accent),
      var(--color-tint-strong)
    );
    z-index: 0;
  }
}

.cx-step { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; }
.cx-step__icon {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--color-secondary);
  background: #fff;
  border: 2px solid var(--color-tint-strong);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.cx-step:hover .cx-step__icon {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  transform: translateY(-4px);
}
.cx-step__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary);
  border: 2px solid #fff;
}
.cx-step h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.cx-step p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }

@media (max-width: 991.98px) {
  .cx-step { text-align: left; display: flex; gap: 1.1rem; align-items: flex-start; }
  .cx-step__icon { margin: 0; flex: 0 0 64px; width: 64px; height: 64px; font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   16. TESTIMONIALS
   -------------------------------------------------------------------------- */
.cx-quote-card {
  height: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), border-color var(--t);
}
.cx-quote-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-tint-strong); }

/* Google-review style card: brand mark instead of a customer photo */
.cx-review__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.cx-review__brand {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.cx-review__brand svg { display: block; }
.cx-review__who { min-width: 0; }
.cx-review__who strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-review__who span {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-stars {
  display: flex;
  gap: 0.15rem;
  color: #fbbc05;
  font-size: 0.875rem;
  letter-spacing: 0;
  margin-bottom: 0.8rem;
}
.cx-review p {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
}

.cx-placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  background: var(--color-light);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
}
.cx-placeholder-note i { color: var(--color-accent); }

/* Light swiper controls (on white backgrounds) */
.cx-swiper-nav--light {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}
.cx-swiper-nav--light:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.cx-swiper-nav.swiper-button-disabled { opacity: 0.4; pointer-events: none; }

.cx-swiper-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cx-dots { position: static !important; margin-top: 2rem; display: flex; justify-content: center; gap: 0.45rem; }
.cx-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--color-border);
  opacity: 1;
  margin: 0 !important;
  transition: background-color var(--t), width var(--t);
}
.cx-dots .swiper-pagination-bullet-active {
  background: var(--color-secondary);
  width: 26px;
  border-radius: var(--radius-pill);
}

/* Give slides equal height inside sliders */
.cx-equal .swiper-slide { height: auto; }
.cx-equal .swiper-slide > * { height: 100%; }

/* --------------------------------------------------------------------------
   17. CTA BANNER
   -------------------------------------------------------------------------- */
.cx-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(45rem 28rem at 12% 20%, rgba(35, 161, 219, 0.22), transparent 62%),
    radial-gradient(38rem 26rem at 88% 85%, rgba(6, 102, 168, 0.28), transparent 60%),
    var(--color-primary);
  color: rgba(255, 255, 255, 0.8);
}
.cx-cta h2 { color: #fff; }
.cx-cta__inner { position: relative; z-index: 2; }
.cx-cta__icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #fff;
  background: rgba(35, 161, 219, 0.2);
  border: 1px solid rgba(35, 161, 219, 0.4);
}
.cx-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (min-width: 992px) {
  .cx-cta__actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   18. CONTACT
   -------------------------------------------------------------------------- */
.cx-contact-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.cx-form label.form-label {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
  letter-spacing: -0.005em;
}
.cx-form .form-label .cx-req { color: #d64545; }

.cx-form .form-control,
.cx-form .form-select {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  font-size: var(--fs-sm);
  color: var(--color-text);
  background-color: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 48px;
}
.cx-form .form-control::placeholder { color: #9aa7b8; }
.cx-form .form-control:focus,
.cx-form .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(35, 161, 219, 0.14);
  outline: none;
}
.cx-form textarea.form-control { min-height: 130px; resize: vertical; }

.cx-form .form-control.is-invalid,
.cx-form .form-select.is-invalid {
  border-color: #d64545;
  background-image: none;
}
.cx-form .form-control.is-invalid:focus,
.cx-form .form-select.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.14);
}
.cx-form .invalid-feedback { font-size: var(--fs-xs); font-weight: 500; }

/* Hanging icon, not flex — inline <code> inside the note must stay in the
   sentence instead of becoming its own column. */
.cx-form-note {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  position: relative;
  padding-left: 1.5rem;
}
.cx-form-note i {
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0.3em;
}

.cx-form-status {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--fs-sm);
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
}
.cx-form-status.is-visible { display: flex; }
.cx-form-status--ok {
  background: var(--color-tint);
  border: 1px solid var(--color-tint-strong);
  color: var(--color-secondary);
}
.cx-form-status--err {
  background: #fdf1f1;
  border: 1px solid #f6d6d6;
  color: #b93c3c;
}

/* Contact detail rows */
.cx-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.cx-contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.cx-contact-list__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-secondary);
  font-size: 1rem;
}
.cx-contact-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}
.cx-contact-list span, .cx-contact-list a {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 500;
}
.cx-contact-list a:hover { color: var(--color-secondary); }

/* Map placeholder */
.cx-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-light);
  min-height: 300px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.cx-map i { font-size: 2rem; color: var(--color-accent); margin-bottom: 0.75rem; }
.cx-map p { font-size: var(--fs-sm); color: var(--color-muted); max-width: 26rem; margin: 0 auto; }
.cx-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.cx-footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-sm);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.cx-footer h4 {
  color: #fff;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.cx-footer .cx-brand__mark { color: var(--color-accent); }
.cx-footer .cx-brand__name { color: #fff; }
.cx-footer .cx-brand__name span { color: var(--color-accent); }
.cx-footer .cx-brand__tag { color: rgba(255, 255, 255, 0.55); }
.cx-footer p { color: rgba(255, 255, 255, 0.68); }

.cx-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cx-footer-links a {
  color: rgba(255, 255, 255, 0.68);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.cx-footer-links a i { font-size: 0.65rem; color: var(--color-accent); transition: transform var(--t-fast); }
.cx-footer-links a:hover { color: #fff; }
.cx-footer-links a:hover i { transform: translateX(3px); }

.cx-social { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.cx-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  transition: background-color var(--t-fast), color var(--t-fast),
    border-color var(--t-fast), transform var(--t-fast);
}
.cx-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-3px);
}

.cx-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }
.cx-footer-contact li { display: flex; gap: 0.75rem; align-items: flex-start; }
.cx-footer-contact i { color: var(--color-accent); margin-top: 0.35rem; font-size: 0.9rem; width: 1rem; }
.cx-footer-contact a { color: rgba(255, 255, 255, 0.68); }
.cx-footer-contact a:hover { color: #fff; }

.cx-footer-bottom {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.35rem 0;
  font-size: var(--fs-xs);
}
.cx-footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.cx-footer-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.cx-footer-legal a { color: rgba(255, 255, 255, 0.6); }
.cx-footer-legal a:hover { color: #fff; }

.cx-footer-credit { color: rgba(255, 255, 255, 0.55); }
.cx-footer-credit a {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cx-footer-credit a:hover,
.cx-footer-credit a:focus-visible {
  color: #fff;
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767.98px) {
  .cx-footer-bottom__inner { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   20. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
/* Compact banner: breadcrumb and title only, so it does not push the page
   content far down the screen */
.cx-page-hero {
  position: relative;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0;
  background:
    radial-gradient(40rem 26rem at 85% 10%, rgba(35, 161, 219, 0.16), transparent 62%),
    var(--color-primary);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}
.cx-page-hero h1 { color: #fff; margin-bottom: 0; }
.cx-page-hero p { font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.76); max-width: 38rem; margin: 0; }

.cx-breadcrumb { margin-bottom: 1.1rem; }
.cx-breadcrumb .breadcrumb { margin: 0; font-size: var(--fs-xs); }
.cx-breadcrumb .breadcrumb-item a { color: #9fd6f4; }
.cx-breadcrumb .breadcrumb-item a:hover { color: #fff; }
.cx-breadcrumb .breadcrumb-item.active { color: rgba(255, 255, 255, 0.62); }
.cx-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.35); }

/* --------------------------------------------------------------------------
   21. ENQUIRY MODAL
   -------------------------------------------------------------------------- */
.cx-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cx-modal .modal-dialog { max-width: 30rem; }
.cx-modal .modal-body { padding: 1.35rem 1.5rem 1.6rem; }

.cx-modal__head {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(22rem 12rem at 100% 0%, rgba(35, 161, 219, 0.14), transparent 65%),
    #fff;
}
.cx-modal__title {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}
.cx-modal__note {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin: 0;
}
.cx-modal__close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cx-modal__close:hover {
  background: var(--color-tint);
  border-color: var(--color-tint-strong);
  color: var(--color-secondary);
}

.cx-modal .cx-form-status:empty { display: none; }

@media (max-width: 575.98px) {
  .cx-modal .modal-dialog { margin: 0.75rem; }
  .cx-modal__head { padding: 1.1rem 1.15rem 0.9rem; }
  .cx-modal .modal-body { padding: 1.1rem 1.15rem 1.35rem; }
  .cx-modal__title { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   22. DETAIL PAGES (service-detail.html, product-detail.html)
   -------------------------------------------------------------------------- */

/* Sticky booking / summary panel */
.cx-detail-panel {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem 1.4rem 1.6rem;
}
.cx-detail-panel__title { font-size: 1.25rem; margin-bottom: 0.35rem; }
.cx-detail-panel__note {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}
.cx-detail-panel__actions { display: grid; gap: 0.65rem; }

.cx-detail-facts {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.cx-detail-facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--color-border);
}
.cx-detail-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.cx-detail-facts__label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cx-detail-facts__value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-align: right;
}

/* Two actions side by side at the foot of a card */
.cx-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
}

/* Muted variant of the check list — for caveats rather than inclusions */
.cx-check-list--muted li { color: var(--color-muted); }
.cx-check-list--muted i { color: var(--color-muted); }

/* Product gallery */
.cx-gallery__main {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-light);
  box-shadow: var(--shadow-sm);
}
.cx-gallery__main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cx-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.cx-gallery__thumbs > * { flex: 1 1 0; min-width: 4.5rem; }
.cx-gallery__thumb {
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-light);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.cx-gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cx-gallery__thumb:hover { border-color: var(--color-tint-strong); transform: translateY(-2px); }
.cx-gallery__thumb.is-active { border-color: var(--color-secondary); }

/* Product summary */
.cx-detail-lead { font-size: var(--fs-lead); }
.cx-detail-price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.35rem 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--color-tint);
  border: 1px solid var(--color-tint-strong);
}
.cx-detail-price span {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
}
.cx-detail-price small { font-size: var(--fs-xs); color: var(--color-muted); }

.cx-detail-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Specification list */
.cx-spec-list { margin: 0; }
.cx-spec-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cx-spec-list > div:last-child { border-bottom: 0; }
.cx-spec-list dt {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
}
.cx-spec-list dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-align: right;
}

@media (max-width: 991.98px) {
  .cx-detail-panel { position: static; }
}

@media (max-width: 575.98px) {
  .cx-gallery__thumbs { gap: 0.5rem; }
  .cx-detail-actions .cx-btn { flex: 1 1 100%; }
  .cx-spec-list dd, .cx-detail-facts__value { text-align: left; }
}

/* Rich text straight out of the admin editor (category / portfolio copy) */
.cx-rte { color: var(--color-muted); }
.cx-rte > *:last-child { margin-bottom: 0; }
.cx-rte p { margin-bottom: 1rem; }
.cx-rte h2, .cx-rte h3, .cx-rte h4 { margin: 1.6rem 0 0.75rem; color: var(--color-primary); }
.cx-rte ul, .cx-rte ol { padding-left: 1.15rem; margin-bottom: 1rem; }
.cx-rte li { margin-bottom: 0.4rem; }
.cx-rte img { max-width: 100%; height: auto; border-radius: var(--radius); }
.cx-rte a { color: var(--color-secondary); }
.cx-rte table { width: 100%; }

/* Share row at the foot of the detail panel */
.cx-detail-panel__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--color-border);
}
.cx-detail-panel__share .cx-detail-facts__label { margin-right: auto; }
.cx-detail-panel__share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cx-detail-panel__share a:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* Listing toolbar + category chips */
.cx-listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
}
.cx-listing-count { font-size: var(--fs-sm); color: var(--color-muted); }
.cx-listing-count strong { color: var(--color-primary); }

.cx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cx-chip:hover {
  background: var(--color-tint);
  border-color: var(--color-tint-strong);
  color: var(--color-secondary);
}
.cx-chip.is-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* Numeric pagination under a listing grid */
.cx-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 3rem;
}
.cx-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cx-page-link:hover {
  background: var(--color-tint);
  border-color: var(--color-tint-strong);
  color: var(--color-secondary);
}
.cx-page-link.is-current {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.cx-page-link.is-disabled { opacity: 0.45; pointer-events: none; }

/* --------------------------------------------------------------------------
   23. MISC COMPONENTS
   -------------------------------------------------------------------------- */
/* Accordion (AMC / FAQ) */
.cx-accordion .accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius) !important;
  margin-bottom: 0.85rem;
  overflow: hidden;
  background: #fff;
}
.cx-accordion .accordion-button {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
  padding: 1.15rem 1.35rem;
  background: #fff;
  box-shadow: none;
}
.cx-accordion .accordion-button:not(.collapsed) {
  color: var(--color-secondary);
  background: var(--color-tint);
}
.cx-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.cx-accordion .accordion-body {
  padding: 0 1.35rem 1.35rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Pricing / AMC plan cards */
.cx-plan {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cx-plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cx-plan--featured {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}
.cx-plan__flag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.cx-plan__name { font-size: 1.15rem; margin-bottom: 0.3rem; }
.cx-plan__desc { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: 1.35rem; }
.cx-plan__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; }
.cx-plan__list li { display: flex; gap: 0.6rem; font-size: var(--fs-sm); align-items: flex-start; }
.cx-plan__list i { color: var(--color-accent); margin-top: 0.32rem; font-size: 0.85rem; }
.cx-plan .cx-btn { margin-top: auto; }

/* Back-to-top */
.cx-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 1040;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--color-secondary);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background-color var(--t-fast);
}
.cx-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cx-to-top:hover { background: var(--color-primary); }

/* Floating WhatsApp button — sits in the same corner, with the back-to-top
   button stacked above it so the two never overlap */
.cx-whatsapp {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 1041;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  font-size: 1.65rem;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  transition: transform var(--t-fast), box-shadow var(--t), background-color var(--t-fast);
}
.cx-whatsapp:hover,
.cx-whatsapp:focus-visible {
  color: #fff;
  background: #1fbe5a;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45);
}
.cx-whatsapp:active { transform: translateY(0); }

/* Slow ripple so the button reads as live without demanding attention */
.cx-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.45);
  z-index: -1;
  animation: cxWhatsPulse 2.6s var(--ease) infinite;
}
@keyframes cxWhatsPulse {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.cx-to-top { bottom: calc(clamp(1rem, 2vw, 1.75rem) + 54px + 0.6rem); }

/* Reveal-on-scroll */
.cx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  will-change: opacity, transform;
}
.cx-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. RESPONSIVE REFINEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root { --header-h: 68px; }
  .cx-badge-card { position: static; margin-top: 1rem; max-width: none; }
  .cx-section-heading { text-align: left; }
  .cx-section-heading--center { text-align: center; }
}

@media (min-width: 1440px) {
  :root { --section-y: 4rem; }
  .cx-container { max-width: 1320px; }
}
@media (min-width: 1650px) {
  .cx-container { max-width: 1500px; }
}
/* --------------------------------------------------------------------------
   25. MOBILE EXPERIENCE
   Phone-first refinements: a compact header, a shorter banner, touch-sized
   targets, press feedback instead of hover, and a fixed call/book bar.
   -------------------------------------------------------------------------- */

/* --- Header ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .cx-navbar { padding: 0.55rem 0; }
  .cx-navbar.is-stuck { padding: 0.4rem 0; }
  .cx-brand img { max-height: 44px; width: auto; }
  .cx-brand__mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 1.65rem; }
  .cx-brand__name { font-size: 1.2rem; }
  .cx-brand__tag { font-size: 0.625rem; }
  .cx-toggler { width: 44px; height: 44px; }

  /* The panel scrolls on its own without dragging the page behind it */
  .cx-nav-panel__body { overscroll-behavior: contain; }
}

/* --- Banner ------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cx-hero__content {
    padding-top: 1.85rem;
    padding-bottom: 2.25rem;
  }
  .cx-hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.65rem; }
  .cx-hero__title { line-height: 1.12; }
  .cx-hero__text { margin-bottom: 1.5rem; }
  .cx-hero__features { margin-top: 1.5rem; gap: 0.75rem; }

  /* Tiles sit on the section ground now rather than over a photograph */
  .cx-hero__features li {
    flex: 1 1 calc(50% - 0.75rem);
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
  }
  .cx-hero__feature-icon {
    background: var(--color-tint);
    border-color: var(--color-tint-strong);
  }
}

@media (max-width: 400px) {
  :root { --fs-display: 2.05rem; }
}

/* --- Touch ergonomics --------------------------------------------------- */
@media (hover: none) {
  /* Hover lifts stick on touch devices — press feedback instead */
  .cx-btn:hover,
  .cx-quick-card:hover,
  .cx-product-card:hover,
  .cx-part-card:hover,
  .cx-service-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .cx-btn:active { transform: scale(0.98); }
  .cx-quick-card:active,
  .cx-product-card:active,
  .cx-part-card:active { transform: scale(0.99); }
  .cx-product-card:hover .cx-product-card__media img { transform: none; }
}

@media (max-width: 991.98px) {
  /* Comfortable thumb targets on every inline link that acts as a button */
  .cx-link { padding-block: 0.35rem; }
  .cx-footer-links a { padding-block: 0.15rem; display: inline-block; }

  /* Swiping a slider should not pull the page or trigger browser back */
  .swiper { overscroll-behavior-x: contain; }

  /* 16px inputs stop iOS zooming the page on focus */
  .cx-form .form-control,
  .cx-form .form-select { font-size: 1rem; }
}

/* --- Fixed call / book bar ---------------------------------------------- */
.cx-actionbar { display: none; }

@media (max-width: 991.98px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  .cx-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 28px rgba(19, 29, 61, 0.1);
  }
  /* The call link is an <a> and the enquiry trigger a <button>: style both, or
     the button falls back to the browser's square default next to a pill. */
  .cx-actionbar a,
  .cx-actionbar button {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: transform var(--t), box-shadow var(--t);
  }
  .cx-actionbar a:active,
  .cx-actionbar button:active { transform: scale(0.98); }
  .cx-actionbar__call {
    color: var(--color-primary);
    background: var(--color-tint);
    border: 1.5px solid var(--color-tint-strong);
  }
  .cx-actionbar__cta {
    color: #fff;
    background: var(--color-secondary);
    border: 1.5px solid var(--color-secondary);
    box-shadow: 0 6px 16px rgba(6, 102, 168, 0.28);
  }
  .cx-actionbar__cta:hover,
  .cx-actionbar__cta:focus-visible { color: #fff; }
  .cx-actionbar i { font-size: 0.9em; flex: 0 0 auto; }

  /* Lift the back-to-top button clear of the bar */
  .cx-whatsapp {
    width: 48px;
    height: 48px;
    font-size: 1.45rem;
    right: 0.9rem;
    bottom: calc(66px + 0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .cx-to-top { bottom: calc(66px + 0.85rem + 48px + 0.55rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  .cx-actionbar a,
  .cx-actionbar button { font-size: 0.875rem; padding-inline: 0.6rem; }
}

/* --- Tighter rhythm and type on phones ---------------------------------- */
@media (max-width: 767.98px) {
  :root {
    /* Section padding and the heading scale both step down together */
    --section-y: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
    --fs-display: clamp(1.95rem, 1.4rem + 2.6vw, 2.5rem);
    --fs-h1: clamp(1.7rem, 1.3rem + 2vw, 2.2rem);
    --fs-h2: clamp(1.35rem, 1.1rem + 1.4vw, 1.75rem);
    --fs-h3: 1.05rem;
    --fs-lead: 0.9375rem;
    --fs-body: 0.9375rem;
    --fs-sm: 0.875rem;
  }

  h4 { font-size: 1rem; }

  /* Gaps between a section heading and its content, and between grid items */
  .cx-section .mb-5 { margin-bottom: 1.75rem !important; }
  .cx-section .row.g-4,
  .cx-section .row.g-4.g-lg-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

  /* g-5 rows carry -24px side margins against a 12px container padding, which
     pushed the page 12px wider than the screen and gave it a sideways scroll.
     Matching the gutter to the container keeps every row inside the viewport. */
  .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
  .cx-section-heading h2 { margin-bottom: 0.5rem; }
  .cx-eyebrow { margin-bottom: 0.75rem; padding: 0.3rem 0.7rem; }

  /* Card interiors. Service cards sit two per row on phones, so everything
     inside them steps down further. */
  .cx-service-card { padding: 1rem 0.9rem 1.1rem; }
  .cx-service-card__icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
  }
  .cx-service-card h3 { font-size: 0.95rem; line-height: 1.3; margin-bottom: 0.35rem; }
  .cx-service-card p { font-size: 0.8125rem; line-height: 1.55; margin-bottom: 0.8rem; }
  .cx-service-card .cx-check-list { gap: 0.45rem; margin-bottom: 1rem !important; }
  .cx-service-card .cx-check-list li { font-size: 0.75rem; gap: 0.45rem; line-height: 1.45; }
  .cx-service-card .cx-check-list i { font-size: 0.75rem; margin-top: 0.25rem; }
  .cx-service-card .cx-link { font-size: 0.75rem; }

  /* Why-choose-us tiles sit two per row on phones too */
  .cx-why-card { padding: 0.95rem 0.85rem 1rem; }
  .cx-why-card i { font-size: 1.15rem; margin-bottom: 0.6rem; }
  .cx-why-card h4 { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.35rem; }
  .cx-why-card p { font-size: 0.75rem; line-height: 1.5; }
  .cx-plan { padding: 1.5rem 1.25rem; }
  .cx-quote-card { padding: 1.35rem 1.2rem; }
  .cx-part-card { padding-bottom: 1.1rem; }
  .cx-contact-panel { padding: 1.35rem 1.15rem; }

  /* Page furniture */
  .cx-page-hero { padding: 1.35rem 0 1.5rem; }
  .cx-footer { padding-top: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); }
  .cx-footer-bottom { margin-top: 1.75rem; padding: 1rem 0; }
}

/* --- Quick cards: a swipeable strip on phones --------------------------- */
@media (max-width: 767.98px) {
  /* The Bootstrap row becomes a snapping horizontal scroller */
  .cx-quick__grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 0.75rem;
    scrollbar-width: none;
  }
  .cx-quick__grid::-webkit-scrollbar { display: none; }
  .cx-quick__grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 60%;
    max-width: 15rem;
    scroll-snap-align: start;
  }

  /* Smaller tiles, and the description is dropped — the heading and the
     link carry the card at this size */
  .cx-quick-card { padding: 1.1rem 1.05rem 1.2rem; }
  .cx-quick-card p { display: none; }
  .cx-quick-card h3 { font-size: 1rem; margin-bottom: 0.75rem; }
  .cx-quick-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.1rem;
    margin-bottom: 0.9rem;
  }
  .cx-nav-panel__head{
      justify-content:space-between;
  }
  .cx-quick-card .cx-link { font-size: var(--fs-xs); }
  .cx-quick-card::before {
    width: 96px;
    height: 96px;
    right: -24px;
    bottom: -26px;
  }
    .cx-quick{
        padding:1rem 0!important;
    }
    .cx-hero__actions{
        display:none;
    }
    .cx-nav-phone__icon {
        display: flex !important;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   26. MOTION & PRINT PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cx-reveal { opacity: 1; transform: none; }
  .cx-ticker { overflow-x: auto; }
  .cx-ticker__viewport { animation: none; }
  .cx-hero__air { display: none; }
  .cx-hero__content > * { opacity: 1; transform: none; animation: none; }
}

@media print {
  .cx-header, .cx-to-top, .cx-whatsapp, .cx-actionbar, .cx-hero, .cx-cta { display: none !important; }
  body { color: #000; }
}